Layout Manager - NXML

ここでは、レイアウトマネージャについて説明します。

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

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

Nexaweb レイアウトマネージャは、Java プラットフォームで使用可能なレイアウトマネージャと非常に似ています。

Nexaweb レイアウトマネージャは、コンテナ内で子コンポーネントの位置を制御します。(コンテナは Nexaweb アプリケーションの UI 要素で、子コンポーネントを保持できます。また、アプリケーションの外観を作成するために、レイアウトマネージャやその他の視覚的要素 (コンテナやコンポーネントを含む) を追加することができます。)

レイアウトマネージャの種類によって、サイズ変更時の動作は異なります。定義済みの Nexaweb レイアウトマネージャには次の種類があります。

BorderLayout
BoxLayout
CardLayout
FlowLayout
FreeLayout
GridLayout

ニーズに合った UI デザインを実現するために、1 種類のレイアウトマネージャを使用することも、複数のレイアウトマネージャを同じコンテナ内で組み合わせて使用することもできます。また、各レイアウトマネージャには独自の特殊属性が用意されており、それらの属性を設定することによってさまざまなレイアウト結果を得ることができます。

また、汎用的な属性を子コンポーネントに割り当てて、レイアウトマネージャで目的のレイアウトを作成することも可能です。たとえば、マージンに関する属性やレイアウトマネージャ固有の属性 (gridLayout の hAlign、boxLayout の flex など) があります。レイアウトマネージャを指定しない場合は、Nexaweb Studio のデフォルト設定により flowLayout が使用されます。この最もシンプルなレイアウトマネージャを使用すると、コンポーネントが、コンテナ内に配置する順序に従って水平方向または垂直方向に並べられます。定義済みのレイアウトがニーズを十分に満たさない場合は、カスタムのレイアウトを作成できます。詳細については、プラグインのドキュメントを参照してください。

アプリケーションの外観を意図したとおりに作成するためには、レイアウトマネージャの仕組みを習得することが一番の早道です。各種レイアウトマネージャのサンプルを使用するには、Eclipse のインポートウィザードを使用して Studio にレイアウトマネージャをインポートするか、Nexaweb Platform 4.0 のインストールプログラムに含まれているサンプルの Sample Explorer をデプロイします。

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

BorderLayout

BorderLayout は、最大 5 つまでの領域 (north、south、west、east、center) にコンポーネントを配置します。north と south に配置されるコンポーネントは水平方向に、west と east に配置されるコンポーネントは垂直方向に広がって配置されます。center に配置されるコンポーネントは両方向に広がり、残りのスペースは中央のコンポーネントで占められます。コンポーネントの属性 borderPosition を指定すると、子コンポーネントをこれらの領域に配置できます。borderPosition 属性の値には、各領域に対応する north、west、center、east、south を選択できます。次の XML コードの例は、上のウィンドウを表しています。

<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>

この例に示すように、子コンポーネントのサイズは、子コンポーネントが配置される領域の大きさに応じて拡大されます。ウィンドウのサイズを変更すると、その領域を占めるコンポーネントのサイズも変更されます。BorderLayout では、center 領域に配置されたコンポーネントのサイズは無視され、すべての使用可能領域がそのコンポーネントによって占められます。north と south に配置されたコンポーネントではその高さが保持され、west と east に配置されたコンポーネントではその幅が保持されます。

5 つの領域すべてにコンポーネントを配置する必要はありません。実際、2 つか 3 つの領域を使用するだけで目的のレイアウト結果が得られる場合もよくあります。

BoxLayout

BoxLayout は、orientation 属性で指定する方向に従って、コンポーネントを 1 つの行または列に配置します。コンポーネントのサイズがコンテナのサイズより大きい場合、コンポーネントは次の行または列に折り返されません。これに対し、flowLayout では、使用可能なスペースにコンポーネントが折り返されます。BoxLayout のデフォルト設定ではコンポーネントのサイズが優先されるため、コンテナのサイズが変化しても、コンポーネントのサイズは変更されません。次の XML コードの例は、上のウィンドウを表しています。

<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>

CardLayout

CardLayout を使用すると、複数のコンポーネントを共通のコンテナに配置できます。show 属性を使用して指定すると、コンポーネントが一度に 1 つだけ表示されます。表示されるコンポーネントは、その親コンテナのスペース全体を占めます。CardLayout の最もわかりやすい例はスライドショーです。上のウィンドウで示されているように、Card 1 または Card 2 ボタンをクリックすると、CardLayout の show 属性が設定され、スライド一式の中にある対応するコンポーネントが表示されます。次の XML コードの例は、上のウィンドウを表しています。

 <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 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">
            <cardLayout show="card2"/>
            <label height="20" text="Card 1" width="100" alignHorizontal="center"
                   alignVertical="center" fontBold="true" fontSize="100" name="card1"/>
            <label height="20" text="Card 2" width="100" alignHorizontal="center" 
                   alignVertical="center" fontBold="true" fontSize="100" name="card2"/>
        </panel>
   </window>
</nxml>

FlowLayout

FlowLayout はデフォルトのレイアウトマネージャで、他のレイアウトマネージャを指定しない場合は、Nexaweb Studio ですべてのコンテナに使用されます。FlowLayout は、各コンポーネントに指定した位置とサイズに応じて、コンポーネントを 1 つの行または列に配置します。コンポーネントのコンテナの幅や高さが足りない場合は、新しい行または列を開始します。次の XML コードの例は、上のウィンドウを表しています。

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

FreeLayout

FreeLayout は、各コンポーネントに指定した絶対的なサイズと位置に応じて、コンポーネントを配置します。コンポーネントのサイズや位置を決める場合は、画面のサイズがコンピュータによって異なることを考慮する必要があります。他のレイアウトマネージャで必要なレイアウトが作成できない場合や、マウスイベントから x/y 座標を使用してコンポーネントをコンテナに追加する場合にFreeLayout を使用します。次の XML コードの例は、上のウィンドウを表しています。

<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>

GridLayout

GridLayout は、コンポーネントを親コンテナに追加する順序に基づいて、同じサイズのグリッド内に、行ごとに 1 つずつ配置します。各コンポーネントのサイズは同じになり、グリッド全体は親コンテナに完全に適合します。グリッドの列数は、columns 属性を使用して指定します。グリッド内の子コンポーネントのサイズや位置を決める場合は、GridLayout 属性に加えて、子コンポーネントの属性を使用できます。次の XML コードの例は、上のウィンドウを表しています。

<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>

GridLayout は SWT グリッドレイアウトの後で形成されます - http://www.eclipse.org/articles/Understanding%20Layouts/Understanding%20Layouts.htm

レイアウトマネージャはどこで使用するのか?

それぞれのコンテナ状コンポーネント(panel, desktopPane, rootPane, window, dialog)は子コンポーネントをレイアウトするためにレイアウトマネージャが必要です。ただし、次の特別コンポーネントは除きます :

```
scrollPane
```
tabPane とその子コンポーネント tab
splitPane とその4つの子コンポーネント (top | bottom | letf | roght)

（未完成）