Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

This section provides brief descriptions of the containers and layout panes available for developing a このセクションでは Nexaweb Java application アプリケーション UI .

For more detailed information on container and layout pane widgets, see the XAL Schema documentation.

Basic Containers

This section describes the basic containers available for developing a Nexaweb Java application UI. In addition to these containers, see also Floating Containers and Root Elements.

desktopPane

NexawebImage Removed

desktopPane is a panel that also hosts windows and dialogs.

Nexaweb Studio makes this widget available in the Palette view from which you can drag and drop it onto a UI file in the Visual Editor.

Example XAL for using this widget in a freePaneの開発時に利用可能なコンテナとレイアウトペインの概要を提供します。

コンテナとレイアウトペインウィジェットに関する詳細な情報は、XAL Schema ドキュメントをご参照下さい。

基本的なコンテナ

このセクションでは、Nexaweb Java アプリケーション UI 開発時に利用できる基本的なコンテナの概要について説明しています。これらのコンテナに関する追加として、Floating Containers および Root Elements もご参照下さい。

desktopPane

Image Added

desktopPane は window とダイアログをホストするパネルです。

Nexaweb Studio では Palette ビューでこのウィジェットが利用可能で、そこから Visual Editor の UI ファイルにドラッグ&ドロップすることができます。

freePane でこのウィジェットを使用した XAL の例:

<desktopPane height="300px" width="300px" x="0px" y="0px"/>

scrollPane

NexawebImage Removed

A component used to fit large areas of content that automatically shows scrollbars when a component inside of it is larger than the scrollPane itself. Can have only one child component that always takes up at least the entire space of the scroll pane. (The child component is at least as large as the viewable area of the scrollPane.)

Nexaweb Studio makes this widget available in the Palette view from which you can drag and drop it onto a UI file in the Visual Editor.

Example XAL for using this widget in a freePane:

<scrollPane Image Added

コンテントの大量な部分に合うように使用されたコンポーネントは、その中にあるコンポーネントが scrollPane 自身より大きい場合、自動的にスクロールバーを表示します。常時少なくとも scrollPane の全体のスペースを占める子コンポーネントのみ保有することも可能です(子コンポーネントは少なくとも scrollPane の視覚エリアくらいの大きさです)。

Nexaweb Studio ではパレット ビューでこのウィジェットが利用可能で、そこから Visual Editor の UI ファイルにドラッグ&ドロップすることができます。

freePane でこのウィジェットを使用した XAL の例:

Code Block
<scrollPane height="300px" width="300px" x="10px" y="10px">

...


<freePane/>

...


</scrollPane>

The following table lists and provides brief descriptions of scrollPane component specific attributes: 

AttributeDescription
horizontalScrollBarPolicySpecifies policy for when the component displays a horizontal scrollbar. always - horizontal scrollBar always visible. never - horizontal scrollBar never visible. automatic - horizontal scrollbar displays if needed. Default=automatic.
horizontalScrollPositionSpecifies the horizontal position of the scrolled component. For example, setting the value to 100 scrolls the component 100 pixels to the right. DOM Accuracy: The value of this attribute in the DOM always reflects the current value in the UI.
verticalScrollBarPolicySpecifies policy for when the component displays a vertical scrollbar. always - vertical scrollBar always visible. never - vertical scrollBar never visible. automatic - vertical scrollbar displays if needed. Default=automatic.
verticalScrollPositionSpecifies the vertical position of the scrolled component. For example, setting the value to 100 scrolls the component 100 pixels down.
DOM Accuracy: The value of this attribute in the DOM always reflects the current value in the UI.

horizontalSplitPane

NexawebImage Removed

A panel divided into two sections, horizontally, with a draggable bar between them by which a user can resize each section within the total space of the panel.

Nexaweb Studio makes this widget available in the Palette view from which you can drag and drop it onto a UI file in the Visual Editor.

Example XAL for using this widget in a freePane: 

次の表は scrollPanet 特有の属性の一覧と概要を示しています:

