ウィザードを使用して、アプリケーション、プロジェクト、および空白のJavaServer Faces(JSF)ページを短時間で作成できます。 ページを設計するには、ビジュアル・エディタを使用して、入力フィールド、ボタン、および表示フィールドを追加します。
-
メイン・メニューから「File」→「New」を選択します。New Galleryで「General」カテゴリを展開し、「Applications」を選択します。Itemsリストで「Custom Application」を選択し、「OK」をクリックします。
JDeveloperアプリケーションは、組織構造の最上位レベルです。アプリケーションの開発中に、操作しているオブジェクトの情報がここに格納されます。同時に、プロジェクトとすべての環境設定が追跡記録されます。
詳細表示
JDeveloperアプリケーションを使用すると、作成するアプリケーションのタイプ(WebアプリケーションやJavaアプリケーションなど)に応じて、ビルトイン・テンプレートを基に、事前定義された環境のタイプを指定できます。アプリケーション・テンプレートを使用すると、適切な機能の組合せが事前に指定されているため、標準アプリケーションのプロジェクト構造を迅速に作成できます。また、使用している機能に合った選択肢のみが使用できるように、JDeveloperで実行する処理がアプリケーション・テンプレートによりフィルタリングされます。
このチュートリアルでは、Custom Applicationテンプレートを使用します。このテンプレートでは、JDeveloperがサポートするすべての機能の関連オブジェクトを1つのプロジェクトから使用できます。
適切なテンプレートを使用してアプリケーションを作成した後も、新しいプロジェクトをアプリケーションに追加したり、組み込む機能を指定したりすることができます。これを実行するには、アプリケーション・ナビゲータでアプリケーション名を右クリックして、「New Project」を選択します。New Galleryでは、任意のタイプのプロジェクトをItemsリストから選択できます。
この例に合わせるため、アプリケーション名としてJSFApplicationと入力します。
初期プロジェクト構造(アプリケーションの作業領域内にある名前付きプロジェクト・フォルダ)および追加されるアプリケーション・ライブラリは、選択したアプリケーション・テンプレートによって決まります。関連する機能はアプリケーション内の1つ以上のプロジェクトにより定義されます。
詳細表示
JDeveloperのプロジェクトは、関連するファイルを論理的にグループ化するために使用されるものですが、ここではソース・ファイル、パッケージ、クラス、イメージ、およびプログラムに必要なその他の要素の追跡も行われます。プロジェクトでは、プログラムのコンパイル時や実行時に使用するソース・パスや出力パスなどの環境変数を管理します。また、プロジェクトには、コンパイラ、ランタイム、デバッグに関するオプションが用意されており、プロジェクトごとにこれらのツールの動作をカスタマイズできます。
ソース・コードのアクセス、変更、再利用を簡単にするために、複数のプロジェクトをアプリケーションに追加できます。それぞれのプロジェクトに含まれるファイルは、たとえば多層アプリケーションにおける各層に相当する場合もあれば、複雑なアプリケーションにおける各サブシステムに相当する場合もあります。これらのファイルはどのディレクトリに配置されていても、1つのプロジェクトに含めることができます。
デフォルト値のままにして、「Finish」をクリックします。
アプリケーション・ナビゲータのProjectsパネルは、次のように表示されます。

アプリケーション・ナビゲータで、プロジェクトを右クリックして「New」→「Web Tier」→「JSF/Facelets」→「Page」を選択し、「OK」をクリックします。

