intra-mart e Builder for Accel Platform アプリケーション開発ガイド 第12版 2015-12-01

intra-mart e Builder for Accel Platform アプリケーション開発ガイド 第12版 2015-12-01

目次 ≪  業務スケルトンの実行 利用できる業務スケルトンテンプレート一覧  ≫

テンプレート作成チュートリアル

業務スケルトンはユーザが任意のテンプレートを作成し、拡張することができます。
この項では、スクリプト開発用の簡単なhtmlファイル及びjsファイルを出力する
業務スケルトンテンプレートを作成し、業務スケルトンの拡張方法について体験します。

プラグインプロジェクトの作成

まず、e Builder上部ツールバーより「ファイル」→「新規作成」→「プロジェクト」を選択します。
プロジェクトの設定
一覧より、「プラグイン開発」→「プラグイン・プロジェクト」を選択します。
プラグインプロジェクト
プロジェクトの設定をします。ここではプロジェクト名を「myTemplateProject」とし、
その他項目はデフォルトとし、次へ進みます。
プロジェクトの設定
プラグインの設定をします。オプション項目の「アクティベーター...」及び「このプラグインをUIに追加」のチェックを外し、次へ進みます。
プラグインの設定
プラグインのテンプレート一覧が表示されますので、「業務スケルトンテンプレートプラグイン」
を選択して次へ進みます。
プロジェクトの設定
業務スケルトンの設定をします。任意のID・名称を入力して終了ボタンを押します。
業務スケルトンの設定
業務スケルトンテンプレート用のプラグインプロジェクトが出力されました。
プロジェクト出力

プラグインプロジェクトの実行

では、出力されたプラグインプロジェクトを実行してみましょう。
plugin.xmlを表示し、「概要」タブを選択し、
テストの項目の「Eclipseアプリケーションの起動」を選択します。
Eclipseアプリケーションの起動
新規でe Builderが起動します。初回起動時はプロジェクトがまだ何もない状態のため、
対象となるモジュールプロジェクトを新規作成します。(手順は割愛)
Eclipseアプリケーションの起動
業務スケルトンウィザードを実行します。
テンプレート選択画面に作成したテンプレートが表示されているのが確認できます。
作成されたテンプレートを選択して次へ進みます。
業務スケルトンウィザード
概要ページが表示されます。
そのまま次へ進みます。
業務スケルトンウィザード
業務テンプレート設定ページが表示されます。
各項目に適当な値を設定して次へ進みます。
業務スケルトンウィザード
設定項目の確認ページが表示されますので
終了ボタンを押下してウィザードを終了します。
業務スケルトンウィザード
プラグインプロジェクト直下にsample.txtが生成され、
内容にウィザードの入力内容が反映されていることが確認できます。
業務スケルトンウィザード

テンプレートのカスタマイズ

それでは前項で作成したプロジェクトを元に、
簡単なスクリプト開発用の画面(html)とサーバーサイド処理(js)を作成するテンプレートに
カスタマイズしてみましょう。

ウィザードページの編集

plugin.xmlを開き「plugin.xml」のタブを選択すると、plugin.xmlがxmlエディタで表示されます。
このxml内の<plugin>→<wizard>要素を参照すると、
デフォルトでは下記のようになっているはずです。
<wizard>
   <page
         class="jp.co.intra_mart.business.skeleton.ui.wizard.page.OutlineWizardPageProvider"
         resource="resources/wizardPages/page0.txt"
         id="page0">
   </page>
   <page
         resource="resources/wizardPages/page1.xml"
         id="page1">
   </page>
</wizard>
wizardタグ内はウィザード内で表示するページを設定します。
pageタグは表示するページの設定を記述しており、
resouce属性に使用するテンプレートファイルを指定します。
ここでは編集しないでそのまま利用することにします。
resources/wizardPages/page0.txtファイルを開き、
このウィザードに関する説明を記述します。
例として下記のように記述してみます。
チュートリアルで作成したテンプレートウィザードです。
次に、resources/wizardPages/page1.xmlを表示します。
デフォルトでは下記のようになっています。
<?xml version="1.0" encoding="UTF-8"?>
     <wizardPage xmlns="http://business.skeleton.intra-mart.jp/xsd/CompositeWizardDefinition" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://business.skeleton.intra-mart.jp/xsd/CompositeWizardDefinition ../../schema/CompositeWizardPageDefinition.xsd ">
       <group id="group" name="group">
         <label id="label" name="label">label</label>
         <text id="text" name="text">textbox</text>
         <textarea id="textarea" name="textarea">textarea</textarea>
         <select id="select" name="select" selected="foo">{"foo", "bar", "baz"}</select>
       </group>
     </wizardPage>
上記のように、業務スケルトンウィザードの入力項目はXMLで記述して設定します。
デフォルトのままでは目的に沿わないので、例として下記のように修正します。
<?xml version="1.0" encoding="UTF-8"?>
    <wizardPage xmlns="http://business.skeleton.intra-mart.jp/xsd/CompositeWizardDefinition" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://business.skeleton.intra-mart.jp/xsd/CompositeWizardDefinition ../../schema/CompositeWizardPageDefinition.xsd ">
      <group id="group" name="出力するファイル設定">
        <text id="fileName" name="ファイル名">tutorial</text>
        <text id="displayName" name="画面名">チュートリアル</text>
      </group>
    </wizardPage>

ビルダーの編集

