Open Perspectiveアイコン「」をクリックして、開発に合っ た適切なパースペクティブを選択します。

パースペクティブのリストで、「Other」オプ ションを選択して、使用できるすべてのパースペクティブを表示します。

使用できるパースペクティブのリストを確認し、「Java EE」 パースペクティブを選択します。

「OK」をクリックします。

IDEが更新され、Java EEタスクの実行に最適な新しいビューとエディタのセットが表示されます。

IDE下部のセクションで、それぞれのタブを確認します。 チュートリアルを進めると、これらのタブの一部については内容を確認できます。

メイン・メニューから、「Window」→「Show View」を選択すると、特定のビューを開いたり、開き直したりできます。 「Other」オプ ションを選択します。

Show Viewダイアログで、「General」 ノードを開きます。 すでに開いているビューまたはエディタはグレーアウトされています。 「Palette」ビュー を選択して、「OK」をクリックします。

作業を開始するには、メイン・メニューから「File」→「New」 →「Other」を選択します。

新しいOracle ADFアプリケーション・タイプのテンプレートを使用するので、直接Oracle ADF Applicationオプションを使用することもできますが、Otherオプションを選択すると、使用できる他のJava EEタイプのアプリケーション・テンプレートが表示されます。

Newダイアログで、「Java EE」ノードを開き、使用できるJava EEテンプレートのリストから、「Oracle ADF Application」を選択します。 これにより、2つのプロジェクト（EARと、依存するWebモジュール）が作成されます。

「Next」をクリックします。

New Oracle ADF Applicationで、Application nameにADFFacesTutorialと 入力します。 「New Runtime」ボタンをクリックして、WebLogicランタイム環境を設定します。

New Server Runtime Environmentで、「Oracle」→「Oracle WebLogic Server 11gR1 PatchSet 3」を選択します。

「Next」をクリックします。

Define a WebLogic Runtimeステップで、WebLogic homeフィー ルドの横のBrowseアイコン「」 をクリックします。

Browse for Folderで、「wlserver_10.3」を選択します。これは、 WebLogicサーバーのホーム・ディレクトリの場所に相当します。

「OK」をクリックします。

ダイアログに戻り、Server ExtensionsのOracle ADF runtime 11.1.1.4.0がインストールされていることを確認します。 Oracle Enterprise Pack for Eclipse 11gによって、WebLogic Serverインストール環境でOracle ADFランタイムが適切に設定されているかどうかが検証されます。 完全インストールには、Oracle ADFランタイムが含まれます。 （含まれていない場合は、「Install」リンクをクリックし、手順に従ってOracle Technology Networkからインストールします。）

「Finish」をクリックし、再度「Finish」をクリッ クします。 Eclipseがアプリケーション環境の構築を開始します。

これで、2つのプロジェクトが作成されます。Enterprise Application Project（EclipseのEARプロジェクト）であるADFFacesTutorialと、Dynamic Web ProjectであるADFFAcesTutorialWebです。 Eclipse IDEに戻ると、この2つのプロジェクトがProject Explorerに表示されます。

ADFFacesTutorialプロジェクトのノードを開き、EARプロジェクト向けに作成され たデフォルト環境を確認します。

「adf-config.xml」ファイルをダブルクリックして、エディタのSourceビューで 開きます。

Oracle ADFのライブラリであるadf-loc.jarがプロジェクトに追加されています。 設定ファイルのapplication.xmlを 開いて確認します。

weblogic-application.xmlを開きます。 共有ライブラリ（adf.oracle.domain） を確認します。

「Source」タブをクリックし、リスナーやライブラリなどの宣言済みコンポーネントを確認しま す。

Project Explorerウィンドウで、「ADFFacesTutorial」ノードを閉 じます。

ADFFacesTutorialWebプロジェクトのノードを開き、Webプロジェクト向けに作 成されたデフォルト環境を確認します。

「WebContent」→「WEB-INF」とクリックし、 「web.xml」ノードをダブルクリックして、ファイルを編集します。 アプリケーションの国際化に使用できるリソース・バンドル・ファイルに対するresources.application参照に注目してください。

