The Flow Layout
(Default)
A flow layout arranges components in a left-to-right flow, much like
lines of text in a paragraph. Flow layouts are typically used to arrange
buttons in a panel. It will arrange buttons left to right until no more
buttons fit on the same line.
Example 1: The following example shows several buttons
arranged using the flow-layout inside an xpanel (yellow background) that
is wide enough to render all buttons in one line. Notice that the width
of the outer panel is set to 550px.
Code:
<xpanel style="background-color:#FFFFCC; border:1px solid black; height:100px; width:550px;">
<xpanel>
<xbutton style="width:50px; height:50px"><text>0</text></xbutton>
<xbutton style="width:50px; height:50px"><text>1</text></xbutton>
<xbutton style="width:50px; height:50px"><text>2</text></xbutton>
<xbutton style="width:50px; height:50px"><text>3</text></xbutton>
<xbutton style="width:50px; height:50px"><text>4</text></xbutton>
</xpanel>
<xpanel>
<xbutton style="width:50px; height:50px"><text>A</text></xbutton>
<xbutton style="width:50px; height:50px"><text>B</text></xbutton>
<xbutton style="width:50px; height:50px"><text>C</text></xbutton>
<xbutton style="width:50px; height:50px"><text>D</text></xbutton>
<xbutton style="width:50px; height:50px"><text>E</text></xbutton>
</xpanel>
</xpanel>
Example 2: The following example shows the same set
of buttons from Example 1 inside an xpanel (yellow background) that is
not wide enough to render all buttons in one line. Notice that the objects
naturally flows to the next line when using flow-layout. Notice that the
width of the outer panel is set to 400px.
Code:
<xpanel style="background-color:#FFFFCC; border:1px solid black; height:100px; width:400px;">
<xpanel>
<xbutton style="width:50px; height:50px"><text>0</text></xbutton>
<xbutton style="width:50px; height:50px"><text>1</text></xbutton>
<xbutton style="width:50px; height:50px"><text>2</text></xbutton>
<xbutton style="width:50px; height:50px"><text>3</text></xbutton>
<xbutton style="width:50px; height:50px"><text>4</text></xbutton>
</xpanel>
<xpanel>
<xbutton style="width:50px; height:50px"><text>A</text></xbutton>
<xbutton style="width:50px; height:50px"><text>B</text></xbutton>
<xbutton style="width:50px; height:50px"><text>C</text></xbutton>
<xbutton style="width:50px; height:50px"><text>D</text></xbutton>
<xbutton style="width:50px; height:50px"><text>E</text></xbutton>
</xpanel>
</xpanel>
Example 3: The following example shows the same set
of buttons inside an even smaller xpanel (yellow background) that is not
wide enough to render all buttons in one line. Notice that the container
of these buttons naturally increased its height based on its content.
Notice that the width of the outer panel is set to 200px.
Code:
<xpanel style="background-color:#FFFFCC; border:1px solid black; height:100px; width:200px;">
<xpanel>
<xbutton style="width:50px; height:50px"><text>0</text></xbutton>
<xbutton style="width:50px; height:50px"><text>1</text></xbutton>
<xbutton style="width:50px; height:50px"><text>2</text></xbutton>
<xbutton style="width:50px; height:50px"><text>3</text></xbutton>
<xbutton style="width:50px; height:50px"><text>4</text></xbutton>
</xpanel>
<xpanel>
<xbutton style="width:50px; height:50px"><text>A</text></xbutton>
<xbutton style="width:50px; height:50px"><text>B</text></xbutton>
<xbutton style="width:50px; height:50px"><text>C</text></xbutton>
<xbutton style="width:50px; height:50px"><text>D</text></xbutton>
<xbutton style="width:50px; height:50px"><text>E</text></xbutton>
</xpanel>
</xpanel>
Next: Border Layout
Back to: Application Guide | 