この演習を始める前に、演習 3.1: 必須リソースのインポートを完了する必要があります。
タブ・パネル・コンポーネントは、ブラウザーでいくつかの重要なクライアント・サイド・イベントをサポートするために、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: ツリー・コンポーネントの追加を開始する準備ができました。