次にファイルを生成する処理（以下ビルダーと呼びます）のカスタマイズをしていきます。
plugin.xmlを開き <plugin>→<builders>を参照します。
デフォルトでは以下のようになっているはずです。
<builders>
  <builder
       name="%builderName"
       resource="resources/builders/ant/build.xml"
       id="build">
  </builder>
  <template Builder
       templateEncoding="UTF-8"
       name="%template BuilderName"
       template="resources/builders/templates/sample.ftl"
       id="template">
    <output>
       &quot;sample.txt&quot;
    </output>
  </template Builder>
</builders>
上記ではantの実行とテンプレートファイルの出力の2つの記述がされていますが
今回はantの実行についての説明は割愛します。
チュートリアルではhtmlファイルとjsファイルの２つを出力しますので、下記のように修正します。
<builders>
   <template Builder
         templateEncoding="UTF-8"
         name="チュートリアルのhtml"
         template="resources/builders/templates/tutorial_html.ftl"
         id="template">
      <output>
         "src/main/jssp/src/" + page1.group.fileName + ".html"
      </output>
   </template Builder>
   <template Builder
         templateEncoding="UTF-8"
         name="チュートリアルのjs"
         template="resources/builders/templates/tutorial_js.ftl"
         id="template">
      <output>
         "src/main/jssp/src/" + page1.group.fileName + ".js"
      </output>
   </template Builder>
</builders>
template Builderのtemplate属性に使用するテンプレートファイル名を指定します。
outputタグには出力するファイルのプロジェクトのルートからの絶対パスを入力します。
このとき、ウィザードページで入力した値を変数として利用することができます。
例では変数「page1.group.fileName」を使用していますが、
idが「page1」であるウィザードページの「id=group」内の「id=fileName」の値、
つまり「ファイル名」の入力値を示します。

テンプレートファイルの編集

それでは、上記のtemplate属性で指定したそれぞれのファイルのテンプレートを作成していきます。
まず、新規ファイル resources/builders/templates/tutorial/tutorial_html.ftlを作成し、以下のように編集します。
<#ftl encoding="UTF8" strip_whitespace=false strip_text=false strict_syntax=true /><#t>
  <!-- HEADタグ -->
  <imart type="head">
    <title>${page1.group.displayName}</title>
  </imart>
  <!-- 画面上に表示されるタイトル -->
  <div class="imui-title">
    <h1>${page1.group.displayName}</h1>
  </div>
       チュートリアルで作成されたページです。
テンプレートファイルでは、生成するファイルの内容を記述します。
変数の参照は${}で囲んで使用します。
例では${page1.group.displayName}を指定していますが、
これはウィザードページの画面名の値を参照しています。
同様に、新規ファイル resources/builders/templates/tutorial/tutorial_js.ftlを作成し、以下のように編集します。
<#ftl encoding="UTF8" strip_whitespace=false strip_text=false strict_syntax=true /><#t>

/**
 * @fileoverview ${page1.group.displayName}画面.
 */

/**
 * 初期化処理.
 *
 * 登録画面を表示するための初期化処理を行います。<br />
 *
 * @param {Request} request リクエスト情報
 * @type void
 */
function init(request) {
}
これでひとまず動作する状態になりましたので実際に実行してみましょう。
先ほどと同様にプラグインプロジェクトを実行し、別途起動したe Builder上で業務スケルトンを起動します。
その後、作成したテンプレートを選択すると、
テンプレートの説明ページにpage0.txtで設定した文言が表示されます。
業務スケルトンウィザード
テンプレートの設定ページではpage1.xmlで設定した要素が配置されているのが分かります。
ファイル名と画面名を任意の文字列に変更してウィザードを進めて出力を実行します。
業務スケルトンウィザード
出力結果。src/main/jssp/src配下に設定したファイル名でhtmlとjsファイルが出力されました。
業務スケルトンウィザード
htmlファイルの出力結果です。
変数を使用した箇所がウィザードの入力値で置換されているのが分かります。
<!-- HEADタグ -->
    <imart type="head">
      <title>チュートリアルの画面</title>
    </imart>
    <!-- 画面上に表示されるタイトル -->
    <div class="imui-title">
      <h1>チュートリアルの画面</h1>
    </div>
      チュートリアルで作成されたページです。
jsファイルの出力結果です。
変数が同様に置換されています。
/**
 * @fileoverview チュートリアルの画面画面.
 */

/**
 * 初期化処理.
 *
 * 登録画面を表示するための初期化処理を行います。<br />
 *
 * @param {Request} request リクエスト情報
 * @type void
 */
function init(request) {
}

コラム

このチュートリアルでは、下記のポイントを確認しました。
スクリプト開発用の簡単なhtml及びjsファイルを出力するテンプレート作成を通して業務スケルトン拡張の基本的な流れを把握しました。

業務スケルトンガイドの参照

ここまでで業務スケルトンテンプレートの簡単な作成方法について説明しましたが、
より実用的なテンプレートを作成したい場合、業務スケルトンガイドを一読しておくことをお勧めします。
e Builder上部メニューより、「ヘルプ」→「ヘルプ目次」を選択します。
e Builderヘルプ
ヘルプ画面が表示されますので、インデックスより「業務スケルトンガイド」を選択します。
ヘルプ画面
また、業務スケルトン作成ウィザードの左下「?」ボタンを押下しても参照することができます。
ウィザードからヘルプ表示

目次 ≪  業務スケルトンの実行 利用できる業務スケルトンテンプレート一覧  ≫

Copyright © 2015 NTT DATA INTRAMART CORPORATION

⇄ Sidebar ↑Top