NEC Mark
WebOTX Manual V10.2 (第4版)

目次を表示

Webアプリケーション

1. チュートリアル

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

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

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

Memo
MVC2とはMVCアーキテクチャをWebアプリケーションに適用したものです。JSP Model 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 v10.2(Local Default)を指定して、完了をクリックします。
ターゲット・ランタイムの指定方法は [ 環境設定 > テスト用サーバの設定 > 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

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 hereをHelloに変更します。


図2.1.1.2-5

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


図2.1.1.2-6

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


図2.1.1.2-7

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


図2.1.1.2-8

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


図2.1.1.2-9

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


図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-width ＞ type を選択します。


図2.1.1.2-14

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


図2.1.1.2-15

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


図2.1.1.2-16

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


図2.1.1.2-17

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


図2.1.1.2-18

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


図2.1.1.2-19

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


図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
赤色部分が、修正あるいは追加する個所です。

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 hereをHelloに変更します。


図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ファイルのエンコード形式を示すため、エディタのテキストファイルエンコードの設定により変動します。

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しない汎用的なクラスとして作成する事が望ましいです。

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)とのインタフェースとなります。

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);
  }

}

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

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


図2.1.2-1

初めてサーバーを選択する場合、手動で新規サーバーを定義を選択して、 次へ をクリックします。
サーバーの設定を行っていない場合、 [ 環境設定 > テスト用サーバの設定 > WebOTXランタイムの設定 ] を参照の上、設定を行ってください。


図2.1.2-2

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


図2.1.2-3

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

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

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

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

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

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

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

メニュー ＞ ファイル ＞ 新規 ＞ プロジェクトで、Webの動的Webプロジェクトを選択して、次へをクリックします。
プロジェクト名を入力し、構成で変更をクリックします。


図2.1.4.1-1

プロジェクト・ファセットでJavaServer Faces 2.2 を選択し、OK を押します。


図2.1.4.1-2

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


図2.1.4.1-3

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

1.4.2. ManagedBeanの作成

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


図2.1.4.2-1

表2.1.4.2-1
パッケージ com.nec.webotx.jsf.tutorial
名前 InputBean
アノテーション @ManagedBeanの追加
生成されたInputBeanクラスのクラス名InputBeanを選択し、注釈プロパティービューでアノテーション@javax.faces.bean.ManagedBeanを ON にします。


図2.1.4.2-2

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


図2.1.4.2-3

フィールドの追加
InputBeanクラスにint型のcapital、year、interestおよび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";
    }
}

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 titleをInputに変更し、<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を選択し、idにcapitalTextを入力し、バリデーターに LongRangeを追加し、最小フィールドに0を入力します。(0 以上である事の検査)


図2.1.4.3-17

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


図2.1.4.3-18

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


図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>

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

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


図2.1.5-1

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


図2.1.5-2

