Oracle JDeveloper 11g Release 2 Tutorials - Implementing Drag and Drop

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

ウィザードを使用して、アプリケーションとプロジェクト、シンプルなレイアウトを使用したJSF初期ページを素早く作成します。その後、ドラッグとドロップという2つの簡単な操作でドラッグ・コンポーネントとして使用するイメージ・コンポーネントをページに追加します。ドラッグされたイメージのドロップ・ターゲットとして動作するのは、ページ上の入力テキスト・コンポーネントとリストボックスです。

詳細表示

目的	所要時間	アプリケーション
このチュートリアルでは、Oracle ADF Facesコンポーネントをドラッグ・ソースおよびドロップ・ターゲットとして定義することによって、ドラッグ・アンド・ドロップ機能を追加する方法を説明します。これから作成するアプリケーションの完成版を確認するには、「Download」ボタンをクリックして最終的なアプリケーションのzipファイルをダウンロードし、JDeveloperの`mywork`フォルダに解凍してください。	40分

ステップ1：新規アプリケーションとプロジェクトの作成

メイン・メニューから「File」→「New」を選択します。 New Galleryで、「General」を開いて「Applications」を選択します。 Itemsリストで「Custom Application」を選択し、「OK」をクリックします。

JDeveloperアプリケーションは、組織構造の最上位レベルです。アプリケーションの開発中に、操作しているオブジェクトの情報がここに格納されます。

詳細表示

この例に合わせるため、アプリケーション名としてDndAppと入力し、「Finish」をクリックします。

初期プロジェクト構造（アプリケーション・ワークスペース内の名前付きプロジェクト・フォルダ）および追加されるアプリケーション・ライブラリは、選択したアプリケーション・テンプレートによって決まります。

詳細表示

今作成したプロジェクトをアプリケーション・ナビゲータでダブルクリックしてProject Propertiesダイアログを開きます。「JSP Tag Libraries」と「Distributed libraries」を選択して「Add」をクリックします。
Choose Tag Librariesダイアログで「ADF Faces Components 11」を選択し、「OK」を2回クリックしてダイアログを両方とも閉じます。

ライブラリは、Oracle JDeveloperとともにインストールされるさまざまなAPIやテクノロジーのために提供されます。

詳細表示

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

アプリケーション・ナビゲータのProjectsパネルは、次のようになります。

テンプレートから作成された新規アプリケーションは、プロジェクト階層に分割されてアプリケーション・ナビゲータに表示されます。各プロジェクトには関連する機能が設定されています。

詳細表示アプリケーション・ナビゲータでは、プロジェクトは階層内の最上位レベルとして表示されます。アプリケーションで使用したCustom Applicationテンプレートによって、1つのプロジェクトが作成されています。このプロジェクトには、デフォルトのプロジェクト名または事前に入力されたプロジェクト名が指定されています。

アプリケーション・ナビゲータのパネルはいずれも開閉できます。 2つのパネルの間のスプリッタをドラッグすれば、パネルのサイズを調整できます。 Projectsパネルで項目のグループ化やソートを行う場合は、「

」Navigator Display Optionsドロップダウン・メニューを使用します。アプリケーションを操作するには、「

」Application Menuをクリックしてドロップダウン・メニューからオプションを選択します。

Oracle JDeveloperには多種多様なファイル・タイプを識別する機能が備わっており、アプリケーション・ナビゲータでファイルをダブルクリックすると、適切なビューアまたはエディタでファイルが表示されます。アプリケーションまたはプロジェクトを終了すると、そのアプリケーションまたはプロジェクトのファイルを表示していたすべてのエディタまたはビューアが閉じられ、メモリからファイルがアンロードされます。

注：アプリケーション・ナビゲータのイタリック体のノードは、これらの要素が保存されていないことを示しています。プロジェクトに含まれるファイルが選択されている場合、プロジェクト・ノードは太字で表示されます。

メイン・メニューから「Application」→「Show Overview」を選択します。エディタ・ウィンドウ領域にApplication Overviewウィンドウが開きます。

Application Overviewウィンドウの一部

Application Overviewのファイル概要ページには、JDeveloper内で作成されるすべてのオブジェクトがオブジェクト・タイプごとに分類されて表示されます。新規作成したファイルとアーチファクトは、ステータスやプロジェクトでフィルタして表示できます。

