4.2.2.4. ガジェット内にあるテキストボックスなどの要素へのアクセス¶
ガジェット内に配置してある、テキストボックスやドロップダウンリストなどに値を設定するなどの操作をする際にAccessorを利用します。
項目
4.2.2.4.1. Accessorとは¶
intra-mart Accel Kaiden! ではガジェット（ガジェットブロック・TMtable）内に配置してあるテキストボックスやドロップダウンなどのname属性・id属性を、ガジェット初期化時に変更します。そのため、例えば”txt”というidをテキストボックスにつけたとしても、$(“#txt”)では取得できなくなっています。Accessorでは、書き換わる前のname属性/id属性でアクセスできるようにし、さらに値取得・設定などよく使う機能を付加しています。
4.2.2.4.2. Accessorの取り出し¶
ガジェットが初期化されたタイミングで、以下のようにAccessorを取得できます。
// ブロックに対するAccessor var blockAccessor = KAIDEN.getGadget("ガジェットID").blockAccessors["ブロックID"]; // TMtableに対するAccessor var tmtableAccessor = KAIDEN.getGadget("ガジェットID").tmtables["TMテーブルID"].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>
4.2.2.4.3. Accessorを用いた各要素へのアクセス¶
各要素がガジェットブロック内にあるのかTMtable内にあるのかにより引数に違いがありますが、idでアクセスする場合にはjQueryと同様に先頭に”#”を付与します。name属性の場合には”[name=’‘]”という装飾をせずにそのまま指定できます。各ブロックへのAccessorを利用することで、例えばガジェットが異なるがname属性やid属性が同じものが存在した場合でも、確実に該当ガジェットの要素へアクセスできます。
4.2.2.4.3.1. ガジェットブロックの場合¶
// ブロックに対するAccessor var blockAccessor = KAIDEN.getGadget("ガジェットID").blockAccessors["ブロックID"]; var findName = blockAccessor("name属性"); //name属性でのアクセス var findId = blockAccessor("#id属性"); //id属性でのアクセス
4.2.2.4.3.2. TMtableの場合¶
// TMtableに対するAccessor var tmtableAccessor = KAIDEN.getGadget("ガジェットID").tmtables["TMテーブルID"].tmtableAccessor; var findName = tmtableAccessor("name属性", "タプルID"); //name属性でのアクセス var findId = tmtableAccessor("#id属性" , "タプルID"); //id属性でのアクセスコラム
タプルIDに関しては、 TMtableプログラミング を参照してください。
4.2.2.4.4. Accessorを用いた各要素への主な操作¶
Accessorを用いてよく利用する機能を以下に挙げます。
4.2.2.4.4.1. 値を設定する／取得する¶
//値を設定 blockAccessor("name属性").setValue("設定する値"); //値を取得 blockAccessor("name属性").getValue();
4.2.2.4.4.2. スタイルシート（class)を適用する／適用を外す¶
//classを適用する blockAccessor("name属性").addClass("適用するclass"); //classの適用を外す blockAccessor("name属性").removeClass("適用を外すclass");
4.2.2.4.4.3. 無効にする／無効を解除する¶
//無効にする blockAccessor("name属性").disabled(); //無効を解除する blockAccessor("name属性").removeDisabled();コラム
Accessorの詳細に関しては、APIリストを参照してください。
4.2.2.4.5. Accessorによるイベントの付与¶
Accessorのメソッドelem()を利用するとjQueryオブジェクトそのものが返却されますので、jQueryを通じて様々な操作が行えます。// ブロックに対するAccessor var blockAccessor = KAIDEN.getGadget("ガジェットID").blockAccessors["ブロックID"]; blockAccessor("name属性").elem().on("change", function() { //changeイベントの処理 });Accessorのメソッドelem()はその時点でエレメントが存在しないもしくは複数存在する場合はエラーを発生させますが、elem(true)とすると、エラーを抑止できます。そのためliveにてイベントを付与するときなどに便利です。// TMtableに対するAccessor var tmtableAccessor = KAIDEN.getGadget("ガジェットID").tmtables["TMテーブルID"].tmtableAccessor; tmtableAccessor("name属性").elem(true).live("change", function() { //changeイベント });コラム
TMtableはタプルが動的に増減するため、タプル0件の場合がありえます。そのためelem(true)としてjQueryオブジェクトを取り出す必要があります。コラム
通常、TMtableに対するAccessorでは、タプルIDを指定して対象エレメントを特定しますが、ここではあえてタプルIDを指定せずに「tmtableAccessor(“name属性”)」とすることで、全タプル内へのエレメントを対象とすることができます。
4.2.2.4.6. 隣接エレメントへのアクセッサ¶
同一ガジェットブロック内、もしくは同一TMtableの同一タプル内の別エレメントを隣接エレメントと呼びます。たとえば、下記のようにTmtable内にテキストボックスが２つある場合、”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>
4.2.2.4.6.1. 隣接エレメントへアクセス¶
たとえば、”text1”が変更されたら”text2”へ値をコピーしたい場合に隣接エレメントへのアクセッサを利用すると便利です。隣接エレメントへのアクセッサは、「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()); });コラム
隣接エレメントへのアクセッサは、TMtableだけでなくガジェットブロック内でも利用できます。