初めてサーバーを選択する場合、手動で新規サーバーを定義を選択して、次へ をクリックします。 サーバーの設定ができていない場合は [ 環境設定 > テスト用サーバの設定 > 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

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

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>

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

先の例では、JSF2.2 のアプリケーション作成の手順を紹介しました。 それ以外のバージョンの 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>

1.9. WebSocketアプリケーションの作成

動的Webプロジェクトで、WebSocketで通信するアプリケーションを作成します。

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

メニュー ファイル ＞ 新規 ＞ その他 をクリックします。


図2.1.9.1-1

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


図2.1.9.1-2

新規動的 Web プロジェクト 画面で、 プロジェクト名 に WebSocketSampleを入力して、 完了 をクリックします。


図2.1.9.1-3

動的Webプロジェクトが作成されます。


図2.1.9.1-4

1.9.2. WebSocketの作成

WebSocketSampleプロジェクトを選択し、右クリックメニューの Webプロジェクト ＞ WebSocketの作成 をクリックします。


図2.1.9.3-1

サーバエンドポイントを作成 画面で、クラス名 に Chatを入力し、WebSocket URL(U): に chatを入力して、次へ をクリックします。


図2.1.9.3-2

クライアントエンドポイントを作成 画面で、 自動的に設定される内容を確認して、次へ をクリックします。


図2.1.9.3-3

HTMLファイルを作成 画面で、 自動的に設定される内容を確認して、終了(F) をクリックします。


図2.1.9.3-4

WebSocketアプリケーションが作成されます。


図2.1.9.3-5

1.10. WebSocketアプリケーションのデプロイ

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


図2.1.10-1

サーバーで実行 ダイアログが表示されます。

過去にサーバーを作成したことがある場合、既存のサーバー を選択して、完了 をクリックします 。


図2.1.10-2

初めてサーバーを選択する場合、手動で新規サーバーを定義 を選択して、Webアプリケーションのデプロイ を参照し、新規サーバー定義を作成してください。

1.11. WebSocketアプリケーションの実行

1.11.1. 事前準備

1.11.1.1. HTTPリスナの設定変更
スタートメニューから プログラム ＞ WebOTX ＞ 運用管理コンソール を選択し、運用管理コンソール を起動します。
ユーザ名 と パスワード を入力して、ログインします。


図2.1.11-1

アプリケーションサーバ ＞ ネットワーク構成 ＞ プロトコル構成 ＞ protocol ＞ HTTPリスナ を選択します。


図2.1.11-2

プロトコルの種類 で http(nio) を選択して、更新 をクリックします。


図2.1.11-3

WebOTXサーバーを再起動します。


図2.1.11-4

Memo
WebSocket以外のアプリケーションで利用しない場合は、WebSocketアプリケーション実行後、HTTPリスナを http(default) に戻して下さい。

1.11.2. 実行

Memo
本サンプルは、WebSocketをサポートしているブラウザー（例：IE10以上、FireFox24以上）で実行してください。

二つのブラウザの実行
二つのブラウザを起動し、両ブラウザでhttp://localhost/WebSocketSample/websocket/Chat.html へアクセスします。ブラウザ1のテキストボックスで、I'm AAA を入力し、Send をクリックします。


図2.1.11-5

ブラウザ1、ブラウザ2の両方で I'm AAA というメッセージを受信することができます。


図2.1.11-6

ブラウザとコンソールの実行
WebSocketSampleプロジェクトのChatClientEndpointMain.javaを右クリックし、実行 ＞ Javaアプリケーションメニューをクリックします。


図2.1.11-7

ブラウザを起動し、http://localhost/WebSocketSample/websocket/Chat.html へアクセスします。コンソールビューで、I'm CCC を入力します。


図2.1.11-8

ブラウザとコンソールの両方で I'm CCC というメッセージを受信することができます。


図2.1.11-9

ブラウザのテキストボックスで、I'm AAA を入力し、Send をクリックします。


図2.1.11-10

ブラウザとコンソールの両方で I'm AAA というメッセージを受信することができます。


図2.1.11-11

1.12. スマートデバイスアプリケーションの作成

ここではHTML5とjQuery Mobileを利用したWebアプリケーション形式のスマートデバイス向けのサンプルアプリケーションを作成します。 カメラ、赤外線等のスマートデバイス側の機能との連携を行いたい場合は、 SystemDirector Enterprise for Smart Device をご参照ください。

1.12.1. 事前準備

jQuery Mobileを利用しますので、事前にjQuery MobileおよびjQueryを入手する必要があります。
jQuery MobileのダウンロードURLは[jQuery Mobileの入手方法]を参照してください。
jQueryのダウンロードURLは[jQueryの入手方法]を参照してください。

Memo
以降の説明は、jQuery 1.9.1とjQuery Mobile 1.3.2 を利用した場合を例にとっています。サンプルコード等は ご利用になるバージョンに合わせ適宜変更して下さい。

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

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


図2.1.12.2-1

表2.1.12.2-1
項目 値
プロジェクト名 SmartDeviceSample
ターゲット・ランタイム WebOTX Application Server v10.2(Local Default)
構成 WebOTX Application Server v10.2(Local Default)デフォルト構成
プロジェクト名、ターゲット・ランタイムと構成を設定し、完了 をクリックします。

1.12.3. jQueryとjQuery Mobileのインポート

事前準備 でダウンロードされたZIPファイルを解凍し、含まれる jquery-1.9.1.min.js、jquery.mobile-1.3.2.min.js 、jquery.mobile-1.3.2.min.css と imagesフォルダ を対象プロジェクトの WebContent にコピーします。


図2.1.12.3-1

Memo
jquery.mobile-1.3.2.min.jsにコンパイルエラーがありますが、サンプルの実行に影響がありません。

1.12.4. サーブレットの作成

SmartDeviceSampleプロジェクトを選択して、右クリックメニュー 新規 ＞ その他 ＞ Web ＞ サーブレット を選択して、 次へ をクリックします。


図2.1.12.4-1

クラス名とパッケージ名を入力し、 完了 をクリックします。


図2.1.12.4-2

表2.1.12.4-1
クラス名 ContentInfo
javaパッケージ com.nec.sd
ContentInfo.javaは下記のように変更します。 
package com.nec.sd;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class ContentInfo
 */
@WebServlet("/ContentInfo")
public class ContentInfo extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ContentInfo() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		List<String> pictureList = new ArrayList<String>();
		List<String> musicList = new ArrayList<String>();
		
		HttpSession session = request.getSession();
		
		pictureList.add("pp1");
		pictureList.add("pp2");
		pictureList.add("pp3");
		
		musicList.add("mu1");
		musicList.add("mu2");
		
		session.setAttribute("picture", pictureList);
		session.setAttribute("music", musicList);
		
		request.getRequestDispatcher("/msg.html").forward(request, response);
	}

}
それから、pp1.jpg、pp2.jpg 、pp3.jpg、mu1.mp3、mu2.mp3を対象プロジェクトの WebContent フォルダに入れます。

