IDE内

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

XMLソース・エディタでは、入力コンポーネントのコードは次のように表示されます。

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

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

イメージをドラッグしてみてください。 イメージをドラッグすると、ドラッグの対象のイメージ上に斜線の入った円が表示されることに注意してください。 これは、マウス・カーソルの位置が、イメージをドロップできるページ内領域の上ではないことを示しています。

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

マウス・ボタンを離すと、 Cup入力フィールドに Coffeeという単語が表示されます。