このアプリケーションのオブジェクトを作成する際には使用しないので、任意でApplication Overviewウィンドウを閉じることができます。

ステップ2： JSFページの作成

アプリケーション・ナビゲータでプロジェクトを右クリックし、「New」→「Web Tier」→「JSF/Facelets」→「Page」の順に選択して「OK」をクリックします。
ファイル名としてMyPage.jsfを入力します。ドキュメント・タイプとしてFaceletsが選択されていることを確認します。

JavaServer Facesを使用するアプリケーション向けに作成するJSFページには、Faceletsドキュメント（ファイル拡張子は.jsf）、またはXML構文で記述されたJSPドキュメント（ファイル拡張子は.jspx）を使用できます。

詳細表示

Page Layoutページで「Quick Start Layout」を選択し、「Browse」をクリックします。
Component Galleryで、左側にある「Two Column」カテゴリを選択します。続いて、右側にある3番目のタイプと3番目のレイアウトを選択します。

OptionsボックスにTwo Column Left, Partial Header (Two Splits, Stretched)と表示されます。

Oracle ADF Facesには、ページの全体レイアウトを定義するときに使用できるコンポーネントが多数用意されています。

詳細表示

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

Create JSF Pageダイアログには、選択したクイック・スタート・レイアウトが表示されます。
「Managed Bean」をクリックし、「Do Not Automatically Expose UI Components in a Managed Bean」を選択します。

Create JSF Pageダイアログでは、UIコンポーネントをプログラムで操作できるようにするために、ページ上のUIコンポーネントをマネージドBean内に公開するかどうかをオプションで指定できます。

詳細表示

デフォルトでは、コンポーネントはマネージドBeanに対して公開されません。コンポーネントをマネージドBeanにバインドする場合は、このダイアログのManaged Beanページでいずれかの自動バインディング・オプションを選択します。

Create JSF Pageダイアログ、Managed Bean

既存のマネージドBeanに対するバインド方法のオプションを選択できるのは、アプリケーションにマネージドBeanが構成されている場合のみです。

UIコンポーネントをマネージドBean内で自動的に公開するように指定すると、新規のJSFページを作成するたびに自動的にバッキングBeanが作成されます。ページ上にコンポーネントをドロップすると、各コンポーネントにBeanプロパティが挿入され、コンポーネント・インスタンスとプロパティはbinding属性を使用してバインドされます。これにより、Beanでコンポーネント・インスタンスを受け取ったり返したりできるようになります。

注：ページにOracle ADFバインディングを追加する場合は、自動バインディング機能を使用しないでください。自動バインディング機能を使用した場合は、Oracle ADFバインディングを追加した後でマネージドBeanバインディングを削除することが必要になります。

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

デフォルトでは、ビジュアル・エディタに新しいページが開き、水平パネル・スプリッタのfirstファセットが選択された状態で表示されます。

Quick Start Layoutオプションを使用すると、レイアウトの表示に必要なコンポーネントが追加されます。

詳細表示ビジュアル・エディタのエディタ・タブ（エディタ・ウィンドウの最下部付近）のすぐ上にあるエディタ・ブレッドクラム・リンクには、現在選択されているコンポーネントからそのルートの親コンポーネントにさかのぼるパスが表示されます。パスの最後にあるコンポーネント（太字で表示）は現在選択されているコンポーネントです。選択されているコンポーネントの前にあるコンポーネント名が親コンポーネントのパスを構成しています。パスにある任意のコンポーネントをクリックすると、ページ上のそのコンポーネントが選択されます。

ページ・コードを表示するには、「Source」タブをクリックしてビジュアル・エディタからXMLエディタに切り替えます。たとえば、Two Column Left, Partial Header (Two Splits, Stretched)レイアウトに対して次のコードが生成されます。

<!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:af="http://xmlns.oracle.com/adf/faces/rich">
  <af:document title="MyPage.jsf" id="d1">
    <af:form id="f1">
      <af:panelSplitter orientation="horizontal" splitterPosition="100"
                        id="ps1">
        <f:facet name="first"/>
        <f:facet name="second">
          <!-- id="af_twocol_left_partial_header_twosplits_stretched" -->
          <af:panelSplitter splitterPosition="50"
                            orientation="vertical" id="ps2">
            <f:facet name="first"/>
            <f:facet name="second"/>
          </af:panelSplitter>
        </f:facet>
      </af:panelSplitter>
    </af:form>
  </af:document>
