Oracle JDeveloper 11g製品版にアクセスできるか、または インストール済みである必要があります。 この製品は、 Oracle Technology Network（OTN）からダウンロードできます。

スタートアップ・アプリケーションをダウンロードします。 次の リ ンクを右クリックしてコンテキスト・メニューから「 対象をファイルに保存」を選択し、 Tutorial.zipファ イルを任意のローカル・ディレクトリにダウンロードします。

選択したローカル・ディレクトリ上で、 Tutorial.zipファ イルを解凍します。

JDeveloperを起動します。 解凍先のルート・ディレクトリ（ <jdev_home> ） にあるJDeveloperの実行可能ファイルである「 jdeveloper.exe 」 をダブルクリックします。

Migrate User Settingsダイアログ･ボックスが開いたら、「 NO」 をクリックします。

ユーザー・ロールを設定するよう指示されたら、「 Default」 を選択します。

Tip of the Dayウィンドウを 閉じます。

JDeveloper IDEが表示されます。

ビルトイン・アプリケーションのページ・フロー・ダイアグラムには、すでに2つのページと2つのナビゲーション・ケースが定義されてい ます。 ただし、現時点でこれらのページはJSFページではありません。

「 main.jspx」アイコンをダブルクリックしてページを作成し、エディタで開きます。

Create JSF Pageダイアログで、ファイル名をデフォルト値の main.jspxのま まにして、 Create as XML Document (*.jspx)チェック・ボックスが選択されていること を確認します。 Use Page Templateフィールドのドロップダウン・リストから「 simple」を選択 します。

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

アプリケーション・ナビゲータに新規ノードとして main.jspxが表示され、 simple.jspxテンプレートがロードされた設計エディタが開きます。

コンポーネント・パレットの「 ADF Faces」→「 Layout」 ライブラリを使用して、「 Panel Splitter」コンポーネントをドラッグし、 centerファ セットにドロップします。

プロパティ・インスペクタで「 Style」タブを選択し、StyleClassフィールドに AFVisualRootと 入力します。

「 Panel Tabbed」コンポーネントをドラッグして、パネル・スプリッタの' second' ファセットにドロップします。

「 Panel Accordion」コンポーネントをドラッグして、パネル・スプリッタの' first' ファセットにドロップします。

作成したアコーディオン内をクリックして、右クリックのコンテキスト・メニューから「 Insert after Show Detail Item」→「 Show Detail Item」を選択します。

追加した「 Show Detail Item」を選択し、プロパティ・インスペクタのCommonタブで、Text フィールドを Moreに変更します。

Structureウィンドウで、（パネル・スプリッタのfirstから）「 af:showDetailItem」 コンポーネントを選択し、Textフィールドに Shopping Cartsを設定します。

Moreテキストのそばのプラス記号をクリックした 場合、次のイメージのようになります。 ページの ' 2番目の ' パネルをクリックし、「 af:showDetailItem」コンポーネントを選 択します。

プロパティ・インスペクタのCommonタブで、Textフィールドの値を Productsに変更 します。

ページ内に新しく作成したProducts詳細項目を右クリックし、コンテキスト・メニューから「 Insert after Show Detail Item - Products」→「 Show Detail Item」 を選択します。

プロパティ・インスペクタのCommonタブで、Textフィールドの値を Specialsに変更 します。

2番目のパネルで「 Product」タブをクリックします。次に「 ADF Faces」 →「 Layout」ライブラリから「 Panel Collection」コンポー ネントをドラッグし、2番目のパネルにドロップします。

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

次に、ADFデータ・バインディング機能を使用して、既存のPOJOクラスからデータ・コントロールを作成します。

アプリケーション・ナビゲータで、「 Application Sources」→「 tutorial.model」 パスから「 StoreProducts.java」を右クリックし、コンテキスト・メニューから「 Create Data Control」を選択します。

アプリケーション・ナビゲータは、次のように表示されます。

アプリケーション・ナビゲータで「 Data Controls」を展開します。