属性説明
horizontalScrollBarPolicy水平方向のスクロールバー表示ポリシーを指定する。
always–水平方向のスクロールバーを常に表示
never- 水平方向のスクロールバーは常に非表示
automatic– 必要に応じて水平方向のスクロールバーを表示
デフォルト=automatic
horizontalScrollPositionスクロールコンポーネントの水平方向の位置を指定する。例えば、値を100 に設定するとコンポーネントは 100 ピクセル右にスクロールする。
DOM 精度:DOM のこの属性値は常に UI の現在値を反映する。
verticalScrollBarPolicy縦方向のスクロールバー表示ポリシーを指定する。
always- 縦方向のスクロールバーを常に表示
never-縦方向のスクロールバーは常に非表示
automatic– 必要に応じて縦方向のスクロールバー表示
デフォルト=automatic
verticalScrollPositionスクロールコンポーネントの縦方向の位置を指定する。例 えば、値を100 に設定するとコンポーネントは 100 ピクセル下にスクロールする。
DOM 精度: DOM でのこの属性の値は、常に UI の現在値を反映する。

horizontalSplitPane

Image Added

水平方向にドラッグ可能なバーによって2つのセクションに分けられたパネルで、パネルのトータルスペース内の各セクションでユーザーがリサイズできます。

Nexaweb Studio ではパレット ビューでこのウィジェットが利用可能で、そこから Visual Editor の UI ファイルにドラッグ&ドロップすることができます。

freePane でこのウィジェットを使用した XAL の例:

Code Block
<horizontalSplitPane height="300px" width="300px" x="40px" y="0px">

...

  <left>

...

   <freePane/>
 

...

 </left>

...


  <right>
   <freePane/>
 

...

 </right>

...


</horizontalSplitPane>

...

 

 

次の表では horizontalSplitPane コンポーネント特有の属性一覧と概要を示しています:

AttributeDescription
splitPosition Specifies the location of the dividing bar from 0 (left) to 100 (right).splitPosition0(左)から100 (右)で分割バーの場所を指定する。


verticalSplitPane

NexawebImage Removed

A panel divided into two sections, vertically, with a draggable bar between them by which a user can resize each section within the total space of the panel.

Nexaweb Studio makes this widget available in the Palette view from which you can drag and drop it onto a UI file in the Visual Editor.

Example XAL for using this widget in a freePane:

Image Added

水平方向にドラッグ可能なバーによって2つのセクションに分けられたパネルで、パネルのトータルスペース内の各セクションでユーザーがリサイズできる。

Nexaweb Studio ではパレット ビューでこのウィジェットが利用可能で、そこから Visual Editor のUI ファイルにドラッグ&ドロップすることができます。

freePane でこのウィジェットを使用したXAL の例:

Code Block
 <verticalSplitPane height="300px" width="300px" x="40px" y="0px">

...

  <top>

...

   <freePane/>

...


  </top>
  <bottom>
  <freePane/>

...


  </bottom>

...


 </verticalSplitPane>

...

The following table lists and provides brief descriptions of verticalSplitPane component specific attributes:

 

 

次の表は verticalSplitPane コンポーネント特有属性の一覧と概要を示しています。

AttributeDescription
splitPosition Specifies the location of the dividing bar from 0 (top) to 100 (bottom).splitPosition0(上)から100 (下)で分割バーの場所を指定する。


tabPane

NexawebImage Removed

A panel with a clickable tab at the top. Keyboard navigation: Tabbing into a tab box focuses on a tab. Once focused on a tab, left or right arrow keys navigate between tabs, or pressing the tab key focuses on the first component inside the tab.

Nexaweb Studio makes this widget available in the Palette view from which you can drag and drop it onto a UI file in the Visual Editor.

Example XAL for using this widget in a freePane:Image Added

上部にクリックできるタブが付いたパネル。キーボードナビゲーション: タブのタブボックスフォーカスにタブ指定します。タブにフォーカス後、左または右の矢印キーはタブ間を移動するか、またはタブ内の最初のコンポーネントにフォーカスしているタブキーを押下します。

