...
このセクションでは、Nexaweb Java アプリケーション UI 開発時に利用できる基本的なコンテナの概要について説明しています。これらのコンテナに関する追加として、Floating Containers および Root Elements もご参照下さい。
desktopPane
desktopPane は window とダイアログをホストするパネルです。
...
<desktopPane height="300px" width="300px" x="0px" y="0px"/>
scrollPane
コンテントの大量な部分に合うように使用されたコンポーネントは、その中にあるコンポーネントが scrollPane 自身より大きい場合、自動的にスクロールバーを表示します。常時少なくとも scrollPane の全体のスペースを占める子コンポーネントのみ保有することも可能です(子コンポーネントは少なくとも scrollPane の視覚エリアくらいの大きさです)。
...
freePane でこのウィジェットを使用した XAL の例:
| Code Block |
|---|
<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つのセクションに分けられたパネルで、パネルのトータルスペース内の各セクションでユーザーがリサイズできます。
...
| Attribute | Description |
| splitPosition | 0(左)から100 (右)で分割バーの場所を指定する。 |
verticalSplitPane
水平方向にドラッグ可能なバーによって2つのセクションに分けられたパネルで、パネルのトータルスペース内の各セクションでユーザーがリサイズできる。
...
| Attribute | Description |
| splitPosition | 0(上)から100 (下)で分割バーの場所を指定する。 |
tabPane
上部にクリックできるタブが付いたパネル。キーボードナビゲーション: タブのタブボックスフォーカスにタブ指定します。タブにフォーカス後、左または右の矢印キーはタブ間を移動するか、またはタブ内の最初のコンポーネントにフォーカスしているタブキーを押下します。
...
次は二つのタブが付いた tabPane を表示しています:
次は tabPlacement に left 、tabOverlap に-5 を設定した tabPane の図です。
レイアウトペイン
このセクションでは Nexaweb Java アプリケーション UI の開発時に利用可能なレイアウトペインの説明をしています。レイアウトペインを使用し、アプリケーションユーザーインターフェイスで直ちにコンポーネントを組み立てます。
freePane
次の例は上記の window を表しています:
| Code Block |
|---|
<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 を指定することにより子コンポーネントをこれらの部分に配置します。
...
| 属性 | 説明 |
| 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 を表しています。
...
| 属性 | 説明 |
| cardName | cardPane の show 属性に提供されるとコンポーネントが cardPane で有効になるコンポーネントタイプを示すstringを指定する。アクティブなコンポーネントは cardPane の全てのエリアを占めており、インプットイベントも受ける。コンポーネントを cardPane に追加した後、このコンポーネントに対する属性を変更することはできない。 |
gridPane
親コンテナにコンポーネントを追加する順番を基に、gridPane は統一されたグリッドで行ごとにコンポーネントを調整します。 gridPane は各コンポーネントを同じサイズにし、全体のグリッドを親コンテナに正確に合わせます。コラム属性で、グリッドコラムの数を指定します。gridPane 属性に加え、子コンポーネント属性を使用し、グリッドのサイジングと子コンポーネントの配置することができます。
...
メモ: コンポーネントを gridPaneに追加後はコンポーネントのこれらの属性を変更することはできません。
horizontalBoxPane
horizontalBoxPane はコンテナの水平の方向に沿って一列にコンポーネントを配置します。コンポーネントの合計の幅のサイズがコンテナの幅を超える場合、horizontalFlowPane がラップするように次の行にはコンポーネントをラップしません。デフォルトでは horizontalBoxPane はコンポーネントのサイズを優先しており、コンポーネントはコンテナのサイズが変更してもリサイズしません。次の xml の例は、上記のウィンドウを示しています:
...
| 属性 | 説明 |
| 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 の例は上記に示しているウィンドウを表しています。
...
| 属性 | 説明 | |
| alignment | レイアウトで水平方向軸に沿ったコンポーネントの配列を指定する。Values: start, center, end, stretch. start= コンポーネントの上または左; end=右または下; stretch=コンポーネントを配列させ全体の部分をカバーする | |
| boxFlex | verticalBoxPane レイアウトに追加するコンポーネントの属性を指定する。親コンテナの利用可能なスペースに合わせるようコンポーネントの伸縮を指定する。レイアウトの一つ以上のコンポーネントが flex value の場合、各コンポーネントはその flex value に比例し合わせて伸縮する。flex value がないコンポーネントはそれぞれのサイズのままになる。 | |
| pack |
|
horizontalFlowPane
horizontalFlowPane はコンテナの水平方向幅にspanする行にコンポーネントを配置します。horizontalFlowPane は指定できる水平方向の間隙によって、行内のコンポーネントを分けます。horizontalFlowPane は行と水平方向の間隙の間の幅の合計がコンテナの幅を超えるまで各コンポーネントを同じ行に配置し、その後新しい行が始まりそれにコンポーネントを配置します。縦方向の間隙の値を表示することにより行の間の幅を指定することができます。次の xml の例は上記に示しているウィンドウを表しています:
...
| 属性 | 説明 |
| alignment | ペインのコンポーネントの水平方向のアライメントを指定する。 |
| horizontalGap | コンポーネントが縦方向軸を埋め、ペインの水平方向全体に広がるため、コンポーネント間の水平方向（左から右）の間隙を指定する。 |
| verticalGap | コンポーネント間の縦方向（上から下）の間隙を指定する。 |
verticalFlowPane
verticalFlowPane は左から配列し、コラムで一番大きいコンポーネントを中央においている一行にコンポーネントを配置します。コンポーネントがコンテナの縦方向のスペースを埋める場合時新しいコラムを開始します。次の xml の例は上記のウィンドウを示しています:
...