| Oracle® Fusion Middleware Oracle ADF FacesによるWebユーザー・インタフェースの開発 12c (12.2.1.3.0) E90375-03 |
|
 前 |
 次 |
panelDashboard コンポーネントにドラッグ・アンド・ドロップ機能を追加する方法についても説明します。
この章の内容は次のとおりです。
ADF Facesコンポーネントに実装するドラッグ・アンド・ドロップ機能では、属性値やUIコンポーネントなどのUI要素をドラッグし、表示されているWebページのユーザー・インタフェースでサポート対象のターゲットにドロップするインタラクティブなエンドユーザー操作がサポートされています。ADFアプリケーションのユーザーは、ADF Facesのドラッグ・アンド・ドロップ機能を使用できます。ドラッグ・アンド・ドロップ機能は、属性、オブジェクト、コレクション、コンポーネント、カレンダ、および各種DVTコンポーネントに対して機能するよう設定されています。
ADF Facesフレームワークには、ページ上の場所から別の場所へアイテムをドラッグ・アンド・ドロップする機能があります。ほとんどの場合、ドラッグ・アンド・ドロップは、ソースおよびターゲットに適切なタグを追加し、マネージドBeanにコードを実装することにより、簡単に実装できます。ドラッグ・アンド・ドロップにより、ユーザーはWebアプリケーションでは当然期待されるGUI経験を体感できます。たとえばFile Explorerアプリケーションでは、ファイルを「表」タブからドラッグし、それを図39-1に示すように、別のディレクトリ・フォルダにドロップできます。
図39-1 File Explorerアプリケーションでのドラッグ・アンド・ドロップ
このシナリオでは、オブジェクトを実際にコレクション(Folder0)からドラッグし、別のコレクション(Folder2)にドロップしています。これは、多数サポートされているドラッグ・アンド・ドロップ・シナリオの1つです。ADF Facesでは、次のシナリオがサポートされています。
属性値をコンポーネント・インスタンスからドラッグして、別のインスタンスへコピーします。たとえば、ユーザーはoutputTextコンポーネントをinputTextコンポーネントにドラッグでき、その結果、outputTextコンポーネントのvalue属性がinputTextコンポーネントのvalue属性の値になります。
オブジェクトの値をドラッグし、別のオブジェクトの値になるようにドロップします。たとえば、ユーザーはoutputTextコンポーネントを別のoutputTextコンポーネントにドラッグでき、その結果、Stringオブジェクトの配列になり、後者のoutputTextコンポーネントのtext属性に値が移入されます。
図39-1に示すように、あるコレクションのオブジェクトをドラッグして別のコレクションにドロップします。
コンポーネントをページ上の場所から別の場所にドラッグします。たとえば、ユーザーは既存のpanelBoxコンポーネントをpanelGridコンポーネント内の新規の場所にドラッグできます。
カレンダ内のアクティビティをある開始時刻または開始日から別の時刻または日付にドラッグします。
コンポーネントをpanelDashboardコンポーネントへ、または同コンポーネントからドラッグします。
別のコンポーネントからDVTパレートまたは株価チャートにオブジェクトをドロップします。
オブジェクトをDVTガント・チャートから別のコンポーネントにドラッグします。
DVTツリーマップとサンバースト・コンポーネントからノードをドラッグするか、DVTツリーマップとサンバースト・コンポーネントへオブジェクトをドロップします。
1つ以上のノードをDVT階層ビューア内でドラッグ・アンド・ドロップ、1つ以上のノードを階層ビューアから別のコンポーネントへドラッグ、あるいは1つ以上のコンポーネントから階層ビューアへドラッグします。
DVT時系列からイベントをドラッグし、表などのコレクション・コンポーネントにドロップするか、時間ベースのイベントの表から行をドラッグして時系列にドロップします。
ユーザーがソースをクリックしてドラッグし始めると、ブラウザにはドラッグされている要素がマウス・ポインタにアタッチされたゴースト要素として表示されます。ゴースト要素が有効なターゲット上に移動すると、そのターゲット・コンポーネントにはなんらかのフィードバック(強調表示され、カーソルが変化してターゲットが有効であることを示すなど)が現れます。ユーザーがゴースト要素を無効なターゲットにドラッグすると、カーソルが変わり、そのターゲットが有効でないことを示します。
属性値をドラッグするとき、ユーザーはターゲットに対して値のコピーしかできません。他のすべてのドラッグ・アンド・ドロップ・シナリオの場合、ドロップ時に要素は、コピー(コピー・アンド・ペースト)、移動(カット・アンド・ペースト)またはリンク(リンクが実際のファイル・オブジェクトの参照となるディレクトリ内のファイルへのショートカットを作成)できます。
ドラッグするコンポーネントで、値が含まれるものをソースと呼びます。ドロップを受け入れるコンポーネントをターゲットと呼びます。ソースおよびターゲット・コンポーネントに子として特定のタグを使用し、フレームワークにドロップを許可するように指示します。表39-1に、ドラッグ・アンド・ドロップの異なるシナリオ、有効なソースとターゲット、およびそのシナリオに使用する、関連付けられたタグを示します。
表39-1 ドラッグ・アンド・ドロップのシナリオ
| シナリオ | ソース | ターゲット |
|---|---|---|
属性値のドラッグ |
コンポーネント上の属性値 |
別のコンポーネント上の属性値(同じオブジェクト型である場合) |
タグ: |
タグ: |
|
オブジェクトをコンポーネントから別のコンポーネントへドラッグ |
すべてのコンポーネント |
すべてのコンポーネント |
タグ: |
タグ: |
|
アイテムをコレクションからドラッグして別のコレクションにドロップ |
|
|
タグ: |
タグ: |
|
コンポーネントをコンテナから別のコンテナへドラッグ |
すべてのコンポーネント |
すべてのコンポーネント |
タグ: |
タグ: |
|
カレンダ・アクティビティをある開始時刻または開始日から別の時刻または日付にドラッグ |
|
|
タグ: 不要 |
タグ: |
|
|
|
|
タグ: |
タグ: |
|
|
|
すべてのコンポーネント |
タグ: |
タグ: |
|
別のコンポーネントからパレートまたは株価チャートにオブジェクトをドロップします。 |
すべてのコンポーネント |
|
タグ: |
タグ: |
|
DVTガント・チャートからオブジェクトをドラッグし、別のコンポーネントにドロップ |
ガント・チャート |
すべてのコンポーネント |
タグ: |
タグ: |
|
DVT階層ビューア、サンバースト、またはツリーマップからノードをドラッグし、別のコンポーネントにドロップします |
|
すべてのコンポーネント |
タグ: |
タグ: |
|
時系列からイベントをドラッグしてコレクション・コンポーネントにドロップします |
|
|
タグ: |
タグ: |
ターゲットにドロップできるオブジェクトの型は、dataFlavorタグを追加することで制限でいます。これは、ターゲットでは1つのオブジェクト型しか受け入れられないのに、ソースが多数の異なる型の1つである場合に役立ちます。dataFlavorタグでは、ターゲットで複数のソースまたは複数の型を含む可能性のあるソースからオブジェクトを受け入れることができるよう、複数の型を設定することもできます。ドロップが成功するためには、ターゲットとソースの両方にdataFlavorタグがあり、dataFlavorが識別値とともにカプセル化するJavaタイプがソースとターゲットの間で同一でなければなりません。
注意:
ドラッグ・アンド・ドロップ機能は、ウィンドウ間ではサポートされていません。ウィンドウ境界を越えるドラッグは取り消されます。ポップアップ・ウィンドウとポップアップのベース・ページとの間のドラッグ・アンド・ドロップ機能はサポートされています。
また、ドラッグ・アンド・ドロップ機能はアクセスできないため、ドラッグ・アンド・ドロップを実行するために使用できるキーボード・ストロークがありません。したがって、アプリケーションですべての機能をアクセス可能にすることが求められる場合、このロジックを提供する必要があります。たとえば、ページでユーザーに、オブジェクトを選択する方法と、選択したオブジェクトを移動できるようにする「移動」ボタンまたはメニュー項目を提供する場合もあります。
ドラッグ・アンド・ドロップを実装する前に、その他のADF Faces機能を理解しておくと役に立ちます。ドラッグ・アンド・ドロップの実装に役立つ他の項へのリンクは、次のとおりです。
マネージドBean: コードにマネージドBeanを使用している可能性があります。マネージドBeanの使用の詳細は、「マネージドBeanの作成と使用」を参照してください。
イベント: 表およびツリー・コンポーネントでは、なんらかのロジックを実行することにより、アプリケーションを反応させることができるサーバー側およびクライアント側の両方のイベントを起動します。詳細は、「イベントの処理」を参照してください。
ADF Facesコンポーネントの属性値に対して、ADF Facesのドラッグ・アンド・ドロップ機能を有効にできます。ADF Facesコンポーネントに実装するドラッグ・アンド・ドロップ機能では、1つのコンポーネントの属性値をドラッグし、表示されているWebページのユーザー・インタフェースでサポート対象のターゲット・コンポーネントにドロップするインタラクティブなエンドユーザー操作がサポートされています。
属性のドラッグ・アンド・ドロップ機能は、あるコンポーネントの属性をターゲットとして定義し、別のコンポーネントの属性をソースとして定義して追加します。
注意:
ターゲットとソースの属性値は同じデータ型である必要があります。たとえば、ソースとターゲットの両方がString型の場合、属性のドラッグ・アンド・ドロップが使用可能です。どちらも数値型の場合は、両方で同じコンバータを使用します。
JSFページにすでにあるターゲットとソースのコンポーネントをドラッグ・アンド・ドロップできます。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「属性のドラッグ・アンド・ドロップ機能の追加」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ドラッグ・アンド・ドロップの追加機能」を参照してください。
属性のドラッグ・アンド・ドロップ機能を追加する手順:
ADF Facesコンポーネントによって表示される属性値ではないオブジェクトに対して、ADF Facesのドラッグ・アンド・ドロップ機能を有効にできます。ADF Facesコンポーネントに実装するドラッグ・アンド・ドロップ機能では、1つのオブジェクトの値をドラッグし、表示されているWebページのユーザー・インタフェースでサポート対象のターゲット・オブジェクトにドロップするインタラクティブなエンドユーザー操作がサポートされています。
ユーザーが属性値以外をドラッグできるようにする場合、またはあるコンポーネントから別のコンポーネントへ属性をコピーする以外の操作をユーザーができるようにする場合、dropTargetタグを使用します。また、DataFlavorオブジェクトを使用して、ドロップ・ターゲットに対して有効なソースのJava型を決めます。ドロップ・ターゲットとドラッグ・ソースが複数ある場合のために、識別値を使用して有効な組合せを制限できます。ドラッグ・アンド・ドロップ・アクションを受けて必要となる機能の実装も必要です。
たとえば、図39-2に示すように、Stringsの配列を持つoutputTextコンポーネントがあり、ユーザーがoutputTextコンポーネントをpanelBoxコンポーネントにドラッグできるようにして、panelBoxにStringの配列を表示させるとします。
図39-2 配列オブジェクトのドラッグ・アンド・ドロップ
outputTextコンポーネントにはattributeDragSourceタグが含まれます。ただし、String値の配列をoutputTextコンポーネントからドラッグしたいので、ターゲットのoutputTextコンポーネントでattributeDropTargetタグではなくdropTargetタグを使用する必要があります。また、dataFlavorタグを使用してarrayオブジェクトのみがターゲットで受け入れられるようにします。
dataFlavorタグの識別値の定義もできます。同じオブジェクト型の2つのターゲットと2つのソースがある場合に、これは有用です。識別値を作成することで、各ターゲットで有効なソースのみが受け入れられることが保証されます。たとえば、EMPLOYEEオブジェクトを受け入れるTargetAとTargetBの2つのターゲットがあるとします。EMPLOYEEオブジェクトのソースも2つあるとします。TargetAにalphaという値を使用して識別値を設定することにより、識別値alphaを持つEMPLOYEEソースのみが受け入れられます。
ドロップ・イベントのリスナーも実装する必要があります。ドロップ・イベントのオブジェクトはTransferableと呼ばれ、ドロップのペイロードを含みます。リスナーはTransferableオブジェクトにアクセスし、ここからDataFlavorオブジェクトを使用してオブジェクトがドロップ可能なことを確認します。その後、ドロップ・イベントを使用してターゲット・コンポーネントを取得し、ドロップされたオブジェクトを使用してプロパティを更新します。このリスナーの詳細は、「DVTコンポーネントのドラッグ・アンド・ドロップ機能の追加」の手順で説明します。
ドラッグ・アンド・ドロップ機能を追加するには、まず、コンポーネントをドラッグ・アンド・ドロップ・アクションのターゲットとして定義するタグをコンポーネントに追加します。次に、ドラッグ・アンド・ドロップ・アクションのロジックを処理するイベント・ハンドラ・メソッドを実装します。最後に、ドラッグ・アンド・ドロップのソースを定義します。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「オブジェクトのドラッグ・アンド・ドロップ機能の追加」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ドラッグ・アンド・ドロップの追加機能」を参照してください。
次のタスクを完了する必要があります。
ドラッグ・アンド・ドロップ機能を追加する手順:
ドラッグ・アンド・ドロップ操作時、ユーザーはキーボードのキーを押して(キーボード修飾子と呼ばれます)、ドラッグ・アンド・ドロップで行われるアクションを選択できます。ドラッグ・アンド・ドロップ・フレームワークでは、次のキーボード修飾子がサポートされます。
[Shift]: MOVE
[Ctrl]: COPY
[Ctrl]+[Shift]: LINK
ユーザーがドラッグ・アンド・ドロップ操作を行うと、ドロップ・ターゲットで、まず、ドラッグ・ソースのデータ形式の値が受け入れ可能かどうかを判断します。ソースとターゲットがコレクションの場合、次に、フレームワークでドラッグ・ソースとドロップ・ターゲットとの間で可能なアクションの論理積を求め、論理積のアクション(COPY、MOVEまたはLINKのうち1つ)をこの順に実行します。有効なアクションが1つのみの場合、そのアクションが実行されます。複数のアクションが可能で、ユーザーのキーボード修飾子がそのうちの1つに合致する場合、それが実行されます。キーボード修飾子が使用されない、あるいはキーボード修飾子と可能なアクションが合致しない場合、可能なアクションのセットからCOPY、MOVE、LINKがこの順にフレームワークで選択されます。
たとえば、COPYとMOVEをサポートするドロップ・ターゲットがあるとします。まず、ドロップ・ターゲットでは、ドラッグ・ソースが有効なデータ・フレーバであることを確認します。次に、ユーザーがドロップを実行したときに、どのアクションを実行するかを判断します。この例では、セットはCOPYとMOVEです。ユーザーがドラッグ中に[Shift]キーを押し続けると(MOVEのキーボード修飾子)、フレームワークではMOVEアクションが選択されます。ユーザーがドラッグ中に[Shift]キーを押し続ける以外のことをしている場合、修飾子キーが選択されていないときはCOPYがデフォルトであるため(順番の1番目)、アクションはCOPYになります。ユーザーが[Ctrl]キーを押している場合は、その修飾子はCOPYと一致し、その結果COPYが実行されます。ユーザーが[Ctrl]キーと[Shift]キーを押していた場合、その修飾子は許可されたアクションの論理積のセットにはないLINKアクションと一致するため、アクションはやはりCOPYになります。
注意:
JavaとJavaScriptとの間のラウンドトリップで情報が失われるため、ドロップでのデータが見込みとは異なる型の場合があります。たとえば、すべての数値型はdoubleオブジェクトとして、charオブジェクトはStringオブジェクトとして、ListオブジェクトとArrayオブジェクトはListオブジェクトとして、その他の大部分のオブジェクトはMapオブジェクトとして表されます。詳細は、「データのマーシャリングとアンマーシャリングに関する必知事項」を参照してください。
dropTargetタグにはclientDropListener属性が含まれており、この属性によりクライアントでドロップ・イベントを処理するJavaScriptを参照できます。クライアント・ハンドラはパラメータをとることはなく、AdfDnDContextアクションを返します。たとえば、メソッドがAdfDnDContext.ACTION_NONEを返すと、ドロップ操作は取り消され、サーバーでコールされません。メソッドがAdfDnDContext.ACTION_COPYを返すと、コピー操作が許可され、dropListenerが存在する場合には、それを実行するコールがサーバーで発生します。
たとえば、ドロップ・イベントの起動時にメッセージをログ出力するとします。メッセージの出力を処理し、サーバー・リスナーが起動されるよう適切なアクションを返すクライアント・ハンドラを作成します。次の例に、メッセージの出力にロガーを使用するクライアント・ハンドラを示します。
<script>
/**
* Shows a message.
*/
function showMessage()
{
AdfLogger.LOGGER.logMessage(AdfLogger.ALL, "clientDropListener handler,
copying...");
return AdfDnDContext.ACTION_COPY;
}
</script>
ADF Facesコンポーネントによって表示されるコレクションに対して、ADF Facesのドラッグ・アンド・ドロップ機能を有効にできます。ADF Facesコンポーネントに実装するドラッグ・アンド・ドロップ機能では、1つのコレクションからオブジェクトをドラッグし、表示されているWebページのユーザー・インタフェースでサポート対象のターゲット・コレクションにドロップするインタラクティブなエンドユーザー操作がサポートされています。
ユーザーは、collectionDropTargetおよびdragSourceタグを使用して、コレクションからアイテム(表から行など)をドラッグし、ツリーなどの別のコレクション・コンポーネントにドロップできるドラッグ・アンド・ドロップ機能を追加します。たとえば、File Explorerアプリケーションでは、ユーザーは、ディレクトリの内容を表示する表からディレクトリ・ツリーのフォルダにファイルをドラッグできます。図39-3に、Folder0ディレクトリの内容を表示する表からFolder3ディレクトリにドラッグされるFile0.docオブジェクトを示します。ドロップが完了すると、オブジェクトはFolder3を構成するコレクションの一部になります。
図39-3 File Explorerアプリケーションでのドラッグ・アンド・ドロップ機能
単一オブジェクトのドラッグ・アンド・ドロップ同様、コレクションに対しドロップによりコピー、移動またはコピーしてリンクとして貼り付ける(あるいは3つを組み合せる)ことができ、dataFlavorタグを使用してターゲットでの受け入れ対象を限定できます。
ターゲット・ソースがコレクションで、移動動作がサポートされている場合、dragDropEndListener属性のメソッドを実装して、ソース・コンポーネントから参照し、ドラッグ・アンド・ドロップ操作後のコレクションのクリーン・アップに使用することもできます。「dragDropEndListenerに関する必知事項」を参照してください。
コレクションのドラッグ・アンド・ドロップ機能を追加するには、dropTargetタグを使用するかわりにcollectionDropTargetタグを使用します。その後、ドラッグ・アンド・ドロップ・アクションのロジックを処理するイベント・ハンドラ・メソッドを実装する必要があります。次に、dragSourceタグを使用して、ドラッグ・アンド・ドロップ操作のソースを定義します。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「コレクションのドラッグ・アンド・ドロップ機能の追加」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ドラッグ・アンド・ドロップの追加機能」を参照してください。
ページにソースおよびターゲット・コンポーネントを作成する必要もあります。
ドラッグ・アンド・ドロップ機能を追加する手順:
ドロップ・イベントの後でソース・コレクションをクリーンアップする必要がある場合が考えられます。たとえば、ドラッグで移動を行った場合、移動した項目がコレクションの一部ではなくなるように、ソース・コンポーネントをクリーンアップする必要があることがあります。
dragSourceタグには、ドラッグ・アンド・ドロップ操作の終了後のロジックを含むハンドラを登録できるdragDropEndListener属性が含まれます。
たとえば、ドラッグ・アンド・ドロップでオブジェクトを移動する場合、ドロップの正常終了後にソース・コンポーネントからオブジェクトを物理的に削除する必要があります。次の例に、dragDropEndListener属性のハンドラを示します。
public void endListener(DropEvent dropEvent)
{
Transferable transferable = dropEvent.getTransferable();
// The data in the transferrable is the row key for the dragged component.
DataFlavor<RowKeySet> rowKeySetFlavor =
DataFlavor.getDataFlavor(RowKeySet.class, "DnDDemoModel");
RowKeySet rowKeySet = transferable.getData(rowKeySetFlavor);
if (rowKeySet != null)
{
Integer currKey = (Integer)rowKeySet.iterator().next();
// Remove the dragged data from the source model directly.
// getSourceValues() represents a collection object used by the source
// component
Object removed = getSourceValues().remove(currKey.intValue());
}
// Need to add the drag source table so it gets redrawn.
// The drag source component needs to be partially refreshed explicitly, while
// drop target component automatically refreshed and displayed.
AdfFacesContext.getCurrentInstance().addPartialTarget(dropEvent.getDragComponent());
ADF Facesコンポーネント全体に対して、ADF Facesのドラッグ・アンド・ドロップ機能を有効にできます。ADF Facesコンポーネントに実装するドラッグ・アンド・ドロップ機能では、コンポーネントをドラッグし、表示されているWebページのユーザー・インタフェースで別の場所にドロップするインタラクティブなエンドユーザー操作がサポートされています。
ある親から別の親へのコンポーネントの移動を可能にしたり、親コンポーネントの子コンポーネントの並替えを可能にしたりできます。例として、図39-4に、panelGridコンポーネントの最初の子で最後に移動される暗色のpanelBoxコンポーネントを示します。
図39-4 コンポーネント間のドラッグ・アンド・ドロップ機能
注意:
panelDashboardコンポーネントでのコンポーネントの出し入れを行う場合、そのコンポーネント固有のプロシージャを使用する必要があります。「panelDashboardコンポーネントに対するドラッグ・アンド・ドロップ機能の追加」を参照してください。
コンポーネントに対するドラッグ・アンド・ドロップ機能の追加は、オブジェクトに対するものと同様です。ただし、attributeDragSourceタグを使用するかわりにcomponentDragSourceタグを使用します。オブジェクトまたはコレクションのドラッグ・アンド・ドロップ同様、dropListenerハンドラを実装する必要もあります。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「コンポーネントのドラッグ・アンド・ドロップ機能の追加」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ドラッグ・アンド・ドロップの追加機能」を参照してください。
ドラッグ・アンド・ドロップ機能を追加する手順:
ADF FacesのpanelDashboardコンポーネントで、ADF Facesのドラッグ・アンド・ドロップ機能を有効にできます。ADF Faces panelDashboardコンポーネントに実装するドラッグ・アンド・ドロップ機能では、表示されているWebページのユーザー・インタフェースにおいて、panelDashboardとの間でコンポーネントをドラッグするインタラクティブなエンドユーザー操作がサポートされています。
デフォルトで、panelDashboardコンポーネントではそれ自体の内部でのコンポーネントのドラッグ・アンド・ドロップがサポートされています。つまり、panelDashboardコンポーネントでは、リスナーを実装したり、追加のタグを使用したりする必要なしに、内部のコンポーネントを並べ替えることができます。ただし、panelDashboardコンポーネントにコンポーネントをドラッグ、またはpanelDashboardコンポーネントからコンポーネントをドラッグできるようにする場合は、タグを使用し、リスナーを実装する必要があります。コンポーネントのドラッグ・アンド・ドロップをするため、panelDashboardへのドラッグの際には、componentDragSourceタグを使用します。ただし、panelDashboardではすでにドロップ・ターゲットになることがサポートされているため、dropTargetタグを使用する必要はありません。かわりに、識別値の付いたdataFlavorを使用する必要があります。タグおよび識別値は、フレームワークにそのドロップが外部コンポーネントからのものであることを知らせます。
panelDashboardからのコンポーネントのドラッグは、他のコンポーネントのドラッグ・アンド・ドロップとほとんど同じです。ターゲットにはdropTargetタグを、ソースにはcomponentDragSourceタグを使用します。ただし、dataFlavorタグと識別値も使用する必要があります。
panelDashboardコンポーネントには、ダッシュボード内のpanelBoxコンポーネントの並替えに使用するドラッグ・アンド・ドロップ機能が組み込まれているため、dropTargetタグを使用する必要はありませんが、識別値の付いたdataFlavorタグを使用し、dropListenerを実装する必要があります。その実装では、コンポーネントの並替えを処理する必要があります。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「panelDashboardコンポーネントでのドラッグ・アンド・ドロップ機能の追加」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ドラッグ・アンド・ドロップの追加機能」を参照してください。
始める前に:
panelDashboardコンポーネントを作成します。詳細は、「ダッシュボードでのコンテンツの配置」を参照してください。
panelBoxコンポーネントを含むpanelDashboardの外にもう1つのコンポーネントを作成します。panelBoxコンポーネントの詳細は、「panelBoxコンポーネントの使用方法」を参照してください。
panelDashboardコンポーネントにドラッグ・アンド・ドロップ機能を追加する手順:
「panelDashboard」コンポーネントを選択します。panelDashboardコンポーネントに子としてドロップします。javax.faces.component.UIComponentを入力します。panelDashboardコンポーネントへのドラッグを許可されたコンポーネントを識別する一意の名前(dragIntoDashboardなど)に設定します。panelBoxコンポーネントの子としてドロップします。「panelDashboard」上の「Discriminant」に入力したのと同じ値になるように設定します。panelDashboardコンポーネントからのドラッグ・アンド・ドロップ機能の実装は、識別値付きのdataFlavorタグを使用する必要があることを除けば、その他のコンポーネントの標準のドラッグ・アンド・ドロップ機能と同様です。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「panelDashboardコンポーネントでのドラッグ・アンド・ドロップ機能の追加」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ドラッグ・アンド・ドロップの追加機能」を参照してください。
panelDashboardコンポーネントからドラッグ・アンド・ドロップ機能を追加する方法:
ADF Faces Calendarコンポーネントに対して、ADF Facesのドラッグ・アンド・ドロップ機能を有効にできます。ADF Faces calendarコンポーネントに実装するドラッグ・アンド・ドロップ機能では、カレンダのアクティビティを1つの開始時刻または開始日から、表示されているWebページのユーザー・インタフェースで別の開始時刻または開始日にドラッグするインタラクティブなエンドユーザー操作がサポートされています。
Calendarには、ユーザーがアクティビティのハンドルをドラッグして終了時間を変更できる機能が含まれています。ただし、ユーザーがアクティビティを別の開始時間、さらには別の日にドラッグ・アンド・ドロップできるようにする場合は、ドラッグ・アンド・ドロップ機能を実装します。ドラッグ・アンド・ドロップを使用すると、アクティビティを移動できるだけでなく、コピーすることもできます。
calendarDropTargetタグを使用して、ドラッグ・アンド・ドロップ機能を追加します。コレクションをドラッグ・アンド・ドロップするのと異なり、ソース・タグの必要はなく、アクティビティの移動はターゲット(アクティビティの移動先のオブジェクト、この場合はカレンダ)の役割です。ソース(移動またはコピーされるアイテム)がカレンダ内のアクティビティである場合、calendarDropTargetタグのみを使用します。タグでは、TransferableオブジェクトはCalendarActivityオブジェクトになります。
ただし、Calendarの外からオブジェクトをドラッグ・アンド・ドロップすることもできます。この操作を有効にする場合は、ソース・オブジェクト(calendarActivityオブジェクト以外のオブジェクト)をドロップできるように構成されているdataFlavorタグを使用します。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「Calendarへのドラッグ・アンド・ドロップ機能の追加」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、「ドラッグ・アンド・ドロップの追加機能」を参照してください。
Calendarにドラッグ・アンド・ドロップ機能を追加する手順:
Calendar内のドラッグ・アンド・ドロップ・アクティビティの場合、ユーザーは表示内でのみドラッグ・アンド・ドロップを行うことができます。つまり、ユーザーは、日表示内の1つの時間スロットから別の時間スロットにアクティビティをドラッグできますが、日表示からアクティビティを切り取り、月表示に貼り付けることはできません。
ユーザーが日表示または週表示でアクティビティをドラッグ・アンド・ドロップしている場合、Calendarでは30分ごとにドロップ・サイトがマークされます。日表示では、終日のアクティビティまたは複数日のアクティビティは移動できません。
週表示では、終日のアクティビティおよび複数日のアクティビティを移動できますが、その他の終日のスロットにのみドロップできます。つまり、終日のアクティビティを、開始時間と終了時間が設定されているアクティビティには変更できません。月表示では、終日のアクティビティおよび複数日のアクティビティを任意の日に移動できます。
様々なデータ可視化テクノロジ(DVT)コンポーネントに対して、ADF Facesのドラッグ・アンド・ドロップ機能を有効にできます。ADF Faces DVTコンポーネントに実装するドラッグ・アンド・ドロップ機能では、DVTコンポーネントの要素またはコンポーネント自体をドラッグし、表示されているWebページのユーザー・インタフェースでドロップするインタラクティブなエンドユーザー操作がサポートされています。
次のDVTコンポーネントのドラッグ・アンド・ドロップ機能を構成できます。
パレートおよび株価チャート(ドロップ・ターゲットのみ)
ガント・チャート
階層ビューア
サンバースト
テーマ・マップ
時系列
ツリーマップ
DVTコンポーネントは基本的に、他のADF Facesコンポーネントのドラッグ・アンド・ドロップと同じプロセスを使用します。ただし、DVTコンポーネントではコンポーネントからドラッグしてドロップできる項目に制約がある場合があります。
オブジェクトまたはコレクションのドラッグ・アンド・ドロップ同様、dropListenerハンドラを実装する必要もあります。ドロップ・イベントのオブジェクトはTransferableと呼ばれ、ドロップのペイロードを含みます。リスナーはTransferableオブジェクトにアクセスし、ここからDataFlavorオブジェクトを使用してオブジェクトがドロップ可能なことを確認します。その後、ドロップ・イベントを使用してターゲット・コンポーネントを取得し、ドロップされたオブジェクトを使用してプロパティを更新します。
他のADFコンポーネントからドロップ可能なドロップ・ターゲットとして、パレートおよび株価チャートを構成できます。たとえば、ADF表セルからのドロップを可能にする株価チャートを構成できます。
パレートまたは株価チャートをドロップ・ターゲットとして構成するには、af:dropTargetタグをパレートまたは株価チャートの子として追加し、ドロップ・イベントに応答するマネージドBeanのメソッドを追加します。次の例に、ADF表からドロップを受け取るように構成されたグラフのドロップ・リスナーのサンプルを示します。
ADF Facesコンポーネント、オブジェクトまたはコレクションもドラッグ・ソースとして構成し、ドラッグに応答するメソッドを定義する必要があります。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「ドラッグ・アンド・ドロップ機能について」を参照してください。
次のタスクを実行する必要があります。
パレートまたは株価チャートをページに追加します。
DVTコンポーネント作成時のヘルプについては、「ADFデータ視覚化コンポーネントの概要」を参照してください。
DVTコンポーネントへのドロップを可能にする予定であれば、ドラッグ・ソースとするコンポーネントをページに加えます。
他のADF Facesコンポーネント追加の詳細は、「ADF Facesコンポーネント」を参照してください。
グラフにドロップをリスニングするメソッドを作成します。マネージドBeanの使用の詳細は、「マネージドBeanの作成と使用」を参照してください。
パレートまたは株価チャートをドロップ・ターゲットとして構成する手順:
例39-1 ドラッグ・アンド・ドロップ・ターゲットを処理するためのマネージドBeanのサンプル
public class dragAndDrop {
public DnDAction fromTableDropListener(DropEvent event) {
Transferable transferable = event.getTransferable();
DataFlavor<RowKeySet> dataFlavor = DataFlavor.getDataFlavor(RowKeySet.class, "fromTable");
RowKeySet set = transferable.getData(dataFlavor);
Employee emp = null;
if(set != null && !set.isEmpty()) {
int index = (Integer) set.iterator().next();
emp = m_tableModel.get(index);
}
if(emp == null)
return DnDAction.NONE;
DnDAction proposedAction = event.getProposedAction();
if(proposedAction == DnDAction.COPY) {
m_graphList.add(emp);
}
else if(proposedAction == DnDAction.LINK) {
m_graphList.add(emp);
}
else if(proposedAction == DnDAction.MOVE) {
m_graphList.add(emp);
m_tableModel.remove(emp);
}
else
return DnDAction.NONE;
RequestContext.getCurrentInstance().addPartialTarget(event.getDragComponent());
return event.getProposedAction();
}
ドロップ・イベントのリスナーも実装する必要があります。ドロップ・イベントのオブジェクトはTransferableと呼ばれ、ドロップのペイロードを含みます。リスナーはTransferableオブジェクトにアクセスし、ここからDataFlavorオブジェクトを使用してオブジェクトがドロップ可能なことを確認します。その後、ドロップ・イベントを使用してターゲット・コンポーネントを取得し、ドロップされたオブジェクトを使用してプロパティを更新します。
ユーザーがガント・チャートとその他のコンポーネントとの間でドラッグ・アンド・ドロップできるようにする場合、dragSourceタグとdropTargetタグを使用します。また、DataFlavorオブジェクトを使用して、ドロップ・ターゲットに対して有効なソースのJava型を決めます。ドラッグ・アンド・ドロップ・アクションを受けて必要となる機能の実装も必要です。projectGanttおよびschedulingGanttコンポーネントでは、ドラッグ・アンド・ドロップ機能がサポートされています。
たとえば、図39-5に示すように、projectGanttコンポーネントがあり、ユーザーが時間バケットをtreeTableコンポーネントにドラッグできるようにして、そのコンポーネントに時間バケットについての情報を表示させるとします。
図39-5 オブジェクトのドラッグ・アンド・ドロップ
projectGanttコンポーネントにはdragSourceタグが含まれます。ユーザーは、表示された出力テキストのString値のみでなく、オブジェクト全体をドラッグするため、attributeDropTargetタグのかわりにdropTargetタグを使用します。
また、dataFlavorタグを使用して、ドロップされるオブジェクトの型を決めます。このタグでは、識別値を定義できます。同じオブジェクト型の2つのターゲットと2つのソースがある場合に、これは有用です。識別値を作成することで、各ターゲットで有効なソースのみが受け入れられることが保証されます。たとえば、TaskDragInfoオブジェクトを受け入れるTargetAとTargetBの2つのターゲットがあるとします。TaskDragInfoブジェクトのソースも2つあるとします。TargetAにalphaという値を使用して識別値を設定することにより、識別値alphaを持つTaskDragInfoソースのみが受け入れられます。
ドロップ・イベントのリスナーも実装する必要があります。ドロップ・イベントのオブジェクトはTransferableと呼ばれ、ドロップのペイロードを含みます。リスナーはTransferableオブジェクトにアクセスし、ここからDataFlavorオブジェクトを使用してオブジェクトがドロップ可能なことを確認します。その後、ドロップ・イベントを使用してターゲット・コンポーネントを取得し、ドロップされたオブジェクトを使用してプロパティを更新します。
ドラッグ・アンド・ドロップ機能を追加するには、まず、コンポーネントをドラッグ・アンド・ドロップ・アクションのターゲットとして定義するタグをコンポーネントに追加します。次に、ドラッグ・アンド・ドロップ・アクションのロジックを処理するイベント・ハンドラ・メソッドを実装します。最後に、ドラッグ・アンド・ドロップのソースを定義します。実行時の処理の詳細は、「実行時の処理: キーボード修飾子の使用方法」を参照してください。clientDropListener属性の使用の詳細は、「ClientDropListenerの使用に関する必知事項」を参照してください。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「ドラッグ・アンド・ドロップ機能について」を参照してください。
次のタスクを実行する必要があります。
DVTコンポーネントをユーザーのページに加えます。
DVTコンポーネント作成時のヘルプについては、「ADFデータ視覚化コンポーネントの概要」を参照してください。
DVTコンポーネントへのドロップを可能にする予定であれば、ドラッグ・ソースとするコンポーネントをページに加えます。
他のADF Facesコンポーネント追加の詳細は、「ADF Facesコンポーネント」を参照してください。
DVTコンポーネントから別のコンポーネントヘのドラッグを可能にする予定であれば、ドロップ・ターゲットとするコンポーネントをページに加えます。
ドラッグ・アンド・ドロップ機能を追加する手順:
階層ビューア、サンバースト、およびツリーマップを、ページ上でサポートされたコンポーネント間のドラッグ・アンド・ドロップ操作のドラッグ・ソース、およびドロップ・ターゲットとして構成できます。
階層ビューアは、次のドラッグ・アンド・ドロップ操作をサポートします。
階層ビューア内で、1つ以上のノードをドラッグ・アンド・ドロップします
階層ビューアから1つ以上のノードを別のコンポーネントにドラッグします
別のコンポーネントから階層ビューアに1つ以上のアイテムをドラッグします
図39-6に、その中でのドラッグ・アンド・ドロップを可能とするように構成した階層ビューアを示します。ノードをクリックし0.5秒を超えて保持すると、バックグラウンドにドラッグして階層内の別のルートにしたり、別のノードにドラッグしてそのノードの子として追加したりすることができます。
図39-6 ノード・ドラッグを示す階層ビューア
この例では、ノードを別のノードにドラッグすると、ドラッグされたノードとその子は、ターゲット・ノードの子となります。図39-7に、Nina Evansのデータを含むノードへのドラッグの結果を示します。Nancy Greenとその部下は、今はNina Evansの部下として示されます。
図39-7 別のノードへのノード・ドラッグ後の階層ビューア
サンバーストは、1つ以上のノードの別コンポーネントへのドラッグをサポートします。ドラッグのペイロードは、org.apache.myfaces.trinidad.model.RowKeySetです。サンバーストが別のオブジェクトからのドロップを受け入れるように構成することもできます。
図39-8に、それからaf:outputFormattedコンポーネントへのドラッグを可能とするように構成されたサンバーストを示します。サンバーストが複数選択が可能なように構成されている場合、ユーザーは複数のノードをCtrl+D操作でドラッグできます。
図39-8 ドラッグ・ソースとして構成されたサンバースト
ツリーマップは、1つ以上のノードの別コンポーネントへのドラッグをサポートします。ドラッグのペイロードは、org.apache.myfaces.trinidad.model.RowKeySetです。ツリーマップが別のオブジェクトからのドロップを受け入れるように構成することもできます。
図39-9に、ドロップ・ターゲットとして構成されたツリーマップを示します。この例では、ドラッグ・ソースはaf:outputFormattedコンポーネントです。
図39-9 ドロップ・ターゲットとして構成されたツリーマップ
ドラッグ・アンド・ドロップの機能を追加するには、第一に、サポート対象のDVTコンポーネントに、ドラッグ・アンド・ドロップ・アクションのターゲットとしてそれを定義しているタグを追加します。次に、ドラッグ・アンド・ドロップ・アクションのロジックを処理するイベント・ハンドラ・メソッドを実装します。最後に、ドラッグ・アンド・ドロップのソースを定義します。実行時の処理の詳細は、「実行時の処理: キーボード修飾子の使用方法」を参照してください。clientDropListener属性の使用の詳細は、「ClientDropListenerの使用に関する必知事項」を参照してください。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「ドラッグ・アンド・ドロップ機能について」を参照してください。
次のタスクを実行する必要があります。
DVTコンポーネントをユーザーのページに加えます。
DVTコンポーネント作成時のヘルプについては、「ADFデータ視覚化コンポーネントの概要」を参照してください。
DVTコンポーネントへのドロップを可能にする予定であれば、ドラッグ・ソースとするコンポーネントをページに加えます。
他のADF Facesコンポーネント追加の詳細は、「ADF Facesコンポーネント」を参照してください。
DVTコンポーネントから別のコンポーネントヘのドラッグを可能にする予定であれば、ドロップ・ターゲットとするコンポーネントをページに加えます。
DVT階層ビューア、サンバースト、あるいはツリーマップ・コンポーネントにドラッグ・アンド・ドロップ機能を追加するには:
DVTコンポーネントをドロップ・ターゲットとして構成するには、次を実行します。
「コンポーネント」ウィンドウで、「操作」パネルから、「ドロップ・ターゲット」タグをドラッグし、ドラッグ・アンド・ドロップをサポートするDVTコンポーネントの子としてドロップします。
「ドロップ・ターゲットの挿入」ダイアログで、イベントを処理するマネージドBean上のドロップ・リスナー・メソッド(このコードはステップ1.fで作成)に評価される式を入力します。
ヒント
clientDropListener属性を挿入して、クライアントでドロップを捕捉することもできます。詳細は、「ClientDropListenerの使用に関する必知事項」を参照してください。
「データ・フレーバの挿入」ダイアログで、ターゲットにドロップ可能なオブジェクトのクラス(java.lang.Objectなど)を入力します。この選択は、dataFlavorタグを作成するために使用され、このタグにより、ターゲットにドロップできるオブジェクトの型が決まります。1つのドロップ・ターゲットに複数のdataFlavorタグを使用し、ドロップ・ターゲットでこれらの型のいずれも受け入れるようにすることができます。
ヒント
DataFlavorタグに型指定された配列を指定するには、java.lang.Object[]のようにクラス名に大カッコ([])を追加します。
「プロパティ」ウィンドウで、必要に応じて識別値の値を設定します。識別値は、ターゲットにドロップできるソースを判断するために使用される任意の文字列です。たとえば、どちらもjava.lang.Objectを受け入れる2つのツリーマップ、ツリーマップAとツリーマップBがあるとします。ソースも2つあり、どちらもjava.lang.Objectオブジェクトです。GraphAにalphaという値を使用して識別値を設定することにより、識別値alphaを持つjava.lang.Objectソースのみが受け入れられます。
構造ウィンドウで、dropTargetタグを選択します。「プロパティ」ウィンドウで、「処理」の値を選択します。これによって、ドロップ・ターゲットでサポートされるアクションが定義されます。有効な値は、COPY(コピーして貼付け)、MOVE(切り取って貼付け)およびLINK(コピーしてリンクとして貼付け)です。
MOVE COPY
アクションが指定されない場合、デフォルトはCOPYです。
次の例に、java.lang.Objectをドラッグ・ソースとして受け入れるツリーマップ・コンポーネントのコードを示します。「処理」の値としてCOPYが設定されているため、それが許可される唯一のアクションになります。
<dvt:treemap id="t1" value="#{treemap.censusData}" var="row"
displayLevelsChildren="3" colorLabel="Median Household Income
sizeLabel="Population" summary="Treemap Configured as Drag Source"
legendSource="ag1">
<dvt:treemapNode id="tn1" value="#{row.size}" label="#{row.text}">
<dvt:attributeGroups id="ag1" value="#{row.income > 50000}"
label="#{row.income > 50000 ? 'High Income' : 'Low Income'}"
type="color"/>
</dvt:treemapNode>
<af:dropTarget dropListener="#{treemap.toDropListener}"
actions="COPY">
<af:dataFlavor flavorClass="java.lang.Object"/>
</af:dropTarget>
</dvt:treemap>
ステップ1.bで作成したEL式で参照されるマネージドBeanに、ドラッグ・アンド・ドロップ機能を処理するイベント・ハンドラ・メソッドを(EL式での名前と同じ名前を使用して)作成します。
このメソッドでは、パラメータとしてDropEventイベントをとり、DnDActionオブジェクトを返す必要があり、これはソースをドロップするときに実行されるアクションです。有効な戻り値は、DnDAction.COPY、DnDAction.MOVEおよびDnDAction.LINKで、ステップ1.eでターゲット属性を定義したときに設定されたものです。このメソッドでは、DropEventイベントをチェックし、ドロップを受け入れるかどうか判断する必要があります。ドロップを受け入れる場合、メソッドではドロップを実行し、実行したDnDActionオブジェクトを返します。そうでない場合は、ドロップが拒否されたことを示すDnDAction.NONEを返します。
このメソッドでは、各dataFlavorオブジェクトの存在も優先順に確認される必要があります。
ヒント
ターゲットに複数のdataFlavorオブジェクトが定義されている場合、Transferable.getSuitableTransferData()メソッドを使用できます。このメソッドでは、Transferableオブジェクトで使用可能なTransferDataオブジェクトのListが適合性の高いものから順に返されます。
DataFlavorオブジェクトでは、ドロップされるデータの型(java.lang.Objectなど)が定義されます。これは、手順1.cで作成したJSPのDataFlavorタグでの定義と同じである必要があります。
ヒント
DataFlavorオブジェクトに型指定された配列を指定するには、java.lang.Object[]のようにクラス名に大カッコ([])を追加します。
DataFlavorオブジェクトではポリモフィズムがサポートされるため、ドロップ・ターゲットでjava.util.Listが受け入れられる場合、Transferableオブジェクトにjava.util.ArrayListを含むドロップは正常終了します。同様に、この機能ではArraysとListsとの間の自動変換もサポートされます。
ドラッグ・アンド・ドロップ・フレームワークで、サーバーのDataFlavorオブジェクトをクライアント・コンポーネントで表す方法がわからない場合、すべてのドロップがクライアントで正常終了するようドロップ・ターゲットが構成されます。
次の例に、イベント・ペイロードからjava.lang.Objectをコピーし、そのイベントを開始したコンポーネントに割り当てるハンドラ・メソッドを示します。
// imports needed by methods
import java.util.Map;
import oracle.adf.view.rich.dnd.DnDAction;
import oracle.adf.view.rich.event.DropEvent;
import oracle.adf.view.rich.datatransfer.DataFlavor;
import oracle.adf.view.rich.datatransfer.Transferable;
import org.apache.myfaces.trinidad.context.RequestContext;
import org.apache.myfaces.trinidad.render.ClientRowKeyManager;
import javax.faces.context.FacesContext;
import oracle.adf.view.faces.bi.component.treemap.UITreemap;
import javax.faces.component.UIComponent;
// variables need by methods
private String dragText = "Drag this text onto a node";
// drop listener
public DnDAction toDropListener(DropEvent event) {
Transferable transferable = event.getTransferable();
DataFlavor<Object> dataFlavor = DataFlavor.getDataFlavor(Object.class);
Object transferableObj = transferable.getData(dataFlavor);
if(transferableObj == null)
return DnDAction.NONE;
// Build up the string that reports the drop information
StringBuilder sb = new StringBuilder();
// Start with the proposed action
sb.append("Drag Operation: ");
DnDAction proposedAction = event.getProposedAction();
if(proposedAction == DnDAction.COPY) {
sb.append("Copy<br>");
}
else if(proposedAction == DnDAction.LINK) {
sb.append("Link<br>");
}
else if(proposedAction == DnDAction.MOVE) {
sb.append("Move<br>");
}
// Then add the rowKeys of the nodes that were dragged
UIComponent dropComponent = event.getDropComponent();
Object dropSite = event.getDropSite();
if(dropSite instanceof Map) {
String clientRowKey = (String) ((Map) dropSite).get("clientRowKey");
Object rowKey = getRowKey(dropComponent, clientRowKey);
if(rowKey != null) {
sb.append("Drop Site: ");
sb.append(getLabel(dropComponent, rowKey));
}
}
// Update the output text
this.dragText = sb.toString();
RequestContext.getCurrentInstance().addPartialTarget(event.getDragComponent());
return event.getProposedAction();
}
public String getDragText() {
return dragText;
}
private String getLabel(UIComponent component, Object rowKey) {
if(component instanceof UITreemap) {
UITreemap treemap = (UITreemap) component;
TreeNode rowData = (TreeNode) treemap.getRowData(rowKey);
return rowData.getText();
}
return null;
}
private Object getRowKey(UIComponent component, String clientRowKey) {
if(component instanceof UITreemap) {
UITreemap treemap = (UITreemap) component;
ClientRowKeyManager crkm = treemap.getClientRowKeyManager();
return crkm.getRowKey(FacesContext.getCurrentInstance(), component, clientRowKey);
}
return null;
}
DVTコンポーネントをドラッグ・ソースとして構成するには、次を実行します。
「コンポーネント」ウィンドウで、「操作」パネルから、「ドラッグ元」をドラッグし、子としてDVTコンポーネントにドロップします。
dragSourceタグを選択している場合、「プロパティ」ウィンドウで、ターゲットに構成される、許容処理と必要な識別値を設定します。
次の例に、ドラッグ・ソースとして構成された、ツリーマップのJSPコードを示します。すべてのアクション(COPY、MOVEおよびLINK)が許されることに注意します。
<dvt:treemap id="t1" value="#{treemap.censusData}" var="row"
displayLevelsChildren="3" colorLabel="Median Household Income
sizeLabel="Population" summary="Treemap Configured as Drag Source"
legendSource="ag1">
<dvt:treemapNode id="tn1" value="#{row.size}" label="#{row.text}">
<dvt:attributeGroups id="ag1" value="#{row.income > 50000}"
label="#{row.income > 50000 ? 'High Income' : 'Low Income'}"
type="color"/>
</dvt:treemapNode>
<af:dragSource defaultAction="MOVE" actions="COPY MOVE LINK"/>
</dvt:treemap>
DVTコンポーネントを別のコンポーネントからのドラッグを可能とするドロップ・ターゲットとして使用するには、「コンポーネント」ウィンドウで、「操作」パネルから「ドラッグ元」を、ドラッグのソースとなるコンポーネントの子としてドラッグ・アンド・ドロップします。
たとえば、ドラッグ元をaf:outputFormattedコンポーネントの子としてドラッグ・アンド・ドロップし、ツリーマップに関するノード情報を表示します。dragSourceタグを選択している場合、「プロパティ」ウィンドウで、許容処理とターゲットに必要な識別値を設定します。
DVTコンポーネントを別のサポートされたDVTやADF Facesのコンポーネントのドラッグ・ソースとして追加するには、以下を実行します。
「コンポーネント」ウィンドウで、「Operations」パネルから、「ドロップ・ターゲット」を、ドロップを受け取るコンポーネント上にドラッグ・アンド・ドロップします。
たとえば、ドロップ・ターゲットをツリー表コンポーネント上にドラッグ・アンド・ドロップします。
「ドロップ・ターゲットの挿入」ダイアログで、コンポーネントがDVTコンポーネントのドロップへの対応に使用するドロップ・リスナーの名前を入れます。
サンプルのリスナーについては、この章の例を参照してください。
データ・フレーバを挿入ダイアログで、ドロップ・ターゲットが受け入れるオブジェクトを入力します。または、ドロップダウン・メニューを使用してオブジェクトの階層をナビゲートし、希望するオブジェクトを選択します。
たとえば、ユーザーがツリーマップ・ノードをtreeTableコンポーネントにドラッグし、そのコンポーネントにツリーマップについての情報を表示できるようにする場合、 org.apache.myfaces.trinidad.model.RowKeySetをデータ・フレーバに入れます。
構造ウィンドウでaf:dropTargetコンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウにおいて、「アクション」フィールドに、ドロップ・ターゲットが受け入れる操作のリストを、空白で区切って入力します。許容値は、 COPY、MOVEまたはLINKです。値を指定しない場合、ドロップ・ターゲットはCOPYを使用します。
次の例に、ツリーマップからのドラッグを可能なように構成したaf:outputFormattedコンポーネントのサンプル・コードを示します。
<af:outputFormatted value="#{treemap.dropText}" id="of1">
<af:dropTarget dropListener="#{treemap.fromDropListener}">
<af:dataFlavor flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"/>
</af:dropTarget>
</af:outputFormatted>
時系列は、ページ上のコレクション・コンポーネントとの間のドロップ・ターゲットまたはドラッグ元として構成できます。たとえば、1つのコレクションからアイテム(表の行など)をドラッグして時系列にドロップしたり、時系列からイベントをドラッグして表にドロップしたりできます。
図39-10に、時系列内のイベントと表の行との間でドラッグ・アンド・ドロップができるように構成された時系列を示します。
図39-10 表との間のドラッグ・アンド・ドロップ用に構成された時系列
ドラッグ・アンド・ドロップの機能を追加するには、第一に、サポート対象のDVTコンポーネントに、ドラッグ・アンド・ドロップ・アクションのターゲットとしてそれを定義しているタグを追加します。次に、ドラッグ・アンド・ドロップ・アクションのロジックを処理するイベント・ハンドラ・メソッドを実装します。最後に、ドラッグ・アンド・ドロップのソースを定義します。実行時の処理の詳細は、「実行時の処理: キーボード修飾子の使用方法」を参照してください。clientDropListener属性の使用の詳細は、「ClientDropListenerの使用に関する必知事項」を参照してください。
始める前に:
ドラッグ・アンド・ドロップ機能について理解しておくと役立ちます。詳細は、「ドラッグ・アンド・ドロップ機能について」を参照してください。
次のタスクを実行する必要があります。
DVTコンポーネントをユーザーのページに加えます。
DVTコンポーネント作成時のヘルプについては、「ADFデータ視覚化コンポーネントの概要」を参照してください。
DVTコンポーネントへのドロップを可能にする予定であれば、ドラッグ・ソースとするコンポーネントをページに加えます。
他のADF Facesコンポーネント追加の詳細は、「ADF Facesコンポーネント」を参照してください。
DVTコンポーネントから別のコンポーネントヘのドラッグを可能にする予定であれば、ドロップ・ターゲットとするコンポーネントをページに加えます。
時系列にドラッグ・アンド・ドロップ・サポートを追加するには:
構造ウィンドウでtimelineコンポーネントを右クリックして、「時系列の中に挿入」→「ドロップ・ターゲット」と選択します。
ドロップ・ターゲットを挿入ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して「編集」を選び、ドロップ・リスナー・メソッドを時系列のマネージドBeanに追加してください。または、ドロップダウン・メニューを使用して式ビルダーを選び、ドロップ・リスナーのEL式を入力してください。
たとえば、dndというマネージドBeanにhandleDropOnTimeline()というメソッドを追加するには、「編集」を選択し、ドロップダウン・メニューから「dnd」を選択して、「メソッド」フィールドの右にある「新規」をクリックし、handleDropOnTimeline()メソッドを作成します。
次の例に、サンプルのドロップ・リスナーと図39-10に表示される時系列のサポート・メソッドを示します。
// imports needed by methods
import java.text.DateFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.bean.RequestScoped;
import oracle.adf.view.rich.datatransfer.DataFlavor;
import oracle.adf.view.rich.datatransfer.Transferable;
import oracle.adf.view.rich.dnd.DnDAction;
import oracle.adf.view.rich.event.DropEvent;
import org.apache.myfaces.trinidad.context.RequestContext;
import org.apache.myfaces.trinidad.model.CollectionModel;
import org.apache.myfaces.trinidad.model.ModelUtils;
import org.apache.myfaces.trinidad.model.RowKeySet;
// drop listener
public DnDAction handleDropOnTimeline(DropEvent event)
{
Date _date = (Date)event.getDropSite();
Transferable _transferable = event.getTransferable();
RowKeySet _rowKeySet = _transferable.getData(DataFlavor.ROW_KEY_SET_FLAVOR);
Object _rowKey = _rowKeySet.iterator().next();
EmpEvent _event = (EmpEvent)m_tableModel.getRowData(_rowKey);
_event.setDate(_date);
orderInsert(_event);
RequestContext.getCurrentInstance().addPartialTarget
(event.getDragComponent());
return DnDAction.COPY;
}
private void orderInsert(EmpEvent event)
{
int _index = -1;
ArrayList _list = (ArrayList)m_timelineModel.getWrappedData();
for (int i=0; i<_list.size(); i++)
{
EmpEvent _current = (EmpEvent)_list.get(i);
if (event.getDate().before(_current.getDate()))
{
_index = i;
break;
}
}
if (_index == -1)
_list.add(event);
else
_list.add(_index, event);
ArrayList _list2 = (ArrayList)m_tableModel.getWrappedData();
_list2.remove(event);
}
「OK」をクリックし、「データ・フレーバの挿入」ダイアログに、org.apache.myfaces.trinidad.model.RowKeySetを入力します。
構造ウィンドウでaf:dropTargetコンポーネントを右クリックし、「プロパティに移動」を選択して、「プロパティ」ウィンドウで次の属性を設定します。
Actions: ドロップ・ターゲットが受け入れる操作をスペース区切りのリストで入力します。許容値は、COPY、MOVEまたはLINKです。値を指定しない場合、ドロップ・ターゲットはCOPYを使用します。
Discriminant: ドロップ・ターゲットとドラッグ元が互換性のために共有するモデル名を指定します。この属性の値は、時系列からドラッグを受けるコレクション・コンポーネントに設定する、af:dragSourceコンポーネントのdiscriminant属性の値に一致する必要があります。
別のコレクション・コンポーネントを時系列へのドロップのドラッグ元として構成するには、次のようにします。
「コンポーネント」ウィンドウで、「操作」パネルから、「ドラッグ元」タグをドラッグのソースとなるコンポーネントの子としてドラッグ・アンド・ドロップします。
たとえば、「ドラッグ元」のタグをaf:tableコンポーネントの子としてドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウで、コンポーネントの「Actions」フィールドに、ドロップ・ターゲットが受け入れる操作をスペース区切りのリストで入力します。
コンポーネントの「Discriminant」フィールドに、ドロップ・ターゲットとドラッグ元が互換性のために共有するモデル名を指定します。
時系列をドラッグ元として構成するには、「コンポーネント」ウィンドウの「操作」パネルから、「ドラッグ元」のタグを時系列の子としてドラッグ・アンド・ドロップします。
構造ウィンドウでaf:dragSourceコンポーネントを右クリックし、「プロパティに移動」を選択して、「プロパティ」ウィンドウで次の属性を設定します。
Actions: コレクション・ドロップ・ターゲット・コンポーネントが受け入れる操作をスペース区切りのリストで入力します。
Discriminant: ドラッグ元とコレクション・ドロップ・ターゲットが互換性のために共有するモデル名を指定します。この属性の値は、時系列からドラッグを受けるコレクション・コンポーネントに設定する、af:collectionDropTargetコンポーネントのmodelName属性の値に一致する必要があります。
別のコレクション・コンポーネントを時系列からのドロップのドロップ・ターゲットとして構成するには、次のようにします。
「コンポーネント」ウィンドウの「操作」パネルで、「コレクション・ドロップ・ターゲット」を、ドロップを受けるコンポーネントにドラッグ・アンド・ドロップします。
たとえば、「コレクション・ドロップ・ターゲット」を、ドロップの結果を表示するaf:tableコンポーネントの子としてドラッグ・アンド・ドロップします。
ドロップ・ターゲットを挿入ダイアログで、ドロップ・リスナーの名前を入力するか、ドロップダウン・メニューを使用して編集を選び、ドロップ・リスナー・メソッドを適切なマネージドBeanに追加してください。
次の例に、図39-10に表示される時系列のサンプル・ドロップ・リスナーを示します。この例では、前述の例で使用されているものと同じインポートおよびヘルパー・メソッドが使用されるため、ここにはそれらを記載していません。
//Drop Listener
public DnDAction handleDropOnTable(DropEvent event)
{
Integer _dropSite = (Integer)event.getDropSite();
Transferable _transferable = event.getTransferable();
RowKeySet _rowKeySet = _transferable.getData(DataFlavor.ROW_KEY_SET_FLAVOR);
Object _rowKey = _rowKeySet.iterator().next();
EmpEvent _event = (EmpEvent)m_timelineModel.getRowData(_rowKey);
ArrayList _list = (ArrayList)m_tableModel.getWrappedData();
_list.add(_dropSite.intValue(), _event);
ArrayList _list2 = (ArrayList)m_timelineModel.getWrappedData();
_list2.remove(_event);
RequestContext.getCurrentInstance().addPartialTarget
(event.getDragComponent());
return DnDAction.COPY;
}
private static Date parseDate(String date)
{
Date ret = null;
try
{
ret = s_format.parse(date);
}
catch (ParseException e)
{
e.printStackTrace();
}
return ret;
}
「OK」をクリックし、「データ・フレーバの挿入」ダイアログに、org.apache.myfaces.trinidad.model.RowKeySetを入力します。
構造ウィンドウでaf:dropTargetコンポーネントを右クリックし、「プロパティに移動」を選択します。
「プロパティ」ウィンドウにおいて、「アクション」フィールドに、ドロップ・ターゲットが受け入れる操作のリストを、空白で区切って入力します。
「ModelName」フィールドに、コレクションのモデルを定義します。modelName属性の値は、互換性の目的でドラッグ元の特定に使用されるStringオブジェクトです。この属性の値は、af:dragSourceコンポーネントのdiscriminant属性の値に一致する必要があります。
次の例に、図39-10に示すADF Facesコンポーネント・デモ・アプリケーションのJSFページのサンプル・コードを示します。af:tableコンポーネントの詳細は、「表、ツリー、およびその他のコレクションベースのコンポーネントの使用」を参照してください。
<dvt:timeline id="tl1" startTime="2010-01-01" endTime="2011-12-31"
inlineStyle="width:800px;height:400px" itemSelection="single">
<f:attribute name="horizontalFetchSizeOverride" value="3000"/>
<dvt:timelineSeries id="ts1" var="evt" value="#{dnd.timelineModel}">
<dvt:timelineItem id="ti1" value="#{evt.date}" group="#{evt.group}">
<af:panelGroupLayout id="pg1" layout="horizontal">
<af:image id="img1" inlineStyle="width:30px;height:30px"
source="/resources/images/timeline/employment.png"/>
<af:spacer width="3"/>
<af:panelGroupLayout id="pg2" layout="vertical">
<af:outputText id="ot1" inlineStyle="color:#084B8A"
value="#{evt.description}" noWrap="true"/>
<af:outputText id="ot2" value="#{evt.date}"
inlineStyle="color:#6e6e6e" noWrap="true">
<af:convertDateTime dateStyle="medium"/>
</af:outputText>
</af:panelGroupLayout>
</af:panelGroupLayout>
</dvt:timelineItem>
<af:dragSource actions="COPY" discriminant="model"/>
<af:dropTarget actions="COPY" dropListener="#{dnd.handleDropOnTimeline}">
<af:dataFlavor flavorClass="org.apache.myfaces.trinidad.model.RowKeySet"
discriminant="model2"/>
</af:dropTarget>
</dvt:timelineSeries>
<dvt:timeAxis id="ta1" scale="weeks"/>
<dvt:timelineOverview id="ov1">
<dvt:timeAxis id="ta2" scale="years"/>
</dvt:timelineOverview
</dvt:timeline>
<af:table var="row" value="#{dnd.tableModel}" rowSelection="single"
inlineStyle="width:370px;height:400px">
<af:column headerText="ID" width="20">
<af:outputText value="#{row.id}"/>
</af:column>
<af:column headerText="Event" width="340">
<af:outputText value="#{row.description}"/>
</af:column>
<af:dragSource actions="COPY" discriminant="model2"/>
<af:collectionDropTarget actions="COPY" modelName="model"
dropListener="#{dnd.handleDropOnTable}"/>
</af:table>