Create JSF Pageダイアログで、ファイル名としてStart.jsfを入力します。 ドキュメント・タイプにFaceletsが選択されていることを確認します。
JavaServer Facesを使用したアプリケーションによって作成されるJSFページは、Faceletsドキュメント(ファイル拡張子は
.jsf)またはXML構文で記述されたJSPドキュメント(ファイル拡張子は
.jspx)です。
詳細表示
どちらのJSFページもCreate JSF Pageダイアログを使用して作成できます。次のいずれかの方法でJSFページを開きます。
「Page Layout」ページで、「Blank Page」を選択します。 Managed Beanページで、「Do Not Automatically Expose UI Components in a Managed Bean」を選択します。
「OK」をクリックします。
デフォルトではビジュアル・エディタに新規のJSF Faceletsページが表示されます。
コンポーネント・パレットのJSFページから、JSF HTMLとJSF Coreコンポーネントを使用してページの編集を開始できます。
詳細表示
新規のJSFページをFaceletsのドキュメント・タイプで作成すると(ファイル拡張子は.jsf)、JDeveloperでは、JSF CoreおよびJSF HTMLタグ・ライブラリに対応する2つのxmlns属性で初期ページ構造が自動的に作成されます。初期ファイルに含まれるその他の要素には、ページのレイアウト用要素、とくに<f:view>と</f:view>で囲まれた他のすべての要素が挙げられます。 たとえば、新しいページ用の次のコードが生成されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<html xmlns="http://www.w3.org/1999/xhtml">
<h:head>
<title>Start</title>
</h:head>
<h:body>
<h:form></h:form>
</h:body>
</html>
</f:view>
JSFページの作成ステップが完了すると、アプリケーション・ナビゲータは次のように表示されます。
プロジェクト内で、Java EE Webモジュール・ディレクトリ構造に準拠するフォルダとファイルは次のとおりです。
Web Contentフォルダ:作成したページと、アプリケーションのクライアント・ブラウザで表示される必要がある他のファイル(スタイルシート・ファイルやイメージなど)が格納されます。
/WEB-INF/フォルダ:必要なWebアプリケーション・デプロイメント・ディスクリプタ(web.xml)とJSF構成ファイル(faces-config.xml)が格納されます。
web.xmlファイル:アプリケーションのWebアプリケーション・デプロイメント・ディスクリプタです。これは、アプリケーションの構成コンポーネントを記述したXMLファイルです。初期化パラメータと、サーバーによって実施されるコンテナ管理のセキュリティ制約も、このファイルに記述されています。
faces-config.xmlファイル:バリデータ、コンバータ、マネージドBean、ナビゲーション・ルールといった、JSFアプリケーションの構成リソースが登録されます。
エディタ・ウィンドウで、下部の「Design」タブをクリックして、Start.jsfのビジュアル・エディタがフォーカスされていることを確認します。
特定のファイルをエディタ・ウィンドウで開いたときに表示されるウィンドウ下部の各タブは、エディタ・タブです。
詳細表示エディタ・タブを選択すると、そのエディタまたはビューア内でファイルが開きます。たとえば、ビジュアル・エディタからXMLエディタに切り替えるには、「Source」タブをクリックします。
エディタ・ウィンドウ上部にある各タブは、ドキュメント・タブです。ドキュメント・タブを選択するとそのファイルにフォーカスが移り、現在のエディタ内ウィンドウの前面にファイルが表示されます。
コンポーネント・パレットで、ドロップダウン・リストから「JSF」を選択し、「HTML」パネルを展開します。

