WebOTXマニュアル

Size: px

Start display at page:

Download "WebOTXマニュアル"

そうりんあざみ
5 years ago
Views:

2 目次 2. Java EE Webアプリケーション Webアプリケーションを作成する Webアプリケーションを配備する Webアプリケーションを使う JSFアプリケーションを作成する JSFアプリケーションを配備する JSFアプリケーションを使う

2.Java EE 2.2.Web アプリケーション WebOTX Developer's Studio は Web アプリケーションの作成の手助けをいたしますここでは Web ページに入力した文字列を表示する簡単な Web アプリケーションを作る際の開発の手順を説明いたします 2.

アプリケーションに適用したものです JSP Model 2 アーキテクチャとも呼ばれます Web プロジェクトを作成します XDoclet の初期設定を行っていない場合はメニューからウィンドウ設定を選択し設定ダイアログから左ペインで XDoclet

3 2.Java EE 2.2.Web アプリケーション WebOTX Developer's Studio は Web アプリケーションの作成の手助けをいたしますここでは Web ページに入力した文字列を表示する簡単な Web アプリケーションを作る際の開発の手順を説明いたします Web アプリケーションを作成するデータベースや EJB などを使用しないスタンドアロンな Web アプリケーションを WTP を利用して MVC2 モデルで作成します MVC2 とは MVC アーキテクチャを Web アプリケーションに適用したものです JSP Model 2 アーキテクチャとも呼ばれます Web プロジェクトを作成します XDoclet の初期設定を行っていない場合はメニューからウィンドウ設定を選択し設定ダイアログから左ペインで XDoclet を選択して XDoclet ホームとバージョンを入力します次に設定ダイアログから左ペインで XDoclet webdoclet を選択し右ペインの Tasks の一覧より WebOTX のみチェックし他はチェックをはずして [OK] をクリックします 2-2-3

を開き動的 Web プロジェクトを選択して [ 次へ ] をクリックしますプロジェクト名に HelloSample

4 メニューからファイル新規プロジェクトを選択して新規プロジェクト画面を表示させます Web プロジェクトとは WebOTX Developer's Studio での Web アプリケーション作成用プロジェクトです新規プロジェクト画面の Web を開き動的 Web プロジェクトを選択して [ 次へ ] をクリックしますプロジェクト名に HelloSample を入力し Target runtime の右の [NEW] をクリックし使用するターゲットのランタイムのタイプを選択します 2-2-4

5 左図は表示基準をベンダー毎で表示している場合です定義したいランタイムのタイプより NEC WebOTX Local Server v6 を選択して [ 次へ ] をクリックします 2-2-5

6 WebOTX サーバーのインストールパスを入力して [ 終了 ] をクリックします [ 次へ ] をクリックします 2-2-6

というダイアログが表示された場合ははいで Java EE パースペクティブを開くことをお勧めします ( 常に Java EE パースペクティブを利用する場合は常にこの設定を利用するにチェックしてください ) 作成した動的

7 Project Facet の WebDoclet(XDoclet) をチェックして [ 終了 ] をクリックします WebDoclet(XDoclet) を選択することで WebOTX サーバに必要な配備記述子 (nec-web.xml) が作成されますただし事前に XDoclet の設定が行われていることを確認してから行ってください関連付けられたパースペクティブを開きますか? というダイアログが表示された場合ははいで Java EE パースペクティブを開くことをお勧めします ( 常に Java EE パースペクティブを利用する場合は常にこの設定を利用するにチェックしてください ) 作成した動的 Web プロジェクトに実行支援ライブラリを追加します現在 Java パースペクティブでない場合はファイルメニューのウィンドウパースペクティブを開くより Java を選択します実行支援ライブラリを利用する場合は Java パースペクティブである必要があります 2-2-7