application.propertiesファイルを開き、バンドル・ファイルの内容を確 認します。

weblogic.xmlを開き、Shared Librariesを表示します。 これらのライブラリはすべて、新しいJ2EEワークベンチの作成時に生成されたものです。

下方向にスクロールし、index.jspページを開きます。このページは、Webプロジェクトに デフォルトで作成されています。 このページがバンドル・ファイルを参照していることを確認します。

Project Explorerで開いているすべてのノードを閉じ、任意のタブを右クリックし、 「Close All」を選択して、エディタ・ペインで開いているすべてのタブを閉じます。

下部ペインで、「Servers」タブをクリックします。 エディタの中を右クリックして、「New」 →「Server」を選択します。

Define a New Serverダイアログで、「Oracle WebLogic Server 11gR1 PatchSet 3」を選択します。

「Next」をクリックします。

WebLogic Serverには、ドメイン・ディレクトリが必要です。 Browseボタン「」をクリックして既存のドメインを選択す るか、Createボタン「」をクリックして、直接またはウィザードを使用して新しいドメインを作成できます。 「Create Domain」オプションを選択します。

Oracle JRFテンプレートがすでにインストールされています。それが選択されていることを確認します。 Nameにadf_tutorialを 指定します。 異なるパスワードを指定して、デフォルトのwelcome1パスワードを変更することも可能です。

「Finish」をクリックします。 WebLogic Serverに新規ドメインが作成されます。

New Serverダイアログに戻ると、Domain directoryフィールドが入力されています。

「Next」をクリックします。

Availableペインの上側の「ADFFacesTutorial」ノードを選択し、「Add」 ボタンを使用して、選択したノードをConfiguredペインに追加します。

「Finish」をクリックします。

サーバー・ログ・ペインに新しいサーバーが表示されます。 ノードを開き、そのコンポーネントを確認します。

サーバーはStopped状態にあります。

ADFFacesTutorialWebプロジェクトで、「Faces Configuration 」ノードを開き、「Managed Beans」エントリを右ク リックして、コンテキストから「New Managed Bean」を選択します。

New Managed Beanダイアログで、「Create a new Java class」 オプションを選択します。

New Managed Bean Wizardで、Package名にtutorial、 NameにLoginBeanと入力し、その他のオプションはデフォルト値のままとします。

「Next」をクリックします。

Scopeをsessionに設定し、「Next」をクリック します。

Summaryに、Beanに関するすべてのプロパティが表示されます。

「Finish」をクリックします。

マネージドBeanを作成するとProject Explorerに複数のエントリが追加されます。その中の1つに、Managed Beansノード内のloginBeanがあります。 このエントリをダブルクリックして、Beanへの参照が記述されたfaces-config.xmlファイルを開きま す。

「Managed Bean」タブをクリックして「loginBean」 を選択します。 「Managed Bean class」リンクをクリックします。

LoginBean.javaクラスがJavaエ ディタで開きます。

Project Explorerでは、LoginBean JavaクラスはJava Resourcesのtutorialパッケージにあります。

userNameとpassword用の、2つのString 型変数を追加します。

private String userName;
private String password;

ショートカット・キー[Alt]+[Shift]+[S] を使用して、ポップアップ・メニューから「Generate Getters and Setters」オプションを 選択します。 （エディタの中を右クリックし、コンテキストから「Source」→「Generate Getters and Setters」を選択すれば、同じメニューを表示できます）。

Generate Getters and Settersダイアログで、ゲッターとセッターを作成する2つの変数を選択します。 「After 'password'」 オプションを選択して、メソッド・コードの場所を指定します。

新しいクラスは次のように表示されます。

Save Allボタン「」をクリックして作業内容を保存しま す。

Project Explorerで「WebContent」ノードを右クリックして、コンテキス トから「New」→「JSP file」を選択します。

New JSP Fileダイアログで、File nameにlogin.jspxと入力し、「Next」をクリックします。

