| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
前 |
次 |
この章では、ツール・ボタンを含むメニュー・バーおよびツールバーの作成方法を説明します。
ナビゲーション・メニュー(ページの階層から移動できるメニュー)の詳細は、18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。
この章では、次の項目について説明します。
ユーザーは、メニューやツールバーを使用して、指定されたオプションのリスト(メニューの場合)から選択したり、ボタン(ツールバーの場合)をクリックしてアプリケーションの変更を実行したりできます。図14-1に示すように、File Explorerアプリケーションには、メニュー・バーとツールバーの両方があります。
図14-2に示すように、ユーザーがメニュー・バーのメニュー項目を選択すると、menuコンポーネントにより、メニュー項目のリストが表示されます。
図14-3に示されているように、メニューはネスト可能です。
ツールバーのボタンにより、一部のアクションを起動したり、標準のメニューと同じように動作するポップアップ・メニューを開こともできます。
ツールバーおよびメニュー・バーは、ツールボックスを使用して編成できます。ツールボックスを使用すると、同じ行にあるツールバーの相対的なサイズや、複数レイヤーのツールバーおよびメニュー・バーを垂直方向に定義できます。
|
注意: 表にメニューおよびツールバーを作成する場合は、10.7項「表メニュー、ツールバーおよびステータス・バーの表示」に説明されている手順に従ってください。 コンポーネントのポップアップ・メニュー(コンポーネントを右クリックすると起動するメニュー)を作成する場合は、13.2.3項「ポップアップ・メニューの作成方法」に説明されている手順に従ってください。 |
メニュー・バー項目(File Explorerアプリケーションの「ファイル」など)を含むバーのレンダリングには、menuBarコンポーネントを使用します。メニュー・バーの各項目は、垂直のメニューが配置されるmenuコンポーネントによりレンダリングされます。垂直の各メニューには、アプリケーションの操作を起動できるcommandMenuItemコンポーネントのリストが含まれます。メニュー・コンポーネント内にメニュー・コンポーネントをネストさせて、サブメニューを作成できます。図14-4に、メニューの作成に使用されている様々なコンポーネントを示します。
toolboxで囲むことにより、複数のメニュー・バーを使用できます。これらをtoolboxで囲むことにより、メニュー・バーが積み重なり、toolboxの最初のメニュー・バーが上に表示され、最後のメニュー・バーが下に表示されます。単一のtoolbox行に複数のメニューを使用する場合(toolbox内にグループ化する)は、どのメニュー・バーに最も領域を使用するかをflex属性で決定します。
メニュー・バーを(縦ではなく)横に並べて表示する場合は、groupコンポーネント内に配置します。
|
ヒント:
|
メニュー・バー内では、メニュー・バーがその親コンテナと常に同じ大きさになるように、1つのコンポーネントを拡大するよう設定できます。たとえば、図14-5では、無効なGMIメニューおよびコンポーネント・ガイドボタンの間に配置されているspacerコンポーネントを拡大するようにメニュー・バーが設定されています。ウィンドウのサイズが変更されると、メニュー・バーが常に親と同じ幅になるように、spacerコンポーネントが拡大または縮小します。このようなspacerコンポーネントを使用することにより、spacerの右側のコンポーネントはメニューバー内で右に揃えられます。
メニュー・バー内のすべてのコンポーネントが表示できないようなサイズにウィンドウが変更された場合は、図14-6の矢印カーソルで示すように、オーバーフロー・アイコンが表示されます。
オーバーフロー・アイコンをクリックすると、図14-7に示すように、残りのコンポーネントがポップアップ・ウィンドウに表示されます。
メニューおよびサブメニューは、ブラウザ・ウィンドウ上で連結解除して移動できるように設定できます。図14-8に、連結解除できるように構成されたサブメニューを示します。メニューの上部には、連結解除が可能であることを示すバーがレンダリングされています。
ユーザーは、連結解除可能メニューをブラウザ内の任意の場所にドラッグできます。図14-9に示すように、マウス・ボタンを離すと、そのメニューはユーザーが閉じるまでアプリケーション上に残ります。
|
ヒント: ユーザーが次の操作をする可能性がある場合は、連結解除可能メニューの使用を検討してください。
|
menuおよびcommandMenuItemコンポーネントのそれぞれに、アイコン・イメージを含めることができます。図14-10に、削除アイコンを表示するよう構成された「削除」メニュー項目を示します。
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用します。このアイコンの意味は、アクセシビリティが確保された方法で指定する必要があります。 |
commandMenuItemコンポーネントは、メニュー項目が選択された際の表示を変更できる特別なタイプに構成できます。たとえば、項目が選択された際に、ラベルの隣にチェックマークまたはラジオ・ボタンが表示されるようにcommandMenuItemコンポーネントを構成できます。図14-11に、選択時にチェックマークを使用するよう構成された「フォルダ」メニュー項目を含む「表示」メニューを示します。「表」、「ツリー表」および「リスト」メニュー項目はラジオ・ボタンとして構成されており、ユーザーは1つのグループのみ選択できます。
commandMenuItemコンポーネントは、反意語を含むように構成することもできます。反意語は、ユーザーがメニュー項目を選択すると別のテキストを表示します。図14-12に、(この例のFile Explorerアプリケーションに追加された)「編集」メニューの「元に戻す」メニュー項目を示します。
「元に戻す」メニュー項目のcommandMenuItemコンポーネントが反意語になり、代替テキストが表示されるようにように構成することで、ユーザーが「元に戻す」を選択して、メニューに戻ると、図14-13に示すように、メニュー項目に反意語「リストア」が表示されます。
ユーザーがメニュー項目を選択するとアクションが発生するため、commandMenuItemコンポーネントのactionまたはactionListener属性を、必要な機能を実行するメソッドにバインドする必要があります。
メニューには、commandMenuItemコンポーネントの他、1つ以上のgoMenuItemコンポーネントを含めることもできます。ActionEventイベントを配信せずにページ・ナビゲーションを直接実行するという点で、goLinkコンポーネントと似ているナビゲーション・コンポーネントがあります。図14-14に、外部のwebサイトにナビゲートするために使用される3つのgoMenuItemコンポーネントを示します。
メニュー・バーから起動されるメニューのみでなく、ユーザーがUIコンポーネントを右クリックした場合や、ユーザーがコマンド・コンポーネントをクリックした場合に起動されるポップアップ・メニューも作成できます。詳細は、13.2.3項「ポップアップ・メニューの作成方法」を参照してください。
|
注意: ADF Facesには、ユーザーが現行ページの印刷可能バージョンを表示できる埋込み機能を持つボタンが用意されています。メニューおよびメニュー・バーは、これらのページにはレンダリングされません。詳細は、5.6項「クライアントの動作タグの使用」を参照してください。 |
デフォルトで、メニューのコンテンツは、ページがレンダリングされるとすぐに送信されます。メニューに多数の子(複数のmenuおよびcommandMenuItemコンポーネント)を作成する予定の場合は、コンテンツの遅延配信を使用するようメニューを構成できます。これは、メニューがアクセスされるまで、子コンポーネントがサーバーから取得されないことを意味します。
|
注意: ポップアップ・メニューとして使用されるメニューのコンテンツ配信は、メニュー自体ではなく、親のポップアップ・ダイアログにより決定されます。 |
主にアプリケーション全体におけるナビゲーションを可能にするメニューで、アプリケーションの選択項目に対する変更には使用されないメニューも作成できます。このタイプのメニューを作成するには、18.6項「メニュー・モデルを使用したページ階層の作成」を参照してください。
メニューを作成するには、まず、メニューが表示されるメニュー・バーを作成する必要があります。その後、必要に応じてmenuおよびcommandMenuItemコンポーネントを追加および構成します。
メニュー・バーのメニューを作成および使用する手順:
複数のメニュー・バーまたはツールバーとメニュー・バーの組合せを使用する場合は、コンポーネント・パレットの「レイアウト」パネルから「ツールボックス」コンポーネントをドラッグ・アンド・ドロップして、toolboxコンポーネントを作成します。
|
ヒント:
|
コンポーネント・パレットの「共通コンポーネント」パネルから「パネル・メニュー・バー」をドラッグ・アンド・ドロップして、メニュー・バーを作成します。toolboxコンポーネントを使用している場合は、「パネル・メニュー・バー」をtoolboxコンポーネントの直接の子としてドロップする必要があります。
|
ヒント: 通常はtoolboxの直接の子である子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、toolboxにもこれらのコンポーネントを直接の子として使用できます。toolboxの詳細は、14.3項「ツールバーの使用方法」を参照してください。 |
toolbox内で複数のメニュー・バーをグループ化する場合は、メニュー・バーごとに「外観」セクションを開き、flex属性を設定して、各メニュー・バーの相対的なサイズを決定します。flex属性に指定された数が大きいほど、toolboxは長くなります。例14-5に示すメニュー・バーのセットでは、menubar2が最も長く、menubar4が次に長くなり、残りのメニュー・バーは、flex属性が設定されていないため、同じサイズでmenubar4よりも短くなります。
例14-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により自動的に表示されます。 |
|
ヒント:
|
flex属性の機能の詳細は、14.3.2項「実行時の処理: メニュー・バーおよびツールバーのサイズの決定」を参照してください。
コンポーネント・パレットから「メニュー」をドラッグし、menuBarコンポーネントの子としてドロップして、メニュー・バーに必要な数だけmenuコンポーネントを挿入します。
「メニュー項目」をドラッグ・アンド・ドロップして、メニュー・バーに直接commandMenuItemコンポーネントを挿入することもできます。これにより、ツールバー・ボタンと同じようにレンダリングされるcommandMenuItemコンポーネントが作成されます。
|
ヒント: 通常はメニュー・バーの直接の子である子コンポーネントを |
各menuコンポーネントに対し、プロパティ・インスペクタの「外観」セクションを開いて、次の属性を設定します。
text: メニューのラベル・テキストを入力します。アクセス・キー(キーボードを使用してメニューにアクセスする際に使用する文字)も表示する場合は、この属性は空にして、かわりにtextAndAccessKeyに値を入力します。
textAndAccessKey: 従来のアンパサンド表記を使用して、メニュー・ラベルとアクセス・キーを入力します。たとえば、&Fileではメニュー・ラベルが「File」に設定され、同時に、メニュー・アクセス・キーが文字Fに設定されます。アクセス・キーおよびアンバサンド表記の詳細は、22.3項「コンポーネントレベルのアクセシビリティ・プロパティの指定」を参照してください。
icon: ドロップダウン・リストを使用して、アイコンを選択します。アイコンがメニューに表示されない場合は、リストに右側にあるドロップダウン・メニューを使用して、「編集」を選択し、アイコンを参照して選択します。
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用する必要があります。このアイコンの意味は、アクセシビリティが確保された別の方法で指定する必要があります。 |
メニューを連結解除可能にする場合(図14-8を参照)は、プロパティ・インスペクタで「動作」セクションを開き、detachable属性をtrueに設定します。実行時、ユーザーはメニューをドラッグして連結を解除し、画面の任意の場所にドロップできます(図14-9を参照)。
メニューでコンテンツの遅延配信を使用する場合は、プロパティ・インスペクタで「その他」セクションを開き、contentDelivery属性をlazyに設定します。
|
注意: コンテンツの遅延配信を使用する場合、メニューのコンテンツはメニューがアクセスされるまで把握されないため、子の |
|
注意: メニューがポップアップ・ダイアログまたはウィンドウ内で使用される場合、ポップアップ・ダイアログまたはウィンドウによりメニューのコンテンツ配信が決定されるため、contentDeliveryは |
ナビゲーションとともになんらかのアクションを起動するメニュー項目を作成するには、コンポーネント・パレットから「MenuItem」をmenuコンポーネントの子としてドラッグ・アンド・ドロップし、commandMenuItemコンポーネントを作成します。一連のcommandMenuItemコンポーネントを作成して、垂直メニューの項目を定義します。
必要な場合には、commandMenuItemコンポーネントをgroupコンポーネント内でラップし、項目をグループとして表示できます。例14-2に、「フォルダ」および「検索」メニュー項目を1つ目のグループに、「表」、「ツリー表」および「リスト」メニュー項目を2つ目のグループにグループ化し、「リフレッシュ」メニュー項目を単独で最後に配置するために簡略化されたコードを示します。
例14-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>
図14-15に、メニューがどのように表示されるかを示します。
|
ヒント: デフォルトでは、メニューに表示できるのは14項目のみです。メニューに15項目以上追加すると、残りの項目へのアクセスに使用するスクロールバーとともに、最初の14項目が表示されます。表示される項目の数を変更する場合は、 |
既存のmenuコンポーネントに別のmenuコンポーネントを挿入して、サブメニューを作成できます(図14-3を参照)。
|
ヒント: 通常はメニューの直接の子である子コンポーネントをiteratorおよびswitcherコンポーネントにラップすれば、メニューにもこれらのコンポーネントを直接の子として使用できます。 |
各commandMenuItemコンポーネントに対し、プロパティ・インスペクタの「共通」セクションを開いて、次の属性を設定します。
type: メニュー項目のタイプを指定します。メニュー項目のタイプが指定されると、ADF Facesにより、ビジュアルなインジケータ(ラジオ・ボタンなど)および動作の切替えがメニュー項目に追加されます。実行時に、ユーザーがタイプ(default以外)の指定されたメニュー項目を選択すると、ADF Facesにより、ビジュアルなインジケータまたはメニュー項目ラベルが切り替えられます。次に示す使用可能なtype値のいずれかを使用します。
check: デフォルトのSkyrosスキンで、メニュー項目ラベルの横の正方形を切り替えます。この四角形は、メニュー項目が選択された場合は無地の青で表示され、選択されない場合はグレーで表示されます。
radio: メニュー項目ラベルの隣のラジオ・ボタンを切り替えます。ラジオ・ボタンは、メニュー項目が選択された場合は無地の青で表示され、選択されない場合はグレーで表示されます。
antonym: メニュー項目ラベルが表示されます。メニュー項目が選択されると、(メニュー項目が選択されない場合に表示される)textまたはtextAndAccessKey属性の値で定義されたメニュー項目ではなく、selectedText属性に設定された値が表示されます。このタイプを選択する場合には、selectedTextに値を設定する必要があります。
default: メニュー項目にはタイプが割り当てられません。選択されているかどうかに関係なく、メニュー項目は同じ方法で表示されます。
text: メニュー項目のラベル・テキストを入力します。アクセス・キー(キーボードを使用して項目にアクセスする際に使用できる文字)も表示する場合は、この属性は空にして、かわりにtextAndAccessKeyに値を入力します。または、accessKey属性を使用して、アクセス・キーを別に設定することもできます。
selected: メニュー項目を選択された状態で表示する場合にtrueに設定します。selected属性がサポートされているのはcheck、radioおよびantonymタイプのメニュー項目のみです。
selectedText: メニュー項目が選択された場合に、このメニュー項目に表示する代替のラベルを設定します。この値は、antonymを除くすべてのタイプで無視されます。
例14-3に、メニュー項目の1つのグループがラジオ・ボタンを使用するように構成され、別のグループは選択されたら青の四角形を表示するよう構成されている「特別」メニューを示します。最後のグループには、最初に表示される際に反意語「開く」になり、「閉じる」に切り替わるよう構成されたメニュー項目が含まれています。
例14-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>
図14-16に、最初にアクセスされた際にメニューがどのように表示されるかを示します。
|
注意: デフォルトでは、ADF FacesコンポーネントではSkyrosスキンが使用されます。これは、独自のスキンを作成することで変更できます。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。 |
「外観」セクションを開き、次の属性を設定します。
icon: ドロップダウン・リストを使用して、アイコンを選択します。アイコンがメニューに表示されない場合は、リストに右側にあるドロップダウン・メニューを使用して、「編集」を選択し、アイコンを参照して選択します。
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用する必要があります。このアイコンの意味は、アクセシビリティが確保された別の方法で指定する必要があります。 |
accelerator: [Ctrl]+[O]など、項目が選択された場合に、メニュー項目のコマンドをアクティブ化するキーストロークを入力します。図14-3に示すように、ADF Facesではキーストロークが変換され、メニュー項目ラベルの隣にキーストロークのテキスト・バージョン(「Ctrl+O」など)が表示されます。
|
注意: コンテンツの遅延配信を使用する場合、メニューのコンテンツはアクセスされるまで把握されないため、子の |
textAndAccessKey: 従来のアンパサンド表記を使用して、メニュー項目ラベルとアクセス・キーを入力します。たとえば、&Saveではメニュー項目ラベルがSaveに設定され、同時に、メニュー項目アクセス・キーが文字Sに設定されます。アクセス・キーおよびアンバサンド表記の詳細は、22.3項「コンポーネントレベルのアクセシビリティ・プロパティの指定」を参照してください。
「動作」セクションを開き、次の属性を設定します。
action: メニュー項目が選択された場合に起動される、オブジェクト(マネージドBeanなど)のアクション・メソッドに対して評価されるEL式を使用します。式は、パラメータが指定されず、java.lang.Objectオブジェクトを返すpublicメソッドに対して評価される必要があります。
commandMenuItemコンポーネントによって生成されたアクションのレスポンスとしてナビゲートさせる場合は、EL式を入力するかわりに、静的アクションの結果値をaction属性の値として入力します。partialSubmit属性をfalseに設定するか、リダイレクトを使用する必要があります。アプリケーションにおけるナビゲーションの構成方法の詳細は、2.3項「ページ・フローの定義」を参照してください。
actionListener: メニュー項目が選択された場合に通知される、アクション・リスナー・メソッドを参照する式を指定します。このメソッドは、action属性にバインドされているメソッドのかわりに使用できるため、action属性ではナビゲーションのみを処理できます。式では、ActionEventパラメータを取るpublicメソッドを評価し、戻り型がvoidである必要があります。
簡単にナビゲート(通常は外部サイトにナビゲート)するメニュー項目を作成するには、コンポーネント・パレットから移動メニュー項目をメニューの子としてドラッグ・アンド・ドロップします。
プロパティ・インスペクタで、「その他」セクションを開いて次の属性を設定します。
destination: リンクのナビゲート先のページのURIを入力します。たとえば、オラクル社のホームページにナビゲートする場合、http://www.oracle.comと入力します。
icon: ドロップダウン・リストを使用して、アイコンを選択します。アイコンがメニューに表示されない場合は、リストに右側にあるドロップダウン・メニューを使用して、「編集」を選択し、アイコンを参照して選択します。
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用する必要があります。このアイコンの意味は、アクセシビリティが確保された別の方法で指定する必要があります。 |
targetFrame: ドロップダウン・リストを使用して、新しいページの表示場所を指定します。値は次のとおりです。
_blank: リンクにより、ドキュメントは新しいウィンドウに開かれます。
_parent: リンクにより、ドキュメントは親ウィンドウに開かれます。たとえば、リンクがダイアログに表示された場合、結果のページは親ウィンドウにレンダリングされます。
_self: リンクにより、ドキュメントは同じページまたはリージョンに開かれます。
_top: リンクにより、ページ全体が置き換えられて、ドキュメントはウィンドウ全体に開かれます。
text: リンクのテキストを入力します。
|
ヒント: かわりに、 |
メニュー・バーを含む親コンポーネントと同じ幅になるようにメニュー・バーを拡大する場合は、メニュー・バーが親と同じサイズになるように、拡大するメニュー・バー内のコンポーネントのIDにstretchIdを設定します。メニュー・バーのその他のコンポーネントは静的サイズのままですが、その1つのコンポーネントは拡大されます。
また例14-7に示すように、spacerコンポーネントを挿入し、そのコンポーネントIDをメニュー・バーのstretchIdとして設定することでコンポーネントの位置を左右に調整する場合にも、stretchId属性を使用できます。
例14-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コンポーネントをツールバーに表示できます。図14-17に、File Explorerアプリケーションのツールバーを示します。
|
ヒント: ツールバーには、ツールバー・ボタンではなく、コマンド・ボタンやコマンド・リンク( |
toolbarコンポーネントには、inputTextコンポーネント、LOVコンポーネント、選択リスト・コンポーネントおよびコマンド・コンポーネントなど、様々なタイプのコンポーネントを含めることができます。ADF Facesには、ツールバー・ボタンからポップアップ・メニューを表示できるpopupファセットが含まれるcommandToolbarButtonコンポーネントもあります。ポップアップ・ダイアログのみが表示され、アクション・イベントが起動されないようにツールバー・ボタンを構成できます。メニュー同様、groupコンポーネントを使用して、ツールバー上の関連するツールバー・ボタンをグループ化できます。
toolboxで囲むことにより、複数のtoolbarを使用できます。toolboxで囲むことにより、toolbarが積み重なり、ページの最初のtoolbarが上に表示され、最後のtoolbarが下に表示されます。たとえば、図14-17に示すように、File Explorerアプリケーションでは、現在選択されているフォルダ名が「現在場所」ツールバーに表示されています。toolbarを複数使用する際は、toolbarにflex属性を設定し、どのツールバーに最も領域を使用するかを決定できます。この場合は、「現在場所」ツールバーが最も長くなるよう設定されています。
ツールバーを(縦ではなく)横に並べて表示する場合は、groupコンポーネント内に配置します。
|
ヒント:
|
toolbar内では、ツールバーがその親コンテナと常に同じ大きさになるように、1つのコンポーネントを拡大するよう設定できます。たとえば、File Explorerアプリケーションでは、現在の場所を表示する下側のツールバーには、選択されたフォルダを表示するコンポーネントが含まれています。このコンポーネントは、ウィンドウのサイズが変更されると拡大するように設定されており、コンポーネントとツールバーは常に親と同じ幅になります。一方、上側のツールバーのコンポーネントは拡大するように設定されていないため、ウィンドウがサイズ変更されてもサイズは変わりません。ウィンドウが、ツールバー内のすべてのコンポーネントを表示できないようなサイズに変更された場合、図14-18の右上端にある矢印カーソルで示すように、ツールバーにはオーバーフロー・アイコンが表示されます。
オーバーフロー・アイコンをクリックすると、図14-19に示すように、残りのコンポーネントがポップアップ・ウィンドウに表示されます。
ツールバーでオーバーフローが発生することが予測される場合、オーバーフローで役に立つ特別なレイアウト・ロジックのあるtoolboxにラップすることをお薦めします。
ページに1つ以上のtoolbarコンポーネントを使用する場合、またはメニュー・バーとツールバーを一緒に使用する場合は、まず、それらを表示するtoolboxコンポーネントを作成します。その後、ツールバーを作成し、最後にツールバー・ボタンを作成します。
|
ヒント: 単一のツールバーまたはメニュー・バーでレイアウト上の問題が発生した場合は、toolboxコンポーネントでラップすることを検討してください。これは、このコンポーネントで、オーバーフローやレイアウトの問題を処理できるためです。 |
ツールバーを作成および使用する手順:
複数のツールバーまたはツールバーとメニュー・バーの組合せを使用する場合は、コンポーネント・パレットの「レイアウト」パネルから「ツールボックス」コンポーネントをドラッグ・アンド・ドロップして、toolboxコンポーネントを作成します。
|
ヒント:
|
コンポーネント・パレットの「共通コンポーネント」パネルから、JSFページに「ツールバー」をドラッグ・アンド・ドロップします。toolboxコンポーネントを使用している場合は、「ツールバー」がtoolboxコンポーネントの直接の子であることが必要です。
|
ヒント: 通常はtoolboxの直接の子である子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、toolboxにもこれらのコンポーネントを直接の子として使用できます。 |
toolbox内で複数のtoolbarをグループ化する場合は、toolbarごとにtoolbarを選択して、「外観」セクションを開き、flex属性を設定して、各ツールバーの相対的なサイズを決定します。flex属性に指定された数が大きいほど、toolboxは長くなります。例14-5に示すツールバーのセットでは、toolbar2が最も長く、toolbar4が次に長くなり、残りのツールバーは、flex属性が設定されていないため、同じサイズでtoolbar4よりも短くなります。
例14-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により自動的に表示されます。 |
|
ヒント:
|
flex属性の機能の詳細は、14.3.2項「実行時の処理: メニュー・バーおよびツールバーのサイズの決定」を参照してください。
必要に応じてtoolbarにコンポーネントを挿入します。ommandToolbarButtonを作成するには、コンポーネント・パレットから「ToolbarButton」をドラッグし、toolbarコンポーネントの直接の子としてドロップします。
|
ヒント:
通常はtoolbarの直接の子である子コンポーネントをiteratorおよびswitcherコンポーネントにラップすれば、toolbarにもこれらのコンポーネントを直接の子として使用できます。 |
|
ヒント: toolbarには、コマンド・ボタンやリンク、入力コンポーネントおよび選択コンポーネントなど、その他のコンポーネントを配置できます。ただし、拡大することはできません。ツールバーの拡大の詳細は、手順9を参照してください。 |
|
ヒント: アクティブ・データを使用したボタンの |
各commandToolbarButtonコンポーネントに対し、プロパティ・インスペクタの「共通」セクションを開いて、次の属性を設定します。
type: ツールバー・ボタンのタイプを指定します。ツールバー・ボタンのタイプを指定すると、ボタンがクリックされた際にアイコンが表示されます。次に示す使用可能なtype値のいずれかを使用します。
check: 選択されている場合はdepressedIcon値が表示され、選択されていない場合はデフォルトのicon値が表示されます。
radio: グループ内のその他のツールバー・ボタンとともに使用すると、現在クリックされているボタンが選択されている状態になり、前にクリックされたグループ内のボタンの選択が解除されます。
|
注意: タイプを |
default: ツールバー・ボタンにはタイプは割り当てられません。
selected: ツールバー・ボタンが選択されているように表示する場合にtrueに設定します。selected属性がサポートされているのは、チェックマーク・タイプおよびラジオ・タイプのツールバー・ボタンのみです。
icon: ドロップダウン・リストを使用して、アイコンを選択します。アイコンがメニューに表示されない場合は、リストに右側にあるドロップダウン・メニューを使用して、「編集」を選択し、アイコンを参照して選択します。
|
注意: このアイコンでは代替テキストを指定できないため、アクセシビリティが確保された製品を作成するには、このアイコンを装飾目的でのみ使用する必要があります。このアイコンの意味は、アクセシビリティが確保された別の方法で指定する必要があります。 |
text: ツールバー・ボタンのラベルを入力します。
action: ユーザーがボタンを押した場合に起動される、オブジェクト(マネージドBeanなど)のアクション・メソッドに対して評価されるEL式を使用します。式は、パラメータが指定されず、java.lang.Objectオブジェクトを返すpublicメソッドに対して評価される必要があります。
ボタンによって生成されたアクションのレスポンスとしてナビゲートさせる場合は、EL式を入力するかわりに、静的アクションの結果値をaction属性の値として入力します。partialSubmitをfalseに設定するか、リダイレクトを使用する必要があります。ナビゲーションの構成方法の詳細は、2.3項「ページ・フローの定義」を参照してください。
actionListener: このボタンを押した場合に通知される、アクション・リスナー・メソッドを参照する式を指定します。このメソッドは、action属性にバインドされているメソッドのかわりに使用できるため、action属性ではナビゲーションのみを処理できます。式では、ActionEventパラメータを取るpublicメソッドを評価し、戻り型がvoidである必要があります。
「外観」セクションを開き、次のプロパティを設定します。
hoverIcon: ドロップダウン・リストを使用して、マウス・カーソルがツールバー・ボタンの上にある場合に表示するアイコンを選択します。アイコンがメニューにない場合は、リストに右側にあるドロップダウン・メニューを使用して、「編集」を選択し、アイコンを参照して選択します。
depressedIcon: ドロップダウン・リストを使用して、ツールバー・ボタンが有効になった場合に表示するアイコンを選択します。アイコンがメニューにない場合は、リストに右側にあるドロップダウン・メニューを使用して、「編集」を選択し、アイコンを参照して選択します。
ボタンがクリックされた時にアクション・イベントを起動しない場合は、「動作」セクションを開いて、actionDeliveryをnoneに設定します。これは、ポップアップ・ウィンドウを開くのみのボタンにする場合に便利です。noneに設定している場合は、popupコンポーネントをツールバー・ボタンのpopupファセットに配置する必要がありますが(手順 8を参照)、actionまたはactionListener属性には値を設定できません。標準のコマンド・コンポーネントとして、ボタンでアクション・イベントを起動させる場合は、clientServer属性を設定します。
ツールバー・ボタンからポップアップ・メニューが起動されるようにするには、commandToolbarButtonコンポーネントのpopupファセットにmenuコンポーネントを挿入します。詳細は、14.2.1項「メニュー・バーのメニューの作成および使用方法」を参照してください。
ツールバーを含む親コンポーネントと同じ幅になるようにツールバーを拡大する場合は、stretchId属性を、拡大するツールバー内のコンポーネントのIDに設定します。ツールバーのその他のコンポーネントは静的サイズのままですが、その1つのコンポーネントは拡大されます。
たとえば、例14-6に示すように、File Explorerアプリケーションで、選択されているフォルダ名を表示するinputTextコンポーネントは拡大し、現在のフォルダという語を表示するoutputTextコンポーネントは静的サイズのままになります。
例14-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>
また例14-7に示すように、spacerコンポーネントを挿入し、そのコンポーネントIDをtoolbarのstretchIdとして設定することでコンポーネントの位置を左右に調整する場合にも、stretchId属性を使用できます。
例14-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により、ユーザーがオーバーフロー・リストから非表示のボタンを選択できるオーバーフロー・アイコンが自動的にレンダリングされます。
ツールバーは、印刷可能ページにはレンダリングされません。