:MS932 URL パターンが /* になっていること ) 終了ボタンをクリックします入力画面用の HTML ファイルを作成します動的 Web

8 HelloSample プロジェクトを選択した状態で右クリックより新規 Web プロジェクト支援ライブラリの追加を選択します利用するライブラリの選択より Web アプリケーション実行支援ライブラリをチェックし ( 文字エンコードフィルタを利用するがチェックエンコード種別 :MS932 URL パターンが /* になっていること ) 終了ボタンをクリックします入力画面用の HTML ファイルを作成します動的 Web プロジェクト配下にある HelloSample プロジェクトを選択します左図は Java EE パスペクティブ ( プロジェクトエクスプローラー ) の場合です 2-2-8

9 ポップアップメニューから新規その他を選択して選択画面を表示させます選択画面から Web を開き HTML を選択して [ 次へ ] をクリックしますツリーより WebContent( コンテントディレクトリ ) を選択ファイル名に hello.html を入力し [ 終了 ] をクリックします hello.html を以下の通り編集し保存します 2-2-9

10 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-31j"> <title>hello</title> </head> <body bgcolor="#ffffff"> <form method="post" action="helloservlet"> 名前を入力してください :<input type="text" name="name" size="20"> <input type="submit" value=" こんにちは "> </form> </body> </html> 出力画面用の JSP ファイルを作成します赤色部分が修正あるいは追加する個所です動的 Web プロジェクト配下にある HelloSample プロジェクトを選択しますポップアップメニューから新規その他を選択して選択画面を表示させます選択画面から Web を開き JSP を選択して [ 次へ ] をクリックします

11 ツリーより WebContent( コンテントディレクトリ ) を選択ファイル名に hello.jsp を入力し [ 終了 ] をクリックします 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="sample.hellobean" /> <!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title> こんにちは </title> </head> <body bgcolor="#ffffff"> こんにちは <jsp:getproperty name="hellobean" property="name"/> さん <br> あなたの名前は <jsp:getproperty name="hellobean" property="score"/> 点です <br> <a href="hello.html"> さようなら </a> <form> <otxjsp:checkdata/> </form> </body> </html> ビジネスロジッククラスを作成します赤色部分が修正あるいは追加する個所です 1 行目の pageencoding の値は JSP ファイルのエンコード形式を示すためエディタのテキストファイルエンコードの設定により変動します動的 Web プロジェクト配下にある HelloSample プロジェクトを選択しますポップアップメニューから新規クラスを選択して新規 Java クラス画面を表示させます

12 パッケージに sample を入力し名前に HelloModel を入力し [ 終了 ] をクリックします生成された 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; } ここでのビジネスロジックは名前から 1 ~10 までの点数を取得するといった処理を行っていますビジネスロジック用のクラスはサーブレット用 API を import しない汎用的なクラスとして作成する事が望ましいです Bean を作成します

13 動的 Web プロジェクト配下にある HelloSample プロジェクトを選択しますポップアップメニューから新規クラスを選択して新規 Java クラス画面を表示させますパッケージに sample を入力し名前に HelloBean を入力しスーパークラスからのコンストラクタにチェックを付け [ 終了 ] をクリックします生成された HelloBean クラスに String 型の name と int 型の score フィールドを追加します public class HelloBean { private String name; // この行を追加 private int score; // この行を追加 }

14 HelloBean.java ソース内のクラス名の宣言部分をクリックしポップアップメニューからソース Getter および Setter の生成を選択します [ すべて選択 ] をクリックしツリーの要素全てにチェックが付く事を確認します

[OK] をクリックします HelloBean クラスのコードが以下の通りになっている事を確認して保存します package sample; /** * @author * */ public class HelloBean { private String name; private int score; この Bean は Servlet(MVC の Control) と JSP(MVC の

15 [OK] をクリックします HelloBean クラスのコードが以下の通りになっている事を確認して保存します package sample; /** * */ public class HelloBean { private String name; private int score; この Bean は Servlet(MVC の Control) と JSP(MVC の View) とのインタフェースとなります /** * */ public HelloBean() { super(); // TODO 自動生成されたコンストラクタースタブ } /** */ public String getname() { return name; } /** */ public int getscore() { return score; } /** string */ public void setname(string string) { name = string; } /**

16 i */ public void setscore(int i) { score = i; } } サーブレットを作成します動的 Web プロジェクト配下にある HelloSample プロジェクトを選択しますポップアップメニューから新規その他を選択して選択画面を表示させます選択画面から Web を開きサーブレットを選択して [ 次へ ] をクリックします

17 Java パッケージに sample を入力しクラス名に HelloServlet を入力し [ 次へ ] をクリックします名前に HelloServlet URL に /HelloServlet が入っていることを確認して [ 次へ ] をクリックします

メソッドの doget() のチェックをはずして修飾子 public インターフェース javax.servlet.servlet メソッドスタブスーパークラスからのコンストラクター継承された抽象メソッドメソッドの dopost() にチェックをされていることを確認して [ 終了 ] をクリックします生成された HelloServlet.

18 メソッドの doget() のチェックをはずして修飾子 public インターフェース javax.servlet.servlet メソッドスタブスーパークラスからのコンストラクター継承された抽象メソッドメソッドの dopost() にチェックをされていることを確認して [ 終了 ] をクリックします生成された HelloServlet.java の dopost() メソッドを以下の通り実装して保存します protected void dopost( HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { HelloModel model = new HelloModel(); // リクエストパラメータから name の値を取得する String name = request.getparameter("name"); // ビジネスロジックを実行する int score = model.getscore(name); // JSP とのインタフェース 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); } ビルドを行います

タスクタブをクリックしてタスクビューを表示しコンパイルエラーが出ていない事を確認します WebContent/WEB-INF

19 パッケージエクスプローラーにて HelloSample プロジェクトを選択しますメニューからプロジェクトプロジェクトのビルドを選択して Java ソースファイルをコンパイルします TODO はエラーではありませんタスクタブをクリックしてタスクビューを表示しコンパイルエラーが出ていない事を確認します WebContent/WEB-INF 配下に nec-web.xml が作成されていない場合は XDoclet を実行します動的 Web プロジェクト配下にある HelloSample プロジェクトを選択します

ポップアップメニューから Run XDoclet を選択します 2.2.2.Web アプリケーションを配備する方法 1.

20 ポップアップメニューから Run XDoclet を選択します Web アプリケーションを配備する方法 1.WAR アーカイブと配備を一度に行う場合 HelloSample プロジェクトを選択した状態で右クリックし実行サーバーで実行を選択します ( サーバの設定ができていない場合は次項目の設定も行ってください ) サーバの設定ができていない場合は新規サーバの定義ダイアログが表示されますのでサーバーのホスト名およびサーバタイプを選択して [ 次へ ] をクリックします ( 右図はローカルマシンをサーバとしている場合です )

ビューの表示よりその他よりサーバーを選択してサーバービューを表示して確認してください再配備したい場合は対象サーバー上で右クリックし公開を選択してくださいサーバの設定ができていない場合は

21 WebOTX サーバの新規作成ダイアログではサーバーのバージョンに WebOTX Standard-J Edition Ver6 サーバーユーザに admin サーバーパスワードに adminadmin( 初期の場合 ) を入力してユーザドメインポートが 6212( 初期の場合 ) になっていることを確認して [ 次へ ] をクリックします配備されたことの確認およびはウィンドウビューの表示よりその他よりサーバーを選択してサーバービューを表示して確認してください再配備したい場合は対象サーバー上で右クリックし公開を選択してくださいサーバの設定ができていない場合は新規サーバの定義ダイアログが表示されますのでサーバーのホスト名およびサーバタイプを選択して [ 次へ ] をクリックします ( 右図はローカルマシンをサーバとしている場合です ) 方法 2. 配備ツールを利用する場合 WAR ファイルを作成します HelloSample プロジェクトを選択した状態で右クリックしエクスポートを選択します

22 WAR ファイル (WTP) を選択し [ 次へ ] をクリックします Web モジュールに HelloSample 宛先に WAR ファイルの出力先を入力した状態で [ 終了 ] をクリックします配備ツールを起動しますスタートメニューからプログラム WebOTX 配備ツールを選択して配備ツールを起動します配備操作を行うにはテスト用サーバが動作している必要がありますサーバ情報の初期設定をします

23 メニューからファイルサーバを追加を選択します既にサーバ情報の初期設定を行っている場合はこれらの作業は不要ですサーバ名に localhost を入力しサーバポートに 6202 が設定されているのを確認し [OK] をクリックしますツリーの localhost:6202 をクリックするとサーバに接続画面が表示されます ( 表示されない場合は右クリックしてドメイン一覧の取得を選択します ) ユーザ名に admin を入力パスワードに adminadmin ( 初期の場合 ) を入力し [OK] をクリックします

24 localhost:6202 の下に domain1 が存在する事を確認します Web アプリケーションの配備をしますメニューからファイル開くを選択します先に生成した HelloSample.war を選択して [ モジュールを開く ] をクリックします一般タブを開き WAR の表示名が HelloSample にコンテキストルートを HelloSample が設定されていることを確認してメニューからファイル保存を選択します

25 メニューからツール配備を選択しますメッセージペインに完了メッセージが表示されるのを確認します Web アプリケーションを使う配備した Web アプリケーションを使ってみます Web ブラウザを起動し以下の URL へアクセスします hello.html の画面が表示されたら名前を入力して [ こんにちは ] をクリックします

26 入力した名前の点数が表示されますさようならをクリックすると最初の画面に戻ります JSF アプリケーションを作成する JSF アプリケーションを Web プロジェクトで作成しますメニューからファイル新規プロジェクトを選択して新規プロジェクト画面を表示させます新規プロジェクト画面の Web を開き動的 Web プロジェクトを選択して [ 次へ ] をクリックします

27 プロジェクト名に JSFSample を入力し Target runtime の右の [ 新規 ] をクリックし使用するターゲットのランタイムのタイプを選択します定義したいランタイムのタイプより NEC WebOTX Local Server v7 を選択して [ 次へ ] をクリックします

28 [ 次へ ] をクリックします Project Facet の Java JavaServer Faces 動的 Web モジュールをチェック状態にして [ 次へ ] をクリックします [ 次へ ] をクリックします Implementation Library(JSF 関連のライブラリ ) が設定されていない場合は [ 次へ ] をクリックして JSF ライブラリの設定を行います

29 Library Name に任意の名前を入力して [Add] をクリックします追加する jar ファイルをすべて選択し [ 開く ] をクリックします上記で選択した Jar がリストに追加されていることを確認して [ 終了 ] をクリックします Component Libraries で JSTL 関連のライブラリを追加して [ 終了 ] をクリックします

30 関連付けられたパースペクティブを開きますか? というダイアログが表示された場合ははいで Java EE パースペクティブを開くことをお勧めします ( 常に Java EE パースペクティブを利用する場合は常にこの設定を利用するにチェックしてください ) 入力画面用の JSP ファイルを作成します JSFSample プロジェクトを選びポップアップメニューから新規 JSF を選択して選択画面を表示させますツリーより WebContent( コンテントディレクトリ ) を選択ファイル名に Input.jsp を入力し [ 終了 ] をクリックします生成された Input.jsp を以下の通り編集します <%@ page language="java" contenttype="text/html; charset=windows-31j" pageencoding="windows-31j"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%@ taglib uri=" prefix="f" %> <%@ taglib uri=" prefix="h" %> <html> <f:view> <head> <meta http-equiv="content-type" content="text/html; charset=windows-31j"> <title>input</title>

JSFSample プロジェクト (Java リソース ) を選びポップアップメニューから新規クラスを選択して選択画面を表示させますパッケージ名に jsfsample 名前に InputBean を入力し [ 終了 ] をクリックします生成された

31 </head> <body> <h:form> <h:outputlabel value="#{inputbean.prop}"></h:outputlabel> <h:inputtext value="#{inputbean.name}"></h:inputtext> <h:commandbutton value="input" action="input"></h:commandbutton> </h:form> </body> </f:view> </html> Bean を作成します JSFSample プロジェクト (Java リソース ) を選びポップアップメニューから新規クラスを選択して選択画面を表示させますパッケージ名に jsfsample 名前に InputBean を入力し [ 終了 ] をクリックします生成された InputBean クラスに String 型の prompt および String 型の name フィールドを追加します package jsfsample; public class InputBean { private String prompt = "Name"; private String name; }

32 InputBean.java を選びポップアップメニューからソース Getter および Setter の生成を選択して選択画面を表示させます [ すべて選択 ] をクリックして [ 終了 ] をクリックします InputBean.java に Getter および Setter が追加されます生成された Input.jsp を以下の通り編集します

33 page language="java" contenttype="text/html; charset=windows-31j" pageencoding="windows-31j"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> taglib uri=" prefix="f" %> taglib uri=" prefix="h" %> <html> <f:view> <head> <meta http-equiv="content-type" content="text/html; charset=windows-31j"> <title>input</title> </head> <body> <h:form> <h:outputlabel value="#{inputbean.prop}"></h:outputlabel> <h:inputtext value="#{inputbean.name}"></h:inputtext> <h:commandbutton value="input" action="input"></h:commandbutton> </h:form> </body> </f:view> </html> 出力画面用の JSP ファイルを作成します JSFSample プロジェクトを選びポップアップメニューから新規 JSF を選択して選択画面を表示させます

34 ツリーより WebContent( コンテントディレクトリ ) を選択ファイル名に output.jsp を入力し [ 終了 ] をクリックします生成された output.jsp を以下のように編集します <%@ page language="java" contenttype="text/html; charset=windows-31j" pageencoding="windows-31j"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%@ taglib uri=" prefix="f" %> <%@ taglib uri=" prefix="h" %> <html> <f:view> <head> <meta http-equiv="content-type" content="text/html; charset=windows-31j"> <title>output</title> </head> <body> <h:form> <h:outputlabel value=" ようこそ #{InputBean.name} さん "></h:outputlabel> </h:form> </body> </f:view> </html> ツリーより faces-config.xml ファイルを選択アプリケーションから開くに FacesConfig Editor をクリックします FacesConfigEditor を作成します

35 ツリーより faces-config.xml ファイルを選択アプリケーションから開くに FacesConfig Editor をクリックしますパレットで Select をクリックした状態で input.jsp ファイルを Navigation のマス内にドラッグ & ドロップします同様にパレットで Select をクリックした状態で output.jsp ファイルを Navigation のマス内にドラッグ & ドロップしパレットで Link をクリックした選択で input.jsp から output.jsp に対し矢印 ( ) を引きます同様に Link のプロパティーをクリックし From Action input From Outcome input Redirect false を設定します

36 2.2.5.JSF アプリケーションを配備する方法 1.WAR アーカイブと配備を一度に行う場合 HelloSample プロジェクトを選択した状態で右クリックし実行サーバーで実行を選択します ( サーバの設定ができていない場合は次項目の設定も行ってください ) サーバの設定ができていない場合は新規サーバの定義ダイアログが表示されますのでサーバーのホスト名およびサーバタイプを選択して [ 次へ ] をクリックします ( 右図はローカルマシンをサーバとしている場合です ) WebOTX サーバの新規作成ダイアログではサーバーのバージョンに WebOTX Standard-J Edition V8 サーバーユーザに admin サーバーパスワードに adminadmin( 初期の場合 ) を入力してユーザドメインポートが 6212( 初期の場合 ) になっていることを確認して [ 次へ ] をクリックします配備されたことの確認およびはウィンドウビューの表示よりその他よりサーバーを選択してサーバービューを表示して確認してください再配備したい場合は対象サーバー上で右クリックし公開を選択してください

JSF アプリケーションを使う配備した JSF アプリケーションを使ってみます Web ブラウザを起動し以下の URL へアクセスします http://localhost/jsfsample/input.

37 サーバの設定ができていない場合は新規サーバの定義ダイアログが表示されますのでサーバーのホスト名およびサーバタイプを選択して [ 次へ ] をクリックします ( 右図はローカルマシンをサーバとしている場合です ) JSF アプリケーションを使う配備した JSF アプリケーションを使ってみます Web ブラウザを起動し以下の URL へアクセスします画面が表示されたら名前を入力して [Input] をクリックします javax/faces/* ** が実行時にロードエラーになる場合は jvm-options に -Dcom.nec.webotx. enterprise.overridea blejavaxpackages = javax.faces を追加する必要があります入力した名前が表示されます

WebOTXマニュアル

WebOTXマニュアル WebOTX アプリケーション開発ガイド WebOTX アプリケーション開発ガイドバージョン : 7.1 版数 : 初版リリース : 2007 年 7 月 Copyright (C) 1998-2007 NEC Corporation. All rights reserved. 3-1-1 目次 3. J2EE WTP...3 3.1. Webアプリケーション...3 3.1.1. Webアプリケーションを作成する...3