JSP、JSF、Oracle ADF開発用にさまざまなJSPテンプレートを利用できます。 異なるテンプレートを選択し、各オプションで生成されるステートメントをPreviewペインで確認します。

ウィザードの右下にあるJSP Templatesリンクを確認し、それをクリックします。

この画面で、任意のテンプレートを選択し、Previewペインでその内容を確認し、Editボタンを使用して自分のニーズに合わせて カスタマイズしたり、Newボタンを使用して独自のテンプレートを作成したりできます。 このチュートリアルでは既存のテンプレートを使用するので、「Cancel」 をクリックします。

1つ、2つ、または3つの列からなるテンプレートが示されます。 このチュートリアルではBasic (xhtml, xml syntax)テンプレートを使用します。 このテンプレートを選択します。

「Finish」をクリックして、ページが作成されるまで待ちます。

エディタでページが開きます。

メニュー・バーのツールバー・ボタンでは、Designビュー、Sourceビュー、splitビュー から表示方法を選択できます。

Paletteペインに移動します。 このペインをドラッグして、右上のペインにドロップします。 IDEのレイアウトは簡単にカスタマイズできます。

このパレットに、使用できるすべてのライブラリ・コンポーネントが表示されます。

さまざまなライブラリの内容を調べます。 任意の項目を開くには、その項目をクリックします。 たとえば、ADF Data Visualizationsノードでは、Bar、Pies、Gaugesなどのデータの表示に使用できるすべてのGUIコ ンポーネントが表示されます。

Palette内の最後の項目は、Data Paletteです。 この項目を開き、内容が使用可能な変数に関連付けられていることを確認します。 Data Paletteに表示される変数は、現在のJSP内で宣言されたローカルのページ変数から、アプリケーション全体で使用できるJSFマネージドBeanま でに及びます。 Data Paletteを使用すると、変数宣言やクラス宣言に簡単に移動でき、さらにデータをドラッグしてページにドロップすることもできます。

ログイン・ページのコードで、af:Formタグを削除します。

Component Paletteで、「ADF Faces」ライブラリを開き、下方向にスク ロールして、「Form」タグを選択します。 タグ・ドロップ・エディタ機能を使用して、このタグをドラッグし、以前Formタグがあった場所にドロップします。

New Form Typeで、「Generate a form tag and content from data」オプションをチェックします。 Form beanフィールドのbrowseボタン「」をクリックします。

このページで使用される「loginBean」を選択します。

「OK」をクリックします。

Form Typeに戻り、Form action フィールドの横のSelect a valueボタン「」をクリックします。

Form actionフィールドで、オンザフライでナビゲーション・ケースを定義します。 Select a navigation caseダイアログで、「」ボタンをクリックします。

New Navigation Caseで、Outcomeにloginと入力します。 Destination pageフィールドで、「Create a new JavaServer Page」ボタ ンをクリックし、新しいページをオンザフライで作成します。

New JavaServer Pageダイアログで、ページの名前としてwelcome.jspxと 入力します。

「Next」をクリックし、使用されるテンプレートがログイン・ページのテンプレートと同じもので あることを確認します。 「Finish」をクリックします。

New Navigation Caseダイアログに戻り、「OK」 をクリックします。

再度「OK」をクリックします。

Form Typeダイアログに戻り、「Next」 をクリックします。

userNameフィールドとpasswordフィールドがすでに選択されています。「Next」 をクリックします。

Form fieldsで、両方の変数がText Fieldとしてレンダリングされるよう設定されています。 「password」 変数を選択して、ドロップダウン・リストを使用してRenderingプロパティをPassword Fieldに変 更します。 同様に、userNameをTextAreaに設定します。

必要に応じて、右側にある上矢印と下矢印を使用して、userNameが最上部に表示されるよういずれかのフィールドを移動します。

「Next」をクリックします。 この新しいステップでは、リソース・バンドルを使用してエラー・メッセージを定義できますが、「Finish」をク リックします。

