詳細アイコン IDE内の表示

ドロップ・ターゲットとデータ・フレーバを指定して、ドロップ・イベント・リスナーをドロップ・ターゲットに登録する手順を完了すると、ビジュアル・エディタの表示は次のようになります。

ビジュアル・エディタ

XMLソース・エディタでは、単一選択リスト・ボックス・コンポーネントのコードは、次のように表示されます。

<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>

ページを実行すると、ブラウザのページは次のように表示されます。

ブラウザに表示されたページ、ドロップ操作前

イメージをドラッグしてbeverage choices(飲料選択肢)リスト上にドロップします。ページ上の受入れ可能なドロップ領域にイメージをドラッグすると、コンポーネントの背景色が変化します。マウス・ボタンを放してイメージをリスト上にドロップすると、既存の選択肢リストに新しいアイテムCoffeeが追加されます。

ブラウザに表示されたページ、ドロップ操作後

ドロップ操作が正常に完了すると、ドロップ・ターゲットは部分的なページ・レンダリングによって再描画され、ドロップされた値がリスト・ボックスに表示されます。