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』を参照してください。