| Oracle® Fusion Middleware Oracle JDeveloperユーザーズ・ガイド 11gリリース2(11.1.2.3.0) B66717-03 |
|
 前 |
 次 |
この章では、Oracle JDeveloperに含まれる最新のツールとテクノロジを利用してHTML、JSPおよびJSF/Faceletsを使用してJava EEアプリケーションのユーザー・インタフェースおよびビジネス・サービスを構築する方法について説明します。
この章では、次の項目について説明します。
Oracle JDeveloperには、Java EEアプリケーションのフロントエンドまたはビュー・レイヤーを開発するための各種ツールが用意されています。すべてのHTMLページ、JSPページ、JSF/Faceletsページおよび関連ファイルを作成するための便利なウィザードもあります。ウィザードを使用してWebページを作成すると、構成ファイル、Beanマッピング、タグ・ライブラリおよびJARファイルが自動的に設定され、編集可能になります。
Webツールの中心には、ソース・エディタやビジュアル・エディタの他、ページとページ内の要素および関連プロパティ(ビジネス・サービスやローカライゼーション・コンポーネントを含む)を追加したり編集するために統合されたコンポーネント・ツールおよびプロパティ・ツールがあります。スタイルシートとタグ・ライブラリを作成および変更したり、コード・インサイトのコードとタグの補完ツールを使用してHTML、JSPおよびJSF/FaceletsまたはJavaソース・ファイルを効率的にコーディングできます。
この章では、Webページ・ツールについて説明するとともに、アプリケーションのWebページを開発するために使用する多くのタスクについて段階的に説明します。
ソース・エディタは、ほとんどのWebページを対象とした基本的なコード・エディタです。ソース・エディタを使用して、非ビジュアル・コンポーネントおよびカスタム・コーディングを追加します。また、ソース・エディタとともにビジュアル・エディタを使用すると、コンポーネントに接続し、ページを視覚的に変更できます。ソース・エディタを使用する場合、コーディング・タスクをより迅速かつ簡単にするための機能が多数用意されています。図11-3は、JSFページ用のソース・エディタを示しています。
表11-1に、ソース・エディタの主な機能をリストします。
表11-1 ソース・エディタの主な機能
| 機能 | 説明 |
|---|---|
|
タグのクイック・ドキュメント |
コーディング中にタグ定義を表示します。タグ上にカーソルを置いて[Ctrl]+[D]を押します。タグ定義の詳細が表示された小さいウィンドウがエディタの上部に表示されます。エディタで「戻る」をクリックすると、ウィンドウが閉じます。また、右クリックして「クイックTagDoc」を選択することもできます。 |
|
コード・テンプレート |
コードを手動で入力するのではなく、事前に作成されたコードをソース・ファイルに挿入することにより、時間を節約します。テンプレートでは、挿入したコードが前後のコードに合せて適切に変更されます。ショートカットを使用すると、必要なテンプレートをより迅速に選択できます。 テンプレートの詳細は、第3.8.3項「ソース・エディタのコード・テンプレートをカスタマイズする方法」を参照してください。 |
|
コード・インサイト |
要素オプションとパラメータ・オプションを表示およびフィルタし、コード補完を取得します。ソース・エディタには、タグ、属性名と属性値、および埋込みCSSおよびJavaScriptコード用のコード・インサイトが用意されています。 |
|
マネージドBeanへのジャンプ |
WebページのソースからマネージドBeanのコードに迅速にジャンプします。ソース・エディタまたは「構造」ウィンドウで右クリックして「移動先」を選択し、このページから参照されるすべてのBeanのリストから選択肢を選択します。 |
|
エディタの分割 |
スプリッタを使用してコード表示とビジュアル表示を切り替えます。ファイルを水平方向に分割するには、垂直スクロール・バーのすぐ上(ウィンドウの右上隅)でスプリッタをクリックし、下にドラッグします。ファイルを垂直方向に分割するには、水平スクロール・バーのすぐ右(ウィンドウの右下隅)でスプリッタをクリックし、左にドラッグします。 |
JSP/HTMLビジュアル・エディタは、JSP、JSF、FaceletsおよびHTMLページを含むすべてのWebページをWYSIWYG編集するために使用できます。ビジュアル・エディタは、図11-2に示すように、コンポーネントをページにドラッグ・アンド・ドロップできるコンポーネント・パレットとともに表示されます。
ビジュアル・エディタを使用して、次のタスクを実行します。
ビジュアルおよび非ビジュアルなページ要素の挿入。
Cascading Style Sheetの適用およびテキスト・スタイルの変更。
ページ要素の移動およびサイズ変更。
表およびフォームの設計。
Webページ要素属性の変更。
モバイル対応JSPドキュメントの参照デバイスの選択。
JavaScript要素などの動的コンテンツを除き、ビジュアル・エディタにはすべてのWebページ要素がビジュアルに表示されるか、または構造的に表現されます。JSTLなどのJSPタグやBC4Jタグは、アイコン名とタグ名を使用してビジュアルにビジュアル・エディタに表示されます。一方、HTMLテンプレートのコンテンツはブラウザでの見た目どおりにレンダリングされます。画面を前後に切り替えたり分割することにより、デザイン時にソース・エディタを表示できます。
ビジュアル・エディタは、Javaソース・エディタ、「構造」ウィンドウ、コンポーネント・パレット、プロパティ・インスペクタおよびデータ・バインディング・パレットと統合されており、単純なドラッグ・アンド・ドロップ操作を使用した、データバインドWebページのアセンブリをサポートしています。各種ツール間で移動することにより、全般的に反映された変更を即座に表示または編集できます。
ビジュアル・エディタの主な機能は、次のとおりです。
ファイルをビジュアル・エディタで開くと、Webブラウザと同様に、ページはHTMLでレンダリングされ、Webフォーマットに関連付けられます。編集結果は即座に表示されます。
ビジュアル・エディタ・ウィンドウの下部に表示されるブレッドクラムを使用して、ネストしたコンポーネントを時系列で表示し、選択します。ページの要素を選択すると、プロパティ・インスペクタで要素の属性が開き、編集可能になります。
「構造」ウィンドウでデータの構造を表示します。構造内のダイアグラム、ナビゲータ、エディタとビューア、およびプロパティ・インスペクタのウィンドウのうちアクティブなウィンドウ内で現在選択されているドキュメント内のデータを表示できます。詳細は、第3.11.6項「「構造」ウィンドウ」を参照してください。
コンポーネント・パレットのタグ・ライブラリ・ページには、状況に応じてページに挿入可能なコンポーネントが表示されます。
ビジュアル・エディタ内の任意の場所を右クリックすると、コマンドのポップアップ・メニューが表示されます。
ビジュアル・エディタのウィンドウの上部にツールバーがあり、このツールバーには、Webページ上のフォントおよびパラグラフをフォーマット設定するための一般的なツールバー・アイコンが含まれます。また、図11-3に示すように、「現在のモニター解像度と一致させる」ドロップダウン・ツールを使用してビジュアル・エディタのウィンドウを目的の解像度に設定することもできます。
「現在のモニター解像度と一致させる」ドロップダウン・リストを使用して、ビジュアル・エディタ・ウィンドウでより大きいまたはより小さいページ・ピクチャを選択します。モニター解像度を変更しても、実際のページ・サイズやブラウザ・サイズには影響せず、この編集ウィンドウ内の表示サイズのみが変更されます。デフォルトでは、ビジュアル・エディタ・ウィンドウは、使用しているモニターと同じ解像度でプレビューするよう設定されています。ビジュアル・エディタの現在のサイズに合うよう設定することもできます。
表11-2に示すように、別の編集ツールや編集機能も用意されています。
表11-2 ビジュアル・エディタのツールバー・アイコン機能
| アイコン | 名前 | 説明 |
|---|---|---|
 |
リフレッシュ |
2種類のリフレッシュのタイプから選択できます。「リフレッシュ」ボタンのドロップダウン・メニューを使用します。 「ページのリフレッシュ」は、ページの内部データ構造を再構築し、再度レンダリングします。このツールはインクルードされたページ(ページ・テンプレートなど)が変更され、このインクルードされたページでの効果を確認したい場合に使用します。 「完全リフレッシュ」を使用して、ページ・プロジェクトの内部デザインタイムを完全に再起動します。このとき、web.xmlのサーブレット・コンテキストとタグ・ライブラリが、またFacesプロジェクトの場合はfaces-config.xmlからのFacesコンテキストが再構築されます。「完全リフレッシュ」によって、アクティブなページの内部データ構造が再構築され、再度レンダリングされます。 |
 |
コンポーネント・ステータスの表示 |
|
|
|
ブラウザでプレビュー |
Webページがデフォルトのブラウザでどのように表示されるかを確認できます。アイコンをクリックするか、[Shift]キーを押しながら[F10]キーを押して[V]キーを選択します。 |
表11-3に、Webページの編集時に簡単なキーストローク・コマンドで使用可能な機能を示します。
表11-3 ビジュアル・エディタの主なコマンド機能
| 機能 | 説明 |
|---|---|
|
行コメントの設定 |
選択したブロックの各行の先頭にあるコメント・マーカーを追加または削除します。単一行を選択してこの行のみをコメント化または非コメント化します。 |
|
ブレッドクラム |
ビジュアル・エディタ・ウィンドウの下部に表示されるブレッドクラムを使用して、ネストしたコンポーネントを時系列で表示し、選択します。 |
|
コンポーネントの選択 |
カーソルをページのコンポーネント上に置くと、このコンポーネントのアウトラインがオレンジでハイライト表示されます。 |
|
コンテナの編集 |
「構造」ウィンドウまたはビジュアル・エディタ・ウィンドウで、コンテナを選択します。コンテナを右クリックして、「このコンテナの設計」を選択します。このコンテナは編集するウィンドウで選択されます。この機能を使用すると、選択したコンテナ内の個々のコンポーネントの表示と編集が簡単になります。 |
|
ビジュアルEL式の表示プリファレンス |
表示のために式を解決するかどうか、および解決されない式の表示方法を選択します。「表示」ツールバー機能を選択してELレンダリングのプリファレンスを選択します。または、「ツール」→「プリファレンス」→「JSP/HTMLビジュアル・エディタ」を選択することもできます。 |
|
式ビルダーとテキスト・ポップアップ |
コンポーネントを選択します。ゆっくりダブルクリックするか、または[F1]を押してポップアップ・ウィンドウを表示します。この値フィールドで式またはテキストを編集します。 |
|
対応する要素の表示 |
ページ要素が「構造」ウィンドウに階層状に表示されます。「構造」ウィンドウでノードをダブルクリックすると、フォーカスが「プロパティ・インスペクタ」に移ります。 |
|
ビジュアル・エディタとコード・エディタの分割 |
ビジュアル・エディタとソース・エディタを使用してファイルを同時に編集します。同時に編集するには、2つのエディタの一方でページを開き、分割線を使用して他方のエディタでもう1つのページ・ビューを開きます。 ファイルを水平方向に分割するには、垂直スクロール・バーのすぐ上(ウィンドウの右上隅)でスプリッタをクリックし、下にドラッグします。 ファイルを垂直方向に分割するには、水平スクロール・バーのすぐ右(ウィンドウの右下隅)でスプリッタをクリックし、左にドラッグします。 |
|
簡易編集フォーカス |
デフォルトでは、新しいJSPページまたはHTMLページはフォーカスのあるビジュアル・エディタで開かれます。「アプリケーション・ナビゲータ」でノードをダブルクリックすると、デフォルトのエディタが開かれるか、前面に表示されます。 現在作業しているファイルに対応するノードをアプリケーション・ナビゲータで検索するには、右クリックして「ナビゲータ内で選択」を選択します。または、キーボード・ショートカット(デフォルトのキーマップでは[Alt]+[Home])を使用します。 |
|
タグ表示 |
ボディ・コンテンツが埋め込まれたタグのスコープは、影付きの四角形で囲まれたタグのアイコンと名前によって構造的に表現されます。タグ・コンテナはネストされて(構造的に)表示され、たとえば表内の繰り返し行などを表します。タグをクリックするとカーソルが現れ、タグ・コンテナにコンテンツを入力できます。 |
|
HTML/JSPファイルからCSSファイルへのCSSコードの抽出 |
HTML/JSPファイルから新規CSSファイルにCSSブロックを抽出すると、すべての参照が自動的に更新されます。このオプションは、コード・エディタおよび「構造」ウィンドウから使用できます。 |
|
HTMLファイルにリンクしたスタイルシート |
|
|
モバイル・デバイスの表示 |
モバイル対応JSPドキュメントの場合、選択したデバイス・カテゴリのビュー・ポートが設計ビューでエミュレートされます。ツールバーには、デバイス・カテゴリ・アイコンが参照デバイス・ドロップダウン・リストとともに表示されます。 |
ビジュアル・エディタまたは「構造」ウィンドウでの作業中に使用できるもう1つの機能は、他の要素を含むかネストしているJSPおよびHTMLページ要素を展開または縮小できる機能です。これを行うには、マイナス(-)およびプラス(+)記号を使用して親のコンテナ要素を展開および縮小します。
たとえば、JSPコンテナ・タグはビジュアル・エディタではネストされた長方形として表示されます。<c:when>タグと<c:otherwise>タグを含むJSP<c:choose>タグを展開すると、図11-4のように表示されます。
「構造」ウィンドウでは、たとえば複数の行からなるHTML表を縮小すると、図11-5のように表示されます。
コンテナ要素を縮小するには、次のようにします。
次のいずれか1つを実行します。
コンテナ要素のプラス(+)記号をクリックします。
コンテナ要素を右クリックし、ポップアップ・メニューから「タグを拡張」を選択します。
ビジュアル・エディタで、デフォルトの環境設定をカスタマイズできる内容は次のとおりです。
テキストの前景色/背景色、要素/タグの輪郭色、およびカレットの色
ビジュアル・エディタと「構造」ウィンドウまたはソース・エディタの同期化
エラーと警告の表示
タグ名の表示
ビジュアル・エディタの一般環境設定を変更するには、次のようにします。
メイン・メニューから、「ツール」→「プリファレンス」を選択します。
「設定」ダイアログで、「JSP/HTMLビジュアル・エディタ」ノードを選択します。
オプションを選択し、フィールドを希望する内容に設定します。
「OK」をクリックします。
次にあげる非表示要素の表示方法をカスタマイズできます。
HTML名前付きアンカー、スクリプト・タグおよび改行
JSPタグ・ライブラリ・ディレクティブおよびBeanタグ
ビジュアル・エディタでの非表示要素の表示方法を変更するには、次のようにします。
メイン・メニューから、「ツール」→「プリファレンス」を選択します。
「プリファレンス」ダイアログで、「JSP/HTMLビジュアル・エディタ」ノードを開いて「非表示要素」ページを選択します。
オプションを選択し、「OK」をクリックします。プリファレンスを設定した後、ビジュアル・エディタでの作業中に非表示要素の表示を切り替えるには、メイン・メニューに移動して「設計」→「表示」を選択し、「非表示HTML要素」または「非表示JSP要素」を選択します。
ランタイム視覚化のより正確な状態を確認するには、設計時のページ・コンテキストで使用可能なシミュレートされたJSP/サーブレット・コンテナでタグ・ライブラリを実行します。
JSPタグ・ライブラリが設計時に実行されるように設定するには、次のようにします。
メイン・メニューから「ツール」→「ライブラリの管理」を選択します。
「ライブラリの管理」ダイアログの「JSPタグ・ライブラリ」を選択します。
タグを選択し、「JSPビジュアル・エディタでのタグの実行」を選択します。
「OK」をクリックします。
特定のプロジェクトに対してこのオプションを設定するには、次のようにします。
アプリケーション・ナビゲータで、プロジェクトをダブルクリックします。
「JSPタグ・ライブラリ」を選択します。
「JSPビジュアル・エディタでのタグの実行」を選択します。
JSPタグを名前のみで表示するには、埋め込まれたEL構文を省略します。このオプションを選択すると、たとえば、<c:out value="$\{Row.Deptno\}"></c:out>は$\{Row.Deptno\}ではなく単純にoutと表示されます。
JSPタグを名前のみで表示するには、次のようにします。
メイン・メニューから、「ツール」→「プリファレンス」を選択します。
「JSP/HTMLビジュアル・エディタ」を選択します。
「JSPタグ名のみ表示」チェック・ボックスを選択します。このチェック・ボックスは、デフォルトでは選択が解除されています。
JDeveloperのキーボードまたはマウスを使用して、任意の開発タスクにナビゲートできます。デフォルトのキーマップをカスタマイズし、さらにそれぞれのキーマップで、アクセラレータの割当てを指定することもできます。
キーマップ・アクセラレータをカスタマイズするには、次のようにします。
メイン・メニューから、「ツール」→「プリファレンス」を選択します。
「プリファレンス」ダイアログで、「アクセラレータ」を選択します。
初期設定キーマップを選択し、アクセラレータに変更を加えます。
「OK」をクリックします。
管理対象の単独の要素の選択、表などの子要素も含むコンテナ要素の選択、または複数の要素の選択が可能です。選択内容は点線で囲まれます。構造ウィンドウでは、選択した要素はハイライト表示されます。
要素を選択するには、次のようにします。
ビジュアル・エディタまたは「構造」ウィンドウで、要素上にポインタ・カーソルを置きます。
要素をクリックします。子要素のある要素を選択すると、子要素もすべて選択されます。コンテナ要素をコピー、移動または削除すると、子要素も一緒にコピー、移動または削除されます。
または
要素を右クリックします。要素を右クリックして選択すると、ポップアップ・メニューにオプションが表示されます。たとえば、ページの「ソース」ビューで要素に対応するコードを選択するには、要素を右クリックして「ソースへ移動」を選択します。
|
注意: 要素をダブルクリックすると、そのタグ用のエディタ・ダイアログが表示されます。 |
テキストを選択するには、次のようにします。
ビジュアル・エディタで開いているWebページで、次のいずれかの操作を行います。
ダブルクリックして単語を選択します。
単語を3回クリックし、その単語を含むテキスト文字列全体を選択します。
希望するテキスト範囲をカーソルでドラッグして選択します。
選択の開始地点をクリックして終了地点までスクロールし、[Shift]を押しながら終了地点をクリックします。
複数の要素を選択するには、次のようにします。
ビジュアル・エディタまたは「構造」ウィンドウで、開いているWebページの要素上にポインタ・カーソルを置きます。
最初の要素をクリックします。
[Ctrl]キーを押したままの状態にします。
その他の要素をクリックします。他の要素を選択したままで1つの要素のみを選択解除するには、[Ctrl]キーを押したまま選択解除する要素を再度クリックします。削除以外の目的で隣接しない複数の要素を選択した場合、予想外の結果になることがあります。たとえばWeb階層の異なるレベルにある要素を選択し、ページ内の別の場所に移動またはコピーした場合、要素間の相対的な位置関係が失われることがあります。
隣接する要素をまとめて選択するには、次のようにします。
ビジュアル・エディタまたは「構造」ウィンドウで、最初の要素上にポインタ・カーソルを置きます。
要素をクリックします。
選択範囲の最後までスクロールし、[Shift]を押しながらクリックします。
|
ヒント: JSPタグ・ライブラリでは、ある要素上にマウス・ポインタを動かすとタグ名がツールチップに表示され、要素を選択する際にクリックする場所の目印となります。 別の要素に含まれる要素のコンテナ要素を選択するには、 ビジュアル・エディタで選択した要素は構造ウィンドウでも選択され、その逆も同様です。選択している要素と挿入ポイントを両方のツールで確認できます。 |
ページ要素を挿入、コピーまたは移動する際は、ビジュアル・エディタまたは「構造」ウィンドウで、ターゲットとなるページ要素を基準にページ上の挿入ポイントを選択します。JDeveloperには、ターゲット要素の前、後あるいは内部に含まれる挿入ポイントを探す視覚的な合図があります。
ビジュアル・エディタで挿入ポイントを選択するには、次のようにします。
JSPまたはHTML要素を挿入ポイントまでドラッグする場合は、希望する位置に縦線(|)が表示されるまでドラッグしてからマウスのボタンを放します。
クリックして挿入ポイントを選択する場合は、次のどちらかの操作を行います。
ページ上の希望する場所を選択します。選択した位置にはカーソルが点滅して表示されます。
挿入する要素を含むコンテナとなる要素を選択します。コンテナ要素が点線で表示されます。
|
注意: 要素を選択した状態でクリップボードから別の要素をコピーすると、選択されていた要素は新しい要素で置き換えられます。 |
構造ウィンドウで挿入ポイントを選択するには、次のようにします。
Webページ要素を挿入ポイントにドラッグする場合は、次のいずれかの操作を行います。
ターゲット要素の前に挿入する場合は、その要素の上部にドラッグし、中央に上向きの矢印のある横線が表示された後、マウスのボタンを放します。
ターゲット要素の後ろに挿入する場合は、その要素の下部にドラッグし、中央に下向きの矢印のある横線が表示された後、マウスのボタンを放します。
挿入する要素がターゲット要素に含まれるようにするには、要素の上にドラッグし、要素がボックスで囲まれた時点でマウスのボタンを放します。挿入する要素をターゲット要素に含めることができない場合、その要素はターゲット要素の後に挿入されます。
クリックしてターゲット位置を選択する場合には、ターゲット要素を選択します。
|
注意: ドラッグ中にカーソルが通行止め(円に斜めの線)の記号に変わる場所には、要素を挿入できません。 |
UIおよびデータ要素をWebページに追加するには、コンポーネント・パレットを使用します。ページ要素は、ビジュアル・エディタまたは「構造」ウィンドウで挿入できます。挿入ポイントを選択すると、もう一方のエディタでも選択されるため、挿入位置を視覚的にも階層的にも確認できます。
詳細は、第11.1.4項「コンポーネント・パレットの使用方法」を参照してください。
ページ要素を挿入するには、次のようにします。
ページを開いた状態で、ドロップダウン・リストからコンポーネント・パレットのパッケージまたはページを選択します。コンポーネント・パレットの内容は状況に応じて変化し、アクティブなファイルに関連するオプションのみが表示されます。
次のいずれか1つを実行します。
ビジュアル・エディタまたは「構造」ウィンドウで、ページのどの場所に要素を配置するか(挿入ポイント)を選択し、パレットで要素をクリックします。
要素をパレットからページ上の目的の挿入ポイントまでドラッグします。
要素のタイプによっては挿入ダイアログが表示され、ファイルの選択や挿入、またはタグ属性の入力を求められます。
ページ要素を挿入すると、その要素に対するソース・コードが自動的に生成されます。要素を削除すると、コード内の該当する行も削除されます。
プロパティ・インスペクタには、ビジュアル・エディタまたは「構造」ウィンドウで選択されているWebページ要素のプロパティが表示されます。プロパティ・インスペクタでは、Webページ内の要素に対するプロパティを設定または変更します。設定済のプロパティ値には緑色のボックスが表示されます。変更を元に戻すには、メイン・メニューから「編集」→「操作を戻す」を選択します。デフォルト値のあるプロパティをデフォルトにリセットするには、「デフォルトに設定」ボタンを使用します。
詳細は、第11.1.3項「プロパティ・インスペクタの使用方法」を参照してください。
要素のプロパティを設定するには、次のようにします。
Webページが開いた状態で、ビジュアル・エディタまたは「構造」ウィンドウで要素を選択します。選択した要素のプロパティ値が「プロパティ・インスペクタ」に表示されます。プロパティ・インスペクタが表示されていない場合は、「表示」→「プロパティ・インスペクタ」を選択するか、ショートカット([Ctrl]+[Shift]+[I])を使用します。
設定するプロパティが表示されるまでスクロールし、マウスまたは矢印キーでそれを選択します。プロパティ・インスペクタの下部にプロパティの簡単な説明が表示されます。
|
注意: プロパティ・インスペクタの上部にある「検索」ボックスを使用してプロパティを検索することもできます。 |
右側の列に、次のいずれかの方法でプロパティ値を入力します。
テキスト・フィールドには、そのプロパティに対する文字列値(テキスト値や数値など)を入力し、[Enter]を押します。
値フィールドに下向きの矢印が表示されている場合、矢印をクリックし、リストから値を選択して[Enter]を押します。
値フィールドに省略記号(...)が表示されている場合、これをクリックしてそのプロパティ用のエディタ(色またはフォント選択ダイアログなど)を表示します。プロパティ・エディタで値を設定し、「OK」をクリックします。
要素のプロパティを設定または変更するためのエディタを表示するには、次のようにします。
要素をダブルクリックします。
データ・コントロール・パレットでデータバインドされたUIコンポーネントを作成するかわりに、ビジュアル・エディタで表示するUIコンポーネントにADFバインディングを設定できます。
プロパティ・インスペクタでは、要素プロパティのデータソースを設定または削除します。「値バインディング」ダイアログで、オブジェクトで定義されるデータソース、またはEL式に指定するアプリケーションのADFバインディング・コンテキストを選択できます。ADFバインディングをデータソースとして指定するには、事前にバインディングを作成しておく必要があります。
要素のプロパティをデータ・バインドするには、次のようにします。
JSPページが開いた状態で、ビジュアル・エディタまたは「構造」ウィンドウで要素を選択します。
データソースを指定するプロパティが表示されるまでスクロールし、マウスまたは矢印キーで選択します。
「データにバインド」ボタンをクリックします。プロパティ値のフィールドにEL式が表示され、省略記号ボタンが使用できるようになります。
省略記号(...)ボタンをクリックして「値バインディング」ダイアログを表示し、データソースを選択します。
「OK」をクリックします。
|
ヒント: JSP要素のプロパティからデータソースを削除するには、「データにバインド」ボタンの選択を解除します。 |
複数の要素を選択している場合、デフォルトでは選択中の要素のプロパティがすべてプロパティ・インスペクタに表示されます。プロパティ・インスペクタ・ツールバーの「統合して表示」をクリックすると、選択した複数の要素のプロパティをすべて表示するか(統合)、選択した要素に共通のプロパティのみを表示するか(共通部分)を切り替えられます。イタリック・フォントで表示されている値は、共通のプロパティに異なる値が設定されていることを示します。
複数の要素にプロパティを設定するには、次のようにします。
次のいずれか1つを実行します。
[Ctrl]キーを押しながら各要素を選択します。
プロパティ・インスペクタで表示されるプロパティのリストを変更するには、プロパティ・インスペクタ・ツールバーの「統合して表示」ボタンをクリックします。
プロパティ・インスペクタで、必要なプロパティを選択して編集します。値がイタリック・フォントで表示されている場合、選択中の要素によって値が異なります。共有プロパティの値を編集すると、選択したすべての要素が同じ値になります。
ビジュアル・エディタまたは「構造」ウィンドウでWebページ要素の切取り、コピーおよび貼付けを行います。これらの操作を、同じプロジェクトまたは異なるプロジェクトのファイル間で実行できます。
1つ以上の要素を切り取るには、次のようにします。
ビジュアル・エディタまたは「構造」ウィンドウで、切り取るページ要素を選択します。
[Ctrl]を押しながら[X]を押します。右クリックして「切取り」を選択します。メイン・メニューから、「編集」→「切取り」を選択することもできます。
要素はエディタから削除され、(システム・クリップボードではなく)JDeveloperからのみアクセス可能なローカル・クリップボードに置かれます。要素を貼り付けずにJDeveloperを終了した場合、切り取った要素は失われます。
切取りコマンドは、切取り/貼付け操作の最初のステップです。要素を削除することもできます。要素を削除すると、クリップボードの内容は変更されずに要素が削除されます。
Webページ要素を削除するには、次のようにします。
ビジュアル・エディタまたは「構造」ウィンドウで、削除するページ要素を1つ以上選択します。
[Del]または[Back Space]を押します。右クリックして「削除」を選択することも、メイン・メニューから「編集」→「削除」を選択することもできます。選択した要素に組み込まれた要素がある場合、その要素を削除すると組み込まれている要素もすべて削除されます。
1つ以上の要素をコピーするには、次のようにします。
ビジュアル・エディタまたは「構造」ウィンドウで、コピーするページ要素を選択します。
[Ctrl]を押しながら[C]を押します。右クリックして「コピー」を選択することも、メイン・メニューから「編集」→「コピー」を選択することもできます。
ビジュアル・エディタでは、次の方法でもコピーできます。
要素を右クリックして挿入ポイントまでドラッグし、マウスを放してポップアップ・メニューから「ここにコピー」を選択します。
[Ctrl]を押しながら選択した要素のコピーをページ上の挿入ポイントまでドラッグします。
要素を貼り付けるには、次のようにします。
ビジュアル・エディタまたは「構造」ウィンドウで要素を貼り付けるファイルを選択します。
要素を貼り付ける挿入ポイントを選択します。
[Ctrl]を押しながら[V]を押します。また、右クリックして「貼付け」を選択するか、「編集」→「貼付け」を選択することもできます。
Webページ要素を移動するには、次のようにします。
ビジュアル・エディタまたは構造ウィンドウで、元の位置から挿入ポイントまで要素をドラッグします。
ビジュアル・エディタまたは「構造」ウィンドウで、元の位置から挿入ポイントまで要素を右クリックでドラッグし、ポップアップ・メニューから「ここに移動」を選択します。
HTMLページ要素のサイズを変更するには、次のようにします。
プロパティ・インスペクタでスタイル・サイズに移動し、サイズのプリファレンスを選択するか、ページの100パーセント幅であるデフォルトに戻ります。
要素をダブルクリックし、エディタ・ダイアログでサイズのプロパティを設定し、「OK」をクリックします。また、要素を右クリックして「タグの編集」を選択し、エディタ・ダイアログでサイズのプロパティを設定して「OK」をクリックするか、要素を選択し、プロパティ・インスペクタでサイズのプロパティを設定することもできます。
JSFアプリケーションでは、dataTableタグを使用してデータ表を表示します。データ表の作成ウィザードを使用して、JSFページにタグを挿入します。このウィザードでは、基本的な書式設定も提供されます。表を作成した後は、属性値を設定または変更して、表をさらに編集できます。また、列を追加または削除したり、列にコンポーネントまたはオブジェクトを追加することもできます。
データ表を作成および編集する手順は、次のとおりです。
ビジュアル・エディタでJSFページを開きます。
コンポーネント・パレットで、ドロップダウン・メニューから「JSF」を選択します。
パレットで「データ表」をダブルクリックまたはドラッグします。データ表の作成ウィザードが開きます。
ウィザードのステップに従います。
ウィザードを使用してアクセスされない属性の値を変更または設定する手順は、次のとおりです。
「構造」ウィンドウでh:dataTableコンポーネントを選択します。
プロパティ・インスペクタで、値を設定する属性の横にあるフィールドをクリックします。様々な属性に関する情報は、右クリックで表示されるポップアップ・メニューの「ヘルプ」を使用してください。
データ表の列を使用するには、次のようにします。
単一の列を追加するには、新しい列を追加する場所の横にある既存列を右クリックし、「h:columnの前に挿入」→「列」の順に選択するか、または「h:columnの後ろに挿入」→「列」の順に選択します。選択した列の前または後に列が追加されます。新規列が選択された状態になります。
|
注意: ビジュアル・エディタまたは「構造」ウィンドウでデータ表を選択することもできます。ビジュアル・エディタのドロップダウン・メニューで、「データ表の中に挿入」→「列」を選択します。 |
複数の列を追加するには、次のようにします。
新しい列を追加する場所の横にある既存列を右クリックし、「データ表」→「列の挿入」の順に選択します。
ダイアログを完了します。
列の順序を変更するには、「構造」ウィンドウまたはビジュアル・エディタで列をドラッグ・アンド・ドロップします。
コンポーネントや他のオブジェクトを列に追加するには(データを表示するためなど)、列を右クリックし、「列の中に挿入」を選択します。メニューを使用して、列内に配置するコンポーネントまたは他のオブジェクトを選択します。追加した後は、プロパティ・インスペクタを使用して、追加したコンポーネントに対する属性値を設定できます。
|
注意: ビジュアル・エディタまたは「構造」ウィンドウで列表を選択することもできます。ビジュアル・エディタのドロップダウン・メニューで、「列の中に挿入」→「出力テキスト」を選択します。 |
列を削除するには、列を右クリックして「削除」を選択します。
JSFアプリケーションでは、panelGridタグを使用してHTML表を表示します。次に、パネル・グリッド内に他のコンポーネントを配置します。JDeveloperには、グリッドの作成を簡単にするPanelGridの作成ウィザードが用意されています。グリッドを作成した後は、グリッド内のコンポーネントを追加、移動および削除することによって、グリッドをさらに編集できます。
パネル・グリッドを作成および編集する手順は、次のとおりです。
ビジュアル・エディタでJSFページを開きます。
コンポーネント・パレットで、ドロップダウン・メニューから「JSF」を選択します。
パネル・グリッドを選択します。PanelGridの作成ウィザードが開きます。
ウィザードを完了します。
ウィザードで設定した属性値を変更するには、構造ペインで「h:panelGrid」コンポーネントをダブルクリックします。プロパティ・エディタが開きます。必要に応じて値を変更します。
グリッドにコンポーネントを挿入するには、構造ペインで既存のコンポーネントを右クリックし、コンポーネントを既存のコンポーネントの前に配置するか、後に配置するかを選択します。セル内にコンポーネントをネストする必要がある場合は、最初にセル内にpanelGroupタグを配置する必要があります。その後は、panelGroupタグ内に他のコンポーネントを配置できます。パネル・グリッドに行を追加することはできません。列属性を使用して列を追加できるのみです。また、コンポーネントは、構造ウィンドウ内の表示順に、1つの行の列内に配置されます。
コンポーネントの順序を変更するには、構造ウィンドウまたはビジュアル・エディタで列をドラッグ・アンド・ドロップします。
グリッドにヘッダーまたはフッターを追加します。
グリッドまたはグリッド内のコンポーネントを削除するには、該当するコンポーネントを右クリックして「削除」を選択します。
ソース・コードは、同じプロジェクトまたは別々のプロジェクトのファイル間でコピーして貼り付けることができます。サンプル・コードとして貼り付ける場合など、解釈せずにソース・コードを貼り付ける場合は、「マークアップ挿入の確認」ダイアログで「いいえ」を選択してください。
マークアップ・コードを貼り付けるには、次のようにします。
ソース・コードをローカルのシステム・クリップボードにコピーします。
「編集」→「特殊貼付け」を選択します。
スタイル定義やブラウザ・ウィンドウのタイトルといったHTMLの<head>コンテンツは、Webページには表示されない要素です。ビジュアル・エディタでは、<head>セクションの要素を表示および編集できます。
ページの<head>セクションの要素を表示するには、次のようにします。
ビジュアル・エディタでWebページを開き、「設計」→「表示」→「HEADのコンテンツ」を選択します。<head>セクション内の各要素に対して、ページ上段のバーにアイコンが表示されます。
<head>セクション・バーから要素を選択すると、その要素に対するソース・コードがコード・エディタで選択されます。
ページの<head>セクションの要素を編集するには、次のようにします。
「設計」→「表示」→「HEADのコンテンツ」を選択し、開いているWebページに<head>セクション要素を表示します。
ビジュアル・エディタで次のいずれかの操作を行います。
<head>セクション・バーの要素をクリックして選択し、プロパティ・インスペクタでその要素のプロパティを設定または変更します。
要素を右クリックしてポップアップ・メニューから「タグの編集」を選択し、エディタのダイアログを表示します。Cascading Style Sheetを開いて編集するには、ポップアップ・メニューから「css/filename.cssを開く」を選択します。
プロパティ・インスペクタを使用して、選択したコンポーネントのプロパティを表示および編集します。
図11-6に示すように、プロパティ・インスペクタのタイトル・バーには、選択したコンポーネントの名前(フォームや本体など)が表示されます。インスペクタのメイン・エリアには、コンポーネントのプロパティとその値が表示されます。アクティブなツールで複数のコンポーネントを選択した場合、タイトル・バーに「複数」と表示され、選択したコンポーネント間で共有されるプロパティのみが表示されます。
プロパティ・インスペクタのメイン・エリアには、プロパティのグループが、開閉できる名前の付いたセクションに表示されます。
プロパティ・インスペクタでは、コンポーネントのプロパティがフィールド、ドロップダウン・リストまたはコンボ・ボックスとして表示されます。ブール・プロパティの場合、プロパティ名の前にあるチェック・ボックスを使用して現在値を示します。EL式を受け入れるブール・プロパティでは、現在値が式とtrue/falseの明示的値のどちらであるかによってフィールドまたはドロップダウン・リストが使用されます。
すべてのプロパティで、プロパティ名の横にアスタリスク(*)が表示され、このプロパティに値が必要であることを示します。プロパティの説明を表示するには、プロパティ名、フィールド、ドロップダウン・リストまたはコンボ・ボックスを右クリックし、ポップアップ・ウィンドウを表示します。プロパティの説明は、ポップアップ・ウィンドウの下部にある「プロパティ・ヘルプ」の下のスクロール可能なボックスに表示されます。ポップアップ・ウィンドウ内のヘルプ・ボックスの表示を切り替えるには、「+」(プラス)および「-」(マイナス)をクリックします。ポップアップ・ウィンドウのサイズを変更するには、ウィンドウの右下隅をドラッグします。ポップアップ・ウィンドウのサイズを変更すると、サイズを再変更するまでは、プロパティの後続のポップアップ・ウィンドウすべてに新規サイズが使用されます。
表11-4 プロパティ・インスペクタのツールバー・アイコン機能
| アイコン | 名前 | 説明 |
|---|---|---|
|
|
自動拡張の有効化/無効化 |
プロパティ・インスペクタの自動拡張をオンまたはオフに切り替えて、カーソルがインスペクタ上にあるときに全コンテンツを表示する場合に使用します。フォーカスがユーザー・インタフェースの他の部分に移動すると、インスペクタはデフォルトの位置に戻ります。 |
 |
