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

ユーザー・インタフェースを作成するには、JSFページにJSF UIコンポーネントを追加します。この例では、ユーザー・インタフェースの設計に統合ツール(具体的にはコンポーネント・パレット、JSP/HTMLビジュアル・エディタおよびプロパティ・インスペクタ)の組合せを使用します。これらのツールの1つでページに変更を加えると、その変更は他のページにも反映されます。

この例では、コンポーネント・パレットを使用して、JSFコンポーネントである「入力テキスト」「コマンド・ボタン」および「出力テキスト」を選択し、ビジュアル・エディタにあるJSFページにドラッグ・アンド・ドロップします。JSFコンポーネントの追加を開始するには、コンポーネント・パレットのドロップダウン・リストから「JSF」を選択し、次に「HTML」パネルを開きます。

コンポーネント・パレット、JSF

ビジュアル・エディタのページを設計するときは、エディタ・ウィンドウの下部(エディタ・タブの「設計」および「ソース」の真上)にあるブレッドクラム・リンクを使用して、ページ上の既存のコンポーネントまたはタグを選択できます。エディタのブレッドクラム・リンクには、現在選択されているコンポーネントまたはタグからそのルートの親であるコンポーネントまたはタグまで戻るリンクのパスが表示されます。

ビジュアル・エディタ、JSFページ

エディタのブレッドクラム・リンクでコンポーネントまたはタグをクリックすると、JDeveloperでは、選択したコンポーネントまたはタグが青いアウトライン・ボックスとともにページに表示されます。ボックスの右上隅には、選択したコンポーネントまたはタグのドロップダウン・メニューがあります。このドロップダウン・メニューをクリックすると、選択したコンポーネントまたはタグに対して実行できるアクションのポップアップ・メニューが表示されます。

ビジュアル・エディタは「構造」ウィンドウとも完全に統合されています。JSFコンポーネントを挿入、コピーまたは移動するときは、ビジュアル・エディタまたは「構造」ウィンドウで、ターゲットとなるページ要素を基準にページ上の挿入ポイントを選択できます。JDeveloperにより、挿入ポイントがターゲット・コンポーネントの前、後または内側にあることを示す目印が表示されます。

コンポーネントを挿入した後、そのコンポーネントのプロパティを、必要に応じてコンポーネントのドロップ時に表示されるダイアログを使用して設定するか、または後でプロパティ・インスペクタを使用して設定できます。

アプリケーション・ページでは、JDeveloperに用意されているスタイル・シートまたは独自のスタイル・シートも使用できます。スタイル・シートは、ページの作成時にページに追加することも、後でページを編集して追加することもできます。ページにスタイル・シートを追加した後は、ヘッダー・テキストなどのページ上のテキストを、次のようなドロップダウン・リストから選択したスタイルに設定できます。

ビジュアル・エディタのツールバーにあるスタイル・ドロップダウン・リスト