NetBeans IDE での JSF 2.0 サポート

NetBeans IDE は、JavaServer Faces 2.0 向けの組み込みサポートを有効にする多数の機能を備えています。IDE の新しい JSF 2.0 サポートは、前回の JavaServer Faces 向けのサポートをベースに構築されており、Facelets ページを対象とした多彩なエディタ拡張、エンティティークラスと連携するためのさまざまな機能、および JSF 管理対象 Bean、Facelets テンプレート、合成コンポーネントの作成などの共通の開発タスク用の JSF ウィザードのスイートがあります。
次の項目では、NetBeans IDE の操作中に自由に利用できる JSF 2.0 の機能について説明します。新しい JSF の機能を試すには、Java Web テクノロジと Java EE テクノロジが含まれている NetBeans IDE の Java バンドル版をダウンロードします。このダウンロードバンドルには、Java EE 6 プラットフォーム仕様 (JSR 316) のリファレンス実装である GlassFish Server Open Source Edition も含まれています。
目次
プロジェクトの JSF 2.0 サポート
プロジェクト用の JSF サポートは、次のように特徴付けることができます。
- プロジェクトに Facelets テンプレートファイルが含まれる
- JSF 2.0 ライブラリがプロジェクトのクラスパスに追加される
- Faces サーブレットおよびサーブレットのマッピングがプロジェクトの配備記述子に追加される
GlassFish サーバー、またはほかの任意の Java EE 6 準拠サーバーを使用すると、JSF 2.0 サポートを備えたプロジェクトを作成したり、既存のプロジェクトに JSF 2.0 サポートを追加したりできます。
JSF 2.0 サポートを含む新しいプロジェクトの作成
新しい Java Web アプリケーションを作成するには、IDE のプロジェクトウィザードを使用します。これを行うには、IDE のメインツールバーにある「新規プロジェクト」(
) ボタンをクリックするか、Ctrl-Shift-N キー (Mac の場合は ⌘-Shift-N キー) を押します。「ステップ 4: フレームワーク」で、「JavaServer Faces」を選択します。
JavaServer Faces を選択すると、上の画像に示すように、さまざまな構成オプションを使用できるようになります。プロジェクトから JSF 2.0 ライブラリにアクセスする方法を決定できます。「構成」タブをクリックすると、Faces サーブレットをプロジェクトの配備記述子に登録する方法を指定できます。
既存のプロジェクトへの JSF 2.0 サポートの追加
既存の Java Web アプリケーションに JSF 2.0 サポートを追加する場合は、プロジェクトの「プロパティー」ウィンドウから行うことができます。
- 「プロジェクト」ウィンドウ (Ctrl-1、Mac の場合は ⌘-1) で、プロジェクトノードを右クリックし、「プロパティー」を選択します。「プロジェクトプロパティー」ウィンドウが表示されます。
- 「フレームワーク」カテゴリを選択し、「追加」ボタンをクリックします。表示されるダイアログで、「JavaServer Faces」を選択します。
JavaServer Faces を選択すると、JSF 2.0 ライブラリへのパスの指定や、プロジェクトの配備記述子での Faces サーブレットの登録など、さまざまな構成オプションを使用できるようになります。
エディタの使用
IDE のエディタは言語固有であり、作業中のファイルの種類に応じたサポートを提供します。一般的に、ファイル内の要素上で Ctrl- スペースキーを押すと、コード補完と API ドキュメントを呼び出すことができます。キーボードショートカットとコードテンプレートを利用することもできます。
IDE のメインメニューから「ヘルプ」>「キーボードショートカットカード」を選択して、よく使用するキーボードショートカットおよびコードテンプレートを表示します。完全な一覧については、「NetBeans IDE 6.x キーボードショートカットの仕様」を参照してください。
IDE は、JSF 2.0 API 用の組み込みの Javadoc サポートに加え、JSF のタグライブラリドキュメントを備えています。これらのリソースを実際の操作で利用するには、エディタ内の指定した要素上で Ctrl- スペースキーを押すだけです。
Javadoc ドキュメントにアクセスしたままにするには、IDE の Javadoc ウィンドウを開きます (「ウィンドウ」>「その他」>「Javadoc」)。Javadoc ウィンドウは、エディタ内のカーソルの位置に応じて自動的に最新状態に更新されます。
JSF プロジェクトを操作する場合、編集作業はまず Facelets ファイル、JSF 管理対象 Bean、および Faces 構成ファイル (faces-config.xml) に対して行われます。次に、自由に使用できるエディタのサポートを簡単に説明します。
Facelets エディタ
IDE の Facelets エディタには、構文の強調表示、エラーや JSF タグのチェック、ドキュメントのサポート、および EL 式、Facelets コアライブラリ、名前空間でのコード補完など、JSF 開発を容易に行うための機能が多数用意されています。
必要に応じ、Ctrl- スペースキーを押して、コード補完およびドキュメントのサポートを呼び出すことができます。
また、Ctrl- スペースキーを押す前に接頭辞 (jsf など) を入力して、項目をフィルタすることもできます。
Ctrl- スペースキーを押して Facelets 名前空間のコード補完を呼び出します。
同様に、ページでまだ宣言されていない名前空間を持つ JSF タグを入力すると、ページの <html> タグに自動的に追加されます。
エディタは、式言語 (EL) 構文の補完サポートを備えています。暗黙オブジェクト、JSF 管理対象 Bean、およびそのプロパティーに対する候補を呼び出すには、EL コードで Ctrl- スペースキーを押します。
エディタでコードスニペットを強調表示し、「合成コンポーネントに変換」を選択して、JSF 合成コンポーネントを作成することもできます。詳細については、「合成コンポーネントウィザード」を参照してください。
エディタは、基本的なエラーチェック機能を備えています。エラーは赤い下線付きで表示され、対応するバッジが左マージンに表示されます。警告には黄色い下線が引かれ、左マージンに黄色いバッジが示されます。バッジまたは下線の付いたテキストの上にマウスを置くと、エラーの説明が表示されます。
JSF タグを入力すると、さまざまなチェックが実行されます。これらには次のものが含まれます。
- 宣言されたライブラリが存在するかどうか
- タグの接頭辞と一致するライブラリに、そのコンポーネントまたはタグが含まれているかどうか
- 必要なすべての属性がタグに含まれているかどうか
- 入力されたすべての属性がコンポーネントのインタフェースで定義されているかどうか
エディタは次についてもチェックします。
- 宣言されていないコンポーネントがあるかどうか
- 使用法のない taglib 宣言があるかどうか
Faces XML 構成エディタ
JSF プロジェクトに faces-config.xml ファイルを含めると、ナビゲーション規則を定義するとき、または管理対象 Bean を宣言するときに、Ctrl- スペースキーを押して、コード補完とドキュメントのサポートを呼び出すことができます。
手動によるコーディングではなく、ダイアログを使用してナビゲーション規則を入力する場合は、この目的のために IDE に用意されているいくつかの JSF 固有のダイアログを使用できます。これらのダイアログには、エディタの右クリックメニューからアクセスできます。
IDE には、faces-config.xml 用の 2 つの異なるビューがあります。1 つは XML ソースコードを表示する XML ビューです。もう 1 つはページフロービューで、これは faces-config.xml ファイルで定義された JSF ナビゲーション規則を表すグラフィカルインタフェースです。
たとえば、ファイルに次のナビゲーション規則があるとします。
<navigation-rule>
<from-view-id>/greeting.xhtml</from-view-id>
<navigation-case>
<from-outcome>response</from-outcome>
<to-view-id>/success.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
「ページフロー」ビューには、次の関係が表示されます。これは、「response」が JSF の NavigationHandler に渡されると、greeting.xhtml から success.xhtml に移動することを示します。
「ページフロー」ビュー内のコンポーネントをダブルクリックすると、ソースファイルに直接移動できます。たとえば、greeting.xhtml コンポーネントをダブルクリックすると、エディタで greeting.xhtml ファイルが開かれます。同様に、2 つのコンポーネントの間にある矢印をダブルクリックすると、エディタで、faces-config.xml XML ビューで定義されたナビゲーション規則がフォーカスされます。
JSF ウィザード
NetBeans IDE には、JSF 2.0 を使った開発を容易にする多数のウィザードが用意されています。新しい Facelets ページ、Facelets テンプレート、JSF 管理対象 Bean、合成コンポーネント、Faces 構成ファイルなどを作成できます。
すべてのウィザードは、IDE の一般的なファイルウィザードからアクセスできます。ファイルウィザードにアクセスするには、「新規ファイル」(
) ボタンを押すか、メインメニューから「ファイル」>「新規ファイル」を選択します (または Mac の場合は Ctrl-N、⌘-N)。JSF 固有のウィザードは JavaServer Faces カテゴリに一覧表示されます。
JSF サポートを使用して Java Web プロジェクトを操作している場合は、次のウィザードを使用できます。
JSF ページウィザード
プロジェクト用に Facelets および JSP ページを作成するには、JSF ページウィザードを使用します。IDE のファイルウィザードで、「JavaServer Faces」カテゴリを選択し、「JSF ページ」を選択します。JSF 2.0 では、JSF ページを宣言する方法として Facelets が優先されます。デフォルトで、ウィザードの「Facelets」オプションが選択されています。新しい JSP ページまたは JSP フラグメント (.jspf ファイル) を作成する場合は、「JSP ファイル」オプションを選択します。
管理対象 Bean ウィザード
IDE の管理対象 Bean ウィザードを使用して、アプリケーション用の JSF 管理対象 Bean を作成できます。IDE のファイルウィザードの「JavaServer Faces」カテゴリから「JSF 管理対象 Bean」を選択します。
デフォルトでは、ウィザードで指定するメタデータは、注釈内に変換されます。この注釈は、管理対象 Bean が生成されると、これらの Bean に適用されます。たとえば、次の画像では、NewJSFManagedBean という名前のセッションスコープされたクラスを新しく作成し、これに myManagedBean という名前を付けています。
管理対象 Bean が生成されると、次のように適切な注釈とともに表示されます。
package my.org;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="myManagedBean")
@SessionScoped
public class NewJSFManagedBean {
/** Creates a new instance of NewJSFManagedBean */
public NewJSFManagedBean() {
}
}
また、プロジェクトにすでに faces-config.xml ファイルが含まれている場合は、ウィザードの「構成ファイルにデータを追加」オプションが有効になり、Faces 構成ファイルで管理対象 Bean を宣言するか、または管理対象 Bean に注釈で指定したメタデータを持つことができます。
Faces 構成ウィザード
JSF 2.0 では、アプリケーションを構成するため、標準の Faces 構成ファイル (faces-config.xml) の代替手段として注釈が採用されています。したがって、プロジェクトに JSF 2.0 サポートを追加しても、IDE ではデフォルトの faces-config.xml ファイルは生成されません (JSF 1.2 では生成されました)。通常は、特定の構成設定を定義するために、faces-config.xml ファイルをプロジェクトに追加します。これを行うには、IDE の Faces 構成ウィザードを使用します。
IDE のファイルウィザードにある「JavaServer Faces」カテゴリから「JSF Faces 構成」を選択します。これにより、新しい faces-config.xml ファイルが作成され、デフォルトでプロジェクトの WEB-INF フォルダに配置されます。
faces-config.xml 向けの IDE のエディタサポートの説明については、「Faces XML 構成エディタ」を参照してください。
合成コンポーネントウィザード
JSF 2.0 では、ユーザーインタフェース (UI) の合成コンポーネントの作成プロセスが簡素化されており、これらのコンポーネントを Web ページで再利用できます。IDE の合成コンポーネントウィザードを使用すると、JSF 合成コンポーネント用の Facelets テンプレートを生成できます。
すべての JSF 関連ウィザードと同様、合成コンポーネントウィザードには、IDE のファイルウィザードにある「JavaServer Faces」カテゴリからアクセスできます。ただし、ウィザードをよりすばやく表示するには、エディタの Facelets ページからコードスニペットを強調表示し、右クリックメニューから「合成コンポーネントに変換」を選択します。
次の例では、スニペット「<p>This is the composite component.</p>」で合成コンポーネントウィザードを呼び出すときに発生するアクションと、自由に使える機能について説明します。
合成コンポーネントウィザードが開きます。このとき、選択されたスニペットが「実装セクション」パネルに表示されます。
デフォルトでは、合成コンポーネントを格納するための ezcomp フォルダが作成されます。たとえば、myComponent という名前の新しいコンポーネントを作成している場合、このウィザードにより myComponent.xhtml Facelets ページが生成され、アプリケーションの Web ルートの resources/ezcomp フォルダに配置されます。
ウィザードを完了すると、指定したコードスニペット用の合成コンポーネントのソースファイルが生成されます。テンプレートには、JSF 2.0 の composite タグライブラリへの参照が含まれます。
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite">
<!-- INTERFACE -->
<composite:interface>
</composite:interface>
<!-- IMPLEMENTATION -->
<composite:implementation>
<p>This is the composite component.</p>
</composite:implementation>
</html>
また、エディタ内で強調表示したスニペットの位置に、新しいコンポーネントタグが挿入されます。この場合、生成されるタグは <ez:myComponent/> です。IDE では、合成コンポーネントのある名前空間が、ページの <html> タグに自動的に挿入されます。
IDE では、合成コンポーネントのソースファイルへのハイパーリンク機能もサポートされます。コンポーネントタグの上にマウスを置いているときに Ctrl キー (Mac の場合は ⌘ キー) を押すと、Facelets ページから合成コンポーネントに移動できます。ハイパーリンクをクリックすると、合成コンポーネントのソースファイルがエディタで開かれます。
JSF 2.0 の合成コンポーネントの詳細については、「真の抽象化: JSF 2.0 の合成 UI コンポーネント」を参照してください。
エンティティーからの JSF ページクラスウィザード
「エンティティークラスのサポート」の「エンティティークラスからの JSF ページの作成」のトピックを参照してください。
Facelets テンプレートウィザード
Facelets テンプレートを生成するには、Facelets テンプレートウィザードを使用します。IDE のファイルウィザードにある「JavaServer Faces」カテゴリから「Facelets テンプレート」を選択します。8 つの独自のレイアウトスタイルから選択できます。また、レイアウトを CSS と HTML <table> タグのどちらを使用して実装するかを指定できます。
このウィザードにより、<h:head> タグと <h:body> タグを使用して XHTML テンプレートファイルが作成され、関連付けられたスタイルシートはアプリケーションの Web ルートにあるresources/css フォルダに保存されます。default.css ファイル、および選択するレイアウトに応じて cssLayout.css ファイルまたは tableLayout.css ファイルが生成されます。
ブラウザにテンプレートを表示するには、エディタ内で右クリックし、「表示」を選択します。ブラウザウィンドウが開き、テンプレートが表示されます。
エンティティークラスのサポート
アプリケーションで Java Persistence を使用しており、データベーススキーマに基づいたエンティティークラスがある場合、IDE では、エンティティークラスデータを使った効率的な処理を可能にする機能が提供されます。
注: データベースクラスからエンティティークラスを作成するには、データベースウィザードから IDE のエンティティークラスを使用します。これは、IDE のファイルウィザードにある「持続性」カテゴリからアクセスできます。
エンティティークラスからの JSF ページの作成
アプリケーションにエンティティークラスができたら、IDE のエンティティーからの JSF ページクラスウィザードを使用して、エンティティークラスデータを表示および変更するための Web インタフェースを作成します。ウィザードで生成されるコードは、エンティティークラス内に格納された持続性注釈に基づいて生成されます。
ウィザードでは、エンティティークラスごとに次のものが生成されます。
- エンティティーインスタンスの作成、取得、変更、および削除のためのステートレスセッション Bean
- JSF セッションスコープ指定管理対象 Bean
- CRUD 機能のための 4 つの Facelets ファイル (
Create.xhtml、Edit.xhtml、List.xhtml、および View.xhtml) を格納するディレクトリ
- JSF 管理対象 Bean (
JsfUtil、PaginationHelper) に使用されるユーティリティークラス
- ローカライズされたメッセージのプロパティーバンドル、およびプロジェクトの Faces 構成ファイル内 (このファイルがない場合、
faces-config.xml ファイルが作成される) の対応するエントリ
- 描画されるコンポーネントのデフォルトのスタイルシートおよび Facelets テンプレートファイルを含む、補助 Web ファイル
エンティティーからの JSF ページクラスウィザードを使用するには、IDE のファイルウィザードにアクセスします。「JavaServer Faces」カテゴリを選択し、「エンティティーからの JSF ページクラス」を選択します。
「ステップ 3: 生成された JSF ページとクラス」に到達したら、生成するファイルの保存場所を指定できます。
たとえば、ウィザードを Customer エンティティークラスに適用している場合、前出の画像に示される設定によって次のファイルが生成されます。
エンティティーからのフォームのダイアログを使用して、エンティティークラスに含まれるすべてのプロパティーのフィールドを含む JSF フォームを生成できます。フォームに関連付けられたユーザーデータを処理するために作成された、JSF 管理対象 Bean が用意されている必要があります。
注: 関連する管理対象 Bean なしでこのダイアログを使用する場合は、管理対象 Bean の名前をこのダイアログに入力できます。この名前は、有効かどうかにかかわらず、ページで使用されます。IDE の管理対象 Bean ウィザードを使用して管理対象 Bean を作成できます。または、エンティティーからの JSF ページクラスウィザードを使用すると、選択されたすべてのエンティティークラスに対する管理対象 Bean が生成されます。
エンティティーからのフォームのダイアログにアクセスするには、Facelets ページのエディタで Ctrl- スペースキーを押して「エンティティーからの JSF フォーム」を選択するか、IDE の「パレット」に一覧表示されているエンティティーからのフォームの項目をダブルクリックします (Ctrl-Shift-8 キー、Mac の場合は ⌘-Shift-8 キー)。
たとえば、次の画像では、「Customer」エンティティークラスが、指定したプロジェクトの my.org パッケージにすでにあります。customerController 管理対象 Bean も、指定されたプロジェクトにすでに存在します。この管理対象 Bean には、Customer オブジェクトを返す selected という名前のプロパティーがあります。
注: 読み取り専用フィールドを含むフォームを作成するには、「読み取り専用ビューを生成」オプションを選択します。このオプションが選択されると、IDE は <h:outputText> タグをフォームフィールドに適用します。このオプションが選択されない場合は、<h:inputText> タグが適用されます。
このダイアログを完了すると、IDE により Facelets ページのコードが生成されます。たとえば、customerId プロパティーを含む Customer エンティティークラスが次の形式で表示されます。
<f:view>
<h:form>
<h1><h:outputText value="Create/Edit"/></h1>
<h:panelGrid columns="2">
<h:outputLabel value="CustomerId:" for="customerId" />
<h:inputText id="customerId" value="#{customerController.selected.customerId}" title="CustomerId" required="true" requiredMessage="The CustomerId field is required."/>
...
[ Other fields added here. ]
...
</h:panelGrid>
</h:form>
</f:view>
生成されたコードで使用されるテンプレートを変更するには、エンティティーからのフォームダイアログの「テンプレートのカスタマイズ」リンクをクリックします。
エンティティーデータ用の JSF データ表の作成
エンティティーからのデータ表ダイアログを使用して、エンティティークラスに含まれるすべてのプロパティー用の列を含む JSF データ表を生成できます。この機能を利用するには、エンティティークラスに関連付けられたバックエンドデータを処理するために作成された JSF 管理対象 Bean を用意しておく必要があります。
注: 関連する管理対象 Bean なしでこのダイアログを使用する場合は、管理対象 Bean の名前をこのダイアログに入力できます。この名前は、有効かどうかにかかわらず、ページで使用されます。IDE の管理対象 Bean ウィザードを使用して管理対象 Bean を作成できます。または、エンティティーからの JSF ページクラスウィザードを使用すると、選択されたすべてのエンティティークラスに対する管理対象 Bean が生成されます。
エンティティーからのデータ表ダイアログにアクセスするには、Facelets ページのエディタで Ctrl- スペースキーを押して「エンティティーからの JSF データ表」を選択するか、IDE の パレット に一覧表示されているエンティティーからのデータ表の項目をダブルクリックします (Ctrl-Shift-8 キー、Mac の場合は ⌘-Shift-8 キー)。
たとえば、次の画像では、指定したプロジェクトの my.org.entity パッケージに Product エンティティークラスがすでにあります。productController 管理対象 Bean もプロジェクト内にあり、管理対象 Bean には、Product オブジェクトの List を返す、getProductItems() という名前のメソッドが含まれています。
このダイアログを完了すると、IDE により Facelets ページのコードが生成されます。たとえば、productId プロパティーを含む Product エンティティークラスが次の形式で表示されます。
<f:view>
<h:form>
<h1><h:outputText value="List"/></h1>
<h:dataTable value="#{productController.productItems}" var="item">
<h:column>
<f:facet name="header">
<h:outputText value="ProductId"/>
</f:facet>
<h:outputText value="#{item.productId}"/>
</h:column>
...
[ Other columns added here. ]
...
</h:dataTable>
</h:form>
</f:view>
生成されたコードで使用されるテンプレートを変更するには、データ表からのフォームダイアログの「テンプレートのカスタマイズ」リンクをクリックします。
JSF パレットのコンポーネント
Facelets ページでの作業中、IDE の「パレット」を活用して JSF タグをページにドラッグ&ドロップできます。「パレット」にアクセスするには、メインメニューから「ウィンドウ」>「パレット」を選択するか、Ctrl-Shift-8 キー (Mac の場合は ⌘-Shift-8 キー) を押します。
IDE のメインメニューから「ソース」>「コードを挿入」(Alt-Insert キー、Mac の場合は Ctrl-I キー) を選択して、「パレット」内の JSF 固有のコンポーネントを含むポップアップリストを呼び出すこともできます。
「パレット」には、5 つの JSF 関連コンポーネントがあります。
- メタデータ: JSF メタデータタグ内に名前と値のペアを追加するためのダイアログを呼び出します。たとえば、名前と値のペアとして「
myId」と「myValue」を指定すると、次のコードスニペットが作成されます。
<f:metadata>
<f:viewParam id='myId' value='myValue'/>
</f:metadata>
- JSF フォーム: 次のコードスニペットをページに追加します。
<f:view>
<h:form>
</h:form>
</f:view>
- エンティティーからの JSF フォーム: エンティティークラスのデータを JSF フォームに含まれるフィールドに関連付けるためのダイアログを呼び出します。「エンティティーデータ用の JSF フォームの作成」を参照してください。
- JSF データ表: 次のコードスニペットをページに追加します。
<f:view>
<h:form>
<h:dataTable value="#{}" var="item">
</h:dataTable>
</h:form>
</f:view>
- エンティティーからの JSF データ表: エンティティークラスのデータを JSF データ表に含まれるフィールドに関連付けるためのダイアログを呼び出します。「エンティティーデータ用の JSF データ表の作成」を参照してください。
関連項目
JSF 2.0 の詳細については、次のリソースを参照してください。
NetBeans の記事およびチュートリアル
外部リソース
ブログ