詳細アイコン ユーザー・インタフェースの設計

JDeveloperには、JSFページにUIコンポーネントをドラッグ・アンド・ドロップできるコンポーネント・パレットが用意されています。現在使用可能なライブラリとコンポーネントを確認するには、コンポーネント・パレットのドロップダウン・リストをクリックします。モバイル機器用のユーザー・インタフェースを作成するには、ビジュアル・エディタでJSFページにApache MyFaces Trinidadコンポーネントを追加します。

コンポーネント・パレット、トリニダード・ページ

コンポーネントを挿入した後、プロパティ・インスペクタを使用するか、コンポーネントをドロップすると表示されるダイアログ(必要な場合)を使用して、コンポーネントのプロパティを設定します。

プロパティ・インスペクタ

ビジュアル・エディタは、「構造」ウィンドウやプロパティ・インスペクタなどの他の開発ツールと統合されています。これらの統合ツールを自由に併用してユーザー・インタフェースを設計できます。あるツールでページに変更を加えると、他のツールにも変更結果が反映されます。

ページのコンポーネントを挿入、コピーまたは移動する際には、ビジュアル・エディタまたは「構造」ウィンドウで、ターゲットとなるページ要素を基準にページ上の挿入ポイントを選択します。JDeveloperには、挿入ポイントをターゲット・コンポーネントの前、後または内側に指定するための目印が表示されます。

たとえば、次の「構造」ウィンドウの図は、挿入ポイントがフォーム・コンポーネント内のパネル・ヘッダー・コンポーネントの後にあることを示しています。

「構造」ウィンドウ、目印

次のビジュアル・エディタの図は、ターゲット・コンポーネントがフォームで、選択されているパネル・ヘッダー・コンポーネントの下に挿入ポイントがあることを示しています。

ビジュアル・エディタ、ターゲット・コンポーネント

ビジュアル・エディタでは、エディタ・ウィンドウの下部(エディタの「設計」および「ソース」タブのすぐ上)にブレッドクラムも用意されています。エディタのブレッドクラムには、現在選択されているコンポーネントからそのルートの親コンポーネントにさかのぼるコンポーネント名のパスが表示されます。パスの最後の名前(太字で表示)は現在選択されているコンポーネントで、最後の名前より前にある名前は親コンポーネントです。ブレッドクラムでコンポーネント名をクリックして、ページでそのコンポーネントを選択できます。