</f:view>

JSF Faceletsの初期ページ（拡張子.jsf）の構造には、JSF Coreタグ・ライブラリ用のxmlns属性とOracle ADF Facesタグ・ライブラリ用のxmlns属性が1つずつ含まれます。初期ファイルに含まれるその他の要素はページ・レイアウト用の要素で、具体的には<f:view>と</f:view>に囲まれているすべてが該当します。ページ・ファイルが作成されると、UIコンポーネントを追加してページ・ソースを操作できます。

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

JSFページの作成ステップが完了すると、アプリケーション・ナビゲータにはプロジェクトが次のように表示されます。

詳細表示

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

ドラッグするUIコンポーネントとして使用するイメージをページに挿入します。単一のドラッグ・オブジェクトを定義するには、イメージ・コンポーネントに特殊な属性を追加し、新たに追加したこの属性をドラッグ・ソースとして指定します。

コンポーネント・パレットのADF Facesページで、LayoutパネルのInteractive Containers and Headersセクションから「」Panel Boxをドラッグし、ページ左側にある水平パネル・スプリッタのfirstファセットにドロップします。

ファセットにコンポーネントをドラッグすると、Facet firstという名前の長方形の領域が表示されます。これは、今ドラッグしているコンポーネントがそのターゲット内に挿入されることを意味しています。
プロパティ・インスペクタのCommonセクションで、Text属性の値をDrag thisに変更します。
コンポーネント・パレットのGeneral Controls パネルで、先ほど追加したパネル・ボックスに「」Imageをドラッグ・アンド・ドロップします。
Insert Imageダイアログで、Sourceフィールドの横にある「」ドロップダウン・メニューから「Edit」を選択します。続いて、ダイアログを使用してイメージ・ファイルを検索し、選択します。

Oracle JDeveloperのイメージ・ライブラリからイメージを選択するには、Edit Propertyダイアログで<jdev_home>/jdeveloper/ide/lib/フォルダを検索し、「oicons.jar」をダブルクリックして開きます。

詳細表示次に、oracle/javatools/icons/headerへ移動してイメージ・ファイル「jdeveloper.png」を選択します。

アイコンのEdit Propertyダイアログ

「OK」をクリックします。プロンプトが表示されたら、「Yes」をクリックしてイメージをリソース・ディレクトリの下に追加し、「Save」をクリックします。

Sourceフィールドに#{resource['images:jdeveloper.png']}と表示されます。
「OK」をクリックして、Insert Imageダイアログを閉じます。
コンポーネント・パレットで、「Operations」パネルを開きます。追加したばかりのイメージ・コンポーネントに、「」Client Attributeをドラッグ・アンド・ドロップします。

Client Attributeのプロパティ・インスペクタで、次の値を入力します。

フィールド	値
Name	`cup`
Value	`Coffee`

Oracle ADF Facesのaf:clientAttributeタグを使用すると、コンポーネントに追加する属性の名前と値を指定できます。

詳細表示以下に例を示します。

<af:image source="/jdeveloper.png">
  <af:clientAttribute name="cup" value="Coffee"/>
</af:image>

実際のアプリケーションでは、バインド属性を参照するEL式（例：#{bindings.Departmentname.inputValue}）をvalue属性に指定します。 EL式は実行時に値として使用されます。

af:clientAttributeをコンポーネントに埋め込むことによって、実行時に、追加した属性がクライアント側およびサーバー側の両方で利用できるようになります。

コンポーネント・パレットのOperationsパネルにあるDrag and Dropセクションで、「」Attribute Drag Sourceをイメージ・コンポーネントにドラッグ・アンド・ドロップします。
Insert Attribute Drag Sourceダイアログで、Attributeフィールドにcupと入力するか、ドロップダウン・リストから「cup」を選択します。「OK」をクリックします。

af:attributeDragSourceタグでは、コンポーネント属性をドラッグ・ソースとして使用するように指定できます。

詳細表示

この例では、af:clientAttributeをイメージ・コンポーネントに追加し、af:attributeDragSourceも使用して、追加したこの属性をドラッグ・ソースに指定することによって、実行時にユーザーがイメージをドラッグすると、追加した属性はドラッグ・ソースとして使用されるコンポーネント属性になります。

<af:image source="/jdeveloper.png">
  <af:clientAttribute name="cup" value="Coffee"/>
  <af:attributeDragSource attribute="cup"/>