Memo
pp1.jpg、pp2.jpg 、pp3.jpg、mu1.mp3、mu2.mp3は SmartDeviceのサンプル の SmartDeviceSample.zip の WebContent フォルダにあります。

1.12.5. index.htmlファイルの作成

SmartDeviceSampleプロジェクトを選択して、右クリックメニュー 新規 ＞ その他 ＞ Web ＞ HTMLファイル を選択して、 次へ をクリックします。


図2.1.12.5-1

ファイル名に index.html を入力し、 完了 をクリックします。


図2.1.12.5-2

index.htmlファイルを開き、 スニペットビューからbody属性にPageをドラッグ&ドロップします。


図2.1.12.5-3

スニペットビューからfooter属性にDialogをドラッグ&ドロップします。


図2.1.12.5-4

urlの値に空を設定します。


図2.1.12.5-5

index.htmlは下記のように変更します。 
<!DOCTYPE HTML>
<html>
<head>
<title>Smart Device Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-type" name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
<link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="./smartdevice.js"></script>
</head>
<body onload="loadName()">
	<div data-role="page" id="pa">
		<div data-role="header" data-position="fixed">
			<h1>Smart Device Sample</h1>
		</div>
		<div data-role="content" id="content">
			<label for="username" id="lab"><strong>User name：</strong></label>
			<input type="text" id="username" placeholder="input user name" onchange="validate();"/>
			<p></p>
			<label for="fw_1">Save user name：</label>
			<select name="fw_" id="fw" data-role="slider" onchange="change();">
				<option value="No">No</option>
				<option value="Yes">Yes</option>
			</select>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li><a href="" data-role="button" data-rel="dialog" data-transition="slide" rel="external" onclick="logIn();">Login</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

1.12.6. content.jspファイルの作成

SmartDeviceSampleプロジェクトを選択して、右クリックメニュー 新規 ＞ その他 ＞ Web ＞ HTMLファイル を選択して、 次へ をクリックします。


図2.1.12.6-1

ファイル名に content.jsp を入力し 完了 をクリックします。


図2.1.12.6-2

content.jspファイルを開き、 スニペットビューからbody属性にPageをドラッグ&ドロップします。


図2.1.12.6-3

