Page Comparison

This section introduces the layout manager.

1. What is Nexaweb layout manager
2. A visual guide to layout managers
3. Where to use layout managers
4. How to use Nexaweb layout managers

What is Nexaweb Layout Manager?

• BorderLayout 
• BoxLayout 
• CardLayout 
• FlowLayout 
• FreeLayout 
• GridLayout

...

Image Removed

...

1. Nexaweb レイアウト マネージャとは
2. レイアウト マネージャの図解入り解説
3. レイアウト マネージャを使用する場合
4. Nexaweb レイアウト マネージャの使用方法

Nexaweb レイアウトマネージャとは

• BorderLayout
• BoxLayout
• CardLayout
• FlowLayout
• FreeLayout
• GridLayout

レイアウトマネージャの図解入り解説

<window title="window" width="350" height="200">
    <borderLayout/>
    <button borderPosition="north" text="North"/> 
    <button borderPosition="west" text="West"/>
    <button borderPosition="center" text="Center"/>
    <button borderPosition="east" text="East"/>
    <button borderPosition="south" text="South"/>
</window>

As this example shows, child components expand themselves to fill the area in which they reside.  If you resize the window, the components resize themselves as well to fill the area.  BorderLayout ignores the size of component placed in the center area so that the component can fill any available space.  Components placed in north and south maintain their height as Components placed in west and east maintain their width.

You don't have to put components to all 5 areas.  In fact, it is quite common that 2 or 3 areas are enough to get the layout result you want.

BoxLayout

Image Removed

...

<window title="window" width="350" height="200" margin="5">
    <boxLayout orientation="vertical"/>
    <button text="button 1"/>
    <button text="button 2 - wide"/>
    <textField />
    <comboBox />  
    <radioButton text="radio button" />
</window> 

...

...

Image Removed

CardLayout allows you to put different components to a common container, while showing only one of them at a time as you specify with the show attribute.  The displayed component occupies the entire space of its parent container. The best example of a cardLayout is a slideshow. As shown in the windows above, clicking Card 1 or Card 2 button sets the show attribute of cardLayout and makes the corresponding component in the deck show up. The following example xml represents the windows shown above:

...

...

 <nxml>
    <macro:macro xmlns:macro="http://nexaweb.com/macro" name="showCard1">
        <xu:modifications xmlns:xu="http://nexaweb.com/xupdate">
            <xu:set-attribute select="//cardLayout">
                <xu:attribute name="show" value="card1"/>
            </xu:set-attribute>
        </xu:modifications>
    </macro:macro>
    <macro:macro xmlns:macro="http://nexaweb.com/macro" name="showCard2">
        <xu:modifications xmlns:xu="http://nexaweb.com/xupdate">
            <xu:set-attribute select="//cardLayout">
                <xu:attribute name="show" value="card2"/>
            </xu:set-attribute>
        </xu:modifications>
    </macro:macro>
    <window height="200" title="Window" width="400" >
        <borderLayout gapVertical="5"/>
        <panel height="40" width="100" borderPosition="south" bgColor="#808080">
            <flowLayout bgColoralign="#808080center"/>
      <flowLayout align="center"/>
      <button text="Card 1" onCommand="macro://showCard1"/>
            <button text="Card 2" onCommand="macro://showCard2"/>
        </panel>
        <panel height="100" width="100" borderPosition="center" bgColor="#008000">
            bgColor<cardLayout show="#008000card2"/>
      <cardLayout show="card2"/>
      <label height="20" text="Card 1" width="100" alignHorizontal="center"
                  alignHorizontal="center" alignVertical="center" 
             fontBold="true" fontSize="100" name="card1"/>
            <label height="20" text="Card 2" width="100" alignHorizontal="center" 
            alignHorizontal="center" alignVertical="center"               alignVertical="center" fontBold="true" fontSize="100" name="card2"/>
        </panel>
   </window>
</nxml> 

...

...

...

 <window title="window" width="350" height="200">
    <flowLayout/>
    <button text="button 1"/>
    <textField />
    <comboBox />
    <radioButton text="radio button" />
</window>

Image Removed

FreeLayout arranges components according to the absolute sizes and positions that you specify for each component.  When sizing and positioning components, you need to consider that screen size may vary from one computer to another. Use FreeLayout when other layout managers cannot meet your requirements or when you want to add components to the container with x/y coordinates from a mouse event. The following example xml represents the window shown above:

...

<window height="200" title="Window" width="400">
 	    <freeLayout/>
 	    <button  text="Button"  x="60" y="29"/>

	    <textField text="TextField" x="220" y="59"/>

	    <comboBox x="40" y="79"/>

	    <radioButton text="radioButton" x="100" y="119"/>

	    <link text="link" x="190" y="159"/>

	    <label text="label" x="250" y="109"/>

</window> 

Image Removed
 
GridLayout arranges components row by row in a uniform grid, based on the order in which you add components to the parent container. GridLayout sizes each component the same and the overall grid will exactly fit the parent container. You specify the number of columns in the grid through the columns attribute.  In addition to the GridLayout attributes, you can use child component attributes to help sizing and placing child components in the grid. The following example xml represents the window shown above:

...

<window height="180" title="Window" width="350">
    <gridLayout columns="3"/>
    <button  text="Button"/>
    <link text="link"/>
    <comboBox/>
    <radioButton text="radioButton"/>
    <textField text="TextField"/>
    <button  text="Button"/>
    <listBox>
        <listItem text="listItem 1"/>
        <listItem text="listItem 2"/>
    </listBox>
    <button text="Button"/>
</window>

...

...

...

...

...

...

...