基本( intra-mart Accel Platform での初めてのプログラミング)¶
本項では、 intra-mart Accel Platform での開発の導入として、intra-mart e Builder for Accel Platform で TERASOLUNA Server Framework for Java (5.x) を利用した Hello World を作成することによって intra-mart Accel Platform での TERASOLUNA Server Framework for Java (5.x) の開発の流れを体験します。
チュートリアルの流れ
前提条件¶
intra-mart e Builder for Accel Platform をインストール済みであること。
intra-mart Accel Platform をインストールし、初期設定までが完了していること。
Jugglingのモジュール構成にてベースモジュールに TERASOLUNA Server Framework for Java (5.x) for Accel Platform を含めて作成してください。
intra-mart e Builder for Accel Platform で Hello World を作ろう¶
以下の手順で Hello World を作成していきます。
ステップ1:プロジェクトの作成と設定¶
intra-mart e Builder for Accel Platform 上にモジュール・プロジェクトを作成し、プロジェクトの設定を行います。本項では、モジュール・プロジェクトは「hello_terasoluna」という名称で作成した場合を例に説明します。プロジェクトの作成・設定の方法に関しては、『 intra-mart e Builder for Accel Platform アプリケーション開発ガイド』の『モジュール・プロジェクト作成』、および『プロジェクトの設定』の項を参照してください。
ステップ2:Bean定義ファイル applicationContext.xml の作成¶
プロジェクト固有のBean定義ファイルを作成します。ここでは、src/main/resources/META-INF/spring/applicationContext-hello_terasoluna.xml として作成します。この設定により、指定パッケージ配下のクラスがSpringのコンポーネント対象として扱われます。なお、下記の例ではルートパッケージを”sample.tgfw”とします。<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd"> <!-- DIコンポーネントの対象とする要素のトップレベルパッケージ --> <context:component-scan base-package="sample.tgfw" /> </beans>コラム
Bean定義ファイルを作成する際、以下のフォルダにapplicationContextで始まるxmlファイル名で配置してください。フォルダ:src/main/resources/META-INF/spring/ または src/main/webapp/WEB-INF/classes/META-INF/spring/ファイル名の例: applicationContext-foo.xml
ステップ3:入力画面の作成¶
入力画面(index.jsp)を作成します。プロジェクトの src/main/webapp の下に /WEB-INF/views/sample/tgfw/hello という階層でフォルダを作成し、作成したフォルダ配下に「 index.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="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <!-- 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 (TERASOLUNA)</h1> </div> <!-- 入力画面 --> <div class="imui-form-container-narrow"> <p> <label for="name">Please input the name. </label> </p> <!-- 入力フォームの設定 actionに結果表示画面へのパスを入力(Helloアクションのoutputメソッドを呼び出す) --> <form:form action="sample/tgfw/hello/output" modelAttribute="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" /> </form:form> </div>注意
文字コードを UTF-8 にして保存してください。
ステップ4:出力画面の作成¶
出力画面(output.jsp)を作成します。プロジェクトの src/main/webapp の下の /WEB-INF/views/sample/tgfw/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="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="f" uri="http://terasoluna.org/functions" %> <%@ taglib prefix="t" uri="http://terasoluna.org/tags" %> <!-- HEADタグ --> <imui:head> <title>Hello, World</title> </imui:head> <!-- 画面上に表示されるタイトル --> <div class="imui-title"> <h1>Hello, World (TERASOLUNA)</h1> </div> <!-- ツールバー(前の画面へと戻るボタンを配置) --> <div class="imui-toolbar-wrap"> <div class="imui-toolbar-inner"> <ul class="imui-list-toolbar"> <li> <!-- 「戻る」ボタンのアイコン、HelloControllerのindexメソッドが呼び出される。 --> <a href="sample/tgfw/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(helloForm.name)}" id="name" name="name" size="10" class="imui-text-readonly" readonly /> </label> </div>コラム
intra-mart Accel Platform 上で動作するHTMLファイルに記述するタグで <HTML>、<BODY>は記述せず、<HEAD>は<imui:head>を利用してください。 詳細は、 UI(デザインガイドライン) を参照してください。
TERASOLUNA Server Framework for Java (5.x) for Accel Platform において、JSPなどのView用のファイルを置くディレクトリを/WEB-INF/classes/META-INF/spring/applicationContext-im_tgfw_web.xmlで設定しています。デフォルト値は/WEB-INF/viewsが指定してあります。注意
文字コードを UTF-8 にして保存してください。
ステップ5:Formクラスの作成¶
入力情報を保持する Form クラスを作成します。ここでは、パッケージ名は sample.tgfw.app.hello、クラス名は HelloForm とします。HelloForm に記述するソースは以下の通りです。package sample.tgfw.app.hello; /** * index.jspで入力された情報を保持するFormクラスです。 * @author intra-mart */ public class HelloForm { private String name; // テキストエリアに入力された値 public String getName() { return name; } public void setName(String name) { this.name = name; } }注意
文字コードを UTF-8 にして保存してください。
ステップ6:Controllerクラスの作成¶
入力画面、および出力画面に対する処置を行う Controller クラスを作成します。ここでは、パッケージ名はsample.tgfw.app.hello、クラス名は HelloController とします。クラスには、 @Controller アノテーション、 @RequestMapping アノテーションを設定してください。URLと対応させるメソッドには、 @RequestMapping アノテーションを設定してください。Controller に記述するソースは以下の通りです。package sample.tgfw.app.hello; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("sample/tgfw/hello") public class HelloController { @RequestMapping public String index() { return "sample/tgfw/hello/index.jsp"; } @RequestMapping("output") public String output(HelloForm helloForm) { return "sample/tgfw/hello/output.jsp"; } }注意
文字コードを UTF-8 にして保存してください。コラム
リクエストとメソッドの対応は、 RequestMappingHandlerMapping と RequestMappingHandlerAdapter を利用しています。applicationContext*.xml に mvc:annotation-driven の設定がある必要があります。TERASOLUNA Server Framework for Java (5.x) for Accel Platform では、標準で applicationContext-im_tgfw_web.xml にこの設定をしています。ここまでで Hello World の作成は完了です。ここまで作成されたソースは、プロジェクトの設定によって Resin サーバ上のフォルダに適切にデプロイされています。本番環境に移行する際は、作成したプロジェクトをユーザ定義モジュール化、または、ソースをデプロイして適用を行ってください。
登録と画面表示¶
ステップ1:メニューの登録¶
ここでは、上記で作成したサンプルをサイトマップに登録して実際に実行します。Resin を起動し、テナント管理者で intra-mart Accel Platform にログインします。ログイン画面の URL は「 http://<HOST>:<PORT>/<CONTEXT_PATH>/login 」です。その後、メニューのメンテナンス画面を表示し、メニューを以下のように設定します。ここで作成する新規アイテムの情報に以下の情報を入力します
メニューアイテム名(日本語) Hello World for TERASOLUNA URL sample/tgfw/hello また、メニューを閲覧できるようにするために作成した「 Hello 」グループに以下のように認可を設定します。本項では、Hello グループに対してゲストユーザと認証ユーザの参照を許可するように設定します。詳細については 認可 を参照してください。
ステップ2:Hello Worldの動作¶
設定したメニューを反映させ、実行します。下の画像のようにサイトマップから選択できます。サイトマップで先ほど登録したメニューアイテムをクリックすると入力画面が表示されます。テキストボックスに名前を入力すると結果画面に表示されます。結果画面の上部にある「戻る」アイコンを押下すると、入力画面へと戻ります。コラム
このチュートリアルでは、下記のポイントを確認しました。
TERASOLUNA Server Framework for Java (5.x) を用いて、簡単なアプリケーション(Hello World)の作成を通して、intra-mart Accel Platform におけるアプリケーション作成からメニューに登録するまでの流れを把握しました。
参考¶
すぐ試してみたい方は作成済みのプロジェクトをインポートしてください¶
本チュートリアルで作成した Hello World は、モジュール・プロジェクト「hello_terasoluna」として hello_terasoluna.zip より入手できます。このダウンロードした zip ファイルは、下記手順にて e Builder にインポートでき、すぐ実行確認できます。はじめに、下記手順にて e Builder にインポートしてください。
- e Builder を起動
- ツールバーメニュー[ファイル]-[インポート]よりインポートウィザード画面を開く
- 項目[General]-[既存プロジェクトをワークスペースへ]を選択し次へ
- [アーカイブ・ファイルの選択]項目よりダウンロードしたzipファイルを選択し、[終了]ボタンをクリック
以上の手順で、モジュール・プロジェクト「hello_terasoluna」がインポートされます。次に、モジュール・プロジェクトのプロパティにてWebアーカイブディレクトリを設定し、デバッグサーバを起動します。デバッグサーバ起動後、ブラウザより下記のように直接URLを指定してアクセスすると、入力画面が表示され、Hello World の動作確認が行えます。http://<HOST>:<PORT>/<CONTEXT_PATH>/sample/tgfw/hello