スニペットビューからheader属性にButtonをドラッグ&ドロップします。


図2.1.12.6-4

スニペットビューからfooter属性にNavbarをドラッグ&ドロップします。


図2.1.12.6-5

スニペットビューからcontent属性にListviewをドラッグ&ドロップします。


図2.1.12.6-6

content.jspは下記のように変更します。 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
<title>Smart Device Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-type" name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
<link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="./smartdevice.js"></script>
</head>
<body onload="loadName()">
<div data-role="page" id="content">
		<div data-role="header">
            <h1>Smart Device Sample</h1>
			<a href="" data-role="button" data-icon="gear" data-transition="fade" onclick="logOut()">Logout</a>
        </div>
		<p><p>
		<p><strong>Image Show</strong></p>
		<p><p>
		<div data-role="Content">
			<ul data-role="listview" data-filter="true" data-filter-placeholder="Search..." data-split-theme="d">
				<c:forEach items="${sessionScope.picture}" var="row" >
					<li>
						<a href="#${row}" data-rel="popup" data-position-to="window" data-transition="pop">
							<img src="${row}.jpg" />
							<h3>Picture : ${row}</h3>
							<p>${row}</p>
						</a>
						<div data-role="popup" id="${row}" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15"> 
							<a href="#content" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"> Close</a>
							<img src="${row}.jpg" alt="${row}" width="200"> 
						</div>
					</li>
				</c:forEach>
			</ul>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li>
						<a href="content.jsp" class="ui-btn-active" data-transition="fade">Image</a> 
					</li>
					<li>
						<a href="music.jsp" data-transition="fade">Music</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

1.12.7. music.jspファイルの作成

content.jspファイルの作成を参照して、music.jspファイルを作成します。
スニペットビューからmusic.jspファイルにPage、 ListView、 Button、 Navbar、 Popupをドラッグ&ドロップします。
music.jspは下記のように変更します。 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML>
<html>
<head>
<title>Smart Device Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-type" name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
<link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="./smartdevice.js"></script>
</head>
<body>

<div data-role="page" id="mu">
		<div data-role="header" data-position="fixed">
			<h1>Smart Device Sample</h1>
			<a href="" data-role="button" data-icon="gear" data-transition="fade" onclick="logOut()">Logout</a>
		</div>
		<p><p>
		<p><strong>Music Show</strong></p>
		<p><p>
		<div data-role="content" id="content">
			<ul data-role="listview" data-split-theme="d">
				<c:forEach items="${sessionScope.music}" var="row" >
					<li>
						<a href="#${row}" data-rel="popup" data-position-to="window" data-transition="pop">
							<h3>Music : ${row}</h3>
							<p>${row}</p>
						</a>
						<div data-role="popup" id="${row}" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15"> 
							<a href="#content" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right"> Close</a>
							<audio controls="controls">
								<source src="${row}.mp3" type="audio/mp3" />
							</audio>
						</div>
					</li>
				</c:forEach>
			</ul>
		</div>
		<div data-role="footer" data-position="fixed">
			<div data-role="navbar">
				<ul>
					<li>
						<a href="content.jsp" data-transition="fade">Image</a> 
					</li>
					<li>
						<a href="music.jsp" class="ui-btn-active" data-transition="fade">Music</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

1.12.8. msg.htmlファイルの作成

index.htmlファイルの作成を参照して、msg.htmlファイルを作成します。
スニペットビューからmsg.htmlファイルにPage、 Dialog、 Buttonをドラッグ&ドロップします。
msg.htmlは下記のように変更します。 
<!DOCTYPE HTML>
<html>
<head>
<title>Smart Device Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-type" name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> 
<link rel="stylesheet" href="./jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="./smartdevice.js"></script>
</head>
<body onload="msg();">

	<div data-role="dialog" id="msg">
		<div data-role="header" data-theme="d">
			<h1>Notice</h1>
		</div>
		<div data-role="content" data-theme="c">
			<p id="ps"></p>
		</div>
		<div data-role="footer" data-position="fixed" data-theme="d">
			<a href="" data-role="button" data-transition="slide"
				onclick="jump();">OK</a>
		</div>
	</div>