</af:image>

注：既存のコンポーネント属性をドラッグ・ソースとして使用する場合、af:clientAttributeを追加する必要はありません。たとえば、次のコードでは、出力テキスト・コンポーネントのvalue属性をドラッグ・ソースとして使用しています。

<af:outputText value="Drag me">
  <af:attributeDragSource attribute="value"/>
</af:outputText>

単一のオブジェクトは、コンポーネントとその属性の1つをドラッグ値として使用することでドラッグできます。または、表やツリー・コンポーネントなどのオブジェクトのコレクションをドラッグできます。

Oracle ADF Facesでは、その他に、コンポーネントをドラッグ・ソースとして宣言的に有効化するためのaf:componentDragSourceおよびaf:dragSourceという2つのタグが提供されます。これらのタグの使用方法の詳細は、ADF Faces Tag Referenceドキュメントを参照してください。

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

ビジュアル・エディタには次のようなページが表示されます。

アプリケーション・ナビゲータには、プロジェクトで保存したイメージ・ファイルが表示されます。

詳細表示

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

ドラッグされたコンポーネントを受け取るUIコンポーネントとして使用する入力フィールドを挿入します。単一のドロップ・ターゲット・オブジェクトを定義するには、ドラッグ・ソースを受け取るためのターゲットとして使用する入力フィールドに、ある属性を指定します。

ビジュアル・エディタで、水平スプリッタ・バーをページの中ほどまで引き下げます。
コンポーネント・パレットのADF FacesページにあるLayoutパネルのInteractive Containers and Headersセクションで、ページ右側にあるfirstファセットに「」Panel Boxをドラッグ・アンド・ドロップします。
プロパティ・インスペクタのCommonセクションで、Textの値をDrop hereに変更します。
コンポーネント・パレットのLayoutパネルで、先ほど追加したパネル・ボックス・コンポーネントに「」panel Group Layoutをドラッグ・アンド・ドロップします。プロパティ・インスペクタのCommonセクションで、Layoutの値をscrollに変更します。
コンポーネント・パレットのText and Selectionパネルで、先ほど追加したパネル・グループ・レイアウト・コンポーネントに「」Input Textをドラッグ・アンド・ドロップします。プロパティ・インスペクタのCommonセクションで、Labelの値をCupに変更します。
コンポーネント・パレットのOperationsパネルにあるDrag and Dropセクションで、「」Attribute Drop Targetを入力テキスト・コンポーネントにドラッグ・アンド・ドロップします。
Insert Attribute Drop Targetダイアログで、Attributeドロップダウン・リストから「value」を選択し、「OK」をクリックします。

af:attributeDropTargetタグには、互換性のある値がターゲット・コンポーネントにドラッグ・アンド・ドロップされたときに設定されるコンポーネント属性（valueなど）を指定できます。

詳細表示

Structureウィンドウには、ドロップ・ターゲットとして定義したコンポーネントが表示されます。

Structureウィンドウ、ドロップ・ターゲットとしての入力テキスト

この例では、af:inputText内にaf:attributeDropTargetを組み込み、ドロップ・ターゲット属性としてvalueを指定しているため、実行時に互換性のあるドラッグ・ソースが入力テキスト・コンポーネントにドロップされると、入力コンポーネントが自動的にリフレッシュされてソースの値が表示されます。

<af:inputText label="Cup"..>
  <af:attributeDropTarget attribute="value"/>
</af:inputText>

ドロップ・ターゲットにはコレクション・コンポーネントまたは非コレクション・コンポーネントを使用できます。たとえば、コンポーネントとその属性の1つをドロップ・ターゲットとして使用することで、単一オブジェクトにドラッグ・アンド・ドロップできます。または、表やツリー・コンポーネントなどのオブジェクトのコレクションにドラッグ・アンド・ドロップできます。

注：単一オブジェクトをドラッグする場合、そのオブジェクトのドロップ先は別の単一オブジェクトのみになります。同様に、コレクションをドラッグする場合、そのコレクションのドロップ先は別のコレクションのみになります。単一オブジェクトをコレクションにドラッグ・アンド・ドロップしたり、その逆をおこなったりすることはできません。

Oracle ADF Facesでは、コンポーネントをドラッグ・ターゲットとして宣言的に有効化するためのaf:collectionDropTarget、af:calendarDropTarget、およびaf:dropTargetという3つのタグが提供されます。これらのタグの使用方法の詳細は、ADF Faces Tag Referenceドキュメントを参照してください。