メニュー・ツールバーで、適切なボタンをクリックし、作成した2つの フィールドとSubmitボタンを表示するDesignページ・ビューを表示します。 ページは次のように表示されます。

ページ・エディタの下部にある「Preview」 タブをクリックし、ブラウザ内でのページのレンダリングに近い表示を確認します。

Project Explorerは、次のように表示されます。

Designビューに戻り、Paletteの「JSF Core」ライブラリをクリックし、loadBundleコ ンポーネントを追加します。 このタグを、f:viewタグの横にドラッグします。

New Load Bundleダイアログで、Base nameフィールドの横のBind a dynamic valueボタン「」をクリックします。

「src」→「resources」→「application」 ファイルを選択し、「OK」をクリックします。

Variable nameフィールドにbundleと入力します。

「Finish」をクリックします。

コード・エディタに戻り、分割ビューを使用して、loadBundleアイコン「」をクリックします。 下部のLogペインで、「Properties」タブを選択します。 Propertiesペインを使用して、コンポーネントのプロパティの確認と更新ができます。

login.jspxページのコードに戻り、[Ctrl]キー を押しながらresources.applicationにカーソルを合わせて、ハイパーリンクをクリックします。

application.propertiesバンドル・ファイルがエディタで開き、既存のメッセージが表示されます。 このファイルに直接新しいキー・リソースを定義することも、動的に新しいリソースを作成することもできます。

login.jspxページに戻り、af:panelLabelAndMessageタ グを選択します。

Propertyペインで、Labelの横のBind to a dynamic valueボタン「」をクリックします。

Choose Bindingダイアログが開き、そこにすでに定義済みのバインディング要素（bundleとManaged Beans）が表示されます。

「Resources」タブをクリックしてリソース・キーを表示し、さらにAddボ タン「」をクリックして新しいキー・ エントリを作成します。

New Resourceで、Resource Keyにname、Resource ValueにName:と入力します。

「OK」をクリックします。

新しいエントリがResourcesに表示されます。

「View」矢印をクリックし、「Resource Values」 を選択します。

「OK」をクリックします。 application.propertiesファ イルに新しい値が追加されています。

JSPXコードに戻ると、Panel Label And Messageのlabelフィー ルドが更新されています。

右側にあるOutlineペインを確認します。 このペインには、ページ・タグの階層ビューが表示されます。

リソース・バンドル・ファイルの他の使用方法を試すために、「application.properties」 タブをクリックしてエディタを開き、パスワード用の新しいエントリを追加します。 password=Password\:と 入力します。

Save Allボタン「」をクリックして作業内容を保存しま す。

login.jspxページのコードに戻り、af:panelLabelAndMessageのlabel内 のpasswordを削除して、#{}と入力します。 中括弧内にカーソルを置いたまま、[Ctrl]+[Space]を押し、提案リス トから「bundle」を選択します。

'.'（ピリオド）を入力し、JSPの提案ポップアップから、「password」 を選択します。

「Submit」ボタンを選択し、Propertyペインで、Textフィー ルドの横の「Bind to a dynamic value」アイコンをクリックします。

Choose Bindingダイアログで、「Resources」タブをクリックし、New Resourceボタン「+」をクリックします。

New Resourceダイアログで、Resource Keyにsubmit、Resource ValueにLoginと 入力します。

「OK」をクリックし、再度「OK」をクリックします。

ログイン・ページは次のように表示されます。

Sourceコード・エディタで、すべてのタグのプロパティを確認できます。 たとえば、コード・エディタのaf:formタ グを選択すると、そのプロパティがポップアップされます。

loginBeanという語にカーソルを合わせます。 Beanコンポーネントのプロパティが表示されます。

inputTextタグのtrueプロパティにカーソルを合わせ、[Ctrl]+[Space] を押し、コード補完機能を起動します。コード補完機能では、入力可能なコード値が表示されます。

loginBeanに移動し、[Ctrl]+[Space] を押しながら「Open getUserName() method」を選択します。

この選択によって、LoginBean.javaクラスが開き、getUserName()ゲッ ター・メソッドが示されます。

