メニュー、ツールバーおよびツールボックスの使用方法

15 メニュー、ツールバーおよびツールボックスの使用方法

この章では、メニューとツールバーをADF Facesのmenu、menuBar、commandMenuItem、goMenuItem、toolbarおよびtoolboxの各コンポーネントを使用して作成する方法を説明します。

ページの階層をナビゲートできるナビゲーション・メニューの作成の詳細は、「ページ階層用のナビゲーション・アイテムの使用」を参照してください。

この章の内容は次のとおりです。

メニュー、ツールバーおよびツールボックスについて

ADF Facesでは、ユーザーが指定されたオプションのリスト(メニューの場合)から選択したり、ボタン(ツールバーの場合)をクリックしてアプリケーションの変更を実行したりできるメニューやツールバーがUI要素として用意されています。ツールバーで、アクションを起動する任意のメニュー・ドロップダウンまたはボタンを選択できます。

メニュー・バーとツールバーでは、メニュー、ボタンおよびその他の単純なコンポーネントを水平バーに編成できます。ユーザーがバーのメニューをクリックすると、メニューがドロップダウン表示され、ユーザーがメニュー項目を選択すると、アプリケーション内でなんらかのアクションが発生します。ツールバーのアイコンでも、アプリケーションでなんらかのアクションが発生します。図15-1に、メニューとツールバーの作成に使用される様々なコンポーネントを示します。

図15-1 メニューおよびツールバー・コンポーネント

「図15-1 メニューおよびツールバー・コンポーネント」の説明

メニュー・コンポーネントのユースケースと例

メニュー・コンポーネントを使用して、ユーザーが項目の追加または編集、データの検索、ビューの変更またはヘルプの起動を行えるメニューを作成します。たとえば、図15-2に示すように、ADF Facesコンポーネント・デモ・アプリケーションには、メニュー・バーとツールバーの両方があります。

図15-2 File Explorerアプリケーションのメニュー・バーおよびツールバー

図15-3に示すように、ユーザーがメニュー・バーのメニュー項目を選択すると、menuコンポーネントにより、メニュー項目のリストが表示されます。

図15-3 File Explorerアプリケーションのメニュー

「図15-3 File Explorerアプリケーションのメニュー」の説明

図15-4に示されているように、メニューはネスト可能です。

図15-4 ネストしたメニュー項目

「図15-4 ネストしたメニュー項目」の説明

ツールバーのボタンでも、ユーザーはアプリケーションに対してなんらかのアクションを呼び出したり、標準メニューと同じ動作をするポップアップ・メニューを開いたりできます。

ツールバーおよびメニュー・バーは、ツールボックスを使用して編成できます。ツールボックスを使用すると、同じ行にあるツールバーの相対的なサイズや、複数レイヤーのツールバーおよびメニュー・バーを垂直方向に定義できます。

注意:

表にメニューおよびツールバーを作成する場合は、「表メニュー、ツールバーおよびステータス・バーの表示」の手順に従ってください。

コンポーネントのポップアップ・メニュー(ユーザーがコンポーネントを右クリックすると起動されるメニュー)を作成する場合は、「ポップアップ・メニューの作成方法」の手順に従います。

メニューおよびツールバー・コンポーネントの追加機能

メニューおよびツールバー・コンポーネントを実装する前に、他のADF Faces機能を理解することが役立つ場合があります。また、ページにこれらのコンポーネントを追加した後で、検証やアクセシビリティなどの機能を追加することが必要になる場合があります。メニューおよびツールバー・コンポーネントで使用できる他の機能へのリンクを次に示します。

機能の呼出し: ADF Facesには、ファイルのダウンロードや送信した値のリセットなどの機能を呼び出すためにメニュー・コマンド・コンポーネントとともに使用できるタグが用意されています。「ボタンまたはリンクの機能の呼出し目的での使用」を参照してください。
表メニュー: 表の上に表示され、(アプリケーション全体ではなく)その表でのみ動作するメニューおよびツールバーを作成できます。「表メニュー、ツールバーおよびステータス・バーの表示」を参照してください。
ポップアップ・メニュー: ユーザーがUIの項目を右クリックしたときにポップアップで起動するメニューを作成できます。「ポップアップ・メニューの作成方法」を参照してください。
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。「EL書式タグの使用方法」を参照してください。
イベント: コマンド・メニュー・コンポーネントを使用してアクション・イベントを起動できます。イベントの詳細は、「イベントの処理」を参照してください。具体的なアクション・イベントの詳細は、「ボタンおよびリンクのナビゲーション目的での使用」を参照してください。
アクセシビリティ: メニュー・コンポーネントの特定の属性を使用すると、キーボードを使用してメニューを開くためのショートカットを作成できます。アクセス・キーの定義方法の詳細は、「ADF Facesコンポーネントのアクセス・キーの定義方法」を参照してください。アクセシビリティの詳細は、「コンポーネント・レベルのアクセシビリティ・プロパティの指定」を参照してください。
ローカライゼーション: 文字列を値として受け取る属性に値を入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、これらの文字列の翻訳を管理できます。「ページの国際化およびローカライズ」を参照してください。
スキン: スキンを変更することで、メニューのルック・アンド・フィール(選択したメニュー項目の表示に使用されるアイコンなど)をいくつかの基本機能(表示されるメニュー項目の最大数など)とともに変更できます。「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

メニュー・バーでのメニューの使用方法

ADF Facesには、様々なメニュー項目を表示してユーザーがコマンドを選択できるmenuBarコンポーネントが用意されています。複数のメニュー・バーをtoolboxにグループ化することも、メニュー・コンポーネントをネストさせてサブメニューを作成することもできます。

メニュー・バー項目(File Explorerアプリケーションの「ファイル」など)を含むバーのレンダリングには、menuBarコンポーネントを使用します。この項目に該当するものには、menuコンポーネント(垂直メニューを保持する)の他に、commandMenuItemコンポーネント(アプリケーションに対する操作を呼び出す)やgoMenuItemコンポーネント(URLを呼び出す)があります(図15-5を参照)。

