Fließendes Layout ist sehr nützlich, um mit Boxen umzugehen, deren Größe während der Laufzeit variieren kann, wie bei Boxen unter- oder nebeneinander. Es ist nicht nötig die exakte Position einer fließenden Box zu bestimmen, weil sie berechnet wird, an Hand der Angaben der übergeordneten Box. Außerdem, wenn eine Box dynamisch geändert wird, werden auch ihre untergeordneten automatisch angepasst.
Um fließendes Layout explizit zu definieren, muss das s:position Attribut wie in folgendem Code benutzt werden.
<box id="myBox" s:height="100" s:width="100" s:fill="green" s:position="flow" />
Fließendes Layout ist die Standardeinstellung, es muss also nicht explizit definiert werden.
Wenn fließendes Layout benutzt wird, werden Boxen basierend auf den Einstellungen der übergeordneten Box angeordnet und in der Größe angepasst. Zum Beispiel, wenn die übergeordnete Box vertikal angeordnet ist, werden untergeordnete Boxen genauso angeordnet.
Um zu demonstrieren wie es funtioniert, erstellen wir zwei Fenster. Das erste wird zwölf Boxen enthalten, direkt im Window Element; keine Parent/Child Beziehung wird zwischen diesen Boxen existieren. Das zweite wird einige Parent Boxen enthalten, die ihre enthaltenen Child Boxen beeinflussen.
Boxen ohne Parent/Child Beziehung:
Wir erstellen ein einfaches Szenario mit einem Text Editor, indem wir folgenden Text dort einfügen, und die Datei mit der Erweiterung .box speichern:
<?xml version="1.0" encoding="utf-8" ?> <?import href="box://ocpToolkit/content/core/coreGadgets.box"?> <?import href="box://ocpToolkit/theme/default/toolkit.box"?> <window xmlns="http://www.aol.com/boxely/box.xsd" xmlns:s="http://www.aol.com/boxely/style.xsd" xmlns:on="http://www.aol.com/boxely/reaction.xsd" s:top="center" s:left="center" s:height="300" s:width="300" s:fill="white" title="Demonstrating Layout" > </window>
Hinzufügen von zwölf Boxen, direkt im window Element. (Diese Boxen haben keine übergeordnete Box.)
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<window xmlns="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
xmlns:on="http://www.aol.com/boxely/reaction.xsd"
s:top="center" s:left="center" s:height="300" s:width="300"
s:fill="white" title="Demonstrating Layout" >
<box s:width="30" s:height="30" s:fill="green" />
<box s:width="30" s:height="30" s:fill="blue" />
<box s:width="30" s:height="30" s:fill="green" />
<box s:width="30" s:height="30" s:fill="blue" />
<box s:width="30" s:height="30" s:fill="green" />
<box s:width="30" s:height="30" s:fill="blue" />
<box s:width="30" s:height="30" s:fill="green" />
<box s:width="30" s:height="30" s:fill="blue" />
<box s:width="30" s:height="30" s:fill="green" />
<box s:width="30" s:height="30" s:fill="blue" />
<box s:width="30" s:height="30" s:fill="green" />
<box s:width="30" s:height="30" s:fill="blue" />
</window>
Wir speichern, und führen das Szenario aus. Auf der linken Seite sehen wir untereinander abwechseld eine grüne und eine blaue Box.
Weil jede Box keine in der Hierarchie übergeordnete hat, werden sie vertikal orientiert angezeigt.
Boxen mit Parent/Child Beziehung:
Jetzt verpassen wir dem Fenster einige Parent Boxen.
Wir erstellen ein einfaches Szenario mit einem Text Editor, indem wir folgenden Text dort einfügen, und die Datei mit der Erweiterung .box speichern:
<?xml version="1.0" encoding="utf-8" ?> <?import href="box://ocpToolkit/content/core/coreGadgets.box"?> <?import href="box://ocpToolkit/theme/default/toolkit.box"?> <window xmlns="http://www.aol.com/boxely/box.xsd" xmlns:s="http://www.aol.com/boxely/style.xsd" xmlns:on="http://www.aol.com/boxely/reaction.xsd" s:height="300" s:width="300" s:top="center" s:left="center" s:fill="white" title="Demonstrating Layout" > <vbox id="mainContainer" s:vSpace="10" s:flex="1" s:hAlign="center" s:vAlign="center"> <hbox id="firstChildContainer" s:hSpace="10"> <box s:width="30" s:height="30" s:fill="green" /> <box s:width="30" s:height="30" s:fill="blue" /> <box s:width="30" s:height="30" s:fill="green" /> </hbox> <hbox id="secondChildContainer" s:hSpace="10"> <box s:width="30" s:height="30" s:fill="blue" /> <box s:width="30" s:height="30" s:fill="green" /> <box s:width="30" s:height="30" s:fill="blue" /> <box s:width="30" s:height="30" s:fill="green" /> <box s:width="30" s:height="30" s:fill="blue" /> </hbox> <hbox id="thirdChildContainer" s:hSpace="10"> <box s:width="30" s:height="30" s:fill="green" /> <box s:width="30" s:height="30" s:fill="blue" /> <box s:width="30" s:height="30" s:fill="green" /> <box s:width="30" s:height="30" s:fill="blue" /> </hbox> </vbox> </window>
Der oben stehende Code enthält eine vertikale Box mit dem Identifizierungsparameter mainContainer. In der mainContainer Box sind drei horizontale Boxen, identifiziert als firstChildContainer, secondChildContainer, und thirdChildContainer. Um zu demonstrieren, wie Parent Boxen ihre Child Boxen kontrollieren, haben wir einige Style Attribute zu den verschiedenen Parent Boxen hinzugefügt: s:vSpace bestimmt den Abstand zwischen den Boxen in unserer vertikal orientierten Box (mainContainer), s:hSpace bestimmt den horizontalen Abstand zwischen Boxen in unseren horizontal angeordneten Boxen (ChildContainers), und s:hAlign und s:vAlign zentrieren Child Boxen in ihrer Parent Box horizontal und vertikal.
Nach dem Ausführen, sehen wir die Hierarchie die wir erstellt haben.
Orientierung bestimmt ob Boxen in einem Container horizontal oder vertikal fließen. In dieser Übung werden wir einen Container mit zwei Boxen erstellen und lernen, wie man dessen Orientierung ändert.
Wir erstellen ein einfaches Szenario mit einem Text Editor, indem wir folgenden Text dort einfügen, und die Datei mit der Erweiterung .box speichern:
<?xml version="1.0" encoding="utf-8" ?> <?import href="box://ocpToolkit/content/core/coreGadgets.box"?> <?import href="box://ocpToolkit/theme/default/toolkit.box"?> <window xmlns="http://www.aol.com/boxely/box.xsd" xmlns:s="http://www.aol.com/boxely/style.xsd" xmlns:on="http://www.aol.com/boxely/reaction.xsd" id="window" s:fill="white" title="Using Orientation" s:height="400" s:width="400" s:top="center" s:left="center"> <box id="myContainer"> </box> </window>
Hinzufügen zweier Boxen (myBox und myBox2) zur myContainer Box.
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<window xmlns="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
xmlns:on="http://www.aol.com/boxely/reaction.xsd"
id="window" s:fill="white" title="Using Orientation"
s:height="400" s:width="400" s:top="center" s:left="center">
<box id="myContainer">
<box id="myBox" s:height="100" s:width="100" s:fill="green" />
<box id="myBox2" s:height="100" s:width="100" s:fill="red" />
</box>
</window>
Wir habe keine Höhe oder Breite für myContainer festgelegt, weil wir die Boxely Rendering Engine automatisch Höhe und Breite des Containers, basierend auf den enthaltenen Boxen bestimmen lassen (die Größe eines Containers ist die Summe der Größen aller seiner Child Boxen).
Nach dem Ausführen sehen wir eine rote und eine grüne Box, angezeigt in horizontaler Orientierung. (Horizontal ist die Standardorientierung für eine Box.)
Um die Orientierung zu vertikal zu ändern, kann man die folgenden zwei Metoden nutzen:
Mit dem s:orient Attribut die Orientierung bestimmen.
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<window xmlns="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
xmlns:on="http://www.aol.com/boxely/reaction.xsd"
id="window" s:fill="white" title="Using Orientation"
s:height="400" s:width="400" s:top="center" s:left="center">
<box id="myContainer" s:orient="vertical" >
<box id="myBox" s:height="100" s:width="100" s:fill="green" />
<box id="myBox2" s:height="100" s:width="100" s:fill="red" />
</box>
</window>
Eine horizontale Box (hbox) oder vertikale Box (vbox) benutzen , anstelle der Standardbox (box), um den Fluss zu steuern:
<?xml version="1.0" encoding="utf-8" ?> <?import href="box://ocpToolkit/content/core/coreGadgets.box"?> <?import href="box://ocpToolkit/theme/default/toolkit.box"?> <window xmlns="http://www.aol.com/boxely/box.xsd" xmlns:s="http://www.aol.com/boxely/style.xsd" xmlns:on="http://www.aol.com/boxely/reaction.xsd" id="window" s:fill="white" title="Using Orientation" s:height="400" s:width="400" s:top="center" s:left="center"> <vbox id="myContainer" > <box id="myBox" s:height="100" s:width="100" s:fill="green" /> <box id="myBox2" s:height="100" s:width="100" s:fill="red" /> </vbox> </window>
Nach dem Ausführen sehen wir eine rote und eine grüne Box, angezeigt in vertikaler Orientierung:
Zusätzlich zu hbox und vbox, gibt es auch hflow und vflow Tags welche Fluss bestimmend mit vorhandener Orientierung sind. hbox und vbox benutzen das standard Flex Layout Schema wärend hflow und vflow das Flow Layout Schema benutzen.
Im fließenden Layout Schema wird eine Container Box überschüssigen Platz entlang ihrer Flussachse verbrauchen (x-Achse für hbox und y-Achse für vbox), wenn die Summe der Größe seine Child Boxen kleiner ist als der Container.
Um den ungenutzten Platz zu nutzen, kann man Padding um die Child Boxen hinzufügen, indem man die s:hSpace und s:vSpace Attribute benutzt. Zusätzlich kann man die Child Boxen vergrößern durch nutzung des s:flex Attributes. Das s:flex Attribut wird als Faktor gewertet: Falls sich zwei Boxen nebeneinander befinden, mit Flex von "1" und "2", dann wird die Box mit Flex von "2" doppelt so groß sein wie die Box mit Flex von "1".
Die folgende Übung demonstriert, wie man die Attribute s:hSpace, s:vSpace, und s:flex benutzt.
Wir erstellen ein Fenster, mit einer Layout Box, die drei Boxen enthält.
<?xml version="1.0" encoding="utf-8" ?> <?import href="box://ocpToolkit/content/core/coreGadgets.box"?> <?import href="box://ocpToolkit/theme/default/toolkit.box"?> <window xmlns="http://www.aol.com/boxely/box.xsd" xmlns:s="http://www.aol.com/boxely/style.xsd" xmlns:on="http://www.aol.com/boxely/reaction.xsd" s:height="100" s:width="400" s:top="center" s:left="center" s:fill="white" title="Using Alignment"> <box id="layoutBox" s:position="fixed" s:top="center" s:width="400"> <box id="blueBox" s:width="75" s:height="50" s:fill="blue"/> <box id="redBox" s:width="150" s:height="50" s:fill="red"/> <box id="yellowBox" s:width="75" s:height="50" s:fill="yellow"/> </box> </window>
Nach dem Ausführen sehen wir wie die blaue, rote und gelbe Box positioniert und dimensioniert ist. Hierbei ist wichtig, dass sich alle Boxen gegenseitig berühren.
Wir benutzen das s:hSpace Attribut zum Hinzufügen von Abständen zwischen angrenzenden Boxen entlang der horizontalen Achse, und machen sie eindeutig.
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<window xmlns="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
xmlns:on="http://www.aol.com/boxely/reaction.xsd"
s:height="100" s:width="400" s:top="center"
s:left="center" s:fill="white" title="Using Alignment">
<box id="layoutBox" s:position="fixed" s:top="center" s:width="400"
s:hSpace="5" >
<box id="blueBox" s:width="75" s:height="50" s:fill="blue"/>
<box id="redBox" s:width="150" s:height="50" s:fill="red"/>
<box id="yellowBox" s:width="75" s:height="50" s:fill="yellow"/>
</box>
</window>
Wir führen das Szenario aus, um den eingefügten Abstand zwischen den Boxen zu sehen.
Wir bemerken, dass die blaue Box an der linken Seite unseres Szenarios anliegt. Sie wird in dieser Weise angezeigt, weil keine Box an ihrer linken Seite angrenzt.
Um zu demonstrieren wie das s:flex Attribut funktioniert, setzen wir das s:flex Attribut der roten Box auf 1.
<?xml version="1.0" encoding="utf-8" ?> <?import href="box://ocpToolkit/content/core/coreGadgets.box"?> <?import href="box://ocpToolkit/theme/default/toolkit.box"?> <window xmlns="http://www.aol.com/boxely/box.xsd" xmlns:s="http://www.aol.com/boxely/style.xsd" xmlns:on="http://www.aol.com/boxely/reaction.xsd" s:height="100" s:width="400" s:top="center" s:left="center" s:fill="white" title="Using Alignment"> <box id="layoutBox" s:position="fixed" s:top="center" s:width="400" s:hSpace="5" > <box id="blueBox" s:width="75" s:height="50" s:fill="blue"/> <box id="redBox" s:width="150" s:height="50" s:fill="red" s:flex="1" /> <box id="yellowBox" s:width="75" s:height="50" s:fill="yellow"/> </box> </window>
Wir führen das Szenario aus, und sehen wie die gelbe Box jetzt den rechten Rand berührt (unsere Layout Box ist 400 Pixel breit, was der Größe unseres Szenarios entspricht), und sich die rote Box ausdehnt, um den restlichen Platz zu belegen, indem sie größer wird, als ihre eigentlichen 150 Pixel Größe.
Wichtig: Um Limits zu einer dynamisch vergrößerten Box hinzuzufügen, muss man die s:minWidth/s:minHeight und s:maxWidth/s:maxHeight Attribute benutzen.
Um zu demonstrieren, wie das s:flex Attribut als Multiplikator funktioniert (d.h. eine Box deren s:flex Attribut auf 2 gesetzt ist, wird doppelt so groß sein, wie die Box, deren s:flex Attribut auf 1 gesetzt ist), modifizieren wir die s:flex Werte, die in diesem Szenario verwendet werden.
<box id="blueBox" s:width="75" s:height="50" s:fill="blue" s:flex="1" /> <box id="redBox" s:width="150" s:height="50" s:fill="red" s:flex="2" /> <box id="yellowBox" s:width="75" s:height="50" s:fill="yellow" s:flex="3" />
Wir führen das Szenario aus, um zu sehen, dass die rote Box doppelt so groß ist wie die blaue Box, und die gelbe Box drei mal so groß ist, wie die blaue Box.
Um zusätzlichen Abstand um den Rand einer Box hinzuzufügen, kann man Padding und Margins benutzen.
Padding - Fügt Abstand innerhalb einer Box hinzu (innerhab des Rands).
Margin - Fügt Abstand außerhalb einer Box hinzu (um den Rand herum).
Die Boxely Padding und margin Einstellungen folgen dem CSS Boxmodell, in dem jede Box einen Inhaltsbereich und einen optionalen umrandenden Padding-, Rahmen- und Marginbereich, wie unten gezeigt, besitzt:
Beide, Padding und Margin, werden in Pixel durch Verwendung von Ganzzahlen angegeben.
Um Padding zu einer Box hinzuzufügen:
Um Padding zu einer Box hinzuzufügen, verwenden wir die folgenden zwei Methoden:
Wir verwenden die vier Attribute, die Padding beeinflussen: s:paddingTop, s:paddingRight, s:paddingBottom, und s:paddingLeft.
<box id="myBox" s:height="100" s:width="100" s:fill="green"
s:paddingTop="10" s:paddingRight="13" s:paddingBottom="12"
s:paddingLeft="11" />
Wir verwenden das s:padding Meta-Attribut. Bei der Verwendung eines Meta-Attributes, kann man entweder vier Werte getrennt von Leerzeichen im TRBL (top right bottom left) Format angeben, oder einen Wert bestimmen, der alle vier Ecken beeinflusst.
Der fettgeschriebene Code unten zeigt, wie man vier Werte im TRBL Format verwendet:
<box id="myBox" s:height="100" s:width="100"
s:padding="10 11 12 13" s:fill="green" />
Der fettgeschriebene Code unten zeigt, wie man einen Wert benutzt:
<box id="myBox" s:height="100" s:width="100"
s:padding="5" s:fill="green" />
Im Beispiel oben, in dem ein Wert (s:padding="5") verwendet wird, ist equivalent mit folgendem: s:padding="5 5 5 5".
Um Margin zu einer Box hinzuzufügen:
Um Margin zu einer Box hinzuzufügen, verwenden wir die folgenden zwei Vorgehensweisen.
Wir verwenden die vier Attribute, die Margin steuern: s:marginTop, s:marginRight, s:marginBottom, und s:marginLeft.
<box id="myBox" s:height="100" s:width="100" s:fill="green"
s:marginTop="10" s:marginRight="13" s:marginBottom="12"
s:marginLeft="11" />
Benutzen des s:margin Meta-Attributs. Bei der Verwendung eines Meta-Attributes, kann man entweder vier Werte getrennt von Leerzeichen im TRBL (top right bottom left) Format angeben, oder einen Wert bestimmen, der alle Ecken beeinflusst.
Der fettgeschriebene Code unten zeigt, wie man vier Werte im TRBL Format verwendet:
<box id="myBox" s:height="100" s:width="100"
s:margin="10 11 12 13" s:fill="green" />
Der fettgeschriebene Code unten zeigt, wie man einen Wert verwendet:
<box id="myBox" s:height="100" s:width="100"
s:margin="5" s:fill="green" />
Im Beispiel oben, in dem ein Wert (s:margin="5") ist das gleiche wie folgendes: s:margin="5 5 5 5".
Falls geplant ist, ein durchgehendes Margin auf alle untergeordneten Instanzen eines Parents anzuwenden, sollte nicht jeder Box ein Margin gegeben werden. Stattdessen sollte hSpace und vSpace auf das Parent angewendet werden, wie im Layout basierend auf Parent Teil dieses Anhangs gezeigt.
Jede Box die Child Boxen hat, enthält ein Objekt, Ansicht genannt, das die Child Boxen positioniert, in der Größe anpasst, zeichnet und prüft. Das view Attribut einer Box verwendet einen String. Akzeptierte Werte schließen ein:
DeckView - Die Plattformansicht ermöglicht es, Boxen übereinander anzuordnen. Diese Ansicht arbeitet zusammen mit type="deck" und verwendet das topIndex Attribut einer Box.
GridView - Die Rasterfeldansicht ermöglicht es jede Child Box in einem Tabellenformat (oder zweidimensionalem Bereich) anzuordnen. Diese Ansicht ist nützlich beim Erstellen einer Listenbox, eines Kalenders oder eines Verteilungsbogen Gadgets.
Ein Beispiel für die Rasteransicht:
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/Gadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<appWindow xmlns="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
id="window" translucent="true" title="Grid Demo" s:minHeight="300"
s:minWidth="600" >
<!--Die Ansicht als Raster definieren-->
<grid s:flex="1">
<!--Erstellen der Spalten, wichtig ist, dass eine
flex="1" hat, um verfügbaren Platz auszufüllen-->
<columns>
<column/>
<column/>
<column s:flex="1"/>
<column/>
</columns>
<!--die Zeilen als Teil der Rasterfeldansicht bevölkern -->
<rows>
<row>
<box s:flex="1" colspan="3" id="cell 1" style="bordered" s:height="50"
s:hAlign="center">
<label id="cell 2" value="Column colspan" s:fontSize="20"/>
</box>
<box id="cell 4" s:fill="blue" s:height="50" s:width="150" s:flex="1"/>
</row>
<row>
<box id="cell 1" s:fill="red" s:height="50" s:width="75"/>
<label id="cell 2" value="My long 2nd row"/>
<box id="cell 3" s:fill="green" s:height="50" s:width="50"/>
<box id="cell 4" s:fill="blue" s:height="50" s:width="50"/>
</row>
<row>
<box id="cell 4" s:fill="blue" s:height="50" s:width="150"/>
<box s:flex="1" colspan="3" id="cell 1" style="bordered" s:height="50"
s:hAlign="center">
<label id="cell 2" value="Column colspan" s:fontSize="20"/>
</box>
</row>
<row>
<box id="cell 5" s:fill="red" s:height="50" s:width="50"/>
<input id="cell 6" s:width="50"/>
<hbox id="cell 7" s:flex="1" s:fill="green" s:height="50" s:width="50">
<label value="Cell flex on this cell!"/>
</hbox>
<button id="cell 8" label="My Button"/>
</row>
</rows>
</grid>
</appWindow>