テンプレート作成チュートリアル¶
業務スケルトンはユーザが任意のテンプレートを作成し、拡張できます。この項では、スクリプト開発用の簡単なhtmlファイルおよびjsファイルを出力する業務スケルトンテンプレートを作成し、業務スケルトンの拡張方法について体験します。
チュートリアルの流れ
プラグインプロジェクトの作成¶
まず、e Builder上部ツールバーより「ファイル」→「新規作成」→「プロジェクト」を選択します。一覧より、「プラグイン開発」→「プラグイン・プロジェクト」を選択します。プロジェクトの設定をします。ここではプロジェクト名を「myTemplateProject」とし、その他項目はデフォルトとし、次へ進みます。プラグインの設定をします。オプション項目の「アクティベーター...」および「このプラグインをUIに追加」のチェックを外し、次へ進みます。プラグインのテンプレート一覧が表示されますので、「業務スケルトンテンプレートプラグイン」を選択して次へ進みます。業務スケルトンの設定をします。任意のID・名称を入力して終了ボタンをクリックします。業務スケルトンテンプレート用のプラグインプロジェクトが出力されました。
プラグインプロジェクトの実行¶
では、出力されたプラグインプロジェクトを実行してみましょう。plugin.xmlを表示し、「概要」タブを選択し、テストの項目の「Eclipseアプリケーションの起動」を選択します。新規でe Builderが起動します。初回起動時はプロジェクトがまだ何もない状態のため、対象となるモジュールプロジェクトを新規作成します。 (手順は割愛)業務スケルトンウィザードを実行します。「テンプレート選択」画面に作成したテンプレートが表示されているのが確認できます。作成されたテンプレートを選択して次へ進みます。概要ページが表示されます。そのまま次へ進みます。業務テンプレート設定ページが表示されます。各項目に適当な値を設定して次へ進みます。設定項目の確認ページが表示されますので終了ボタンを押下してウィザードを終了します。プラグインプロジェクト直下に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タグは表示するページの設定を記述しており、resource属性に使用するテンプレートファイルを指定します。ここでは編集しないでそのまま利用することにします。<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> "sample.txt" </output> </template Builder> </builders>上記ではantの実行とテンプレートファイルの出力の2つの記述がされていますが今回はantの実行についての説明は割愛します。チュートリアルではhtmlファイルとjsファイルの2つを出力しますので、下記のように修正します。<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ファイルを出力するテンプレート作成を通して業務スケルトン拡張の基本的な流れを把握しました。