図15-5 menuBarおよび子コンポーネント

「図15-5 menuBarおよび子コンポーネント」の説明

メニュー・コンポーネントにcommandMenuItemコンポーネントまたはgoMenuItemコンポーネントを入れることや、menuコンポーネントをmenuコンポーネントの内側にネストしてサブメニューを作成することもできます。図15-6に、メニューの作成に使用されている様々なコンポーネントを示します。

図15-6 メニューの作成に使用されているコンポーネント

「図15-6 メニューの作成に使用されているコンポーネント」の説明

ツールボックス内に配置することにより、複数のメニュー・バーを使用できます。ツールボックス内に配置すると、メニュー・バーが縦に並べて表示され、ツールボックスの最初のメニュー・バーが一番上に、最後のメニュー・バーが一番下に表示されます。(ツールボックス内にグループ化することで)1つのツールボックス行で複数のメニュー・バーを使用すると、flex属性によって、どのメニュー・バーが最も多くの領域を占めるかが決定されます。

メニュー・バーを縦ではなく横に並べて表示する場合は、メニュー・バーをgroupコンポーネント内に配置します。

ヒント

toolboxコンポーネントを使用して、メニュー・バーとツールバーをグループ化することや、複数のメニュー・バーをグループ化することが可能です。groupコンポーネントを使用して、同じ行のメニュー・バーとツールバーをグループ化できます。

メニュー・バー内で、1つのコンポーネントを拡大するように設定して、メニュー・バーが常にその親コンテナと同じサイズになるようにすることができます。たとえば、図15-7では、メニュー・バーは、「無効なGMI」メニューとコンポーネント・ガイド・ボタンの間に配置されるスペーサ・コンポーネントを拡大するように設定されています。ウィンドウがサイズ変更されると、スペーサ・コンポーネントが拡大または縮小されて、メニュー・バーは常に親と同じ幅で表示されます。このようなスペーサ・コンポーネントを使用すると、スペーサの右側にあるコンポーネントがメニュー・バーに右揃えされたままになります。

図15-7 スペーサ・コンポーネントの拡大と縮小

メニュー・バー内のすべてのコンポーネントが表示されなくなるようにウィンドウがサイズ変更されると、メニュー・バーに、図15-8に示すように矢印カーソルで識別されるオーバーフロー・アイコンが表示されます。

図15-8 メニュー・バーのオーバーフロー・アイコン

注意:

オーバーフロー・アイコンはInternet Explorerブラウザに表示されません。FirefoxおよびChromeでは、オーバーフロー・アイコンはユーザーがブラウザ・ウィンドウのサイズを変更した後でのみ表示されます。

オーバーフロー・アイコンをクリックすると、図15-9に示すように、残りのコンポーネントがポップアップ・ウィンドウに表示されます。

図15-9 オーバーフロー・ポップアップ・ウィンドウ内のmenuコンポーネント

メニューおよびサブメニューは、ブラウザ・ウィンドウ上で連結解除して移動できるように設定できます。図15-10に、連結解除可能に構成された連結解除可能メニューの「メニュー1」サブメニューを示します。メニューの先頭には、連結解除が可能であることを示すバーがレンダリングされています。

図15-10 連結解除可能メニュー

ユーザーは、連結解除可能メニューをブラウザ内の任意の場所にドラッグできます。図15-11に示すように、マウス・ボタンを離すと、そのメニューはユーザーが閉じるまでアプリケーション上に残ります。

図15-11 移動している連結解除可能メニュー

「図15-11 移動している連結解除可能メニュー」の説明

ヒント

ユーザーが次の操作をする可能性がある場合は、連結解除可能メニューの使用を検討してください。

ページで類似のコマンドを繰り返し実行する場合。
大規模な表、ツリー表またはツリーにおいて、異なる行のデータで類似のコマンドを実行する場合。
長くて幅の広い表、ツリー表またはツリーでデータを表示する場合。ユーザーは一度クリックすることで、表示または非表示にする列やブランチを選択できます。
長くて幅の広い表、ツリー表またはツリーでデータを書式設定する場合。

menuおよびcommandMenuItemコンポーネントのそれぞれに、アイコン・イメージを含めることができます。図15-12に示す「削除」メニュー項目は、削除アイコン(赤色のX)を表示するように構成されています。

図15-12 メニューで使用されているアイコン

グラフィックを常に表示するだけでなく、メニュー項目が選択されたときにグラフィックを表示するようにcommandMenuItemコンポーネントを構成できます。たとえば、選択されたときにチェックマークを表示するようにcommandMenuItemコンポーネントを構成したり、グループ内の項目の1つが選択されたときにラベルの横にアイコンが表示されるようにメニュー項目をグループ化してラジオ・ボタンのグループのような動作をするように構成したりできます。図15-13に、選択時にチェックマークを使用するよう構成された「フォルダ」メニュー項目を含む「表示」メニューを示します。「表」、「ツリー表」および「リスト」メニュー項目はラジオ・ボタンとして構成されており、ユーザーは1つのグループのみ選択できます。

図15-13 選択されたメニュー項目を示すアイコンとラジオ・ボタン

EL式を使用して、commandMenuItemコンポーネントの最初に選択された状態を設定できます。ただし、それ以降、選択された状態の値は、アクション・リスナーを使用してcommandMenuItemコンポーネントを通じて管理する必要があります。したがって、実行時のメニュー・アイテムの選択は、最初の状態を設定する際に使用したELで指定されたプロパティには影響がありません。

commandMenuItemコンポーネントは、反意語を含むように構成することもできます。反意語は、ユーザーがメニュー項目を選択すると別のテキストを表示します。

図15-14 File Explorerアプリケーションの「編集」メニュー

図15-14に示すcommandMenuItemコンポーネントは「元に戻す」というメニュー項目のためのものであり、この項目は反意語として構成されています。ユーザーが「元に戻す」を選択すると、次回このメニューをユーザーが表示したときに、このメニュー項目には反意語である「リストア」が表示されます(図15-15を参照)。

