ドラッグ・アンド・ドロップの導入

Oracle JDeveloperのIDEを使用して、コンポーネントをドラッグ・ソースおよびドロップ・ターゲットとして定義することによって、ドラッグ・アンド・ ドロップ機能を追加できます。

ソース・コンポーネントを追加してコンポーネント属性をドラッグに設定： af:attributeDragSourceタ グとInsert Attribute Drag Sourceダイアログを使用して、属性をドラッグ・ソースとして指定します。

ターゲット・コンポーネントを追加して、ドロップを受け入れるようにコンポーネント属性を設定： af:attributeDropTargetタ グとInsert Attribute Drop Targetダイアログを使用して、ドロップを受け取るターゲットとして属性を指定します。

ドロップ・イベントを処理するカスタム・コードを作成：マネージドBeanを作成し、 DndActionメ ソッド・ハンドラをBeanファイルに追加します。

ドロップ・ターゲット上でカスタム・ドロップ・イベント・メソッドを使用： af:dropTargetタ グとInsert Drop Targetダイアログを使用して、実行するカスタム・メソッドを dropListener属性 で指定します。

新規アプリケーションとプロジェクトの作成

1. Create Applicationダイアログを開きます（「 File」→「 New」→「 General」 →「 Applications」→「 Application」）。
2. アプリケーション名として DndAppを入力します。
3. Applica tion Template リストボックスで「 No Template [All Technologies] 」を選択し、「 OK 」をクリックします。
4. デフォルトのプロジェクト名を選択して、「 OK 」をクリックしま す。

   アプリケーション・テンプレート

   アプリケーション・テンプレートを使用すると、標準アプリケーション向けのプロジェクト構造を素早く作成できます。このプロジェクト構造に は、適切なテクノロジーの組合せが事前に指定されています。 テンプレートから作成された新規アプリケーションがアプリケーション・ナビゲータに表示される際、各プロジェクトには関連するテクノロジー・スコープが設 定され、プロジェクト階層に分割されます。 [ 詳細は こちら]

5. アプリケーション・ナビゲータで、作成したばかりのプロジェクトを選択し、 Project PropertiesダイアログのJSP Tag Librariesページを開きます（「 Tools」→「 Project Properties」）。
6. 「 Distributed Libraries 」フォルダを選択し て、「 Add 」をクリックします。
7. Choose Tag Librariesダイアログで「 ADF Faces Components 11-ji3 」を選択し、「 OK 」をクリックします。
   

   JSPタグ・ライブラリ

   ライブラリは、Oracle JDeveloperとともにインストールされるさまざまなAPIやテクノロジーのために提供されます。 これらのライブラリは、拡張ライブラリに分類され、すべてのユーザーによって共有されます。 [ 詳細はこちら]

8. 「 OK 」をクリックして、Project Propertiesダイアログを閉じます。
9. 「 」 Save Allをクリックして作業内容を保存します。
   

   IDE内

   新しいアプリケーションを作成すると、Application Overviewウィンドウがデフォルトでエディタ・ウィンドウ領域に開きます。 このウィンドウには、Oracle JDeveloper内で作成されるすべてのオブジェクトがオブジェクト・タイプごとに配置されて表示されます。 新しいオブジェクトを作成したり、まだ作成していない新しいタイプのオブジェクトを参照したり、オブジェクトのコンテキスト・メニューからアクションを起 動したりできます。 [ 詳細はこちら]

JSFページの作成

1. アプリケーション・ナビゲータでプロジェクトを選択し、Create JSF Pageダイアログを開きます（「 File」→ 「 New」→「 Web Tier」→「 JSF」→「 JSF Page」）。
2. このキュー・カードの例に合わせるため、Create JSF Pageダイアログでファイル名 myPage.jspxを 入力します。 「 Create as XML Document (*.jspx) 」 チェックボックスを選択します。 Page Implementationセクションで、 D o Not Automatically Expose UI Components in a Managed Bean チェックボックスが選択されていることを確認します。 「 OK 」 をクリックします。
   

   コンポーネント・バ インディング

   このキュー・カードの例に合わせるため、このステップおよびキュー・カード全体を通じて指示どおりの値を入力してください。 そうすることで、記載されているとおりにキュー・カードの手順を実行できます。 [ 詳細はこちら]

