For English reader:
Hello I’m Cong, now I’m a developer in CEC Revenue Cloud in Chengdu, China. This blog is writter in both English and German (for learning purpose). Please just read the bold paragraphs and sorry for the inconvenience. Thanks a lot!
Für Deutsch Leser:
Hallo ich bin Cong. Jetzt bin ich ein Developer bei CEC Revenue Cloud in Chengdu, China. Ich möchte Programmierkenntnisse hier teilen und gleichzeitig mein Deutsch verbessern. Deshalb schreibe ich Blogs in Deutsch und Enghlish. Wenn Sie Syntaxfehler finden, oder mein Deutsch ist zu schlecht zu verstehen, bitte lesen Sie die English Version und sagen Sie mir den richtigen Ausdruck. Herzlich Dank und ich hoffe, dass Sie meinen Blog genießen. Prost!
For UI5 developers maybe Demo Kit is the most useful tool. We could find many documents as well as samples. But sometimes we still have some questions that Demo Kit could not answer. So I would like to write a blog series called “Things that Demo Kit didn’t tell you“. In this series I would like to explore the controls with some other resources, e.g. source code, Fiori Guideline. Hope this series could help you and if you find any mistakes in my blog please also help to point them out. Thank you! Catalog of this series could be found here.
Vielleicht ist Demo-Kit das sinnvollste Werkzeug für UI5-Developer. Da können wir viele Dokument und Beispiele finden. Aber manchmal gibt es noch einige Frage, die Demo-Kit nicht antwort kann. Deshalb möchte ich eine Blogserie “Dinge, die Demo-Kit Ihnen nicht mitgeteilt hat” schreiben. In diese Serie erforsche ich Controls mit verschiedener Ressource, z.B. Quellcode, Fiori Guideline. Ich hoffe, dass diese Serie sinnvoll für Sie ist. Wenn Sie Fehler in meinem Blog finden, bitte hinweisen Sie mir. Danke schön. Der Katalog dieser Serie ist hier.
Maybe you have already know, that both VBox and HBox are extended from FlexBox. And seems that they are just FlexBox with different direction property (Column or Row). So I was expecting that in the source code of HBox/VBox there are some logic to ensure the direction could not be changed. But if you open the source code of HBox/VBox you will see there's almost nothing. Actually the only related logic is in the init function of FlexBox
Vielleicht haben Sie schon gewissen, dass beide VBox und HBox von FlexBox erweitert werden. Und sie sehen aus, dass sie nur FlexBox mit unterschiedlicher Direction Eingenschaft (Column order Row) sind. Deshalb erwarte ich, dass es einige Logik in dem Quellecode der HBox/VBox gibt, um die Direction Eigenschaft zu sorgen. Aber wenn Sie den Quellecode der HBox/VBox einmal sehen, da gibt es fast nichts. Tatsächlich ist die ausschließliche relevante Logik in der init Function von FlexBox.
For me this is a lazy implementation and I could not see the advantage of it. The direction is only judged when the control is initialized, but later user could still change it.
Für mich ist es eine faule Implementierung und gibt es keine Vorteile. Die Direction wird nur gewertet, wenn die Kontrolle initialisiert werden, aber später kann man ihr nicht verändern.
When you have a look at the HTML code of a FlexBox, normally it has two layers of <div> (if renderType is List it will be <ul> and <li>). The first <div> is the container itself. The second <div> is called "wrapper", or in another word, the LayoutData (for FlexBox is FlexItemData), which is used to adjust the layout of each items.
Wenn man den HTML Code des FlexBox einmal sieht, normalerweise gibt es zwei Schichte <div> (wenn die renderType Eigenschaft "List" ist, es ist <ul> und <li>). Die erste <div> ist der Container selbst. Die zweite <div> ist "Wrapper", oder in einem anderen Wort, die LayoutData (für FlexBox ist FlexItemData), sie kann das Layout der Items einstellen.
Besides FlexBox.js and FlexBoxRenderer.js, there is another file called FlexBoxStylingHelper.js. And it is used to set the layout properties of each items. User could add new items to a FlexBox at runtime, and the setFlexItemStyles function will be attached to each item's afterRendering event to add style classes to the item.
Außerdem FlexBox.js und FlexBoxRenderer.js gibt es auch eine andere Datei namens FlexBoxStylingHelper.js. Sie kann das Layout der Items setzen. Benutzer kann neue Items in einen FlexBox zur Laufzeit hinzufügen. Und die setFlexItemStyles Funktion wird zu das afterRendering Event anfügt, um dem Item Style Classes hinzuzufügen.
Sometimes the property alignItems will have influence on the item's width, and result in a wrong wrapping behavior. You could check an interesting example and its solution in my another blog.
Manchmal die Eigenschaft alignItem hat Einfluss auf die Breite des Item. Und sie kann zu einem falschen Wrapping Verhalten führen. Du kannst einen interessanten Beispiel und die Lösung in meinem anderen Blog finden.
Hello I’m Cong, now I’m a developer in CEC Revenue Cloud in Chengdu, China. This blog is writter in both English and German (for learning purpose). Please just read the bold paragraphs and sorry for the inconvenience. Thanks a lot!
Für Deutsch Leser:
Hallo ich bin Cong. Jetzt bin ich ein Developer bei CEC Revenue Cloud in Chengdu, China. Ich möchte Programmierkenntnisse hier teilen und gleichzeitig mein Deutsch verbessern. Deshalb schreibe ich Blogs in Deutsch und Enghlish. Wenn Sie Syntaxfehler finden, oder mein Deutsch ist zu schlecht zu verstehen, bitte lesen Sie die English Version und sagen Sie mir den richtigen Ausdruck. Herzlich Dank und ich hoffe, dass Sie meinen Blog genießen. Prost!
For UI5 developers maybe Demo Kit is the most useful tool. We could find many documents as well as samples. But sometimes we still have some questions that Demo Kit could not answer. So I would like to write a blog series called “Things that Demo Kit didn’t tell you“. In this series I would like to explore the controls with some other resources, e.g. source code, Fiori Guideline. Hope this series could help you and if you find any mistakes in my blog please also help to point them out. Thank you! Catalog of this series could be found here.
Vielleicht ist Demo-Kit das sinnvollste Werkzeug für UI5-Developer. Da können wir viele Dokument und Beispiele finden. Aber manchmal gibt es noch einige Frage, die Demo-Kit nicht antwort kann. Deshalb möchte ich eine Blogserie “Dinge, die Demo-Kit Ihnen nicht mitgeteilt hat” schreiben. In diese Serie erforsche ich Controls mit verschiedener Ressource, z.B. Quellcode, Fiori Guideline. Ich hoffe, dass diese Serie sinnvoll für Sie ist. Wenn Sie Fehler in meinem Blog finden, bitte hinweisen Sie mir. Danke schön. Der Katalog dieser Serie ist hier.
FlexBox? VBox? HBox?
FlexBox? VBox? HBox?
Maybe you have already know, that both VBox and HBox are extended from FlexBox. And seems that they are just FlexBox with different direction property (Column or Row). So I was expecting that in the source code of HBox/VBox there are some logic to ensure the direction could not be changed. But if you open the source code of HBox/VBox you will see there's almost nothing. Actually the only related logic is in the init function of FlexBox
Vielleicht haben Sie schon gewissen, dass beide VBox und HBox von FlexBox erweitert werden. Und sie sehen aus, dass sie nur FlexBox mit unterschiedlicher Direction Eingenschaft (Column order Row) sind. Deshalb erwarte ich, dass es einige Logik in dem Quellecode der HBox/VBox gibt, um die Direction Eigenschaft zu sorgen. Aber wenn Sie den Quellecode der HBox/VBox einmal sehen, da gibt es fast nichts. Tatsächlich ist die ausschließliche relevante Logik in der init Function von FlexBox.
For me this is a lazy implementation and I could not see the advantage of it. The direction is only judged when the control is initialized, but later user could still change it.
Für mich ist es eine faule Implementierung und gibt es keine Vorteile. Die Direction wird nur gewertet, wenn die Kontrolle initialisiert werden, aber später kann man ihr nicht verändern.
Structure of FlexBox
Struktur des FlexBox
When you have a look at the HTML code of a FlexBox, normally it has two layers of <div> (if renderType is List it will be <ul> and <li>). The first <div> is the container itself. The second <div> is called "wrapper", or in another word, the LayoutData (for FlexBox is FlexItemData), which is used to adjust the layout of each items.
Wenn man den HTML Code des FlexBox einmal sieht, normalerweise gibt es zwei Schichte <div> (wenn die renderType Eigenschaft "List" ist, es ist <ul> und <li>). Die erste <div> ist der Container selbst. Die zweite <div> ist "Wrapper", oder in einem anderen Wort, die LayoutData (für FlexBox ist FlexItemData), sie kann das Layout der Items einstellen.
Besides FlexBox.js and FlexBoxRenderer.js, there is another file called FlexBoxStylingHelper.js. And it is used to set the layout properties of each items. User could add new items to a FlexBox at runtime, and the setFlexItemStyles function will be attached to each item's afterRendering event to add style classes to the item.
Außerdem FlexBox.js und FlexBoxRenderer.js gibt es auch eine andere Datei namens FlexBoxStylingHelper.js. Sie kann das Layout der Items setzen. Benutzer kann neue Items in einen FlexBox zur Laufzeit hinzufügen. Und die setFlexItemStyles Funktion wird zu das afterRendering Event anfügt, um dem Item Style Classes hinzuzufügen.
Be Careful of the Property alignItems
Achten Sie auf die Eigenschaft alignItems
Sometimes the property alignItems will have influence on the item's width, and result in a wrong wrapping behavior. You could check an interesting example and its solution in my another blog.
Manchmal die Eigenschaft alignItem hat Einfluss auf die Breite des Item. Und sie kann zu einem falschen Wrapping Verhalten führen. Du kannst einen interessanten Beispiel und die Lösung in meinem anderen Blog finden.
- SAP Managed Tags:
