演習 3.2: タブ・パネル・コンポーネントの追加

この演習を始める前に、演習 3.1: 必須リソースのインポートを完了する必要があります。

タブ・パネル・コンポーネントの挿入と構成

  1. タブ・パネル・コンポーネントを挿入します。
    1. tutorial.jsp ファイルが開いていることを確認します。
    2. パレットで、Faces コンポーネント・ドロワーをクリックして開きます。
    3. Tabbed Panel コンポーネントをドラッグし、設計ビューの任意の位置にドロップします。
  2. タブ・パネル・コンポーネントのプロパティーを構成します。
    1. タブ・パネルの「幅 (Width)」および「高さ (Height)」を、それぞれ 700 ピクセルと 250 ピクセルに設定します。
    2. 「プロパティー」ウィンドウの左側で、「パネル・リスト (Panel List)」を選択します。 すべてのパネルで「「終了」ボタンの表示 (Show Finish Btn)」プロパティーが「はい (true)」になっていることを確認します (「パネル・リスト (Panel List)」ウィンドウを使用して、新規パネルの追加、既存のパネルの移動やカスタマイズを行うこともできます)。
    3. このチュートリアルの表示には 3 つのパネルが必要なので、「パネルの追加 (Add Panel)」をクリックします。
    4. 各パネルのラベルをカスタマイズします。 最初のパネルには DataGrid、2 番目のパネルには Tree、3 番目のパネルには Graph と入力します。
    このチュートリアルで変更するプロパティーの設定はこれだけですが、タブ・パネル・コンポーネントで使用可能なプロパティー設定が他にもいくつかあります。例えば、次のようになります。
  3. データ・グリッド・パネルを選択します。 データ・グリッド・コンポーネントをデータ・グリッド・パネルにドラッグします。
設計ビューのタブ・パネル

イベント・ハンドラーの管理

タブ・パネル・コンポーネントは、ブラウザーでいくつかの重要なクライアント・サイド・イベントをサポートするために、JavaScript を使用します。 タブ・パネルを選択する (タブ・エリアの選択による) と、クイック編集ビューに以下のイベントが表示されます。

イベント

説明

onpanelenter

このイベントは、タブ・パネル・コントロール内のいずれかのパネルに入るとコールされます。 ページ開発者はこれにより、そのイベントに任意のビジネス・ロジックを追加したり、ユーザーによって入力された情報を検査したり、そのパネルに表示する情報を準備したりできます。

onpanelexit

このイベントは、タブ・パネル・コントロール内のいずれかのパネルから出るとコールされます。 ページ開発者はこれにより、そのイベントに任意のビジネス・ロジックを追加したり、ユーザーによって入力された情報を検査してパネルから離れるのを拒否したり、次のパネルへのフローをコントロールしたりできます。 このイベントは、(タブの代わりに「次へ (Next)」や「前へ (Previous)」ボタンを使用して) タブ・パネルをウィザード・モードで使用する場合に複雑なフローを生成することができるため、非常に重要です。

oninitialpanelshow

このイベントは、タブ・パネル・コントロールが UI に最初に表示されるとコールされます。

onfinish

このイベントは、「終了 (Finish)」ボタンが使用可能になっている場合に、それがユーザーによって押されるとコールされます。 ページ開発者はこれにより、ユーザーによって入力された情報を検査するなど、そのイベントにビジネス・ロジックを追加することができます。

oncancel

このイベントは、「取消 (Cancel)」ボタンが押されるとコールされます。

OnCancel および OnFinish イベントでは、タブ・パネルが実行されるかキャンセルされるかを検査するロジックを組み込むだけにして、適切なアクションをとる必要があります。 これらのハンドラーからフォームを実行してはなりません。これはフレームワークが自動的に行います。

任意のパネル内のブランク・スペースをクリックした場合のイベントには、次のものがあります。

イベント

説明

onenter

このイベントは、選択されたパネルに入るとコールされます。 このイベントはグローバル onpanelenter イベントとまったく同じ動作をしますが、任意のパネルに固有な点だけが異なり、開発者はそのパネルに固有のロジックを指定することができます。

onexit

このイベントは、選択されたパネルから出るとコールされます。 このイベントはグローバル onpanelexit イベントとまったく同じ動作をしますが、任意のパネルに固有な点だけが異なり、開発者はそのパネルに固有のロジックを指定することができます。

ハンドラーが任意のパネルに対してローカルに指定され、グローバル・イベントのハンドラーもある場合には、固有のハンドラーが先にコールされます。 それが OnExit に非ヌル値を戻すか、OnEnter に真を戻すと、グローバル・ハンドラーがコールされます。

ヒント: クイック編集ビューでイベントを選択し、コード・パネルでクリックすると、そのイベントの目的、そのパラメーター、および予期される戻りの型と値を説明するコメントが表示されます。

スタイルの編集

タブ・パネルのルック・アンド・フィールをカスタマイズする必要がある場合は、tabpanel.css というデフォルトの CSS (Cascading Style Sheet) を編集してください。 このファイルは、プロジェクト・ナビゲーターのプロジェクトで /WebContent/theme/tabtree.css にあります。

これで、演習 3.3: ツリー・コンポーネントの追加を開始する準備ができました。

フィードバック
(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved. (C) Copyright IBM Japan 2005