図15-15 反意語のメニュー項目

ユーザーがメニュー項目を選択するとアクションが発生するため、commandMenuItemコンポーネントのactionまたはactionListener属性を、必要な機能を実行するメソッドにバインドする必要があります。

メニューには、commandMenuItemコンポーネントの他、1つ以上のgoMenuItemコンポーネントを含めることもできます。これらはナビゲーション・コンポーネントであり、直接ページ・ナビゲーションを実行するという点でlinkコンポーネントに似ていますが、ActionEventイベントは配信しません。図15-16に、外部のwebサイトにナビゲートするために使用される3つのgoMenuItemコンポーネントを示します。

図15-16 goMenuItemコンポーネントを使用できるメニュー

「図15-16 goMenuItemコンポーネントを使用できるメニュー」の説明

メニュー・バーから起動されるメニューのみでなく、ユーザーがUIコンポーネントを右クリックした場合や、ユーザーがコマンド・コンポーネントをクリックした場合に起動されるポップアップ・メニューも作成できます。「ポップアップ・メニューの作成方法」を参照してください。

注意:

ADF Facesには、ユーザーが現行ページの印刷可能バージョンを表示できる埋込み機能を持つボタンが用意されています。メニューおよびメニュー・バーは、これらのページにはレンダリングされません。「ADF Facesのクライアント動作タグの使用」を参照してください。

デフォルトで、メニューのコンテンツは、ページがレンダリングされるとすぐに送信されます。メニューで大量の子(複数のmenuおよびcommandMenuItemコンポーネント)を使用することを計画している場合は、遅延コンテンツ配信を使用するようにメニューを構成することを選択できます。これは、メニューがアクセスされるまで、子コンポーネントがサーバーから取得されないことを意味します。

注意:

ポップアップ・メニューとして使用されるメニューのコンテンツ配信は、メニュー自体ではなく、親のポップアップ・ダイアログにより決定されます。

主にアプリケーション全体におけるナビゲーションを可能にするメニューで、アプリケーションの選択項目に対する変更には使用されないメニューも作成できます。このタイプのメニューを作成するには、「メニュー・モデルを使用したページ階層の作成」を参照してください。

メニュー・バーのメニューの作成および使用方法

メニューを作成するには、まず、メニューが表示されるメニュー・バーを作成する必要があります。その後、必要に応じてmenuおよびcommandMenuItemコンポーネントを追加および構成します。

注意:

表にメニューを作成する場合は、「表メニュー、ツールバーおよびステータス・バーの表示」に説明されている手順に従ってください。

始める前に:

属性が機能に与える影響に関する知識が役立つ場合があります。「メニュー・バーでのメニューの使用方法」を参照してください。

他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「メニューおよびツールバー・コンポーネントの追加機能」を参照してください。

メニュー・バーのメニューを作成および使用する手順:

複数のメニュー・バー、またはツールバーとメニュー・バーの組合せを使用する予定の場合は、toolboxコンポーネントを作成します。作成するには、「ツールボックス」コンポーネントを「コンポーネント」ウィンドウの「メニューおよびツールバー」パネルからドラッグ・アンド・ドロップします。

ヒント

panelHeader、showDetailHeaderおよびshowDetailItemコンポーネントでは、セクション・ヘッダーおよびアコーディオン・パネル・ヘッダーにtoolboxやtoolbarを追加するためのtoolbarファセットがサポートされています。
「コンポーネント」ウィンドウから「メニュー・バー」をドラッグ・アンド・ドロップしてメニュー・バーを作成します。toolboxコンポーネントを使用している場合は、「メニュー・バー」をtoolboxコンポーネントの直接の子としてドロップする必要があります。

ヒント

ツールボックスでは、iterator、switcherおよびgroupの各コンポーネントを直接の子として使用することもできます。ただし、これらのコンポーネントが、ツールボックスの本来の直接の子である子コンポーネントをラップしていることが条件です。ツールボックスの詳細は、「ツールバーの使用方法」を参照してください。
ツールボックスに複数のメニュー・バーをグループ化する場合は、各メニュー・バーについて、「外観」セクションを開き、flex属性を設定して、各メニュー・バーの相対サイズを決定します。flex属性の数値が大きいほど、ツールボックスが長くなります。次の例に示すメニュー・バーのセットでは、menuBar2が最も長く、次に長いのはmenuBar4です。flex属性が設定されていないことが理由で残りのメニュー・バーはサイズが同一になり、menuBar4よりも短くなります。
```
<af:toolbox>
  <af:menuBar id="menuBar1" flex="0">
    <af:menu text="MenuA"/>
  </af:menBar>
  <af:menuBar id="menuBar2" flex="2">
    <af:menu text="MenuB"/>
  </af:menuBar>
  <af:menuBar id="menuBar3" flex="0">
    <af:menu text="MenuC"/>
  </af:menuBar>
  <af:menuBar id="menuBar4" flex="1">
    <af:menu text="MenuD"/>
  </af:toolbar>
</af:toolbox>
```
パフォーマンスのヒント:

実行時、使用可能なブラウザの領域が、toolboxのコンテンツの表示に必要な領域より少ない場合、表示されていない項目をユーザーが選択して表示できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。toolboxコンポーネント内の子コンポーネントの数、および子の複雑さが、オーバーフローのパフォーマンスに影響します。可能な場合は、オーバーフローしないように、toolboxコンポーネントのサイズを設定する必要があります。「実行時に行われる処理: メニュー・バーとツールバーのサイズの決定方法」を参照してください。

ヒント

groupコンポーネントを使用して、同じ行に表示するメニュー・バー(またはメニュー・バーとツールバー)をグループ化できます。groupコンポーネントを使用しない場合、メニュー・バーは次の行に表示されます。

flex属性がどのように機能するかの詳細は、「実行時に行われる処理: メニュー・バーとツールバーのサイズの決定方法」を参照してください。
必要な数のmenuコンポーネントをメニュー・バーに挿入します。挿入するには、「コンポーネント」ウィンドウから「メニュー」をドラッグし、menuBarコンポーネントに子としてドロップします。

