ページフラグメント
執筆: Visual Web Pack チュートリアルチーム
| 2007 年 5 月 [Revision number: V5.5.1-1] |
|
|
このチュートリアルでは、NetBeans Visual Web Pack 5.5 統合開発環境 (IDE) を使用して、2 つのページフラグメントを含むアプリケーションを作成します。一方のフラグメントには、アプリケーションのロゴを表示します。もう一方のフラグメントには、アプリケーション内のページ間を移動するためのリンクを表示します。 |
目次
|
|
 |
このチュートリアルでは、次のテクノロジとリソースを使用します。
JavaServer Faces コンポーネント /
Java EE プラットフォーム |
 Java EE 5* の場合、1.2
J2EE 1.4 の場合、1.1
|
| Travel データベース |
 任意 |
| BluePrints AJAX コンポーネントライブラリ |
任意 |
* このチュートリアルの公開時点で Java EE 5 をサポートしていたのは Sun Java System Application Server だけです。
このチュートリアルは、Sun Java System Application Server PE 9.0 Update Release 1 と Tomcat 5.5.17 を使用することを想定しています。別のサーバーを使用している場合は、「リリースノート」と「FAQ」(または「日本語 FAQ」) で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。
ページフラグメントについて
ページフラグメントとは、ヘッダー、フッター、ナビゲーションバーなど、ほかのページで再利用できるページの一部分を指します。たとえば、グラフィックや検索フィールドなどの共通の要素をページフラグメントに入れて、そのフラグメントをアプリケーション内のすべてのページのヘッダーとして追加できます。また、会社名と著作権情報をページフラグメントに入れて、そのフラグメントをアプリケーションのフッターとして使用することもできます。ページフラグメントは、メインページと同様に、独自のページ Bean が関連付けられている JSP ページです。ただし、ページフラグメントのファイル拡張子は、jsp ではなく、jspf です。
ページフラグメントを含むページのデザイン
このチュートリアルでは、まずアプリケーションのホームページを作成します。次に、ヘッダーフラグメントとナビゲーションフラグメントを作成し、これらのフラグメントをホームページに追加します。
-
新しい Visual Web アプリケーションプロジェクトを「FragmentExample」という名前で作成します。
図 1 に、このあとの手順で作成するページを示します。
 図 1:アプリケーションのホームページ |
-
「パレット」の「レイアウト」セクションからページの左上隅に「ページフラグメントボックス」コンポーネントをドラッグします。
「ページフラグメントを選択」ダイアログが表示されます。
-
「新規ページフラグメントを作成」をクリックします。「名前」フィールドに「CompanyLogo」と入力し、「了解」をクリックします。
ページフラグメントがページに表示されます。ページフラグメントは、「プロジェクト」ウィンドウと、「アウトライン」ウィンドウの <div> ブロックにも追加されます。
-
「閉じる」をクリックして「ページフラグメントを選択」ダイアログを閉じます。
ビジュアルデザイナー内の点線は、ページフラグメントのサイズを示しています。デフォルトのサイズは、幅 400 ピクセル、高さ 200 ピクセルです。
- ページの CompanyLogo ページフラグメントの下に、「ページフラグメントボックス」コンポーネントをもう 1 つ配置します。このページフラグメントには「
Navigation」という名前を付けます。
- 「パレット」の「基本」セクションからページに「静的テキスト」コンポーネントをドラッグし、Navigation ページフラグメントの右側にドロップします。コンポーネントは、ページフラグメントの上ではなく、必ずページの上にドロップしてください。このコンポーネントのテキストを「Sky Company へようこそ
- コンポーネントがない場所でビジュアルデザイナーをクリックします。「プロパティー」ウィンドウで、「タイトル
Sky Company ホーム」に変更します。
ヘッダーフラグメントの作成
この節では、図 2 に示す CompanyLogo フラグメントの内容を定義します。フラグメントの変更は、ページの中ではなく、フラグメント自体の中で行う必要があります。
図 2:CompanyLogo ページフラグメント |
- 会社ロゴのサンプルの JPEG ファイルをファイルシステムにまだ保存していない場合は、保存します。
-
ビジュアルデザイナーで CompanyLogo フラグメントをダブルクリックして開きます。
白の背景はページフラグメントのサイズを示します。
- 「プロパティー」ウィンドウで、「
幅」プロパティーを「720px」に設定し「高さ」プロパティーを「120px」に設定します。
- 「パレット」の「基本」セクションから左上隅のページフラグメントに「画像」コンポーネントをドラッグします。
-
画像の「プロパティー」ウィンドウで、「url」プロパティーの省略符号ボタン (...) をクリックします。次の手順に従って会社ロゴをページフラグメントに追加します。
- ダイアログで、「ファイルを追加」をクリックします。
- 会社ロゴ (
sky.jpg) を保存したフォルダに移動し、画像を選択します。
- 「ファイルを追加」をクリックします。画像がプロジェクトの resources ディレクトリにコピーされ、画像の相対 URL が表示されます。
- 「了解」をクリックします。
- 必要に応じて、
sky.jpg をクリックし、ページフラグメントの境界内にドラッグして配置します。
- 「Page1」タブをクリックして、CompanyLogo フラグメントの更新内容を表示します。必要に応じて、ページ上のコンポーネントのレイアウトを調整します。
ナビゲーションフラグメントの作成
この節では、図 3 に示すナビゲーションフラグメントの内容を定義します。
図 3:Navigation フラグメント |
- ビジュアルデザイナーでナビゲーションフラグメントをダブルクリックして開きます。
- 「プロパティー」ウィンドウで、「
幅」プロパティーを「150px」に設定し「高さ」プロパティーを「100px」に設定します。
- 「パレット」の「基本」セクションから、「ハイパーリンク」コンポーネントをドラッグし、ページフラグメント内にドロップします。ハイパーリンクのテキストを「ホーム
- ハイパーリンクの「プロパティー」ウィンドウで、「
id」プロパティーを「homeLink」に設定し、「url」プロパティーを「/faces/Page1.jsp」に設定します。
- 「ハイパーリンク」コンポーネントをもう 1 つページフラグメントにドラッグします。このコンポーネントのテキストを「社内報
-
ハイパーリンクの「id」プロパティーを「newsLink」に設定し、「url」プロパティーを「/faces/News.jsp」に設定します。
News ページは、次の節で作成します。
2 ページ目へのフラグメントの追加
この節では、ヘッダーフラグメントとナビゲーションフラグメントを含む 2 ページ目を作成します。このページに背景色を設定して、ページのスタイル設定がページフラグメントに継承されることを確認します。
-
「プロジェクト」ウィンドウで、「FragmentExample」>「Web ページ」ノードを右クリックし、「新規」>「ページ」を選択します。新規ページに「News」という名前を付け、「完了」をクリックします。
News ページがビジュアルデザイナーで開きます。図 4 に示すようなページをデザインします。
 図 4: News ページ |