Faceletsは、XML名前空間の概念を使用して、JSFタグ・ライブラリをサポートします。 JSFコンポーネントを提供するライブラリは次のとおりです。
詳細表示
JDeveloperでは、コンポーネント・パレットを使用して、ビジュアル・エディタ内でJSFページ上にコンポーネントをドラッグ・アンド・ドロップできます。各コンポーネントにはヘルプ情報が備わっており、コンポーネントの目的と属性が説明されています。ヘルプ情報を検索するには、コンポーネント・パレットのパネル内でアイテムを右クリックし、「Help」を選択します。
-
「
」Input Textをクリックし、ビジュアル・エディタにドラッグして、空白のページにドロップし、入力テキスト・フィールドを追加します。
「
」Command Buttonをクリックしてページにドラッグし、追加した入力フィールドの横にドロップします。プロパティ・インスペクタのCommonセクションで、「Value」フィールドをクリックし、デフォルトのテキストをClick hereに変更します。
JDeveloper内でJSFコンポーネントを使用しながら、プロパティ・インスペクタ内でコンポーネント・タグ属性を表示および設定できます。
詳細表示
大部分の標準JSFコンポーネント・タグ属性には、JSF Expression Language(EL)を使用して、値式(#{expression})を指定できます。たとえば、#{personData.username}となります。
JSFページにコンポーネントを追加すると、以下のカテゴリに分類されるコンポーネント・タグでサポートされた属性が、プロパティ・インスペクタに表示されます。
Common:一般に使用される属性。Commonに含まれる属性はコンポーネントによって異なります。このカテゴリにはidおよびbinding属性も含まれます。idはコンポーネントの一意な識別子で、有効なXML名でなければなりません。id名の先頭文字に、数字やスペースを使用することはできません。bindingは、コンポーネント・インスタンスをBeanのプロパティにバインドするEL式です。
Appearance:可視パーツを制御する基本属性。titleやaccessKeyなどがあります。
Style:HTMLのスタイルおよびプレゼンテーションに関する属性。background、border、cellpadding、cellspacing、font、margin、style、outlineなどがあります。対応したHTML要素に宣言するHTML 4.01仕様の属性のほとんどがサポートされています。
Behavior:コンポーネントの動作を制御する基本属性。disabledやreadOnlyなどのHTMLパススルー属性が含まれます。HTML言語の国際化セクションに指定されるlangやdirといった言語変換属性も含まれます。
JavaScript:HTMLイベント属性(クライアント側のスクリプトをイベントと関連付ける属性)。onclick、onkeypress、onmouseoverなどがあります。
コンポーネントの属性に関する説明を表示するには、プロパティ・インスペクタでプロパティ名またはフィールドを右クリックします。 サイズ変更可能なポップアップ・ウィンドウが表示されて、スクロール可能なProperty Helpボックスでプロパティの説明を確認できます。 プロパティ・ポップアップ・ウィンドウは、「
」ドロップダウン・メニューをクリックして開くこともできます。
コンポーネント・パレットで、ドロップダウン・リストから「HTML」を選択し、「Common」パネルを展開します。

-
「
」Line Breakをドラッグして、ページのコマンド・ボタンの横にドロップします。
-
Structureウィンドウで、「br」を右クリックし、「Insert After br」→「JSF」を選択します。

Insert JSF Itemダイアログで、「
」Output Textを選択し、「OK」をクリックします。
入力テキスト・フィールドの下に出力テキスト・コンポーネントが追加されます。

-
出力テキスト・コンポーネントのプロパティ・インスペクタのCommonセクションで、Valueフィールドのデフォルトのテキストを削除し、フィールドを空白にして[Enter]を押します。
「
」Save Allをクリックして作業内容を保存します。
ビジュアル・エディタが次のように表示されます。

ユーザーがデータを入力するための入力フィールドと、アクションを起動するためのボタンがあります。デフォルトの出力テキスト値を削除したため、出力テキスト・フィールドはページ上に表示されません。
詳細表示
エディタ・ウィンドウの下部にある「Source」タブをクリックすると、XMLエディタに切り替わります。 <h:form><h:form/>の中には、追加した4つのコンポーネントのコードが表示されます。
<h:form>
<h:inputText/>
<h:commandButton value="Click here"/>
<br/>
<h:outputText/>
<h:form/>
メソッドを作成して、ページのボタンに関連付けます。このメソッドはユーザーが入力フィールドに入力した値を取得して、入力フィールドの下に表示します。
-
エディタ・ウィンドウで、上部の「Start.jsf」ドキュメント・タブをクリックします。
メイン・メニューから「Design」→「Page Properties」を選択します。

Page Propertiesダイアログで、「Component Binding」タブを選択し、「Auto Bind」を選択します。 Managed Beanドロップダウン・リストの横にある「New」をクリックします。

マネージドBeanとは、JSF構成ファイル
faces-config.xmlに登録されているか、Beanクラスに特別なマネージドBeanアノテーションを持つ、任意のアプリケーションJavaBeanです。
詳細表示
いずれの場合でも、シンボリック名を使用して、Beanをインスタンス化するときに使用するクラスを特定します。また、シンボリック名を使用して、Beanのプロパティとメソッドを参照します。Beanを直接参照する代わりにシンボリック名を使用しているため、プレゼンテーションがアプリケーション・ロジックと分離され、ビューに影響を及ぼすことなくモデルを変更できます。
ページで自動コンポーネント・バインディングを有効にした場合は、JDeveloperは自動的にページのUIコンポーネントをバッキングBeanのプロパティに公開して、binding属性を使用して、コンポーネントのインスタンスをそれらのプロパティにバインドします。バッキングBeanとは、ページ固有のUIコンポーネントのロジックとプロパティが格納されたマネージドBeanのことです。このJavaBeanは、既存のクラス(データ転送クラスなど)の場合もあれば、ページ専用のクラスの場合もあります(バッキングBeanと呼ばれるのはこのためです)。 バッキングBeanは、ユーザー入力とUIコンポーネントのデータの状態ホルダーとして動作します。また、入力値の検証メソッドや、コンポーネント値を引数としてバックエンド・アプリケーション・コードの呼出しをするイベント・ハンドラ・メソッドを実装するのに便利です。
Page Propertiesダイアログで自動コンポーネント・バインディングを有効にする場合は、既存のマネージドBeanにコンポーネントをバインドすることを選択するか、新しいマネージドBeanを構成してページのバッキングBeanを作成できます。
自動コンポーネント・バインディングを無効または有効にするには、Page Propertiesダイアログで「Auto Bind」チェックボックスを選択解除または選択します。たとえば、ページに追加するいくつかのコンポーネントについて、自動的にプロパティとアクセッサ・メソッドが生成されるようにするには、そのコンポーネントを追加する直前に自動コンポーネント・バインディングをオンにして、コンポーネントを追加した後でオフにします。
Create Managed Beanダイアログで、次の値を入力するか、オプションを選択します。
| フィールドまたはオプション |
値 |
| Bean Name |
backing_start |
| Class Name |
StartInfo |
| Package |
project1.backing |
| Extends |
java.lang.Object |
| Scope |
request |
| Registration |
Annotations |
マネージドBeanのスコープによって、Beanが格納されるスコープが決まります。Beanの有効なスコープは次のとおりです。
詳細表示
application:Webアプリケーションが実行されている間、Beanが使用可能です。このスコープは、LDAPディレクトリなどのグローバルなBeanに有用です。
session:クライアント・セッションの間、クライアントがBeanを使用できます。
request:インスタンス化されてからクライアントに応答が返されるまで、Beanが使用可能です。これは通常、現在のページの存続期間です。
none:Beanは参照されるたびにインスタンス化されます。これは、Beanが別のBean内で参照されている場合に有用です。
JSF 2.0以降では、faces-config.xmlでマネージドBeanを登録するのではなく、BeanクラスでマネージドBeanのアノテーションを使用するオプションがあります。 マネージドBeanのアノテーションを使用する場合は、JDeveloperはJavaBeanクラス・ファイルにアノテーションを追加します。次に例を挙げます。
@ManagedBean(name="backing_mypage")
@RequestScoped
public class MypageInfo {
...
}
faces-config.xmlでJavaBeansを登録する場合は、構成ファイルのXMLを手動で編集するか、構成ファイル概要エディタを使用します。概要エディタには、各種作成ダイアログと、Beanのクラス・ファイル参照を検索するための参照機能が用意されています。
構成ファイル概要エディタを使用してマネージドBeanを作成および構成する場合、JDeveloperは関連するコードをfaces-config.xmlに追加します。以下に例を挙げます。
<managed-bean>
<managed-bean-name>backing_mypage</managed-bean-name>
<managed-bean-class>project1.backing.MypageInfo</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<!--oracle-jdev-comment:managed-bean-jsp-link:1Mypage.jsf-->
</managed-bean>
コメント・ライン<!--oracle-jdev-comment...-->は、自動コンポーネント・バインディングが有効な場合に、マネージドBeanがMypage.jsfページのバッキングBeanであることを示しています。
マネージドBeanのアノテーションを使用すると、faces-config.xmlファイルのサイズを縮小し、複雑さを軽減できます。このファイルは非常に大きくなる場合があります。
-
「OK」をクリックして、Create Managed Beanダイアログを閉じます。
Managed Beanドロップダウン・リストで選択したbacking_startが表示されます。
-
「OK」をクリックして、Page Propertiesダイアログを閉じます。
ソース・エディタにバッキングBeanファイルStartInfo.javaが表示されます。
JDeveloperによって追加されたマネージドBeanアノテーションに関する注意事項:
詳細表示
@ManagedBean(name="backing_start")
@RequestScoped
public class StartInfo {
...
}
自動コンポーネント・バインディングが有効な場合、JDeveloperは、JSFページの各UIコンポーネントについてBeanプロパティとアクセッサ・メソッドをバッキングBeanファイルに追加します。次に例を挙げます。
private HtmlInputText inputText1;
public void setInputText1(HtmlInputText inputText1) {
this.inputText1 = inputText1;
}
public HtmlInputText getInputText1() {
return inputText1;
}
注:JDeveloperは、バッキングBean上のプロパティについて、マネージド・プロパティを作成しません。マネージド・プロパティとは、Beanがインスタンス化される際に値が投入されるBeanのプロパティです。Beanを特定のプロパティ値でインスタンス化する場合は、faces-config.xmlファイルにマネージド・プロパティ設定用のエントリを手動で追加する必要があります。
自動コンポーネント・バインディングが有効な場合は、JDeveloperはJSFページでコンポーネントのbinding属性を使用してコンポーネント・インスタンスをBeanプロパティにバインドします。次に例を挙げます。
<h:inputText binding="#{backing_start.inputText1}" id="inputText1"/>
(backing_startはシンボリックBean名)
自動コンポーネント・バインディングを使用したページのソース・コード内には、ファイルの末尾に自動バインディング用のコメント行が挿入されています。次に例を挙げます。
<!--oracle-jdev-comment:auto-binding-backing-bean-name:backing_start-->
エディタ・ウィンドウで「Start.jsf」タブをクリックして、ビジュアル・エディタを前面に表示し、ページのコマンド・ボタンをダブルクリックします。
Bind Action Propertyダイアログで、マネージドBeanドロップダウン・リストにbacking_startが表示されていることを確認します。 また、Methodドロップダウン・ボックスにcommandButton1_actionと表示されます。「OK」をクリックします。

StartInfo.javaのソース・エディタで、入力テキスト・フィールドに入力された値を取得するコードを入力して、値を出力テキスト・フィールドに表示します。
たとえば、生成されたコードのコマンド・ラインの後です。
// Add event code here...
太字で表示されている次のコードを挿入します。
// Add event code here...
outputText1.setValue("Hello "+inputText1.getValue());
return null;
-
アプリケーション・ナビゲータで「Start.jsf」を右クリックし、「Run」を選択します。
Create Default Domainダイアログが表示されたら、デフォルトのパスワード(たとえば、weblogic1)を「Password」および「Confirm Password」フィールドに入力して、「OK」をクリックします。
ブラウザのページが次のように表示されます。

このチュートリアルが完了すると、アプリケーション・ナビゲータは次のように表示されます。
詳細表示
Project1の下にあるApplication Sourcesフォルダでは、パッケージproject1.backingにStartInfo.javaが表示されます。
JDeveloperはデフォルトで、IDEにバンドルされたOracle WebLogic Serverのユーザー固有のインスタンスを参照する、Integrated WebLogic Serverという名前の統合サーバーを自動的に構成します。Integrated WebLogic Serverは、パッケージ化されたアーカイブ・デプロイメント用のJava EEランタイム・サービスです。ゼロコピー・デプロイメントに基づき、Integrated WebLogic Serverでは、アプリケーションとそのプロジェクトのJava EEアプリケーションとしての実行とテストをJava EEコンテナ内で行えます。Integrated WebLogic Serverの使用に際し、特別な接続設定は必要ありません。アプリケーション全体、プロジェクト、または個別のJSFページを実行できます。
IDEでJSFアプリケーションを実行すると、JDeveloperは次の処理を自動的に実行します。
まだ実行されていない場合は、Integrated WebLogic Serverインスタンスを起動します。
アプリケーションをコンパイルして、Integrated WebLogic Serverにデプロイします。
-
次のデフォルトのアドレスを使用して、デフォルトのブラウザ内でアプリケーションを起動します。http://<マシンのIPアドレス>:<httpポート>/<アプリケーション名>-<プロジェクト名>-context-root>/faces/<ページへのパス>
例:http://127.0.0.1:7101/JSFApplication-Project1-context-root/faces/Start.jsf
JSFアプリケーションが起動したら、faces-config.xmlが解析されて、登録されたマネージドBean(ある場合)が利用できるようになります。 また、アノテーションにマークされているすべてのJavaBeansが、実行時にマネージドBeanになります。マネージドBeanが(たとえば、EL式内で値式と呼ばれるコンポーネントのタグ属性の値として)参照されると、マネージドBean作成機能が、そのBeanのデフォルトのコンストラクタ・メソッドを呼び出してBeanをインスタンス化します。プロパティが宣言されている場合は、それらに宣言済みのデフォルト値が設定されます。
実行中のアプリケーションで、入力フィールドに名前を入力してボタンをクリックすると、入力フィールドのすぐ下に"Hello"というテキストと入力した名前が表示されます。
アプリケーションを停止するには、JDeveloperで「
」Terminateをクリックして、ドロップダウン・メニューからアプリケーションにバインドされているインスタンスJSFApplicationを選択します。
注: アプリケーションを終了すると、アプリケーションは停止し、Integrated WebLogic Serverからアンデプロイされますが、Integrated WebLogic Serverは終了されません。
このチュートリアルでは、JSFコンポーネントを使用して、簡単なアプリケーションを作成しました。このチュートリアルで学習した内容は、以下のとおりです。
- JDeveloperのウィザードとダイアログを使用して、アプリケーションと初期ページを作成する
- ビジュアル・エディタ、コンポーネント・パレット、およびプロパティ・インスペクタを使用して、UIページを作成する
- コンポーネント・バインディングを使用して、ページのUIコンポーネントをプログラムで操作する
- Integrated WebLogic Serverを使用して、JSFアプリケーションを実行する
JSF Webアプリケーションの開発の詳細は、下記のWebサイトを参照してください。
すべて表示 |
すべて非表示
Copyright © 2011, Oracle and/or its affiliates.All rights reserved.