commandMenuItemコンポーネントを直接メニュー・バーに挿入することもできます。このようにするには、「コンポーネント」ウィンドウの「メニューおよびツールバー」パネルから「メニュー・アイテム」をドラッグ・アンド・ドロップします。これにより、ツールバー・ボタンと同じようにレンダリングされるcommandMenuItemコンポーネントが作成されます。

ヒント

通常はメニュー・バーの直接の子である子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、メニュー・バーにもこららのコンポーネントを直接の子として使用できます。
各menuコンポーネントに対し、「プロパティ」ウィンドウの「外観」セクションを開いて次の属性を設定します。
- Text: メニューのラベル・テキストを入力します。アクセス・キー(キーボードを使用してメニューにアクセスする際に使用する文字)も設定する場合は、この属性は空白のままにしておき、かわりにtextAndAccessKeyの値を入力します。
- TextAndAccessKey: 従来のアンパサンド表記を使用して、メニュー・ラベルとアクセス・キーを入力します。たとえば、&Fileではメニュー・ラベルが「File」に設定され、同時に、メニュー・アクセス・キーが文字Fに設定されます。アクセス・キーとアンパサンド表記の詳細は、「コンポーネント・レベルのアクセシビリティ・プロパティの指定」を参照してください。
- Icon: ドロップダウン・リストを使用してアイコンを選択します。アイコンがこのメニューに表示されない場合は、リストの右側にあるドロップダウン・メニューを使用して「編集」を選択し、アイコンを参照して選択します。
メニューを連結解除可能にする場合は(図15-10を参照)、「プロパティ」ウィンドウの「動作」セクションを開き、Detachable属性をtrueに設定します。実行時、ユーザーはメニューをドラッグして連結を解除し、画面の任意の場所にドロップできます(図15-11を参照)。
メニューで遅延コンテンツ配信を使用する場合は、ContentDelivery属性をlazyに設定します。

注意:

コンテンツの遅延配信を使用する場合、メニューのコンテンツはメニューがアクセスされるまで把握されないため、子のcommandMenuItemコンポーネントに設定されているアクセラレータが機能しなくなります。メニューでアクセラレータをサポートする必要がある場合は、ContentDeliveryをimmediateに設定する必要があります。

注意:

メニューがポップアップ・ダイアログまたはウィンドウ内で使用される場合、ポップアップ・ダイアログまたはウィンドウによりメニューのコンテンツ配信が決定されるため、ContentDeliveryはimmediateに設定されたままにします。
ナビゲーションとともになんらかのアクションを呼び出すメニュー項目を作成するには、「コンポーネント」ウィンドウから「メニュー・アイテム」をドラッグし、menuコンポーネントに子としてドロップしてcommandMenuItemコンポーネントを作成します。垂直方向のメニューの項目を定義するいくつかのcommandMenuItemコンポーネントを作成します。必要な場合には、commandMenuItemコンポーネントをgroupコンポーネントでラップし、項目をグループとして表示できます。
次の例に、「フォルダ」および「検索」メニュー項目を1つのグループに、「表」、「ツリー表」および「リスト」メニュー項目を2番目のグループに、最後に「リフレッシュ」メニュー項目を単独でグループ化するための簡略化されたコードを示します。
```
<af:menu id="viewMenu"
  <af:group>
    <af:commandMenuItem type="check" text="Folders"/>
    <af:commandMenuItem type="check" text="Search"/>
  </af:group>
  <af:group>
    <af:commandMenuItem type="radio" text="Table"/>
    <af:commandMenuItem type="radio" text="Tree Table"/>
    <af:commandMenuItem type="radio" text="List"/>
  </af:group>
  <af:commandMenuItem text="Refresh"/>
</menu>
```
図15-17に、最初にアクセスされた際にメニューがどのように表示されるかを示します。

注意:

ADF Facesコンポーネントが使用するスキンを変更できます。「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

図15-17 type属性を使用してグループ化したメニュー項目

「図15-17 type属性を使用してグループ化したメニュー項目」の説明

ヒント

デフォルトでは、メニューに表示できるのは14項目のみです。メニューに15項目以上追加すると、残りの項目へのアクセスに使用するスクロールバーとともに、最初の14項目が表示されます。表示される項目の数を変更する場合は、af|menu {-tr-visible-items}スキニング・キーを編集します。「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

既存のmenuコンポーネントに別のmenuコンポーネントを挿入して、サブメニューを作成できます(図15-4を参照)。

ヒント

通常はメニューの直接の子である子コンポーネントをiteratorおよびswitcherコンポーネントにラップすれば、メニューにもこれらのコンポーネントを直接の子として使用できます。
各commandMenuItemコンポーネントに対し、「プロパティ」ウィンドウの「共通」セクションを開いて次の属性を設定します。
- Type: このメニュー項目のタイプを指定します。メニュー項目のタイプが指定されると、ADF Facesにより、ビジュアルなインジケータ(ラジオ・ボタンなど)および動作の切替えがメニュー項目に追加されます。実行時に、ユーザーがタイプ(default以外)の指定されたメニュー項目を選択すると、ADF Facesにより、ビジュアルなインジケータまたはメニュー項目ラベルが表示されます。次に示す使用可能なtype値のいずれかを使用します。
  - default: メニュー項目にはタイプが割り当てられません。選択されているかどうかに関係なく、メニュー項目は同じ方法で表示されます。
  - antonym: メニュー項目ラベルが表示されます。メニュー項目が選択されると、(メニュー項目が選択されない場合に表示される)textまたはtextAndAccessKey属性の値で定義されたメニュー項目ではなく、SelectedText属性に設定された値が表示されます。このタイプを選択する場合には、SelectedTextに値を設定する必要があります。
  - check: スキンに応じて、メニュー項目ラベルの横の正方形またはチェック・マークを切り替えます。正方形は、メニュー項目が選択されている場合に青で表示され、選択されていない場合はグレー表示されます。
  - radio: メニュー項目ラベルの隣のラジオ・ボタンを切り替えます。ラジオ・ボタンは、メニュー項目が選択されている場合に青い円で表示され、選択されていない場合はグレー表示されます。