</body>
</html>

1.12.9. smartdevice.jsファイルの作成

smartdevice.jsを下記のように作成します。 
var storage = window.localStorage;
if (!storage) {
	alert("Your browser does not support localStorage.");
}
function loadName() {
	storage.setItem("msg", "");
	var is = storage.getItem("save");
	var us = storage.getItem("user");
	if (is != null) {
		$("#fw").val(is);
		$("#fw").slider('refresh');
	}
	if (is == "Yes" && us != null) {
		$("#username").val(us);
	}
	if (us == null) {
		storage.setItem("msg", "user name empty!");
	} else {
		storage.setItem("msg", "Welcome " + us + "!");
	}
	
	var useri = $("#username").val();
	if ((useri == null) || (useri == "")) {
		storage.setItem("msg", "user name empty!");
	}
}
function validate() {
	var useri = $("#username").val();
	if (useri == "") {
		storage.setItem("msg", "user name empty!");
		return;
	} else {
		storage.setItem("user", useri);
		storage.setItem("msg", "Welcome " + useri + "!");
		return;
	}
}
function change() {
	var val = $("#fw").val();
	if (val != "") {
		storage.setItem("save", val);
	}
}
function jump() {
	var text = storage.getItem("msg");
	if ((text == "user name empty!") || (text == "")) {
		window.location.href='index.html';
	} else {
		window.location.href='content.jsp';
	}
	storage.setItem("msg", "");
}
function msg() {
	var msg = storage.getItem("msg");
	if ((msg != null) && (msg != "")) {
		
		$("#ps").text(msg);
	} else {
		$("#ps").text("user name empty!");
	}
}
function logOut(){
	window.location.href='index.html';
}
function logIn(){
	window.location.href = "/SmartDeviceSample/ContentInfo";
}

1.13. スマートデバイスアプリケーションのデプロイ

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


図2.1.13-1

サーバーで実行 ダイアログが表示されます。

過去にサーバーを選択したことがある場合、既存のサーバー を選択して、完了 をクリックします 。


図2.1.13-2

初めてサーバーを選択する場合、手動で新規サーバーを定義 を選択して、Webアプリケーションのデプロイ を参照し、新規サーバー定義を作成してください。

1.14. スマートデバイスアプリケーションの実行

スマートデバイス上のWebブラウザからデプロイしたアプリケーションをアクセスできます。

以下は、Androidシミュレータを利用して、動作する方法を説明します。

Caution
事前に「ADT Bundle for Windows」という Android SDK をダウンロードして、インストールする必要があります。 「ADT Bundle for Windows」のダウンロード、及びインストール、設定方法 の詳細は[シミュレータでのテスト実行]を参照してください。

プロジェクトを選択し、右クリックメニュー のサーバで実行 を選択します。
ブラウザを開き、 http://Webサーバ名(ドメイン省略不可):ポート番号/SmartDeviceSample/index.html を入力します。例えば、 http://localhost/SmartDeviceSample/index.html を入力します。
User name に任意のユーザ名を入力して、Login をクリックします。


図2.1.14-1

User nameテキストボックスに aaa を入力し、 Save user name の値を Yes にスライドすると、User nameが保存されます。次のログイン時、保存されたユーザ名が表示されます。


図2.1.14-2

Login をクリックすると Noticeダイアログがポップアップされます。
OK をクリックします。


図2.1.14-3

Image ボタンをクリックすると Image Show ページに遷移します。


図2.1.14-4

pp2 をクリックすると画像がポップアップで表示されます。


図2.1.14-5

Music ボタンをクリックすると Music Show ページに遷移します。


図2.1.14-6

mu1 をクリックすると オーディオコントロールがポップアップされます。プレーボタンをクリックし、音が再生されます。


図2.1.14-7

Logout をクリックすると ログインページに遷移します。


図2.1.14-8

Copyright (C) 1998 - 2020 NEC Corporation. All rights reserved.