Data Controlsペインは次のように表示されます。

StoreProductsの「 products」データ・コ ントロールをドラッグして、Structureウィンドウの af:panelCollectionへドロップします。

ポップアップ・メニューから「 Tables」→「 ADF Read-only Table」を選択します。

Edit Table Columnsダイアログで、「 Row Selection」オプションと 「 Sorting」オプションを選択します。

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

Structureウィンドウで表が選択された状態で、プロパティ・インスペクタの Behaviorタ ブにおいて、 Column Selectionプロパティのドロップダウン・リストから「 multiple」 を選択します。

JDeveloperメニュー・バーの Save Allアイコン「」をクリックするか、メニューから「 File」→「 Save All」を 選択します。

ページ内を右クリックし、コンテキスト・メニューから「 Run」を選択して、デフォルトのWebブ ラウザでページを実行します。

デフォルトのWebブラウザにページがロードされたら、既存の製品データが表示されます。

水平スクロール・バーを使用して、右端の列を表示します。

列ヘッダーをクリックして、製品の nameと categoryで 降順および昇順ソートを実行します。 矢印はカーソルを列のヘッダー上に移動した場合にのみ表示されます。

「 name」列を選択し、「 Freeze」メニュー・オプショ ンをクリックします。

次に、水平スクロール・バーを再度使用して、右端の列を表示します。

name列が表示されたままになっていることを確認します。

name列の 幅を小さくし、製品名の後半部分が表示されないよ うにします。

「 Wrap」メニュー・オプションをクリックします。

複数の単語で構成された名前が改行されていることを確認してください。

「 Detach」メニュー・オプションをクリックして、パネルのコンテンツをブラウザ内に独立表示 します。

「 Detach」ボタンを再クリックして、前のレイアウトに戻ります。

「 View」メニュー・オプションを使用して、いくつかの列を非表示にします。

「 Format」メニュー・オプションを使用して、列のサイズを変更します。

JDeveloperに戻り、2番目のパネルで「 menu」コンポーネント・ファセットを右ク リックし、コンテキスト・メニューから「 Insert inside Facets menus」→「 Menu」 を選択します。

「 menu」コンポーネント・ファセットを再度右クリックし、コンテキスト・メニューから「 Insert inside Facets Menu - menu 1」→「 Menu Item 」を選択します。

Menu Itemのプロパティ・インスペクタでTextフィールドを Edit Itemsに変更 し、Menu ActionセクションでActionフィールドを editに設定します。

Structureウィンドウで「 af:commandMenuItem」コンポーネントを右ク リックして、コンテキスト・メニューから「 Insert after af:commandMenuItem - Edit Items」 →「 Menu Item」を選択します。

Menu Itemのプロパティ・インスペクタでTextフィールドを Remove Itemsに 変更し、Menu ActionセクションでActionフィールドを editに設定します。

Structureウィンドウで「 af:menu - menu1」コンポーネントを選択してプロ パティ・インスペクタを使用し、Textフィールドを Adminに変更します。

JDeveloperメニュー・バーの Save Allアイコン「」をクリックするか、メニューから「 File」→「 Save All」を 選択します。

JDeveloperに戻り、「 Edit.jspx」ページを開いて「 image」 フィールドを選択します。

Commonタブで、Idフィールドに image1と入力します。

プロパティ・インスペクタのBehaviorタブで、AutoSubmitプロパティに trueを 設定します。

ページでイメージ・アイコンを選択してプロパティ・インスペクタを使用し、BehaviorタブのPartialTriggers フィールドに image1と入力します。

JDeveloperメニュー・バーの Save Allアイコン「」をクリックするか、メニューから「 File」→「 Save All」を 選択します。

再度ページ・フロー・ダイアグラムを開き、「 main.jspx」 アイコンを右クリックして、コンテキスト・メニューから「 Run」を選択します。

「 Admin」メニュー項目を開き、「 Edit Items」 オプションを選択します。

ブラウザに 編集ページが表示されます。

