3. 基本( intra-mart Accel Platform での初めてのプログラミング)¶
本項では、 intra-mart Accel Platform での開発の導入として、 intra-mart e Builder for Accel Platform で SAStruts フレームワークを利用した Hello World を作成することによって intra-mart Accel Platform での SAStruts フレームワークの開発の流れを体験します。
チュートリアルの流れ
前提条件¶
intra-mart e Builder for Accel Platform をインストール済みであること。
intra-mart Accel Platform をインストールし、初期設定までが完了していること。
ベースモジュールに SAStruts 開発フレームワークを含めて環境を作成してください。実行環境は単体テスト用で作成してください。
intra-mart e Builder for Accel Platform で Hello World を作ろう¶
以下の手順で Hello World を作成していきます。
ステップ1:プロジェクトの作成と設定¶
intra-mart e Builder for Accel Platform 上にモジュール・プロジェクトを作成し、プロジェクトの設定を行います。プロジェクトの作成・設定の方法に関しては、『 intra-mart e Builder for Accel Platform アプリケーション開発ガイド』の『モジュール・プロジェクト作成』、および『プロジェクトの設定』の項を参照してください。
ステップ2:convention.diconの修正¶
convention.dicon でルートパッケージの設定をします。SAStruts フレームワークでは、ルートパッケージをパッケージ名の先頭に指定して、action などのパッケージを作成して必要なファイルを格納し、URL を指定します。以下にAction クラスを作成する際に、パッケージ名と URL の例を示します。ex: Action クラス名:ルートパッケージ.action.foo.BarActionとした場合、URL は http://ホスト名/war名/foo/bar/ となる。<% war_home %>/WEB-INF/classes/convention.dicon を src/main/resource 配下に配置し、ルートパッケージを決めて、 convention.dicon に以下の様に記述します。なお、下記の例ではルートパッケージを”sample.sastruts”とします。<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE components PUBLIC "-//SEASAR//DTD S2Container 2.4//EN" "https://www.seasar.org/dtd/components24.dtd"> <components> <component class="jp.co.intra_mart.framework.extension.seasar.convention.IMNamingConventionImpl"> <initMethod name="addRootPackageName"> <arg>"org.seasar.framework.container.warmdeploy"</arg> </initMethod> <initMethod name="addRootPackageName"> <arg>"tutorial"</arg> </initMethod> <initMethod name="addRootPackageName"> <arg>"sample.sastruts"</arg> </initMethod> </component> <component class="org.seasar.framework.convention.impl.PersistenceConventionImpl"/> </components>コラム
convention.diconなどの各種設定を行うdiconファイルの仕様に関しては、seasar2のホームページを参照してください。
ステップ3:入力画面の作成¶
入力画面(index.jsp)を作成します。プロジェクトの src/main/webapp の下に /WEB-INF/view/sample/sa/hello という階層でフォルダを作成し、作成したフォルダ配下に「 index.jsp 」という名前でファイルを作成し、以下のソースを実装します。<%@page pageEncoding="UTF-8"%> <%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui"%> <%@ taglib prefix="s" uri="http://sastruts.seasar.org" %> <%@ taglib prefix="f" uri="http://sastruts.seasar.org/functions" %> <!-- HEADタグ --> <imui:head> <title>Hello, World</title> <script type="text/javascript"> $(function() { $('#button').click(function() { $('#helloForm').submit(); }); }); </script> </imui:head> <!-- 画面上に表示されるタイトル --> <div class="imui-title"> <h1>Hello, World (SAStruts)</h1> </div> <!-- 入力画面 --> <div class="imui-form-container-narrow"> <p> <label for="name">Please input the name. </label> </p> <!-- 入力フォームの設定 actionに結果表示画面へのパスを入力(Helloアクションのoutputメソッドを呼び出す) --> <s:form action="/sample/hello/output/" styleId="helloForm"> <div> <!-- テキストボックス --> <imui:textbox type="text" value='' id="name" name="name" size="10" /> </div> <!-- submitボタン --> <imui:button name="button" value="Hello!!" class="mt-10" id="button"></imui:button> </s:form> </div>注意
文字コードを UTF-8 にして保存してください。
ステップ4:出力画面の作成¶
出力画面(output.jsp)を作成します。プロジェクトの src/main/webapp/WEB-INF/view/sample/sa/hello の配下に「 output.jsp 」という名前でファイルを作成し、以下のソースを実装します。<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@ taglib prefix="imui" uri="http://www.intra-mart.co.jp/taglib/imui"%> <%@ taglib prefix="s" uri="http://sastruts.seasar.org" %> <%@ taglib prefix="f" uri="http://sastruts.seasar.org/functions" %> <!-- HEADタグ --> <imui:head> <title>Hello, World </title> <script type="text/javascript"> function back() { $('#back-form').submit(); }; </script> </imui:head> <!-- 画面上に表示されるタイトル --> <div class="imui-title"> <h1>Hello, World (SAStruts)</h1> </div> <!-- ツールバー(前の画面へと戻るボタンを配置) --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar"> <li> <!-- 「戻る」ボタンのアイコン、HelloActionのindexメソッドが呼び出される。 --> <a href=${f:url("/sample/hello")} class="imui-toolbar-icon" title="back"> <span class="im-ui-icon-common-16-back"></span> </a> </li> </ul> </div> </div> <!-- 出力結果 --> <div class="imui-form-container-narrow"> <label> <imui:textbox type="text" value="${f:h(helloDto.outputString)}" id="name" name="name" size="10" class="imui-text-readonly" readonly /> </label> </div>コラム
- intra-mart Accel Platform 上で動作するHTMLファイルに記述するタグで <HTML>、<BODY>は記述せず、<HEAD>は<imui:head>を利用してください。 詳細は、 UI(デザインガイドライン) を参照してください。
- SAStruts+S2JDBCフレームワークにおいて、JSPなどのView用のファイルを 置くディレクトリを/WEB-INF/web.xmlにてsastruts.VIEW_PREFIXで指定します。 sastruts.VIEW_PREFIXのデフォルト値は/WEB-INF/viewが指定してあります。 本ガイドではこのsastruts.VIEW_PREFIXの値がデフォルト値である /WEB-INF/viewであることを前提に説明をしています。
注意
文字コードを UTF-8 にして保存してください。
ステップ5:Formクラスの作成¶
入力情報を保持する Form クラスを作成します。ここでは、パッケージ名は sample.sastruts.form.sample、クラス名は HelloForm とします。以下に HelloForm に記述するソースを示します。package sample.sastruts.form.sample; /** * index.jspで入力された情報を保持するFormクラスです。 * @author intra-mart */ public class HelloForm { public String name; // テキストエリアに入力された値 }注意
文字コードを UTF-8 にして保存してください。
ステップ6:Dtoクラスの作成¶
出力情報を保持する Dto クラスを作成します。ここでは、パッケージ名は sample.sastruts.dto.sample、クラス名は HelloDto とします。以下に HelloDto に記述するソースを示します。package sample.sastruts.dto.sample; /** * 結果表示画面に渡すDTOクラス * @author intra-mart */ public class HelloDto { public String outputString; // 結果を保持する文字列 }注意
文字コードを UTF-8 にして保存してください。
ステップ7:Actionクラスの作成¶
入力画面、および出力画面に対する処置を行う Action クラスを作成します。ここでは、パッケージ名は sample.sastruts.action.sample、クラス名は HelloAction とします。以下に HelloAction に記述するソースを示します。package sample.sastruts.action.sample; import javax.annotation.Resource; import javax.servlet.http.HttpServletRequest; import org.seasar.struts.annotation.ActionForm; import org.seasar.struts.annotation.Execute; import sample.sastruts.dto.sample.HelloDto; import sample.sastruts.form.sample.HelloForm; /** * Hello Worldの処理を行うActionクラス * @author intra-mart */ public class HelloAction { @Resource @ActionForm public HelloForm helloForm; // 入力情報を保持するFormクラス @Resource public HelloDto helloDto; // 出力情報を保持するDTOクラス(publicにすること) /** * 入力ページのパスを返却します。 * @return 入力ページのパス */ @Execute(validator = false) public String index() { return "/sample/sa/hello/index.jsp"; } /** * 結果表示画面のパスを返却します。 * @return 結果表示画面のパス */ @Execute(validator = false) public String output() { helloDto.outputString = "Hello, " + helloForm.name; // 結果の情報を格納 return "/sample/sa/hello/output.jsp"; } }注意
文字コードを UTF-8 にして保存してください。これで Hello World の作成は完了です。ここまで作成されたソースは、プロジェクトの設定によって Resin サーバ上のフォルダに適切にデプロイされています。本番環境に移行する際は、作成したプロジェクトをユーザ定義モジュール化、または、ソースをデプロイして適用を行ってください。
登録と画面表示¶
ステップ1:メニューの登録¶
ここでは、上記で作成したサンプルをサイトマップに登録して実際に実行します。Resin を起動し、テナント管理者で intra-mart Accel Platform にログインします。ログイン画面の URL は「 http://<HOST>:<PORT>/<CONTEXT_PATH>/login 」です。その後、「メニュー設定」画面を表示し、メニューを以下のように設定します。ここで作成する新規アイテムの情報に以下の情報を入力します
メニューアイテム名(日本語) Hello World for SA URL sample/hello また、メニューを閲覧できるようにするために作成した「 Hello 」グループに以下のように認可を設定します。本項では、Hello グループに対してゲストユーザと認証ユーザの参照を許可するように設定します。詳細については 認可 を参照してください。
ステップ2:Hello Worldの動作¶
設定したメニューを反映させ、実行します。下の画像のようにサイトマップから選択できます。サイトマップで先ほど登録したメニューアイテムをクリックすると入力画面が表示されます。テキストボックスに名前を入力すると結果画面に表示されます。結果画面の上部にある「戻る」アイコンを押下すると、入力画面へと戻ります。コラム
このチュートリアルでは、下記のポイントを確認しました。
SAStruts フレームワークを用いて、簡単なアプリケーション(Hello World)の作成を通して、intra-mart Accel Platform におけるアプリケーション作成からメニューに登録するまでの流れを把握しました。