< 前へ | 次へ >

演習 5: Web ページの作成

この演習では、Faces JSP ファイルの形式で、Web ページを作成します。 次の演習では、前の演習で作成したデータ・パーツや関数を使用して、このページにデータを追加します。 ページが完成すると、データベース上のすべてのレコードのリストが表示されます。

このチュートリアルでは、JavaServer Faces (JSF) テクノロジーを使用します。JSF は、Web アプリケーションのユーザー・インターフェースを開発するためのフレームワークを提供します。 JSF での Web ページは、JavaServer Page (JSP) です。JSP には、JavaServer コントロールが存在します。これを使用して、ページに Java コードを埋め込み、動的コンテンツを実現できます。

テンプレートからの JSP ファイルの作成

  1. 「エンタープライズ・エクスプローラー」ビューで、EGLWeb プロジェクトの WebContent フォルダーを右クリックし、「新規作成」 > 「Web ページ」とクリックします。 新しいファイルを保存する場所を選択する際は、注意してください。慎重に行わないと、意図する場所で新規ファイルが見つからなくなってしまう場合があります。 「新規 Web ページ」ウィンドウが開きます。
  2. 「ファイル名」フィールドに、次のファイル名を入力します (拡張子を含む)。
    allcustomers.jsp
  3. 「フォルダー」 フィールドに、/EGLWeb/WebContent フォルダーがリストされたことを確認します。
  4. 「テンプレート」 リストで、「サンプル・テンプレート」を 展開して、「ファミリー A (ナビゲーションなし)」を クリックします。 このカテゴリーの単純な Web ページ・テンプレートが、「プレビュー」ボックスに表示されます。
  5. 「プレビュー」ボックスで、「A_gray.htpl」テンプレートをクリックします。
  6. 「テンプレートへのページのリンク」チェック・ボックスが選択されていることを確認します。

    「新規 Web ページ」ウィンドウは、 次のようになります。

    「新規 Faces JSP ファイル」の画面

  7. 「終了」をクリックします。 新規 Faces JSP ファイルが、エディターで開きます。
  8. 「設計」をクリックして、すべてのエディターのウィンドウで「設計」ビューを表示します。 エディター・ウィンドウの右側に「JSF トレース (JSF Trace)」ビューが表示される場合があります。 Eclipse では、「パレット」ビューやその他のビューとスペースを共有する形で、このビューがデフォルトで作成されます。 このチュートリアルに「JSF トレース (JSF Trace)」ビューは必要ありません。 タブの X をクリックすることで、これを閉じることができます。
    「JSF トレース (JSF Trace)」ビューには、黄色い三角形の警告が表示されることがあります。
    通常、このビューでは「パレット」を表示することが多くなります。 小さな二重矢印をクリックして、メニューから「パレット」ビューを選択する必要がある場合があります。
    「パレット」ビューの選択。
  9. 新しい allcustomers.jsp ファイルで、「ページ内容をここに配置してください (Place your page content here)」というデフォルト・テキストを削除し、以下のテキストに置き換えます。
    List of all customers
  10. Enter キーを 3 回押してブランク行を挿入します。 これらの行を挿入しておくことによって、次の演習でこのページにコンテンツを追加するための場所を確保します。

    このページは、 次のようになります。

    ページの外観

  11. ファイルを保存します。

サーバー上での Web ページのプレビュー

Web ページにはまだデータベースからのデータはありませんが、 Web アプリケーション・サーバーで JSP ファイルを実行して ページがどのように表示されるかを確認することができます。これは重要なステップです。このステップにより、ページが複雑になる前に、アプリケーション・サーバーが適切に機能していることを確実にできます。
  1. アプリケーション・サーバーが始動していることを確認します。サーバー名が、「サーバー」ビュー (デフォルトでは「エディター」ビューの下) に表示されます。 サーバー名の後ろに、大括弧で囲まれた「始動済み、同期済み (Started, Synchronized)」という語が表示されているはずです。 このようになっていない場合、サーバー名を右クリックして、「始動」をクリックします。始動プロセスには、数分かかる場合があります。
    WebSphere Application Server が始動および同期されている
  2. 「エンタープライズ・エクスプローラー」ビューで、必要に応じて EGLWeb/WebContent フォルダーを展開します。 allcustomers.jsp ファイルを右クリックし、「実行」 > 「サーバーで実行」とクリックします。 「新規サーバーの定義」ウィンドウが開きます。
  3. 「新規サーバーの定義」ウィンドウで、ご使用のサーバーを選択します。
  4. 「このプロジェクトを実行するときは、このサーバーを常に使用」チェック・ボックスを選択します。
    選択されたサーバー。
  5. 「終了」をクリックします。

ワークベンチ内の Web ブラウザーで Web ページが開きます。 このページは次のようになります。

内部 Web ブラウザーでのこのページの外観

HTTP 404 エラー・メッセージ (page not found) が表示された場合は、サーバーを再始動して、ブラウザー・ウィンドウを更新してください。

外部の Web ブラウザーを使用したい場合は、ワークベンチ内の Web ブラウザーから URL を コピーして、その URL を外部ブラウザーのアドレス・フィールドに貼り付けることができます。

Eclipse により、再度「JSF トレース (JSF Trace)」ビューが表示されることがあります。 「今後は開きません (Do not open it again)」というリンクが表示されるまでスクロールダウンし、そのリンクをクリックすると、このビューをそれ以降表示されないように除去することができます。
「JSF トレース (JSF Trace)」ビューの処理オプション。

このページには、まだ何のデータも含まれていません。 次の演習では、EGL を使用してこのページにデータを追加します。

< 前へ | 次へ >

フィードバック