Nexaweb Studio では Paletteview でこのウィジェットが利用可能で、そこから Visual Editor の UI ファイルにドラッグ&ドロップすることができます。

freePane でこのウィジェットを使用した XAL の例:

Code Block
<tabPane height="300px" width="300px" x="10px" y="0px">

...


  <tab text="Tab">

...


   <freePane/>

...


  </tab>

...


</tabPane>

...

 The following table lists and provides brief descriptions of tabPane component specific attributes:

AttributeDescription
tabAlignmentSpecifies the position of tabs relative to the parent tabPane. In a default tabPane, with tabs that run across the top, setting this to end positions the tabs flush with the far right of the tabPane. Setting this to start positions the tabs flush with the far left of the tabPane.  Default=start
tabGrowth  Specifies in pixels how much a tab enlarges when selected. Default=2 pixels.
tabOverlapSpecifies the spacing between tabs. For example, set to 5, tabs overlap their neighbors slightly, while set to -5 creates space between tabs.
tabPlacementSpecifies along which edge of the tabPane to place the tabs. Values: left, right, top, bottom. Default=top.

The following figure shows a tabPane with two tabs:

NexawebImage Removed

The following figure shows a tabPane with tabPlacement set to left and tabOverlap set to -5:

NexawebImage Removed

Layout Panes

This section describes the layout panes available for developing a Nexaweb Java application UI. Use layout panes to quickly organize components in application user interfaces. 

freePane

NexawebImage Removed

 

freePane is the default layout pane Nexaweb Studio uses for all containers if you do not specify any other layout pane. It 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 freePane when other panes 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:
Code Block
languagehtml/xml
linenumberstrue
<xal xmlns="http://openxal.org/ui/java 

 

次の表は tabPane コンポーネント特有の属性一覧と概要を示しています。

属性説明
tabAlignment親 tabPane に対しタブの位置を指定する。デフォルト tabPane では上部を横断するタブで、これを end ポジションに設定するとタブはtabPane の右側、これをstart 位置に設定しすると tabPane の左端に表示される。デフォルト=start
tabGrowthピクセルで選択時タブがどのくらい拡大するかを指定する。デフォルト=2 ピクセル
tabOverlapタブの間のスペースを指定する。例: 5に設定するとタブは少し隣と重なるが-5に設定すると間にスペースができる。
tabPlacementどの tabPane の端に沿ってタブを配置するのかを指定する。 値: left, right, top, bottom. デフォルト=top.

次は二つのタブが付いた tabPane を表示しています:

Image Added

次は tabPlacement left tabOverlap -5 を設定した tabPane の図です。

Image Added

レイアウトペイン

このセクションでは Nexaweb Java アプリケーション UI の開発時に利用可能なレイアウトペインの説明をしています。レイアウトペインを使用し、アプリケーションユーザーインターフェイスで直ちにコンポーネントを組み立てます。

freePane

Image Added

 

freePane は他の レイアウトペインを指定しない場合に Nexaweb Studio が全てのコンテナに使用するデフォルトのレイアウトペインです。各コンポーネントで指定する絶対サイズと絶対位置に従い、コンポーネントを調整します。コンポーネントをサイジングとポジショニングをする際、画面サイズが PC によって異なるため考慮する必要があります。他のペインが要件に合致しない際、またはマウスイベントから x/y 座標付きのコンテナに freePane を使用しコンポーネントを追加する際、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

 NexawebImage RemovedImage Added

A borderPane places components in up to five areas: north, south, west, east, and center. Components placed in north and south stretch horizontally. Components placed in the west and the east stretch vertically. Components placed in the center stretch in both directions, so that the remaining space fills with the center component.  You place child components in these areas by specifying borderPosition
when adding the component to the borderPane.  The following example xml represents the window shown above:

...

languagehtml/xml
linenumberstrue

...

borderPane は最大5つのエリア(北、南、西、中央)までコンポーネントを配置します。北と南に水平方向に伸ばし配置されたコンポーネント。西と東に縦方向に伸ばし配置されたコンポーネント。両方の方向に伸ばし中央に配置され、残りのスペースは中央のコンポーネントで埋められているコンポーネント。コンポーネントを borderPane に追加する際、borderPosition を指定することにより子コンポーネントをこれらの部分に配置します。