- 「Page1」タブをクリックします。このページにある「ページフラグメント」コンポーネントと「静的テキスト」コンポーネントを News ページにコピーします。
- 「アウトライン」ウィンドウで、Ctrl キーを押しながら、
div 要素と「静的テキスト」コンポーネントの両方を選択します。このとき、jsp:directive.include 子要素だけでなく、必ず div 要素自体を選択してください。
- 選択内容を右クリックし、ポップアップメニューから「コピー」を選択します。
- 「News」タブをクリックします。
- 「アウトライン」ウィンドウで、「News」>「page1」>「html1」>「body1」ノードを展開します。「
form1」を右クリックし、「ペースト」を選択します。Page1.jsp からコピーしたコンポーネントがビジュアルデザイナーに表示されます。
- 静的テキストのテキストを「新 CEO 就任
- News ページの空白の部分をクリックします。「プロパティー」ウィンドウで、「タイトル
Sky Company ニュース」に変更します。
-
「背景
News ページの背景色は、CompanyLogo フラグメントとナビゲーションフラグメントに継承されます。
現在のページのリンクの無効化
この節では、Page1 ページの「ホーム」リンクと News ページの「社内報」リンクを無効にするコードを追加します。
- 「Page1」タブをクリックし、ページの Java ソースコードを表示します。
-
prerender メソッドに次のコードを追加します。
| コード例 1:現在のページのリンクを無効にするコード |
public void prerender() {
Navigation navigationFragmentBean = (Navigation)getBean("Navigation");
Hyperlink homeLink = navigationFragmentBean.getHomeLink();
homeLink.setDisabled(true);
} |
-
Java エディタを右クリックし、「インポートを修正」を選択します。IDE によって次のインポート文が追加されます。
import com.sun.webui.jsf.component.Hyperlink;
- 「News」タブをクリックし、ページの Java ソースコードを表示します。
-
prerender メソッドに次のコードを追加します。
| コード例 2:現在のページのリンクを無効にするコード |
public void prerender() {
Navigation navigationFragmentBean = (Navigation)getBean("Navigation");
Hyperlink newsLink = navigationFragmentBean.getNewsLink();
newsLink.setDisabled(true);
} |
-
Java エディタを右クリックし、「インポートを修正」を選択します。IDE によって次のインポート文が追加されます。
import com.sun.webui.jsf.component.Hyperlink;
-
アプリケーションを実行します。
「ホーム」リンクと「社内報」リンクが正常に動作することを確認します。
その他の可能な操作:フッターフラグメントの追加
このチュートリアルでは、簡単な 2 ページ構成のアプリケーションでページフラグメントを使用する方法を示しました。実際のアプリケーションには、さらに多くのページがあります。
試してみましょう。 FragmentExample アプリケーションに 3 ページ目を追加してみてください。Navigation ページフラグメントに別の「ハイパーリンク」コンポーネントを追加し、ハイパーリンクの「url」プロパティーを設定します。
試してみましょう。 ページフラグメントは、会社の著作権情報の表示にも使用できます。各ページの下部に、幅 720px、高さ 100px のページフラグメントを追加してみてください。「Copyright 1994-2006 Sky Company」などの著作権情報を記述します。
ページフラグメントの使用に関するヒント
この節では、ページフラグメントを使用する際の考慮事項を示します。
更新日: 2007 年 5 月 24 日
