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

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

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

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

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

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

 

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

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

Oracle JDeveloperアプリケーションは、組織構造の最上位レベルです。 アプリケーションの作成中に、操作しているオブジェクトの情報が格納されます。 開発中には、プロジェクトと環境設定が追跡されます。 [ 詳細はこちら]

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

    tell me more iconアプリケーション・テンプレート

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

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

    tell me more iconJSPタグ・ライブラリ

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

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

    tell me more iconIDE内

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

 

JSFページの作成

tell me more iconJSFページの作成

ADF Facesを使用したアプリケーションによって作成されるJSFページは、JSPページ(ファイル拡張子は .jsp) またはJSPドキュメント(ファイル拡張子は .jspx)です。 この例では、JSFページをXMLドキュメント(拡張子が .jspx) として作成します。 [ 詳細はこちら]

  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 」 をクリックします。

    tell me more iconコンポーネント・バ インディング

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

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

    tell me more iconルート・レイアウ ト・コンポーネント

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

  4. save all iconSave Allをクリックして作業内容を保存します。

    tell me more iconIDE内

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

 

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

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

単一のオブジェクトは、コンポーネントとその属性の1つをドラッグ値として使用することでドラッグできます。または、表やツリー・コンポーネントな どのオブジェクトのコレクションをドラッグできます。 コンポーネントをドラッグ・ソースとして定義するには、最初に非コレクションまたはコレクション・コンポーネントをページに追加し、次に af:attributeDragSourceタ グまたは af:collectionDragSourceタグを、対応する非コレクション・ソース・コンポーネントまたはコレ クション・ソース・コンポーネントのいずれかに埋め込みます。 [ 詳細はこちら]

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

    tell me more iconイメージの追加

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

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

    tell me more iconクライアント属性

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

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

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

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

  7. save all iconSave Allをクリックして作業内容を保存します。

    tell me more iconIDE内

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

 

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

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

単一のオブジェクトは、コンポーネントとその属性の1つをドロップ・ターゲットとして使用することでドロップできます。または、表やツリー・コン ポーネントなどのオブジェクトのコレクションをドロップできます。 コンポーネントをドロップ・ターゲットとして定義するには、最初に非コレクションまたはコレクション・コンポーネントをページに追加し、次に af:attributeDropTargetタ グまたは af:attributeDropTargetタグを、対応する非コレクション・ターゲット・コンポーネントまたはコ レクション・ターゲット・コンポーネントのいずれかに埋め込みます。 [ 詳細はこちら]

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

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

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

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

    tell me more iconIDE内

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

 

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

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

ドロップ・イベントが発生した場合にカスタム・コードを起動するには、ドロップ・ターゲット・コンポーネントにドロップ・イベント・リスナーを登録 します。 ドロップ・イベント・リスナーは、マネージドBean内のメソッドで、ドロップ・イベントを操作および処理するカスタム・コードが含まれています。 実行時に、ソース・コンポーネントがターゲット・コンポーネントにドラッグ・アンド・ドロップされると、ドロップ・イベント・リスナーが自動的に起動しま す。 [ 詳細はこちら]

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

    tell me more iconJSFマネージド Bean

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

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

    tell me more iconJavaクラスの編 集

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

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

    tell me more iconメソッドの書込み

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

  6. the save all iconSave Allをクリックして作業内容を保存します。

    tell me more iconIDE内

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

 

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

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

ドロップ・イベントが発生した場合にカスタム・コードを起動するには、ドロップ・ターゲット・コンポーネントにドロップ・イベント・リスナーを登録 します。 ドロップ・イベント・リスナーは、マネージドBean内のメソッドで、ドロップ・イベントを操作および処理するカスタム・コードが含まれています。 実行時に、ソース・コンポーネントがターゲット・コンポーネントにドラッグ・アンド・ドロップされると、ドロップ・イベント・リスナーが自動的に起動しま す。 [ 詳細はこちら]

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

    tell me more iconラッパー・コンポー ネント

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

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

    tell me more icon動的リストへのバイ ンド

    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 」 をクリックして、ウィザードを終了します。

    tell me more iconJSF EL式を使用するバインド

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

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

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

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

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

    tell me more iconDropTarget タグおよびDataFlavorタグ

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

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

    tell me more iconIDE内

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