アプリケーション・ナビゲータで「MyPage.jsf」を右クリックし、「Run」を選択します。

Create Default Domainダイアログが表示されたら、PasswordフィールドとConfirm Passwordフィールドにデフォルト・パスワード（例：weblogic1）を入力し、「OK」をクリックします。

次のようなページがブラウザに表示されます。

デフォルトでOracle JDeveloperは、IDEにバンドルされたOracle WebLogic Serverのユーザー固有のインスタンスを参照する、Integrated WebLogic Serverという名前の統合されたサーバーを自動的に構成します。

詳細表示

イメージをドラッグして、Cup入力フィールドの上に配置します。

カーソルを入力フィールドの上に置くと、フィールドの背景色が変化して、イメージのドロップを受け入れられる領域の上にマウス・カーソルがあることが示されます。

受入れ可能なドロップ・ターゲットの上にマウス・カーソルがない場合、カーソルの形は斜線が入った円形に変わります。

マウス・ボタンを離してイメージを入力フィールドにドロップすると、Coffeeという単語がCup入力フィールドに表示されます。

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

ドロップ・イベントを処理するためのJavaクラスとリスナー・メソッドを作成します。クラスは、アノテーションを使用してマネージドBeanとして登録されます。

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

アプリケーションは、アプリケーション・ページにより表示されるテキストとメッセージを含んだファイルや、アプリケーションが使用するデータを定義するBeanなどの特定のリソースを必要とします。アプリケーションが必要とするリソースは、JSF構成ファイルfaces-config.xmlに指定されます。

詳細表示

マネージドBeanとは、JSF構成ファイルfaces-config.xmlに登録されているか、または特殊なマネージドBeanアノテーションをBeanクラスに持つすべてのアプリケーションJavaBeansのことです。

注： Oracle ADFデータ・バインディングとタスク・フローも使用するアプリケーションを作成する場合は、マネージドBeanをadfc-config.xmlファイルまたはタスク・フロー定義ファイルのいずれかに追加する必要があります。

このステップでは、ただfaces-config.xmlの概要エディタを使用してCreate Managed Beanダイアログにアクセスするだけで、Oracle JDeveloperが自動的にJavaクラス・ファイルを作成します。

Create Managed Beanダイアログで、次の値を入力するかオプションを選択して、「OK」をクリックします。

フィールドまたはオプション	値
Bean Name	`dnd`
Class Name	`MyPageInfo`
Package	`project1`
Extends	`java.lang.Object`
Scope	session
Registration	Annotations

Bean Name：Beanのインスタンス化に使用するクラスを特定するときにはシンボリック名を使用します。

詳細表示その後、このシンボリック名を使用してBeanのプロパティとメソッドを参照します。 Beanを直接参照する代わりにシンボリック名を使用しているため、プレゼンテーションがアプリケーション・ロジックと分離され、ビューに影響を及ぼすことなくモデルを変更できます。

Scope：マネージドBeanのスコープによって、Beanが格納されるスコープが決まります。 Beanの有効なスコープは次のとおりです。

application： Webアプリケーションが実行されている間、Beanが使用可能です。このスコープは、LDAPディレクトリなどのグローバルなBeanに有用です。
session：クライアント・セッションの間、クライアントがBeanを使用できます。
request：インスタンス化されてからクライアントに応答が返されるまで、Beanが使用可能です。これは通常、現在のページの存続期間です。
none： Beanは参照されるたびにインスタンス化されます。これは、Beanが別のBean内で参照されている場合に有用です。

Registration：JSF 2.0からは、faces-config.xmlにマネージドBeanを登録するのではなく、BeanクラスでマネージドBeanアノテーションを使用する選択ができるようになりました。マネージドBeanアノテーションの使用を選択すると、JavaBeansクラス・ファイルにアノテーションが追加されます。次に例を挙げます。

@ManagedBean(name="backing_mypage")
 @RequestScoped
 public class MypageInfo {
   ... 
 }

faces-config.xmlにJavaBeansを登録することにした場合は、faces-config.xmlファイルが自動的に更新され、必要な構成要素が追加されます。次に例を示します。

<managed-bean>
   <managed-bean-name>dnd</managed-bean-name>
   <managed-bean-class>MyPageInfo</managed-bean-class>
   <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>

