intra-mart Accel Kaiden! プログラミングガイド 第20版 2023-12-22

3.2.3. Accessor

本項では、intra-mart Accel Kaiden!のJavaScriptライブラリ(Accessor)の仕様を解説します。

3.2.3.1. Accessorとは?

intra-mart Accel Kaiden!のガジェット(ブロック・TMTable)では、
ガジェットの初期化処理でエレメントのname(id)属性をガジェットやブロックを考慮した値に変更します。
そのため、JSPで id=”txt”と設定したテキストボックスが $(“#txt”) では取得できません。

Accessorとは、変更前のname(id)属性でアクセスできるようにするJavaScriptライブラリです。
上記に加え、値の取得や設定などよく使う機能を用意しています。

コラム

Accessorの詳細は、『intra-mart Accel Kaiden! JsDoc』を参照してください。

3.2.3.2. Accessorの取得

ガジェットが初期化された後に、次の様にAccessorを取得できます。
// ブロックに対するAccessor
var blockAccessor   = KAIDEN.getGadget("ガジェットID").blockAccessors["ブロックID"];
// TMtableに対するAccessor
var tmtableAccessor = KAIDEN.getGadget("ガジェットID").tmtables["TMTableID"].tmtableAccessor;

コラム

ガジェットの初期化は、</k:gadgetContainer>の直後に行われます。
そのため、ガジェットに対する操作は、</k:gadgetContainer>の後続に<script>にて記載します。
<k:gadgetContainer
  gadgetClass="${gadgetClass}"
  gadgetVariation="${gadgetVariation}"
  gadgetInstance="${gadgetInstance}"
  gadgetTitle="ガジェットタイトル"
  gadgetId="${gadgetId}"
>
  <k:blockContainer id="inputArea">
    <k:text name="txt" mode="0" />
  </k:blockContainer>
</k:gadgetContainer>

<script type="text/javascript">
  jQuery(function($) {
    //この時点ではガジェットが初期化されてますので、各種操作が可能です。
  }
</script>

3.2.3.3. 各要素へのアクセス

各要素がブロック内にあるのか、TMTable内にあるのかにより引数の違いはありますが、
idでアクセスする場合にはjQueryと同様に先頭に”#”を付与します。
name属性の場合には”[name=’‘]”という装飾をせずにそのまま指定できます。

各ブロックへのAccessorを利用することで、例えばガジェットが異なるがname属性やid属性が同じものが存在した場合でも、
確実に該当ガジェットの要素へアクセスできます。
  • ガジェットブロックの場合
    // ブロックに対するAccessor
    var blockAccessor   = KAIDEN.getGadget("ガジェットID").blockAccessors["ブロックID"];
    
    var findName = blockAccessor("name属性"); //name属性でのアクセス
    var findId   = blockAccessor("#id属性");  //id属性でのアクセス
    
  • TMtableの場合
    // TMtableに対するAccessor
    var tmtableAccessor = KAIDEN.getGadget("ガジェットID").tmtables["TMTableID"].tmtableAccessor;
    
    var findName = tmtableAccessor("name属性", "タプルID"); //name属性でのアクセス
    var findId   = tmtableAccessor("#id属性" , "タプルID"); //id属性でのアクセス
    

3.2.3.4. 各要素の主な操作

Accessorを用いてよく利用する操作を解説します。
  • 値を設定する/取得する
    //値を設定
    blockAccessor("name属性").setValue("設定する値");
    
    //値を取得
    blockAccessor("name属性").getValue();
    
  • スタイルシート(class)を適用する/適用を外す
    //classを適用する
    blockAccessor("name属性").addClass("適用するclass");
    
    //classの適用を外す
    blockAccessor("name属性").removeClass("適用を外すclass");
    
  • 無効にする/無効を解除する
    //無効にする
    blockAccessor("name属性").disabled();
    
    //無効を解除する
    blockAccessor("name属性").removeDisabled();
    

3.2.3.5. イベントの追加

Accessorのメソッドelem()を利用するとjQueryオブジェクトそのものが返却されますので、
jQueryを通じて様々な操作が行えます。

次の例では、エレメントの”on”イベントを追加しています。
  • “on(change)”イベントの追加
    // ブロックに対するAccessor
    var blockAccessor   = KAIDEN.getGadget("ガジェットID").blockAccessors["ブロックID"];
    
    blockAccessor("name属性").elem().on("change", function() {
      //changeイベントの処理
    });
    
Accessorのメソッドelem()は、その時点でエレメントが存在しない、または複数存在する場合にエラーが発生しますが、
elem(true)とすると、エラーの発生を抑止することができます。
そのため、”live”イベントを付与する場合などに便利に使用できます。
  • “live(change)”イベントの追加
    // TMtableに対するAccessor
    var tmtableAccessor = KAIDEN.getGadget("ガジェットID").tmtables["TMTableID"].tmtableAccessor;
    tmtableAccessor("name属性").elem(true).live("change", function() {
      //changeイベント
    });
    

コラム

TMTableはタプルが動的に増減するため、タプルが存在しない(0件)場合があります。
そのため、elem(true)としてjQueryオブジェクトを取り出す必要があります。

コラム

通常、TMTableに対するAccessorでは、タプルIDを指定して対象エレメントを特定しますが、
ここではあえてタプルIDを指定せずに「tmtableAccessor(“name属性”)」とすることで、全てのタプル内エレメントを対象とすることができます。

3.2.3.6. 隣接要素へのアクセス

同一ブロック、またはTMTableの同一タプル内の別要素を隣接要素と呼びます。
たとえば、以下のようにTMTable内にテキストボックスが2つある場合、”text1”と”text2”が隣接要素です。
<k:tmtable id="sampleTmtable" class="imui-form">
  <thead>
    <tr>
      <th><k:surface surfaceKey="入力欄1" requiredMark="true"/></th>
      <th><k:surface surfaceKey="入力欄2" requiredMark="true"/></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><k:text name="text1" mode="0"/></td>
      <td><k:text name="text2" mode="0"/></td>
   </tr>
  </tbody>
</k:tmtable>
“text1”の値が変更された場合に、”text2”へ値をコピーする様な実装が必要な場合は、隣接要素へのAccessorを使用してください。
隣接要素へのAccessorは、「KAIDEN.gadgetMan.getNeighboringAccessor」にて取得します。
// TMtableに対するAccessor
var tmtableAccessor = KAIDEN.getGadget("ガジェットID").tmtables["sampleTmtable"].tmtableAccessor;
tmtableAccessor("text1").elem(true).live("change", function() {
  KAIDEN.gadgetMan.getNeighboringAccessor(this, "text2").setValue($(this).val());
});

コラム

隣接要素へのAccessorは、ブロック、TMTableのどちらでも使用可能です。
隣接要素へのAccessor(NeighboringAccessor)の詳細は、『intra-mart Accel Kaiden! JsDoc』を参照してください。