コンテナとペイン
- Xiaoyan Kong (Unlicensed)
このセクションでは Nexaweb Java アプリケーション UI の開発時に利用可能なコンテナとレイアウトペインの概要を提供します。
コンテナとレイアウトペインウィジェットに関する詳細な情報は、XAL Schema ドキュメントをご参照下さい。
基本的なコンテナ
このセクションでは、Nexaweb Java アプリケーション UI 開発時に利用できる基本的なコンテナの概要について説明しています。これらのコンテナに関する追加として、Floating Containers および Root Elements もご参照下さい。
desktopPane
desktopPane は window とダイアログをホストするパネルです。
Nexaweb Studio では Palette ビューでこのウィジェットが利用可能で、そこから Visual Editor の UI ファイルにドラッグ&ドロップすることができます。
freePane でこのウィジェットを使用した XAL の例:
<desktopPane height="300px" width="300px" x="0px" y="0px"/>
scrollPane
コンテントの大量な部分に合うように使用されたコンポーネントは、その中にあるコンポーネントが scrollPane 自身より大きい場合、自動的にスクロールバーを表示します。常時少なくとも scrollPane の全体のスペースを占める子コンポーネントのみ保有することも可能です(子コンポーネントは少なくとも scrollPane の視覚エリアくらいの大きさです)。
Nexaweb Studio ではパレット ビューでこのウィジェットが利用可能で、そこから Visual Editor の UI ファイルにドラッグ&ドロップすることができます。
freePane でこのウィジェットを使用した XAL の例:
<scrollPane height="300px" width="300px" x="10px" y="10px"> <freePane/> </scrollPane>
次の表は scrollPanet 特有の属性の一覧と概要を示しています:
| 属性 | 説明 |
| horizontalScrollBarPolicy | 水平方向のスクロールバー表示ポリシーを指定する。 always–水平方向のスクロールバーを常に表示 never- 水平方向のスクロールバーは常に非表示 automatic– 必要に応じて水平方向のスクロールバーを表示 デフォルト=automatic |
| horizontalScrollPosition | スクロールコンポーネントの水平方向の位置を指定する。例えば、値を100 に設定するとコンポーネントは 100 ピクセル右にスクロールする。 DOM 精度：DOM のこの属性値は常に UI の現在値を反映する。 |
| verticalScrollBarPolicy | 縦方向のスクロールバー表示ポリシーを指定する。 always- 縦方向のスクロールバーを常に表示 never-縦方向のスクロールバーは常に非表示 automatic– 必要に応じて縦方向のスクロールバー表示 デフォルト=automatic |
| verticalScrollPosition | スクロールコンポーネントの縦方向の位置を指定する。例 えば、値を100 に設定するとコンポーネントは 100 ピクセル下にスクロールする。 DOM 精度: DOM でのこの属性の値は、常に UI の現在値を反映する。 |
horizontalSplitPane
水平方向にドラッグ可能なバーによって2つのセクションに分けられたパネルで、パネルのトータルスペース内の各セクションでユーザーがリサイズできます。
Nexaweb Studio ではパレット ビューでこのウィジェットが利用可能で、そこから Visual Editor の UI ファイルにドラッグ&ドロップすることができます。
freePane でこのウィジェットを使用した XAL の例:
<horizontalSplitPane height="300px" width="300px" x="40px" y="0px"> <left> <freePane/> </left> <right> <freePane/> </right> </horizontalSplitPane>
次の表では horizontalSplitPane コンポーネント特有の属性一覧と概要を示しています:
| Attribute | Description |
| splitPosition | 0(左)から100 (右)で分割バーの場所を指定する。 |
verticalSplitPane
水平方向にドラッグ可能なバーによって2つのセクションに分けられたパネルで、パネルのトータルスペース内の各セクションでユーザーがリサイズできる。
Nexaweb Studio ではパレット ビューでこのウィジェットが利用可能で、そこから Visual Editor のUI ファイルにドラッグ&ドロップすることができます。
freePane でこのウィジェットを使用したXAL の例:
<verticalSplitPane height="300px" width="300px" x="40px" y="0px"> <top> <freePane/> </top> <bottom> <freePane/> </bottom> </verticalSplitPane>
次の表は verticalSplitPane コンポーネント特有属性の一覧と概要を示しています。
| Attribute | Description |
| splitPosition | 0(上)から100 (下)で分割バーの場所を指定する。 |
tabPane
上部にクリックできるタブが付いたパネル。キーボードナビゲーション: タブのタブボックスフォーカスにタブ指定します。タブにフォーカス後、左または右の矢印キーはタブ間を移動するか、またはタブ内の最初のコンポーネントにフォーカスしているタブキーを押下します。
Nexaweb Studio では Paletteview でこのウィジェットが利用可能で、そこから Visual Editor の UI ファイルにドラッグ&ドロップすることができます。
freePane でこのウィジェットを使用した XAL の例:
<tabPane height="300px" width="300px" x="10px" y="0px"> <tab text="Tab"> <freePane/> </tab> </tabPane>
次の表は tabPane コンポーネント特有の属性一覧と概要を示しています。
| 属性 | 説明 |
| tabAlignment | 親 tabPane に対しタブの位置を指定する。デフォルト tabPane では上部を横断するタブで、これを end ポジションに設定するとタブはtabPane の右側、これをstart 位置に設定しすると tabPane の左端に表示される。デフォルト=start |
| tabGrowth | ピクセルで選択時タブがどのくらい拡大するかを指定する。デフォルト=2 ピクセル |
| tabOverlap | タブの間のスペースを指定する。例： 5に設定するとタブは少し隣と重なるが-5に設定すると間にスペースができる。 |
| tabPlacement | どの tabPane の端に沿ってタブを配置するのかを指定する。 値: left, right, top, bottom. デフォルト=top. |
次は二つのタブが付いた tabPane を表示しています:
次は tabPlacement に left 、tabOverlap に-5 を設定した tabPane の図です。
レイアウトペイン
このセクションでは Nexaweb Java アプリケーション UI の開発時に利用可能なレイアウトペインの説明をしています。レイアウトペインを使用し、アプリケーションユーザーインターフェイスで直ちにコンポーネントを組み立てます。
freePane
次の例は上記の window を表しています:
<xal xmlns="http://openxal.org/ui/java">
<window title="New Window" width="300px" height="300px">
<freePane>
<comboBox height="25px" text="Account Type" width="100px" x="45px" y="24px">
<listBox>
<listItem text="New Account"/>
<listItem text="Existing Account"/>
<listItem text="Search"/>
</listBox>
</comboBox>
<button height="25px" text="Go" width="100px" x="45px" y="60px"/>
<radioButton height="25px" text="Button On/Off" width="100px" x="170px" y="220px" selected="true"/>
</freePane>
</window>
</xal>
borderPane
borderPane は最大5つのエリア（北、南、西、中央）までコンポーネントを配置します。北と南に水平方向に伸ばし配置されたコンポーネント。西と東に縦方向に伸ばし配置されたコンポーネント。両方の方向に伸ばし中央に配置され、残りのスペースは中央のコンポーネントで埋められているコンポーネント。コンポーネントを borderPane に追加する際、borderPosition を指定することにより子コンポーネントをこれらの部分に配置します。
次xmlの例は上記のwindowを表しています:
<xal xmlns="http://openxal.org/ui/java"> <window title="New Window" width="300px" height="300px"> <borderPane> <button height="25px" text="North" width="100px" borderPosition="north"/> <button height="25px" text="South" width="100px" borderPosition="south"/> <button height="25px" text="East" width="100px" borderPosition="east"/> <button height="25px" text="West" width="100px" borderPosition="west"/> <button height="25px" text="Center" width="100px" borderPosition="center"/> </borderPane> </window> </xal>
この例が示している通り、子コンポーネントはそれらを拡張し、それらがある部分を埋めます。ウィンドウをリサイズする場合、コンポーネントは、そのエリアに合うようにコンポーネント自身をリサイズします。borderPane はセンターエリアに配置されたコンポーネントのサイズを考慮せず、コンポーネントが利用可能なスペースを埋めることができるようにします。北と南に配置されているコンポーネントは高さを維持し、西と東に配置されているコンポーネントは幅を維持します。
コンポーネントをすべての5つのエリアに配置する必要はありません。コンポーネントを2つまたは3つのエリアに配置すれば望むレイアウトは得ることができます。
次の表はborderPane特有属性の一覧と概要を示しています:
| 属性 | 説明 |
| borderPosition | この属性を指定し、borderPane レイアウトにコンポーネントを追加する。borderPane 内でコンポーネントの位置を指定する。borderPane にコンポーネントを追加した後は、この属性を変更することはできない。 値=north, south, east, west, center |
| horizontalGap | ペインのコンポーネント間での水平方向のギャップを指定する。 |
| verticalGap | ペインのコンポーネント間の縦方向のギャップを指定する。 |
cardPane
cardPane (Java アプリケーションのみで利用可能) によって共通のコンテナに異なるコンポーネントを配置することができますが、一度に1つのみ表示することができます。show 属性を使用し、どれを表示するか指定します。親コンテナの全スペースを表示コンポーネントが占めます。cardPane の一番良い例は slideshow です。上記 window に示している通り、prev または次のボタンをクリックすることで cardLayout の show 属性を設定し、deck show upで対応するコンポーネントを作成します。次の xml の例は上記に示す window を表しています。
cardPane - UI 例
<xal xmlns="http://openxal.org/ui/java"> <mco:declarations xmlns:mco="http://openxal.org/core/mco"> <mco:mco id="cardPaneMco" src="CardPaneMco"/> </mco:declarations> <window title="New Window" width="300" height="300"> <borderPane> <cardPane id="cardPane" borderPosition="center" show="1"> <button id="button1" text="Button 1" name="1"/> <button id="button2" text="Button 2" name="2"/> <button id="button3" text="Button 3" name="3"/> <borderPane id="panel" name="4"> <button borderPosition="center" id="button4" text="Button 4"/> </borderPane> </cardPane> <horizontalFlowPane borderPosition="south" align="center"> <button id="prev" text="prev" onCommand="mco://cardPaneMco.prev( cardPane )"/> <button id="next" text="next" onCommand="mco://cardPaneMco.next( cardPane )"/> </horizontalFlowPane> </borderPane> </window> </xal>
cardPane - MCO 例
import com.nexaweb.client.mco.AbstractMco;
import com.nexaweb.xml.Element;
public class CardPaneMco extends AbstractMco{
// first card by default is the first card
int currPage = 0;
public void next( Element cardPane) {
// increment the current card index
// if last card is reached, set to first card
currPage++;
if( currPage == cardPane.getChildCount() )
{
currPage = 0;
}
// get the name of the new card to show, and set it on the card pane
String cardName = ( (Element) cardPane.getChildAt(currPage) ).getAttribute("name");
cardPane.setAttribute("show", cardName );
}
public void prev( Element cardPane )
{
// decrement the current card index
// if first card is reached, set to last card
currPage--;
if( currPage < 0 )
{
currPage = cardPane.getChildCount()-1;
}
// get the name of the new card to show, and set it on the card pane
String cardName = ( (Element) cardPane.getChildAt(currPage) ).getAttribute("name");
cardPane.setAttribute("show", cardName );
}
}
次の表は cardPane 特有属性の一覧と概要を示しています。
| 属性 | 説明 |
| cardName | cardPane の show 属性に提供されるとコンポーネントが cardPane で有効になるコンポーネントタイプを示すstringを指定する。アクティブなコンポーネントは cardPane の全てのエリアを占めており、インプットイベントも受ける。コンポーネントを cardPane に追加した後、このコンポーネントに対する属性を変更することはできない。 |
gridPane
親コンテナにコンポーネントを追加する順番を基に、gridPane は統一されたグリッドで行ごとにコンポーネントを調整します。 gridPane は各コンポーネントを同じサイズにし、全体のグリッドを親コンテナに正確に合わせます。コラム属性で、グリッドコラムの数を指定します。gridPane 属性に加え、子コンポーネント属性を使用し、グリッドのサイジングと子コンポーネントの配置することができます。
次の例は上記ウィンドウの xml の例を示しています:
<xal xmlns="http://openxal.org/ui/java">
<window title="New Window" width="300px" height="300px">
<gridPane evenlySpace="true" columns="3">
<button height="25px" text="Button" width="100px"/>
<link height="20px" text="link"/>
<comboBox height="25px" text="ComboBox" width="100px">
<listBox>
<listItem text="listItem #1"/>
<listItem text="listItem #2"/>
<listItem text="listItem #3"/>
</listBox>
</comboBox>
<radioButton height="25px" text="radioButton" width="100px"/>
<textField height="25px" text="TextField" width="200px"/>
<button height="25px" text="Button" width="100px"/>
<listBox height="100px" width="100px">
<listItem text="listItem #1"/>
<listItem text="listItem #2"/>
<listItem text="listItem #3"/>
</listBox>
<button height="25px" text="Button" width="100px"/>
</gridPane>
</window>
</xal>
gridPane は SWT グリッドレイアウト後、パターン化されます。 - http://www.eclipse.org/articles/Understanding%20Layouts/Understanding%20Layouts.htm
次の表は gridPane 特有属性一覧と概要を示しています:
| 属性 | 説明 |
| gridColumnSpan | グリッドのコンポーネントが span する列の数を指定する。 |
| gridHorizontalAlignment | グリッドレイアウトセル内でコンポーネントの水平方向アライメントを指定する。 |
| gridHorizontalGrabSpace | このコンポーネントが占めているグリッドセルが水平方向に伸縮し利用可能なスペースに合わせるようにするかどうか指定する。true=はい、 false=いいえ |
| gridRowSpan | グリッドでコンポーネントが入る行の数を指定する。 |
| gridVerticalAlignment | グリッドレイアウトセル内で縦方向のコンポーネントのアライメントを指定する。 |
| gridVerticalGrabSpace | このコンポーネントが占めるグリッドセルが縦方向に拡張し、利用可能なスペースに合うように指定する。 true=はい、 false=いいえ |
メモ: コンポーネントを gridPaneに追加後はコンポーネントのこれらの属性を変更することはできません。
horizontalBoxPane
horizontalBoxPane はコンテナの水平の方向に沿って一列にコンポーネントを配置します。コンポーネントの合計の幅のサイズがコンテナの幅を超える場合、horizontalFlowPane がラップするように次の行にはコンポーネントをラップしません。デフォルトでは horizontalBoxPane はコンポーネントのサイズを優先しており、コンポーネントはコンテナのサイズが変更してもリサイズしません。次の xml の例は、上記のウィンドウを示しています:
<xal xmlns="http://openxal.org/ui/java">
<window title="New Window" width="300px" height="300px" x="5" y="5">
<horizonatlBoxPane>
<button height="25px" text="Button" width="100px"/>
<button height="25px" text="Button" width="100px"/>
<textField height="25px" text="TextField" width="200px"/>
<label height="20px" text="Label" width="100px"/>
<comboBox height="25px" text="ComboBox" width="100px">
<listBox>
<listItem text="listItem #1"/>
<listItem text="listItem #2"/>
<listItem text="listItem #3"/>
</listBox>
</comboBox>
</horizontalBoxPane>
</window>
</xal>
次の表は、horizontalBoxPane 特有属性の一覧と説明を示しています。
| 属性 | 説明 |
| alignment | レイアウトの縦方向軸に沿ってコンポーネントをそろえる位置を指定する。 値: start, center, end, stretch. start= コンポーネントの上または左; center=中央左; end=下左; stretch=コンポーネントを配列させ全体の部分をカバーする |
| boxFlex | horizontalBoxPane レイアウトに追加するコンポーネントにこの属性を指定する。親のコンテナに利用可能なスペースに合うようコンポーネントの伸縮を指定する。レイアウトの一つ以上のコンポーネントが flex value の場合、各コンポーネントはその flex value に比例し合わせて伸縮する。flex value がないコンポーネントはそれぞれのサイズのままになる。 |
| pack | レイアウトの水平方向の軸に沿ってコンポーネントをそろえるところ指定する。ペインに余分なスペースがある場合、pack 属性は、子コンポーネント固定するところを指定する。値=start, center, end. start= コンポーネントの上か左; center=中央上; end=上左; stretch=コンポーネントを配列させ全体の部分をカバーする |
verticalBoxPane
verticalBoxPane は縦方向に一列のコラムにコンポーネントを配置します。コンポーネントのサイズがコンテナサイズ以上の場合、次の列またはコラムにコンポーネントをラップしませんが、verticalFlowPane は利用可能なスペースにコンポーネントをラップします。デフォルトでは、verticalBoxPane はコンポーネントのサイズを優先し、コンテナのサイズが変更してもコンポーネントはリサイズしません。次の xml の例は上記に示しているウィンドウを表しています。
<xal xmlns="http://openxal.org/ui/java">
<window title="New Window" width="300px" height="300px" x="5" y="5">
<verticalBoxPane>
<button height="25px" text="Button" width="100px"/>
<button height="25px" text="Button" width="100px"/>
<textField height="25px" text="TextField" width="200px"/>
<label height="20px" text="Label" width="100px"/>
<comboBox height="25px" text="ComboBox" width="100px">
<listBox>
<listItem text="listItem #1"/>
<listItem text="listItem #2"/>
<listItem text="listItem #3"/>
</listBox>
</comboBox>
</verticalBoxPane>
</window>
</xal>
次の表は verticalBoxPane 特有の属性の一覧と概要を示しています。
| 属性 | 説明 | |
| alignment | レイアウトで水平方向軸に沿ったコンポーネントの配列を指定する。Values: start, center, end, stretch. start= コンポーネントの上または左; end=右または下; stretch=コンポーネントを配列させ全体の部分をカバーする | |
| boxFlex | verticalBoxPane レイアウトに追加するコンポーネントの属性を指定する。親コンテナの利用可能なスペースに合わせるようコンポーネントの伸縮を指定する。レイアウトの一つ以上のコンポーネントが flex value の場合、各コンポーネントはその flex value に比例し合わせて伸縮する。flex value がないコンポーネントはそれぞれのサイズのままになる。 | |
| pack |
|
horizontalFlowPane
horizontalFlowPane はコンテナの水平方向幅にspanする行にコンポーネントを配置します。horizontalFlowPane は指定できる水平方向の間隙によって、行内のコンポーネントを分けます。horizontalFlowPane は行と水平方向の間隙の間の幅の合計がコンテナの幅を超えるまで各コンポーネントを同じ行に配置し、その後新しい行が始まりそれにコンポーネントを配置します。縦方向の間隙の値を表示することにより行の間の幅を指定することができます。次の xml の例は上記に示しているウィンドウを表しています:
<xal xmlns="http://openxal.org/ui/java">
<window title="New Window" width="300px" height="300px">
<horizontalFlowPane gapHorizontal="25" gapVertical="25">
<button height="25px" text="Button" width="100px" x="100px" y="10px"/>
<button height="25px" text="Button" width="100px" x="164px" y="53px"/>
<radioButton height="25px" text="radioButton" width="100px"/>
<comboBox height="25px" text="ComboBox" width="100px">
<listBox>
<listItem text="listItem #1"/>
<listItem text="listItem #2"/>
<listItem text="listItem #3"/>
</listBox>
</comboBox>
<textField height="25px" text="TextField" width="200px"/>
</horizontalFlowPane>
</window>
</xal>
次の表は horizontalFlowPane 特有の属性の一覧と概要を示しています:
| 属性 | 説明 |
| alignment | ペインのコンポーネントの水平方向のアライメントを指定する。 |
| horizontalGap | コンポーネントが縦方向軸を埋め、ペインの水平方向全体に広がるため、コンポーネント間の水平方向（左から右）の間隙を指定する。 |
| verticalGap | コンポーネント間の縦方向（上から下）の間隙を指定する。 |
verticalFlowPane
verticalFlowPane は左から配列し、コラムで一番大きいコンポーネントを中央においている一行にコンポーネントを配置します。コンポーネントがコンテナの縦方向のスペースを埋める場合時新しいコラムを開始します。次の xml の例は上記のウィンドウを示しています:
<xal xmlns="http://openxal.org/ui/java">
<window title="New Window" width="300px" height="300px">
<verticalFlowPane>
<button height="25px" text="Button" width="100px"/>
<button height="25px" text="Button" width="100px"/>
<radioButton height="25px" text="radioButton" width="100px"/>
<comboBox height="25px" text="ComboBox" width="100px">
<listBox>
<listItem text="listItem #1"/>
<listItem text="listItem #2"/>
<listItem text="listItem #3"/>
</listBox>
</comboBox>
<textField height="25px" text="TextField" width="200px"/>
</verticalFlowPane>
</window>
</xal>
次の表は verticalFlowPane 特有の属性一覧と概要を示しています:
| 属性 | 説明 |
| alignment | ペインのコンポーネントの縦方向のアライメントを指定する。 |
| horizontalGap | コンポーネントが縦方向軸を埋め、ペインの水平方向全体に広がるため、コンポーネント間の水平方向（左から右）の間隙を指定する。 |
| verticalGap | コンポーネント間の縦方向（上から下）の間隙を指定する。 |