- Text: メニュー項目のラベル・テキストを入力します。アクセス・キー(キーボードを使用して項目にアクセスする際に使用する文字)も表示する場合は、この属性は空にして、かわりにTextAndAccessKeyに値を入力します。または、accessKey属性を使用して、アクセス・キーを別に設定することもできます。
- Selected: このメニュー項目を選択された状態で表示する場合にtrueに設定します。selected属性がサポートされているのはcheck、radioおよびantonymタイプのメニュー項目のみです。
  注意:
  管理対象bean内のアクションメソッドを評価するEL式を使用して、commandMenuItemの最初に選択された状態を決定することができます。ただし、実行時に、メニュー・アイテムの選択された状態はコンポーネントを通じて管理されるため、アクション・リスナーを使用して管理対象beanの選択された状態のプロパティを更新する必要があります。たとえば、管理対象beanは、アクション・リスナーを次のように定義します。
  public void actLsn(ActionEvent ae) { RichCommandMenuItem menuItem = (RichCommandMenuItem) ae.getComponent(); val1 = menuItem.isSelected(); }
- SelectedText: このメニュー項目が選択された場合に、メニュー項目に表示する代替のラベルを設定します。この値は、antonymを除くすべてのタイプで無視されます。
「外観」セクションを開き、次の属性を設定します。
- Icon: ドロップダウン・リストを使用してアイコンを選択します。アイコンがこのメニューに表示されない場合は、リストの右側にあるドロップダウン・メニューを使用して「編集」を選択し、アイコンを参照して選択します。
- Accelerator: このメニュー項目を選択してそのコマンドをアクティブ化するためのキーストロークを入力します(たとえばControl N)。ADF Facesによってキーストロークが変換され、キーストロークのテキスト・バージョン(たとえば「Ctrl+N」)がメニュー項目ラベルの隣に表示されます(図15-4を参照)。
  
  注意:
  
  コンテンツの遅延配信を使用する場合、メニューのコンテンツはアクセスされるまで把握されないため、子のcommandMenuItemコンポーネントに設定されているアクセラレータが機能しなくなります。メニューでアクセラレータ・キーをサポートする必要がある場合は、contentDelivery属性をimmediateに設定しておく必要があります。
- TextAndAccessKey: 従来のアンパサンド表記を使用して、メニュー項目ラベルとアクセス・キーを入力します。たとえば、&Saveではメニュー項目ラベルがSaveに設定され、同時に、メニュー項目アクセス・キーが文字Sに設定されます。アクセス・キーとアンパサンド表記の詳細は、「コンポーネント・レベルのアクセシビリティ・プロパティの指定」を参照してください。
「動作」セクションを開き、次の属性を設定します。
- Action: メニュー項目が選択された場合に起動される、オブジェクト(マネージドBeanなど)のアクション・メソッドに対して評価されるEL式を使用します。式は、パラメータが指定されず、java.lang.Objectオブジェクトを返すpublicメソッドに対して評価される必要があります。
  
  commandMenuItemコンポーネントによって生成されたアクションのレスポンスとしてナビゲートさせる場合は、EL式を入力するかわりに、静的アクションの結果値をaction属性の値として入力します。partialSubmit属性をfalseに設定するか、リダイレクトを使用する必要があります。アプリケーションにおけるナビゲーションの構成方法の詳細は、「ページ・フローの定義」を参照してください。
- ActionListener: このメニュー項目が選択されたときに通知されるアクション・リスナー・メソッドを表す式を指定します。このメソッドをaction属性にバインドされたメソッドのかわりに使用して、action属性でナビゲーションのみ処理できます。式では、ActionEventパラメータを受け取るpublicメソッドを評価し、戻り型がvoidである必要があります。
ナビゲートのみを行うメニュー項目(通常は外部サイトへのナビゲート)を作成するには、「コンポーネント」ウィンドウから「メニュー・アイテム(実行)」をメニューに子としてドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウの「共通」セクションを開いて、次の属性を設定します。
- Text: リンクのテキストを入力します。
  
  ヒント
  
  かわりに、textAndAccessKey属性を使用して、リンクに使用するラベルおよびアクセス・キーを定義する単一の値を指定できます。アクセス・キーの定義方法の詳細は、「ADF Facesコンポーネントのアクセス・キーの定義方法」を参照してください。
- Destination: リンクのナビゲート先のページのURIを入力します。たとえば、オラクル社のホームページにナビゲートするには、http://www.oracle.comと入力します。
- TargetFrame: ドロップダウン・リストを使用して、新しいページを表示する必要がある場所を指定します。次の値の1つを選択します。
  - _blank: リンクにより、ドキュメントは新しいウィンドウに開かれます。
  - _parent: リンクにより、ドキュメントは親ウィンドウに開かれます。たとえば、リンクがダイアログに表示された場合、結果のページは親ウィンドウにレンダリングされます。
  - _self: リンクにより、ドキュメントは同じページまたはリージョンに開かれます。
  - _top: リンクにより、ページ全体が置き換えられて、ドキュメントはウィンドウ全体に開かれます。
親コンポーネントの幅と等しくなるようにメニュー・バーを拡大させるには、「構造」ウィンドウでmenuBarコンポーネントを選択してから「プロパティ」ウィンドウの「外観」セクションを開き、StretchIdをメニュー・バーの中のコンポーネントのIDに設定します。このコンポーネントが拡大されて、メニュー・バーのサイズが親と同一になります。メニュー・バーのその他のコンポーネントは静的サイズのままですが、その1つのコンポーネントは拡大されます。
また次の例に示すように、spacerコンポーネントを挿入し、そのコンポーネントIDをメニュー・バーのstretchIdとして設定することでコンポーネントの位置を左右に調整する場合にも、stretchId属性を使用できます。
```
<af:menuBar binding="#{editor.component}" id="menuBar1" stretchId="stretch1">
  <af:menu text="File" id="m1">
. . .
  </af:menu>
. . . 
  <af:commandMenuItem text="Disabled CMI"/>
  <af:goMenuItem textAndAccessKey="O&amp;racle destination="http://www.oracle.com"
                 id="gmi1"/>
  <af:goMenuItem text="Disabled GMI" destination="http://www.gizmo.com" 
                 shortDesc="disabled goMenuItem" id="gmi2"/>
  <af:spacer id="stretch1" clientComponent="true"/>
  <af:commandMenuItem textAndAccessKey="Component G&amp;uide" 
                      action="guide" id="cmi9"/>
</af:menuBar>
```

