Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース2 (11.1.2.1.0) B66719-01 |
|
前 |
次 |
この章では、ツール・ボタンを含むメニュー・バーおよびツールバーの作成方法を説明します。
ページの階層をナビゲートできるナビゲーション・メニューの作成の詳細は、20.6項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。
この章では、次の項目について説明します。
メニュー・バーとツールバーでは、メニュー、ボタンおよびその他の単純なコンポーネントを水平バーに編成できます。ユーザーがバーのメニューをクリックすると、メニューがドロップダウン表示され、ユーザーはメニュー項目を選択でき、それによりアプリケーションでなんらかのアクションが発生します。ツールバーのアイコンでも、アプリケーションでなんらかのアクションが発生します。図16-1に、メニューとツールバーの作成に使用される様々なコンポーネントを示します。
メニュー・コンポーネントを使用して、ユーザーが項目の追加または編集、データの検索、ビューの変更またはヘルプの起動を行えるメニューを作成します。たとえば、図16-2に示すように、ADF Facesデモ・アプリケーションには、メニュー・バーとツールバーの両方があります。
図16-3に示すように、ユーザーがメニュー・バーのメニュー項目を選択すると、menu
コンポーネントにより、メニュー項目のリストが表示されます。
図16-4に示されているように、メニューはネスト可能です。
ツールバーのボタンでも、ユーザーはアプリケーションに対してなんらかのアクションを呼び出したり、標準メニューと同じ動作をするポップアップ・メニューを開いたりできます。
ツールバーおよびメニュー・バーは、ツールボックスを使用して編成できます。ツールボックスを使用すると、同じ行にあるツールバーの相対的なサイズや、複数レイヤーのツールバーおよびメニュー・バーを垂直方向に定義できます。
注意: 表にメニューおよびツールバーを作成する場合は、12.9項「表メニュー、ツールバーおよびステータス・バーの表示」の手順に従ってください。コンポーネントのポップアップ・メニュー(ユーザーがコンポーネントを右クリックすると起動されるメニュー)を作成する場合は、15.2.3項「ポップアップ・メニューの作成方法」の手順に従います。 |
メニューおよびツールバー・コンポーネントを実装する前に、他のADF Faces機能を理解することが役立つ場合があります。また、ページにこれらのコンポーネントを追加した後で、検証やアクセシビリティなどの機能を追加することが必要になる場合があります。メニューおよびツールバー・コンポーネントで使用できる他の機能へのリンクを次に示します。
機能の呼出し: ADF Facesには、ファイルのダウンロードや送信した値のリセットなどの機能を呼び出すためにメニュー・コマンド・コンポーネントとともに使用できるタグが用意されています。詳細は、20.5項「ボタンまたはリンクの機能の呼出し目的での使用」を参照してください。
表メニュー: 表の上に表示され、(アプリケーション全体ではなく)その表でのみ動作するメニューおよびツールバーを作成できます。詳細は、12.9項「表メニュー、ツールバーおよびステータス・バーの表示」を参照してください。
ポップアップ・メニュー: ユーザーがUIの項目を右クリックしたときにポップアップで起動するメニューを作成できます。詳細は、15.2.3項「ポップアップ・メニューの作成方法」を参照してください。
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。詳細は、3.5.2項「EL書式タグの使用方法」を参照してください。
イベント: コマンド・メニュー・コンポーネントはアクション・イベントを起動できます。イベントの詳細は、第6章「イベントの処理」を参照してください。アクション・イベントの詳細は、20.3項「ボタンおよびリンクのナビゲーション目的での使用」を参照してください。
アクセシビリティ: メニュー・コンポーネントの特定の属性を使用して、ユーザーがキーボードを使用してメニューを開けるようにするショートカットを作成できます。アクセス・キーの定義方法は、30.3.4項「ADF Facesコンポーネントのアクセス・キーの定義方法」を参照してください。アクセシビリティの詳細は、30.3項「コンポーネント・レベルのアクセシビリティ・プロパティの指定」を参照してください。
ローカライゼーション: 文字列を値として受け取る属性に値を入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、これらの文字列の翻訳を管理できます。詳細は、第29章「ページの国際化およびローカライズ」を参照してください。
スキン: スキンを変更することで、メニューのルック・アンド・フィール(選択したメニュー項目の表示に使用されるアイコンなど)をいくつかの基本機能(表示されるメニュー項目の最大数など)とともに変更できます。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
メニュー・バー項目(File Explorerアプリケーションの「ファイル」など)を含むバーのレンダリングには、menuBar
コンポーネントを使用します。図16-5に示すように、これらの項目には、垂直メニューを保持するmenu
コンポーネント、アプリケーションに対する操作を呼び出すcommandMenuItem
コンポーネントおよびURLを呼び出すgoMenu
項目があります。
メニュー・コンポーネントにcommandMenuItems
、goMenu
項目を含めたり、メニュー・コンポーネント内にメニュー・コンポーネントをネストしてサブメニューを作成したりできます。図16-6に、メニューの作成に使用されている様々なコンポーネントを示します。
ツールボックス内に配置することにより、複数のメニュー・バーを使用できます。ツールボックス内に配置すると、メニュー・バーが縦に並べて表示され、ツールボックスの最初のメニュー・バーが一番上に、最後のメニュー・バーが一番下に表示されます。(ツールボックス内にグループ化することで)1つのツールボックス行で複数のメニュー・バーを使用すると、flex
属性によって、どのメニュー・バーが最も多くの領域を占めるかが決定されます。
メニュー・バーを(縦ではなく)横に並べて表示する場合は、group
コンポーネント内に配置します。
ヒント: toolbox コンポーネントを使用して、メニュー・バーとツールバーをグループ化することや、複数のメニュー・バーをグループ化することが可能です。group コンポーネントを使用して、同じ行のメニュー・バーとツールバーをグループ化できます。 |
メニュー・バー内で、1つのコンポーネントを拡大するように設定して、メニュー・バーが常にその親コンテナと同じサイズになるようにすることができます。たとえば、図16-7では、メニュー・バーは、無効なGMIメニューとコンポーネント・ガイドボタンの間に配置されるスペーサ・コンポーネントを拡大するように設定されています。ウィンドウがサイズ変更されると、スペーサ・コンポーネントが拡大または縮小されて、メニュー・バーは常に親と同じ幅で表示されます。このようなスペーサ・コンポーネントを使用すると、スペーサの右側にあるコンポーネントがメニュー・バーに右揃えされたままになります。
メニュー・バー内のすべてのコンポーネントが表示されなくなるようにウィンドウがサイズ変更されると、メニュー・バーに、図16-8に示すように矢印カーソルで識別されるオーバーフロー・アイコンが表示されます。
オーバーフロー・アイコンをクリックすると、図16-9に示すように、残りのコンポーネントがポップアップ・ウィンドウに表示されます。
メニューおよびサブメニューは、ブラウザ・ウィンドウ上で連結解除して移動できるように設定できます。図16-10に、連結解除可能に構成された連結解除可能メニューのメニュー1サブメニューを示します。メニューの上部には、連結解除が可能であることを示すバーがレンダリングされています。
ユーザーは、連結解除可能メニューをブラウザ内の任意の場所にドラッグできます。図16-11に示すように、マウス・ボタンを離すと、そのメニューはユーザーが閉じるまでアプリケーション上に残ります。
ヒント: ユーザーが次の操作をする可能性がある場合は、連結解除可能メニューの使用を検討してください。
|
menu
およびcommandMenuItem
コンポーネントのそれぞれに、アイコン・イメージを含めることができます。図16-12に、コピー・アイコンを表示するよう構成された「ファイルを開く」メニュー項目を示します。
グラフィックが常に表示されるだけでなく、メニュー項目が選択されたときにグラフィックを表示するようにcommandMenuItem
コンポーネントを構成できます。たとえば、選択されたときにチェックマークを表示するようにcommandMenuItem
コンポーネントを構成したり、グループ内の項目の1つが選択されたときにラベルの横にアイコンが表示されるようにメニュー項目をグループ化してラジオ・ボタンのグループのような動作をするように構成したりできます。図16-13に、選択されたときにチェックマークを使用するように構成されたチェック1メニュー項目がある「特別」メニューを示します。ラジオ1、ラジオ2およびラジオ3メニュー項目はラジオ・ボタンとして構成されており、ユーザーはグループの1つのみ選択できます。
commandMenuItem
コンポーネントは、反意語を含むように構成することもできます。反意語は、ユーザーがメニュー項目を選択すると別のテキストを表示します。図16-14に、「特別」メニュー内の「開く」メニュー項目を示します。
「開く」メニュー項目のcommandMenuItem
コンポーネントを反意語として構成し、別のテキストを表示することで、ユーザーが「開く」を選択して、メニューに戻たときに、図16-15に示すようにメニュー項目に反意語「閉じる」が表示されるようにできます。
ユーザーがメニュー項目を選択するとアクションが発生するため、commandMenuItem
コンポーネントのaction
またはactionListener
属性を、必要な機能を実行するメソッドにバインドする必要があります。
メニューには、commandMenuItem
コンポーネントの他、1つ以上のgoMenuItem
コンポーネントを含めることもできます。ActionEvent
イベントを配信せずにページ・ナビゲーションを直接実行するという点で、goLink
コンポーネントと似ているナビゲーション・コンポーネントがあります。図16-16に、外部のWebサイトにナビゲートするために使用される3つのgoMenuItem
コンポーネントを示します。
メニュー・バーから起動されるメニューのみでなく、ユーザーがUIコンポーネントを右クリックした場合や、ユーザーがコマンド・コンポーネントをクリックした場合に起動されるポップアップ・メニューも作成できます。詳細は、15.2.3項「ポップアップ・メニューの作成方法」を参照してください。
注意: ADF Facesには、ユーザーが現行ページの印刷可能バージョンを表示できる埋込み機能を持つボタンが用意されています。メニューおよびメニュー・バーは、これらのページにはレンダリングされません。詳細は、6.6項「ADF Facesのクライアント動作タグの使用」を参照してください。 |
デフォルトで、メニューのコンテンツは、ページがレンダリングされるとすぐに送信されます。メニューで大量の子(複数のmenu
およびcommandMenuItem
コンポーネント)を使用することを計画している場合は、遅延コンテンツ配信を使用するようにメニューを構成することを選択できます。これは、メニューがアクセスされるまで、子コンポーネントがサーバーから取得されないことを意味します。
注意: ポップアップ・メニューとして使用されるメニューのコンテンツ配信は、メニュー自体ではなく、親のポップアップ・ダイアログにより決定されます。 |
主にアプリケーション全体におけるナビゲーションを可能にするメニューで、アプリケーションの選択項目に対する変更には使用されないメニューも作成できます。このタイプのメニューを作成するには、20.7項「メニュー・モデルを使用したページ階層の作成」を参照してください。
メニューを作成するには、まず、メニューが表示されるメニュー・バーを作成する必要があります。その後、必要に応じてmenu
およびcommandMenuItem
コンポーネントを追加および構成します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、16.2項「メニュー・バーでのメニューの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、16.1.2項「メニューおよびツールバー・コンポーネントの追加機能」を参照してください。
メニュー・バーのメニューを作成および使用する手順:
複数のメニュー・バー、またはツールバーとメニュー・バーの組合せを使用する場合は、コンポーネント・パレットの「メニューおよびツールバー」パネルから「ツールボックス」コンポーネントをドラッグ・アンド・ドロップして、toolbox
コンポーネントを作成します。
ヒント: panelHeader 、showDetailHeader およびshowDetailItem コンポーネントでは、セクション・ヘッダーおよびアコーディオン・パネル・ヘッダーにtoolboxやtoolbarを追加するためのtoolbar ファセットがサポートされています。 |
コンポーネント・パレットから「メニュー・バー」をドラッグ・アンド・ドロップして、メニュー・バーを作成します。toolbox
コンポーネントを使用している場合は、「メニュー・バー」をtoolbox
コンポーネントの直接の子としてドロップする必要があります。
ヒント: 通常はtoolboxの直接の子である子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、toolboxにもこれらのコンポーネントを直接の子として使用できます。ツールボックスの詳細は、16.3項「ツールバーの使用方法」を参照してください。 |
ツールボックスに複数のメニュー・バーをグループ化する場合は、各メニュー・バーについて、「外観」セクションを開き、flex
属性を設定して、各メニュー・バーの相対サイズを決定します。flex
属性の数値が大きいほど、ツールボックスが長くなります。例16-5に示すメニュー・バーのセットでは、menubar2
が最も長く、menubar4
が次に長くなり、flex
属性が設定されていないため残りのメニュー・バーは同じサイズになり、menubar4
よりも短くなります。
例16-1 ツールバーの長さを決定するflex属性
<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 コンポーネントのサイズを設定する必要があります。詳細は、16.3.2項「実行時に行われる処理: メニュー・バーとツールバーのサイズの決定方法」を参照してください。 |
ヒント: group コンポーネントを使用して、同じ行に表示するメニュー・バー(またはメニュー・バーとツールバー)をグループ化できます。group コンポーネントを使用しない場合、メニュー・バーは次の行に表示されます。 |
flex
属性がどのように機能するかの詳細は、16.3.2項「実行時に行われる処理: メニュー・バーとツールバーのサイズの決定方法」を参照してください。
コンポーネント・パレットから「メニュー」をドラッグし、menuBar
コンポーネントに子としてドロップして、メニュー・バーに必要な数だけmenu
コンポーネントを挿入します。
コンポーネント・パレットの「メニューおよびツールバー」パネルから「メニュー・アイテム」をドラッグ・アンド・ドロップして、メニュー・バーに直接commandMenuItem
コンポーネントを直接挿入することもできます。これにより、ツールバー・ボタンと同じようにレンダリングされるcommandMenuItem
コンポーネントが作成されます。
ヒント: 通常はメニュー・バーの直接の子である子コンポーネントをiterator 、switcher およびgroup コンポーネントにラップすれば、メニュー・バーにもこららのコンポーネントを直接の子として使用できます。 |
各menu
コンポーネントに対し、プロパティ・インスペクタの「外観」セクションを開いて、次の属性を設定します。
Text: メニューのラベル・テキストを入力します。アクセス・キー(キーボードを使用してメニューにアクセスする際に使用する文字)も表示する場合は、この属性は空にして、かわりにtextAndAccessKey
に値を入力します。
TextAndAccessKey: 従来のアンパサンド表記を使用して、メニュー・ラベルとアクセス・キーを入力します。たとえば、&File
ではメニュー・ラベルが「File」に設定され、同時に、メニュー・アクセス・キーが文字Fに設定されます。アクセス・キーとアンパサンド表記の詳細は、30.3項「コンポーネント・レベルのアクセシビリティ・プロパティの指定」を参照してください。
Icon: ドロップダウン・リストを使用してアイコンを選択します。アイコンがこのメニューに表示されない場合は、リストの右側にあるドロップダウン・メニューを使用して「編集」を選択し、アイコンを参照して選択します。
(図16-10に示すように)メニューを連結解除可能にする場合は、プロパティ・インスペクタの「動作」セクションを開き、Detachable属性をtrue
に設定します。実行時、ユーザーはメニューをドラッグして連結を解除し、画面の任意の場所にドロップできます(図16-11を参照)。
メニューで遅延コンテンツ配信を使用する場合は、ContentDelivery属性をlazy
に設定します。
注意: コンテンツの遅延配信を使用する場合、メニューのコンテンツはメニューがアクセスされるまで把握されないため、子のcommandMenuItem コンポーネントに設定されているアクセラレータが機能しなくなります。メニューでアクセラレータをサポートする必要がある場合は、ContentDeliveryをimmediate に設定する必要があります。 |
注意: メニューがポップアップ・ダイアログまたはウィンドウ内で使用される場合、ポップアップ・ダイアログまたはウィンドウによりメニューのコンテンツ配信が決定されるため、ContentDeliveryはimmediate に設定されたままにします。 |
ナビゲーションとともになんらかのアクションを呼び出すメニュー項目を作成するには、コンポーネント・パレットから「メニュー・アイテム」をドラッグし、menu
コンポーネントに子としてドロップしてcommandMenuItem
コンポーネントを作成します。垂直方向のメニューの項目を定義するいくつかのcommandMenuItem
コンポーネントを作成します。
必要な場合には、commandMenuItem
コンポーネントをgroup
コンポーネントでラップし、項目をグループとして表示できます。例16-2に「フォルダ」および「検索」メニュー項目を1つのグループにグループ化し、「表」、「ツリー表」および「リスト」メニュー項目を2番目のグループにグループ化し、「リフレッシュ」メニュー項目を最後に単独で表示する簡略化されたコードを示します。
例16-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>
図16-17に、メニューがどのように表示されるかを示します。
ヒント: デフォルトでは、メニューに表示できるのは14項目のみです。メニューに15項目以上追加すると、残りの項目へのアクセスに使用するスクロールバーとともに、最初の14項目が表示されます。表示される項目の数を変更する場合は、af|menu {-tr-visible-items }スキニング・キーを編集します。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。 |
既存のmenu
コンポーネントに別のmenu
コンポーネントを挿入して、サブメニューを作成できます(図16-4を参照)。
ヒント: 通常はメニューの直接の子である子コンポーネントをiteratorおよびswitcherコンポーネントにラップすれば、メニューにもこれらのコンポーネントを直接の子として使用できます。 |
各commandMenuItem
コンポーネントに対し、プロパティ・インスペクタの「共通」セクションを開いて、次の属性を設定します。
Type: このメニュー項目のタイプを指定します。メニュー項目のタイプが指定されると、ADF Facesにより、ビジュアルなインジケータ(ラジオ・ボタンなど)および動作の切替えがメニュー項目に追加されます。実行時に、ユーザーがタイプ(default以外)の指定されたメニュー項目を選択すると、ADF Facesにより、ビジュアルなインジケータまたはメニュー項目ラベルが表示されます。次に示す使用可能なtype
値のいずれかを使用します。
check: デフォルトのFusionFXスキンで、メニュー項目ラベルの横の正方形を切り替えます。正方形は、メニュー項目が選択されている場合に青で表示され、選択されていない場合はグレー表示されます。
radio: メニュー項目ラベルの隣のラジオ・ボタンを切り替えます。ラジオ・ボタンは、メニュー項目が選択されている場合に青い円で表示され、選択されていない場合はグレー表示されます。
antonym: メニュー項目ラベルが表示されます。メニュー項目が選択されると、(メニュー項目が選択されない場合に表示される)textまたはtextAndAccessKey
属性の値で定義されたメニュー項目ではなく、SelectedText
属性に設定された値が表示されます。このタイプを選択する場合には、SelectedTextに値を設定する必要があります。
default: メニュー項目にはタイプが割り当てられません。選択されているかどうかに関係なく、メニュー項目は同じ方法で表示されます。
Text: メニュー項目のラベル・テキストを入力します。アクセス・キー(キーボードを使用して項目にアクセスする際に使用する文字)も表示する場合は、この属性は空にして、かわりにTextAndAccessKeyに値を入力します。または、accessKey
属性を使用して、アクセス・キーを別に設定することもできます。
Selected: このメニュー項目を選択された状態で表示する場合にtrue
に設定します。selected
属性がサポートされているのはcheck、radioおよびantonymタイプのメニュー項目のみです。
SelectedText: このメニュー項目が選択された場合に、メニュー項目に表示する代替のラベルを設定します。この値は、antonym
を除くすべてのタイプで無視されます。
例16-3に、メニュー項目の1つのグループがラジオ・ボタンを使用するように構成され、別のグループは選択されたら青い正方形を表示するよう構成されている「特別」メニューを示します。最後のグループには、最初に表示される際に反意語「開く」になり、閉じるに切り替わるよう構成されたメニュー項目が含まれています。
例16-3 commandMenuItemコンポーネントでのtype属性の使用
<af:menu text="Special"> <af:group> <af:commandMenuItem text="Radio 1" type="radio" selected="true" <af:commandMenuItem text="Radio 2" type="radio"/> <af:commandMenuItem text="Radio 3" type="radio"> </af:group> <af:group> <af:commandMenuItem text="Check 1" type="check" selected="true" <af:commandMenuItem text="Check 2" type="check"/> </af:group> <af:commandMenuItem text="Open (antonym)" type="antonym" selectedText="Close (antonym)"/> </af:menu>
図16-18に、最初にアクセスされた際にメニューがどのように表示されるかを示します。
注意: デフォルトでは、ADF Facesコンポーネントはチェック・タイプを正方形として表示するFusionFXスキンを使用します。これは、独自のスキンを作成することで変更できます。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。 |
「外観」セクションを開き、次の属性を設定します。
Icon: ドロップダウン・リストを使用してアイコンを選択します。アイコンがこのメニューに表示されない場合は、リストの右側にあるドロップダウン・メニューを使用して「編集」を選択し、アイコンを参照して選択します。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用する必要があります。アクセシビリティを考慮した別の方法で、このアイコンの意味を指定する必要があります。 |
Accelerator: [Ctrl]+[O]
など、項目が選択された場合に、メニュー項目のコマンドをアクティブ化するキーストロークを入力します。図16-4に示すように、ADF Facesではキーストロークが変換され、メニュー項目ラベルの隣にキーストロークのテキスト・バージョン(「Ctrl+O」など)が表示されます。
注意: コンテンツの遅延配信を使用する場合、メニューのコンテンツはアクセスされるまで把握されないため、子のcommandMenuItem コンポーネントに設定されているアクセラレータが機能しなくなります。メニューでアクセラレータ・キーをサポートする必要がある場合は、contentDelivery 属性をimmediate に設定しておく必要があります。 |
TextAndAccessKey: 従来のアンパサンド表記を使用して、メニュー項目ラベルとアクセス・キーを入力します。たとえば、&Save
ではメニュー項目ラベルがSaveに設定され、同時に、メニュー項目アクセス・キーが文字S
に設定されます。アクセス・キーとアンパサンド表記の詳細は、30.3項「コンポーネント・レベルのアクセシビリティ・プロパティの指定」を参照してください。
「動作」セクションを開き、次の属性を設定します。
Action: メニュー項目が選択された場合に起動される、オブジェクト(マネージドBeanなど)のアクション・メソッドに対して評価されるEL式を使用します。式は、パラメータが指定されず、java.lang.Object
オブジェクトを返すpublicメソッドに対して評価される必要があります。
commandMenuItem
コンポーネントによって生成されたアクションのレスポンスとしてナビゲートさせる場合は、EL式を入力するかわりに、静的アクションの結果値をaction
属性の値として入力します。partialSubmit
属性をfalse
に設定するか、リダイレクトを使用する必要があります。アプリケーションにおけるナビゲーションの構成方法の詳細は、3.3項「ページ・フローの定義」を参照してください。
ActionListener: このメニュー項目が選択されたときに通知されるアクション・リスナー・メソッドを表す式を指定します。このメソッドをaction
属性にバインドされたメソッドのかわりに使用して、action
属性でナビゲーションのみ処理できます。式では、ActionEvent
パラメータを受け取るpublicメソッドを評価し、戻り型がvoid
である必要があります。
簡単にナビゲート(通常は外部サイトにナビゲート)するメニュー項目を作成するには、コンポーネント・パレットから「メニュー・アイテム(実行)」をメニューに子としてドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「共通」セクションを開いて次の属性を設定します。
Destination: リンクのナビゲート先のページのURIを入力します。たとえば、オラクル社のホームページにナビゲートするには、http://www.oracle.comと入力します。
TargetFrame: ドロップダウン・リストを使用して、新しいページを表示する必要がある場所を指定します。値は次のとおりです。
_blank
: リンクにより、ドキュメントは新しいウィンドウに開かれます。
_parent
: リンクにより、ドキュメントは親ウィンドウに開かれます。たとえば、リンクがダイアログに表示された場合、結果のページは親ウィンドウにレンダリングされます。
_self
: リンクにより、ドキュメントは同じページまたはリージョンに開かれます。
_top
: リンクにより、ページ全体が置き換えられて、ドキュメントはウィンドウ全体に開かれます。
Text: リンクのテキストを入力します。
ヒント: かわりに、textAndAccessKey 属性を使用して、リンクに使用するラベルおよびアクセス・キーを定義する単一の値を指定できます。アクセス・キーの定義方法の詳細は、30.3.4項「ADF Facesコンポーネントのアクセス・キーの定義方法」を参照してください。 |
メニュー・バーを拡大して親コンポーネントの幅と等しくする場合は、構造ウィンドウでmenuBar
コンポーネントを選択し、stretchIdを、メニュー・バーが親と同じサイズになるように拡大する必要のあるメニュー・バー内のコンポーネントのIDに設定します。メニュー・バーのその他のコンポーネントは静的サイズのままですが、その1つのコンポーネントは拡大されます。
また例16-7に示すように、spacer
コンポーネントを挿入し、そのコンポーネントIDをメニュー・バーのstretchId
として設定することでコンポーネントの位置を左右に調整する場合にも、stretchId
属性を使用できます。
例16-4 menuBarコンポーネントの位置を調整するためのspacerの使用
<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&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&uide" action="guide" id="cmi9"/> </af:menuBar>
アプリケーションには、メニューのみでなく、アプリケーションの操作の開始に使用するツールバー・ボタンを含むツールバーも作成できます。ボタンには、テキスト、アイコンまたは両方を組み合せて表示できます。ツールバー・ボタンでは、メニューをポップアップ・ウィンドウに開くこともできます。ツールバー・ボタンのみでなく、ドロップダウン・リストなどのその他のUIコンポーネントをツールバーに表示できます。図16-19に、File Explorerアプリケーションのツールバーを示します。
ヒント: ツールバーには、ツールバー・ボタンではなく、コマンド・ボタンやコマンド・リンク(commandImageLink など)を含めることもできます。ただし、ツールバー・ボタンには、ポップアップ・メニューの表示など、追加の機能もあります。ツールバー・ボタンは、toolbar コンポーネントの外でも使用できます。 |
toolbarコンポーネントには、inputText
コンポーネント、LOVコンポーネント、選択リスト・コンポーネント、コマンド・コンポーネントなど、様々なタイプのコンポーネントを含めることができます。ADF Facesには、ツールバー・ボタンからポップアップ・メニューを表示できるpopup
ファセットが含まれるcommandToolbarButton
コンポーネントもあります。ポップアップ・ダイアログのみが表示され、アクション・イベントが起動されないようにツールバー・ボタンを構成できます。メニュー同様、group
コンポーネントを使用して、ツールバー上の関連するツールバー・ボタンをグループ化できます。
toolboxで囲むことにより、複数のtoolbarを使用できます。toolbarをtoolboxで囲むことによりtoolbarが積み重なり、ページの最初のtoolbarが上に表示され、最後のtoolbarが下に表示されます。たとえば、図16-19に示すように、File Explorerアプリケーションでは、現在選択されているフォルダ名が「現在場所」ツールバーに表示されています。toolbarを複数使用する際は、toolbarにflex
属性を設定し、どのツールバーに最も領域を使用するかを決定できます。この場合は、「現在場所」ツールバーが最も長くなるよう設定されています。
ツールバーを(縦ではなく)横に並べて表示する場合は、group
コンポーネント内に配置します。
ヒント: toolbox コンポーネントを使用して、メニュー・バーとツールバーをグループ化することや、複数のメニュー・バーをグループ化することが可能です。ツールバーのグループ化同様、group コンポーネントを使用して、同じ行のメニュー・バーとツールバーをグループ化できます。 |
toolbar内では、ツールバーがその親コンテナと常に同じ大きさになるように、1つのコンポーネントを拡大するよう設定できます。たとえば、File Explorerアプリケーションでは、現在の場所を表示する下側のツールバーには、選択されたフォルダを表示するコンポーネントが含まれています。このコンポーネントは、ウィンドウのサイズが変更されると拡大するように設定されており、コンポーネントとツールバーは常に親と同じ幅になります。一方、上側のツールバーのコンポーネントは拡大するように設定されていないため、ウィンドウがサイズ変更されてもサイズは変わりません。ウィンドウが、ツールバー内のすべてのコンポーネントを表示できないようなサイズに変更された場合、図16-20の右上端にある矢印カーソルで示すように、ツールバーにはオーバーフロー・アイコンが表示されます。
オーバーフロー・アイコンをクリックすると、図16-21に示すように、残りのコンポーネントがポップアップ・ウィンドウに表示されます。
ツールバーでオーバーフローが発生することが予測される場合、オーバーフローで役に立つ特別なレイアウト・ロジックのあるtoolboxにラップすることをお薦めします。
ページで複数のtoolbar
コンポーネントを使用する場合、またはメニュー・バーとツールバーを一緒に使用することを計画している場合は、まず、それらを表示するtoolbox
コンポーネントを作成します。その後、ツールバーを作成し、最後にツールバー・ボタンを作成します。
ヒント: 単一のツールバーまたはメニュー・バーでレイアウト上の問題が発生した場合は、toolboxコンポーネントでラップすることを検討してください。これは、このコンポーネントで、オーバーフローやレイアウトの問題を処理できるためです。 |
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、16.3項「ツールバーの使用方法」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、16.1.2項「メニューおよびツールバー・コンポーネントの追加機能」を参照してください。
ツールバーを作成および使用する手順:
複数のツールバー、またはツールバーとメニュー・バーの組合せを使用する場合は、コンポーネント・パレットの「メニューおよびツールバー」パネルから「ツールボックス」コンポーネントをドラッグ・アンド・ドロップして、toolbox
コンポーネントを作成します。
ヒント: panelHeader 、showDetailHeader およびshowDetailItem コンポーネントでは、セクション・ヘッダーおよびアコーディオン・パネル・ヘッダーにtoolboxやtoolbarを追加するためのtoolbar ファセットがサポートされています。 |
「ツールバー」をJSFページにドラッグ・アンド・ドロップします。toolbox
コンポーネントを使用している場合は、「ツールバー」をtoolbox
コンポーネントに直接の子としてドロップする必要があります。
ヒント: 通常はtoolboxの直接の子である子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、toolboxにもこれらのコンポーネントを直接の子として使用できます。 |
ツールボックスに複数のツールバーをグループ化する場合は、各ツールバーについて、ツールバーを選択し、「外観」セクションを開き、flex
属性を設定して、各ツールバーの相対サイズを決定します。flex
属性の数値が大きいほど、ツールボックスが長くなります。例16-5に示すツールバーのセットでは、toolbar2
が最も長く、toolbar4
が次に長くなり、flex
属性が設定されていないため、残りのツールバーは同じサイズになり、toolbar4
よりも短くなります。
例16-5 ツールバーの長さを決定するflex属性
<af:toolbox> <af:toolbar id="toolbar1" flex="0"> <af:commandToolbarButton text="ButtonA"/> </af:toolbar> <af:toolbar id="toolbar2" flex="2"> <af:commandToolbarButton text="ButtonB"/> </af:toolbar> <af:toolbar id="toolbar3" flex="0"> <af:commandToolbarButton text="ButtonC"/> </af:toolbar> <af:toolbar id="toolbar4" flex="1"> <af:commandToolbarButton text="ButtonD"/> </af:toolbar> </af:toolbox>
パフォーマンスのヒント: 実行時、使用可能なブラウザの領域が、toolboxのコンテンツの表示に必要な領域より少ない場合、表示されていない項目をユーザーが選択して表示できるオーバーフロー・アイコンがADF Facesにより自動的に表示されます。toolbox コンポーネント内の子コンポーネントの数、および子の複雑さが、オーバーフローのパフォーマンスに影響します。可能な場合は、オーバーフローしないように、toolbox コンポーネントのサイズを設定する必要があります。詳細は、16.3.2項「実行時に行われる処理: メニュー・バーとツールバーのサイズの決定方法」を参照してください。 |
ヒント: group コンポーネントを使用して、同じ行に表示するツールバー(またはメニュー・バーとツールバー)をグループ化できます。group コンポーネントを使用しない場合、ツールバーは次の行に表示されます。 |
flex
属性がどのように機能するかの詳細は、16.3.2項「実行時に行われる処理: メニュー・バーとツールバーのサイズの決定方法」を参照してください。
必要に応じてtoolbarにコンポーネントを挿入します。commandToolbarButton
を作成するには、コンポーネント・パレットから「ツールバー・ボタン」をドラッグし、toolbar
コンポーネントの直接の子としてドロップします。
ヒント: group コンポーネントを使用して、バーの関連するボタンをラップできます。これにより、図16-19に表示されているスキンの選択ドロップダウン・リストと「リフレッシュ」ボタンのグループを囲むように、グループ間にセパレータが挿入されます。
通常はtoolbarの直接の子である子コンポーネントをiteratorおよびswitcherコンポーネントにラップすれば、toolbarにもこれらのコンポーネントを直接の子として使用できます。 |
ヒント: toolbarには、コマンド・ボタンやリンク、入力コンポーネントおよび選択コンポーネントなど、その他のコンポーネントを配置できます。ただし、拡大することはできません。ツールバーの拡大の詳細は、手順9を参照してください。 |
ヒント: アクティブ・データを使用したボタンのvisible 属性の変更をサポートする場合(たとえば、データ・ソースからプッシュされているデータによって、ツールバーを表示するか表示しないかを決定する場合)、commandToolbarButton コンポーネントのかわりに、activeCommandToolbarButton コンポーネントを使用する必要があります。コンポーネント・パレットから「ツールバー・ボタン(アクティブ)」をドラッグして、activeCommandToolbarButton コンポーネントを作成します。 |
各commandToolbarButton
コンポーネントに対し、プロパティ・インスペクタの「共通」セクションを開いて、次の属性を設定します。
Type: ツールバー・ボタンのタイプを指定します。ツールバー・ボタンのタイプを指定すると、ボタンがクリックされた際にアイコンが表示されます。次に示す使用可能なtype
値のいずれかを使用します。
check: 選択されている場合はdepressedIcon
値が表示され、選択されていない場合はデフォルトのicon
値が表示されます。
radio: グループ内のその他のツールバー・ボタンとともに使用すると、現在クリックされているボタンが選択されている状態になり、前にクリックされたグループ内のボタンの選択が解除されます。
注意: タイプをradio に設定する場合は、タイプがradio に設定されている別のツールバー・ボタンを含むgroup タグでツールバー・ボタンをラップする必要があります。 |
default: ツールバー・ボタンにはタイプは割り当てられません。
Selected: このツールバー・ボタンが選択されているように表示する場合にtrue
に設定します。selected
属性がサポートされているのは、チェックマーク・タイプおよびラジオ・タイプのツールバー・ボタンのみです。
Icon: ドロップダウン・リストを使用してアイコンを選択します。アイコンがこのメニューに表示されない場合は、リストの右側にあるドロップダウン・メニューを使用して「編集」を選択し、アイコンを参照して選択します。
注意: このアイコンには代替テキストを指定できないため、アクセシビリティを考慮した製品を作成するには、このアイコンは装飾目的でのみ使用する必要があります。アクセシビリティを考慮した別の方法で、このアイコンの意味を指定する必要があります。 |
Text: このツールバー・ボタンのラベルを入力します。
Action: ユーザーがボタンを押した場合に起動される、オブジェクト(マネージドBeanなど)のアクション・メソッドに対して評価されるEL式を使用します。式は、パラメータが指定されず、java.lang.Object
オブジェクトを返すpublicメソッドに対して評価される必要があります。
ボタンによって生成されたアクションのレスポンスとしてナビゲートさせる場合は、EL式を入力するかわりに、静的アクションの結果値をaction
属性の値として入力します。partialSubmit
をfalse
に設定するか、リダイレクトを使用する必要があります。ナビゲーションの構成方法の詳細は、3.3項「ページ・フローの定義」を参照してください。
ActionListener: ユーザーがこのボタンをクリックしたときに通知されるアクション・リスナー・メソッドを表す式を指定します。このメソッドをaction
属性にバインドされたメソッドのかわりに使用して、action
属性でナビゲーションのみ処理できます。式では、ActionEvent
パラメータを受け取るpublicメソッドを評価し、戻り型がvoid
である必要があります。
「外観」セクションを開き、次のプロパティを設定します。
HoverIcon: ドロップダウン・リストを使用して、マウス・カーソルがこのツールバー・ボタンの上にある場合に表示するアイコンを選択します。アイコンがこのメニューにない場合は、リストの右側にあるドロップダウン・メニューを使用して「編集」を選択し、参照してアイコンを選択します。
DepressedIcon: ドロップダウン・リストを使用して、ツールバー・ボタンがアクティブになっている場合に表示するアイコンを選択します。アイコンがこのメニューにない場合は、リストの右側にあるドロップダウン・メニューを使用して「編集」を選択し、参照してアイコンを選択します。
ボタンがクリックされたときにアクション・イベントを起動しない場合は、「動作」セクションを開き、ActionDeliveryをnone
に設定します。これは、ボタンで単純にポップアップ・ウィンドウを開く場合に役立ちます。none
に設定されている場合は、ツールバー・ボタンのpopup
ファセットにpopup
コンポーネントが必要で(手順8を参照)、action
またはactionListener
属性には値を設定できません。標準コマンド・コンポーネントとしてボタンでアクション・イベントを起動する場合は、clientServer
属性に設定します。
ツールバー・ボタンからポップアップ・メニューが起動されるようにするには、commandToolbarButton
コンポーネントのpopup
ファセットにmenu
コンポーネントを挿入します。詳細は、16.2.1項「メニュー・バーのメニューの作成および使用方法」を参照してください。
ツールバーを含む親コンポーネントと同じ幅になるようにツールバーを拡大する場合は、stretchIdを、拡大する必要のあるツールバー内のコンポーネントのIDに設定します。ツールバーのその他のコンポーネントは静的サイズのままですが、その1つのコンポーネントは拡大されます。
たとえば、例16-6に示すように、File Explorerアプリケーションで、選択されているフォルダの名前を表示するinputText
コンポーネントは拡大され、「現在のフォルダ」という語を表示するoutputText
コンポーネントは静的サイズのままになります。
例16-6 stretchId属性の使用
<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>
また例16-7に示すように、spacer
コンポーネントを挿入し、そのコンポーネントIDをtoolbarのstretchId
として設定することでコンポーネントの位置を左右に調整する場合にも、stretchId
属性を使用できます。
例16-7 toolbarコンポーネントの位置を調整するためのspacerの使用
<af:toolbar flex="1" stretchId="stretch1"> <af:commandToolbarButton text="Forward" icon="/images/fwdarrow_gray.gif" disabled="true"></af:commandToolbarButton> <af:commandToolbarButton icon="/images/uplevel.gif" /> <!-- Insert a stretched spacer to push subsequent buttons to the right --> <af:spacer id="stretch1" clientComponent="true"/> <af:commandToolbarButton text="Reports" /> <af:commandToolbarButton 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により、ユーザーがオーバーフロー・リストから非表示のボタンを選択できるオーバーフロー・アイコンが自動的にレンダリングされます。
ツールバーは、印刷可能ページにはレンダリングされません。