次xmlの例は上記のwindowを表しています:

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

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.  borderPane ignores the size of a component placed in the center area so that the component can fill any available space.  Components placed in north and south maintain their height and components placed in west and east maintain their width.

You don't have to put components in all five areas.  Often placing components in two or there areas is sufficient to get the layout result you want.

The following table lists and provides brief descriptions of borderPane specific attributes: 

AttributeDescription
borderPositionSpecify this attribute for components you add to a borderPane layout. Specifies the location of a component within the borderPane. You cannot change this attribute for a component after adding that component to the borderPane. Values=north, south, east, west, center.
horizontalGapSpecifies the horizontal gap between components in pane.
verticalGapSpecifies the vertical gap between components in pane.

...

Image Removed

Image Removed

cardPane (available in Java applications only) allows you to put different components to a common container, while showing only one of them at a time. You specify which one to show using the show attribute.  The displayed component occupies the entire space of its parent container. The best example
of a cardPane is a slideshow. As shown in the windows above, clicking prev or next 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:

cardPane - UI Example

Code Block
languagehtml/xml
linenumberstrue
<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">
          

 

この例が示している通り、子コンポーネントはそれらを拡張し、それらがある部分を埋めます。ウィンドウをリサイズする場合、コンポーネントは、そのエリアに合うようにコンポーネント自身をリサイズします。borderPane はセンターエリアに配置されたコンポーネントのサイズを考慮せず、コンポーネントが利用可能なスペースを埋めることができるようにします。北と南に配置されているコンポーネントは高さを維持し、西と東に配置されているコンポーネントは幅を維持します。

コンポーネントをすべての5つのエリアに配置する必要はありません。コンポーネントを2つまたは3つのエリアに配置すれば望むレイアウトは得ることができます。

次の表はborderPane特有属性の一覧と概要を示しています:

属性説明
borderPositionこの属性を指定し、borderPane レイアウトにコンポーネントを追加する。borderPane 内でコンポーネントの位置を指定する。borderPane にコンポーネントを追加した後は、この属性を変更することはできない。
値=north, south, east, west, center
horizontalGapペインのコンポーネント間での水平方向のギャップを指定する。
verticalGapペインのコンポーネント間の縦方向のギャップを指定する。


cardPane

Image Added

Image Added

cardPane (Java アプリケーションのみで利用可能) によって共通のコンテナに異なるコンポーネントを配置することができますが、一度に1つのみ表示することができます。show 属性を使用し、どれを表示するか指定します。親コンテナの全スペースを表示コンポーネントが占めます。cardPane の一番良い例は slideshow です。上記 window に示している通り、prev または次のボタンをクリックすることで cardLayout の show 属性を設定し、deck show upで対応するコンポーネントを作成します。次の xml の例は上記に示す window を表しています。

cardPane - UI 例

Code Block
<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 例

Code Block
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
         // <button borderPosition="center" id="button4" text="Button 4"/>
      if last card is reached, set to first card
         currPage++;
 </borderPane>        if( currPage == cardPane.getChildCount() )
</cardPane>         {
   <horizontalFlowPane borderPosition="south" align="center">        currPage = 0; 
     <button id="prev" text="prev" onCommand="mco://cardPaneMco.prev( cardPane )"/> }

         //   get the name of <button id="next" text="next" onCommand="mco://cardPaneMco.next( cardPane )"/>
     the new card to show, and set it on the card pane
      </horizontalFlowPane>   String cardName = ( (Element)  </borderPane>cardPane.getChildAt(currPage) ).getAttribute("name");
    </window>
</xal>

cardPane - MCO Example