3. コンポーネント・パレットの ADF Facesページで、「 Layout 」パネルを開きます。 「 」 Panel Stretch Layoutを、ビジュアル・エディタ内の空白ページにドラッグ・アンド・ドロップします。
   

   ルート・レイアウ ト・コンポーネント

   デフォルトでは、Oracle ADF Facesテクノロジーを使用するJSFページをプロジェクト内に作成すると、次のように、Oracle JDeveloperによって af:documentお よび af:formタグが、 .jspxページ・ファイルに自動的に組み込まれます。 [ 詳細はこちら]

4. 「 」 Save Allをクリックして作業内容を保存します。
   

   IDE内

   JSFページを作成してパネル拡張レイアウトを追加するステップが完了すると、ビジュアル・エディタは次のように表示されます。 [ 詳細はこちら]

ドラッグ・ソースとして使用するコンポーネントの定義

1. コンポーネント・パレットの ADF Facesページの Layoutパネルで、「 」 Panel Splitterを、ビジュアル・エディタ内のページにある centerファ セットにドラッグ・アンド・ドロップします。
2. 「 」 Panel Group Layoutを、ページ上の firstスプリッタ・ペインにドラッ グ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Layoutプロパティの値を scrollに 変更します。
3. 「 」 Panel Boxを、 直前に追加したパネル・グループ・レイアウト・コンポーネントにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Textプロパ ティの値を Drag thisに変更します。
4. コンポーネント・パレットで、「 Common Components 」 パネルを開きます。 追加したばかりのパネル・ボックス・コンポーネントに、「 」 Imageを ドラッグ・アンド・ドロップします。 Insert Imageダイアログで、イメージ・ファイルのソースを入力するか、 Sourceフィールドの最後にある「 」をクリックして「 Edit 」を選択し、イメージ・ファイルの位置を特定して選択します。 作業が完了したら、「 Finish 」をクリックします。
   

   イメージの追加

   イメージに移動して選択し、イメージを追加できます。 [ 詳細はこちら]

5. コンポーネント・パレットで、「 Operations 」パネルを開 きます。 追加したばかりのイメージ・コンポーネントに、「 」 Client Attributeをドラッグ・アンド・ドロップします。 プロパティ・インスペクタで Nameフィー ルドに cupと入力し、さらに Valueフィールドに Coffeeと 入力します。
   

   クライアント属性

   Oracle ADF Facesの af:clientAttributeタグを使用すると、コンポーネントに 追加する属性の名前と値を指定できます。 たとえば、次のように指定します。 ［ 詳細はこちら]

6. コンポーネント・パネルの Operationsパネルで、「 」 Attribute Drag Sourceをイメージ・コンポーネントにドラッグ・アンド・ドロップします。 Insert Attribute Drag Sourceダイアログで、 Attribute フィールドに cupと 入力して、「 Finish 」をクリックします。
   

   コンポーネントをド ラッグ・ソースとして有効化するためのタグ

   Oracle ADF Facesでは、コンポーネントをドラッグ・ソースとして宣言的に有効化するための af:attributeDragSourceお よび af:componentDragSourceという2つのタグが提供されます。 ドラッグ・ソース・コンポーネントとして有効化するこれらのコンポーネントの中で、タグはネストされます。 たとえば、次のようになります。 ［ 詳細はこちら]

7. 「 」 Save Allをクリックして作業内容を保存します。
   

   IDE内

   ドラッグ・ソースとして使用するコンポーネントとコンポーネント属性を定義するステップが完了すると、ビジュアル・エディタは次のように表 示されます。 [ 詳細はこちら]

ドロップ・ターゲットとして使用するコンポーネントの定義

