初めてのJava EE 6──第2回 プレゼンテーション層はJSFで作る

Oracle Java & Developers編集部
2014-04-30 15:00:00
  • このエントリーをはてなブックマークに追加

初めてJava EE開発に取り組む方に向けて、"Java EE開発のキホン"を解説している本企画。今回は、プレゼンテーション層を作るためのフレームワークであるJSFについて説明する。

 前回は、Java EE 6を例にとり、Java EEの概要を解説した。今回からは、Java EE 6の主要な機能であるJSF(JavaServer Faces)、EJB(Enterprise JavaBeans)、JPA(Java Persistence API)について、もう少し掘り下げて説明していこう。解説を担当するのは、日本オラクルでOracle WebLogic Serverをはじめとするミドルウェア製品のプリセールスに従事する松林晶氏(Fusion Middleware事業統括本部ソリューション本部 Cloud Application Foundationソリューション部 シニアセールスコンサルタント)だ。

Java EEのプレゼンテーション層を担うのはJSF。開発者が作るのは「XHTML」と「マネージドBean」


日本オラクル Fusion Middleware事業統括本部ソリューション本部 Cloud Application Foundationソリューション部 シニアセールスコンサルタントの松林晶氏

 前回は、Java EEがどのような仕様なのかを、構成要素となる各機能の概要と併せて説明しました。今回と次回は、それらの機能の中でも今後、特に重要となるJSF、EJB、JPAについて、皆さんが初めてJava EEアプリケーション開発に臨むうえで必要な基礎知識をもう少しだけ説明していきます。今回はJSFを取り上げましょう。

 第1回でも説明したように、JSFは、Java EEによる多階層システムのプレゼンテーション層を作るためのフレームワークです。プレゼンテーション層とは、アプリケーションを利用するユーザーに最も近い層であり、この層が画面表示や画面遷移を制御します。

 今日、簡易なWebアプリケーションの開発では、PHPが広く使われています。PHPでは、画面表示のためのコード(HTML)の中にプログラム・コードも書けるため、プレゼンテーション層だけで完結したアプリケーションを作ることができます(もっとも、最近はPHPでもCakePHPなどの各種フレームワークを利用し、MVC[Model-View-Controller]を意識した開発を行うケースが多いでしょう)。JSFでも、同様にプレゼンテーションだけで完結するWebアプリケーションを作ることが可能ですが、それはJSFの本来の狙いではありません。

 JSFでは、プレゼンテーション層にはビジネス・ロジック(アプリケーションに固有のデータ処理など)を書かず、次のようなWebアプリケーションの画面表示にかかわる処理だけを扱うことを基本コンセプトにしています。

  • どのようなレイアウトの画面を表示するか
  • 画面の構成要素であるボタンなどがクリックされた際、どの処理を呼び出すか
  • 処理の結果を受けて、どの画面に遷移するか

 そして前回も説明したように、皆さんがこれらの処理を定義するために作成するものが「XHTML」と「マネージドBean(Managed Bean)」になるわけです。それぞれに対して、どのような処理を定義するのかを下表にまとめました。

【JSFで開発者が主に作成する2つの要素「XHTML」と「マネージドBean】

要素記述する内容
XHTML画面レイアウトと、ユーザーが画面の構成要素(ボタンやリスト、フォームなど)を操作した際に呼び出す処理を指定する
マネージドBean画面に表示する値や、ユーザーが画面の構成要素を操作した際に呼び出す処理(例えば、ボタンがクリックされた際やフォームに値が入力された際に実行する処理)や、処理を行った後の遷移先を定義する

 XHMLTとマネージドBeanがどのように連携するのかについては、次の図をご覧ください。

 なお、マネージドBeanに記述するのは、あくまでも画面表示にかかわる処理のみである点にご注意ください。フォームなどで入力された値を使ってアプリケーションに固有の計算処理などを行うのはビジネス・ロジックの役割であり、それは次回に説明するEJBで開発します。

 それでは、実際に開発者が作るXHTMLとマネージドBeanについて、少し詳しく見ていきましょう。

XHTML──Webデザイナーが画面レイアウトを作り、その中に開発者がJSFタグを埋め込む

 XHTMLとは、W3Cが定めた、XMLをベースにしたWebページの記述言語です。JSFでは、このXHTMLで画面レイアウトを定義します。

 「XHTMLで定義する」と聞くと、馴染みのない方は戸惑われるかもしれません。しかし、心配しないでください。XHTMLは、XMLをベースにしているものの、その中身はHTMLとさほど変わりません。PHPでHTMLを使って画面レイアウトを書くのと同じような感覚で、画面を作ることができるのです。

 また、XHTMLでは、名前こそ少し違いますが、HTMLで使っていたボタンやリストなどの画面コンポーネントとほぼ同じものを使うことができます。

 ただし、画面レイアウトを担当するWebデザイナーの中には、まだXHTMLを使い慣れていない方もいらっしゃるでしょう。その場合は、扱い慣れたHTMLタグをベースに画面レイアウトを書き、それに開発者がjsfc属性を付加してXHTMLに変換することができます。このようにしてWebデザイナーが画面レイアウトを作り、それに対して開発者がJSFのタグを埋め込むかたちで「ユーザーが画面の構成要素を操作した際に呼び出す処理」を指定していくことで、両者がうまく協業することができるのです。

 次に示すのは、JSFタグを埋め込んだXHTMLの例です。この例で「f:」や「h:」という接頭辞を付けたタグがJSFタグになります。Webデザイナーが作成したXHTMLに、開発者がこれらのタグを追加することで、JSFアプリケーションのXHTMLが完成するわけです。

【リスト1:XHTMLの例】


<?xml version="1.0" encoding="windows-31j" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" />
  <title>SimplePage</title>
</head>
<body>
  <!-- ここからがJSFタグ -->
  <f:view>
    <h:form>
      <h:commandButton value="Display"
      action="#{simplePageBean.actionDisplay}" />
      <h:outputText value="#{simplePageBean.display}" />
    </h:form>
  </f:view>
  <!-- ここまでがJSFタグ -->
</body></html>


リスト1の実行結果

 また、Java EEに対応した統合開発環境の中には、開発画面上でコンポーネント(JSFのタグに対応したコンポーネント)をドラッグ&ドロップしていくことで、JSFアプリケーションの画面を開発できるものもあります。そうしたツールを使えば、多くの作業をビジュアルに行えるでしょう。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]