拡張<IMART>タグの作成¶
intra-mart Accel Platform で既に用意されている<IMART>タグ以外に、ユーザが定義し、独自の機能を持たせた任意の<IMART>タグを拡張<IMART>タグと言います。具体的には、<IMART>タグに対して、新しい type 属性を定義し、その type 属性が要求された時に、実際に処理を実行するタグ関数を登録することで、html 側で API を拡張できる機能です。拡張<IMART>タグには、Imart.defineType 関数と initializer-XXX.xml設定ファイルの2通りの定義方法があります。
拡張<IMART>タグの登録の流れ
設定ファイルで拡張<imart>タグを登録¶
以下の手順で拡張<IMART>タグを登録します。
ステップ1:initializerの作成¶
src/main/conf/products/initializer/initializer-[プロジェクト名].xmlを作成します。コラム
initializer-[プロジェクト名].xml は、厳密にはプロジェクト名ではなくモジュールのIDから決定されます。モジュールIDの”.”で分割してその末尾になります。例として、モジュールIDが「org.example.foo」場合は「initializer-foo.xml」をという名前で initializer を定義してください。intra-mart e Builder for Accel Platform で開発する場合はプロジェクト名と考えて問題ありません。注意
intra-mart e Builder for Accel Platform でプロジェクトを作成する際は 「im」 で始まる名前は利用できません。ファイルに内容を加えます。記述方法は、<jssp-tag><tag-script>タグ定義js ファイルのパス#実行関数</tag-script></jssp-tag>です。<?xml version="1.0" encoding="UTF-8"?> <initializer-config xmlns="http://intra-mart.co.jp/system/secure/product/initializer/config/initializer-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://intra-mart.co.jp/system/secure/product/initializer/config/initializer-config ../../../schema/initializer-config.xsd "> <jssp-tag> <tag-script>sample/prog_guide/common_libs/imart_tag#imSample1</tag-script> </jssp-tag> </initializer-config>
ステップ2:initializerに設定したjsファイルの作成¶
上記のxmlにて設定したjsファイルを作成します。この例では、プロジェクトの src/main/jssp/src/sample/prog_guide/common_libs という階層でフォルダを作成し、作成したフォルダ配下に「 imart.js 」ファイルを作成し、 以下のように実装をします。/** * 第1引数 attributes は、<IMART> タグにより指定された引数群になります。<br> * 第2引数 innerContent は、<IMART> と </IMART> に挟まれた内部ソース(実行オブジェクト形式)になります。<br> * innerContent は execute() メソッドを呼び出さないとオブジェクトの中身を参照できません。 */ function imSample1(attributes,innerContent){ var width = "500px"; var height = "500px"; // imart タグ内のオブジェクトの実行を行います。 var inner = innerContent.execute(); if(attributes.width){ width = attributes.width; } if(attributes.height){ height = attributes.height; } if(inner.length < 1){ inner = "拡張imartタグ"; } return '<div class="imui-title" style="width:' + width + ';height:' + height + ';"><h1>' + inner + '</h1></div>'; }
ステップ3:モジュールのデプロイ¶
エクスポートしたユーザモジュールを含んだwarファイルを作成します。そのwarファイルをデプロイして intra-mart Accel Platform を再起動します。注意
initializer は warファイルに含まれるモジュール構成を元に読み込まれるので、一旦ユーザモジュールにしてwarファイルに組み込んだ形でないと動作しません。ユーザモジュールに関しては、『 intra-mart e Builder for Accel Platform アプリケーション開発ガイド / immファイルのエクスポート 』を参照してください。
ステップ4:登録した拡張<IMART>タグの呼び出し¶
登録した拡張<IMART>タグを使用するには、htmlでタグの呼び出しを記述します。<imart type="imSample1" width="100px" height="50px"></imart>出力されるHTMLは以下のようになります。<div class="imui-title" style="width:100px;height:50px;"><h1>拡張imartタグ</h1></div>
Imart.defineType 関数で拡張<imart>タグを登録¶
以下の手順で拡張<IMART>タグを登録します。
ステップ1:任意の js ファイルにユーザ定義関数を格納する¶
この例では、プロジェクトの src/main/jssp/src/sample/prog_guide/common_libs という階層でフォルダを作成し、作成したフォルダ配下に「 imart_tag.js 」ファイルを作成し、 以下のように実装をします。/** * <IMART> タグの実行関数を定義します。 * 第1引数で指定した定義名称が <IMART> タグの type 属性での指定名称になります。 * 第2引数には、<IMART> タグの type 属性により定義名称でコールされた際に実行する関数を指定します。 * 関数内では、実行時に2つの引数を取ります。 */ Imart.defineType("imSample2",imSample2); function init(request){ } /** * 第1引数 attributes は、<IMART> タグにより指定された引数群になります。<br> * 第2引数 innerContent は、<IMART> と </IMART> に挟まれた内部ソース(実行オブジェクト形式)になります。<br> * innerContent は execute() メソッドを呼び出さないとオブジェクトの中身を参照できません。 */ function imSample2(attributes,innerContent){ var width = "500px"; var height = "500px"; // imart タグ内のオブジェクトの実行を行います。 var inner = innerContent.execute(); if(attributes.width){ width = attributes.width; } if(attributes.height){ height = attributes.height; } if(inner.length < 1){ inner = "拡張imartタグ"; } return '<div class="imui-title" style="width:' + width + ';height:' + height + ';"><h1>' + inner + '</h1></div>'; }
ステップ2:intra-mart Accel Platform の再起動¶
intra-mart Accel Platform を再起動します。
ステップ3:登録した拡張<IMART>タグの呼び出し¶
登録した拡張<IMART>タグを使用するには、htmlでタグの呼び出しを記述します。<imart type="imSample2" width="100px" height="50px"></imart>出力されるHTMLは以下のようになります。<div class="imui-title" style="width:100px;height:50px;"><h1>拡張imartタグ</h1></div>