1. コンポーネント・パレットの ADF Facesページの Layoutパネルで、「 」 Panel Splitterを、ページにある secondスプリッタ・ペインにドラッグ・ アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Orientationプロパティの値を verticalに 変更します。
2. 「 」 Panel Group Layoutを、追加したばかりのパネル・スプリッタの firstス プリッタ・ペインにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセ クションで、 Layoutプロパティの値を scrollに 変更します。
3. 「 」 Panel Boxを、 直前に追加したパネル・グループ・レイアウト・コンポーネントにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Textプロパ ティの値を Drop hereに変更します。
4. コンポーネント・パレットの ADF Facesページの Common Componentsパネルで、「 」 Input Textを、直前に追加したパネル・ボックスにドラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Labelプロパ ティの値を Cupに変更します。
5. コンポーネント・パネルの Operationsパネルで、「 」 Attribute Drop Targetを入力テキスト・コンポーネントにドラッグ・アンド・ドロップします。 Insert Attribute Drag Sourceダイアログで、 Attribute フィールドに valueと 入力して、「 Finish 」をクリックします。

   コンポーネントをド ロップ・ターゲットとして有効化するためのタグ

   Oracle ADF Facesでは、コンポーネントをドロップ・ターゲットとして宣言的に有効化するための af:attributeDropTargetお よび af:collectionDropTargetという2つのタグが提供されます。 ドロップ・ターゲット・コンポーネントとして有効化するこれらのコンポーネントの中で、タグはネストされます。 [ 詳細はこちら]

6. 「 」 Save Allをクリックして作業内容を保存します。
7. アプリケーション・ナビゲータで「 」 myPage.jspxを 右クリックし、コンテキスト・メニューから「 Run 」を選択しま す。
   

   IDE内

   ドロップ・ターゲットとして使用するコンポーネントとコンポーネント属性を定義するステップが完了すると、ビジュアル・エディタは次のよう に表示されます。 [ 詳細はこちら]

カスタム・ドロップ・イベント・リスナーの作成

1. アプリケーション・ナビゲータで「 」 faces-config.xmlを 右クリックして、「 Open 」を選択します。 エディタ・ウィンドウで、エディタの最下部にある「 Overview 」タブをク リックします。
2. 概要エディタのManaged Beansセクションで、「 」 Addを クリックしてCreate Managed Beanダイアログを開きます。
   

   JSFマネージド Bean

   JSFを使用すると、ユーザー・インタフェース内のコンポーネントを任意のJavaBeanに直接バインドできますが、JSFマネージド Beanを使用する方法が最適です。 [ 詳細はこちら]

3. Bean名として dndを入力し、またBeanクラスとして MyPageを入力しま す。 スコープを sessionに変更します。 Generate Class If It Does Not Exist チェックボックスが選択されていることを確認します。 「 OK 」をクリックします。
4. エディタ・ウィンドウで、 MyPage.javaの 上にあるJavaファイル・ドキュメント・タブをクリックして、Javaソース・エディタを前面に表示します。
   

   Javaクラスの編 集

   エディタ・ウィンドウ上部にある各タブは、ドキュメント・タブです。 ドキュメント・タブを選択するとそのファイルにフォーカスが移り、現在のエディタ内ウィンドウの前面にファイルが表示されます。 [ 詳細はこちら]

5. Javaソース・エディタで、プロパティを追加し、さらに選択入力コンポーネントに移入する項目のリストを作成するgetterメソッドを追 加します。 次に、ドロップ・イベント用の DndActionメソッド・ハンドラを追加します。
   サ ンプル・コードを使用してください
   

   メソッドの書込み

   最初に書き込むメソッドは、 javax.faces.model.SelectItemインスタンスの Listを 返すgetterメソッドです。 これはListboxコンポーネントへの移入をおこなうためのメソッドで、次のカードに追加します。 メソッドを書き込むには、最初に List<SelectItem>型のプロパティを宣言し、次に一連の add(new SelectItem("some value", "some label"))文を使用してリストを作成します。 [ 詳細はこちら]

6. 「 」 Save Allをクリックして作業内容を保存します。
   

   IDE内

   コード・サンプルを追加すると、Javaソース・エディタは次のように表示されます。 [ 詳細はこちら]

カスタム・ドロップ・イベント・リスナーのドロップ・ターゲットへの登録

