スクリプト開発向けタグライブラリ

imuiGadgetItem

コンポーネント情報
モジュールim_ui
導入されたバージョン8.0.3
バージョン8.0.3

機能説明

  • imuiGadgetBar タグ内に表示する開閉可能なコンテンツ領域を作成します。
  • ajax通信でコンテンツの中身を取得できます。
    • 開閉するたびに取得することも可能です。
  • 初期表示時の開閉状態を選択できます
  • 領域内のガジェットはリサイズで領域サイズの変更が可能です。
注意事項
  • imuiGadgetBar と組み合わせて使用してください。
    • 組み合わせて使用しない場合はレイアウトの崩れや、開閉処理が起こらないなど動作保証をしていません。
  • リモートページを表示する場合、タグボディで指定したコンテンツはクリアされます。
  • URLを指定できる属性に「%28」（エンコードされた「(」）を利用する事ができません。
    • URLに「%28」（エンコードされた「(」）を使用した場合、エラーログが出力されます。
  • onAjaxParameterExtendで配列やオブジェクトを返すと、サーバサイドで取得できません。
    • あらかじめ実装者がシリアライズするか、jQueryのserializeをそのまま使うかの2通りの方法があります。詳細は以下の サンプル を参照してください。
  • ajax通信でコンテンツの中身を取得して表示する場合は、返却するHTMLにテーマがかからないように指定してください。詳細は以下の サンプル を参照してください。

属性一覧

注釈 属性名 型 説明 省略時の動作
cache boolean ページキャッシュを有効にするかどうかを指定します
falseを指定した場合はガジェットを開閉するたびにコンテンツを再取得します		 false
defaultOpen boolean 初期表示時にアイテムを開いて表示するかどうかを指定します true
無害化 href string ガジェットアイテムのページURLを指定します #
id string ガジェットアイテムのidです 代替idを付与
loadRemote boolean リモートページの読み込みを許可するかどうかを指定します
有効にした場合のみ非同期通信でコンテンツを取得します
また有効にした場合、タグのボディに指定した値は全て削除されます		 true
method string リクエストメソッドを指定します
POSTとGET以外を指定した場合は初期値のGETが指定されたことになります		 GET
name string ガジェットアイテムのnameです 代替nameを付与
onAjaxBeforeSend string ajax通信が発生する直前に呼び出される関数名を指定します
明示的にfalseを返したときのみ、通信をキャンセルします		 -
onAjaxComplete string ajax通信終了後に呼ばれる関数名を指定します
通信結果が成功であったかエラーであったかに関係なく必ず実行されます		 -
onAjaxError string ajax通信失敗後に呼ばれる関数名を指定します -
onAjaxParameterExtend string ajax通信を実行する直前に呼び出される関数名を指定します
ajax関連のメソッド内で一番最初に呼び出されます		 -
onAjaxSuccess string ajax通信成功後に呼ばれる関数名を指定します -
国際化 無害化 title string ガジェットアイテムのタイトルを指定します -
無害化 その他 string ユーザ定義属性です -

サンプル

コンテンツをそのまま表示する

コンテンツをそのまま表示する
  • ボディ部に指定した値がそのまま表示されます。
  • imartタグとhtmlタグが使用できます。
HTML
<imart type="imuiGadgetBar" width="300">
  <imart type="imuiGadgetItem" >
    <imart type="imuiTextArea" value="imuiTextAreaで生成したテキストエリア"  width="250"/>
  </imart>
  <imart type="imuiGadgetItem" >
    <div>
      <input type="button" value="inputタグで生成したボタン" class="imui-button">
    </div>
  </imart>
</imart>

ajax通信でコンテンツの中身を取得する場合

ajax通信でコンテンツの中身を取得する場合
  • ajax通信でコンテンツの中身を取得する場合、タグボディで指定したコンテンツはクリアされます。
  • ajax通信でコンテンツの中身を取得するには以下の属性を指定してください。
    • loadRemote属性にtrueになる値を指定してください。falseを指定した場合は以下のすべての属性を指定してもajax通信が行われません。省略時はtrueになります。
    • hrefに通信先のURLを指定してください。取得が出来なかった場合にはコンテンツは空で表示されます。
    • method属性にPOSTかGETを指定してください。省略時はGETになります。
    • cache属性を指定してください。省略時はfalseになるのでアイテムを開くたびにコンテンツを取得します。
HTML
<imart type="imuiGadgetBar" width="300">
  <imart type="imuiGadgetItem" href="sample/gadgetBar_ajax">この文字列は削除され、hrefの指定先で取得したコンテンツが表示されます</imart>
  <imart type="imuiGadgetItem" href="sample/gadgetBar_ajax" loadRemote="false" >loadRemote="false"なのでこのまま表示されます</imart>
</imart>
routing-jssp-config/sample.xml
<?xml version="1.0" encoding="UTF-8"?>
<routing-jssp-config xmlns="http://www.intra-mart.jp/router/routing-jssp-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/router/routing-jssp-config routing-jssp-config.xsd ">
 
  <!-- サンプル向けの設定です。アクセス権の設定を行ってください。 -->
  <authz-default mapper="welcome-all" />
 
  <!-- imuiGadgetItemのコンテンツを取得 -->
  <file-mapping path="/sample/gadgetBar_ajax" page="sample/gadgetBar/gadgetBar_ajax" />
 
</routing-jssp-config>
サーバサイド JavaScript(sample/gadgetBar/gadgetBar_ajax.js)
var $date = new Date().getTime();
 
function init(request) {
    Web.getHTTPResponse().setContentType('text/plain; charset=utf-8');
}
HTML（sample/gadgetBar/gadgetBar_ajax.html）
<imart type="string" value=$date />

defaultOpen

defaultOpen
  • defaultOpenにtrueになる値を指定すると初期表示時に開いて表示されます。
  • defaultOpenにfalseになる値を指定すると初期表示時に閉じて表示されます。
サーバサイド JavaScript
var sortableFalse = false;
var sortableTrue = true;
HTML
<imart type="imuiGadgetBar" id="sampleId"  width="300">
  <imart type="imuiGadgetItem" defaultOpen=sortableTrue >sample3_1</imart>
  <imart type="imuiGadgetItem" defaultOpen=sortableFalse >sample3_2</imart>
</imart>

onAjaxParameterExtend

onAjaxParameterExtend
  • サーバサイドで配列やオブジェクトを扱うサンプルになります。以下の二通りがあります。
    • クライアントサイドでImJson.toJSONString()でJSON文字列に変換し、サーバサイドでImJson.parseJSON()でJSON文字列からJavaScriptオブジェクトに変換する
    • シリアライズはjQuery.ajax()で任せ、サーバサイドでの取得方法を変更する
HTML
<imart type="imuiGadgetBar">
  <imart type="imuiGadgetItem" href="sample/gadgetBar_ajax" onAjaxParameterExtend="onAjaxParameterExtend1" />
  <imart type="imuiGadgetItem" href="sample/gadgetBar_ajax2" onAjaxParameterExtend="onAjaxParameterExtend2" />
</imart>
<script type="text/javascript">
  function onAjaxParameterExtend1(obj) {
    var sampleObj = {};
    var sampleAry = ["sample",456];
    sampleObj = {
      string:"string",
      number:123,
      array:sampleAry
    }
    return ImJson.toJSONString(sampleObj)
  }
  function onAjaxParameterExtend2(obj) {
    return {'a': 'a', 'b': 'b', 'c': 'c', 'arr': [1, 2, 3]};
  }
</script>
routing-jssp-config/sample.xml
<?xml version="1.0" encoding="UTF-8"?>
<routing-jssp-config xmlns="http://www.intra-mart.jp/router/routing-jssp-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/router/routing-jssp-config routing-jssp-config.xsd ">
 
  <!-- サンプル向けの設定です。アクセス権の設定を行ってください。 -->
  <authz-default mapper="welcome-all" />
 
  <!-- imuiGadgetItemのコンテンツを取得 -->
  <file-mapping path="/sample/gadgetBar_ajax" page="sample/gadgetBar/gadgetBar_ajax" />
  <file-mapping path="/sample/gadgetBar_ajax2" page="sample/gadgetBar/gadgetBar_ajax" />
 
</routing-jssp-config>
サーバサイド JavaScript(sample/gadgetBar/gadgetBar_ajax.js)
var extension;
 
function init(request) {
    extension = ImJson.parseJSON(request.extension);
    Web.getHTTPResponse().setContentType('text/plain; charset=utf-8');
}
HTML（sample/gadgetBar/gadgetBar_ajax.html）
<imart type="repeat" list=extension.array item="record">
  <div>
    <imart type="string" value=record></imart>
  </div>
</imart>
サーバサイド JavaScript(sample/gadgetBar/gadgetBar_ajax2.js)
var extension = {};
 
function init(request) {
    extension.a = request['extension[a]'];
    extension.b = request['extension[b]'];
    extension.c = request['extension[c]'];
    extension.arr = request.getParameterValues('extension[arr][]');
    Web.getHTTPResponse().setContentType('text/plain; charset=utf-8');
}
HTML（sample/gadgetBar/gadgetBar_ajax2.html）
<imart type="repeat" list=extension item="record">
  <div>
    <imart type="string" value=record></imart>
  </div>
</imart>

ajax通信で取得したHTMLを返却する場合

  • このサンプルではリクエストへの属性として指定する方法でテーマが適用されていないHTMLを返却します。
HTML
<imart type="imuiGadgetBar" width="300">
  <imart type="imuiGadgetItem" href="sample/gadgetBar_ajax">この文字列は削除され、hrefの指定先で取得したコンテンツが表示されます</imart>
  <imart type="imuiGadgetItem" href="sample/gadgetBar_ajax" loadRemote="false" >loadRemote="false"なのでこのまま表示されます</imart>
</imart>
routing-jssp-config/sample.xml
<?xml version="1.0" encoding="UTF-8"?>
<routing-jssp-config xmlns="http://www.intra-mart.jp/router/routing-jssp-config" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.intra-mart.jp/router/routing-jssp-config routing-jssp-config.xsd ">
 
  <!-- サンプル向けの設定です。アクセス権の設定を行ってください。 -->
  <authz-default mapper="welcome-all" />
 
  <!-- imuiGadgetItemのコンテンツを取得 -->
  <file-mapping path="/sample/gadgetBar_ajax" page="sample/gadgetBar/gadgetBar_ajax" />
 
</routing-jssp-config>
サーバサイド JavaScript(sample/gadgetBar/adgetBar_ajax.js)
var $date = new Date().getTime();
 
function init(request) {
    request.setAttribute('imui-theme-builder-module','notheme');
}
HTML（sample/gadgetBar/gadgetBar_ajax.html）
<imart type="string" value=$date />

Copyright © 2012 NTT DATA INTRAMART CORPORATION