ツールバーの使用方法

ADF Facesには、アイコン、ボタン、inputTextなどのコンポーネントを配置できるツールバー・コンポーネントも用意されています。アプリケーションでユーザーに実行させたい操作の種類に基づいて、ツールバーにコンポーネントを追加できます。

アプリケーションには、メニューのみでなく、アプリケーションの操作の開始に使用するツールバー・ボタンを含むツールバーも作成できます。ボタンには、テキスト、アイコンまたは両方を組み合せて表示できます。ツールバー・ボタンでは、メニューをポップアップ・ウィンドウに開くこともできます。ツールバー・ボタンのみでなく、ドロップダウン・リストなどのその他のUIコンポーネントをツールバーに表示できます。図15-18に、File Explorerアプリケーションのツールバーを示します。

ヒント

ツールバーには、ツールバー・ボタンのかわりにボタンやリンクを入れることができます。ただし、ツールバー・ボタンには、ポップアップ・メニューの表示など、追加の機能もあります。ツールバー・ボタンは、toolbarコンポーネントの外でも使用できます。

図15-18 File Explorerアプリケーションのツールバー

「図15-18 File Explorerアプリケーションのツールバー」の説明

toolbarコンポーネントには、inputTextコンポーネント、LOVコンポーネント、選択リスト・コンポーネント、コマンド・コンポーネントなど、様々なタイプのコンポーネントを含めることができます。ADF Facesのbuttonコンポーネントにはpopupファセットがあり、これを利用するとツールバー・ボタンからポップアップ・メニューを表示できます。ポップアップ・ダイアログのみが表示され、アクション・イベントが起動されないようにツールバー・ボタンを構成できます。メニュー同様、groupコンポーネントを使用して、ツールバー上の関連するツールバー・ボタンをグループ化できます。

toolboxで囲むことにより、複数のtoolbarを使用できます。toolbarをtoolboxで囲むことによりtoolbarが積み重なり、ページの最初のtoolbarが上に表示され、最後のtoolbarが下に表示されます。たとえば、図15-18に示すように、File Explorerアプリケーションでは、現在選択されているフォルダ名が「現在場所」ツールバーに表示されています。toolbarを複数使用する際は、toolbarにflex属性を設定し、どのツールバーに最も領域を使用するかを決定できます。この場合は、「現在場所」ツールバーが最も長くなるよう設定されています。

ツールバーを(縦ではなく)横に並べて表示する場合は、groupコンポーネント内に配置します。

ヒント

toolboxコンポーネントを使用して、メニュー・バーとツールバーをグループ化することや、複数のメニュー・バーをグループ化することが可能です。ツールバーのグループ化同様、groupコンポーネントを使用して、同じ行のメニュー・バーとツールバーをグループ化できます。

toolbar内では、ツールバーがその親コンテナと常に同じ大きさになるように、1つのコンポーネントを拡大するよう設定できます。たとえば、File Explorerアプリケーションでは、現在の場所を表示する下側のツールバーには、選択されたフォルダを表示するコンポーネントが含まれています。このコンポーネントは、ウィンドウのサイズが変更されると拡大するように設定されており、コンポーネントとツールバーは常に親と同じ幅になります。一方、上側のツールバーのコンポーネントは拡大するように設定されていないため、ウィンドウがサイズ変更されてもサイズは変わりません。ウィンドウが、ツールバー内のすべてのコンポーネントを表示できないようなサイズに変更された場合、図15-19の右上端にある矢印カーソルで示すように、ツールバーにはオーバーフロー・アイコンが表示されます。

図15-19 ツールバーのオーバーフロー・アイコン

オーバーフロー・アイコンをクリックすると、図15-20に示すように、残りのコンポーネントがポップアップ・ウィンドウに表示されます。

図15-20 オーバーフロー・ポップアップ・ウィンドウ内のtoolbarコンポーネント

ツールバーでオーバーフローが発生することが予測される場合、オーバーフローで役に立つ特別なレイアウト・ロジックのあるtoolboxにラップすることをお薦めします。

ツールバーの作成および使用方法

ページで複数のtoolbarコンポーネントを使用する場合、またはメニュー・バーとツールバーを一緒に使用することを計画している場合は、まず、それらを表示するtoolboxコンポーネントを作成します。その後、ツールバーを作成し、最後にツールバー・ボタンを作成します。

ヒント

単一のツールバーまたはメニュー・バーでレイアウト上の問題が発生した場合は、toolboxコンポーネントでラップすることを検討してください。これは、このコンポーネントで、オーバーフローやレイアウトの問題を処理できるためです。

始める前に:

属性が機能に与える影響に関する知識が役立つ場合があります。「ツールバーの使用方法」を参照してください。

ツールバーを作成および使用する手順:

複数のツールバー、またはツールバーとメニュー・バーの組合せを使用する予定の場合は、toolboxコンポーネントを作成します。作成するには、「ツールボックス」コンポーネントを「コンポーネント」ウィンドウの「メニューおよびツールバー」パネルからドラッグ・アンド・ドロップします。

ヒント

panelHeader、showDetailHeaderおよびshowDetailItemコンポーネントでは、セクション・ヘッダーおよびアコーディオン・パネル・ヘッダーにtoolboxやtoolbarを追加するためのtoolbarファセットがサポートされています。
「ツールバー」をJSFページにドラッグ・アンド・ドロップします。toolboxコンポーネントを使用している場合は、「ツールバー」をtoolboxコンポーネントに直接の子としてドロップする必要があります。