faces-config.xmlファイルはかなりの大きさになることがありますが、マネージドBeanアノテーションを使用すると、ご覧のとおり、ファイルのサイズと複雑さが減少します。

JSFアプリケーションを起動すると、faces-config.xmlが解析され、登録されているマネージドBean（存在する場合）が使用可能になります。また、アノテーションによってマークされたJavaBeansがあれば、実行時にマネージドBeanになります。マネージドBeanが（たとえば、EL式内で値式と呼ばれるコンポーネントのタグ属性の値として）参照されると、マネージドBean作成機能が、そのBeanのデフォルトのコンストラクタ・メソッドを呼び出してBeansをインスタンス化します。プロパティが宣言されている場合は、それらに宣言済みのデフォルト値が設定されます。

必要に応じてエディタ・ウィンドウの上部にある「MyPageInfo.java」タブをクリックし、ドキュメントを前面に表示します。

Oracle JDeveloperによって追加されたマネージドBeanアノテーションを確認します。

@ManagedBean(name="dnd") @SessionScoped public class MyPageInfo implements Serializable { ... }

ソース・エディタで、編集中に使用できる機能には次のものがあります。

詳細表示

ソース・エディタで、ドロップ・イベントを処理するためのカスタム・コードを追加します。

たとえば、ドロップされた値をリストボックス内の項目リストに挿入するコードを追加できます。そのためには、最初にプロパティを追加して、選択入力コンポーネントを移入するための項目リストを作成するgetterメソッドをさらに追加します。次に、ドロップ・イベントを処理するためのDndActionメソッドを作成します。

独自のコードを記述する代わりに、用意されているサンプル・コードを使用できます。ソース・エディタで、生成されたコードをすべて削除し、次のコードに置き換えます。

package project1;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import java.util.ArrayList;
import java.util.List;
import javax.faces.model.SelectItem;
import oracle.adf.view.rich.datatransfer.DataFlavor;
import oracle.adf.view.rich.dnd.DnDAction;
import oracle.adf.view.rich.event.DropEvent;

@ManagedBean(name="dnd")
@SessionScoped
public class MyPageInfo implements Serializable {
   public MyPageInfo() {
   }

   /**
   * @return the beverage items
   */
   private List<SelectItem> _choices;

   public List<SelectItem> getChoices() {
     if (_choices == null) {
         _choices = new ArrayList<SelectItem>();
         _choices.add(new SelectItem("Cocoa", "Cocoa"));
         _choices.add(new SelectItem("Tea", "Tea"));
         _choices.add(new SelectItem("Wine", "Wine"));
     }
     return _choices;
   }

   /**
   * Drop event handler
   */
   public DnDAction handleItemDrop(DropEvent dropEvent) {
     try {
         DataFlavor<String> df = DataFlavor.getDataFlavor(String.class);
         String droppedValue = dropEvent.getTransferable().getData(df);
         if (droppedValue == null) {
            return DnDAction.NONE;
         } else {
            _choices.add(new SelectItem(droppedValue, droppedValue));
         }
         return DnDAction.COPY;
     } catch (Exception ex) {
         System.out.println("item drop failed with : " + ex.getMessage());
         return DnDAction.NONE;
     }
   }
}

ドロップ・イベントが発生した場合にカスタム・コードを起動するには、ドロップ・ターゲット・コンポーネントにドロップ・イベント・リスナーを登録します。

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

この例では、ドロップされた値をリストボックス内の項目のリストに追加する、ドロップ・イベント・リスナー・メソッドを作成します。また、リストボックスに項目の初期リストを動的に移入するためのプロパティとgetterメソッドも作成します。

1つ目のメソッドは、javax.faces.model.SelectItemインスタンスのListを返すgetterメソッドです。これはリストボックス・コンポーネントの移入を行うためのメソッドです。このメソッドは後で追加します。メソッドを書き込むには、最初にList<SelectItem>型のプロパティを宣言し、次に一連のadd(new SelectItem("some value", "some label"))文を使用してリストを作成します。

2番目のメソッドはドロップ・イベント・リスナー・メソッドです。ドロップ・イベント・リスナー・メソッドでは、DropEventイベントがパラメータとして取り込まれ、oracle.adf.view.rich.dnd.DndActionが返されます。次に例を挙げます。

public DnDAction handleDrop(DropEvent dropEvent) {
   // handle drop event here
}