ADFコントロールにバインド |
使用できる場合、クリックして、必要に応じてADFデータ・コントロールにプロパティをバインドまたはアンバインドします。 |
プロパティ値を編集するには、新しい値をフィールドに入力するか、またはドロップダウン・リストを使用して値の固定セットから値を選択します。プロパティ値を編集する場合、緑色のドット・アイコンがプロパティ名の横に表示され、プロパティがデフォルト設定から変更されたことを示します。プロパティ値を編集する他の方法は、次のとおりです。
一部のプロパティでは、フィールドまたはボックスの後ろにある「...」をクリックして、プロパティ・エディタまたはブラウザ・ツールを使用してプロパティに対する値を選択または入力します。
一部のプロパティでは、フィールドまたはボックスの後ろをクリックして、ポップアップ・ウィンドウを表示してコマンドを選択するか、プロパティ・エディタまたはビルダー・ツールを選択してプロパティに対する値を選択または入力します。
チェック・ボックスのあるブール・プロパティの場合、チェック・ボックスを選択または選択解除して値を変更します。
EL式の受入れが可能なブール・プロパティの場合、フィールドに式を入力するか、フィールドの後ろにある下矢印をクリックしてビルダー・ツールを使用して値を入力します。
独自のプロパティ・エディタを作成すると、プロパティ・インスペクタの表示内容を制御できます。プロパティ・エディタがタグをサポートする場合、インスペクタでは、そのタグが固定された一連の値としてドロップダウン・リストに表示されます。プロパティ・エディタがタグをサポートしない場合、インスペクタはエディタに問い合せて、カスタム・プロパティ・エディタをサポートするかどうかを確認します。どちらもサポートされない場合、直接入力するユーザーにはテキスト領域が表示されます。
コンポーネント・パレットにはコンポーネント・ライブラリの要素が表示され、ドラッグ・アンド・ドロップの単純な操作を使用してユーザー・インタフェースを構築できます。パレットで使用可能なコンポーネントは、アクティブなエディタ・ウィンドウに表示されたファイルの種類に応じて異なります。たとえば、HTMLファイルを編集している場合、図11-7に示すように、パレットには共通コンポーネントのリストが表示されます。
.javaファイルを編集している場合は、これとはまったく異なるコンポーネントが表示されます。
ファイル・コンポーネントまたは・コンポーネントは、コンポーネント・パレットでページ別に整理されます。パレット上部のドロップダウン・リストから、目的のパレット・ページを選択します。
コンポーネントをアクティブ・エディタで開いているファイルに挿入するには、コンポーネントをパレットからエディタ内の挿入先にドラッグします。一部のファイル・タイプでは、パレット内のコンポーネントをクリックしてからエディタ内をクリックして、コンポーネントを挿入します。
コンポーネント・パレットには、次の機能があります。
コンポーネントを名前で検索するには、名前または名前の一部を双眼鏡アイコン・フィールドに入力して、緑色の実行矢印をクリックします。アクティブなエディタのパレット・ページにある名前または名前の一部に一致するコンポーネントが、「検索結果」パネルに表示されます。
デフォルトで、コンポーネントはリスト・ビュー(アイコンと名前)で表示されます。アイコンのみのビューに表示を変更できます。ビューを切り替えるには、パレット内のコンポーネントを右クリックして、「アイコンで表示」または「一覧で表示」を選択します。
コンポーネント・ヘルプを利用できるコンポーネント・ライブラリでは、パレット内のコンポーネントを右クリックして「ヘルプ」を選択します。
よく使用されるコンポーネントをパレット・ページに追加して使用しやすくするには、パレット内のコンポーネントを右クリックして「お気に入りに追加」を選択します。選択したコンポーネントが「コンポーネント」パレット・ページの「お気に入り」パネルに追加され、このパレットのドロップダウン・リストから選択できるようになります。
JSPタグ・ライブラリのあるプロジェクトでは、パレット・ドロップダウン・リストで選択できるJSPタグ・ライブラリのリストを変更するには、「タグ・ライブラリの編集」を選択し、ダイアログを使用して必要に応じてタグ・ライブラリを追加または削除します。
JSF構成ファイルの概要エディタを使用して、faces-config.xmlに格納されているJSFアプリケーションの構成を視覚的に設計および編集します。図11-8に、概要エディタを示します。
faces-config.xmlを開くと、その内容がエディタ・グループに表示されます。このグループの下部にある「概要」タブを選択すると、概要エディタが表示されます。
概要エディタが開くと、現在選択されている要素のメタデータ子要素がプロパティ・インスペクタに表示されます。これらはプロパティ・インスペクタを使用して管理します。たとえば、プロパティ・インスペクタを使用して<description>および<display-name>子要素を設定します。
概要エディタには、次の3つのセクションがあります。
左側の列には、メインJSF構成要素が表示されます。
メイン・パネルの上部の領域には、左側の要素リストで選択した要素の子要素が表示されます。
メイン・パネルの下部の領域には、上部の領域で選択した要素の子要素が表示されます。
概要エディタを使用してJSF要素と子要素を追加、削除または編集できます。
メインJSF構成要素とその直下の子要素を操作する手順は、次のとおりです。
アプリケーション・ナビゲータで、JSFアプリケーションが含まれているワークスペースを開きます。
ワークスペースで、JSFページが含まれているプロジェクトを開きます。
プロジェクトで、 「WEB-INF」 ノードを開きます。
WEB-INFノードの下にあるfaces-config.xmlファイルをダブルクリックして開きます。
エディタの下部にある 「概要」 タブを選択します。
左側の要素リストから要素を選択します。対応する構成可能な子要素がメイン・パネルの上部の表に表示されます。
JSF構成要素を追加、削除または編集するには、次のようにします。
新規の子要素を追加する方法。「新規」をクリックします。ダイアログ・ボックスが開き、要素を作成できます。新しいボタンが表示されない場合、その子要素は既存のクラスです。「参照...」をクリックしてクラスを選択できます。参照ボタンが表示されない場合、またはエントリがクラス名でない場合は、値を直接入力できます。
既存の子要素を削除する方法。表から要素を選択し、「削除」をクリックします。要素が表から削除されます。削除ボタンが表示されない場合は、エントリを手動で削除できます。
既存の子要素を編集する方法。表から要素を選択し、「編集」をクリックします。その要素のプロパティのパネルが開き、値を変更できます。
子構成要素の子要素を表示、追加、削除または編集するには、次のようにします。
子要素を表示する方法。左側の要素リストから要素を選択します。メイン・パネルが表示されます。メイン・パネルの上部の表から既存の子要素を選択します。設定されている子要素がメイン・パネルの下部の表に表示されます。子要素の設定が可能であり、かつ、現在は子が定義されていない場合は、子に対するリスト領域が表示されないことがあります。リスト領域を表示して子を追加するには、領域のタイトルの左側にある表示の矢印をクリックします。リスト領域を非表示にするには、非表示の矢印をクリックします。
新規の子要素を追加する方法。「新規」をクリックします。新規ボタンが表示されない場合で、子要素が既存のクラスであるときは、「参照...」ボタンをクリックして「クラス・エディタ」ダイアログ・ボックスを開くと、クラスを選択できます。参照ボタンが表示されない場合、またはエントリがクラス名でない場合は、値を直接入力できます。
既存の子要素を編集する方法。表から選択して「編集」をクリックします。その要素のプロパティのパネルが開き、値を変更できます。編集ボタンが表示されない場合は、新規クラスを選択するか(該当する場合)、またはエントリを編集できます。既存の子要素を削除するには、表から選択して「削除」を選択します。既存の子要素を削除します。表から選択して「削除」をクリックします。要素が表から削除されます。「削除」ボタンが表示されない場合は、エントリを手動で削除できます。
JSFナビゲーション・ダイアグラマには、JSFページおよびページ間のナビゲーションのダイアグラムを作成する機能があります。
ページはアイコンで表され、ページ間のナビゲーションは線で表されます。ナビゲーションは、アプリケーションのfaces-config.xmlファイルのナビゲーション・ケースに反映されます。
JSFナビゲーション・ダイアグラムが表示されると、コンポーネント・パレットも表示されます。コンポーネント・パレットのJSFダイアグラム・オブジェクト・ページには、JSFナビゲーション・ダイアグラムで使用できる要素のエントリが表示されます。JSFダイアグラム要素をJSFナビゲーション・ダイアグラムに追加するには、追加する要素をコンポーネント・パレットから選択します。
最初にナビゲーション・ダイアグラムを表示したときに、ダイアグラムの詳細を保持したダイアグラム・ファイルが作成されます。このダイアグラム・ファイルは、アプリケーションに必要なすべての設定が保持された対応するJSF構成ファイルとともに保守されます。バージョニングやソース制御を使用している場合、ダイアグラム・ファイルもそれが表す構成ファイルと同様に含められます。
JSFアプリケーションに対するナビゲーション・ダイアグラムを表示する手順は、次のとおりです。
アプリケーション・ナビゲータで、JSFアプリケーションを開きます。
アプリケーションが含まれるプロジェクトを開きます。JSFが組み込まれたテンプレートを使用してアプリケーションを作成した場合、プロジェクト名は「ViewController」です。
プロジェクトで、WEB-INFノードを開き、JSF構成ファイルをダブルクリックして開きます。デフォルトの構成ファイル名はfaces-config.xmlです。
アプリケーションに対するナビゲーション・ダイアグラムが表示されていない場合は、ウィンドウの下にある「ダイアグラム」タブを選択します。
「カテゴリ別にグループ化」を使用してアプリケーション・ナビゲータを表示する場合(デフォルト)、JSF構成ファイルの単一のエントリが構成ファイルとその関連ダイアグラム・ファイルの両方を表します。「ディレクトリでグループ化」を使用してすべてのファイルを表示する場合、これらの2つのファイルが別々のノードとして表示されます。この場合、構成ファイルには完全ファイル名が使用され、ダイアグラム・ファイルには、JSF構成ファイルの名前に拡張子.jsf_diagramが付いた名前が使用されます。
JSF構成ファイルにまだ変更を加えていなくても、JSF構成ファイルを最初に開いたときには、変更があったことを示す状態で構成ファイル・ノードがアプリケーション・ナビゲータに表示されます。これは、アプリケーション・ナビゲータに表示されるノードでは、JSF構成ファイルとナビゲーション・ダイアグラム・ファイルの両方が表されるためです。したがって、JSF構成ファイルは変更されていませんが、ナビゲーション・ダイアグラム・ファイルが作成されています。同様に、レイアウトの変更など、JSF構成ファイルに影響を与えない変更をナビゲーション・ダイアグラムに加えた場合、アプリケーション・ナビゲータ内のノードは変更が加えられたことを示します。
大規模アプリケーションまたは複雑なアプリケーションの場合は、ファイルのサイズが大きくなる可能性があり、ロードにも時間がかかる場合があります。JSF構成ファイルに対するJSFダイアグラム・ファイルを作成する必要がない場合は、デフォルト・エディタとしてダイアグラムを使用しないことを選択できます。この場合、特に要求しないかぎり、ダイアグラム・ファイルは作成されません。
アプリケーション内のページおよびページ間のナビゲーション・ケースを表すダイアグラムを作成するには、JSFナビゲーション・ダイアグラムとコンポーネント・パレットを使用します。ダイアグラムに追加したナビゲーション・ケースは、JSF構成ファイルに自動的に追加されます。
JSFナビゲーション・ダイアグラムに要素を追加するには、次のようにします。
対象プロジェクトのJSFナビゲーション・ダイアグラムを表示します。
コンポーネント・パレットの「JSFダイアグラム・オブジェクト」の「コンポーネント」ページで、「JSFページ」を選択します。
ダイアグラムにページを追加するには、ページを表示する場所でダイアグラムをクリックするか、JSFページをダイアグラムの表面にドラッグします。ページのアイコンがページ名のラベルとともにダイアグラム上に表示されます。最初は、新規JSFページを定義するまで、図11-9に示すように、ページがまだ作成されていないことを示すアイコンが表示されます。
ページの名前を指定するには、ダイアグラムでアイコンのラベルをクリックし、ラベルを編集します。ページを実行可能にするために名前の先頭にスラッシュが必要です。ページ名を変更するときにスラッシュを削除しても、スラッシュが復元されます。
新規ページを定義するにはアイコンをダブルクリックして「JSFページの作成」ダイアログを使用します。ダイアログの使用に関するヘルプを参照するには、「ヘルプ」をクリックします。ページを作成すると、図11-10に示すように、ダイアグラム上のアイコンがページが作成されたことを示すアイコンに変わります。
変更を保存します。
JSFナビゲーション・ダイアグラムにJSFナビゲーション・ケースを追加する手順は、次のとおりです。
対象プロジェクトのJSFナビゲーション・ダイアグラムを表示します。
まだ定義していない場合は、作成するナビゲーション・ケースのリンク元の<from-view-id>およびリンク先の<to-view-id>となるJSFページを定義します。
コンポーネント・パレットの「JSFダイアグラム・オブジェクト」の「コンポーネント」ページで、「JSFナビゲーション・ケース」を選択します。
ダイアグラム上で、リンク元JSFページのアイコンをクリックし、次にリンク先JSFページのアイコンをクリックして、ナビゲーション・ケースを1つ作成します。ナビゲーション・ケースをリンク元ページとリンク先ページの間の直線で描画するには、図11-11に示すように、リンク元ページをクリックした後でリンク先ページをクリックします。
角度のある線でナビゲーション・ケースを描画する場合は、図11-12に示すように、エディタのツールバーで「ポリライン」または「直交」を選択します。
ナビゲーション・ケースはダイアグラム上に実線で表示され、ナビゲーション・ケースのラベルとしてデフォルトの<from-outcome>値が表示されます。<from-outcome>値を編集するには、ラベルをクリックして新しい値を入力します。
リンク元ページに対するナビゲーション・ルールが存在していない場合は、ナビゲーション・ルールがJSF構成ファイルに追加され、そのルールに対してナビゲーション・ケースが追加されます。
JSFナビゲーション・ダイアグラムに対する変更を保存し、JSF構成ファイルに対する変更を保存します。
JSFナビゲーション・ダイアグラムにノートを追加するには、次のようにします。
対象プロジェクトのJSFナビゲーション・ダイアグラムを表示します。
コンポーネント・パレットの「JSFダイアグラム・オブジェクト」の「ダイアグラムの注釈」ページで、「ノート」を選択します。
ダイアグラム上のノートを追加する場所をクリックします。ダイアグラム上にノートが表示され、テキストを入力できる場所にカーソルが表示されます。
テキストを入力した後、ノートの外側をクリックします。
ノート内のテキストを選択して編集するには、ノート内の任意の場所をクリックします。ノート自体を選択するには、右上隅をクリックします。テキストを編集するには、ノートの真ん中をクリックします。
JSFナビゲーション・ダイアグラムに対する変更を保存します。ノートはJSFナビゲーション・ダイアグラムにのみ表示され、JSFアプリケーション構成ファイルには表示されません。
JSFナビゲーション・ダイアグラム内の要素にノートを添付する手順は、次のとおりです。
対象プロジェクトのJSFナビゲーション・ダイアグラムを表示します。
ノートがダイアグラムに存在していない場合は、ノートを追加します。
コンポーネント・パレットの「JSFダイアグラム・オブジェクト」の「ダイアグラムの注釈」ページで、「ノートの添付」を選択します。
ダイアグラムでノートをクリックし、次にノートを添付する要素をクリックします。図11-13に示すように、点線が表示されます。この点線は選択されているページのノート添付を示しています。
JSFナビゲーション・ダイアグラムに対する変更を保存します。ノート添付はJSFナビゲーション・ダイアグラムにのみ表示され、JSF構成ファイルには表示されません。
JSFナビゲーション・ダイアグラムに自動的に要素をレイアウトするには、次のようにします。
エディタのツールバー・オプションから、希望するレイアウト・スタイルを選択します。レイアウト・スタイルのリストは、表11-5を参照してください。
変更を保存します。
JSFナビゲーション・ダイアグラムをリフレッシュして、JSF構成ファイルに対する変更を反映する手順は、次のとおりです。
「ダイアグラムのリフレッシュ」を選択します。ダイアグラムのリフレッシュ速度は、ダイアグラム内のノード数およびノード間の連結数によって異なります。
変更を保存します。
ナビゲーション・ダイアグラマを使用して、JSFページを追加、編集、名前変更および削除できます。
削除した場合
関連付けられたWebページはJSFナビゲーション・ダイアグラムに表示されなくなります。ファイルを作成している場合は、アプリケーション・ナビゲータの「ViewController」プロジェクトの下にある「Webコンテンツ」フォルダから引き続き使用可能です。
編集した場合
Webページを手動で編集すると、JDeveloperでは、JSFナビゲーション・ダイアグラムまたはJSF構成ファイルは自動的に更新されません。
名前を変更した場合
ナビゲーション・ダイアグラムでJSFページの名前を変更した場合は、元の名前のページをダイアグラムから削除し、新しい名前の新規ページを追加したことになります。そのページに下層ページがある場合は、それらのページは元の名前でファイル・システムに残ります。ダイアグラム上では、ページが存在していないことを示すアイコンでページが表されます。
作成済のJSFページがダイアグラムに表示されていて、そのページの名前をナビゲータで変更した場合も、元のファイルを削除し、新しいファイルを作成したことになります。ダイアグラムには元の名前が残り、ページが存在しないことを示すページ・アイコンが表示されます。
JSFナビゲーション・ダイアグラムでページの名前を変更すると、JSF構成ファイル上のナビゲーション・ルールとそのケースに影響します。
JSFナビゲーション・ダイアグラムからWebページを表示する手順は、次のとおりです。
表示するWebページのアイコンをダブルクリックします。適切なエディタでページが開きます。
ナビゲーション・ダイアグラマを使用して、ページ間のナビゲーション・ケースを削除します。
削除した場合
関連付けられた<navigation-case>がJSF構成ファイルから削除されます。
関連付けられたWebページはダイアグラムに引き続き表示され、ページが作成されている場合は、アプリケーション・ナビゲーションの「ViewController」プロジェクトの下にある「Webコンテンツ」フォルダから引き続き使用可能です。
編集した場合
ダイアグラムでナビゲーション・ケースのラベルを編集した場合は、関連付けられた<navigation-case>がJSF構成ファイルで更新されます。
JSFナビゲーション・ダイアグラムでナビゲーション・ケースを作成した場合、そのナビゲーション・ケースのリンク先はダイアグラムでは変更できません。ダイアグラムで既存のナビゲーション・ケースのリンク先を変更するには、既存のナビゲーション・ケースを削除し、正しいリンク先に対して新規ナビゲーション・ケースを作成します。
JSFダイアグラム・ファイルのサイズが大きく、JSFナビゲーション・ダイアグラマで開くのに時間がかかる場合は、別のエディタでJSF構成ファイルを開くかどうかを尋ねられる場合があります。
JSFナビゲーション・ダイアグラムでナビゲーション・ケースのプロパティを表示する手順は、次のとおりです。
ナビゲーション・ケースはダイアグラム上に実線で表示され、<from-outcome>要素の値がラベルとして表示されます。
プロパティ・インスペクタが表示されていない場合は、「表示」メニューから開きます。
プロパティを表示するナビゲーション・ケースを選択します。ナビゲーション・ケースのプロパティがプロパティ・インスペクタに表示されます。
ダイアグラムは、ドキュメントまたはWebページで使用するために、.jpgファイル、.pngファイル、.svgファイルまたは.svgzファイルとして保存できます。.jpg形式でイメージを保存するとファイルが最大になり、.svg形式、.png形式、.svgz形式の順に小さくなります。
ダイアグラムをグラフィックとして公開するには、次のようにします。
グラフィックとして公開するダイアグラム上を右クリックし、「ダイアグラムの公開」を選択します。
または
グラフィックとして公開するダイアグラム上をクリックし、「ダイアグラム」→「ダイアグラムの公開」を選択します。
「場所」ドロップダウン・リストを使用して、グラフィック・ファイルの宛先フォルダを選択します。
ファイル名として、ファイル拡張子を含むグラフィック・ファイル名を入力します。
ファイル・タイプのドロップダウン・リストから、グラフィック・ファイルのファイル・タイプを選択します。
「保存」をクリックします。
コード・インサイトを使用してコーディング・タスクを高速化するには、コーディング中に要素を迅速に補完および挿入するために選択できるオプションを用意します。
コード・インサイトには、構文補完インサイトおよびパラメータ・インサイトがあります。構文補完インサイトを起動するには、ピリオドを入力した後で休止するか、[Ctrl]を押しながら[Space]を押します(デフォルト・キーマップの場合)。パラメータ・インサイトを起動するには、左丸カッコを入力した後、休止するか、または[Ctrl]、[Shift]および[Space]を同時に押します(デフォルト・キーマップの場合)。いずれのタイプのインサイトも、終了する場合は[Esc]キーを押します。
ソース・エディタのWebページでコード・インサイトを使用するには、次のようにします。
「ソース」タブをクリックしてソース・エディタでそのファイルを開き、タグを追加する場所にカーソルを配置します。
左山カッコ(<)を入力し、そのまましばらく待つかまたは[Ctrl]を押しながら[Space]を押し(デフォルトのキーマッピングを使用している場合)、コード・インサイトを起動します。ファイルに基づいた有効な要素のリストが表示されます。タグの最初の文字を入力するか、またはタグ・ライブラリの接頭辞とコロン(例: <jsp:)を入力してリストの範囲を限定します。
有効なタグのリストで、タグをダブルクリックするか、タグをハイライト表示して[Enter]を押します。選択したタグがファイルに<jsp:includeのように挿入されます。接頭辞とタグ名の間にはスペースを入れないでください。
挿入したタグに属性を追加するには、タグ名の後ろにスペースを入力し、そのまましばらく待つかまたは[Ctrl]を押しながら[Space]を押して有効な属性のリストを表示します。希望する属性をダブルクリックするか、選択して[Enter]を押します。例: <jsp:include page。
属性値を入力します。例: <jsp:include page="filename.jsp"。
必要に応じて、他の属性と値を追加します。属性値と次の属性の間にはスペースを入力します。例: <select size="4" name="ListBox"></select>。
属性と値をすべて追加したら、右山カッコ(>)を入力します。「終了タグの自動補完」機能が有効になっている場合、正しい終了タグ(例: </select>)が自動的に挿入されます。「終了タグの自動補完」機能の設定にかかわらず、左山カッコとスラッシュ文字(</)を入力してタグを閉じると常に正しい終了タグが自動的に挿入されます。
エディタで任意のタグ名を右クリックして「構造ウィンドウで選択」を選択し、そのタグを「構造」ウィンドウで選択します。編集中に発生した構文エラーもすべて「構造」ウィンドウに表示されます。エラー、要素または属性をダブルクリックすると、ソース・エディタで編集できます。
「終了タグの自動補完」機能を有効にするには、「ツール」→「プリファレンス」→「コード・エディタ」→「JSP/XML/HTML」を選択し、パネルを表示して該当するオプションを選択します。
コード・インサイトはJavaScriptおよびCSSファイルでも使用できます。
JavaScriptファイルでコード・インサイトを使用するには、次のようにします。
任意の<SCRIPT>タグ内にカーソルを置き、左山カッコを入力して[Ctrl]を押しながら[Space]を押します。
使用可能な構文補完のリストが表示されます。使用可能な構文補完をフィルタするには、最初の文字を入力します。たとえば、文字「d」を入力すると、「D」から始まる構文補完(「Date」、「decodeURI」など)が表示されます。
コード・インサイトでは、JavaScript固有のXML属性内でも構文補完を使用できます。
CSSファイルでコード・インサイトを使用するには、次のようにします。
任意の<STYLE>タグ内にカーソルを置き、左山カッコを入力して[Ctrl]キーを押しながら[Space]キーを押します。
この場合はCSSファイル内で使用可能な構文補完のリストが表示されます。使用可能な構文補完をフィルタするには、コード・インサイトを使用している要素の最初の文字を入力します。
この項では、Java EE内のJavaServer Faces (JSF)テクノロジを使用したユーザー・インタフェース開発向けのJDeveloperのサポートおよびツールについて説明します。
JDeveloperは、JSF 2.0仕様(http://jcp.org/aboutJava/communityprocess/final/jsr314/index.html)に準拠したJSFおよびFaceletsテクノロジを使用したユーザー・インタフェースの開発を完全にサポートしています。JSFに関するこの項の内容は、JSF開発用としてFaceletsテクノロジを使用していることを前提としています。
JDeveloperに用意されている機能を使用してアプリケーションを最初から構築できます。最初に、Webページ用のフレームワークまたはアプリケーション・テンプレートを構築する必要があります。アプリケーション・テンプレートを使用すると作業を迅速に開始できます。新規ギャラリ・ウィザードを使用してアプリケーションを構築する際に、アプリケーションに含めるテクノロジの組合せから選択します。図11-6に示すように、選択するアプリケーションにより、作成されるプロジェクト・フォルダや、フォルダに追加されるレイアウトが決まります。
表11-6 Webアプリケーション・テンプレート
| アプリケーション | 説明 |
|---|---|
|
Fusion Webアプリケーション(ADF) |
データバインドされたADF Webアプリケーションを作成します。このアプリケーションには、ビュー・コンポーネントとコントローラ・コンポーネント(ADF FacesとADFタスク・フロー)用に1つのプロジェクト、そしてデータ・モデル(ADF Business Components)用に別のプロジェクトが含まれています。 |
|
Java EEアプリケーション |
データバインドされたWebアプリケーションを作成します。このアプリケーションには、ビュー・コンポーネントとコントローラ・コンポーネント(JSF)用に1つのプロジェクト、そしてデータ・モデル(EJBおよびJPAエンティティ)用にもう1つのプロジェクトが含まれています。 |
|
汎用アプリケーション |
1つのプロジェクトでアプリケーションを作成します。プロジェクトはJDeveloperテクノロジで事前構成されておらず、どのテクノロジも含めるようにカスタマイズできます。 |
ウィザードを使用して、カスタマイズされたアプリケーション・フレームワークを構築します。
JSFアプリケーション用のWebアプリケーションおよびプロジェクトを作成するには、次のようにします。
メイン・メニューから「ファイル」→「メニュー」→「新規」→「一般」→「アプリケーション」の順に選択します。
作成するアプリケーションを選択します。
ステップを完了します。プロジェクト・フォルダ、ModelおよびViewControllerが作成され、アプリケーション・ナビゲータの新しいアプリケーション・ノードの下にリストされます。「汎用アプリケーション」を選択した場合は、「プロジェクト」フォルダのみが表示されます。
「ViewController」プロジェクトをダブルクリックして「プロジェクト・プロパティ」ダイアログを開き、「依存性」を選択します。「プロジェクトの依存性」の下に、Modelプロジェクトが選択されていることを確認します。
アプリケーションのフレームワークを作成したら、ページの構築、編集およびモデリング・ツールを使用してページを迅速に起動して実行します。
JSFアプリケーションをエンドツーエンドでクイックスタートするには、次のようにします。
簡易ウィザードを使用してWebアプリケーションを構築します。第11.2.1.1項「アプリケーション・フレームワークの構築方法」を参照してください。
新規ギャラリJSFウィザードを使用してJSFページを作成します。「JSFページを作成するには、次のようにします。」を参照してください。
ビジネス・サービスを選択します。「ビジネス・サービスの選択」を参照してください。
ビジネス・サービスのバッキングBeanを作成します。11.2.2.2項「マネージドBeanの使用方法」を参照してください。
インタフェース・コンポーネントをデータにバインドします。11.2.2.4項「JSFページへのコンポーネントのバインド方法」を参照してください。
アプリケーション・リソースをマネージドBeanをfaces-config.xmlに追加します。第11.2.2.12項「JSFアプリケーションの構成方法」を参照してください。
JSFページを実行します。第11.2.3項「JSFアプリケーションの実行およびテスト方法」を参照してください。
JSFページを作成するには、次のようにします。
アプリケーション・ナビゲータで、新規JSF 2.0ページまたはドキュメントのプロジェクトを選択します。JSFページはナビゲーション・モデラーでも作成できます。
「ファイル」→「新規」を選択し、「新規ギャラリ」を開きます。
「カテゴリ」ツリーでWeb Tierを開き、「JSF」を選択します。このウィザードで、JSF/FaceletsページまたはJSP XMLページを作成します。ADF Facesページ・テンプレートまたはクイック・スタート・レイアウトを選択します。ADF Facesページ・テンプレート(.jsfファイル)では、ページ・テンプレート定義ファイルにページ・レイアウト全体が定義され、再利用およびパラメータ化が可能になります。クイック・スタート・レイアウトは、レイアウトの外観と動作の実装に必要なADF Facesコンポーネントを自動的に挿入して構成する事前定義済のページ・レイアウトです。
ビジネス・サービスの選択
JDeveloperでは、Enterprise JavaBeans (EJB)またはJavaBeansに基づいてデータソースを処理できます。また、Oracle TopLinkを使用してJavaクラスおよびEJBをデータベース表にマップすることもできます。バックエンド・ビジネス・サービスを作成する必要はないが、既存のビジネス・サービス(EJBコンポーネント、データベースのストアド・プロシージャ、Javaまたは他の言語を記述する他のサービス)を公開する必要がある場合、Webサービスを使用できます。
アプリケーション・モデルおよびバックエンド・クラスはいずれもJSFクラスを参照しないため、同じクラスを任意のタイプのユーザー・インタフェースで使用できます。
特定のビジネス・サービスを使用する場合は、図11-7に示すように、新規ギャラリを開き、用意されているウィザードおよびダイアログを使用して、モデル・プロジェクトにエンティティを作成できます。または、Webサービスの場合は、モデル・プロジェクトにエンティティを公開できます。
表11-7 ビジネス・サービスの新規ギャラリのオプション
| 目的 | 選択する新規ギャラリのオプション |
|---|---|
|
ModelプロジェクトでEnterprise JavaBeansを使用する |
「ビジネス層」カテゴリのEJB |
|
ModelプロジェクトでOracle TopLinkを使用する |
「ビジネス層」カテゴリの「TopLink」 |
|
ModelプロジェクトでJavaBeansを使用する |
「General」カテゴリの「JavaBeans」 |
|
レガシー・コード、ソフトウェア・コンポーネント(EJBコンポーネントなど)、またはデータベース内のPL/SQLに基づいて作成されたWebサービスを使用し、HTTPを介して迅速かつ容易にアクセスできるようにする |
「ビジネス層」カテゴリの「Web Services」 |
ビジネス・サービスを作成するには、次のようにします。
Webアプリケーションおよびプロジェクトを作成します。表11-6のWebアプリケーションのオプションを参照してください。
アプリケーション・ナビゲータで、アプリケーション・ノードの下にある「モデル」プロジェクトを選択し、「ファイル」→「新規」の順に選択して新規ギャラリを開きます。
「カテゴリ」リストでノードを開き、選択したテクノロジ・スコープに関連するカテゴリを表示します。「ビジネス層」ノードの下には、ADF Business Components、EJB、ToplinkおよびWebサービスなどのビジネス・サービスのオプションが表示されます。ビジネス・サービスを選択します。
JDeveloperには、JSFページに簡単にドラッグ・アンド・ドロップできる標準JSFコンポーネントを備えたコンポーネント・パレットが用意されています。JSFページを作成すると、バッキングBeanが作成され、ページに配置するすべてのコンポーネントおよび対応するプロパティに自動的にバインドされます。また、作業を支援するためにプロパティ・インスペクタおよび式言語機能が用意されています。
ローカライゼーションの場合、コンテンツ・コンポーネントをページに追加すると、リソース・バンドルが自動的に追加されます。リソース・バンドルを管理したり、アプリケーションのプロジェクト・プロパティ機能で新規リソース・バンドルを作成できます。
JDeveloperに用意されている多くの標準コンポーネント・オプションの中には、図11-14に示すように、プロパティ・インスペクタを介して構成可能な検証および変換用のコンポーネントや、JSFページのエラー・メッセージ出力を設定する上で役立つメッセージ・コンポーネントなどがあります。
JSF共通コンポーネント
JSFタグ・ライブラリの完全な詳細は、タグ・ライブラリ文書(http://www.oracle.com/technetwork/java/javaee/tech/index-jsp-142185.html)を参照してください。
表11-8 標準JSFコア・タグ・ライブラリでサポートされる要素
| コンポーネント・タグ | 構文 | 説明 |
|---|---|---|
|
f:actionListener |
<f:actionListener [type] [binding] [for] /> |
最も近い親コンポーネントに関連付けられたUIComponentにアクション・リスナーを登録します。 |
|
f:ajax |
<f:ajax [disabled] [event] [execute] [immediate] [listener] [oneevent] [oneerror] [render] /> |
ClientBehaviorHolderインタフェースを実装する1つ以上のUIComponentにAjaxBehaviorインスタンスを登録します。このタグは単一のコンポーネント内でネストされる(単一のコンポーネントに対してAjaxを有効にする)場合や、複数のコンポーネントを囲む(複数のコンポーネントに対してAjaxを有効にする)場合があります。 |
|
f:attribute |
<f:attribute [name] [value] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentに属性を追加します。 |
|
f:convertDateTime |
<f:convertDateTime [dateStyle] [locale] [pattern] [timeStyle] [timeZone] [type] [binding] [for] |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentにDateTimeConverterインスタンスを登録します。 |
|
f:converter |
<f:converter [converterID] [binding] [for] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentに名前付きConverterインスタンスを登録します。 |
|
f:convertNumber |
<f:convertNumber [currencyCode] [currencySymbol] [groupingUsed] [integerOnly] [locale] [maxFractionDigits] [minIntegerDigits] [pattern] [type] [binding] [for] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentにNumberConverterインスタンスを登録します。 |
|
f:event |
<f:event [name] [listener] /> |
ページのコンポーネントにComponentSystemEventListenerインスタンスをインストールできます。 |
|
f:facet |
<f:facet/> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentに名前付きファセットを登録します。 |
|
f:loadBundle |
<f:loadBundle [basename] [var] /> |
現在のビューのロケールにローカライズされたリソース・バンドルをロードし、このタグのvar属性の値によって指定されたキーの下でこのリソース・バンドルを現在のリクエストのリクエスト属性のjava.util.Mapとして公開します。マップは、マップ内に存在しないキーに対してget()コールが実行されたときにマップからリテラル文字列KEYが戻される(この場合、KEYは、スローされるリソースの欠落例外ではなく、マップで検索されるキーです)ような処理内容で動作する必要があります。リソース・バンドルが存在しない場合、JspExceptionがスローされる必要があります。 |
|
f:metadata |
<f:metadata/> |
このビューのメタデータ・ファセットを宣言します。これは、<f:view>の子である必要があります。このタグは、テンプレート内ではなく、指定されたviewIdの最上位のXHTMLファイル内に存在する必要があります。ファセットの子が1つのみであっても、ファセットの直系の子がUIPanelであることを確認する必要があります。UIPanelのIDは、UIViewRoot.METADATA_FACET_NAMEシンボリック定数の値に設定する必要があります。 |
|
f:param |
<f:param [binding] [id] [name] [value] [disable] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentに子UIParameterコンポーネントを追加します。 |
|
f:phaseListener |
<f:phaseListener [type] [binding] /> |
このタグがネストされているUIViewRootにPhaseListenerインスタンスを登録します。 |
|
f:selectItem |
<f:selectItem [binding] [id] [itemDescription] [itemDisabled] [itemLabel] [escape] [itemValue] [value] [noSelectionOption] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentに子UISelectItemコンポーネントを追加します。 |
|
f:selectItems |
<f:selectItems [binding] [id] [value] [var] [itemValue] [itemLabel] [itemDescription] [itemDisabled] [itemLabelEscaped] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentに子UISelectItemsコンポーネントを追加します。 選択アイテムを反復する場合、string rendered属性値に対してtoString()を呼び出す必要があります。 仕様のバージョン2では、次に示す複数の新規属性が導入されます。これらは、var、itemValue、itemLabel、itemDescription、itemDisabledおよびitemLabelEscapedです。 |
|
f:setPropertyActionListener |
<f:setPropertyActionListener [value] [target] [for] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentにActionListenerインスタンスを登録します。このactionListenerにより、value属性によって指定される値が、target属性によって指定されるValueExpressionに設定されます。 |
|
f:subview |
<f:subview [binding] [id] [rendered] |
これは、同じWebアプリケーションから別のページを動的に組み込む任意のカスタム・アクション(JSTLのc:importなど)またはjsp:includeを介してネストされたページで使用されるすべてのJavaServer Facesのコア・コンポーネント・アクションおよびカスタム・コンポーネント・アクションに対するコンテナ・アクションを処理します。 |
|
f:validateBean |
<f:validateBean [validationGroups} [disabled] [binding] [for] |
これは、ローカル値の検証をBean Validation APIに委任するバリデータです。validationGroups属性は、どのような制約を課すかをBean Validation APIに指示するフィルタとして機能します。Bean Validationから制約違反が報告されると、この値は無効とみなされます。 |
|
f:validateDoubleRange |
<f:validateDoubleRange [disabled] [maximum] [minimum] [binding] [for] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentにDoubleRangeValidatorインスタンスを登録します。 |
|
f:validateLength |
<f:validateLength [disabled] [maximum] [minimum] [binding] [for] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentにLengthValidatorインスタンスを登録します。 |
|
:validateRegex |
:<validateRegex [disabled] [pattern] [binding] [for] /> |
これは、pattern属性を使用してラッピング・コンポーネントを検証するバリデータです。パターン全体がコンポーネントのString値と比較されます。一致する場合、これは有効です。 |
|
f:validateRequired |
<f:validateRequired [disabled] [binding] [for] /> |
これは、値が存在することを強制するバリデータです。これには、UIInputに対するrequired属性をtrueに設定することと同じ効果があります。 |
|
f:validator |
<f:validator [disabled] [validatorId] [binding] [for] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentに名前付きValidatorインスタンスを登録します。 |
|
:valueChangeListener |
<:valueChangeListener [type] [binding] /> |
最も近い親UIComponentカスタム・アクションに関連付けられたUIComponentにValueChangeListenerインスタンスを登録します。 |
|
f:verbatim |
<f:verbatim [escape] [rendered] /> |
ネストされたボディ・コンテキストをレンダリングする、最も近い親UIComponentカスタム・アクションに関連付けられた子UIOutputコンポーネントを作成および登録します。 |
|
f:view |
<f:view [locale] [renderKitId] [beforePhase] [afterPhase] /> |
ページで使用されるすべてのJavaServer Facesのコア・コンポーネント・アクションおよびカスタム・コンポーネント・アクションのコンテナ。 |
|
f:viewParam |
<f:viewParam [converter] [converterMessage] [id] [required] [requiredMessage] [validator] [validatorMessage] [value] [valueChangeListener] [maxLength] [for] /> |
このタグは、ビューのメタデータ・ファセットの内部で使用され、UIViewParameterを現在のビューのメタデータとしてアタッチします。UIViewParameterによってUIInputが拡張されるため、任意のUIInputタグのすべての属性およびネストされた子コンテンツもこのタグで有効になります。 |
プロパティ・インスペクタでコンポーネント・タグ属性を表示および設定します。属性を選択すると、属性リストの下のテキスト領域に、その属性の簡単な説明が表示されます。ほとんどのJSF標準コンポーネントのタグ属性には、値バインディング式(#{expression})を使用できます。
コンポーネントをJSFページに追加すると、プロパティ・インスペクタには、そのコンポーネントのタグに対してサポートされる属性が、次のカテゴリにグループ化されて表示されます。
共通: id、titleのように一般的に使用されます。ローカライゼーションの場合、langおよびdirなどの言語翻訳属性があります。
外観: リンクやテキストなどがページ上でどのように表示されるかを定義します。
スタイル: background、fontなどのHTMLのプレゼンテーション属性に使用されます。
JavaScript: onclick、onkeypress、onmouseoverなど、クライアント側のスクリプトをイベントに関連付けるためのJavaScript属性に使用されます。
一般属性とコア属性
ほとんどのJSFの標準コンポーネント・タグでは、次の一般属性とCore属性がサポートされています。
binding: コンポーネント・インスタンスをBeanのプロパティにバインドするJSF EL式です。
id: コンポーネントの一意の識別子です。この識別子は有効なXML名である必要があります。つまり、ID名の先頭には数値または空白を使用できません。
rendered: コンポーネントをレンダリングするかどうかを指定するブール値です。デフォルトは、trueです。
HTMLのイベント属性とスタイル属性
タグ・ライブラリにあるJSPアクションでは、対応するHTML要素に対してHTML 4.01仕様が宣言されている属性のほとんどがサポートされています。各属性はオプションで、静的な値に設定したり、JSF EL式の任意のタイプを使用できます。
サポートされるクライアント側JavaScriptのイベント処理の属性は、次のとおりです。
onblur、onchange、onclick、ondblclick、onfocus、onkeydown、onkeypress、onkeyup、onload、onmousedown、onmousemove、onmouseout、onmouseover、onmouseup、onselect、onunload
サポートされるスタイルと表現に関する属性には、background、border、cellpadding、cellspacing、font、margin、style、outlineなどがあります。
JDeveloperは、JSFの標準タグ・ライブラリをサポートしています。これには、JavaServer Facesの仕様に定義されているUIComponentとHTML RenderKitレンダラのあらゆる組合せに対するJSFコンポーネント・タグが含まれます。
サポートされるすべての属性が大カッコ([ ])内に示されます。該当する場合は、デフォルトの値が提供されます(例: [disabled="false"])。属性の後に配置されるアスタリスク(*)は、値が必要であることを意味します。該当する場合は、サポートされる子とファセットのコンポーネントも示されます。
バッキングBeanは、JSFページのUIコンポーネントに対するロジックとプロパティが含まれているマネージドBeanです。「JSFページの作成」ダイアログの「マネージドBean」タブには、コンポーネントを自動的にバインドするオプションがあります。このオプションを選択すると、作成しているページに対してデフォルトのバッキングBeanが作成され(または選択したマネージドBeanが使用され)、ページに配置したすべてのコンポーネントが、そのBeanの対応するプロパティに自動的にバインドされます。関連するアクセッサ・メソッドも作成されます。
「JSFページの作成」ダイアログを使用してJSFページを作成する場合、自動コンポーネント・バインディングとして「新規マネージドBeanでのUIコンポーネントの自動公開」または「既存のマネージドBeanでのUIコンポーネントの自動公開」の2つのオプションから選択します。
いずれかのオプションが有効になっている場合、作成しているページのマネージドBeanが使用され、ページにドラッグ・アンド・ドロップしたコンポーネントがBean内の対応するプロパティにバインドされます。
マネージドBeanを作成するには、次のようにします。
JSFまたはJSPXページを作成します。
「マネージドBean」タブを選択します。
「新規マネージドBeanでのUIコンポーネントの自動公開」を選択します。JSFページと同じ名前でmodel.backingディレクトリに配置される新規バッキング・マネージドBeanが作成されます。
必要に応じて、JSFページに対してコンポーネント・タグの追加または削除を実行します。JDeveloperでは、バッキングBeanのプロパティと対応するアクセッサ・メソッドが自動的に追加または削除されます。属性にメソッド・バインディングが必要なコンポーネント・タグの場合は、プロパティ・インスペクタを使用してメソッド・バインディング式を入力し、ページのバッキングBean内の既存メソッドから選択します(メソッドをバッキングBeanに追加する方法については、後述の手順を参照)。または、新規メソッド名を入力できます。JDeveloperでは、ページのバッキングBeanに新規スケルトン・メソッドが作成されます。ロジックをメソッドに追加します。
メソッドをマネージドBeanに追加する手順は、次のとおりです。
ソース・エディタでバッキングBeanを開きます。
エディタの上部にあるメソッド・バインディング・ツールバーで、「コンポーネント」ドロップダウン・メニューからコンポーネントを選択します。
「イベント」ドロップダウン・メニューから、作成するメソッドのタイプを選択します。コンポーネントに対するスケルトン・メソッドが追加されます。
// Add event code here...というコメント部分を適切なビジネス・ロジックで置換します。
JSF構成エディタを使用してマネージドBeanを作成するには、次のようにします。
アプリケーション・ナビゲータで、「faces-config.xml」ファイルをダブルクリックします。このファイルは、Web Content/WEB_INFディレクトリにあります。
ウィンドウの最下部で、「概要」タブを選択します。JSF構成エディタ・ウィンドウが表示されます。
左側にある要素リストで、「Managed Bean」を選択します。
「新規」をクリックして、「マネージドBeanの作成」ダイアログを開きます。
Beanの名前および完全修飾クラス・パスを入力します。
スコープを選択し、「Javaファイルの生成」チェック・ボックスを選択して「OK」クリックします。
この手順を実行すると、publicコンストラクタ・メソッドが含まれるマネージドBean用のJavaファイルが作成されます。すべてのプロパティと他のメソッドを手動で追加します。ファイルは、「クラス」の値として設定された完全修飾クラス名を使用して名前が設定され、配置されます。新規ファイルは、アプリケーション・ナビゲータのプロジェクトの「アプリケーション・ソース」ノード内、およびシステム・ナビゲータの定義済パッケージ内に表示されます。
ページを作成し、自動コンポーネント・バインディングを選択した場合は、次の処理が自動的に行われます。
バッキングBeanの作成を選択する場合、JSFまたはJSPXと同じ名前を使用したJavaBeanが作成され、view.backingパッケージに配置されます。バッキングBeanのfaces-config.xmlファイルにもマネージドBeanのエントリが作成されます。デフォルトでは、マネージドBean名は、backing_<page_name>で、このBeanではリクエスト・スコープが使用されます。
新規に作成されたBeanまたは選択されたBeanで、ページに配置した各コンポーネント・タグにプロパティとアクセッサ・メソッドが追加されます。
EL式をバインディング属性の値として使用して、コンポーネント・タグがそのプロパティにバインドされます。作成時にフォーム・コンポーネントがJSFまたはJSPXページに自動的に配置されるため、フォーム・コンポーネントに対するプロパティとアクセッサ・メソッドは自動的に作成されます。
ページからコンポーネントを削除すると、プロパティとメソッドが削除されます。
JDeveloperを使用してデフォルトのバッキングBeanを作成して構成するか、または作成しているページに対して既存のマネージドBeanを使用できます。自動コンポーネント・バインディングが有効な場合は、JDeveloperによって、ページにドロップするコンポーネントのbinding属性が制御されます。表11-9に示すように、新規ギャラリで新規ページを作成する際のコンポーネント・バインディング・オプションを選択します。
JavaServer Facesには、JSFページでページBeanおよびWebアプリケーション内の他のBean (セッションBeanおよびアプリケーションBeanを含む)のJavaBeansコンポーネントにアクセスするために使用可能な式言語(JSF EL)が用意されています。コンポーネントのプロパティをバインドするには、プロパティ・インスペクタで、コンポーネントをページに追加し、コンポーネントを選択し、バインドを作成します。
図11-16に示すように、「式ビルダー」ダイアログ・ボックスを使用して、コンポーネント・プロパティをバインドするJavaBeansプロパティを選択し、ツールを使用してEL式を作成できます。
JSF式言語構文には、デリミタ#{}が使用されます。式には、UIコンポーネントまたは他の値を外部データソースにバインドするための値バインディング式や、バッキングBeanメソッドを参照するためのメソッド・バインディング式があります。
JSF値バインディング式に対してサポートされている構文は、次の例外を除いて、JavaServer Pages Specification (v 2.0)に定義されている構文とほとんど同じです。
値バインディング式の式デリミタは、${および}ではなく、#{および}です。
値バインディング式は、JSP式言語関数をサポートしていません。
有効な値バインディング式の例を次に示します。
#{Page1.name}
#{Foo.bar}
#{Foo[bar]}
#{Foo[“bar”]}
#{Foo[3]}
#{Foo[3].bar}
#{Foo.bar[3]}
#{Customer.status == 'VIP'}
#{(Page1.City.farenheitTemp - 32) * 5 / 9}
Reporting Period: #{Report.fromDate} to #{Report.toDate}
メソッド・バインディングの式では、次のパターンのいずれかを使用する必要があります。
#{expression.value}
#{expression[value]}
式言語では、.演算子と[]演算子の他に、次の演算子が用意されています。
算術: +、-(2項)、*、/とdiv、%とmod、-(単項)
論理: and、&&、or、||、not、!
関係: ==、eq、!=、ne、<、lt、>、gt、ge、>=、le。比較は、他の値(ブール、文字列、整数、浮動小数点リテラル)に対して行われます。
empty:empty演算子は、値がnullであるか、空であるかの判別に使用できる前置演算子です。
条件: A ?B : C。Aの評価の結果によって、BまたはCを評価します。
JSFテクノロジを使用するEL式を作成するには、次のようにします。
ビジュアル・エディタでJSPページを開きます。
バインドするコンポーネント属性を選択します。
プロパティ・インスペクタで属性名を選択します。
属性アクション・ダイアログで、式ビルダーを選択します。
式を構築して「OK」をクリックします。プロパティ・インスペクタで、そのコンポーネント・フィールドからEL式を編集できます。フィールド内をクリックすると、長い式が表示されます。「プロパティ・インスペクタ」フィールドから「コード・インサイト」を起動するには、[Ctrl]+[Space]を押します。また、コンポーネントをクリックし、「式ビルダー」をクリックしてEL式を追加または編集することもできます。
ページの自動コンポーネント・バインディングは、コマンドおよび入力コンポーネントの次の属性に対するメソッド・バインディング式の入力方法に影響を与えます。
action
actionListener
launchListener
returnListener
valueChangeListener
validator
図11-16に示すように、「式ビルダー」ダイアログ・ボックスを使用して、バインドするコンポーネント・プロパティを選択します。
自動コンポーネント・バインディングが無効な場合
自動コンポーネント・バインディングが無効な場合は、コンポーネント属性にメソッド・バインディング式を入力するときに、既存のマネージドBeanを選択するか、新規のバッキングBeanを作成する必要があります。新規のバッキングBeanを作成した場合は、マネージドBeanがアプリケーションのfaces-config.xmlに自動的に構成されます。
自動コンポーネント・バインディングが有効な場合
自動コンポーネント・バインディングが有効な場合は、マネージドBeanを選択する必要はありません。コンポーネント属性にメソッド・バインディング式を入力するときに、Beanにある既存のメソッドから選択できます。または新規のメソッド名を入力すると、新規のスケルトン・メソッドが自動的に作成されます。その後、メソッドにロジックを追加します。
また、バッキングBeanであるJavaファイルを編集する際、メソッド・バインディング・ツールバーがソース・エディタに表示され、選択したページのコンポーネントに適切なメソッドをバインドできます。
myfile.jspというファイル名のJSFページを作成したとします。デフォルトのマネージドBeanを自動的に作成する場合、view.backing.Myfile.javaというバッキングBeanが作成され、ViewControllerプロジェクトの¥srcディレクトリに配置されます。このバッキングBeanはアプリケーション・リソース・ファイル(faces-config.xml)でマネージドBeanとして構成され、デフォルトのマネージドBean名はbacking_myfileとなります。
自動コンポーネント・バインディングが有効な場合、ページに挿入するコンポーネントは、例11-1および例11-2に示すように、バッキングBeanのプロパティに(binding属性を介して)自動的にバインドされます。
例11-1 デフォルトのマネージドBeanを使用したJSFページ(myfile.jsf)
...
<h:form binding="#{backing_myfile.form1}">
<h:inputText binding="#{backing_myfile.inputText1}"/>
<h:commandButton value="button0"
binding="#{backing_myfile.commandButton1}"
action="#{backing_myfile.commandButton_action}"/>
...
</h:form>
...
例11-2 デフォルトのバッキングBeanのJavaファイル: Myfile.java
package view.backing; import javax.faces.component.html.HtmlForm import javax.faces.component.html.HtmlCommandButton import javax.faces.component.html.HtmlInputText;
public class Myfile
{
private HtmlForm form1;
public void setForm1(HtmlForm form1)
{
this.form1 = form1;
}
public HtmlForm getForm1()
}
return form1;
}
private HtmlInputText inputText1;
public void setInputText1(HtmlInputText inputText1)
{
public HtmlInputText getInputText1()
{
return inputText1;
}
private HtmlCommandButton commandButton1;
public void setCommandButton1(HtmlCommandButton commandButton1)
{
this.commandButton1 = commandButton1;
}
return commandButton1;
}
public String commandButton_action()
{
// Add event code here...
return null;
}
}
アプリケーション・リソース・ファイル(faces-config.xml)
... <managed-bean> <managed-bean-name>backing_myfile</managed-bean-name> <managed-bean-class>view.backing.Myfile</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> ...
JSFページをビジュアル・エディタで編集するときは、自動バインド・オプションの有効化/無効化を切り替えたり、マネージドBeanの選択を変更できます。
自動バインドが有効な状態でマネージドBeanの選択を変更する場合は、既存と新規のすべてのコンポーネント・バインディングが新規のBeanに切り替えられます。
自動バインドを無効にした場合、そのページの既存のコンポーネント・バインディングは変更されません。
自動バインドを有効にした場合、新規と既存のすべてのコンポーネント・バインディングは選択したマネージドBeanにバインドされます。
自動コンポーネント・バインディングを有効または無効にするには、次のようにします。
ビジュアル・エディタでJSFページを開きます。
「設計」→「ページ・プロパティ」を選択します。
「コンポーネント・バインディング」をクリックします。
「自動バインド」オプションの選択を解除するか、このオプションを選択します。
JSFページで、自動コンポーネント・バインディング用のマネージドBeanを選択するには、次のようにします。
ビジュアル・エディタでJSFページを開きます。
「設計」→「ページ・プロパティ」を選択します。
「自動バインド」オプションが選択されていることを確認します。
ドロップダウン矢印をクリックして既存のマネージドBeanを選択するか、「新規...」をクリックして新規のマネージドBeanを定義します。バインドされている既存のコンポーネントと、新たに挿入したコンポーネントのすべてが、選択したマネージドBeanにバインドされます。
コンポーネントをプロパティに値バインドするには、次のようにします。
ビジュアル・エディタでコンポーネントを選択します。
プロパティ・インスペクタで、適切なフィールドのドロップダウン・メニューをクリックし、「式ビルダー」を選択します。
Beanのプロパティまたはリソース・バンドル内の値にバインドするEL式を入力します。
コンポーネント・インスタンスをプロパティに手動でバインドするには、次のようにします。
ビジュアル・エディタでコンポーネントを選択します。
プロパティ・インスペクタで、Binding属性の横にある下矢印をクリックします。Bindingダイアログが表示されます。
マネージドBeanを選択するか、「新規...」をクリックして新規のBeanを作成します。
ドロップダウン・メニューを使用して既存のプロパティを選択するか、「プロパティ」の横にある「新規...」をクリックして新規プロパティ名を追加します。
終了したら、「OK」をクリックします。新規プロパティを作成した場合は、このプロパティが選択したBeanにアクセッサ・メソッドのコードとして挿入されます。
自動コンポーネント・バインディングを使用して既存のメソッドにバインドするには、次のようにします。
ビジュアル・エディタで、コンポーネントを選択します。自動コンポーネント・バインディングを使用して既存のメソッドにバインドするには、該当するメソッドが、JSFページに関連付けられているバッキングBeanにすでに存在している必要があります。
プロパティ・インスペクタで、メソッド・バインディングを受け入れる属性の横にある列をクリックします。
ドロップダウン・メニューをクリックし、メソッド名を選択します。選択できるのは、適切なシグネチャのあるバッキングBeanのメソッドのみです。
自動コンポーネント・バインディングを使用して新規デフォルト・メソッドにバインドするには、次のようにします。
関連付けられているバッキングBeanを開きます。
ソース・エディタで、メソッド・バインディング・ツールバーを使用し、「コンポーネント」ドロップダウン・メニューからコンポーネントを選択します。
「イベント」ドロップダウン・メニューから適切な属性を選択します。ページの下部にデフォルト・メソッドが挿入されます。カーソルは、新規メソッドに置かれます。JSFページにはバインディング式も作成されます。
ソース・エディタで、メソッドのコードを入力します。
自動コンポーネント・バインディングを使用して新規メソッドにバインドするには、次のようにします。
ビジュアル・エディタでコンポーネントを選択します。
プロパティ・インスペクタで、メソッド・バインディングを受け入れる属性の横にある列をクリックします。
メソッド名(例: myMethod)を入力します。Action属性では文字列またはメソッドのいずれかを使用できるため、アクション・メソッドにはカッコを含める必要があります(例: myAction())。他のメソッドの場合、カッコは省略する必要があります。関連付けられたバッキングBean内にスケルトン・メソッドが作成され、JSFページにバインディング・コードが作成されます。
ソース・エディタで、メソッドのコードを入力します。
自動コンポーネント・バインディングを使用しないでメソッドをバインドするには、次のようにします。
ビジュアル・エディタでコンポーネントを選択します。プロパティ・インスペクタで、メソッド・バインディングを受け入れる属性の横にあるドロップダウン・メニューをクリックします。
マネージドBeanを選択するか、「新規...」をクリックして新規のマネージドBeanを作成します。
ドロップダウン・メニューを使用して既存のメソッドを選択するか、「メソッド」の横にある「新規...」をクリックして新規メソッド名を追加します。
「OK」をクリックします。JSFページにバインディング・コードが作成されます。新規メソッドを作成した場合は、バッキングBeanにデフォルト・メソッドのコードが自動的に挿入されます。
ソース・エディタでBeanを開き、メソッドのコードを入力します。
JSFアプリケーション・コンポーネントで構築するすべてのコンテンツはリソース・バンドルに格納されます。リソース・バンドルは、「デフォルト・プロジェクト・プロパティ」ダイアログで簡単にアプリケーションに追加したりアプリケーションから削除できます。
開発時に、コンポーネントを右クリックしてテキスト・リソースを選択します。プロジェクトに使用可能なリソース・バンドルが表示されます。作業対象のプロジェクトで使用可能にするリソース・バンドルを選択します。選択したリソース・バンドルに新規テキストが格納されます。
キー値文字列を割り当てることにより、リソース・バンドル内のテキスト・オブジェクトを一意に特定することもできます。デフォルトでは、表示名として入力した名前または名前の一部を使用します。この値は、ローカライズされたパートナにベース・コンテンツを関連させるためトランスレータによって使用されます。新規コンテンツを追加する場合、リソース・バンドルに前に追加した既存のコンテンツ文字列が使用可能で表示されます。既存のコンテンツ文字列を使用すると、ローカライゼーションに要する労力を最大限に活用でき、別の識別子を持つ重複文字列がすでに存在する際に一意の識別子を持つ新規コンテンツ文字列を追加しなくてすみます。リソース・バンドルを使用してプロジェクトおよびアプリケーション全体にわたってコンテンツ文字列を再利用することにより、翻訳に要する労力とコストを削減できます。
JSFアプリケーションにリソース・バンドルを追加するには、次のようにします。
プロジェクトにリソース・バンドルを追加するには、「アプリケーション」→「プロジェクト・プロパティ」→「リソース・バンドル」→「バンドル検索」を選択します。プロジェクトのリソース・バンドルを検索し、クリックしてプロジェクトに追加します。
JSFページでは、値バインディング式(例: #{bundle.key})を受け入れるどのコンポーネント・タグ属性からでもリソース・バンドル文字列を参照できます。
JSFでローカライズ・リソース・バンドルを使用する手順は、次のとおりです。
ローカライズ・メッセージおよびデータ文字列に対するキーと値のペアを含んだリソース・バンドルを作成します。ローカライズ・バンドルをアプリケーションのクラスパスに配置します。
アプリケーション・ナビゲータで、「faces-config.xml」をダブルクリックしてJSF構成エディタで開きます。必要な場合は、「概要」に切り替えます。
「アプリケーション」をクリックし、右矢印をクリックして「ロケール構成」を開きます。
「ロケール構成」の下にある「デフォルトのロケール」の値を入力します。「サポートされているロケール」で、「新規」をクリックして、サポートされているロケールに対するISOロケール識別子を追加します。サポートされているロケールは複数追加できます。
ビジュアル・エディタでJSFページを開きます。
コンポーネント・パレットで、ドロップダウン・リストから「JSF Core」を選択し、LoadBundleをページにドラッグ・アンド・ドロップします。リソース・バンドルのベース名、およびリクエスト・スコープで使用されるマップ変数の任意の名前を入力するためのダイアログが表示されます。
例11-3 リソース・バンドルのコード例
faces-config.xml内:
<faces-config>
<application>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>en-us</supported-locale>
<supported-locale>fr</supported-locale>
<supported-locale>es</supported-locale>
</locale-config>
</application>
...
</faces-config>
JSFページ内:
...
<f:loadBundle basename="model.login.ApplicationMessages" var="loginBundle"/>
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>Sample Application</title>
<link href="css/mycompany.css" rel="stylesheet" media="screen"/>
</head>
<body>
<H2><h:outputText value="#{loginBundle.someHeadLabel}" /></H2>
<h:form id="loginForm">
<h:outputText value="#{loginBundle.useridLabel}" />
<h:inputText id="userid" value="#{login.userid}"
required="true" size="15">
<f:validateLength minimum="4" maximum="7"/>
</h:inputText>
<h:commandButton value="#{loginBundle.loginLabel}
action="someBean.someMethod"} />
...
</h:form>
</body>
</html>
</f:view>
ファセットは多くのコンポーネントで使用されているため、ウィザードを使用して複雑なコンポーネント(表やパネルなど)を作成すると、多くの場合、出力タグが自動的に作成されてファセット内に挿入されます。これらのコンポーネントの編集、およびファセットへの他のコンポーネントの追加は手動で実行できます。「構造」ウィンドウのポップアップ・メニューを使用してファセットの追加または削除を行うこともできます。
ファセットを使用する手順は、次のとおりです。
「構造」ウィンドウで、親タグの左側にあるプラス記号をクリックし、親タグ(h:dataTableなど)を開きます。ツリーの下部にファセット・フォルダが表示されます。
「+」アイコンをクリックしてファセット・フォルダを開きます。その親に関連するすべてのファセット・フォルダが表示されます。
ファセット・フォルダ内のコンポーネントを編集する手順は、次のとおりです。
フォルダを開き、コンポーネントを選択します。
プロパティ・インスペクタを使用して属性値を編集します。
ファセットにコンポーネントを追加する手順は、次のとおりです。
フォルダを右クリックします。
「<facet-name>の中に挿入」を選択します。
結果のメニューを使用して、適切なオブジェクトを選択します。
プロパティ・インスペクタを使用して属性値を設定します。
FaceletsテクノロジにはJSFカスタム・コンポーネントがネイティブに使用されているため、Faceletsを使用すると、JSFコンポーネント用のカスタム・タグを作成する必要がなくなります。JSFとFaceletsをブリッジするために必要な特別コーディングはごくわずかです。JSFコンポーネントはFaceletsのテンプレート作成言語内で直接使用できます。Faceletsを使用すると、ページに直接インクルードしたりFaceletsのタグ・ライブラリに簡単に追加できるコンポーネント・アセンブリを定義できます。また、Faceletsを使用して、サイト・テンプレート(およびこれより小さいテンプレート)を定義することもできます。さらに、FaceletsのAPIは簡単に統合可能なインタフェースを備えているため、FaceletsはカスタムJSFコンポーネント内で使用することもできます。
Faceletsテクノロジは、次の機能を提供します。
UIの開発およびデプロイ時間の短縮
コンパイル時間の短縮
コンパイル時間の検証
パフォーマンスの高いレンダリング
カスタマイズを介したコンポーネントおよびサーバー側のテクノロジの機能拡張
テンプレート作成コンポーネントおよびコンポジット・コンポーネントを介したコードの再利用のサポート
Faceletsのタグ・ライブラリ
JSFでは、様々なタグを使用してWebページのUIコンポーネントを表現します。Faceletsは、XMLネームスペース宣言を使用してJSFタグ・ライブラリのメカニズムをサポートしています。これらすべてのライブラリはJDeveloperに含まれます。
表11-10 JDeveloperに含まれるFaceletsのタグ・ライブラリ
| タグ・ライブラリ | URI | 接頭辞 | 例 | 内容 |
|---|---|---|---|---|
|
JSF UIタグ・ライブラリ |
ui: |
ui:component ui:insert |
このタグ・ライブラリは、テンプレート作成に使用されます。 |
|
|
JSF HTMLタグ・ライブラリ |
h: |
h.head h.body h.outputText h.inputText |
このタグ・ライブラリには、JavaServer Faces 2.0の仕様に定義されているUIComponentとHTML RenderKitレンダラのあらゆる組合せに対するJavaServer Facesコンポーネント・タグが含まれます。 |
|
|
JSF Coreタグ・ライブラリ |
|
f: |
f:actionListener f:attribute |
このタグ・ライブラリには、特定のRenderKitに依存しないJavaServer Facesカスタム・アクションのタグが含まれます。 |
|
JSTL関数ライブラリ |
fn: |
fn:toUpperCase fn:toLowerCase |
JSTL 1.1関数タグ・ライブラリ |
Faceletsは、JSP 2.1によって定義されるユニファイドEL構文に基づいてEL(式言語)をサポートします。EL式を使用して、UIコンポーネントのオブジェクトおよび値やマネージドBeanメソッドまたはマネージドBeanプロパティをバインドします。FaceletsのユニファイドELでは、${}と#{}は区別されません。
Faceletsを作成するには、次のようにします。
「ファイル」→「新規」→「新規ギャラリ」→「Web層」→「JSF/Facelets」→「ページ」を選択します。
Faceletsのファイル名とパスを入力し、「OK」をクリックします。
Faceletウィザードの処理内容
Faceletsを作成する場合、次の方法でFaceletsテクノロジを使用するよう必要なクラスパスおよびデプロイメント・ファイルが変更されます。
例11-4 web.xmlに追加されるFaceletsコード
<context-param> <param-name> Facelets.VIEW_MAPPINGS </param-name> <param-value> *.xhtml</param-value> </context-param>
例11-5 ADFに追加されるFaceletsコード
<context-param> <param-name&g;torg.apache.myfaces.trinidad.FACELETS_VIEW_MAPPINGS</param-name> <param-value>*.xhtml</param-value> </context-param>
これが追加されることにより、デフォルトのJSPマッピングを使用せずに、Faceletsが正しく表示されるようになります。Facelets JARのjsf-Facelets.jarは、Faceletsランタイム・ライブラリを介してクラスパスに追加されます。
JDeveloperには、JSF入力データの変換および検証を容易にするために様々なツールやコンポーネントが用意されています。名前付きコンバータ・インスタンスや変換番号を登録したり、コンポーネント・パレットで日時を自由に変換するためのコンバータ・コンポーネントがあります。
コンバータ・プロパティおよびバリデータ・プロパティは、faces-config.xmlファイルの概要エディタで構成できます。
提供されているタグを使用してコンポーネントにJSF標準コンバータを登録する手順は、次のとおりです。
ビジュアル・エディタで、標準コンバータを登録するコンポーネントを選択します。
コンポーネント・パレットで、ドロップダウン・リストから「JSF Core」を選択し、標準コンバータ(例: ConvertDateTime)をクリックします。
プロパティ・インスペクタで、コンバータに対する属性を設定します。
固有のタグのないJSF標準コンバータを登録する手順は、次のとおりです。
ビジュアル・エディタで、標準コンバータを登録するコンポーネントを選択します。
コンポーネント・パレットで、ドロップダウン・リストから「JSF Core」を選択し、「コンバータ」をクリックします。コンバータの登録済IDを入力するためのダイアログが表示されます。
ドロップダウン・リストからコンバータID (例: javax.faces.Integer)を選択します。終了後は、「OK」をクリックします。ページにf:converterタグが挿入されます。f:converterタグを使用するかわりに、プロパティ・インスペクタを使用して、コンバータIDをコンポーネントのconverter属性に入力することもできます。
標準タグを使用してコンポーネントにJSF標準バリデータを登録する手順は、次のとおりです。
ビジュアル・エディタで、標準バリデータを登録する入力コンポーネントを選択します。
コンポーネント・パレットで、ドロップダウン・リストから「JSF Core」を選択し、選択する標準バリデータ(例: ValidateLength)をクリックします。
プロパティ・インスペクタで、バリデータに対する属性を設定します。1つのコンポーネントに複数のバリデータを登録できます。JSFによって、コンポーネントに追加された順にバリデータがコールされます。
変換または検証エラーを生成したコンポーネントの横にメッセージを表示する手順は、次のとおりです。
ビジュアル・エディタでページを開きます。
プロパティ・インスペクタを使用して、メッセージを表示するコンポーネントに一意のIDを割り当てます。
コンポーネント・パレットで、ドロップダウン・リストから「JSF」を選択し、「Message」をページにドラッグ・アンド・ドロップし、メッセージを表示するコンポーネントの横に配置します。一意のIDを入力するためのダイアログが表示されます。
IDを入力し、「OK」をクリックします。
プロパティ・インスペクタで、メッセージ・タグの属性を設定します。
JSFアプリケーション構成ファイルでカスタムのコンバータまたはバリデータを登録する手順は、次のとおりです。
アプリケーション・ナビゲータで、アプリケーションの「faces-config.xml」ファイルをダブルクリックしてJSF構成エディタで開きます。エディタで、「概要」タブをクリックします。
構成エディタの「概要」ページで、「コンバータ」または「バリデータ」をクリックし、「新規」をクリックします。「コンバータの作成」または「バリデータの作成」ダイアログが表示されます。表示されたダイアログで、識別子および完全修飾クラス名を入力します。カスタム・コンバータの場合は、特定のデータ型に対する識別子または完全修飾クラス名で登録できます。
必要な情報を入力します。「OK」をクリックします。
(オプション)属性またはプロパティを追加するには、「属性」または「プロパティ」パネルの横にある「新規」をクリックします。「新規」が表示されていない場合は、右矢印をクリックしてパネルを開きます。「属性の作成」または「プロパティの作成」ダイアログが表示されます。表示されたダイアログで、カスタムのコンバータまたはバリデータに構成可能な汎用属性またはJavaBeansプロパティを指定します。
アプリケーションでカスタムのコンバータまたはバリデータ構成を編集するには、次のようにします。
アプリケーション・ナビゲータで、アプリケーションの「faces-config.xml」ファイルをダブルクリックしてJSF構成エディタで開きます。エディタで、「概要」タブをクリックします。
構成エディタの概要ページで、「コンバータ」または「バリデータ」をクリックします。表示されたリストからコンバータまたはバリデータを選択し、「編集」をクリックします。コンバータまたはバリデータのプロパティ・ダイアログが表示されます。
必要な変更を入力します。
JSFアプリケーション構成ファイルでカスタムのコンバータまたはバリデータを削除する手順は、次のとおりです。
アプリケーション・ナビゲータで、アプリケーションの「faces-config.xml」ファイルをダブルクリックしてJSF構成エディタで開きます。エディタで、「概要」タブをクリックします。
構成エディタの概要ページで、「コンバータ」または「バリデータ」をクリックします。表示されたリストからコンバータまたはバリデータの定義を選択し、「削除」をクリックします。コンバータまたはバリデータの定義が削除されます。
コンバータ識別子を使用してコンポーネントにカスタム・コンバータを登録する手順は、次のとおりです。
ビジュアル・エディタで、カスタム・コンバータを登録するコンポーネントを選択します。
コンポーネント・パレットで、「JSF Core」ページを選択し、「コンバータ」をクリックします。アプリケーションに登録されているとおりにカスタム・コンバータIDを入力するためのダイアログが表示されます。
ドロップダウン・リストから登録済コンバータ識別子を選択します。選択できるのはconverterインタフェースの実装のみです。「OK」をクリックします。f:converterタグが挿入されます。プロパティ・インスペクタを使用して、登録済コンバータIDを入力できます。
値バインディング式を使用してコンポーネントにカスタム・コンバータを登録する手順は、次のとおりです。
ビジュアル・エディタで、登録するコンポーネントを選択します。
プロパティ・インスペクタで、converterプロパティを選択し、ドロップダウン矢印をクリックし、式ビルダーを選択します。
式ビルダーを使用してEL式を入力します。converterプロパティを使用するかわりに、f:converterタグをコンポーネントに追加できます。式ビルダーを使用して値バインディング式を入力します。Beanプロパティは、converterインタフェースを実装するクラスのオブジェクトである必要があります。
コンポーネントにカスタム・バリデータ・インスタンスを登録する手順は、次のとおりです。
ビジュアル・エディタで、使用する入力コンポーネントを選択します。
コンポーネント・パレットで、ドロップダウン・リストから「JSF Core」ページまたは「ADF Facesコア」ページを選択し、「Validator」コンポーネントをクリックします。
プロパティ・インスペクタで、ドロップダウン・リストから登録済バリデータ識別子を選択するか、バインディング式を入力します。「OK」をクリックします。
コンポーネントを新規バリデータ・メソッドにバインドする手順は、次のとおりです。
ビジュアル・エディタで、入力コンポーネントをダブルクリックします。「バインドValidatorプロパティ」ダイアログが表示されます。
「マネージドBean」ドロップダウン・リストからマネージドBeanを選択します。新規マネージドBeanを作成する場合は「新規...」をクリックします。
「メソッド」に新規メソッドの名前を入力するか、デフォルトの名前をそのまま使用します。
「OK」をクリックします。バッキングBeanにデフォルトのバリデータ・メソッド・コードが挿入され、バッキングBeanの.javaファイルがソース・エディタで開きます。カーソルは、新規メソッドに置かれます。
ソース・エディタで、バリデータ・メソッドのコードを入力します。
例11-15 新規バリデータ・メソッドにバインドされたコンポーネントのコード例
自動コンポーネント・バインディングが無効な状態のJSFページ
<h:selectOneMenu validator="#{nonauto.validatename1}">
<f:selectItems value=""/
</h:selectOneMenu>
デフォルトのバリデータ・メソッド・コード
...
public void validatename1(FacesContext facesContext, UIComponent uiComponent, Object object)
{
// Add event code here...
}
...
自動コンポーネント・バインディングが有効な状態のJSFページ
<h:selectOneMenu binding="#{backing_auto.selectOneMenu1}"
validator="#{backing_auto.selectOneMenu_validator}">
<f:selectItems value="" binding="#{backing_auto.selectItems2}"/>
</h:selectOneMenu>
デフォルトのバリデータ・メソッド・コード
...
public void selectOneMenu_validator(FacesContext facesContext, UIComponent uiComponent, Object object)
{
// Add event code here...
}
...
JSF標準コンバータおよびバリデータのタグと構文
JDeveloperでサポートされているすべての属性を表11-11および表11-12に示します。大カッコ([ ])で囲まれている属性は必須ではありません。事前定義の受入れ可能な全属性値が縦線(|)で区切られ、デフォルト値は太字で表示されます。受け入れられる固定の値セットがない属性については、値がイタリック体で表示されます。
表11-11 JSF標準コンバータのタグ
| タグ | 構文 |
|---|---|
|
f:convertDateTime |
<f:convertDateTime [dateStyle="default|short|medium|long|full"] [timeStyle="default|short|medium|long|full"] [pattern="pattern"] [type="time|date|both"] [locale="locale"] [timezone="timezone"] /> |
|
f:convertNumber |
<f:convertNumber [pattern="pattern"] [minIntegerDigits="min"] [maxIntegerDigits="max"] [minFractionDigits="min"] [maxFractionDigits="max"] [groupingUsed="true|false"] [integerOnly="true|false"] [type="number|currency|percent"] [currencyCode="currencyCode"] [currencySymbol="currencySymbol"] [locale="locale"] |
属性を定義するためのプロパティ・インスペクタおよびMessageコンポーネントを使用してエラー・メッセージを作成および定義します。
エラーを生成したコンポーネントの横に1つのエラー・メッセージを表示する手順は、次のとおりです。
ビジュアル・エディタでJSFページを開きます。
メッセージを表示するコンポーネントに一意のIDを割り当てます。IDの割当てには、プロパティ・インスペクタを使用します。
コンポーネント・パレットで、ドロップダウン・リストから「JSF」を選択し、Messageをページにドラッグ・アンド・ドロップし、メッセージを表示するコンポーネントの横に配置します。メッセージを表示するコンポーネントのIDを入力するためのダイアログが表示されます。
For*の横にある列をクリックして、コンポーネントのIDを入力します。次に、「OK」をクリックします。
プロパティ・インスペクタで、メッセージ・タグの属性を設定します。
例11-16 コンポーネントの横にあるエラー・メッセージのコード例
<h:panelGrid columns="3>
<h:outputLabel for="enum" value="Enter employee number: "/>
<h:inputText id="enum" converter="javax.faces.Long" >
<f:validateLength minimum="5" maximum="9"/>
</h:inputText>
<h:commandButton value="submit"/>
<h:message for="enum"/>
</h:panelGrid>
|
ヒント: コンポーネントの詳細メッセージが実行時にツールチップとして表示されるようにするには、メッセージ・タグのtooltip属性をtrueに設定します。タグのshowSummaryおよびshowDetail属性もtrueに設定する必要があります。ADFデータ・コントロールを使用してJSFのフォームや表を作成している場合、デフォルトですべてのエラー・メッセージを表示するh:messagesタグが自動的に追加されます。個々のh:messageタグを手動で追加する必要はありません。 |
ページで生成されたすべてのエラー・メッセージを表示する手順は、次のとおりです。
ビジュアル・エディタでJSFページを開きます。
コンポーネント・パレットで、ドロップダウン・リストから「JSF」を選択し、Messagesをページにドラッグ・アンド・ドロップし、ページの最上部に配置します。
プロパティ・インスペクタで、Messagesタグの属性を設定します。
|
ヒント: コンポーネントに関連付けられていないグローバル・メッセージのみを表示する場合は、globalOnly属性をtrueに設定します。ADFデータ・コントロールを使用してJSFのフォームや表を作成している場合、JDeveloperでは、h:messagesタグが自動的に追加されます。タグを手動で追加する必要はありません。 |
JSFの標準メッセージ・テキストを置換する手順は、次のとおりです。
置換テキストに対するキーと値のペアを含んだプロパティ・リソース・バンドルを作成し、このバンドルをアプリケーションのクラスパスに配置します。
アプリケーション・ナビゲータで、「faces-config.xml」をダブルクリックしてJSF構成エディタで開きます。「概要」モードに移動します。
「アプリケーション」をクリックします。
「メッセージ・バンドル」で、メッセージ・リソース・バンドルの完全修飾パス(例: model.login.Resources)に追加します。
JSFページで、エラー・メッセージを1つ表示するにはh:messageタグを使用し、エラー・メッセージをすべて表示するにはh:messagesタグを使用します。JSFでは、JSF標準バンドルが検索される前に、登録されているリソース・バンドル内のメッセージが検索されます。この方法で、リソース・バンドルで適切なキーを使用して、JSF標準メッセージをオーバーライドできます。メッセージのリストは、JSF API javax/faces/Messages.propertiesを参照してください。
メッセージの対象のフォーム・フィールドに関する情報を追加する手順は、次のとおりです。
汎用属性を取得してメッセージに追加するPhaseListener実装を作成します。
アプリケーション・ナビゲータで、「faces-config.xml」をダブルクリックしてJSF構成エディタで開きます。必要な場合は、「概要」モードに切り替えます。
「ライフ・サイクル」をクリックし、「新規」をクリックしてカスタム・フェーズ・リスナーを追加します。
「フェーズ・リスナーの作成」で、フェーズ・リスナー実装の完全修飾パスを入力するか、または「参照」をクリックしてパスを選択します。
JSFページを開き、対象の入力コンポーネントを探します。
コンポーネント・パレットで、ドロップダウン・リストから「JSF Core」を選択し、Attributeを入力コンポーネントにドラッグ・アンド・ドロップします。必要な汎用属性の情報を入力するためのダイアログが表示されます。
JSFページのエラー・メッセージの表示形式を変更する手順は、次のとおりです。
ビジュアル・エディタで、選択したJSFページを開きます。
CSSスタイルシートをページにリンクします。
h:messageまたはh:messagesコンポーネントを選択します。
プロパティ・インスペクタで、特定のタイプのメッセージに適用するCSSクラスを設定します。たとえば、重大度レベルが「ERROR」のメッセージで特定のスタイルシートを使用する場合は、CSSファイルに定義されているスタイル・クラスの名前をErrorClass属性に設定します。この手順を実行するには、プロパティ・インスペクタでErrorClassの隣の列をクリックして、スタイル・クラスを選択します。
|
注意: 1つ以上のインライン・スタイルを使用するには、プロパティ・インスペクタでErrorStyleを開き、指定するスタイルの横(例: background-color)に値を入力するか、または選択します。 |
例11-18 エラー・メッセージの表示形式の変更のコード例
In CSS file: mystyles.css:
.error {
font-style: italic;
color:red;
}
.prompt {
color:blue;
}
In the JSF file:
...
<f:view>
<html>
<head>
<link media="screen" rel="stylesheet" href="css/mystyles.css"/>
</head>
<body>
<form>
<h:inputText id="someid" value="{somebean.someproperty}"/
<h:message for="id" errorClass="error"/>
<h:outputText value="{}" styleClass="prompt"/>
...
</form>
</body>
</html>
</fview>
...
マネージドBean、カスタム・バリデータ、コンバータなどのJSFアプリケーションのリソースを登録し、アプリケーション構成ファイルでナビゲーション・ルールを定義します。通常、このJSF構成ファイルの名前はfaces-config.xmlです。
JSFでは、単一のfaces-config.xmlファイルに複数の<application>要素を含めることが可能です。JSF構成ファイルの概要エディタで編集できるのは、ファイル内の最初のインスタンスのみです。他の<application>要素については、XMLソース・エディタを使用してファイルを直接編集する必要があります。
参照先Beanはfaces-config.xmlファイル内に構成します。このファイルにBeanを宣言することで、設計時ツールは、設計時には使用できないが、実行時に使用できるBean(データ・アクセスなど)を理解できます。
JSF Webアプリケーション・テンプレートのいずれかを使用してアプリケーションを作成すると、WEB-INF/faces-config.xmlファイルが自動的に作成されます。ただし、複数のJSF構成ファイルを設定することもできます。アプリケーションの別の領域に個別の構成ファイルが必要な場合は、複数の構成ファイルを設定できます。また、カスタム・コンポーネントまたはカスタム・レンダラ(あるいはその両方)を含むパッケージ化されたライブラリを使用する場合は、ライブラリごとに個別のfaces-config.xmlファイルが必要です。その場合、構成ファイルは、(WEB-INFディレクトリではなく)META-INFディレクトリに格納されます。
構成ファイルの概要エディタを使用して<application>要素を設定する手順は、次のとおりです。
JSF構成ファイルの概要エディタを開きます。
左側の列で、「アプリケーション」を選択します。エディタのメイン領域には、構成する各子要素が表示されます。要素の値を指定しない場合は、デフォルトのJSF実装クラスが使用されます。
メイン領域で、テキスト・フィールドに子要素に対応するクラス名を移入します。完全修飾クラス名を値として取得するすべての要素について、「参照」ボタンを使用すると、クラス・ブラウザを起動してクラスを検索できます。フィールドを終了すると、値がXMLファイルに移入されます。
JSF構成エディタを使用して構成ファイルにBeanを追加する手順は、次のとおりです。
アプリケーション・ナビゲータで、「faces-config.xml」ファイルをダブルクリックします。このファイルは、Web Content/WEB_INFディレクトリにあります。
ウィンドウの最下部で、「概要」タブを選択します。JSF構成エディタ・ウィンドウが表示されます。
左側にある要素リストから「参照先のBean」を選択します。
「新規」、「編集」および「削除」ボタンを使用して、Beanを構成します。
構成ファイルにBeanを手動で追加する手順は、次のとおりです。
アプリケーション・ナビゲータで、「faces-config.xml」ファイルをダブルクリックします。このファイルは、Web Content/WEB_INFディレクトリにあります。
ウィンドウの下部にある「ソース」タブを選択します。ファイルがXMLソース・エディタで開きます。
参照先Beanの要素を追加します。
新規のJSF構成ファイルを作成する手順は、次のとおりです。
アプリケーション・ナビゲータで、新規の構成ファイルを追加するプロジェクトを選択します。プロジェクトにはWEB-INFノードが含まれ、このノードにweb.xmlファイルが含まれています。
プロジェクト・ノードを右クリックし、ポップアップ・メニューから「新規」を選択します。
新規ギャラリで、「カテゴリ」ツリーに進み、「Web層」ノードを開き、「JSF/Facelets」を選択します。
「項目」リストで、JSFページ・フローと構成を選択します。
「OK」をクリックします。JSF構成ファイルの作成ダイアログが開きます。
構成ファイルの目的に従って、値を設定します。アプリケーションの構成ファイルを追加する場合:
新規構成ファイルの「ファイル名」を入力します。
「ディレクトリ」を確認または変更します。
「参照をWeb.xmlに追加」チェック・ボックスの選択を解除します。選択すると、新規ファイル名がweb.xmlに追加され、アプリケーションの構成の一部としてJSFで読み込まれるようになります。
「OK」をクリックします。これによって、入力した名前を使用して新規の構成ファイルが作成されます。
カスタム・コンポーネント、またはライブラリの.jarで提供された他のJSFクラスの構成ファイルを作成する場合:
ファイル名を「faces-config.xml」に設定します。
「ディレクトリ名」を「META-INF」に変更します。
「参照をWeb.xmlに追加」チェック・ボックスの選択を解除します。
「OK」をクリックします。これによって、入力した名前を使用して新規の構成ファイルが作成されます。この構成ファイルは、コンポーネントまたはクラスの配布に使用する.jarファイルに含めることができます。
JSF構成ファイルの編集:
アプリケーション・ナビゲータで、編集する構成ファイルを検索します。デフォルトの構成ファイルはfaces-config.xmlです。このファイルは、JSFプロジェクトのWEB-INFノードにあります。
ファイルをダブルクリックして開きます。
デフォルトでは、ナビゲーション・ダイアグラマが表示されます。エディタを選択するには、エディタ・ウィンドウ下部にあるタブの1つをクリックします。次のようにします。
JSFナビゲーション・ダイアグラマ: 「ダイアグラム」をクリックします。
JSF構成ファイルの概要エディタ: 「概要」をクリックします。
XMLソース・エディタ: 「ソース」をクリックします。
履歴ツール: 「履歴」をクリックします。
JDeveloperには、統合WebLogic Serverが用意されています。このサーバーを使用すると、IDEからWebアプリケーションを実行およびテストできます。特別な接続設定は必要ありません。アプリケーション・プロジェクト全体または個々のJSFページを実行します。
個々のページを実行およびテストするには、次のようにします。
ナビゲータまたはJSFナビゲーション・ダイアグラム(faces-config.xml)で、実行するJSFページを選択します。
JSFページを右クリックし、コンテキスト・メニューから「実行」を選択します。デフォルトのブラウザにJSFページが表示されます。これがドメインを実行または起動する初めての機会であるときにサーバーがまだ作成されていない場合、「デフォルト・ドメインの構成」ダイアログに新規パスワードを入力するよう求められます。
プロジェクト全体を実行およびテストするには、次のようにします。
ナビゲータで、アプリケーション・プロジェクト(例: ViewController)を選択します。
プロジェクトを右クリックし、コンテキスト・メニューから「実行」を選択します。デフォルトのブラウザでアプリケーションが起動します。
これがドメインを実行または起動する初めての機会であるときにサーバーがまだ作成されていない場合、「デフォルト・ドメインの構成」ダイアログが表示されます。新規パスワードを入力します。
プロジェクトを実行するには、最初にデフォルトの実行ターゲットを指定する必要があります。指定されていない場合、JDeveloperでは、最初にプロジェクトを実行するときにデフォルトの実行ターゲットを入力するようにプロンプトで要求されます。デフォルトの実行ターゲットを指定するには、プロジェクト・プロパティを編集する方法もあります。
IDEからJSFアプリケーションを実行すると、JDeveloperでは、次の処理が自動的に行われます。
アプリケーションをコンパイルします。
統合WebLogic Serverプロセスを開始し、デフォルトのアドレスを使用してデフォルトのブラウザでアプリケーションを起動します。
次に例を示します。
http://127.0.0.1:8988/myproject-ViewController-context-root/faces/home.jsp
127.0.0.1はyour_machine_IP_address、8988はhttp_portです。
プロジェクト・プロパティで、デフォルトのアプリケーション名とWebコンテキスト・ルートを変更できます。
JDeveloperは、HTML 4.01 W3Cの仕様(http://www.w3.org/TR/html401/)に準拠したHTMLテクノロジを使用した開発を完全にサポートしています。
JDeveloperでは、HTMLページの作成と編集用として、統合および同期化された設計ツールおよびコンポーネントの完全セットが用意されています。HTMLソース・エディタおよびビジュアル・エディタの詳細は、第11.1.1項「ソース・エディタの機能について」および第11.1.2項「ビジュアル編集環境での作業方法」を参照してください。
HTML Webページの使用を開始するには、最初にWebアプリケーションを作成する必要があります。使用可能なアプリケーション・タイプを確認するには、表11-6「Webアプリケーション・テンプレート」を参照してください。
Webアプリケーション・フレームワークを作成したら、HTMLページの構築を開始できます。
HTMLコア・コンポーネント
HTMLページを構築する場合、コンポーネント・パレットを使用して、一般的に使用されるほとんどのタグをクリックしたりページにドラッグ・アンド・ドロップします。JDeveloperには、一般的に使用される一連のHTML要素タグや、ユーザー入力の属性および動作を追加するための一連のフォーム・タグが用意されています。
表11-13 HTML Commonのコンポーネント
| タグ名 | 説明 |
|---|---|
|
Anchor |
名前付きアンカー<A name>非表示要素を挿入します。 |
|
Applet |
Javaアプレットをページに埋め込みます。 |
|
Email Link |
指定した電子メール・アドレスを使用するHTMLの<A>要素をページに挿入します。 |
|
Horizontal Rule |
ページ内の現在のカーソル位置にHTMLの<hr>要素を挿入して、水平線を表示します。 |
|
Hyper Link |
定義するHTML参照にリンクを挿入します。 |
|
Image |
HTMLの<img>要素を追加して、イメージをページに挿入します。 |
|
Line Break |
改行を挿入します。 |
|
Link |
外部スタイルシートまたは他の任意の外部ドキュメントにリンクを挿入します。 |
|
NoScript |
HTML<noscript>要素を使用してスクリプトが実行されない場合に代替のコンテンツを提供します。 |
|
Script |
<script>要素とカスタム・コードをページに埋め込みます。VBScript、Tcl、JavaScriptなど任意のスクリプト言語のコードを使用します。 |
|
Style |
内部スタイルシートをドキュメントに埋め込みます。 |
|
表 |
ページにスケルトンHTMLの<table>タグを挿入します。 |
表11-14 HTML Formsのコンポーネント
| タグ名 | 説明 |
|---|---|
|
Button |
type属性を指定したHTMLの<button>要素を挿入して、プッシュ・ボタンを作成します。 |
|
CheckBox |
type属性を指定したHTMLの<input>要素を挿入して、フォームにチェック・ボックス・コントロールを作成します。 |
|
Combo Box |
オプションの選択肢のフォーム・コントロールを定義するselect要素を挿入します。 |
|
FieldSet |
フォーム・コントロール・グループを定義するfieldset要素を挿入します。作成者は、関連するフォーム・コントロールをグループ化することにより、フォームをより小さく管理しやすい部分に分割し、フォーム・コントロールが多すぎるユーザーに直面した際に生じる操作性に関する問題を改善します。 |
|
File Field |
type属性を指定したHTMLの<input>要素を挿入して、ファイル選択コントロールを作成します。ファイル選択コントロールでは参照ボタンとフィールドが作成されるため、ユーザーがフォームで送信するファイルを選択できます。 |
|
Form |
HTML <form>タグを挿入して、フォーム処理情報をページに挿入します。 |
|
Hidden Field |
type属性を指定したHTMLの<input>要素を挿入し、フォーム内に非表示コントロールを作成します。 |
|
Image Button |
type属性を指定したHTMLの<input>要素を挿入して、グラフィカルな送信ボタンを作成します。 |
|
Input Button |
type属性を指定したHTMLの<input>要素を挿入して、プッシュ・ボタンを作成します。プッシュ・ボタンにはデフォルトの動作はありません。 |
|
IsIndex |
HTML <isindex>タグを挿入して、1行テキスト入力コントロールを作成する際に使用します。この要素は推奨されていません。作成者は<input>要素を使用してください。 |
|
ListBox |
HTMLの<select>要素を使用して、<option>要素によって表示される選択メニューを作成します。 |
|
Password Field |
type属性を指定したHTMLの<input>要素を挿入して、パスワード・フィールドを作成します。 |
|
Radio Button |
type属性を指定したHTMLの<input>要素を挿入して、フォーム内にラジオ・ボタン・コントロールを作成します。 |
|
Reset Button |
type属性を指定したHTMLの<input>要素を挿入して、リセット・ボタンを作成します。このボタンはすべてのコントロールを初期値にリセットします。 |
|
Spinner |
HTMLの<select>要素を挿入して、<option>要素によって表示される選択メニューを作成します。<select>要素には、<option>要素を少なくとも1つ含める必要があります。 |
|
Submit |
type属性を指定したHTMLの<input>要素を挿入して、フォームを送信するボタンを作成します。 |
|
Text Area |
HTMLの<textarea>要素を挿入して、複数行テキスト入力フィールドを作成します。 |
|
Text Field |
type属性を指定したHTMLの<input>要素を挿入して、テキスト・フィールドを作成します。 |
HTMLページを作成するには、次のようにします。
新規ギャラリ・ウィザードでは、アプリケーションのWebページ・フレームワークを構築するために必要なすべてのステップが段階的に説明されます。
アプリケーション・ナビゲータで、HTMLページを作成するプロジェクトを選択します。
「ファイル」→「新規」を選択し、「新規ギャラリ」を開きます。
図11-19に示すように、「カテゴリ」ツリーで、「Web層」を開いて「HTML」を選択します。
図11-20に示すように、「ディレクトリ」フィールドは変更せず、Webアプリケーション・ファイルが検索されるディレクトリに作業内容を保存します。「ファイル名」フィールドに、生成するファイルの名前を入力し、「OK」をクリックします。単純なHTMLファイルが生成され、アクティブなプロジェクトに表示されます。デプロイメント・ディスクリプタ・ファイルweb.xmlもプロジェクトに追加されます。デプロイメント・ディスクリプタ・ファイルは、HTMLの実行時に統合WebLogic Serverで使用されます。
JSPファイルをHTMLとして保存するには、次のようにします。
ソース・エディタでJSPファイルを開き、「ファイル」→「HTMLとして保存」を選択して、JSPページをHTMLページとして保存できます。
「HTMLとして保存」オプションを使用すると、元のファイルを変更せずに、元のファイルのコピーにHTMLの拡張子を付けて保存されます。HTMLファイルではテキスト・フォーマットが維持されるため、ブラウザやブログでのコードの一部として表示する場合に、同様の表示形式で表示されます。保存したHTMLファイルをもう一度開いてHTMLとして表示できますが、コードとして解釈されなくなります。
複数のWebページのスタイルおよびレイアウトを制御するには、Cascading Style Sheet (CSS)を使用します。CSSスタイルを使用すると、HTMLタグの書式属性、クラス属性によって識別されるテキストの範囲、Cascading Style Sheet (CSS2)仕様に準拠した基準を満たすテキストなどを定義できます。CSSの詳細は、http://www.w3.org/TR/1998/REC-CSS2/にあるW3C Webページを参照してください。
JDeveloperには、CSSの開発用として次のツールが用意されています。
Java対応のコード・インサイト編集機能の完全なセットを提供するCascading Style Sheetソース・エディタ。
ADFスキンを作成および変更できるADFスキン・エディタ。ADFスキンは、ADFアプリケーションのルック・アンド・フィールを定義するCSSファイルの1つのタイプです。
新規HTMLページを作成するためのウィザード。
HTMLページを編集するためのソース・エディタおよびビジュアル・エディタ。
HTMLページまたはJSPページにCSSファイルをリンクするドラッグ・アンド・ドロップ。
CSSセレクタのプロパティと値を設定または変更するためのプロパティ・インスペクタ。
編集時に使用可能なオプションを提供してコードを補完するためのコード・インサイト。
グループ化によってCSS要素をソートおよび表示するための「構造」ウィンドウ。
表11-15に、Cascading Style Sheetソース・エディタの機能をリストします。
表11-15 CSSソース編集機能
| 機能 | 説明 |
|---|---|
|
CSSのコード・インサイト |
カーソルの下にあるCSSファイルに対して適切な補完を選択するために、HTMLセレクタ、プロパティ、値、擬似クラスおよび擬似要素のリストを表示します。たとえば、スタイル・ルールの開きカッコの後ろにカーソルを置くと、ファイル内のその場所に入力できるすべてのプロパティのリストが表示されます。 |
|
CSSの再フォーマット |
そのCSSページ上のコードを正しく再フォーマットします。CSSエディタでファイルを右クリックするか、アプリケーション・ナビゲータで「再フォーマット」を選択します。 |
|
CSSエラー処理 |
無効なCSSプロパティ、値および欠落しているセミコロンやカッコを強調表示します。 |
|
HTMLファイルに対するスタイルシートのリンク |
コンポーネント・パレットで、HTMLパレットの「共通」ページを選択し、リンク要素をHTMLページにドロップするだけでスタイルシートをHTMLファイルにリンクできます。 もう1つのオプションとしては、コンポーネント・パレットで「CSS」を選択します。使用可能なCSSファイルのリストがコンポーネント・パレットに表示されます。これにより、任意のCSSファイルをコンポーネント・パレットからページにドラッグ・アンド・ドロップできます。 |
|
スタイルのプレビュー |
コーディング時にスタイルがどのように表示されるかを確認します。 |
|
コード・カラー |
プロパティ、値およびキーワードを簡単に特定できます。 |
|
CSSのリファクタ |
CSSファイル、クラスおよびID属性の名前を変更する場合やファイルを移動、コピーおよび安全に削除する際にアプリケーション全体にわたってリファクタします。 |
|
CSSコード・エディタでのカッコの一致 |
コード・エディタでカーソルの位置に基づいて一致する中カッコ、大カッコおよび小カッコをハイライト表示します。 |
|
行コメントの設定 |
選択したブロックの各行の先頭にあるコメント・マーカーを追加または削除します。単一行を選択してこの行のみをコメント化または非コメント化します。 |
|
クイック・ドキュメント |
W3C標準から説明を開きます。 |
編集のためにCSSファイルを開くと、ファイル内のCSSセレクタが次のタイプ・アイコンで「構造」ウィンドウに表示されます。
要素
CSSセレクタで定義されたHTML要素またはタグ。プロパティと値は、コロンで区切って中カッコで囲みます。たとえば、body {color:black;.}となります。
クラス 
同じタイプのHTML要素に対して定義された様々なスタイル。たとえば、p.right {text-align:right;}は右揃えの段落テキスト、p.left {text-align:left;}は左揃えの段落テキストを意味します。また、セレクタにタグ名を含めなければ、特定のクラスのHTML要素すべてで使用されるスタイルを定義できます。たとえば、.center {text-align:center;}はclass="center"が指定されたすべてのHTML要素が中央揃えになることを意味します。
ID
1つのHTML要素に固有のスタイル。たとえば、p#para1 {color:green;}はid value="para1が指定されたp要素、*#ver905 {background-color:red;}はid value="ver905"が指定された最初のHTML要素を意味します。
要素のグループ化ツール
構造ウィンドウ・ツールバーの「カテゴリ」ドロップダウン・リストを使用すると、CSSセレクタをカテゴリ別に表示できます。
カテゴリなし
CSSファイルでの出現順に表示します。デフォルト設定です。
タイプ・カテゴリ
CSSセレクタのタイプ(「要素」、「クラス」または「ID」)別に並べ替えます。
要素カテゴリ
HTML要素またはタグ別に並べ替えます。
構造ウィンドウでCSSセレクタを選択すると、そのセレクタがCSSファイル内でハイライト表示され、関連するプロパティおよび値がプロパティ・インスペクタに表示されて編集可能になります。
「構造」ウィンドウでセレクタ・カテゴリを分離またはグループ化解除するには、「グループ化したセレクタの分離」アイコンを選択します。
CSSファイル内で選択した要素をコメント・アウトするには、要素グループを選択し、右クリックして「コメント・アウト」を選択します。
新規ギャラリ・ウィザードを使用してCSSスタイルシートを作成できます。作成した後、スタイルシートをWebページにドラッグ・アンド・ドロップしてスタイルシートをリンクします。ソース・エディタとともにコード・インサイトを使用して、CSSコードで変更を直接行い、プロパティ・インスペクタでセレクタ・プロパティおよび値を編集します。
|
注意: 「プレビュー」タブは、ソース・エディタの「ソース」タブの近くにあります。これを使用して、「ソース」タブに入力したCSSフォーマットがどのように表示されるかを確認できます。 |
単純なCascading Style Sheetを作成するには、次のようにします。
アプリケーション・ナビゲータで、新しいスタイルシートの作成先となるプロジェクトを選択します。
「ファイル」→「新規」を選択して「新規ギャラリ」を開きます。
「カテゴリ」ツリーで「Web層」を開き、「HTML」を選択します。
「項目」リストで「CSSファイル」をダブルクリックし、「CSSファイル」ダイアログを開きます。
「ディレクトリ名」フィールドは変更せず、JDeveloperがWebアプリケーション・ファイルを検索するディレクトリに作業内容を保存します。
「ファイル名」フィールドに、生成するファイルの名前を入力し、「OK」をクリックします。単純なCSSファイルが生成され、「Webコンテンツ」の下にあるアクティブ・プロジェクトの中の「CSS」フォルダに表示されます。
CSSセレクタのプロパティと値を設定または変更するには、次のようにします。
CSSファイルの構造ウィンドウで、プロパティの設定先となるCSSセレクタ要素、クラスまたはIDを選択します。
プロパティ・インスペクタで、目的のプロパティが表示されるまでスクロールします。長いリストの中からプロパティを素早く見つけるには、プロパティ・インスペクタ・ツールバーの検索ボタンをクリックします。「検索」テキスト・フィールドにプロパティ名を入力し、[Enter]を押します。右側の列に、次のいずれかの方法でプロパティ値を入力します。
プロパティの文字列値をテキスト・フィールドに入力し、[Enter]を押します。
値フィールドのボタンをクリックし、表示されたリストから値を選択します。
値フィールドをクリックし、省略記号ボタンを表示します。省略記号をクリックし、該当するプロパティのエディタを表示します。プロパティ・エディタで値を設定し、「OK」をクリックします。セレクタの値が変更され、このCSSファイルにリンクされているページにスタイルの変更が反映されます。
テキスト・フィールドにプロパティの文字列値を入力し、[Enter]を押します。
ソース・エディタでCSSファイルを編集するには、次のようにします。
アプリケーション・ナビゲータでCSSファイルをダブルクリックし、デフォルトのソース・エディタ・ウィンドウで開きます。
定義するCSSセレクタ(HTML要素、クラスまたはID)を入力します。
左中カッコ({)を入力し、[Ctrl]を押しながら[Space]を押し(デフォルトのキーマッピングを使用している場合)、コード・インサイトを起動します。
有効なプロパティのリストにあるプロパティ名をダブルクリックします。選択したプロパティがファイルに挿入され、その後にコロンとスペースが入力されます。たとえば、{background-color:となります。
挿入したプロパティの値を入力するには、[Ctrl]を押しながら[Space]を押して、有効な値のリストを開き、挿入する値をダブルクリックします。選択した値が挿入され、その後にセミコロンが入力されます。たとえば、body {text: blue;となります。
必要に応じて他のプロパティと値を追加します。プロパティ値と次のプロパティは必ずセミコロンで区切ってください。たとえば、p {text-align:center; color:red;となります。
プロパティと値をすべて追加したら、右中カッコ(})を入力します。
|
注意: 編集中に発生したCSS構文エラーはすべて構造ウィンドウに表示されます。 エラーまたは要素を構造ウィンドウでダブルクリックし、ソース・エディタで編集します。 |
ビジュアル・エディタを使用して、表を使用してHTMLページ上のデータをレイアウトします。一度表を作成すれば、表の外観と構造は簡単に変更できます。表を編集すると、テキストとイメージの追加、行と列の追加、削除、サイズ変更、並替え、分割およびマージ、色と配置に関する表、行またはセルのプロパティ変更、セルのコピーと貼付け、および表セルでの表のネストが可能になります。
表セルにテキストを追加するには、次のようにします。
テキストの追加先となるセルの中をクリックし、点滅するカーソルが現れたら次のいずれかの操作を行います。
表にテキストを入力します。入力に伴い、表セルが自動的に拡張します。
別のページからコピーしたテキストを貼り付けます。
[Tab]を押して次のセルに移動するか、[Shift]を押しながら[Tab]を押して前のセルに移動します。表の最後のセルで[Tab]を押すと、表にもう1行自動的に追加されます。
表セルを挿入ポイントとして使用し、グラフィックやその他のUIおよびデータ要素を表に追加したり、表から削除することができます。
1つ以上のセルからコンテンツを削除するにはセルを選択して、次のようにします。
[Del]または[Back Space]を押します。
または
メイン・メニューから「編集」→「削除」を選択します。
セル自体ではなく、セルのコンテンツのみが表から削除されます。行または列全体が選択されている場合、表の構造が変更され、選択されている行または列がセルのコンテンツとともに削除されます。
設計ツールを使用して、HTML表、行、列およびセルのプロパティを設定します。プロパティ・インスペクタ、「表の編集」ダイアログまたはビジュアル・エディタのツールバーを使用して、表要素プロパティを設定します。
設計ツールを使用して表の書式設定を行う際には、表全体に適用されるプロパティと、表で選択したセル、行または列のみに適用されるプロパティを定義できます。背景色や位置などのプロパティに、表全体と個々の表セルとで異なる値を設定する場合、書式設定情報には次の優先順位が適用されます。
表のセル(<td>タグ)
表の行(<tr>タグ)
表(<table>タグ)
個々のセルに緑の背景色を指定した後、表全体の背景色を赤に設定しても、<td>タグは<table>タグより優先順位が高いため、緑のセルは赤に変わりません。
プロパティ・インスペクタを使用して表とセルのプロパティを設定するには、次のようにします。
ビジュアル・エディタで表、行またはセルを選択するか、「構造」ウィンドウで対応する<table>、<tr>または<td>を選択します。選択した要素のプロパティ値が「プロパティ・インスペクタ」に表示されます。プロパティ・インスペクタが表示されていない場合は、「表示」→「プロパティ・インスペクタ」を選択するか、ショートカット([Ctrl]+[Shift]+[I])を使用します。
|
ヒント: 長いリストの中からプロパティを素早く見つけるには、プロパティ・インスペクタ・ツールバーの検索ボタンをクリックします。「検索」テキスト・フィールドにプロパティ名を入力し、[Enter]を押します。 |
右側の列に、次のいずれかの方法でプロパティ値を入力します。
プロパティの文字列値をテキスト・フィールドに入力し、[Enter]を押します。
値フィールド内をクリックし、表示されたリストから値を選択します。
値フィールドをクリックし、省略記号ボタンを表示します。省略記号をクリックし、該当するプロパティのエディタを表示します。プロパティ・エディタで値を設定し、「OK」をクリックします。
ビジュアル・エディタ・ツールバーを使用して表とセルのプロパティを設定するには、次のようにします。
ビジュアル・エディタで表、行またはセルを選択します。また、「構造」ウィンドウで対応する<table>、<tr>、<td>を選択することもできます。
標準ツールバー編集アイコンを使用して、位置合せやインデント/アウトデントなどのプロパティを設定します。
表のサイズを変更するには、次のいずれかの操作を行います。
ビジュアル・エディタで表を選択し、サイズ変更ハンドルを使用して目的のサイズになるまで表の高さまたは幅(あるいはその両方)をドラッグします。
ビジュアル・エディタで表を選択するか、構造ウィンドウで対応する<table>要素を選択し、プロパティ・インスペクタで表のwidth属性を設定します。
ビジュアル・エディタで表をダブルクリックし、「表の編集」ダイアログで表の幅(ピクセル単位)またはページ幅に対する割合を設定しなおします。
ビジュアル・エディタで表を右クリックするか、「構造」ウィンドウで対応する<table>要素を右クリックし、ポップアップ・メニューから「タグの編集」を選択して「表の編集」ダイアログを表示します。
行または列のサイズを変更するには、次のようにします。
ビジュアル・エディタで、行または列をサイズ変更する表を含むページを開きます。
ビジュアル・エディタで、行または列をサイズ変更する表を含むページを開きます。サイズ変更する行または列の枠線にカーソルを置き、水平方向の枠線ハンドルまたは垂直方向の枠線ハンドルが表示された後でクリックします。
目的のサイズになるまで行または列の枠線をドラッグし、マウスを放します。
行または列を表に追加するには、次のようにします。
ビジュアル・エディタで表セルを選択するか、構造ウィンドウで対応する<td>要素を選択します。
選択した表セルまたは要素を右クリックし、ポップアップ・メニューから「表」を選択します。
次のいずれかを選択します。
表セルが選択されている行の上に1行追加する場合は、「行の挿入」を選択します。
表セルが選択されている列の前に1列追加する場合は、「列の挿入」を選択します。
複数の行または列を追加する場合や、行または列の追加位置を指定する場合は、「行または列の挿入」を選択して「行または列の挿入」ダイアログを表示します。次に、「OK」をクリックします。
表の行または列を削除するには、次のようにします。
ビジュアル・エディタで表セルを選択するか、構造ウィンドウで対応する<td>要素を選択します。
選択した表セルまたは要素を右クリックし、ポップアップ・メニューから「表」を選択します。
次のいずれかを選択します。
表セルが選択されている行を削除する場合は、「行の削除」を選択します。
表セルが選択されている列を削除する場合は、「列の削除」を選択します。
ビジュアル・エディタで行または列を1つ以上選択するか、「構造」ウィンドウで対応する<tr>要素を選択し、次のいずれかの操作を行うこともできます。
[Del]または[Back Space]を押します。
メイン・メニューから「編集」→「削除」を選択します。表の最後の行を削除すると、表全体が削除されます。
表セルをマージするには、次のようにします。
ビジュアル・エディタで表セルを選択するか、「構造」ウィンドウで対応する<td>要素を選択します。四角形を描くようにして、連続したセルを選択してください。
選択した表セルまたは要素を右クリックし、ポップアップ・メニューから「表」を選択した後、「セルの結合」をクリックします。
または
メイン・メニューで、「設計」を選択し、「表」を選択し、「セルの結合」をクリックします。個々のセルのコンテンツがマージ後のセルに挿入されます。
表セルを分割するには、次のようにします。
ビジュアル・エディタで表セルを選択するか、「構造」ウィンドウで対応する<td>要素を選択します。
選択した表セルまたは要素を右クリックし、ポップアップ・メニューから「表」を選択した後、「セルの分割」をクリックします。
または
メイン・メニューで、「設計」を選択し、「表」を選択し、「セルの分割」をクリックします。
「セルの分割」ダイアログで、セルを行に分割するのか、列に分割するのかを選択し、行または列の数を入力します。
「OK」をクリックします。
ビジュアル・エディタを使用して行、列または表セルのグループの表示順序を変更するには、次のようにします。
HTML表での順序を変更する行、列、または表セルのグループを選択します。四角形を描くようにして、連続したセルを選択してください。
次のいずれかを実行して、行、列または表セルのグループを表の新しい位置にドラッグします。
ターゲット行の上に挿入する場合、挿入する行またはセル・グループを上方向にドラッグして、上矢印付きの横線が表示された後でマウス・ボタンを放します。
ターゲット行の下に挿入する場合、挿入する行またはセル・グループを下方向にドラッグして、下矢印付きの横線が表示された後でマウス・ボタンを放します。
ターゲット列の前に挿入する場合、挿入する列またはセル・グループを左方向にドラッグして、左矢印付きの縦線が表示された後でマウス・ボタンを放します。
ターゲット列の後に挿入する場合、挿入する列またはセル・グループを右方向にドラッグして、右矢印付きの縦線が表示された後でマウス・ボタンを放します。
構造ウィンドウを使用して行の表示順序を変更するには、次のようにします。
表での順序を変更する<tr>要素を選択します。四角形を描くようにして、連続したセルを選択してください。
次のいずれかを実行して、行、列または表セルのグループを表の新しい位置にドラッグします。
ターゲット行の上に挿入する場合、挿入する行を上方向にドラッグして、上矢印付きの横線が表示された後でマウス・ボタンを放します。
ターゲット行の下に挿入する場合、挿入する行を下方向にドラッグして、下矢印付きの横線が表示された後でマウス・ボタンを放します。
表の行または列の範囲を拡大するには、次のようにします。
ビジュアル・エディタで表セルを選択するか、構造ウィンドウで対応する<td>要素を選択します。
「構造」ウィンドウでの要素。選択した表セルまたは要素を右クリックし、ポップアップ・メニューから「表」を選択します。
次のいずれかを選択します。
選択したセルを1行分拡大するには、「行の高さを拡大」を選択します。
選択したセルを1列分拡大するには、「列の幅を拡大」を選択します。
表の行または列の範囲を縮小するには、次のようにします。
ビジュアル・エディタで表セルを選択するか、構造ウィンドウで対応する<td>要素を選択します。
選択した表セルまたは要素を右クリックし、ポップアップ・メニューから「表」を選択します。
次のいずれかを選択します。
選択したセルの範囲を1行分縮小するには、「行の高さを縮小」を選択します。
選択したセルの範囲を1列分縮小するには、「列の幅を縮小」を選択します。
設計ツールを使用して、JSPページまたはHTMLページ上でテキストを追加および書式設定します。コンポーネント・パレットを使用してHTMLフォームを追加し、プロパティ・インスペクタおよび「構造」ウィンドウを使用してHTMLフォームの要素の管理およびプロパティの構成を行います。
HTMLグラフィックの場合、コンポーネント・パレットを使用してグラフィックをページに簡単に追加するか、Windowsのデスクトップまたはエクスプローラからグラフィックをドラッグ・アンド・ドロップできます。イメージは、ページ、表またはフォームに挿入したり、背景として使用することができます。イメージ・サイズの設定、枠線の追加、ページまたは表セルでの位置の設定を行う場合は、イメージを変更します。ロールオーバー・イメージやナビゲーション・バーなどのインタラクティブ・グラフィックを作成するには、JavaScriptイベントをイメージに追加します。
Webページのユーザーと対話したり、Webページのユーザーから情報を収集するには、HTMLページでHTMLフォームを使用します。フォームは次のもので構成されます。
フォーム・タグ: フォーム処理情報を含んでいます。
フォーム・フィールド: テキスト・フィールド、メニュー、チェックボックス、ラジオ・ボタンなどがあります。
送信ボタン: フォーム処理エージェントにデータを送信します。
新しいHTMLフォームを作成するには、次のようにします。
JSPファイルまたはHTMLファイルを開いておき、次のいずれかの操作を行います。
ビジュアル・エディタまたは「構造ウィンドウ」で、フォームの表示位置となる挿入ポイントを選択し、「コンポーネント・パレット」の「HTML」ページで「フォーム」をクリックします。
コンポーネント・パレットのHTMLページから、ページ上または構造ウィンドウ内の挿入ポイントまで、「フォーム」要素をドラッグします。スケルトン・フォームを作成するHTMLコードがHTMLファイルまたはJSPファイルに挿入されます。ビジュアル・エディタでは、フォームは点線のアウトラインとして表示されます。
スケルトン・フォームを作成したら、フォームのフィールドとボタンを追加し、フォーム処理情報を指定します。デフォルトでは、フォームの作成時にGetフォーム処理属性が指定されます。
コンポーネント・パレットのフォーム・フィールドまたはボタンがHMTLページまたはJSPページに追加されると、<form>要素が自動的に親要素として挿入されます。
フォーム要素を削除するには、次のようにします。
ビジュアル・エディタでフォームを選択するか、構造ウィンドウで対応する<form>要素を選択し、次のいずれかの操作を行います。
[Del]または[Back Space]を押します。
メイン・メニューから「編集」→「削除」を選択します。フォームとフォーム内のすべてのフォーム・フィールドおよびボタンが削除されます。フォームのフィールドやボタンを削除せずにフォーム要素を削除するには、フォームを右クリックして、「フォーム」→「フォーム・タグの削除」を選択します。
フォーム・フィールドまたはボタンを挿入するには、次のようにします。
ビジュアル・エディタでフォーム要素を含むJSPファイルまたはHTMLファイルを開いておき、次のいずれかの操作を行います。
ビジュアル・エディタまたは「構造」ウィンドウで、フォーム上のフィールドまたはボタンの表示位置となる挿入ポイントを選択し、コンポーネント・パレットの「HTML」ページで目的の要素をクリックします。
コンポーネント・パレットのHTMLページから、フォーム上または構造ウィンドウ内の挿入ポイントまで、フォーム・フィールドまたはボタン要素をドラッグします。先にフォームを作成せずにフォーム・フィールドまたはボタンを挿入しようとした場合、「このコンポーネントにフォーム要素を追加しますか。」というメッセージが表示されます。フィールドまたはボタンのフォーム・タグを自動的に作成するには、「はい」を選択します。このダイアログで「フォーム要素の追加の確認を非表示」を選択すると、ダイアログの自動表示が行われなくなります。表示を再開するには、メイン・メニューから「ツール」→「プリファレンス」→「JSP/HTMLビジュアル・エディタ」を選択し、「フォーム要素追加のプロンプト」を選択します。
フォーム・フィールドまたはボタンに必須属性が指定されている場合、表示されたエディタ・ダイアログを使用してプロパティ値を設定します。
フォーム・フィールドまたはボタンを削除するには、次のいずれかの操作を行います。
要素を選択して、[Del]または[Backspace]を押します。
要素を選択して、メイン・メニューから「編集」→「切取り」を選択します。
「フォームの編集」ダイアログを使用してフォーム処理情報を編集するには、次のようにします。
ビジュアル・エディタでフォームを右クリックするか、「構造」ウィンドウで対応する<form>要素を右クリックし、「編集」→「タグ」を選択します。
「フォームの編集」ダイアログで、フォーム処理属性を設定します。
「OK」をクリックして、フォーム処理情報をフォーム要素に追加します。たとえば、<form method="post" action="http://www.oracle.com/orderEdit.html" enctype="application/x-www-form-urlencoded" name="form1"></form>となります。
プロパティ・インスペクタを使用してフォーム処理情報を設定するには、次のようにします。
ビジュアル・エディタでフォームを選択するか、構造ウィンドウで対応する<form>要素を選択します。選択した要素のプロパティ値が「プロパティ・インスペクタ」に表示されます。プロパティ・インスペクタが表示されていない場合は、「表示」→「プロパティ・インスペクタ」を選択するか、ショートカット([Ctrl]+[Shift]+[I])を使用します。
設定するプロパティが表示されるまでスクロールし、マウスまたは矢印キーでそれを選択します。プロパティ・インスペクタの下部にプロパティの簡単な説明が表示されます。
右側の列に、次のいずれかの方法でプロパティ値を入力します。
テキスト・フィールドにプロパティの文字列値を入力し、[Enter]を押します。
値フィールド内をクリックし、表示されたリストから値を選択します。
値フィールドをクリックし、省略記号ボタンを表示します。省略記号をクリックし、該当するプロパティのエディタを表示します。プロパティ・エディタで値を設定し、「OK」をクリックします。
|
ヒント: 長いリストの中からプロパティを素早く見つけるには、プロパティ・インスペクタ・ツールバーの検索ボタンをクリックします。「検索」テキスト・フィールドにプロパティ名を入力し、[Enter]を押します。 |
コンテキスト・メニューからフォーム・メソッドを変更するには、次のようにします。
ビジュアル・エディタでフォームを右クリックするか、「構造」ウィンドウで対応する<form>要素を右クリックし、「フォーム」→「メソッド」を選択します。
サブメニューで、「POST」または「GET」を選択してフォーム・メソッドを変更します。
ビジュアル・エディタを使用して、HTMLファイルでテキストを追加および書式設定します。
ページのテキスト・プロパティを設定するには、ビジュアル・エディタのツールバーを使用します。「プロパティ・インスペクタ」では、ツールバーを使用して設定する属性に緑色の四角が付いています。変更を元に戻すには、メイン・メニューから「編集」→「元に戻す」アクションを選択します。テキスト・プロパティをデフォルト値にリセットするには、「プロパティ・インスペクタ」で値を選択して削除します。
テキストを追加するには、次のいずれかの操作を行います。
ビジュアル・エディタで、テキストを挿入する位置をクリックします。点滅するカーソルが現れたら入力を開始します。
同じプロジェクトまたは別のプロジェクトのファイルからテキストをコピーして貼り付けます。
挿入したテキストの書式設定は、ビジュアル・エディタのツールバーを使用して行えます。ツールバーを使用すると、ページ内で手動またはインラインの書式を適用できます。次に例を示します。
<H5><EM><FONT color="#ff0000">This is a Heading 5 in italics iUse the Toolbar to:n the color red</EM></FONT></H5>
HTMLツールバーの機能
ビジュアル・エディタでページを編集する場合、書式設定を変更するためにツールバーを使用できます。
ツールバーを使用して、次を実行します。
テキスト・ブロックのデフォルトの書式スタイル(「なし」、「Paragraph」、「Preformatted」、「Heading 1」、「Heading 2」など)を設定します。
選択したテキストのフォント、色および位置を変更します。
太字、イタリック、下線などの書式を適用します。
順序付けられた(番号付き)リストや順序付けられていない(黒丸付き)リストを作成します。
CSS機能を使用したテキストの書式設定
Cascading Style Sheet (CSS)を使用すると、ページ内で、または複数のWebページにわたって、テキストとページの書式を自動的に更新することもできます。CSSスタイルには、特定のクラスの全テキストに対する書式を定義したり、h2やIなど特定のタグの書式を再定義します。CSSスタイルは外部スタイルシートを使用して適用します。
CSSスタイルと手動またはオンラインのHTML書式を同じページ内で使用できます。手動のHTML書式は、CSSスタイルを使用して適用した書式より優先されます。CSSスタイルシートの詳細は、W3C Cascading Style Sheetsのホーム・ページ(http://www.w3.org/Style/CSS/)を参照してください。
テキスト・プロパティを設定するには、次のようにします。
手動またはオンラインのHTMLスタイルの設定先となるテキストを選択します。
ツールバーを使用してテキスト・プロパティを設定します。
JDeveloperの設計ツールは、次のグラフィック・ファイル形式をサポートしています。
JPEG/JPG
GIF
PNG
イメージを挿入するには、次のようにします。
ビジュアル・エディタでファイルを開いておき、次のいずれかの操作を行います。
ビジュアル・エディタまたは「構造」ウィンドウで、ページ上のイメージの表示位置となる挿入ポイントを選択し、コンポーネント・パレットのページで「イメージ」をクリックします。
コンポーネント・パレットのページから、ページ上または「構造」ウィンドウ内の挿入ポイントまで、「イメージ」要素をドラッグします。
表示された「イメージの挿入」ダイアログで、「参照」をクリックしてファイルを選択するか、イメージ・ファイルの場所を示すパスを入力します。ファイルの場所を参照すると「イメージ・ソースの選択」ダイアログが開き、現在のコンテキストに基づいたディレクトリが表示されます。イメージ・ファイルが現在のプロジェクトのHTMLルート外部にある場合は、そのファイルをアプリケーション・ナビゲータの現在のコンテキストに追加するかどうか尋ねられます。「イメージの保存」ダイアログで「はい」をクリックして、イメージをドキュメント・ルートに追加します。
「イメージの挿入」ダイアログでその他のイメージ・プロパティを設定します。
「OK」をクリックします。ページにイメージが表示されます。
Windowsのデスクトップやエクスプローラからページ上の目的の場所へイメージをドラッグすることもできます。アプリケーション・ナビゲータの現在のコンテキストに基づいたディレクトリにファイルを追加するかどうか尋ねられます。「イメージの保存」ダイアログで「はい」をクリックして、イメージをドキュメント・ルートに追加します。ページ上にイメージが表示されます。
イメージを削除するには、次のいずれかの操作を行います。
イメージを選択して、[Del]または[Backspace]を押します。
イメージを選択して、メイン・メニューから「編集」→「切取り」を選択します。
イメージのサイズを変更するには、次のいずれかの操作を行います。
右クリックして「プロパティ」を選択し、幅および高さのピクセルを調整します。
イメージの下と右、および右下隅にあるサイズ変更ハンドルを選択し、イメージの幅および高さを調整します。
「プロパティ・インスペクタ」でイメージの幅および高さの属性を選択し、変更します。
ビジュアル・エディタで設定したイメージ・プロパティには、「プロパティ・インスペクタ」で緑色の四角が付きます。サイズ変更した要素を元のサイズに戻すには、「プロパティ・インスペクタ」の「幅」および「高さ」フィールドの値を削除するか、「サイズのリセット」ボタンをクリックします。
イメージをドラッグして移動するには、次のようにします。
ビジュアル・エディタまたは構造ウィンドウで、次のいずれかの操作を行います。
ビジュアル・エディタまたは構造ウィンドウで、イメージを元の位置から挿入ポイントにドラッグします。
ビジュアル・エディタまたは「構造」ウィンドウで、イメージを右クリックして元の位置から挿入ポイントにドラッグし、ポップアップ・メニューから「ここに移動」を選択します。
ビジュアル・エディタまたは構造ウィンドウで、次のいずれかの操作を行います。
イメージを切り取ります。その後、ビジュアル・エディタまたは構造ウィンドウの別の位置に貼り付けます。
イメージを切り取ります。次に、同じプロジェクトまたは別のプロジェクト内の他のファイルへ貼り付けます。
イメージを背景として使用するには、次のようにします。
「構造」ウィンドウでページの<body>要素を選択します。選択した要素のプロパティ値が「プロパティ・インスペクタ」に表示されます。プロパティ・インスペクタが表示されていない場合は、「表示」→「プロパティ・インスペクタ」を選択するか、ショートカット([Ctrl]+[Shift]+[I])を使用します。
プロパティ・インスペクタで背景プロパティまでスクロールし、マウスまたは矢印キーでそれを選択します。
右側の列に、次のいずれかの方法でプロパティ値を入力します。
値フィールド内をクリックし、表示されたリストから使用可能な背景イメージを選択します。
値フィールドをクリックし、省略記号ボタンを表示します。省略記号をクリックして「背景色」ダイアログを表示し、「参照」をクリックしてファイルを選択するか、イメージ・ファイルの場所を示すパスを入力します。ファイルの場所を参照すると「イメージ・ソースの選択」ダイアログが開き、現在のコンテキストに基づいたディレクトリが表示されます。イメージ・ファイルが現在のプロジェクトのHTMLルート外部にある場合は、オプションでそのファイルを「アプリケーション・ナビゲータ」の現在のコンテキストに追加するかどうか尋ねられます。「イメージの保存」ダイアログで「はい」をクリックして、イメージをドキュメント・ルートに追加します。「OK」をクリックします。イメージはページの背景イメージとして並べて表示されます。
この項では、Java EE内のJava Server Pages (JSP)テクノロジを使用したユーザー・インタフェース開発向けのJDeveloperのサポートおよびツールについて説明します。
JDeveloperには、http://jcp.org/aboutJava/communityprocess/final/jsr245/index.htmlで定義されているJSP 2.1の仕様に準拠したJava Server Pages (JSP)開発用の完全なユーザー・インタフェース開発環境が用意されています。
JDeveloperに用意されている機能を使用してアプリケーションを最初から構築できます。最初に実行するのは、フレームワークまたはWebページのアプリケーション・テンプレートの構築です。アプリケーション・テンプレートを使用すると、JSPプロジェクトをすぐに開始できます。新規ギャラリ・ウィザードを使用してアプリケーションを構築する際に、アプリケーションに含めるテクノロジの組合せから選択します。図11-6に示すように、選択するアプリケーションにより、作成されるプロジェクト・フォルダや、フォルダに追加されるレイアウトが決まります。
JDeveloperには、図11-21および表11-16に示すように、JSPページに簡単にドラッグ・アンド・ドロップできる標準JSPコンポーネントを備えたコンポーネント・パレットが用意されています。
表11-16 JSPコア・コンポーネント
| タグ | 説明 |
|---|---|
|
Attribute |
XML属性の値ではなく、XML要素のボディにタグ属性の値を定義します。 |
|
Body |
タグのボディを指定します。 |
|
Declaration |
JSPページで使用されるスクリプト言語で有効なメソッドまたは変数を宣言します。 |
|
EL Expression |
JavaBeansコンポーネントに保存されたアプリケーション・データに簡単にアクセスできるようにするために、JSP式言語(EL)に式を含めます。 |
|
Element |
XML要素のタグの値を動的に定義します。このアクションは、JSPページ、タグ・ファイルおよびJSPドキュメントで使用できます。 |
|
Expression |
JSPページで使用されるスクリプト言語で有効な式を含めます。この式は評価され、Stringに変換され、レスポンスに挿入されて、ここでJSPページに式が表示されます。 |
|
Fallback |
プラグイン・ソフトウェアのダウンロードを開始するためのダイアログが失敗したときにテキスト・メッセージを表示します。要素が他の場所で使用されると、変換エラーが発生します。 |
|
Forward |
1つのJSPページから別のリソースにクライアント・リクエスト情報を含むrequestオブジェクトを転送します。転送するJSPページとアプリケーション・コンテキストが同じ場合にかぎり、ターゲット・リソースはHTMLファイル、他のJSPページ、サーブレットのいずれかになります。 |
|
GetProperty |
プロパティのgetterメソッドを使用してBeanプロパティ値を取得し、値をレスポンスに挿入します。 |
|
Hidden Comment |
レスポンスにコメントを挿入せずにJSPページを記述します。 |
|
Include |
オブジェクトに対するリクエストを送信し、結果をJSPファイルに含めます。 |
|
Include Directive |
JSPページがコンパイルされている場合、翻訳時にJSPページにテキストまたはコードの静的ファイルを挿入します。 |
|
Page Directive |
JSPページ全体に適用される属性を定義します。 |
|
Param |
インクルードされたリソースに1つまたは複数の名前/値ペアをパラメータとして渡します。 |
|
Params |
キー値情報を提供します。 |
|
Plugin |
指定したプラグインでアプレットまたはJavaBeanを実行します。 |
|
Scriptlet |
ページのスクリプト言語で有効なコード・フラグメントを挿入します。 |
|
SetProperty |
JavaBeanに1つ以上のプロパティ値を設定します。 |
|
Taglib Directive |
JSPページで使用されるカスタム・タグのタグ・ライブラリまたは接頭辞を定義します。 |
|
UseBean |
特定の名前またはスコープを持つJavaBeanを検索またはインスタンス化します。 |
新規ギャラリ・ウィザードでは、アプリケーションのWebページを構築するために必要なすべてのステップが段階的に説明されます。
新規JSPページを作成するには、次のようにします。
アプリケーション・ナビゲータで、新規JSPを作成するプロジェクトを選択します。
「ファイル」→「新規」を選択し、「新規ギャラリ」を開きます。
図11-22に示すように、「カテゴリ」ツリーで、「Web層」を開いて「JSP」を選択します。単純なJSPが生成され、アクティブなプロジェクトに表示されます。デプロイメント・ディスクリプタ・ファイルweb.xmlもプロジェクトに追加されます。デプロイメント・ディスクリプタ・ファイルは、JSPの実行時に統合WebLogic Serverで使用されます。
「新規ギャラリ」の「Web Tier」カテゴリから使用できるサーブレット・フィルタ作成ウィザードは、JavaServer Pagesとの間のリクエストやレスポンスの処理に使用できる新規フィルタを作成します。
JSPページにサーブレット・フィルタを登録するには、次のようにします。
アプリケーション・ナビゲータで、新規サーブレット・リスナーを作成するプロジェクトを選択します。通常、これはJSPをインクルードするプロジェクトです。
「ファイル」→「新規」を選択して「新規ギャラリ」を開きます。
「カテゴリ」ツリーで「Web層」を開き、「サーブレット」を選択します。
「項目」リストで「サーブレット・フィルタ」をダブルクリックし、サーブレット・フィルタの作成ウィザードを開きます。これにより、実装クラスや初期化パラメータなどの指定した情報に基づいてサーブレット・フィルタを作成するサーブレット・フィルタの作成ウィザードが起動します。
「ようこそ」ページが表示されたら、「次へ」をクリックします。
「フィルタ名」、「フィルタ・クラス名」および「パッケージ」を入力します。「次へ」をクリックします。
「サーブレットまたはJSPにマップ」を選択し、ドロップダウン・リストからJSPの名前を選択します。「次へ」をクリックします。
「新規」をクリックし、各初期化パラメータの名前と値を入力します。次に、「終了」をクリックします。
新規サーブレット・フィルタが生成され、アクティブ・プロジェクトに表示されます。デプロイメント・ディスクリプタ・ファイルweb.xmlが、<filter>要素で更新されます。デプロイメント・ディスクリプタのファイルは、JSPの実行時にJDeveloperの埋込みWebサーバーで使用されます。
Webアプリケーションは、特定のユーザー・アクションへのレスポンスとしてWebブラウザの表示コンテンツをフォワードすることにより、フロー制御を実装します。通常、Webアプリケーション開発者は、アプリケーションが提供するタスクごとに異なるJSPページまたはページ・セットを作成します。ユーザーは、1つのページで選択を行い、リンクをクリックして選択内容をリクエスト・オブジェクトで送信します。クリックされたリンクは、アクションの処理を担当するページにリクエスト・オブジェクトをフォワードします。
JDeveloperでフロー制御を処理する方法
アプリケーションでリクエスト・オブジェクトが処理される方法を定義します。JDeveloperは、JSPページのフロー制御を実装するための様々なオプションをサポートしています。
HTML生成コードとJavaスクリプトレット・コードを組み合せて使用し、自身にリンクしてアクションを処理するJSPページを作成できます。この場合は、アクション処理コード全体が、コンテンツの表示も行うJSPページに含まれます。そのため、HTMLとフロー制御ロジックが同じファイル内に混在します。
または
JSPページの外部でコントローラを実装することにより、JSPページとそのアクションを明確に区別できます。
これらのアプローチで使用できる機能
次のアプローチがサポートされています。
オール・イン・ワンのJSPページ開発では、JDeveloperは、データバインドの実装、データ処理(問合せ、参照、編集、更新など)の実行、レポートの生成などの複雑な動作をカプセル化するJSPタグを提供するタグ・ライブラリを介して、JSPページで表示されるJavaコードの量の削減を支援します。
JSPインクルードを使用する場合、ナビゲーション、問合せ、参照、編集、スクロールなどの共通アクションを処理する一連のJSPページ・レベル・タグ(コンポーネント・タグともいう)を実装するOracleビジネス・コンポーネント・データ・タグ・ライブラリを利用できます。
JSP表示コンテンツとJSPアクション・ハンドラ・クラスを完全に分離する場合、JDeveloperは、2つのJava EEフレームワークをサポートします。
JavaServer Facesページのナビゲーション。
JDeveloperでは、いずれかのフレームワークに基づくWebアプリケーション用ページ・フローの視覚的な設計が完全にサポートされます。
Webアプリケーションを作成するときに、対話型アプリケーションのための多数のJava EEデザイン・パターンを実装するフレームワークを活用できるように、JDeveloperでOracle Application Development Framework (Oracle ADF)が提供されています。Oracle ADFの主要機能の1つはデータ・バインディング・レイヤーです。このレイヤーでは、標準宣言方式を使用して、Webサービス、EJB、JavaBeansおよびOracle ADF Business Componentsなどのビジネス・サービスからのデータを、Oracle ADF Facesコンポーネントおよび標準HTML要素などのUIコンポーネントにバインドします。
JDeveloperは、Webアプリケーション・アーカイブ(WAR)の作成による、任意のJava EEアプリケーション・サーバーへのWebアプリケーションのデプロイをサポートします。統合WebLogic Serverへのデプロイに対する別のサポートもあります。
JSPをデバッグするには、次のようにします。
ナビゲータで、実行するJSPファイルを選択します。
次のいずれかの方法でJSPをデバッグします。
メイン・メニューから「デバッグ」→「<source_file>.jspのデバッグ」を選択します。
JSPファイルを右クリックし、ポップアップ・メニューから「デバッグ」を選択します。JSPが起動します。
他のJavaアプリケーションと同様にJSPをデバッグします。
JSPのデバッグ時には、次の機能が実行されます。
JSPがサーブレットに変換され、コンパイルされます。
統合WebLogic Serverプロセスを開始します。
出力プロジェクト・ディレクトリから生成されたクラスの直接実行。
デフォルトのWebブラウザでJSPが起動します。たとえば、ブラウザは次のように起動します。
http://<your_machine_IP_address>:<http_port>/<context_root>/<path_to_JSP>
次に例を示します。
http://127.0.0.1:8988/Project1-context-root/untitled1.jsp
Webデプロイメント・ディスクリプタを作成するには、次のようにします。
「アプリケーション・ナビゲータ」で、Webデプロイメント・ディスクリプタを作成するプロジェクトを選択します。
プロジェクトにJSPファイルを追加します。JDeveloperでは、初めてJSPファイルを作成する際に、web.xmlファイルがWEB-INFプロジェクト・フォルダに追加されます。
また、Webデプロイメント・ディスクリプタ・ファイルを自分で追加するには、次のようにします。
「新規ギャラリ」の「カテゴリ」ツリーで、「General」を開き、「デプロイメント・プロファイル」を選択します。「項目」リストで、web.xml (Webデプロイメント・ディスクリプタ)を選択します。「OK」をクリックします。
目的の項目が有効でない場合、プロジェクトにWebデプロイメント・ディスクリプタがまだないことを確認します。1つのプロジェクトに使用できるディスクリプタのインスタンスは1つのみです。
Webデプロイメント・ディスクリプタが作成され、プロジェクトのWEB-INFフォルダに追加されると、XMLエディタ・ウィンドウで開きます。
Webデプロイメント・ディスクリプタのプロパティをインスペクトまたは変更するには、次のようにします。
「アプリケーション・ナビゲータ」で、WEB-INFフォルダのWebデプロイメント・ディスクリプタを選択します。
右クリックして「プロパティ」を選択します。
左ペインで項目を選択すると、右ペインにダイアログのページが表示されます。ダイアログのページでプロパティ値を設定して、ディスクリプタを構成します。終了したら「OK」をクリックします。
Webデプロイメント・ディスクリプタをXMLファイルとして編集するには、次のようにします。
アプリケーション・ナビゲータで、WEB-INFフォルダのWebデプロイメント・ディスクリプタを選択します。
右クリックして「開く」を選択します。XMLエディタにファイルが開きます。
JSPの実行は、統合WebLogic Serverによって管理されます。JSPを構築した後、これをいくつかの簡単なステップで実行できます。
JSPを実行するには、次のようにします。
ナビゲータで、実行するJSPファイルを選択します。
次のいずれかの方法でJSPを実行します。
メイン・メニューから「実行」→「<source_file>.jspの実行」を選択します。
JSPファイルを右クリックし、ポップアップ・メニューから「実行」を選択します。
JSPが起動します。
サーバーが作成されていないときにドメインを初めて実行または開始する場合、「デフォルト・ドメインの構成」ダイアログが表示されます。新規パスワードを入力します。
JSPの実行時には、次の機能が実行されます。
JSPがサーブレットに変換され、コンパイルされます。
出力プロジェクト・ディレクトリから生成されたクラスの直接実行。
サーブレット名およびクラス情報が含まれるように統合WebLogic Serverのweb.xmlファイルが編集されます。
デフォルトのWebブラウザでJSPが起動します。ブラウザは次のフォーマットを使用して起動します。
http://<your_machine_IP_address>:<http_port>/<context_root>/<path_to_JSP>。例を次に示します。
http://127.0.0.1:8988/Project1-context-root/untitled1.jsp
実行時のJavaServer Pagesファイルの動的変更
統合WebLogic ServerでJSPを実行する場合、WebLogic Serverを再起動しなくても、JSPファイルの変更内容を変更および表示できます。ブラウザで変更を表示する場合、ブラウザからページをリロードすることも、JDeveloperでページを再実行することもできます。WebLogic Serverではファイルのみを変更できるため、JDeveloperから実行する方が、ブラウザからページをリロードするよりも処理が速くなります。
ADF Business Componentsアプリケーション・モジュールを使用したJSPの実行
統合WebLogic Serverとリモート・サーバー・インスタンスの両方でビジネス・コンポーネント・アプリケーション・モジュールを使用してJSPを実行しており、同じ中間層プロジェクトに依存する2つの異なるプロジェクトに2つのJSPが含まれている場合、jbo.server.in_wls=trueプロパティを使用して、中間層がWebLogic Serverインスタンスの内部で動作していることを宣言する必要があります。
ソースJSPでのタイムスタンプの使用
JSPの開発、コンパイルおよび実行時に、ソースJSPのタイムスタンプが以前のタイムスタンプに変更されると、JSPはJDeveloperまたはWebLogic Serverによって自動的に再コンパイルされなくなります。この場合、強制的に再コンパイルする必要があります。強制的に再コンパイルするには、JSPを右クリックし、「再ビルド」を選択し、「ビルド」→「再ビルド」、「ビルド」→「すべて再ビルド」、「ビルド」→「クリーン」または「ビルド」→「すべてクリーン」を使用します。
ソース・コントロール・システムを使用(旧バージョンをリストア)する場合、またはxcopyやmvなどのコピー・コマンドを保持するタイムスタンプを使用する場合、タイムスタンプは過去にさかのぼる場合があります。
JSPフラグメントとは、別のJSPページに組み込むことができるJSPページのことです。
JSPフラグメントは、ファイル名拡張子として.jspfを使用します。デフォルトでは、JSPフラグメント・ファイルはその他の静的コンテンツとともにWebアプリケーション・フォルダに配置されます。完全なページではないJSPセグメントは常に、.jspf拡張子を使用する必要があります。
JSPセグメントは、JSP構文を使用して、SimpleTagハンドラを起動するためのタグの本体として、またはフラグメントとして宣言される属性の値を指定する<jsp:attribute>標準アクションの本体として定義します。またはTLD内のJspFragment型になるように定義します。
サーブレットはプラットフォームに依存しないサーバー側のJavaコンポーネントで、これを使用してWebサーバーの機能を拡張できます。サーブレットを使用すると、コンテンツ、機能およびWebページのルック・アンド・フィールを動的にカスタマイズできます。サーブレットでは、クライアント・リクエストが処理され、イメージ、XMLおよびHTMLなどのMIMEタイプがリクエスト元のクライアントに返されます。サーブレットはWebサーバー内で稼働するため、グラフィカル・ユーザー・インタフェースを必要としません。サーブレットは通常、HTMLコンテンツを動的に生成したり、その内容をリクエスト元のクライアントに表示する際に使用されます。サーブレットは、サーバー側のアプレットと考えられます。
サーブレットは、JavaSoftで定義された標準APIとプロトコルに基づいています。サーブレットを実行するにはユーザー環境に、Oracle WebLogic Server、JavaソフトウェアのJava ServerやApache Tomcatなど、JavaSoftサーブレットAPIをサポートするWebサーバーが必要です。JDeveloperでは、サーブレット・フィルタとリスナー(サーブレットAPI 2.5)がサポートされています。サーブレット・フィルタ作成ウィザードおよびサーブレット・リスナー作成ウィザードを使用すると、web.xmlがフィルタおよびリスナーのエントリで更新されます。web.xmlは、これらのエントリを含めるため、または変更するために手動で編集することもできます。
詳細は、『Oracle Fusion Middleware Oracle WebLogic Server Webアプリケーション、サーブレット、JSPの開発』を参照してください。
サーブレットは、クライアントから送信されたHTTPリクエストを処理し、クライアントにデータベース問合せの結果を返すことにより、動的コンテンツを提供する際に使用されます。この種のJavaサーブレットは、HTTPサーブレットとして知られています。HTTPサーブレットの一般的な実行時のシナリオを次に示します。
クライアントがサーブレットにHTTPリクエストを送信します。クライアントは、Webブラウザ、その他のアプリケーションまたはアプレットのいずれでもかまいません。
サーブレットによりリクエストが処理され、レスポンスとしてクライアントにデータが返されます。HTMLサーブレットの場合、クライアントには動的HTMLコンテンツが生成され、返されます。サーブレットをこのように設計した場合、クライアントにかわってデータベース・サーバーのデータをリクエストし、結果をパッケージ化し、HTML形式でクライアントに返します。このような操作は、JDBCまたはOracle ADF Business Componentsを使用することにより実行できます。
クライアント・ユーザーは、生成されたHTMLコンテンツを対話形式で表示して応答し、生成されたHTMLフォームを介してさらに別のリクエストを行うことができます。
フィルタは、HTTPリクエスト、レスポンスおよびヘッダー情報の内容を変換できる再利用可能なコード部分です。フィルタは、通常はレスポンスを作成しません。かわりに、フィルタを使用してリクエストやレスポンスを変更するか、リクエストやレスポンスに基づく次のようなその他の処理を実行します。
サーブレットをコールする前にリクエストを検証します。
実際のリクエスト・オブジェクトまたはレスポンス・オブジェクトをラップするカスタム・バージョンのオブジェクトを提供することにより、リクエストまたはレスポンスのヘッダーまたはデータ(あるいはその両方)を変更します。
サーブレットが起動する前、サーブレットの完了後、またはその両方の時点で(たとえば、ロギングなどの)処理を実行します。
サーブレットがコールされた後にサーブレットを捕捉します。
サーブレットのコールをブロックします。
デフォルトでは、「新規ギャラリ」の「Web Tier」「Servlets」カテゴリから使用できるサーブレット・フィルタ作成ウィザードによりフィルタが作成されます。このフィルタは、リクエストおよびレスポンスを動的に捕捉し、リクエストまたはレスポンスに含まれている情報を変換または使用します。
リスナーを使用し、ライフ・サイクル・イベントの発生時にメソッドがコールされるリスナー・オブジェクトを定義することにより、サーブレットのライフ・サイクルでイベントを監視し、そのイベントに対応できます。アプリケーション・イベント・リスナーは、1つ以上のサーブレット・イベント・リスナー・インタフェースを実装するクラスです。サーブレット・イベント・リスナーは、具体的にはServletContextオブジェクトおよびHttpSesionオブジェクトの状態変更の通知をサポートします。
サーブレット・コンテキスト・リスナーは、アプリケーションのVMレベルで保持されるリソースまたは状態の管理に使用されます。
HTTPセッション・リスナーは、同じクライアントまたはユーザーからWebアプリケーションに対して行われる一連のリクエストに関連付けられている状態またはリソースの管理に使用されます。
各イベント・タイプをリスニングする複数のリスナー・クラスを使用し、コンテナが各イベント・タイプのリスナーBeanを起動する順序を指定できます。
「新規ギャラリ」の「Web層」→「サーブレット」カテゴリから使用できるサーブレット・リスナーの作成ウィザードでは、サーブレットまたはその他のWebコンポーネントで使用できる新規リスナーを作成します。追加のリスナーを作成するには、このウィザードを複数回実行します。
アプリケーション・ナビゲータで、WEB-INFフォルダのWebデプロイメント・ディスクリプタを選択します。
右クリックして「開く」を選択します。XMLエディタにファイルが開きます。
アプリケーション・ナビゲータで、新しいサーブレットを作成するプロジェクトを選択します。
メイン・メニューから、「ファイル」→「新規」を選択するか、右クリックして「新規」を選択します。新規ギャラリが表示されます。
「カテゴリ」ツリーで「Web層」を選択します。
「項目」リストで「HTTPサーブレット」をダブルクリックし、HTTPサーブレット作成ウィザードを開きます。
このウィザードでは、サーブレットのメソッドおよびパラメータを含む、ユーザーが指定した情報に基づいてサーブレットを作成します。「ヘルプ」ボタンをクリックすると、ウィザード・パネルに状況依存ヘルプが表示されます。
単純なサーブレットが生成され、アクティブ・プロジェクトに表示されます。デプロイメント・ディスクリプタ・ファイルweb.xmlもプロジェクトに追加されます。デプロイメント・ディスクリプタ・ファイルは、サーブレットの実行時にJDeveloperの統合WebLogic Serverで使用されます。
HTTPサーブレット作成ウィザードを使用してHTTPサーブレットを作成すると、サーブレットのJavaクラスが作成されます。このクラスには、ウィザードの使用時にサーブレットに対して指定した初期化メソッドおよびHTTPメソッドが含まれています。サーブレットをカスタマイズするには、サーブレットのHTTPメソッドを実装する必要があります。
HTTPサーブレット作成ウィザードから指定できるメソッドは、次のとおりです。
GET、条件付きGETおよびHEADリクエストを処理するdoGet
POSTリクエストを処理するdoPost
PUTリクエストを処理するdoPut
DELETEリクエストを処理するdoDelete
Serviceリクエストを処理するservice
JDeveloperによって、これらのメソッドのスケルトン・コードが作成されます。これらのメソッドでは、HttpServletRequestおよびHttpServletResponseという2つのオブジェクトを引数として使用します。また、追加パラメータを渡してサーブレットのJavaコード内でServletRequest.getParameterメソッドをコールし、プログラムによって取得することもできます。
基本的なサーブレット・メソッドの1番目のHTTP引数は、HttpServletRequestオブジェクトです。このオブジェクトにより、次の要素にアクセスするためのメソッドが提供されます。
リクエスト内のCookieを含むHTTPヘッダー・データ。
リクエストの作成に使用されるHTTPメソッド。
リクエストの一部としてクライアントから送信される引数。
サーブレット・メソッドを実装する際にコールするメソッドは、サーブレットが受信するHTTPリクエストの種類によって異なります。表11-17は、考えられるHTTPリクエストの種類と、それに対応するメソッドでサーブレット・メソッドを実装する際に使用されるものとの関係をまとめたものです。
表11-17 HTTPリクエストのタイプ
| 考えられるクライアントHTTPリクエスト | サーブレット・コードで使用する、対応するクライアント・データ・アクセス・メソッドおよび手法 |
|---|---|
|
任意のHTTPリクエスト |
指定したパラメータの値を取得するには、 |
|
HTTPのGETリクエスト |
解析対象となる |
|
HTTPのPOST、PUTおよびDELETEリクエスト |
一般に、テキスト・データの場合は |
基本的なサーブレット・メソッドの2番目のHTTP引数は、HttpServletResponseオブジェクトです。このオブジェクトにより、サーブレットからクライアントに返される情報がカプセル化されます。このオブジェクトでは、クライアントにデータを返す際に次の方法がサポートされています。
テキスト・データの場合、Writer (getWriterメソッドを使用)
バイナリ・データの場合、OutputStream (getOutputStreamメソッドを使用)
また、addCookieメソッドを使用して、レスポンス時にCookieを送信することもできます。
HTTPレスポンス・タイプを変更するには、次のようにします。
デフォルトでは、HTTPサーブレット作成ウィザードにより、HTMLコンテンツ(MIMEタイプ: text/html)を動的に生成するサーブレットが作成されます。HTTPサーブレット作成ウィザードで、希望するMIMEタイプを「コンテンツ・タイプを生成」ドロップダウン・リストから選択すると、別のタイプに変更できます。setContentTypeメソッドが選択されたタイプに設定され、サーブレットのJavaファイルに追加されます。たとえば、XMLコンテンツ・タイプを選択すると、次のように生成されます。
public class HelloWorld extends HttpServlet
{
private static final String CONTENT_TYPE = "text/xml; charset=windows-1252";
private static final String DOC_TYPE;
public void init(ServletConfig config) throws ServletException
{
super.init(config);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
response.setContentType(CONTENT_TYPE);
PrintWriter out = response.getWriter();
if (DOC_TYPE != null)
{
out.println(DOC_TYPE);
}
out.close();
}
}
「新規ギャラリ」の「Web層」→「サーブレット」カテゴリから使用できるサーブレット・フィルタの作成ウィザードは、サーブレットまたはJavaServer Pagesとの間のリクエストやレスポンスの処理に使用できる新規フィルタを作成します。
サーブレット・フィルタを作成するには、次のようにします。
アプリケーション・ナビゲータで、新規サーブレット・フィルタを作成するプロジェクトを選択します。通常、これはサーブレットまたはJSPを含むプロジェクトです。
「ファイル」→「新規」を選択して「新規ギャラリ」を開きます。
「カテゴリ」ツリーで「Web層」を開き、「サーブレット」を選択します。
「項目」リストで「サーブレット・フィルタ」をダブルクリックし、サーブレット・フィルタの作成ウィザードを開きます。
サーブレット・フィルタ作成ウィザードは、実装クラスや初期化パラメータなどの指定した情報に基づいてサーブレット・フィルタを作成します。ウィザードの状況依存ヘルプを表示するには、[F1]を押すか、「ヘルプ」をクリックします。
新規サーブレット・フィルタが生成され、アクティブ・プロジェクトに表示されます。デプロイメント・ディスクリプタ・ファイルweb.xmlが、<filter>要素で更新されます。デプロイメント・ディスクリプタ・ファイルは、サーブレットまたはJSPの実行時にJDeveloperの統合WebLogic Serverで使用されます。
「新規ギャラリ」の「Web Tier」->「Servlets」カテゴリから使用できるサーブレット・リスナー作成ウィザードは、サーブレットまたはその他のWebコンポーネントで使用できる新規リスナーを作成します。
サーブレット・リスナーを作成するには、次のようにします。
アプリケーション・ナビゲータで、新規サーブレット・リスナーを作成するプロジェクトを選択します。通常、これはサーブレットまたはその他のWebコンポーネントを含むプロジェクトです。
「ファイル」→「新規」を選択して「新規ギャラリ」を開きます。
「カテゴリ」ツリーで「Web層」を開き、「サーブレット」を選択します。
「項目」リストで「サーブレット・リスナー」をダブルクリックし、サーブレット・リスナーの作成ウィザードを開きます。
サーブレット・リスナー作成ウィザードは、実装クラスやインタフェースなどの指定した情報に基づいてサーブレット・リスナーを作成します。ウィザードの状況依存ヘルプを表示するには、[F1]を押すか、「ヘルプ」をクリックします。
新規サーブレット・リスナーが生成され、アクティブ・プロジェクトに表示されます。デプロイメント・ディスクリプタ・ファイルweb.xmlが、<listener>要素で更新されます。デプロイメント・ディスクリプタ・ファイルは、サーブレットの実行時にJDeveloperの統合WebLogic Serverで使用されます。
「新規ギャラリ」の「Web Tier」カテゴリから使用できるサーブレット・フィルタ作成ウィザードは、JavaServer Pagesとの間のリクエストやレスポンスの処理に使用できる新規フィルタを作成します。
JSPページにサーブレット・フィルタを登録するには、次のようにします。
アプリケーション・ナビゲータで、新規サーブレット・リスナーを作成するプロジェクトを選択します。通常、これはJSPをインクルードするプロジェクトです。
「ファイル」→「新規」を選択して「新規ギャラリ」を開きます。
「カテゴリ」ツリーで「Web層」を開き、「サーブレット」を選択します。
「項目」リストで「サーブレット・フィルタ」をダブルクリックし、サーブレット・フィルタの作成ウィザードを開きます。
これにより、実装クラスや初期化パラメータなどの指定した情報に基づいてサーブレット・フィルタを作成するサーブレット・フィルタ作成ウィザードが起動します。[F1]を押すか「ヘルプ」をクリックすると、ウィザード・パネルに状況依存ヘルプが表示されます。
「ようこそ」ページが表示されたら、「次へ」をクリックします。
「フィルタ名」、「フィルタ・クラス名」および「パッケージ」を入力します。「次へ」をクリックします。
「サーブレットまたはJSPにマップ」を選択し、ドロップダウン・リストからJSPの名前を選択します。「次へ」をクリックします。
「新規」をクリックし、各初期化パラメータの名前と値を入力します。次に、「終了」をクリックします。
新規サーブレット・フィルタが生成され、アクティブ・プロジェクトに表示されます。デプロイメント・ディスクリプタ・ファイルweb.xmlが、<listener>要素で更新されます。デプロイメント・ディスクリプタ・ファイルは、JSPの実行時にJDeveloperの統合WebLogic Serverで使用されます。
サーブレットは、Java EEアプリケーション・サーバーで実行されるJavaプログラムです。サーブレットは、サーバー側のJavaアプレットに対応するものと考えることができます。JDeveloperでは、統合WebLogic Serverを使用してサーブレットを実行します。
統合WebLogic Server内でサーブレットを実行する別の方法として、サーブレット・クラスをアプリケーションとして実行できるmain()ルーチンをサーブレットに含めることができます。この宣言は、public static void main(String[] args)です。
この方法は、Oracle WebLogic Serverでサーブレット・クラスを実行せずに、サーブレット・クラスをテストする場合に役立ちます。
サーブレットを実行するには、次のようにします。
サーブレットの構築後、次のいずれかの方法で実行コマンドを実行して、サーブレットを実行できます。
ナビゲータで、実行するサーブレットを含むJavaファイルを選択します。
次のいずれかの方法でサーブレットを実行します。
メイン・メニューから、「実行」を選択します。
サーブレットを含むJavaファイルを右クリックし、ポップアップ・メニューから「<servletname>.javaの実行」(複数の実行方法がある場合は、実行方法のオプションも)を選択します。
サーブレットを含むJavaファイルを選択し、ツールバーの「実行」ボタンをクリックします。
アプリケーションとして動作するようサーブレットを設定する場合、ダイアログを使用して、ターゲット・サーブレットを起動する方法を選択します。
「アプリケーションとして」: サーブレットは、スタンドアロンJavaアプリケーションとして起動します。
統合WebLogic Server内: 埋込みサーバーが起動し、サーブレットがサーバーで実行されます。
目的のオプションを選択し、「OK」をクリックします。
統合WebLogic Serverでサーブレットを実行すると、JDeveloperでは次の機能が実行されます。
サーブレット・ソース・コードのコンパイル。
埋込み統合WebLogic Serverプロセスの開始。
出力プロジェクト・ディレクトリから生成されたクラスの直接実行。
サーブレット名およびクラス情報が含まれるように、埋込み統合WebLogic Serverのweb.xmlファイルを編集。
デフォルトWebブラウザでのサーブレットの起動。たとえば、ブラウザは次のように起動します。
http://<your_machine_IP_address>:<http_port>/<context_root>/servlet/<servlet_full_class_name>
次に例を示します。
http://127.0.0.1:8988/Project1-context-root/servlet/package1.Servlet1
サーブレットは、JDeveloperの埋込み統合WebLogic Serverを使用してデバッグできます。「デバッグ」コマンドでは、サーブレットを含む選択したJavaファイルのデバッグが行われます。JDeveloperでは、サーブレットのソース・コード内にブレークポイントを設定でき、デバッガはサーブレットからJavaBeansへのコールに従います。
サーブレットをデバッグする手順は、次のとおりです。
ナビゲータでサーブレットJavaファイルを選択し、JDeveloperのメイン・メニューから「デバッグ」→「<project_name>のデバッグ」を選択するか、「デバッグ」アイコンをクリックします。サーブレットJavaファイルを右クリックし、「デバッグ」を選択する方法もあります。
サーブレットをデバッグする場合、JDeveloperによりデフォルトのWebブラウザが開かれ、サーブレットが起動します。
他のJavaアプリケーションと同じように、ブレークポイントを設定してサーブレットをデバッグします。
サーブレットの実行とテストを終了すると、メイン・メニューから「実行」→「終了」→統合WebLogic Serverを選択して、サーバーを終了できます。
サーブレットをデバッグする際、JDeveloperでは次の機能が実行されます。
サーブレット・ソース・コードのコンパイル。
統合WebLogic Serverプロセスを開始します。
出力プロジェクト・ディレクトリから生成されたクラスの直接実行。
デフォルトWebブラウザでのサーブレットの起動。たとえば、ブラウザは次のように起動します。
http://<your_machine_IP_address>:<http_port>/<context_root>/servlet/<servlet_full_class_name>
次に例を示します。
http://127.0.0.1:8988/Project1-context-root/servlet/package1.Servlet1
JDeveloperには、JSPページおよびHTMLページを操作する際の基本的なJavaScriptのサポートをはじめとするスクリプト機能が用意されています。この項では、Oracle JDeveloperでのスクリプト言語のサポート、スクリプト言語の使用方法、およびJavaScriptコードのリファクタ方法について説明します。
JDeveloperは、コード・インサイト、ブレッドクラムのサポート、およびJDeveloperの構造ペインを提供することにより、スクリプト言語(特にJavaScriptおよびJSON)をサポートしています。JDeveloperのJavaScriptコード・インサイトは、スクリプト・リージョンまたはHTMLイベント・ハンドラ内で入力する際にラベル、変数、パラメータおよび関数を補完します。ブレッドクラムのサポートにより、ファイルの操作時に選択したJavaScript関数の階層内での位置が表示されます。また、構造ペインには、ファイルに定義されている関数や関数に定義されている変数の階層が表示されます。
JDeveloperのJavaScriptコード・インサイトは、スクリプト・リージョンまたはHTMLイベント・ハンドラ内で入力する際にラベル、変数、パラメータおよび関数を補完します。
JavaScriptコード・インサイト機能により、特定のJavaScript関数で使用可能な補完の動的なリストが編集ペインの下部に表示されます。入力するにつれ、すでに入力した値に適した値のリストが表示されます。プロジェクトですでに使用または定義された使用可能なエントリのリストを表示するには、ドロップダウン矢印をクリックして「表示」を選択します。
JavaScriptコード・インサイトは、.html、.jspまたは.jspxソース・ファイル、あるいはユーザー定義関数および組込みJavaScript関数のインクルード済.jsファイルを編集する際に使用できます。アシスト・ウィンドウには、参照された.jsファイルや、まだインクルードされていないプロジェクト内の任意の.jsファイルが表示されます。
通常のJavaScriptコード・インサイトの起動時に、使用可能なプロパティの大規模なリストが表示される可能性があります。しかし、ソース・エディタで[Ctrl]+[Alt]+[Space]を押すことにより、JavaScriptスマート・コード・インサイトを呼び出すことができます。これにより、インサイトが呼び出されたオブジェクトのタイプの迅速な特定が試行され、これらのプロパティのみが表示されます。
JavaScriptコード・インサイト機能により、次の要素のテンプレートが作成されます。
コード・インサイトを呼び出すには、次のようにします。
JavaScript要素またはその略称を入力します。
case
for
foreach
if
ife(if-else)
sw(switch)
wh(while)
fori (範囲付きのループ)
try
trycf
tryf
al (アラート)
fn (関数)
fne (関数式)
dne (do-whileループ)
JavaScriptコード・インサイトは、DOMベースでブラウザに対応しており、Internet Explorer、MozillaまたはSafari用のブラウザ・アイコンが1つ以上表示され、メソッドまたは変数に対するブラウザのサポートを示します。
ソース・エディタでJavaScriptファイルを編集する際に関数内にカーソルを置くと、「ソース・エディタ」ウィンドウの下マージンにブレッドクラム・トレイルが表示されます。
このブレッドクラム・トレイルには、JavaScript階層内のこの関数の位置とともに、メソッドやパラメータなどのそのサブ要素が表示されます。また、if、if-else、do、while、forおよびtry/catch/finallyのブレッドクラムも表示されます(Javaの場合と同じです)。
階層内で使用可能な関数を検索するには、次のようにします。
ブレッドクラム・トレイルで、ドロップダウン(ファイル・レベル)をクリックし、その親内で定義されている関数に移動します。
スクリプト言語の操作には、HTMLまたはJSPページ内のスクリプト要素の直接的な使用のみでなく、アプリケーション全体に関連付けられたスクリプト・ファイルへの参照の使用も含まれます。
JDeveloperコード・エディタには、スクリプトまたはスクリプト言語要素に適したコードを決定する上で役に立つ構文強調表示機能が用意されています。
スクリプト言語の操作に関する他の要素には、JavaScript Object Notation (JSON)ファイルの作成が含まれます。
HTMLページまたはJSPページに挿入する(埋め込む)クライアント側スクリプトを作成できます。
JDeveloperでスクリプトを作成するには、次のようにします。
JSPページまたはHTMLページをまだ開いていない場合は、アプリケーション・ナビゲータでアイコンをダブルクリックして開きます。
コンポーネント・パレットで、ドロップダウン・リストから「HTML」パレット、「共通」ページを選択します。
ソース・エディタまたは「構造」ウィンドウで、スクリプトを作成する位置にカーソルを置き、スクリプト要素を選択します。または、スクリプト要素をHTMLまたはJSPページ上の目的の場所までドラッグします。
「スクリプト」ダイアログで、外部スクリプト・ファイルの場所を入力するか、スクリプト言語(text/javascript、text/tcl、text/vbscript)を選択し、スクリプト・コードを入力します。詳細なヘルプを参照するには、ダイアログで[F1]を押すか、「ヘルプ」をクリックしてください。
「OK」をクリックします。
外部スクリプト・ファイルを詳細するスクリプト要素は、ページに次のように埋め込まれます。
<script language="JavaScript" src="foo.js"></script>
または
スクリプトのコードがページに埋め込まれ、ソース・エディタに次のように表示されます。
<SCRIPT type="text/vbscript">
<!--
>Sub foo()
...
End Sub
' -->
</SCRIPT>
JDeveloperでは、HTMLページおよびJSPページを操作する際に基本的なJavaScriptサポートが提供されます。ドラッグ・アンド・ドラッグのサポートに加え、Javaコード・エディタでのJavaScriptコードのテキスト表示を変更したり、JDeveloperでJavaScriptファイルとして認識されるようにファイル拡張子を関連付けることができます。
JSPページまたはHTMLページにJavaScriptを挿入するには、次のようにします。
「ファイル」→「新規」を選択します。
「Web Tier」カテゴリを選択します。
「項目」リストで、「JavaScriptファイル」を選択します。
「JavaScriptファイルの作成」ダイアログで、JavaScript (.js)ファイルの名前と場所を入力します。
JavaScriptファイルのJavaコード・エディタで、JavaScriptコードを入力して保存します。
JavaScriptファイルは、アプリケーション・ナビゲータでHTMLまたはJSPプロジェクトの「Webコンテンツ」フォルダの下に表示されます。
HTMLページまたはJSPページをまだ開いていない場合は、JSP/HTMLビジュアル・エディタで開きます。
JavaScriptをアプリケーション・ナビゲータからページ上の適当な場所にドラッグします。JavaScriptをコンポーネント・パレットからドラッグすると、JavaScriptファイルを現在のプロジェクトのドキュメント・ルートにコピーするよう求められます。
JavaScriptファイルを参照するスクリプト要素が作成されます。
|
注意: JavaScriptファイルをプロジェクトにインポートすることも可能です。 |
構文ハイライト表示は、Java、JavaScriptおよびJSONファイルの編集時に構文要素(カッコの一致など)をより簡単に識別できるJDeveloperの機能です。
コード・エディタでのJavaScript構文ハイライト表示オプションを設定するには、次のようにします。
メイン・メニューから、「ツール」→「プリファレンス」を選択します。
「プリファレンス」ダイアログで、「コード・エディタ」ノードを開きます。
「構文の色指定」ノードを選択します。
「言語」カテゴリで、「JavaScript」を選択します。
JavaScriptスタイル設定を反映してページの表示が変化します。
使用可能なスタイル設定を適宜変更します。
「OK」をクリックします。
各フィールドの詳細なヘルプを表示するには、[F1]を押すか、「ヘルプ」をクリックします。
Javaコード・エディタに戻ると、変更したスタイル設定に従ってJavaScript構文がハイライト表示されます。
JDeveloperでは、デフォルトで.jsファイル拡張子を持つファイルがJavaScriptとして認識されます。その他のファイル拡張子もJDeveloperで認識されるように関連付けることができます。
JDeveloperでJavaScriptファイルとして認識されるファイル拡張子を追加または削除するには、次のようにします。
メイン・メニューから、「ツール」→「プリファレンス」を選択します。
「プリファレンス」ダイアログで、「ファイル・タイプ」を選択します。
「認識済のファイル・タイプ」リストで、「JavaScriptソース」ノードを選択します。
.jsファイル拡張子が関連付けられます。
JavaScriptファイル拡張子を作成するには、「追加」をクリックします。
「拡張子の追加」ダイアログで、JavaScriptファイルに関連付けるファイル拡張子を入力します。
ファイルの関連付けを削除するには、「削除」をクリックします。
「OK」をクリックします。
各フィールドの詳細なヘルプを表示するには、[F1]を押すか、「ヘルプ」をクリックします。
このような手順で追加した拡張子を持つファイルを開くと、そのファイルはJavaScriptとして認識されます。
JDeveloperではJSON (JavaScript Object Notation)ファイルを作成できます。JSONファイルを使用すると、簡単に解読できるだけでなく多数のプログラミング言語で簡単に解釈できる軽量フォーマットで、アプリケーション間またはアプリケーション内のファイル間で構造化データを簡単に渡すことができます。
JSONファイルを作成するには、次のようにします。
「ファイル」→「新規」→「Web層」→「HTML」→「JSONファイル」を選択します。
ファイルに関する次のデータを指定します。
ファイル名
JSONファイルの名前。デフォルトでは、これはuntitled.jsonです。.json拡張子により、他のパーサーがファイル内のデータのJSONフォーマットを読み込むことが可能になります。
ディレクトリ
JSONファイルを格納するためのローカル・ファイル・システム内のパス名。
参照
ローカル・ファイル・システム内のパスを選択するためのファイル・システム・ブラウザを開きます。
「OK」をクリックします。
これで、JSONファイルをJDeveloperで編集できるようになります。JavaScriptエディタの通常の機能を使用してコンテンツを追加します。
JDeveloperは、関数または変数への参照の名前変更をサポートしています。また、JDeveloperでは、削除操作の実行時に関数名のすべてのオカレンスが新規名に置き換えられます。このような関数名の名前変更および置換方法はリファクタと呼ばれます。
リファクタとは、プログラムの動作を変更することなくコード構造を変更する編集上の技術です。リファクタ操作は一連の簡単な編集操作で、プログラムのコードが正常にコンパイルおよび実行されるように変換します。JDeveloperには、JavaScriptコードおよびファイル用として自動リファクタ操作のコレクションが用意されています。
リファクタは、プログラムのソース・コードを変更して保持、拡張または再利用しやすくする際に使用します。この変更は一連のリファクタ・ステップとして行われます。ユーザーは、ステップの終了ごとに、プログラムを再ビルドおよび再検証して、エラーが発生していないか確認できます。
JDeveloperは、JavaScriptコードおよびファイル用として次のリファクタ操作をサポートしています。
関数、変数またはラベルへの参照の名前変更。関数名または変数名の各オカレンスが新しい名前で置き換えられます。
安全な削除。関数の定義が複製され、複製された定義に含まれる関数名のオカレンスがすべて新しい名前で置き換えられます。
JavaScriptファイル内で関数、変数およびラベルなどのコード要素の特定の使用方法を検索できます。これにより、リファクタ時に、要素が使用されている場所を特定できるため、要素を安全に変更、または変更しないことを選択できます。
JavaScriptファイル内で関数、変数またはラベルを検索するには、次のようにします。
検索する関数、変数およびラベル内にカーソルを置き、右クリックします。
「使用方法の検索」を選択します。
JavaScriptファイル内で選択した要素が検索されます。
要素の検索時には、オプションの選択肢が2つ用意されています。
変数名、ラベル名または関数名についてコメント内を検索する場合、これを選択します。これが役立つのは、後でリストアする予定のコードのセクションをコメント・アウトした場合や、リファクタに含まれる要素の更新名がコメントに反映されることを単に確認する場合などです。
検索の結果を新規タブに表示する場合、これを選択します。これを選択しない場合、「ログ」ウィンドウに結果が表示されます。
JavaScriptコードを操作する際に、関数または変数へのすべての参照および定義の名前を簡単に変更できます。必要に応じて、最初にプレビュー(置換する使用方法のリスト)を生成できます。プレビューを使用して、その他の使用方法の名前を変更する前に、選択した使用方法を調査、変更するかまたは除外します。
名前の変更操作の有効範囲は、プロジェクト内の要素の全範囲になります。関数の使用方法は、プロジェクト内で表示されるすべての場所で置換されます。変数はそれぞれの定義の語彙範囲のみで名前が変更され、同じ名前を持つそれ以外の要素は変更されません。
デフォルトでは、操作は、コメント(ただし、コード要素を指定するドキュメント・コメント・タグではない)および注釈を除いた、JavaScriptファイルで実行されます。あいまいではない使用方法が置換されます。
コード要素の名前を変更するには、次のようにします。
名前を変更する要素を選択します。
JavaScriptエディタで、関数名または変数名を選択します。
または
JSPまたはHTMLページのスクリプトで、関数名または変数名を選択します。
コマンドを起動します。
メイン・メニューまたはポップアップ・メニューから、「リファクタ」→「名前の変更」を選択します。
または
[Ctrl]と[Alt]を押しながら[R]を押します。
「変更後の名前」ボックスに、新しい名前を入力します。名前は有効で、まだ使用されていない必要があります。
「コメント内を検索」を選択し、操作をコメント、ドキュメント・コメントの本体および注釈にまで拡張します。
名前の変更操作をコミットする前に置換される使用方法をインスペクトする場合は、「プレビュー」を選択します。
「OK」をクリックします。「プレビュー」を選択した場合は、プレビュー・ログ・ウィンドウからの名前の変更操作を完了します。「プレビュー」を選択しない場合、すべての使用方法が変更されます。
JavaScriptコードを開発する際に、関数、ラベルまたは変数の定義を安全に削除できます。要素が使用中の場合は、ユーザーの確認なしに定義の削除が実行されることはありません。
要素が使用中である場合は、使用方法を示すログが表示されます。このリストを使用して、使用方法をインスペクトおよび解決します。このため、削除を確認しても、残りの使用方法は未定義の参照としてコード内に残ります。
コード要素を削除するには、次のようにします。
削除する要素を選択します。
JavaScriptエディタで、関数名、ラベル名または変数名を選択します。
または
JSPまたはHTMLページのスクリプトで、関数名、ラベル名または変数名を選択します。
コマンドを起動します。
メイン・メニューまたはポップアップ・メニューから、「リファクタ」→「安全に削除」を選択します。
または
[Alt]キーを押しながら[Del]キーを押します。
「安全に削除」ダイアログが開き、プロジェクト・ファイルで使用方法が検索されます。
ダイアログが閉じた場合、要素は削除されています。検索の実行後もダイアログが開いたままの場合、要素には未解決の使用方法があります。
「使用方法の表示」をクリックし、使用方法を調査および解決します。完了後、コマンドを再起動して要素を削除します。
または
「OK」をクリックして、要素の定義を削除します。
多くの使用方法を変更する可能性があるリファクタ操作を実行する場合、手動での変更が必要な使用方法や除外が必要な使用方法を識別する場合には、リファクタのプレビューが役に立ちます。操作をコミットする前にプレビュー・ログ・ウィンドウで使用方法を表示し、これらを調査して解決するオプションがあります。変更を確認したら、操作をコミットできます。
ログには、閉じることが可能なパッケージとJavaファイルのツリーが表示されます。各ファイルの下に、変更した使用方法が含まれるコードの行が表示されます。プレビュー・ウィンドウの詳細を参照するには、[F1]を押します。
編集ウィンドウに使用方法を表示するには、次のようにします。
ログのエントリをダブルクリックします。
リファクタ操作から使用方法を除外するには、次のようにします。
使用方法を右クリックし、「対象外」を選択します。
リファクタ操作をコミットするには、次のようにします。
使用方法に影響する編集を行った場合は、ログ・ツールバーの「リフレッシュ」ボタンをクリックし、使用方法の検索を再実行します。
ログ・ツールバーの「リファクタ実行」ボタンをクリックします。
JavaScriptでは、編集対象の操作の範囲や、関数の全体的な構造のどこにその操作が配置されるかに関する感覚を維持する上で、インデント、カッコおよびその他の視覚的な目印が役立ちますが、編集時には、その最初のスキームがわからなくなる場合があります。JDeveloperでは、JavaScriptコードを理解しやすいように再フォーマットすることにより、パラレル要素を整列し、編集対象の関数の各部に関する視覚的な目印を見つけやすくすることができます。また、再フォーマットにより、無関係の改行や他の余白をJavaScriptから除去し、JavaScriptをよりコンパクトにできるため、ファイル・サイズの縮小によってデプロイメントの効率を高めることができます。
JavaScriptコードのセクションを再フォーマットするには、次のようにします。
再フォーマットするJavaScriptコードのセクション内にカーソルを置いて右クリックするか、再フォーマットするコードSnippetを選択します。
「再フォーマット」を選択します。
選択したJavaScriptコードのセクションが再フォーマットされます。ファイルを保存すると、コードが新規フォーマットで保存されます。
コード・エディタのルック・アンド・フィール、一般的な動作およびコード・インサイトとJavaインサイトのオプションをカスタマイズできます。
コードのフォーマット・プリファレンスを変更するには、次のようにします。
メイン・メニューから、「ツール」→「プリファレンス」→「コード・エディタ」を選択します。
|
注意: このダイアログで、Javaソース・エディタでJavaファイルを編集するためのオプションを選択することもできます。選択内容はJavaScriptとJavaファイルに適用されます。 |
判読性やファイル・サイズに影響する変更を行った場合、.jsファイルをフォーマットすることもできます。また、コード折りたたみを使用すると、選択したファイルの論理要素(関数定義など)を折りたたむことによってファイルの特定の領域にのみ集中できるため、判読性を高めることができます。折りたたむと、コード要素の最初のいくつかのキーワード(定義対象の関数の名前など)のみが表示されます。残りの部分は最初のキーワードの後ろに省略記号(...)で示されます。
コード折りたたみを使用するには、次のようにします。
JavaScriptエディタでテキストの最初の列の左側にある「-」記号をクリックします。
これにより、選択した要素のコードが折りたたまれ、「-」記号が「+」に変化します。
コードのセクションを展開するには、次のようにします。
「+」記号をクリックします。
すべてのJavaScriptコードのフォーマット機能やハイライト表示機能およびコード折りたたみは、JSONファイルの編集または作成時にも適用されます。
ファイルを移動する場合、アプリケーション全体にわたってこのファイルへの参照を変更する必要があります。JDeveloperでは、リファクタ中に<script src=...>タグで参照を変更することによってこのタスクがサポートされます。
JavaScript関数をリファクタおよび移動するには、次のようにします。
アプリケーション・ナビゲータでリファクタおよび移動するファイルを右クリックし、「リファクタおよび移動」を選択します。
関数の移動先となるファイルの新規名を入力します。
「名前の変更」ログ・ウィンドウの「リファクタ実行」をクリックします。
リファクタが完了すると、リファクタの影響を受けるすべてのHTMLファイルで<script src=...>タグが更新されます。
JDeveloperは、カスタム・アクションという再利用可能なモジュールの開発を可能にする、JSP 2.0、JSP 1.2およびFacelets 2.0カスタム・タグ・ライブラリをサポートします。カスタム・アクションにより実行できるタスクの例としては、フォーム処理、データベースまたは電子メールへのアクセス、およびフロー制御があります。カスタム・アクションを起動するには、JSPページ内のカスタム・タグを使用します。カスタム・タグの集合が、カスタム・タグ・ライブラリとなります。タグ・ライブラリ・ディスクリプタ・ファイル(.tld)は、タグ・ライブラリと、その中の各タグを説明するXML文書です。
新規JSPまたはFaceletsカスタム・タグ・ライブラリの作成、ならびに他のソースからのカスタム・タグ・ライブラリのインポートおよび登録の作業を容易にするいくつかのツールが用意されています。カスタム・タグ・ライブラリは、JDeveloperのコード(タグ)・インサイトによりサポートされ、コンポーネント・パレットに追加できます。カスタム・タグ・ライブラリを使用する場合、カスタム・タグ・ライブラリおよびタグを作成できます。Javaコード・エディタでのページの編集時に、タグのコード(タグ)・インサイトを起動するために、カスタム・タグ・ライブラリを登録します。ページの編集時に、パレット上で使用可能なタグを表示するために、パレットにカスタマイズされたページを追加します。
タグは、多くのJSPおよびFaceletsアプリケーションに共通しています。コア反復機能および制御フロー機能、テキストの組込み、国際化が可能な書式設定タグ、およびXML操作タグがサポートされます。このような標準化によって、1つのタグを複数のコンテナで使用できるようになり、コンテナ間での簡単な認識および最適化が実現されます。式言語(EL)と4つの標準タグ・ライブラリを使用することで、JSTLでは動的なJavaベースのWebサイトを開発できます。
JSTLが装備されたことにより、<jbo:showvalue>や<jbo:rowsetiterate>などのタグが不要になり、ビジネス・コンポーネント・データ・タグ・ライブラリをより簡単に使用できます。このような一般的な操作のコーディングに時間を費やすかわりに、関わっているWebアプリケーション・プロジェクト固有のタグやWebページの開発に集中できます。
タグ・ライブラリのソースの検索を含むライブラリの管理を行うには、「ツール」→「ライブラリの管理」→「JSPタグ・ライブラリ」または「Faceletsタグ・ライブラリ」に移動します。
タグのサポートには、JSPまたはFaceletsページの作成に使用可能な次のカスタム・タグ・ライブラリが含まれます。
JSTL Core。このタグ・ライブラリは、式、フロー制御およびURLベースのリソースに対する汎用アクセス方式に関するタグを提供します。これらのリソースのコンテンツをJSPページ内に組み込んだりJSPページ内で処理できます。
JSTL Format。このタグ・ライブラリは、I18Nとローカル書式およびローカル解析をサポートするタグを提供します。
JSTL SQL。このタグ・ライブラリは、JSPの中からデータベースを直接アクセスできるタグを提供します。
JSTL XML。このタグ・ライブラリは、XML文書の解析およびXSL変換を行えるタグを提供します。
Facelets 2.0。このタグ・ライブラリは、Webページ内のUIコンポーネントを作成、管理および処理できるタグを提供します。詳細は、Faceletsタグ・ライブラリの文書(http://myfaces.apache.org/core20/myfaces-impl/tlddoc-facelets/ui/tld-summary.html)を参照してください。
Trinidad Components 2.0。詳細は、Apache Trinidadのページ(http://myfaces.apache.org/trinidad/index.html)を参照してください。
カスタム・タグ・ライブラリを作成すると、開発中の別のアプリケーションでライブラリを再利用できます。タグ・ライブラリは、アプリケーションで使用する場合、デプロイメント・ディスクリプタの一部としてJDeveloperにインクルードされます。
プロジェクト・レベルのタグ・ライブラリを追加、削除または編集するには、次のようにします。
「アプリケーション」→「デフォルト・プロジェクト・プロパティ」→「JSPタグ・ライブラリ」を選択します。
必要に応じて、プロジェクトのタグ・ライブラリを追加、削除または編集します。
JSPタグ・ライブラリ・ディスクリプタ(TLD)・ファイルを参照するには、次のようにします。
Javaコード・エディタで、参照するTLDファイルのタグ・ライブラリ宣言内の任意の位置を右クリックします。タグ・ライブラリ宣言は、<%@ taglibで始まります。
ポップアップ・メニューから、「タグ・ライブラリの参照」を選択します。JSPタグ・ライブラリ・ディスクリプタ・ファイルが別のJavaコード・エディタ・ウィンドウに開きます。
カスタム・タグ・ライブラリを作成するには、タグ・ライブラリ・ディスクリプタ・ファイルを作成し、次に簡単なタグまたはコンポーネント・タグを作成します。タグ・ライブラリ・ディスクリプタ(TLD)・ファイルは、タグ・ライブラリと、その中の各タグを説明するXML文書です。これはコンテナによりタグの検証に使用されます。タグを作成すると、それらに属性およびスクリプト変数を追加できます。
カスタムJSPまたはFaceletsタグ・ライブラリを作成するには、次のようにします。
アプリケーション・ナビゲータで、新しいタグ・ライブラリを作成するプロジェクトを選択します。
「ファイル」→「新規」を選択して「新規ギャラリ」を開きます。
「カテゴリ」ツリーで「Web層」を開き、「JSP」または「JSF/Facelets」を選択します。
「項目」リストで「JSP」または「Faceletsタグ・ライブラリ」をダブルクリックし、タグ・ライブラリ作成ウィザードを開きます。
新しいタグ・ライブラリの作成に必要な情報の入力を完了した後、「終了」をクリックします。
カスタム・タグ・ライブラリをコンポーネント・パレットに追加するには、次のようにします。
プロジェクトのコンポーネント・パレットで使用可能な登録済のカスタム・タグ・ライブラリを作成するには、「アプリケーション」→「プロジェクト・プロパティ」→「JSPタグ・ライブラリ」またはFaceletタグ・ライブラリ→「追加」に移動します。「パレットのタグ・ライブラリを表示」を選択します。
新規ギャラリウィザードでFaceletsタグ・ライブラリを作成するとき、「プロジェクト・ベース」オプションを選択した場合にのみ、コンポーネント・パレットに追加されます。作成時に「デプロイ可能」のデフォルト値を選択するか、変更しない場合、次の手順を実行して、ライブラリを登録する必要があります。これによって、ライブラリが使用可能になり、「プロジェクト・プロパティ」の「タグ・ライブラリの追加」オプションを使用してプロジェクトに追加できます。
新しいカスタム・タグ・ライブラリをデプロイします。
デプロイ済のライブラリを登録します。ライブラリの登録は、第11章のJSPまたはFaceletsカスタム・タグ・ライブラリを登録する方法に関する項を参照してください。ライブラリを登録すると、「プロジェクト・プロパティ」オプションおよび「タグ・ライブラリの追加」オプションに表示されます。
「プロジェクト・プロパティ」オプションおよび「タグ・ライブラリの追加」オプションを使用して、タグ・ライブラリをプロジェクトに追加します。ライブラリがプロジェクトに追加されると、コンポーネント・パレットに表示されます。
タグ・ライブラリ・ディスクリプタ・プロパティ・エディタを使用してカスタムTLDファイルを変更するには、次のようにします。
「構造」ウィンドウで、変更するTLDファイルを選択します。
ファイルを右クリックし、「プロパティ」を選択します。「タグ・ライブラリ・ディスクリプタ」プロパティ・エディタが表示されます。
変更の完了後に、「OK」をクリックします。
XMLソース・エディタでTLDファイルを編集するには、次のようにします。
ナビゲータで、ファイルをダブルクリックするか、右クリックして「開く」を選択します。デフォルトで開かれていない場合、このファイルの「ソース」タブをクリックします。入力時に、<(開き山カッコ)を入力して間をおくか、[Ctrl]キーを押しながら[Space]キー(デフォルトのキーマッピングを使用している場合)を押すと、コード・インサイトを起動できます。コード・インサイトにより、文法に基づいて有効な要素のリストが表示されます。
要素を選択した後にスペースを入力してから時間を置くか、[Ctrl]キーを押しながら[Space]キーを押すと、有効な属性がリスト表示され、ここから選択できます。属性値に対する左引用符を入力すると、必要な値の型または使用可能な値のリストが表示されます。
|
ヒント: コンポーネント・パレットを使用してTLDファイルを編集するには、「表示」→「コンポーネント・パレット」を選択し、パレットを開き、ドロップダウン・リストから使用可能なページの1つまたは「タグ・ライブラリ」を選択します。次に、そのページから要素を選択します。 |
JSPまたはFaceletsカスタム・タグ・ライブラリを登録するには、次のようにします。
「ツール」→「ライブラリの管理」を選択し、「ライブラリの管理」ダイアログを開きます。
「JSPタグ・ライブラリ」タブまたは「Faceletsタグ・ライブラリ」タブを選択します。
「新規」をクリックして新しいJSPタグ・ライブラリ・ディスクリプタ・ファイルを「JSPタグ・ライブラリ」ツリーまたは「Faceletsタグ・ライブラリ」ツリーに追加します。
カスタム・タグ・ライブラリ・ディスクリプタ(TLD)・ファイル、JARまたはZIPアーカイブ・ファイルの場所、URIおよび新規タグ・ライブラリの接頭辞を入力します。入力した接頭辞は、「OK」をクリックした後に「JSPタグ・ライブラリ」ツリーまたは「Faceletsタグ・ライブラリ」ツリーで更新されます。
「OK」をクリックして、「ライブラリの管理」ダイアログを終了します。
タグにスクリプト変数を追加するには、次のようにします。
アプリケーション・ナビゲータで、Tag.javaファイルまたはWebTag.javaファイルを選択します。
タグを右クリックし、「スクリプト変数の追加」を選択します。「新規スクリプト変数の追加」ダイアログが開きます。
スクリプト変数の追加に必要な情報の入力を完了した後、「OK」をクリックします。属性を定義する新しいvariable.javaファイルが作成され、Javaコード・エディタ内で開かれます。新しいスクリプト・クラスも既存のタグ・ハンドラ・クラスに追加されます。
カスタムJSPタグ・ライブラリまたはFaceletsタグ・ライブラリをJARファイルとしてデプロイするには、次のようにします。
アプリケーション・ナビゲータで、デプロイするDeployファイルを選択します。
ファイルを右クリックし、「JARファイルにデプロイ」を選択します。デフォルトでは、タグ・ライブラリは、現行プロジェクトのディレクトリにデプロイされます。
