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