ヒント

ツールボックスでは、iterator、switcherおよびgroupの各コンポーネントを直接の子として使用することもできます。ただし、これらのコンポーネントが、ツールボックスの本来の直接の子である子コンポーネントをラップしていることが条件です。
複数のツールバーを1つのツールボックスの中でグループ化する場合は、各ツールバーについて、「外観」セクションを開き、Flex属性を設定します。この属性によって、各ツールバーの相対サイズが決定します。flex属性の数値が大きいほど、ツールボックスが長くなります。次の例に示すツールバーのセットでは、toolbar2が最も長く、toolbar4が次に長くなり、flex属性が設定されていないため、残りのツールバーは同じサイズになり、toolbar4よりも短くなります。
```
<af:toolbox>
  <af:toolbar id="toolbar1" flex="0">
    <af:button text="ButtonA"/>
  </af:toolbar>
  <af:toolbar id="toolbar2" flex="2">
    <af:button text="ButtonB"/>
  </af:toolbar>
  <af:toolbar id="toolbar3" flex="0">
    <af:button text="ButtonC"/>
  </af:toolbar>
  <af:toolbar id="toolbar4" flex="1">
    <af:button text="ButtonD"/>
  </af:toolbar>
</af:toolbox>
```
パフォーマンスのヒント:

実行時、使用可能なブラウザの領域が、toolboxのコンテンツの表示に必要な領域より少ない場合、表示されていない項目をユーザーが選択して表示できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。toolboxコンポーネント内の子コンポーネントの数、および子の複雑さが、オーバーフローのパフォーマンスに影響します。可能な場合は、オーバーフローしないように、toolboxコンポーネントのサイズを設定する必要があります。「実行時に行われる処理: メニュー・バーとツールバーのサイズの決定方法」を参照してください。

ヒント

groupコンポーネントを使用して、同じ行に表示するツールバー(またはメニュー・バーとツールバー)をグループ化できます。groupコンポーネントを使用しない場合、ツールバーは次の行に表示されます。

flex属性がどのように機能するかの詳細は、「実行時に行われる処理: メニュー・バーとツールバーのサイズの決定方法」を参照してください。
必要に応じてtoolbarにコンポーネントを挿入します。ツールバー上にbuttonを作成するには、「コンポーネント」ウィンドウの「一般コントロール」セクションから「ボタン」をドラッグし、toolbarコンポーネントに直接の子としてドロップします。

ヒント

groupコンポーネントを使用して、バーの関連するボタンをラップできます。このようにすると、グループ間に区切り線が挿入されます(図15-17を参照)。

ツールバーでは、iteratorコンポーネントやswitcherコンポーネントを直接の子として使用することもできます。ただし、これらのコンポーネントが、ツールバーの本来の直接の子である子コンポーネントをラップしていることが条件です。

ヒント

その他のコンポーネント、たとえばボタンやリンク、入力コンポーネント、選択コンポーネントなどをツールバーに配置できます。ただし、拡大することはできません。ツールバーの拡大の詳細は、ステップ9を参照してください。
各buttonコンポーネントに対し、「プロパティ」ウィンドウの「共通」セクションを開いて次の属性を設定します。
- Text: このツールバー・ボタンのラベルを入力します。
- Type: ツールバー・ボタンのタイプを指定します。ツールバー・ボタンのタイプを指定すると、ボタンがクリックされた際にアイコンが表示されます。次に示す使用可能なtype値のいずれかを使用します。
  - default: ツールバー・ボタンにはタイプは割り当てられません。
  - check: 選択されている場合はdepressedIcon値が表示され、選択されていない場合はデフォルトのicon値が表示されます。
  - radio: グループ内のその他のツールバー・ボタンとともに使用すると、現在クリックされているボタンが選択されている状態になり、前にクリックされたグループ内のボタンの選択が解除されます。
    
    注意:
    
    タイプをradioに設定する場合は、タイプがradioに設定されている別のツールバー・ボタンを含むgroupタグでツールバー・ボタンをラップする必要があります。
- Selected: このツールバー・ボタンが選択されているように表示する場合にtrueに設定します。selected属性がサポートされているのは、チェックマーク・タイプおよびラジオ・タイプのツールバー・ボタンのみです。
- Icon: イメージ・ファイルのURIに設定します(コンポーネントの内側にアイコンをレンダリングする場合)。アイコンをレンダリングする場合は、「外観」セクションのhoverIcon、disabledIcon、depressedIconおよびiconPositionの値も設定します。
  
  ヒント
  
  text属性(またはtextAndAccessKey属性)かicon属性、あるいはその両方を使用できます。
- IconPosition: アイコンを指定した場合は、テキストを基準としてアイコンの位置を指定できます。指定するには、ドロップダウン・リストから値を選択します。
  - <default> (leading): アイコンをテキストの前にレンダリングします。
  - trailing: アイコンをテキストの後にレンダリングします。
  - top: アイコンをテキストの上にレンダリングします。
  - bottom: アイコンをテキストの下にレンダリングします。
- Action: ユーザーがボタンを押した場合に起動される、オブジェクト(マネージドBeanなど)のアクション・メソッドに対して評価されるEL式を使用します。式は、パラメータが指定されず、java.lang.Objectオブジェクトを返すpublicメソッドに対して評価される必要があります。
  
  ボタンによって生成されたアクションのレスポンスとしてナビゲートさせる場合は、EL式を入力するかわりに、静的アクションの結果値をaction属性の値として入力します。partialSubmitをfalseに設定するか、リダイレクトを使用する必要があります。ナビゲーションの構成方法の詳細は、「ページ・フローの定義」を参照してください。