Code Block
languagejava
linenumberstrue
 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)cardPane.setAttribute("show", cardName ); 
     }

     public void prev( Element cardPane )
     { 
         //   incrementdecrement the current card index
         //   if lastfirst card is reached, set to firstlast card
         currPage++--;
         if( currPage == cardPane.getChildCount()< 0 )
         {
             currPage = 0cardPane.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 );

     }

    public void prev( Element cardPane )
     { 
         //   decrement the current card index
         //   if first card is reached, set to last card} 

次の表は cardPane 特有属性の一覧と概要を示しています。

属性説明
cardNamecardPane の show 属性に提供されるとコンポーネントが cardPane で有効になるコンポーネントタイプを示すstringを指定する。アクティブなコンポーネントは cardPane の全てのエリアを占めており、インプットイベントも受ける。コンポーネントを cardPane に追加した後、このコンポーネントに対する属性を変更することはできない。

gridPane


Image Added
親コンテナにコンポーネントを追加する順番を基に、gridPane は統一されたグリッドで行ごとにコンポーネントを調整します。 gridPane は各コンポーネントを同じサイズにし、全体のグリッドを親コンテナに正確に合わせます。コラム属性で、グリッドコラムの数を指定します。gridPane 属性に加え、子コンポーネント属性を使用し、グリッドのサイジングと子コンポーネントの配置することができます。

次の例は上記ウィンドウの xml の例を示しています:

Code Block
 <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  currPage--;#1"/>
      <listItem text="listItem #2"/>
 if( currPage < 0 ) <listItem text="listItem #3"/>
     </listBox>
{    </comboBox>
    <radioButton height="25px"    currPage = cardPane.getChildCount()-1;text="radioButton" width="100px"/>
    <textField height="25px"   text="TextField" width="200px"/>
 }   <button height="25px" text="Button" width="100px"/>
   // <listBox  get the name of the new card to show, and set it on the card pane height="100px" width="100px">
     <listItem text="listItem #1"/>
     <listItem text="listItem #2"/>
     <listItem text="listItem #3"/>
 String cardName = ( (Element) cardPane.getChildAt(currPage) ).getAttribute("name"); </listBox> 
    <button height="25px"    cardPane.setAttribute("show", cardName );
     }
 }

The following table lists and provides brief descriptions of cardPane specific attributes:

AttributeDescription
cardNameSpecifies a string indicating the type of component which, when supplied in the cardPane's show attribute causes this component to become the active component in the card pane. The active component takes up the entire area of the cardPane, and can receive input events. You cannot change this attribute for a component after adding that component to the cardPane.

gridPane

NexawebImage Removed
 
gridPane arranges components row by row in a uniform grid, based on the order in which you add components to the parent container. gridPane 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 gridPane 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:

Code Block
languagehtml/xml
linenumberstrue
<xal xmlns="http://openxal.org/ui/java">
  <window title="New Window" width="300px" height="300px">
   <gridPane evenlySpace="true" columns="3"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

Image Added

horizontalBoxPane はコンテナの水平の方向に沿って一列にコンポーネントを配置します。コンポーネントの合計の幅のサイズがコンテナの幅を超える場合、horizontalFlowPane がラップするように次の行にはコンポーネントをラップしません。デフォルトでは horizontalBoxPane はコンポーネントのサイズを優先しており、コンポーネントはコンテナのサイズが変更してもリサイズしません。次の xml の例は、上記のウィンドウを示しています:

Code Block
<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"/> 
    <link<textField height="20px25px" text="linkTextField" width="200px"/>
    <comboBox<label height="25px20px" text="ComboBoxLabel" 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>
<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 </window>
 </xal> 

 

次の表は、horizontalBoxPane 特有属性の一覧と説明を示しています。

属性説明
alignmentレイアウトの縦方向軸に沿ってコンポーネントをそろえる位置を指定する。
値: start, center, end, stretch. start= コンポーネントの上または左; center=中央左; end=下左; stretch=コンポーネントを配列させ全体の部分をカバーする
boxFlexhorizontalBoxPane レイアウトに追加するコンポーネントにこの属性を指定する。親のコンテナに利用可能なスペースに合うようコンポーネントの伸縮を指定する。レイアウトの一つ以上のコンポーネントが flex value の場合、各コンポーネントはその flex value に比例し合わせて伸縮する。flex value がないコンポーネントはそれぞれのサイズのままになる。
packレイアウトの水平方向の軸に沿ってコンポーネントをそろえるところ指定する。ペインに余分なスペースがある場合、pack 属性は、子コンポーネント固定するところを指定する。値=start, center, end. start= コンポーネントの上か左; center=中央上; end=上左; stretch=コンポーネントを配列させ全体の部分をカバーする