ドロップ・イベント・リスナー・メソッドでは、ドロップ・イベントが受け入れられるかまたは拒否されるかを決定し、適切なDndActionを返す必要があります。受け入れられた場合、有効な値は、COPY、MOVE、LINKのセット（順番は任意）からの1つ以上のNMTOKENSである必要があります。拒否された場合は、DndAction.NONEが返されます。

ドロップ・メソッド・ロジックでは、ドロップされた値を取得して、SelectItemリストに追加する新しい選択項目の値およびラベルとして使用します。

実行時に項目がリストボックスにドロップされると、リストボックスはリフレッシュされ、新しい項目リストが表示されます。

ドロップ・イベントの転送可能オブジェクトからのデータ取得についての詳細は、JavaDocでoracle.adf.view.rich.event.DropEventおよびoracle.adf.view.rich.datatransferを参照してください。

アプリケーション・ナビゲータで「MyPageInfo.java」を右クリックし、「Make」を選択します。

Messages Logウィンドウに、Successful compilation: 0 errors, 0 warningsというメッセージが表示されます。

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

新しいドロップ・ターゲットの役割を果たすリストボックス・コンポーネントをページに追加し、ターゲットにリスナー・メソッドを登録します。

エディタ・ウィンドウの上部にある「MyPage.jsf」タブをクリックし、ページを前面に表示します。
コンポーネント・パレットで、ADF FacesページのText and Selectionパネルから「」Listboxをドラッグし、ページ上のsecondファセットにドロップします。
Insert ListboxダイアログのSelectページで、「Bind to list (select items)」が選択されていることを確認します。 Valueフィールドの横にある「Bind...」をクリックします。

前のステップで作成したドロップ・イベント・リスナー・メソッドでは、ドロップされた値をリストボックス内の項目のリストに追加します。したがって、このステップではaf:selectOneListboxコンポーネントを追加してドロップ・ターゲットとして使用します。

詳細表示

af:selectOneListboxコンポーネント（およびその他の類似する選択入力コンポーネント）には、リスト内の項目を表す1つのf:selectItemsコンポーネントを含めることができます。実行時に項目の初期リストがaf:selectOneListboxコンポーネントに移入されるようにするために、javax.faces.model.SelectItemインスタンスの配列を返すマネージドBean上のgetterメソッドにf:selectItemsコンポーネントを（value属性を使用して）値バインドします。

af:selectOneListboxコンポーネントを追加するとInsert Listboxダイアログが表示されるので、リスト用に個別の静的項目を作成するか、またはマネージドBean経由で動的に移入されるリストにバインドします。リストを動的に移入できるプロパティとgetterメソッドはマネージドBean内にすでに作成してあるので、ここでは動的リストへのバインドを選択します。

Expression Builderで、「JSF Managed Beans」→「dnd」の順で展開します。「choices」を選択して式#{dnd.choices}を作成し、「OK」をクリックします。

Java EE 5.0およびJSP 2.1で導入された統合式言語（EL）は、JSP 2.0により提供される式言語とJSFテクノロジー1.0用に作成された式言語を統合したものです。

詳細表示この統合ELにより、ページの作成者は引き続きEL式を使用して、UIコンポーネント値とオブジェクトをバッキングBeanプロパティにバインドするか、バッキングBeanメソッドをUIコンポーネント・タグから参照できます。

統合ELには、値式とメソッド式の2種類の式が定義されています。値式により、Beanのプロパティから外部オブジェクト上のデータの取得および設定の両方が可能になり、リスト、マップ、配列、暗黙的オブジェクト、リソース・バンドルを参照できます。メソッド式はコンポーネント・イベントを処理するメソッドか、またはコンポーネント・データを検証あるいは変換するメソッドを参照します。

値式

値式の構文は、JSP 2.0式言語で使用される構文に準拠しています。値式の例は、以下のとおりです。

#{foo}
#{foo.bar}
#{foo.bar.baz}
#{foo[bar]}
#{foo["bar"]}
#{foo[3]}
#{foo[3].bar}
#{foo.bar[3]}
#{foo.bar == "Hello World"}
#{(foo.bar) / 5 * 3}
Offer Valid from #{offer.validFromDate} to {offer.validToDate}

メソッド式

メソッド式では以下のパターンのいずれかを使用する必要があります。

#{expression.value}
#{expression[value]}