- ActionListener: ユーザーがこのボタンをクリックしたときに通知されるアクション・リスナー・メソッドを表す式を指定します。このメソッドをaction属性にバインドされたメソッドのかわりに使用して、action属性でナビゲーションのみ処理できます。式では、ActionEventパラメータを受け取るpublicメソッドを評価し、戻り型がvoidである必要があります。
「外観」セクションを開き、次のプロパティを設定します。
- HoverIcon: ドロップダウン・リストを使用して、マウス・カーソルがこのツールバー・ボタンの上にある場合に表示するアイコンを選択します。アイコンがこのメニューにない場合は、リストの右側にあるドロップダウン・メニューを使用して「編集」を選択し、参照してアイコンを選択します。
- DepressedIcon: ドロップダウン・リストを使用して、ツールバー・ボタンがアクティブになっている場合に表示するアイコンを選択します。アイコンがこのメニューにない場合は、リストの右側にあるドロップダウン・メニューを使用して「編集」を選択し、参照してアイコンを選択します。
ボタンがクリックされたときにアクション・イベントを起動しない場合は、「動作」セクションを開き、ActionDeliveryをnoneに設定します。これは、ボタンで単純にポップアップ・ウィンドウを開く場合に役立ちます。noneに設定されている場合は、ツールバー・ボタンのpopupファセットにpopupコンポーネントが必要で(ステップ8を参照)、actionまたはactionListener属性には値を設定できません。このボタンで標準コマンド・コンポーネントとしてアクション・イベントを起動する場合は、clientServer属性に設定します。
ツールバー・ボタンからポップアップ・メニューが起動されるようにするには、buttonコンポーネントのpopupファセットにmenuコンポーネントを挿入します。詳細は、「メニュー・バーのメニューの作成および使用方法」を参照してください。

ツールバーを含む親コンポーネントと同じ幅になるようにツールバーを拡大する場合は、stretchIdを、拡大する必要のあるツールバー内のコンポーネントのIDに設定します。ツールバーのその他のコンポーネントは静的サイズのままですが、その1つのコンポーネントは拡大されます。

たとえば、次の例に示すように、File Explorerアプリケーションで、選択されているフォルダ名を表示するinputTextコンポーネントは拡大し、現在のフォルダという語を表示するoutputTextコンポーネントは静的サイズのままになります。

<af:toolbar id="headerToolbar2" flex="2" stretchId="pathDisplay">
  <af:outputText id="currLocation" noWrap="true"
                 value="#{explorerBundle['menuitem.location']}"/>
  <af:inputText id="pathDisplay" simple="true" inlineStyle="width:100%"
                contentStyle="width:100%"
                binding="#{explorer.headerManager.pathDisplay}"
                value="#{explorer.headerManager.displayedDirectory}"
                ="true"
                validator="#{explorer.headerManager.validatePathDisplay}"/>
</af:toolbar>

また次の例に示すように、spacerコンポーネントを挿入し、そのコンポーネントIDをツールバーstretchIdとして設定することでコンポーネントの位置を左右に調整する場合にも、stretchId属性を使用できます。

<af:toolbar flex="1" stretchId="stretch1">
  <af:button text="Forward"
                           icon="/images/fwdarrow_gray.gif"
                           disabled="true"></af:button>
  <af:button icon="/images/uplevel.gif" />
  
<!-- Insert a stretched spacer to push subsequent buttons to the right -->

  <af:spacer id="stretch1" clientComponent="true"/>
  
  <af:button text="Reports" />
  <af:button id="toggleRefresh"
                           text="Refresh:OFF" />
</af:toolbar>

実行時に行われる処理: メニュー・バーとツールバーのサイズの決定方法

メニュー・バーまたはツールバーを含むページが最初に表示またはサイズ変更される場合、各バーに必要な領域は、バーのflex属性の値に基づいています。各バーに割り当てられるサイズの割合は、そのflex属性値をすべてのflex属性値の合計で割って決定されます。たとえば、ツールボックスに3つのツールバーがあり、同じ行に表示されるように、それらのツールバーがグループ化されているとします。最初のツールバーにはflex属性値1が、2番目のツールバーにもflex属性値1が指定されていて、3番目のツールバーにはflex属性値2が指定されており、すべてのflex属性値の合計が4であるとします。この例で、各ツールバーの割当ての割合は次のとおりです。

ツールバー1: 1/4 = 25%
ツールバー2: 1/4 = 25%
ツールバー3: 2/4 = 50%

バーの割当てが決まり、サイズがそれに応じて設定されると、ツールバー内の各要素は左から右に配置されます。収まりきらないコンポーネントは、表示される場合と同じ順序を維持したまま、左から右ではなく上から下の順序で、バーのオーバーフロー・リストに配置されます。

注意:

アプリケーションが右から左に読み取るように構成されている場合、ツールバーは右から左に配置されます。「言語読取り方向」を参照してください。

ツールバーに関する必知事項

ツールバーは、ツールバーやツールバー・ボタンをセクション・ヘッダーおよびアコーディオン・パネル・ヘッダーに追加するためのtoolbarファセットがあるpanelHeader、showDetailHeader、showDetailItemなどの親コンポーネントによってサポートおよびレンダリングされます。

実行時のツールバーについて、次の点に注意してください。

ヘッダーが閉じている場合、ツールバーおよびそのボタンはヘッダーに表示されません。ツールバーが表示されるのは、ヘッダーが開いている場合のみです。
ヘッダーの使用可能な領域がツールバーやそのすべてのボタンに必要な領域より少ない場合、ADF Facesにより、ユーザーがオーバーフロー・リストから非表示のボタンを選択できるオーバーフロー・アイコンが自動的にレンダリングされます。
ツールバーは、印刷可能ページにはレンダリングされません。

ツールバーでのキーボードへのアクセス

ツールバー項目間でフォーカスを移動するには、矢印キーを使用します。ツールバーで左右の矢印キーを使用してタブストップを1つずつ移動すると、ツールバー上の項目にアクセスできます。項目がオーバーフローしている場合は、上下の矢印キーでもフォーカスを移動できます。

ツールバーの最後(または最初)のコンポーネントに達したときも矢印キーを使用できます。矢印キーを使うと、フォーカスはツールバー外の次の(または前の)コンポーネントに移動し、コンポーネント間で循環はしません。