2. Webアプリケーションの開発

2.1. チュートリアル

Developer's StudioはWebアプリケーションの作成を支援します。ここでは、Developer's Studioを利用して、Webページに入力した文字列を表示する簡単なWebアプリケーションの開発手順を説明します。

2.1.1. Webアプリケーションの作成

MVC2モデルに従うと、データベースやEJBなどはModel層で利用することになり、View層では利用しません。View層では、WTPを利用して、スタンドアロンWebアプリケーションを作成することができます。

Memo
MVC2とはMVCアーキテクチャをWebアプリケーションに適用したものです。JSP Model 2アーキテクチャとも呼ばれています。

2.1.1.1. Webプロジェクトの作成

Memo
Webプロジェクトとは、Developer's Studio での、Webアプリケーション作成用のプロジェクトです。

メニュー ファイル新規プロジェクト を選択して 新規プロジェクト画面を表示します。


図2.1.1.1-1

新規プロジェクト画面のWebを開き、動的Webプロジェクトを選択して、次へ をクリックします。


図2.1.1.1-2

プロジェクト名HelloSampleを入力します。ターゲット・ランタイムWebOTX Application Server v9(Local Default)を指定して、完了をクリックします。
ターゲット・ランタイムの指定方法は[ アプリケーション開発ガイド(概要) > 1. Developer(with Developer's Studio) > 1.2. 環境設定 > 1.2.4. テスト用サーバの設定 > 1.2.4.1. WebOTXランタイムの設定 ] をご覧ください。


図2.1.1.1-3

Memo
関連付けられたパースペクティブを開きますか? というダイアログが表示された場合は はいJava EEパースペクティブを開くことをお勧めします。(常にJava EEパースペクティブを利用する場合は 常にこの設定を使用するをONにしてください。)


図2.1.1.1-4

作成した動的Webプロジェクトに実行支援ライブラリを追加するため、Javaパースペクティブに切り替えます。
ウィンドウ > パースペクティブを開く >Java を選択します。


図2.1.1.1-5

Memo
実行支援ライブラリを利用する場合は、Javaパースペクティブである必要があります。

HelloSampleプロジェクトを選択して、右クリックメニュー Webプロジェクト > 支援ライブラリの追加 を選択します。


図2.1.1.1-6

利用するライブラリの選択からWebアプリケーション実行支援ライブラリONにして完了をクリックします。


図2.1.1.1-7

2.1.1.2. 入力画面用HTMLファイルの作成

Memo
下図は、Java EEパスペクティブ(プロジェクト・エクスプローラー)の場合です。

HelloSampleプロジェクトを選択して、右クリックメニュー 新規その他 を選択して新規ウィザード選択画面を表示します。


図2.1.1.2-1

選択画面からWebを開き、HTMLファイル を選択して、次へ をクリックします。


図2.1.1.2-2

ツリーからWebContentを選択して、ファイル名hello.htmlを入力し、完了 をクリックします。
WebContentはコンテンツを格納するディレクトリです。


図2.1.1.2-3

Webページ・エディターは、HTML部品をドラッグ・アンド・ドロップで追加することができる、非常に便利なWebページ編集ツールです。本章ではWebページ・エディターを使ってWebページを編集します。
プロジェクトエクスプローラーのhello.html上で右クリックし、アプリケーションから開くWebページ・エディター を選択します。


図2.1.1.2-4

<title>タグのInsert title hereHelloに変更します。


図2.1.1.2-5

右上のパレットのHTML4.0からFormをクリックして、エディター上部のここにWebページ・コンテンツをドラッグ・アンド・ドロップのところにドラッグ・アンド・ドロップします。


図2.1.1.2-6

すると、上下のエディターにフォームが追加されます。


図2.1.1.2-7

アウトライン・ビューのformのところで、右クリックメニュー 属性の追加accept-onkeypressmethod を選択します。


図2.1.1.2-8

<form>の属性methodが追加されます。methodの値を選択して、Ctrl+Spaceをクリックして、postを選択します。


図2.1.1.2-9

アウトライン・ビューのformをクリックして、右クリックメニュー 属性の追加accept-onkeyupaction を選択します。


図2.1.1.2-10

action属性の値にHelloServletを入れます。


図2.1.1.2-11

パレットからText Fieldをクリックしてformにドラッグ・アンド・ドロップします。


図2.1.1.2-12

Text Field により追加された、<input>タグの前にInput your name: と、入力します。


図2.1.1.2-13

アウトライン・ビューのinputのところで右クリックメニュー 属性の追加onselect-widthtype を選択します。


図2.1.1.2-14

typeの値がtextであることを確認します。次に、アウトライン・ビューのinputのところで右クリックメニュー 属性の追加name-onmouseupname を選択します。


図2.1.1.2-15

nameの値にnameを入力します。


図2.1.1.2-16

それから、アウトライン・ビューのinputのところで右クリックメニュー 属性の追加readonly-widthsize を選択します。sizeの値は20を入力します。


図2.1.1.2-17

パレットからButtonをクリックしてText Fieldの後ろにドラッグ・アンド・ドロップします。


図2.1.1.2-18

submitボタンが追加されます。


図2.1.1.2-19

アウトライン・ビューのinputのところで右クリックメニュー 属性の追加onselect-widthvalue を選択します。


図2.1.1.2-20

valueの値はHelloを入力します。


図2.1.1.2-21

最後にhello.htmlを以下に確認します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
    <title>Hello</title>
  </head>
  <body>
    <form method="post" action="HelloServlet">
        Input your name: <input type="text" name="name"
            size="20"><input type="submit" value="Hello">
    </form>
  </body>
</html>

Memo
赤色部分が、修正あるいは追加する個所です。

2.1.1.3. 出力画面用JSPファイルの作成

プロジェクト・エクスプローラーでHelloSampleプロジェクトを選択して、右クリックメニュー 新規JSP を選択します。


図2.1.1.3-1

ツリーからWebContent(コンテントディレクトリ)を選択して、ファイル名hello.jspを入力し、完了 をクリックします。


図2.1.1.3-2

hello.jspファイルのところで、右クリックメニュー アプリケーションから開くWebページ・エディター を選択します。


図2.1.1.3-3

<title>タグでInsert title hereHelloに変更します。


図2.1.1.3-4

パレットからJSPのUseBeanをクリックして、下図で示した %> の直後にクリックします。


図2.1.1.3-5

上下のエディターにjsp:useBeanタグが追加されます。


図2.1.1.3-6

useBeanのところ右クリックメニュー 表示プロパティー を選択すると、プロパティーが表示されます。


図2.1.1.3-7

プロパティー・ビューでidの値はhelloBeanを入力して、scopeの値はrequestを選択して、typeの値はcom.nec.webotx.webapp.tutorial.HelloBeanを入力します。


図2.1.1.3-8

ここにWebページ・コンテンツをドラッグ・アンド・ドロップHelloを入力して、パレットからGetPropertyをクリックして、上のエディターのHelloの後ろにドラッグ・アンド・ドロップします。


図2.1.1.3-9

プロパティー・ビューでnameの値はhelloBeanを入力して、propertyの値はnameを入力します。


図2.1.1.3-10

パレットからHTML4.0のLine Breakをクリックして、上のエディターのgetPropertyの後ろにドラッグ・アンド・ドロップします。


図2.1.1.3-11

改行の後ろにYour score is .を入力して、前の操作のようにgetPropertyをピリオドの前に追加します。


図2.1.1.3-12

プロパティー・ビューでnameの値はhelloBeanを入力して、propertyの値はscoreを入力します。


図2.1.1.3-13

また、改行(Line Break)を追加して、パレットからLinkをクリックして、上のエディターの改行の後ろにドラッグ・アンド・ドロップします。


図2.1.1.3-14

プロパティー・ビューでhrefの値はhello.htmlを入力します。


図2.1.1.3-15

それから、<a>のタグの間にGoodbye!を入力します。


図2.1.1.3-16

directive.pageの後ろから<%@ taglib uri="/WEB-INF/otxjsptag.tld" prefix="otxjsp" %>を入力します。


図2.1.1.3-17

パレットからFormをクリックして、以下で示すようにドラッグ・アンド・ドロップします。<form>タグの間に<otxjsp:CheckData/>を入力します。


図2.1.1.3-18

生成されたhello.jspは以下の通りになります。
<%@ page language="java" contentType="text/html; charset=windows-31j"
        pageEncoding="windows-31j"%>
<%@ taglib uri="/WEB-INF/otxjsptag.tld" prefix="otxjsp" %>
<jsp:useBean id="helloBean" scope="request"
        type="com.nec.webotx.webapp.tutorial.HelloBean"></jsp:useBean>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
    <title>Hello</title>
  </head>
  <body>
  
    Hello<jsp:getProperty name="helloBean" property="name" /><br>
    Your score is 
    <jsp:getProperty name="helloBean" property="score" />.
    <br>
    <a href="hello.html">Goodbye!</a>
    <form><otxjsp:CheckData/></form>
  </body>
</html>

Memo
赤色部分が、修正あるいは追加する箇所です。

Memo
1行目のpageEncodingの値はJSPファイルのエンコード形式を示すため、エディタのテキストファイルエンコードの設定により変動します。

2.1.1.4. ロジックの作成

HelloSampleプロジェクトを選択して、右クリックメニュー 新規クラス を選択します。


図2.1.1.4-1

新規Javaクラス画面で、パッケージcom.nec.webotx.webapp.tutorialを入力して、名前HelloModelを入力し、完了 をクリックします。


図2.1.1.4-2

生成されたHelloModelクラスに赤で示すメソッドの記述を追加し保存します。
package com.nec.webotx.webapp.tutorial;

public class HelloModel
{
  public int getScore(String name) {
    int sum = 0;
    char[] cArray = name.toCharArray();
    for (int i = 0; i < cArray.length; i++) {
      sum += cArray[i];
    }
    return (sum % 10) + 1;
  }
}

Memo
ここでのビジネスロジックは、名前から1〜10までの点数を取得するといった処理を行っています。

Memo
ビジネスロジック用のクラスは、サーブレット用APIをimportしない汎用的なクラスとして作成する事が望ましいです。

2.1.1.5. ロジックに渡すオブジェクトの作成

HelloSampleプロジェクトを選択して右クリックメニュー 新規クラス を選択します。


図2.1.1.5-1

新規Javaクラス画面で、パッケージcom.nec.webotx.webapp.tutorialを入力して、名前HelloBeanを入力して、 完了 をクリックします。


図2.1.1.5-2

生成されたHelloBeanクラスにString型のnameと、int型のscoreフィールドを追加します。
package com.nec.webotx.webapp.tutorial;

public class HelloBean{

  private String name;

  private int score;
}
ソースの中にフォーカスを移動させ、メニュー ソースGetterおよびSetterの生成 を選択します。


図2.1.1.5-3

すべて選択をクリックして、ツリーの要素が全てON にすることを確認した後、OK をクリックします。


図2.1.1.5-4

HelloBeanクラスのコードが以下の通りになっている事を確認して保存します。
package com.nec.webotx.webapp.tutorial;

public class HelloBean {

  private String name;

  private int score;

  public String getName() {
     return name;
  }
  
  public void setName(String name) {
    this.name = name;
  }
  
  public int getScore() {
    return score;
  }

  public void setScore(int score) {
    this.score = score;
  }
}

Memo
このBeanはServlet(MVCのControl)とJSP(MVCのView)とのインタフェースとなります。

2.1.1.6. サーブレットの作成

プロジェクト・エクスプローラーでHelloSampleプロジェクトを選択して、右クリックメニュー 新規サーブレット を選択して、サーブレット作成 画面を表示します。


図2.1.1.6-1

Javaパッケージcom.nec.webotx.webapp.tutorialを入力し、クラス名HelloServletを入力し、次へ をクリックします。


図2.1.1.6-2

名前HelloServlet、URLに/HelloServletが入っていることを確認して、 次へ をクリックします。


図2.1.1.6-3

メソッドdoGet()をOFFにして、 修飾子public」、 メソッドスタブスーパークラスからのコンストラクター」、「継承された抽象メソッド」、メソッドの「doPost()」をONにすることを確認して、 完了 をクリックします。


図2.1.1.6-4

生成されたHelloServlet.javaのdoPostメソッドを赤文字で実装して保存します。
package com.nec.webotx.webapp.tutorial;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class HelloServlet
 */
@WebServlet("/HelloServlet")
public class HelloServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  /**
   * @see HttpServlet#HttpServlet()
   */
  public HelloServlet() {
      super();
      // TODO Auto-generated constructor stub
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    request.setCharacterEncoding("windows-31j");
    response.setContentType("text/html;charset=windows-31j");

    HelloModel model = new HelloModel();

    //リクエストパラメータからnameの値を取得
    String name = request.getParameter("name");

    //ビジネスロジックを実装
    int score = model.getScore(name);

    //Beanを利用
    HelloBean bean = new HelloBean();

     
    bean.setName(name);
    bean.setScore(score);

    //リクエストにhelloBeanという名前でBeanを設定
    request.setAttribute("helloBean", bean);

    //hello.jspへforwardする
    request.getRequestDispatcher("/hello.jsp").forward(request, response);
  }

}

2.1.2. Webアプリケーションのデプロイ

HelloSampleプロジェクトを選択し、右クリックメニュー の 実行サーバーで実行 を選択します。


図2.1.2-1

初めてサーバーを選択する場合、手動で新規サーバーを定義を選択して、 次へ をクリックします。
サーバーの設定を行っていない場合、WebOTXマニュアル1.2.4.1. WebOTXランタイムの設定 を参照の上、設定を行ってください。


図2.1.2-2

サーバーユーザー名adminサーバーパスワードadminadmin(初期状態の場合)を入力して、ユーザードメインポート6212(初期状態の場合)になっていることを確認して、 完了 をクリックします。


図2.1.2-3

Memo
配備されたWebアプリケーションの確認は、メニュー ウィンドウビューの表示その他からサーバーサーバーを選択してサーバービューを表示して確認してください。

Memo
再配備したい場合は、対象サーバー上で右クリックメニュー公開を選択してください。

2.1.3. Webアプリケーションの実行

Webブラウザを起動し以下のURLへアクセスします。
http://localhost/HelloSample/hello.html


図2.1.3-1

hello.htmlの画面が表示されたら名前を入力してHelloをクリックします。


図2.1.3-2

入力した名前の点数が表示されます。
Goodbye!をクリックすると最初の画面に戻ります。


図2.1.3-3

2.1.4. JSFアプリケーションの作成

JSF を利用したアプリケーションの作成について説明します。
まずは、複利計算を行う簡単なアプリケーションの作成を通し、 の作成方法について説明します。

その後、Ajax 連携機能を用いた性能改善の方法について説明します。

2.1.4.1. Webプロジェクトの作成

メニューファイル新規プロジェクトで、Web動的Webプロジェクトを選択して、次へをクリックし、 以下のように指定します。


図2.1.4.1-1

表2.1.4.1-1
プロジェクト名 JSF20Sample
ターゲット・ランタイム WebOTX Application Server v9(Local Default)
構成 JavaServer Faces v2.0 Project
次へで画面を進め、JSF実装ライブラリーライブラリー構成を無効を選択して、完了をクリックします。


図2.1.4.1-2

Memo
ライブラリ構成を無効にする指定は、Webコンテナが保有する、JSF2.0 のライブラリを利用する事を意味します。
それ以外のライブラリを利用する場合は、ここで指定します。その手順については、 [2.1.8. 他バージョンの JSF の開発]をご覧ください。

2.1.4.2. ManagedBeanの作成

JSF20Sampleプロジェクトで右クリック > 新規 > クラスを選択して、以下のように指定して、終了をクリックします。


図2.1.4.2-1

表2.1.4.2-1
パッケージ com.nec.webotx.jsf.tutorial
名前 InputBean
アノテーション @ManagedBeanの追加
生成されたInputBeanクラスのクラス名の直前に、@を入力し、'Ctrl + Space'を押下して、@ManagedBean - javax.faces.beanを選択します。


図2.1.4.2-2

アノテーション@ManagedBeanが追加されます。


図2.1.4.2-3

フィールドの追加
InputBeanクラスにint型のcapitalyearinterestおよびdouble型のrateフィールドを追加してください。
package com.nec.webotx.jsf.tutorial;

@ManagedBean
public class InputBean {
    private int capital = 1000;
    private int year = 1;
    private double rate = 0.1;
    private int interest;
}
Setter/Getterの追加
メニュー ソースGetterおよびSetterの生成 を選択します。


図2.1.4.2-4

すべて選択をクリックして、OK をクリックします。


図2.1.4.2-5

InputBean.javaにGetterおよびSetterが追加されます。
package com.nec.webotx.jsf.tutorial;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class InputBean {
    private int capital = 1000;
    private int year = 1;
    private double rate = 0.1;
    private int interest;

    public int getCapital() {
        return capital;
    }

    public void setCapital(int capital) {
        this.capital = capital;
    }

    public int getYear() {
        return year;
    }

    public void setYear(int year) {
        this.year = year;
    }

    public double getRate() {
        return rate;
    }

    public void setRate(double rate) {
        this.rate = rate;
    }

    public int getInterest() {
        return interest;
    }

    public void setInterest(int interest) {
        this.interest = interest;
    }
}
メソッド count() の追加
InputBeanクラスに利息の複利演算メソッドcount()の記述を追加し保存します。
    public String count() {
        double interestValue = capital * (Math.pow(rate / 100 + 1, year) - 1);
        this.interest = (int) Math.round(interestValue);
        return "input";
    }

Caution
count()メソッドの返却値には、処理後の遷移先ページ名前を指定します。 後述のinput.xhtmlへ遷移させるので、ファイル名inputを返却値とします。(拡張子.xhtmlは省略します。)

以下が、InputBean.java の内容です。
package com.nec.webotx.jsf.tutorial;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class InputBean {
    private int capital = 1000;
    private int year = 1;
    private double rate = 0.1;
    private int interest;

    public int getCapital() {
        return capital;
    }

    public void setCapital(int capital) {
        this.capital = capital;
    }

    public int getYear() {
        return year;
    }

    public void setYear(int year) {
        this.year = year;
    }

    public double getRate() {
        return rate;
    }

    public void setRate(double rate) {
        this.rate = rate;
    }

    public int getInterest() {
        return interest;
    }

    public void setInterest(int interest) {
        this.interest = interest;
    }

    public String count() {
        double interestValue = capital * (Math.pow(rate / 100 + 1, year) - 1);
        this.interest = (int) Math.round(interestValue);
        return "input";
    }
}

2.1.4.3. 入出力画面用XHTMLファイルの作成

プロジェクト・エクスプローラーでJSF20Sampleプロジェクトを選び、右クリックメニュー 新規HTML ファイル を選択して、選択画面を表示します。


図2.1.4.3-1

ツリーWebContent(コンテントディレクトリ)を選択して、ファイル名input.xhtmlを入力して、次へ をクリックします。


図2.1.4.3-2

New Facelet Templateを選択して、完了をクリックします。


図2.1.4.3-3

生成されたinput.xhtmlで、右クリックメニューアプリケーションから開くWebページ・エディターを選択します。


図2.1.4.3-4

<title>タグのDefault titleInputに変更し、<body></body>タグの間の内容を削除します。


図2.1.4.3-5

パレットのJSF HTMLからFormをクリックして、下図の示すように上のエディターにドラッグ・アンド・ドロップします。
パレットが表示されていない場合、画面右上の三角のボタンをクリックすることで表示することができます。


図2.1.4.3-6

コンポーネントの配置
「元金」の、 を配置します。

パレットのJSF HTMLからOutput Labelをクリックして、下図の示すように上のエディターにドラッグ・アンド・ドロップします。


図2.1.4.3-7

outputLabelの右クリックメニュー表示プロパティー を選択すると、プロパティーが表示されます。


図2.1.4.3-8

プロパティー・ビューのクイック編集でvalueの値に元金を入力します。


図2.1.4.3-9

パレットのJSF HTMLからText Inputをクリックして、上のエディターの元金の右側にドラッグ・アンド・ドロップします。


図2.1.4.3-10

パレットのJSF HTMLからMessageをクリックして、上のエディターのText Inputの右側にドラッグ・アンド・ドロップします。


図2.1.4.3-11

Message表示域の終端で改行し、同様の手順で年数利率(%)のコンポーネントを配置します。


図2.1.4.3-12

改行し、パレットのJSF HTMLからCommand Buttonをクリックして、上のエディターの年数の下側にドラッグ・アンド・ドロップし、プロパティー・ビューのクイック編集でvalueの値に計算を入力します。


図2.1.4.3-13

最後に、パレットのJSF HTMLからOutput Labelをクリックして、上のエディターの計算の下側にドラッグ・アンド・ドロップし、プロパティー・ビューのクイック編集でvalueの値に利息:を入力します。


図2.1.4.3-14

パレットのJSF HTMLからOutput Textをクリックして、上のエディターの利息:の右側にドラッグ・アンド・ドロップします。


図2.1.4.3-15

値の設定
元金の入力域(Text Input)を選択し、プロパティー・ビューのクイック編集でvalueの値に#{inputBean.capital}を入力します。


図2.1.4.3-16

これは、先に InputBeanクラスで定義した、アノテーション、フィールド
@ManagedBean
public class InputBean {
    private double capital = 1000;
に対応する指定です。
この例では、アノテーション@ManagedBeanのname属性を明示的に設定していないので、 ManagedBeanの名前はクラス名の頭文字を小文字に変換したinputBeanとなります。 これだけで、明示的な設定、取得処理を実装する事無く、ManagedBean のフィールドとの連携が実現できます。
妥当性検査の実装
元金として、「妥当でない値が入力されていないか」の検査を実装します。
検査内容は、「0以上の数値が入力されている事」です。

元金の Text Inputを選択し、idcapitalTextを入力し、バリデーターLongRange追加し、最小フィールドに0を入力します。(0 以上である事の検査)


図2.1.4.3-17

プロパティー・ビューの属性でrequiedの値にtrueを選択します。(入力されている事の検査)


図2.1.4.3-18

元金のメッセージ表示域を、入力域の連携を定義するため、 Text Inputの右側のMassageを選択し、forcapitalTextを入力します。


図2.1.4.3-19

エラーメッセージのカスタマイズ
特にエラーメッセージを指定しない場合、デフォルトのエラーメッセージが表示されますが、ここでは、 その内容をカスタマイズすることにします。
エラーメッセージは、次の3つの指定でカスタマイズします。
表2.1.4.3-1
メッセージ種類 説明 設定方法
型変換のエラーメッセージ コンポーネントに適用されたコンバータによる、型変換エラーのメッセージです。
ManagedBeanのフィールドの型定義によって検査します。常に有効です。
converterMessage属性の値を設定します。
必須検査のエラーメッセージ コンポーネントの必須バリデータによる、検証エラーのメッセージです。
requiered属性の値がtrueの場合、有効です。
requiredMessage属性の値を設定します。
バリデータのエラーメッセージ コンポーネントに適用されたバリデータによる、検証エラーのメッセージです。
クイック編集でバリデーターを指定した場合、有効です。
validatorMessage属性の値を設定します。
具体例として、元金に入力された値が妥当でない場合のエラーメッセージをカスタマイズします。
元金のText Inputを選択し、プロパティー・ビューの属性でconverterMessageの値に変換エラーrequiredMessageの値に入力必須を入力し、エラーメッセージとして、validatorMessageの値に"0以上の金額を入力してください。"を入力します。


図2.1.4.3-20


他の入力域も「元金」の場合と同様に、以下の値を設定します。
年数
表2.1.4.3-2
属性
部品 inputText
value #{inputBean.year}
id yearText
required true
妥当性判定条件 p:validateLongRange minimum="1"
converterMessage 変換エラー
requiredMessage 入力必須
validatorMessage 1以上の年数を入力してください。

表2.1.4.3-3
属性
部品 message
for yearText
利率(%)
表2.1.4.3-4
属性
部品 inputText
value #{inputBean.rate}
id rateText
required true
妥当性判定条件 p:validateLongRange minimum="0" maximum="100"
converterMessage 変換エラー
requiredMessage 入力必須
validatorMessage 利率は 0〜100 の範囲内で指定してください。

表2.1.4.3-5
属性
部品 message
for rateText
計算
表2.1.4.3-6
属性 説明
部品 commandButton  
action #{inputBean.count} inputBeanのcount()メソッドを呼び出します。
type submit  

利息
表2.1.4.3-7
属性
部品 outputText
value #{inputBean.interest}



以下が、input.xhtml の内容です。
<!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:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://java.sun.com/jsf/core">
<head>
<title><ui:insert name="title">Input</ui:insert></title>
</head>

<body>
  <h:form>
    <h:outputLabel value="元金"></h:outputLabel>
    <h:inputText value="#{inputBean.capital}" id="capitalText" required="true" converterMessage="変換エラー" requiredMessage="入力必須" validatorMessage="0以上の金額を入力してください。"><p:validateLongRange minimum="0"></p:validateLongRange></h:inputText>
    <h:message for="capitalText"></h:message><br />
    <h:outputLabel value="年数"></h:outputLabel>
    <h:inputText value="#{inputBean.year}" id="yearText" required="true" converterMessage="変換エラー" requiredMessage="入力必須" validatorMessage="1以上の年数を入力してください。"><p:validateLongRange minimum="1"></p:validateLongRange></h:inputText>
    <h:message for="yearText"></h:message><br />
    <h:outputLabel value="利率(%)"></h:outputLabel>
    <h:inputText value="#{inputBean.rate}" id="rateText" required="true" converterMessage="変換エラー" requiredMessage="入力必須" validatorMessage="利率は 0〜100 の範囲内で指定してください。"><p:validateLongRange minimum="0" maximum="100"></p:validateLongRange></h:inputText>
    <h:message for="rateText"></h:message><br />
    <br />
    <h:commandButton value="計算" action="#{inputBean.count}" type="submit"></h:commandButton><br />
    <h:outputLabel value="利息:"></h:outputLabel>
    <h:outputText value="#{inputBean.interest}"></h:outputText>
  </h:form>
</body>

</html>

2.1.5. JSFアプリケーションのデプロイ

プロジェクト・エクスプローラ・ビューでinput.xhtmlを選択した状態で右クリックメニュー 実行サーバーで実行 を選択します。


図2.1.5-1

サーバーで実行ダイアログが表示されます。
過去にサーバーを選択したことがある場合、既存のサーバーを選択を選び、完了 をクリックします 。


図2.1.5-2

初めてサーバーを選択する場合、手動で新規サーバーを定義を選択して、次へ をクリックします。 サーバーの設定ができていない場合はWebOTXマニュアル初期設定章のWebOTXサーバーランタイムの設定を参照してください。


図2.1.5-3

サーバーユーザー名adminサーバーパスワード(初期値は adminadmin)を入力して、 ユーザードメインポート(初期値は 6212)を確認して、 完了 をクリックします。


図2.1.5-4

Developer's Studio内にWebブラウザが表示されます。


図2.1.5-5

URL欄に http://localhost/JSF20Sample/faces/input.xhtml を入力して、以下の画面が表示されます。計算 ボタンをクリックします。


図2.1.5-6

利息: の値が 1 に変更されていれば、アプリケーションの実行は成功です。


図2.1.5-7

2.1.6. JSFアプリケーションの実行

Developer's Studio 外の一般のWebブラウザから、以下のURLへアクセスすることで、 配備したJSFアプリケーションを実行する事ができます。

http://localhost/JSF20Sample/faces/input.xhtml


図2.1.6-1

計算 ボタンをクリックして、利息: の値が 1 に変更します。


図2.1.6-2

続き、元金年数利率 を変更して、計算 ボタンをクリックしたら、新たな計算結果が利息 に更新されます。


図2.1.6-3

妥当でない値を入力し、計算 ボタンをクリックした場合、入力域の後にエラー情報が表示されます。


図2.1.6-4

入力値を修正後、再度 計算 ボタンをクリックしてから、エラーが解消できます。


図2.1.6-5

2.1.7. Ajax 連携を利用した改造

改善の概要
先に作成した例では、計算ボタンをクリックした際に、 ページの内容全体を更新する事で、結果を表示していました。
しかし、それでは「複雑な画面」や「ネットワークの負荷が高い状況」では、性能上の問題が懸念されます。

これを回避する手段として、Ajax 連携 機能を用いた、 ページの部分的な更新の方法について説明します。
変更内容
前出の input.xhtml に、以下の太字で示した3箇所の修正を加えます。
<!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:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://java.sun.com/jsf/core">
<head>
<title><ui:insert name="title">Input</ui:insert></title>
<h:outputScript name="jsf.js" library="javax.faces"></h:outputScript>
</head>
<body>
  <h:form>
    <h:outputLabel value="元金"></h:outputLabel>
    <h:inputText value="#{inputBean.capital}" id="capitalText" required="true" converterMessage="変換エラー" requiredMessage="入力必須" validatorMessage="0以上の金額を入力してください。"><p:validateLongRange minimum="0"></p:validateLongRange></h:inputText>
    <h:message for="capitalText"></h:message><br />
    <h:outputLabel value="年数"></h:outputLabel>
    <h:inputText value="#{inputBean.year}" id="yearText" required="true" converterMessage="変換エラー" requiredMessage="入力必須" validatorMessage="1以上の年数を入力してください。"><p:validateLongRange minimum="1"></p:validateLongRange></h:inputText>
    <h:message for="yearText"></h:message><br />
    <h:outputLabel value="利率(%)"></h:outputLabel>
    <h:inputText value="#{inputBean.rate}" id="rateText" required="true" converterMessage="変換エラー" requiredMessage="入力必須" validatorMessage="利率は 0〜100 の範囲内で指定してください。"><p:validateLongRange minimum="0" maximum="100"></p:validateLongRange></h:inputText>
    <h:message for="rateText"></h:message>
    <br />
    <h:commandButton value="計算" action="#{inputBean.count}" type="submit">
      <p:ajax execute="capitalText yearText rateText" render="result"></p:ajax>
    </h:commandButton><br />
    <h:outputLabel value="利息:"></h:outputLabel>
    <h:outputText value="#{inputBean.interest}" id="result"></h:outputText>
  </h:form>
</body>

2.1.8. 他バージョンの JSF の開発

先の例では、JSF2.0 のアプリケーション作成の手順を紹介しました。 それ以外のバージョンの JSF アプリケーションを作成する場合、 を行い、先の手順に従い、アプリケーションの開発を行います。
利用するライブラリの取り込み
プロジェクト作成時に、JSF 実装ライブラリーに、取り込むライブラリを指定します。


図2.1.8-1

デフォルトのライブラリの無効化
nec-web.xmlに、以下の指定を追加します。
<?xml version="1.0" encoding="UTF-8"?>
<nec-web-app>
  <context-root>context_name</context-root>
  <class-loader delegate="false"/>
  <property name="useBundledJsf" value="true"/>
</nec-web-app>