verticalBoxPane

Image Added

verticalBoxPane は縦方向に一列のコラムにコンポーネントを配置します。コンポーネントのサイズがコンテナサイズ以上の場合、次の列またはコラムにコンポーネントをラップしませんが、verticalFlowPane は利用可能なスペースにコンポーネントをラップします。デフォルトでは、verticalBoxPane はコンポーネントのサイズを優先し、コンテナのサイズが変更してもコンポーネントはリサイズしません。次の xml の例は上記に示しているウィンドウを表しています。

Code Block
 <xal xmlns="http://openxal.org/ui/java"> 
    <listItem text="listItem #1"/>
 <window title="New Window" width="300px" height="300px" x="5" y="5">
   <listItem text="listItem #2"/><verticalBoxPane>
    <button height="25px" <listItem text="listItem #3Button" width="100px"/>
    </listBox>
     <button height="25px" text="Button" width="100px"/> 
  </gridPane>   </window>
 </xal>

gridPane is patterned after the SWT grid layout. - http://www.eclipse.org/articles/Understanding%20Layouts/Understanding%20Layouts.htm

The following table lists and provides brief descriptions of gridPane specific attributes:

AttributeDescription
gridColumnSpanSpecifies the number of columns the component spans in the grid.
gridHorizontalAlignmentSpecifies the horizontal alignment of the component within a grid layout cell.
gridHorizontalGrabSpaceSpecifies whether the grid cell this component occupies stretches horizontally to fit the available space. true=yes; false=no.
gridRowSpanSpecifies the number of rows the component spans in the grid.
gridVerticalAlignmentSpecifies the vertical alignment of the component within a grid layout cell.
gridVerticalGrabSpaceSpecifies whether the grid cell this component occupies stretches vertically to fit the available space. true=yes; false=no.

Note: You cannot change these attributes for a component after adding that component to the gridPane.

...

NexawebImage Removed

The horizontalBoxPane places components in a single row along the horizontal orientation of the container.  It does not wrap components to the next row, as the horizontalFlowPane does, when the size of the total width of the components exceeds the width of the container. By default, horizontalBoxPane honors a component's size and the component does not resize if the container's size changes. The following example xml represents the window shown above.

Code Block
languagehtml/xml
linenumberstrue
 <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>

The following table lists and provides brief descriptions of horizontalBoxPane specific attributes:

AttributeDescription
alignmentSpecifies where to align components along vertical axis in layout. Values: start, center, end, stretch. start= top or left of component; center=center left; end=bottom left; stretch=align the component to cover the entire area.
boxFlexSpecify this attribute for components you add to a horizontalBoxPane layout. Specifies whether the component grows or shrinks to fit the available space in the parent container. If more than one component in the layout has a flex value, each component grows or shrinks in proportion to its flex value. Components with no flex value remain at their specified size.
packSpecifies where to align components along horizontal axis in layout. If the pane has extra space, the pack attribute specifies where to anchor the child components. Values=start, center, end. start= top or left of component; center=center top; end=top left; stretch=align the component to cover the entire area.

...

NexawebImage Removed

The verticalBoxPane places components in a single column in a vertical orientation.  It does not wrap a component to the next row or column if the component's size is over the container's size, where as verticalFlowPane does wrap the component to available space. By default, verticalBoxPane honors a component's size and the component does not resize if the container's size changes. The following example xml represents the window shown
above:

Code Block
languagehtml/xml
linenumberstrue
 <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>

The following table lists and provides brief descriptions of verticalBoxPane specific attributes:

