ステップ・バイ・ステップnavigationBarの作成
ステップ・バイ・ステップnavigationBarは通常、コンポーネント内に配置されます。
ステップ・バイ・ステップnavigationBarを作成するには、次のようにします。
- 目的のファイルの設計構造ウィンドウで、「pageLayout」ノードを展開して、「pageButtons」ノードを探します。
「pageLayout」ノードが表示されない場合は、「page」->「content」->「dataScope」->「document」->「body」->「form」と開きます。「pageButtons」ノードは、「pageLayout」の「pageLayout-名前付きの子」の下にあります。
- コンポーネント・パレットで、ドロップダウン・リストから「Navigation Components」を選択し、次にリストからpageButtonBarコンポーネントを「pageButtons」ノードにドラッグ・アンド・ドロップします。
「pageButtonBar」ノードが、開かれている「pageButtons」ノードの下に挿入されます。
- コンポーネント・パレットで、ドロップダウン・リストから「Navigation Components」を選択し、次にリストからnavigationBarコンポーネントを「pageButtonBar」ノードにドラッグ・アンド・ドロップします。
「navigationBar」ノードが、開かれている「pageButtonBar」ノードの下に挿入され、強調表示されます。プロパティ・インスペクタで、新規ナビゲーション・バーのプロパティが表示されます。
- プロパティ・インスペクタで、ステップ・バイ・ステップnavigationBarに対して次の属性を設定します。
- name: ナビゲーション・バーの名前を入力します。name属性は、destination属性とともに使用され、「戻る」および「次へ」ボタンに対するURLリンクを生成します。
- destination: ナビゲーション・リンクのベースURLを入力します。destination属性は、name属性とともに使用され、「戻る」および「次へ」ボタンに対するURLリンクを生成します。formSubmitted属性がtrueに設定されている場合またはformName属性が設定されている場合には、このdestination属性は無視されます。
- typeText: 生成された文字列に表示するテキスト説明を入力します。デフォルトは「Step」です。たとえば、「Step 1 of 3」のようになります。
- minValue: 最初のステップの値を入力します。
- maxValue: 最後のステップの値を入力します。
- Value: 現在のステップの値を入力します。
- maxVisited: 最も多くアクセスされたノードの索引を入力します。maxVisited属性は、所定のステップまでジャンプした後で、それより前のステップに戻る場合にのみ設定します。この属性は選択リストでのみ使用します。
- formSubmitted: JavaScriptフォーム送信を使用する場合、この属性をtrueに設定します。formNameが指定されていない場合、親フォームが使用されます。
- formName: イベントが送信されるフォームの名前を入力します。formSubmittedを設定せずにこの属性を設定しても、JavaScriptフォーム送信を利用できます。
- unvalidated: デフォルトでは、フォーム送信が利用できる場合に検証が使用されます。フォームが送信されるときに値を検証しない場合は、この属性をtrueに設定してください。
- ステップ・バイ・ステップ・ナビゲータに選択リストを挿入するには、次のようにします。
- 設計構造ウィンドウで、navigationBarコンポーネントを右クリックして、「中に挿入」->「link」を選択します。
- プロパティ・インスペクタで、リンク属性を設定します。
- ステップ5aと5bを繰り返して、希望する数のリンク・コンポーネントを挿入します。
注意:
例(UIX XML)
...
<pageLayout>
<!-- Step-by-Step Navigator in pageButtons -->
<pageButtons>
<pageButtonBar>
<contents>
<button text="Cancel"/>
<navigationBar name="checkout" maxValue="5" value="2"/>
<button text="Submit"/>
</contents>
</pageButtonBar>
</pageButtons>
<!-- REST OF PAGE LAYOUT-->
</pageLayout>
...
関連項目
navigationBarについて
pageButtonBarについて
pageButtonBarの作成
レコードnavigationBarの作成
ナビゲーション・コンポーネントの使用
レイアウト・コンポーネントの使用
Copyright © 1997, 2004, Oracle. All rights reserved.