intra-mart Accel Platform スクリプト開発モデル プログラミングガイド 第17版 2021-12-01

拡張<IMART>タグの作成

intra-mart Accel Platform で既に用意されている<IMART>タグ以外に、ユーザが定義し、独自の機能を持たせた任意の<IMART>タグを拡張<IMART>タグと言います。
具体的には、<IMART>タグに対して、新しい type 属性を定義し、その type 属性が要求された時に、実際に処理を実行するタグ関数を登録することで、html 側で API を拡張できる機能です。
拡張<IMART>タグには、Imart.defineType 関数と initializer-XXX.xml設定ファイルの2通りの定義方法があります。

前提条件

  • intra-mart e Builder for Accel Platform をインストール済みであること。
  • モジュール・プロジェクトの作成が完了していること。

設定ファイルで拡張<imart>タグを登録

以下の手順で拡張<IMART>タグを登録します。

ステップ1:initializerの作成

src/main/conf/products/initializer/initializer-[プロジェクト名].xmlを作成します。
initializer-sample.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 」ファイルを作成し、 以下のように実装をします。
sample\prog_guide\common_libs\api.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 」ファイルを作成し、 以下のように実装をします。
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>