イメージ名（例： nano.gif）を別の値（例： classic .gif） に変更できます。

[Tab]キーでこのテキスト・フィールドから移動すると、ファイル名を反映した新しいイメージがすぐに表示されます。

スライダを動かして評価レベルを変更します。

「 Submit」をクリックして、変更を確定します。

メイン・ページに戻ると、該当項目のイメージと評価値が置換されていることがわかります。

ブラウザを閉じて、JDeveloperに戻ります。

todaySpecial backing_dndバッキングBeanにバインドされている「 outputText」 コンポーネントを選択します。
コンポーネント･パレットで「 ADF Faces」→「 Operations」を 展開し、「 Client Attribute」コンポーネントをドラッグして、Structureウィンドウにある Special PromotionのoutputTextコンポーネントのすぐ下にドロップします。

プロパティ・インスペクタで、Nameフィールドに Itemと入力し、Valueフィールドの隣に ある下矢印をクリックして、リストから「 Expression Builder」を選択します。

Expression BuilderダイアログでExpressionフィールドの値を削除してから、「 JSF Managed Beans」→「 backing_dnd」→「 todaySpecialProduct」 を開き、「 name」を選択してバッキングBeanにバインドします。

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

コンポーネント･パレットで「 ADF Faces」→「 Operations」 を展開し、「 Attribute Drag Source」コンポーネントをドラッグして、Structureウィン ドウにある af:clientAttributeコンポーネントのすぐ下にドロップします。

Insert Attribute Drag Sourceダイアログで、Attributeフィールドに「 Item」 を選択します。

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

JDeveloperメニュー・バーの Save Allアイコン「」をクリックするか、メニューから「 File」→「 Save All」を 選択します。

次に、Shopping Cartパネル側の作業をおこないます。コンポーネント・パレットで「 Drop Target」コンポーネントをドラッグし、 Shopping Cartsペインにドロップしま す。

Insert Drop Targetダイアログで、 DropListenerフィールドの隣にあ る「 ...」ボタンをクリックします。

Edit Propertyダイアログで、Managed Beanフィールドのドロップダウン・リストから「 backing_dnd」 を選択します。Methodフィールドには「 handleDrop」を選択します。

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

「 Data Flavor」を Drop Targetにドラッ グ・アンド・ドロップします。

Insert Data Flavorダイアログで、Flavor Classフィールドに java.lang.Stringと 入力します。

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

Structureウィンドウの 2番目のペイン・タグにある「 af:popup」 コンポーネントを選択し、プロパティ・インスペクタで、CommonタブのIdフィールドに popmoreと入力しま す。

Structureウィンドウで、 1番目のタグを選択して、ページ・エディタを再同期します。 買い物かごの内容を表示するには、コンポーネント・パレットで「 ADF Faces」→「 Common Components」から「 Output Text」をドラッグし、 Shopping Cartsペインの Your Shopping Cartパネル・ボックスのすぐ下にドロップしま す。

プロパティ・インスペクタで、Valueフィールドの隣にある 下矢印をクリックして、リストから「 Expression Builder」を選択します。

Expressionペインのテキストを削除します。次に、Variablesセクションで「 JSF Managed Beans」→「 backing_dnd」を展開して「 dndValue」 を選択し、Expressionフィールドに挿入します。

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

プロパティ・インスペクタで、Output Textタグで「 Style」タブを選択し、 InlineStyleフィールドに color:Greenと入力します。 これにより、Cart is Emptyメッセージがページに表示されます。

ページ・ダイアグラムに戻り、「 main.jspx」アイコンを右クリックして、コンテキスト・メ ニューから「 Run」を選択します。

ブラウザにページがロードされます。

「 Specials」タブをクリックします。

おすすめ品をポップアップ表示する「 More Info」ボタンをクリックします。

「 Today's Specials」ラベルを選択してドラッグし、左側のペインの Your Shopping Cartセクションにドロップします。

買い物かごに、購入した製品が表示されています。

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