AttributeDescription
alignmentSpecifies where to align components along horizontal axis in layout. Values: start, center, end, stretch. start= top or left of component; end= the right or bottom; stretch=align the component to cover the entire area.
boxFlexSpecify this attribute for components you add to a verticalBoxPane layout. Specifies whether the component grows or shrinks to fit the available space in the parent container. If more than one component in the layout has a flex value, each component grows or shrinks in proportion to its flex value. Components with no flex value remain at their specified size.
packSpecifies where to align components along vertical axis in layout. If the pane has extra space, the pack attribute specifies where to anchor the child components. Values=start, center, end.

...

NexawebImage Removed

horizontalFlowPane lays out components in rows that span the horizontal width of the container. horizontalFlowPane separates components within a row by a horizontal gap that you can specify.  horizontalFlowPane places each component in the same row until the total of the width of components in the row and the horizontal gap between them exceeds the width of the container, then begins a new row and places components across that. You can specify the amount of space between rows by indicating a value for the vertical gap. The following example xml represents the window shown above:

Code Block
languagehtml/xml
linenumberstrue
 <xal<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=コンポーネントを配列させ全体の部分をカバーする
boxFlexverticalBoxPane レイアウトに追加するコンポーネントの属性を指定する。親コンテナの利用可能なスペースに合わせるようコンポーネントの伸縮を指定する。レイアウトの一つ以上のコンポーネントが flex value の場合、各コンポーネントはその flex value に比例し合わせて伸縮する。flex value がないコンポーネントはそれぞれのサイズのままになる。
pack
レイアウトの水平方向の軸に沿ってコンポーネントをそろえる場所を指定する。ペインに余分なスペースがある場合、pack 属性は、子コンポーネント固定する場所を指定する。値=start, center, end


horizontalFlowPane

Image Added

horizontalFlowPane はコンテナの水平方向幅にspanする行にコンポーネントを配置します。horizontalFlowPane は指定できる水平方向の間隙によって、行内のコンポーネントを分けます。horizontalFlowPane は行と水平方向の間隙の間の幅の合計がコンテナの幅を超えるまで各コンポーネントを同じ行に配置し、その後新しい行が始まりそれにコンポーネントを配置します。縦方向の間隙の値を表示することにより行の間の幅を指定することができます。次の xml の例は上記に示しているウィンドウを表しています:

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

The following table lists and provides brief descriptions of horizontalFlowPane specific attributes:

AttributeDescription
alignmentSpecifies horizontal alignment of components in pane.
horizontalGapSpecifies horizontal (left to right) gap between components as components fill the vertical axis and spread horizontally across the pane.
verticalGap  Specifies vertical (top to bottom) gap between components.

...

NexawebImage Removed

verticalFlowPane lays out components in a single column, aligned from the left, and centering the components to the largest component in the column.  It starts a new column when components fill the vertical space of the container. The following example xml represents the window shown above:

Code Block
languagehtml/xml
linenumberstrue
 <xal 

 

次の表は horizontalFlowPane 特有の属性の一覧と概要を示しています:

属性説明
alignmentペインのコンポーネントの水平方向のアライメントを指定する。
horizontalGapコンポーネントが縦方向軸を埋め、ペインの水平方向全体に広がるため、コンポーネント間の水平方向(左から右)の間隙を指定する。
verticalGapコンポーネント間の縦方向(上から下)の間隙を指定する。


verticalFlowPane

Image Added

verticalFlowPane は左から配列し、コラムで一番大きいコンポーネントを中央においている一行にコンポーネントを配置します。コンポーネントがコンテナの縦方向のスペースを埋める場合時新しいコラムを開始します。次の xml の例は上記のウィンドウを示しています:

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

The following table lists and provides brief descriptions of verticalFlowPane specific attributes:

...

 

 

次の表は verticalFlowPane 特有の属性一覧と概要を示しています:

属性説明
alignmentペインのコンポーネントの縦方向のアライメントを指定する。
horizontalGapコンポーネントが縦方向軸を埋め、ペインの水平方向全体に広がるため、コンポーネント間の水平方向(左から右)の間隙を指定する。
verticalGapコンポーネント間の縦方向(上から下)の間隙を指定する。