HOME / Docs & Support / NetBeans 6.0 / Web Application Documentation

ページフラグメント

このチュートリアルでは、NetBeans IDE 6.0 または 6.1 を使用して、2 つの JSF 1.2 (Woodstock) ページフラグメントコンポーネントを含むアプリケーションを作成します。一方のフラグメントには、アプリケーションのロゴを表示します。もう一方のフラグメントには、アプリケーション内のページ間を移動するためのリンクを表示します。

予想される所要時間: 20 分

このページの内容は NetBeans IDE 6.0 および 6.1 が対象です

ページフラグメントについて
ページフラグメントを含むページのデザイン
ヘッダーフラグメントの作成
ナビゲーションフラグメントの作成
2 ページ目へのフラグメントの追加
現在のページのリンクの無効化
その他の可能な操作: フッターフラグメントの追加
ページフラグメントの使用に関するヒント

このチュートリアルで使用している会社ロゴのサンプル

» sky.jpg

このチュートリアルに従うには、次のソフトウェアとリソースが必要です。

ソフトウェアまたはリソース	必須バージョン
NetBeans IDE	Web および Java EE の version 6.1 または 6.0
Java Development Kit (JDK)	version 6 または version 5
JavaServer Faces コンポーネント / Java EE プラットフォーム	1.2 と Java EE 5* または 1.1 と J2EE 1.4
GlassFish アプリケーションサーバー	V2
Travel データベース	任意

* NetBeans IDE の Java EE 5 機能を活用するためには、GlassFish アプリケーションサーバー V2 UR2 などの、Java EE 5 仕様に完全に準拠したアプリケーションサーバーを使用してください。別のサーバーを使用している場合は、「リリースノート」と「FAQ」で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。

NetBeans IDE 6.1 を使用している方へ

NetBeans 6.1 でプロジェクトを作成すると新しいオプションが含まれますが、これらのオプションはデフォルトのままでかまいません。たとえば、「ライブラリの格納用に専用フォルダを使用」チェックボックスは選択しないままにします。
NetBeans IDE 6.1 には、要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

ページフラグメントについて

ページフラグメントとは、ヘッダー、フッター、ナビゲーションバーなど、ほかのページで再利用できるページの一部分を指します。たとえば、グラフィックや検索フィールドなどの共通の要素をページフラグメントに入れて、そのフラグメントをアプリケーション内のすべてのページのヘッダーとして追加できます。また、会社名と著作権情報をページフラグメントに入れて、そのフラグメントをアプリケーションのフッターとして使用することもできます。ページフラグメントは、メインページと同様に、独自のページ Bean が関連付けられている JSP ページです。ただし、ページフラグメントのファイル拡張子は、jsp ではなく、jspf です。

ページフラグメントを含むページのデザイン

このチュートリアルでは、まずアプリケーションのホームページを作成します。次に、ヘッダーフラグメントとナビゲーションフラグメントを作成し、これらのフラグメントをホームページに追加します。

新しい Web アプリケーションプロジェクトを「FragmentExample」という名前で作成します。Visual Web JavaServer Faces フレームワークを有効にします。

次の図に、このあとの手順で作成するページを示します。
「パレット」の「レイアウト」セクションからページの左上隅に「ページフラグメントボックス」コンポーネントをドラッグします。
「ページフラグメントを選択」ダイアログが表示されます。
「新規ページフラグメントを作成」をクリックします。「名前」フィールドに「CompanyLogo」と入力し、「了解」をクリックします。
ページフラグメントがページに表示されます。ページフラグメントは、「プロジェクト」ウィンドウと、「ナビゲータ」ウィンドウの <div> ブロックにも追加されます。
「閉じる」をクリックして「ページフラグメントを選択」ダイアログを閉じます。
ビジュアルデザイナ内の点線は、ページフラグメントのサイズを示しています。デフォルトのサイズは、幅 400 ピクセル、高さ 200 ピクセルです。
ページの CompanyLogo ページフラグメントの下に、「ページフラグメントボックス」コンポーネントをもう 1 つ配置します。このページフラグメントには「Navigation」という名前を付けます。
「パレット」の「基本」セクションからページに「静的テキスト」コンポーネントをドラッグし、Navigation ページフラグメントの右側にドロップします。コンポーネントは、ページフラグメントの上ではなく、必ずページの上にドロップしてください。このコンポーネントのテキストを「Sky Company へようこそ」に変更します。
コンポーネントがない場所でビジュアルデザイナをクリックします。「プロパティー」ウィンドウで、「タイトル」プロパティーを「Sky Company ホーム」に変更します。

ヘッダーフラグメントの作成

この節では、図 2 に示す CompanyLogo フラグメントの内容を定義します。フラグメントの変更は、ページの中ではなく、フラグメント自体の中で行う必要があります。