1. エディタ・ウィンドウで、ページ・ドキュメント・タブ「 」 myPage.jspxを クリックして、ビジュアル・エディタを前面に戻します。
2. コンポーネント・パレットの ADF Facesページの Layoutパネルで、「 」 Panel Group Layoutを、垂直パネル・スプリッタの secondペインにド ラッグ・アンド・ドロップします。 プロパティ・インスペクタの Commonセクションで、 Layoutプロパティの値を scrollに 変更します。
3. コンポーネント・パレットの ADF Facesページの Common Componentsパネルで、「 」 Select One Listboxを、直前に追加したパネル・グループ・レイアウト・コンポーネントにドラッグ・アンド・ドロップします。
   

   ラッパー・コンポー ネント

   af:selectOneListboxコンポーネント（およびそのほかの同じような選択入力コンポーネント） では、 af:dropTargetが有効な子（後ほどこのカードで使用します）として受け入れられません。 [ 詳細はこちら]

4. Insert Select One ListboxウィザードのSelectページで、「 Bind to list (select items) 」を選択します。 次に、 Value の横にある「 Bin d... 」 をクリックします。
   

   動的リストへのバイ ンド

   af:selectOneListboxコンポーネント（およびそのほかの同じような選択入力コンポーネント） には、リスト内の項目を表す1つの f:selectItemsコンポーネントを含めることができます。 f:selectItemsを 使用するために、 f:selectItemsコンポーネントを（その value属性を通して）、 javax.faces.model.SelectItemイ ンスタンスの配列を返すマネージドBean上のgetterメソッドにバインドできます。 [ 詳細はこちら]

5. Expression Builderで、「 JSF Managed Beans 」 を展開し、次に dndという名前のマネージドBeanを展開します。 「 choices 」をダブルクリックして式を挿入し、「 OK 」をクリックします。 「 Finish 」 をクリックして、ウィザードを終了します。
   

   JSF EL式を使用するバインド

   JSF 1.2では、JSFとJSP式言語を統合するJava EE 5統合式言語（EL）がサポートされています。 [ 詳細はこちら]

6. プロパティ・インスペクタの Commonセクションで、単一選択リストボックス・ コンポーネントの Labelプロパティの値として Beverage choicesを入力します。
7. ビジュアル・エディタで、エディタ・ブレッドクラム・リンク内の af:selectonelistboxの 前にある「 af:panelgrouplayout 」リンクをクリックします。
   

   エディタ・ブレッド クラム・リンクの使用

   ビジュアル・エディタ内でページを編集する際には、エディタ最下部（Designタブおよびそのほかのエディタ・タブのすぐ上）のブレッド クラム・リンクを使用して、ページ上で既存のコンポーネントまたはタグを選択します。 [ 詳細はこちら]

8. コンポーネント・パネルの Operationsパネルで、「 」 Drop Targetをクリックして、選択したパネル・グループ・レイアウト・コンポーネントにタグを追加します。 Insert Drop Targetダイアログで、 DropListenerフィールドに #{dnd.handleItemDrop}と 入力して、「 Finish 」をクリックします。

   DropTarget タグおよびDataFlavorタグ

   af:attributeDropTargetタグまたは af:collectionDropTargetタ グのどちらもドラッグ・アンド・ドロップ機能のニーズに合っていない場合、またはドロップ操作を実行するカスタム・コードがある場合は、 af:dropTargetタ グをコンポーネントに使用して、そのコンポーネントをドロップの受入れに適したものにできます。 [ 詳細はこちら]

9. コンポーネント・パネルの Operationsパネルで、「 」 Data FlavorをStructureウィンドウ内の af:dropTarget要 素にドラッグ・アンド・ドロップします。 Insert Data Flavorダイアログで、 FlavorClass フィー ルドに java.lang.Stringと入力して、「 Finish 」 をクリックします。
10. 「 」 Save Allをクリックして作業内容を保存します。
11. アプリケーション・ナビゲータで「 」 myPage.jspxを 右クリックし、コンテキスト・メニューから「 Run 」を選択しま す。
    

    IDE内

    データ・フレーバでドロップ・ターゲットを指定して、そのドロップ・ターゲットにドロップ・イベント・リスナーを登録するステップが完了す ると、ビジュアル・エディタは次のように表示されます。 [ 詳細はこちら]