<shuttle>要素 |
![]() |
ネームスペース: | http://xmlns.oracle.com/uix/ui |
派生元: | <ui:base>要素 |
グループ: | UIX Components |
要素の型: | UINode |
構文 |
![]() |
<shuttle
name="string"
[ disabled="boolean" ]
[ leadingDescShown="boolean" ]
[ leadingHeader="string" ]
[ reorderable="boolean" ]
[ size="unsignedInt" ]
[ trailingDescShown="boolean" ]
[ trailingHeader="string" ] > <filter></filter> <leading></leading> <leadingFooter></leadingFooter> <trailing></trailing> <trailingFooter></trailingFooter> </shuttle>
説明 |
![]() |
<shuttle>要素は、項目を2つのリスト間で移動し、いずれかのリストを並び替えるメカニズムを提供します。 シャトルは、1つのリストから別のリストに移すことにより項目を選択するためによく使用されます。 ただし、シャトルはリストの他の操作にも使用できます。 シャトルには、名前が必要です。これは、シャトル内の要素の名前の導出元となります。 name属性をシャトルの名前に設定します。 シャトル内の各リストにはヘッダーが必要です。これはleadingHeader属性およびtrailingHeader属性として設定されるテキストです。
シャトル内の各コンテナには、リストの下に項目の説明を表示する領域を設けることができます。 コンテナにこの領域を設けるかどうかを指定するには、leadingDescShown属性およびtrailingDescShown属性を設定します。
デフォルトでは、シャトルの後続リストの隣に並べ替えのアイコンがあります。 これらのアイコンを削除して、リストの順序を変えられないようにするには、reorderable属性をfalseに設定します。 両方のリストの高さを項目で設定するには、size属性を設定します。 サイズは10項目から20項目の間です。 属性が設定されていない場合、サイズは両方のリストの長さ、最大値および最小値に基づいて決まります。 シャトルには、名前の付けられた子が2つ指定されている必要があります。 これは<leading>および<trailing>です。 子は両方とも、リスト・コンテンツ(OptionBean)を子として持つListBeansであることが必要です。 シャトルがリストから項目を選択するために使用される場合、leadingはfromリスト、trailingはtoリストとみなされます。 シャトルは索引付けされた子を持ちません。 シャトルの主な機能は、1つのリストから別のリストへの項目の移動です。 ユーザーは一方のリストで1つ以上の項目を選択し、リストの間にある適切なアイコンを選択することで、項目をリスト間で移動できます。 「移動」アイコンまたはリンクをクリックすることにより、先行リストで選択された項目を後続リストに移動します。 「削除」アイコンまたはリンクをクリックすることにより、後続リストで選択された項目を先行リストに移動します。 「すべて移動」アイコンまたはリンクをクリックすることにより、先行リストの全項目を後続リストに移動します。 「すべて削除」アイコンまたはリンクをクリックすることにより、後続リストの全項目を先行リストに移動します。 シャトルは、後続リストの並べ替えもできます。 後続リストの隣にあるアイコンを使用し、選択した項目をリストの一番上へ、リスト内の1スロット上へ、リストの一番下へ、またはリストの1スロット下へ移動できます。 表示される際に、リストにはすべての項目の下に横線が入ります。 この横線は、リストの正しいサイズを維持するためのもので、リスト内の他の項目とは違い、操作できません。 シャトルでは、ユーザーは各リストの下にボタン(ButtonBean)またはアイコン(ImageBean)を配置できます。 これらのボタンまたはアイコンは、リストの下の1行分のみを使用し、折り返しません。シャトルのレイアウトを一定にする場合、ボタンまたはアイコンの高さは最大26ピクセルにできます。 ボタンおよびアイコンはFlowLayoutBean内に置き、どのリストの下にボタンを配置するかに応じて、<leadingFooter>または<trailingFooter>として、このレイアウトBeanをシャトルに追加します。 リストの下にフッターが必要ない場合は、対応する名前の付けられた子をnullとして残しておきます。 これらのボタンおよびアイコンは、ShuttleProxyを後述のように使用することにより、シャトルの操作に使用できます。 シャトルでは、leadingコンテナ内のリストの上にフィルタを配置できます。 フィルタは、<filter>として追加されます。 フィルタは、ShuttleProxyを後述のように使用することにより、シャトルの操作に使用できます。 シャトルは、リスト内で選択されている項目のみではなく、各リストのコンテンツ(オプション)が送信時に必要な場合に使用されます。 各リストのコンテンツは、シャトル内に非表示要素の値として格納されます。 これらは、フォームが送信される際に、"-shuttleName-:Leading:items"および"-shuttleName-:Trailing:items"の形式で転送されます。ここで"-shuttleName-"は、シャトルにname属性により指定された名前です。 各オプションは、セミコロン(;)により区切られます。 最後のオプションの後にもセミコロンが続きます。 オプションの順序は、リスト内での順序と一致します。 各オプションは、値により識別されます。 値が設定されていない場合、かわりにオプションのテキストにより識別されます。 場合によっては、リストのコンテンツを操作または使用するために、開発者はJavaScriptの使用が必要になります。 これは、シャトルのフッターまたはシャトル外のボタンまたはアイコンのアクションとして必要になる場合があります。 こうすることで、リスト上で動作する一連のJavaScriptユーティリティのメソッドが使用可能になります。 これらは、シャトルを使用する場合に自動的にロードされるshuttle.js JavaScriptライブラリにあります。 これらのメソッドは、シャトル名およびフォーム名に基づいてShuttleProxyインスタンスを作成することにより、アクセスできます。
プロキシを作成すると、それを使用してリストに関する情報を取得、またはシャトル内のリストを操作できます。 プロキシは次の関数を提供します。
属性
シャトルのリスト
シャトルのフッター
シャトルのフィルタ
リストのコンテンツの取得
JavaScriptのプロキシ
// create the proxy object
var proxy2 = new ShuttleProxy("testShuttle2", "testForm2");
例 |
![]() |
trailingコンテナの下にボタンが1つある基本的なシャトルです。
<shuttle name="shuttle1"
leadingHeader="Header 1"
trailingHeader="Header 2"
size="5">
<leading>
<list>
<contents>
<option text="option 1"/>
<option text="option 2"/>
<option text="option 3"/>
<option text="This is a very very long option 4"/>
</contents>
</list>
</leading>
<trailing>
<list>
<contents>
<option text="2option 1"/>
<option text="2option 2"/>
<option text="2option 3"/>
<option text="2option 4"/>
<option text="2option 5"/>
</contents>
</list>
</trailing>
<trailingFooter>
<flowLayout>
<contents>
<button text="A button"/>
</contents>
</flowLayout>
</trailingFooter>
<contents/>
</shuttle>
説明とフィルタのある並べ替えリストです。
<shuttle name="shuttle2" leadingDescShown="true" leadingHeader="Reorder List">
<filter>
<rowLayout valign="center">
<contents>
<messagePrompt prompt="Filter"/>
<spacer width="5" height="1"/>
<choice name="binkyLovesWinky">
<contents>
<option text="filter 1" value="filter 1"/>
<option text="filter 2" value="filter 2"/>
<option text="filter 3" value="filter 3"/>
<option text="filter 4" value="filter 4"/>
<option text="filter 5" value="filter 5"/>
<option text="filter 6" value="filter 6"/>
</contents>
</choice>
<spacer width="3" height="1"/>
<button text="Go" destination="#"/>
</contents>
</rowLayout>
</filter>
<leading>
<list>
<contents>
<option text="choice 1" longDesc="choice 1 description"/>
<option text="choice 2" longDesc="choice 2 description"/>
<option text="choice 3" longDesc="choice 3 description"/>
<option text="choice 4" longDesc="choice 4 description"/>
<option text="choice 5" longDesc="choice 5 description"/>
<option text="choice 6" longDesc="choice 6 description"/>
<option text="choice 7" longDesc="choice 7 description"/>
<option text="choice 8" longDesc="choice 8 description"/>
<option text="choice 9" longDesc="choice 9 description"/>
<option text="choice 10" longDesc="choice 10 description"/>
<option text="choice 11" longDesc="choice 11 description"/>
<option text="choice 12 is longer!" longDesc="choice 12 description"/>
</contents>
</list>
</leading>
<contents/>
</shuttle>
属性 |
![]() |
子要素 |
![]() |
|