| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-11 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-11 |
|
前 |
次 |
この章では、ツール・ボタンを含むメニュー・バーおよびツールバーの作成方法を説明します。
ページの階層をナビゲートできるナビゲーション・メニューの作成の詳細は、18.5項「ページ階層用のナビゲーション・アイテムの使用」を参照してください。
この章では、次の項目について説明します。
ユーザーは、メニューやツールバーを使用して、指定されたオプションのリスト(メニューの場合)から選択したり、ボタン(ツールバーの場合)をクリックしてアプリケーションの変更を実行したりできます。図14-1に示すように、File Explorerアプリケーションには、メニュー・バーとツールバーの両方があります。
図14-2に示すように、ユーザーがメニュー・バーのメニュー項目を選択すると、menuコンポーネントにより、メニュー項目のリストが表示されます。
図14-3に示されているように、メニューはネスト可能です。
ツールバーのボタンでも、ユーザーはアプリケーションに対してなんらかのアクションを呼び出したり、標準メニューと同じ動作をするポップアップ・メニューを開いたりできます。
ツールバーおよびメニュー・バーは、ツールボックスを使用して編成できます。ツールボックスを使用すると、同じ行にあるツールバーの相対的なサイズや、複数レイヤーのツールバーおよびメニュー・バーを垂直方向に定義できます。
|
注意: 表にメニューおよびツールバーを作成する場合は、10.7項「表メニュー、ツールバーおよびステータス・バーの表示」の手順に従ってください。 コンポーネントのポップアップ・メニュー(ユーザーがコンポーネントを右クリックすると起動されるメニュー)を作成する場合は、13.2.3項「ポップアップ・メニューの作成方法」の手順に従います。 |
メニュー・バー項目(File Explorerアプリケーションの「ファイル」など)を含むバーのレンダリングには、menuBarコンポーネントを使用します。メニュー・バーの各項目は、垂直のメニューが配置されるmenuコンポーネントによりレンダリングされます。垂直の各メニューには、アプリケーションの操作を起動できるcommandMenuItemコンポーネントのリストが含まれます。メニュー・コンポーネント内にメニュー・コンポーネントをネストさせて、サブメニューを作成できます。図14-4に、メニューの作成に使用されている様々なコンポーネントを示します。
ツールボックス内に配置することにより、複数のメニュー・バーを使用できます。ツールボックス内に配置すると、メニュー・バーが縦に並べて表示され、ツールボックスの最初のメニュー・バーが一番上に、最後のメニュー・バーが一番下に表示されます。(ツールボックス内にグループ化することで)1つのツールボックス行で複数のメニュー・バーを使用すると、flex属性によって、どのメニュー・バーが最も多くの領域を占めるかが決定されます。
メニュー・バーを(縦ではなく)横に並べて表示する場合は、groupコンポーネント内に配置します。
|
ヒント:
|
メニュー・バー内で、1つのコンポーネントを拡大するように設定して、メニュー・バーが常にその親コンテナと同じサイズになるようにすることができます。たとえば、図14-5では、メニュー・バーは、無効なGMIメニューと「コンポーネント・ガイド」ボタンの間に配置されるスペーサ・コンポーネントを拡大するように設定されています。ウィンドウがサイズ変更されると、スペーサ・コンポーネントが拡大または縮小されて、メニュー・バーは常に親と同じ幅で表示されます。このようなスペーサ・コンポーネントを使用すると、スペーサの右側にあるコンポーネントがメニュー・バーに右揃えされたままになります。
メニュー・バー内のすべてのコンポーネントが表示されなくなるようにウィンドウがサイズ変更されると、メニュー・バーに、図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にもこれらのコンポーネントを直接の子として使用できます。ツールボックスの詳細は、14.3項「ツールバーの使用方法」を参照してください。 |
ツールボックスに複数のメニュー・バーをグループ化する場合は、各メニュー・バーについて、「外観」セクションを開き、flex属性を設定して、各メニュー・バーの相対サイズを決定します。flex属性の数値が大きいほど、ツールボックスが長くなります。例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を使用できます。toolbarをtoolboxで囲むことによりtoolbarが積み重なり、ページの最初のtoolbarが上に表示され、最後のtoolbarが下に表示されます。たとえば、図14-17に示すように、File Explorerアプリケーションでは、現在選択されているフォルダ名が「現在場所」ツールバーに表示されています。toolbarを複数使用する際は、toolbarにflex属性を設定し、どのツールバーに最も領域を使用するかを決定できます。この場合は、「現在場所」ツールバーが最も長くなるよう設定されています。
ツールバーを(縦ではなく)横に並べて表示する場合は、groupコンポーネント内に配置します。
|
ヒント:
|
toolbar内では、ツールバーがその親コンテナと常に同じ大きさになるように、1つのコンポーネントを拡大するよう設定できます。たとえば、File Explorerアプリケーションでは、現在の場所を表示する下側のツールバーには、選択されたフォルダを表示するコンポーネントが含まれています。このコンポーネントは、ウィンドウのサイズが変更されると拡大するように設定されており、コンポーネントとツールバーは常に親と同じ幅になります。一方、上側のツールバーのコンポーネントは拡大するように設定されていないため、ウィンドウがサイズ変更されてもサイズは変わりません。ウィンドウが、ツールバー内のすべてのコンポーネントを表示できないようなサイズに変更された場合、図14-18の右上端にある矢印カーソルで示すように、ツールバーにはオーバーフロー・アイコンが表示されます。
オーバーフロー・アイコンをクリックすると、図14-19に示すように、残りのコンポーネントがポップアップ・ウィンドウに表示されます。
ツールバーでオーバーフローが発生することが予測される場合、オーバーフローで役に立つ特別なレイアウト・ロジックのあるtoolboxにラップすることをお薦めします。
ページで複数のtoolbarコンポーネントを使用する場合、またはメニュー・バーとツールバーを一緒に使用することを計画している場合は、まず、それらを表示するtoolboxコンポーネントを作成します。その後、ツールバーを作成し、最後にツールバー・ボタンを作成します。
|
ヒント: 単一のツールバーまたはメニュー・バーでレイアウト上の問題が発生した場合は、toolboxコンポーネントでラップすることを検討してください。これは、このコンポーネントで、オーバーフローやレイアウトの問題を処理できるためです。 |
ツールバーを作成および使用する手順:
複数のツールバーまたはツールバーとメニュー・バーの組合せを使用する場合は、コンポーネント・パレットの「レイアウト」パネルから「ツールボックス」コンポーネントをドラッグ・アンド・ドロップして、toolboxコンポーネントを作成します。
|
ヒント:
|
コンポーネント・パレットの「共通コンポーネント」パネルから、JSFページに「ツールバー」をドラッグ・アンド・ドロップします。toolboxコンポーネントを使用している場合は、「ツールバー」をtoolboxコンポーネントに直接の子としてドロップする必要があります。
|
ヒント: 通常はtoolboxの直接の子である子コンポーネントをiterator、switcherおよびgroupコンポーネントにラップすれば、toolboxにもこれらのコンポーネントを直接の子として使用できます。 |
ツールボックスに複数のツールバーをグループ化する場合は、各ツールバーについて、ツールバーを選択し、「外観」セクションを開き、flex属性を設定して、各ツールバーの相対サイズを決定します。flex属性の数値が大きいほど、ツールボックスが長くなります。例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により、ユーザーがオーバーフロー・リストから非表示のボタンを選択できるオーバーフロー・アイコンが自動的にレンダリングされます。
ツールバーは、印刷可能ページにはレンダリングされません。