expressionには、前の値式の項にあげた任意のEL式を使用できます。valueには、式に含まれるオブジェクトのメソッド名に一致する識別子を指定する必要があります。

演算子

式言語は.および[]演算子に加え、次の演算子を提供します。

算術： +、-（二項）、*、/およびdiv、%およびmod、-（単項）
論理： and、&&、or、||、not、!
関係： ==、eq、!=、ne、<、lt、>、gt、<=、ge、>=、le。比較は、別の値に対してか、またはブール、文字列、整数、および浮動小数点リテラルに対して行うことができます。
Empty： empty演算子は値がnullまたは空白であるかどうかを判断するのに使用できる前置演算子です。
条件： A ? B : C。 Aの評価結果に基づいて、BまたはCを評価します。

次に、「Finish」をクリックしてリストボックスの挿入を完了します。
単一選択リストボックス・コンポーネントのプロパティ・インスペクタのCommonセクションで、Labelの値をBeverage choicesに変更し、[Enter]を押します。

ビジュアル・エディタには次のようなページが表示されます。
コンポーネント・パレットのOperationsパネルのDrag and Dropセクションにある「」Drop Targetを、ページ上の単一選択リストボックス・コンポーネントにドラッグ・アンド・ドロップします。

ドロップ操作の発生時に実行するカスタム・コードがある場合は、コンポーネントとともにaf:dropTargetタグを使用して、そのコンポーネントでドロップを受け入れられるようにすることができます。

詳細表示

af:dropTargetタグにあるdropListener属性を使用すると、カスタムのドロップ・イベント・リスナー・メソッドをドロップ・ターゲットに登録できます。

Insert Drop Targetダイアログで、DropListenerフィールドの横にある「」ドロップダウン・メニューから「Edit」を選択します。
Edit Propertyダイアログで、Managed Beanドロップダウン・リストから「dnd」を選択し、Methodドロップダウン・リストから「handleItemDrop」を選択します。「OK」をクリックします。

DropListenerフィールドに#{dnd.handleItemDrop}と表示されます。
「OK」をクリックして、Insert Drop Targetダイアログを閉じます。
Insert Data Flavorダイアログで、FlavorClassフィールドにjava.lang.Stringと入力して、「OK」をクリックします。

異なる型のオブジェクトがドロップ・ターゲットに受け入れられるようにするには、af:dataFlavorタグをaf:dropTargetタグとともに使用して、

詳細表示 1つ以上のデータ・フレーバ（java.lang.Stringやjava.util.Collectionなど）を指定します。

ドラッグ・ソースとして使用しているクライアント属性値がStringであるため、この例ではデータ・フレーバjava.lang.Stringを指定しています。

バインドした後、単一選択リストボックス・コンポーネントのコード全体は次のようになります。

<af:selectOneListbox label="Beverage choices"..>
  <f:selectItems value="#{dnd.choices}"../>
  <af:dropTarget dropListener="#{dnd.handleItemDrop}">
    <af:dataFlavor flavorClass="java.lang.String"/>
  </af:dropTarget>
</af:selectOneListbox>

アプリケーション・ナビゲータで「MyPage.jsf」を右クリックし、「Run」を選択します。

ブラウザには次のようなページが表示されます。
イメージをドラッグして、Beverage choicesのリストの上にドロップします。

ドロップ操作が正常に完了すると、部分ページ・レンダリングによってドロップ・ターゲットがレンダリングされ、既存のBeverage choicesリストに新しい項目Coffeeが追加されてリストボックスに表示されます。

まとめ

このチュートリアルでは、コンポーネント属性を使用してドラッグ・アンド・ドロップを実装しました。このチュートリアルで学習した内容は、以下のとおりです。

Oracle JDeveloperのウィザードおよびダイアログを使用して、アプリケーションおよび初期ページを作成する
ビジュアル・エディタ、コンポーネント・パレット、プロパティ・インスペクタ、構造ウィンドウを使用して、UIページを作成する
コンポーネントにクライアント属性を追加する
単一のコンポーネント属性をドラッグ・ソースまたはドロップ・ターゲットとして指定する
ドロップ操作を処理するためのカスタム・コードを起動するドロップ・イベント・リスナー・メソッドを作成する
Integrated WebLogic Serverを使用してOracle ADF Facesアプリケーションを実行する

Oracle ADF Facesの使用について、詳しくは以下を参照してください。

すべて表示 | すべて非表示

トップへ戻る