会社ロゴのサンプルの JPEG ファイルをファイルシステムにまだ保存していない場合は、保存します。
ビジュアルデザイナで CompanyLogo フラグメントをダブルクリックして開きます。
白の背景はページフラグメントのサイズを示します。
「プロパティー」ウィンドウで、「幅」プロパティーを「720px」に設定し「高さ」プロパティーを「120px」に設定します。
「パレット」の「基本」セクションから左上隅のページフラグメントに「画像」コンポーネントをドラッグします。
画像の「プロパティー」ウィンドウで、「url」プロパティーの省略符号ボタン () をクリックします。次の手順に従って会社ロゴをページフラグメントに追加します。
1. ダイアログで、「ファイルを追加」をクリックします。
2. 会社ロゴ (sky.jpg) を保存したフォルダに移動し、画像を選択します。
3. 「ファイルを追加」をクリックします。画像がプロジェクトの resources ディレクトリにコピーされ、画像の相対 URL が表示されます。
4. 「閉じる」をクリックします。
必要に応じて、sky.jpg をクリックし、ページフラグメントの境界内にドラッグして配置します。
「Page1」タブをクリックして、CompanyLogo フラグメントの更新内容を表示します。必要に応じて、ページ上のコンポーネントのレイアウトを調整します。

ナビゲーションフラグメントの作成

この節では、次の図に示すナビゲーションフラグメントの内容を定義します。

注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

ビジュアルデザイナでナビゲーションフラグメントをダブルクリックして開きます。
「プロパティー」ウィンドウで、「幅」プロパティーを「150px」に設定し「高さ」プロパティーを「100px」に設定します。
「パレット」の「基本」セクションから、「ハイパーリンク」コンポーネントをドラッグし、ページフラグメント内にドロップします。ハイパーリンクのテキストを「ホーム」に設定します。
ハイパーリンクの「プロパティー」ウィンドウで、「id」プロパティーを「homeLink」に設定し、「url」プロパティーを「/faces/Page1.jsp」に設定します。
「ハイパーリンク」コンポーネントをもう 1 つページフラグメントにドラッグします。このコンポーネントのテキストを「社内報」に設定します。
ハイパーリンクの「id」プロパティーを「newsLink」に設定し、「url」プロパティーを「/faces/News.jsp」に設定します。
News ページは、次の節で作成します。

2 ページ目へのフラグメントの追加

この節では、ヘッダーフラグメントとナビゲーションフラグメントを含む 2 ページ目を作成します。このページに背景色を設定して、ページのスタイル設定がページフラグメントに継承されることを確認します。

「プロジェクト」ウィンドウで、「FragmentExample」>「Web ページ」ノードを右クリックし、「新規」>「Visual Web JSF ページ」を選択します。新規ページに「News」という名前を付け、「完了」をクリックします。

News ページがビジュアルデザイナで開きます。次の図に示すようなページをデザインします。
「Page1」タブをクリックします。このページにある「ページフラグメント」コンポーネントと「静的テキスト」コンポーネントを News ページにコピーします。
Page 1 の「ナビゲータ」ウィンドウで、Ctrl キーを押しながら、div 要素と「静的テキスト」コンポーネントの両方を選択します。このとき、jsp:directive.include 子要素だけでなく、必ず div 要素自体を選択してください。
選択内容を右クリックし、ポップアップメニューから「コピー」を選択します。
「News」タブをクリックします。
「ナビゲータ」ウィンドウで、「News」>「page1」>「html1」>「body1」ノードを展開します。「form1」を右クリックし、「ペースト」を選択します。Page1.jsp からコピーしたコンポーネントがビジュアルデザイナに表示されます。
静的テキストコンポーネントのテキストを「新 CEO 就任」に変更します。
News ページの空白の部分をクリックします。「プロパティー」ウィンドウで、「タイトル」プロパティーを「Sky Company ニュース」に変更します。
「背景」プロパティーの省略符号ボタン () をクリックし、色選択用ダイアログを使用して色を淡黄色に設定します。実行時に、「Sky Company ニュース」ページと「Sky Company ホーム」ページの間には明確な違いがあるのを確認できます。
News ページの背景色は、CompanyLogo フラグメントとナビゲーションフラグメントに継承されます。

注: NetBeans IDE 6.1 には要求時属性バインド機能があります。Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

現在のページのリンクの無効化

この節では、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」プロパティーを設定します。

ページフラグメントの使用に関するヒント

この節では、ページフラグメントを使用する際の考慮事項を示します。

このチュートリアルで使用した例では、「ハイパーリンク」コンポーネントを使用し、その「url」プロパティーを設定しました。この方法は簡単なのでお勧めします。この方法では、「immediate」プロパティーやページナビゲーションを設定する必要がありません。別の方法として、「ボタン」コンポーネントまたは「ハイパーリンク」コンポーネントを含むページフラグメントを作成し、その「action」プロパティーを設定することもできます。この方法の場合は、「immediate」プロパティーを設定し、フラグメントを使用する各ページのページナビゲーションを設定する必要があります。
ページが多数あり、ボタンとハイパーリンクのナビゲーション結果が各ページで同じである場合は、ページナビゲーションエディタを使用せずに、ページナビゲーションのソースファイルを編集する方法もあります。ソースファイルを編集するには、ページナビゲーションエディタのツールバーにある「XML」ボタンをクリックします。ソースエディタで、<from-view-id> タグのあとの特定のページ名 (/Page1.jsp など) を /* などのワイルドカード値に置き換えます。
このチュートリアルで示したとおり、ページフラグメントの高さと幅を指定するときは、ピクセル単位 (100px など) を使用するのが最適です。パーセンテージ (100% など) は Firefox Web ブラウザでは正常に機能しますが、Internet Explorer 6.0 では機能しません。