login.jspxページのコードに戻り、[Ctrl]キー を押しながらinputTextタグにカーソルを合わせて、リンクをクリックします。

afu.tldファイルにあるinputTextドキュメントが表示されます。

「welcome.jspx」タブをクリックし、ソース・コード・エディタを再度開きます。

JSF Coreライブラリから、「loadBundle」コ ンポーネントを選択し、f:viewタグの横にドロップします。

Load Bundleダイアログで、Base nameフィールドの横のBind a dynamic valueア イコン「」をクリックします。

Resource Bundle Selectionで、「src」→「resources」 ノードを開き、「application」を選択します。

「OK」をクリックします。

Load Bundleダイアログに戻り、Variable nameにbundleと入力しま す。

「Finish」をクリックします。

Paletteペインで、ADF Facesライブラリを開 き、「Output Text」コンポーネントをドラッグし、af:formタグ の内部にドロップします。

New Output Textダイアログで、Idにwelcomeと入力し、Bind to a dynamic valueアイコン「」をクリックします。

Choose Bindingダイアログで、「Resources」タブをクリックし、Addボ タン「」をクリックします。

New Resourceで、Resource Keyにwelcome、Resource ValueにWelcome:と 入力します。

「OK」を2回クリックします。

「Finish」をクリックします。

作成したコンポーネントの下に「Output Text」コンポーネントをドロップして、操作を繰 り返します。

New Output Textダイアログで、Idにusernameと入力し、Bind to a dynamic valueアイコン「」をクリックします。

Choose Bindingダイアログで、「JSF Managed Beans」→「loginBean」 を開き、「userName」を選択します。

「OK」をクリックします。

Output Textの作成に戻り、「Finish」をクリックします。

ページは次のように表示されます。

「Preview」タブをクリックすると、次のように表示されます。

Save Allボタン「」をクリックして作業内容を保存しま す。

Project Explorerで「login.jspx」 ノードを右クリックし、コンテキストから「Run As」→「Run on Server」 を選択します。

Run On Serverダイアログで「Choose an existing server」 オプションを選択します。

「Finish」をクリックします。

WebLogic Serverが起動し、Consoleウィンドウが開いてロード手順が表示されます。

内蔵ブラウザが起動し、loginページがロードされます。

NameとPasswordに 値を入力し、「Login」ボタンをクリックします。

初期画面ページに、マネージドBeanから得たユーザー名が返されます。

内蔵ブラウザ・ウィンドウを閉じます。

Project Explorerで「login.jspx」 ノードを右クリックし、コンテキストから「Show AppXray Dependencies」を選択します。

AppXaminerがエディタで開き、ログイン・ページと他のコンポーネントの関係 が表示されます。 数値は、コンポーネント間の参照数を示します。

たとえば、このlogin.jspxページにはloginBeanに 対する参照が2つあり（ユーザー名とパスワード）、application.propertiesに対する参照が4つ あります。

別のレベルを開くこともできます。

さらに、ノードを開いていきます。

詳細を表示するにはノードを右クリックします。 loginBeanノードを右クリックして、コ ンテキストから「Show Reference Detail」を選択します。ポップアップ・ウィンドウが開き、関係 する詳細コンポーネントが表示されます。

各コンポーネントに対する操作を繰り返すことができます。

「application.properties」ノードを右クリックし、コンテキストから「Open」 を選択します。

application.propertiesファイルがエディタで開きます。

AppXaminerダイアグラム内をナビゲートして、アプリケーションのすべてのコンポーネントを開くことができます。

Project Explorerで、「WebContent」→「WEB-INF」 を選択し、「faces-config.xml」をダブルクリックして、エディタでファイルを開きます。

「Overview」タブをクリックし、アプリケーション環境を可視化します。

「Navigation Rule」タブをクリックして、ページおよびナビゲーション・ケースをグ ラフィカルに表示します。

「Managed Bean」タブをクリックして、定義済みマネージドBeanを確認します。

その他のタブを確認します。