JavaEE開発向けタグライブラリ

columnView

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

機能説明

  • カラムビューを作成します。
    • Max OS X のFinder（カラム表示）のようなインタフェースを提供します。
  • 項目を選択すると右へスクロールしていきます。
  • 配下にカラム情報を持たない項目を選択すると詳細情報を表示することができます。
  • カラム情報、詳細情報はそれぞれキャッシュすることができます。
  • 矢印キーなどのキーボード操作が可能です。
    • キーボード操作の詳細については こちら を参照してください。
注意事項
  • 詳細情報内にリンクを追加する場合は自動的に黒文字リンクになります。
    • 青文字リンクにする場合は、aタグにclass=“imui-accent”を指定してください。
  • テーブルの中にカラムビューを配置し、カラムビューの幅がテーブルの幅より大きくなってしまうとレイアウトが崩れる場合があります。
    • カラムビューの横幅に固定値を指定することでこの現象は回避することができます。詳細は以下の サンプル を参照してください。

属性一覧

注釈 属性名 型 説明 省略時の動作 実行時評価
Boolean属性 childrenCache Boolean 配下の情報をキャッシュするかどうかを指定します true
childrenLoadDelay Integer カラムを選択後に配下情報を検索するまでの時間を指定します(childrenLoader属性に指定した関数を呼ぶまでの時間)
単位はミリ秒になります		 50
必須
childrenLoader String カラムを選択後に配下情報を検索する関数を指定します -
columnHeight Integer カラムの高さを指定します
数値のみからなる文字列を指定してください		 150
columnWidth Integer カラムの幅を指定します
数値のみからなる文字列を指定してください		 150
Boolean属性 detailCache Boolean 詳細情報をキャッシュするかどうかを指定します true
detailLoadDelay Integer カラムを選択後に詳細情報を検索するまでの遅延時間を指定します
(detailLoader属性に指定した関数を呼ぶまでの時間)
単位はミリ秒になります		 50
無害化 detailLoader String カラムを選択後に詳細情報を検索する関数を指定します -
id String カラムビューの先頭要素になるdivのidです 代替idを付与
name String カラムビューの先頭要素になるdivのnameです 代替nameを付与
無害化 onSelect String カラム選択時に実行される関数を指定します -
必須
rootLoader String カラムビュー初期化時に先頭のカラム情報を検索する関数を指定します -
無害化 その他 String ユーザ定義属性です -

サンプル

カラム情報オブジェクト

カラム情報オブジェクト
  • カラムを表示するにはカラム情報オブジェクトを指定する必要があります。
    • rootLoader属性、childrenLoader属性で指定した関数内でカラム情報を返却する必要があります。
  • rootLoader属性
    • カラムビュー初期化時に先頭のカラム情報を検索するcsjs関数を指定します。以下の引数が渡ってきます。
引数 型 説明
第一引数 functionカラム情報オブジェクトの配列を引数に指定するとカラムを表示する関数
この関数の実体はタグの内部で定義しています
この関数に後述のカラム情報オブジェクトの配列を指定してください
  • childrenLoader属性
    • カラムを選択後に配下情報を検索するcsjs関数を指定します。以下の引数が渡ってきます。
引数 型 説明 備考
第一引数 object カラム情報オブジェクト 以下のカラム情報オブジェクトを参照してください
第二引数 functionカラム情報オブジェクトの配列を引数に指定するとカラムを表示する関数
この関数の実体はタグの内部で定義しています
この関数に後述のカラム情報オブジェクトの配列を指定してください
  • カラム情報オブジェクトは以下になります。
属性名 型 説明
label string 画面に表示されている文字列です
identifierstring 一意な文字列です
カラムに内部的に振り分ける一意な値として使います
iconClass string 表示する画像のCSSスプライトクラス名です
未指定の場合はデフォルトアイコンが表示されます
imgPathと同時に指定された場合は、imgPathに指定した画像が表示されます
imgPath string 表示する画像のURLです
未指定の場合はデフォルトアイコンが表示されます
iconClassと同時に指定された場合は、こちらで指定した画像が表示されます
JSP
<script type="text/javascript">
  function rootLoader(func) {
    $.ajax({
      url:'sample/columnView_getFiles',
      success:function(data, textStatus, jqXHR){
        func(data);
      }
    })
  }
  function childrenLoader(request,func) {
    $.ajax({
      url:'sample/columnView_getFiles',
      data:{name:request.identifier},
      success:function(data, textStatus, jqXHR){
   	    func(data);
      }
    })
  }

</script>

<imui:columnView rootLoader="rootLoader" childrenLoader="childrenLoader"/>
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" />

  <!-- columnViewのファイル情報を取得 -->
  <file-mapping path="/sample/columnView_getFiles" page="sample/columnView/columnView_getFiles" />

</routing-jssp-config>
サーバサイド JavaScript(sample/columnView/columnView_getFiles.js)
function init(request){
    var path;
    var name = '';
    if (!request.name) {
        path = '';
    } else {
        var name = request.name;
        path = name + '/';
    }
    var dir = new PublicStorage(name);
        var columns = [];
    // folder
    var dirs = dir.directories();
    for (var i = 0, n = dirs.length; i < n; i++) {
        columns[columns.length] = {
            identifier: path + dirs[i],
            label: dirs[i],
            hasColumns: true,
            iconClass: 'im-ui-icon-common-24-folder'
        };
    }
    // file
    var files = dir.files();
    for (var i = 0, n = files.length; i < n; i++) {
        var icon = '';

        if (files[i].indexOf('.sql') != -1) {
            icon = 'icon-sql';
        } else if (files[i].indexOf('.png') != -1 || files[i].indexOf('.gif') != -1 || files[i].indexOf('.jpg') != -1) {
            icon = 'ui-icon icon-image';
        }
        columns[columns.length] = {
            identifier: path + files[i],
            label: files[i],
            iconClass: icon
        };
    }
    returnHttpResponse(columns);
}

function returnHttpResponse(args){
    var data = ImJson.toJSONString(args);
    var response = Web.getHTTPResponse();
    response.setContentType('application/json; charset=UTF-8');
    response.sendMessageBodyString(data);
}

detailLoader

detailLoader
  • 詳細情報を表示するには、detailLoader属性で指定した関数内でカラム情報を返却する必要があります。
    • 以下の引数が渡ってきます。
引数 型 説明 備考
第一引数 object カラム情報オブジェクト 以下のカラム情報オブジェクトを参照してください
第二引数 function表示したいhtmlを引数に渡すと詳細情報を表示する関数
  • カラム情報オブジェクトは以下になります。
属性名 型 説明
label string 画面に表示されている文字列です
identifierstring 一意な文字列です
カラムに内部的に振り分ける一意な値として使います
hasColumnsboolean配下にカラム情報を持っているかどうかを判別します
trueである場合はカラム情報を表示しようとし、falseの場合は詳細情報を表示しようとします
未指定の場合はfalseと判断します
iconClass string 表示する画像のCSSスプライトクラス名です
未指定の場合はデフォルトアイコンが表示されます
imgPathと同時に指定された場合は、imgPathに指定した画像が表示されます
imgPath string 表示する画像のURLです
未指定の場合はデフォルトアイコンが表示されます
iconClassと同時に指定された場合は、こちらで指定した画像が表示されます
  • ajax通信でコンテンツの中身を取得して表示する場合は、返却するHTMLにテーマがかからないように指定してください。
    • nothemeを指定することで、返却するHTMLにテーマがかからないようにします。
    • リクエストにセットする方法と設定ファイルに記述する方法があります。詳細は以下を参照してください。
    • このサンプルではリクエストへの属性として指定する方法でテーマが適用されていないHTMLを返却します。
  • 詳細情報内にリンクを追加する場合は自動的に黒文字リンクになります。
    • 青文字リンクにする場合は、aタグにclass=“imui-accent”を指定してください。
JSP
<script type="text/javascript">
  function rootLoader(func) {
    $.ajax({
      url:'sample/columnView_getFiles',
      success:function(data, textStatus, jqXHR){
        func(data);
      }
    })
  }
  function childrenLoader(request,func) {
    $.ajax({
      url:'sample/columnView_getFiles',
      data:{name:request.identifier},
      success:function(data, textStatus, jqXHR){
   	    func(data);
      }
    })
  }
  function showDetail(request, response) {
    $.ajax({
      url:'sample/columnView_getDetail',
      data:{name:request.identifier},
      success:function(data, textStatus, jqXHR){
    	response(data);
      }
    })
  }
</script>

<imui:columnView rootLoader="rootLoader" childrenLoader="childrenLoader" detailLoader="showDetail" />
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" />

  <!-- columnViewのファイル情報を取得 -->
  <file-mapping path="/sample/columnView_getFiles" page="sample/columnView/columnView_getFiles" />
  <!-- columnViewの詳細情報を取得 -->
  <file-mapping path="/sample/columnView_getDetail" page="sample/columnView/columnView_getDetail" />

</routing-jssp-config>
サーバサイド JavaScript(sample/columnView/columnView_getFiles.js)
function init(request){
    var path;
    var name = '';
    if (!request.name) {
        path = '';
    } else {
        var name = request.name;
        path = name + '/';
    }
    var dir = new PublicStorage(name);
        var columns = [];
    // folder
    var dirs = dir.directories();
    for (var i = 0, n = dirs.length; i < n; i++) {
        columns[columns.length] = {
            identifier: path + dirs[i],
            label: dirs[i],
            hasColumns: true,
            iconClass: 'im-ui-icon-common-24-folder'
        };
    }
    // file
    var files = dir.files();
    for (var i = 0, n = files.length; i < n; i++) {
        var icon = '';

        if (files[i].indexOf('.sql') != -1) {
            icon = 'icon-sql';
        } else if (files[i].indexOf('.png') != -1 || files[i].indexOf('.gif') != -1 || files[i].indexOf('.jpg') != -1) {
            icon = 'ui-icon icon-image';
        }
        columns[columns.length] = {
            identifier: path + files[i],
            label: files[i],
            iconClass: icon
        };
    }
    returnHttpResponse(columns);
}

function returnHttpResponse(args){
    var data = ImJson.toJSONString(args);
    var response = Web.getHTTPResponse();
    response.setContentType('application/json; charset=UTF-8');
    response.sendMessageBodyString(data);
}
サーバサイド JavaScript(sample/columnView/columnView_getDetail.js)
var $result;
function init(request){
    
    request.setAttribute('imui-theme-builder-module','notheme');
    var dir = new PublicStorage(request.name);
    $result = {
        name: request.name,
        modified: (new Date(dir.lastModified())).toString(),
        size: dir.length()
    }
}
HTML(sample/columnView/columnView_getDetail.html)
<div style="width: 100%; height: 100%; text-align: center; word-wrap: break-word;">
  <img src="images/icons/48x48/icojoy/onebit_icons/PNG/onebit_39.png"/>
  <dl compact="compact">
    <dt>ファイル名</dt>
    <dd><imart type="string" value=$result.name /></dd>
    <dt>Size(Byte)</dt>
    <dd><imart type="string" value=$result.size /></dd>
    <dt>最終更新日</dt>
    <dd><imart type="string" value=$result.modified /></dd>
  </dl>
</div>

キーボード操作

  • カラムビューの表示領域をクリックしたあとはキーボードでの操作が可能になります。
    • 右矢印
      • 配下項目を選択します。選択した項目の配下情報または詳細情報を表示します。
    • 左矢印
      • 親項目を選択します。選択した項目の配下情報または詳細情報を表示します。
    • 上矢印
      • 一つ上の兄弟項目を選択します。選択した項目の配下情報または詳細情報を表示します。
    • 下矢印
      • 一つ下の兄弟項目を選択します。選択した項目の配下情報または詳細情報を表示します。
    • PageUp
      • 先頭の兄弟項目を選択します。選択した項目の配下情報または詳細情報を表示します。
    • PageDown
      • 最後の兄弟項目を選択する。選択した項目の配下情報または詳細情報を表示する

csjsの関数

  • 以下のメソッドが利用できます。
    • rootRefresh
      • 先頭の項目から情報を再読み込みします。キャッシュされた情報もクリアされます。
    • currentRefresh
      • 選択している項目の情報を再読み込みします。キャッシュ機能がONの場合はキャッシュを使用して再読み込みを行います。
    • backSelection
      • 現在選択している項目の親項目を選択します。
    • currentSelection
      • 現在選択している項目の兄弟項目を選択します。
      • 引数に選択先のパスになるidentifyを指定します。
    • nextSelection
      • 現在選択している項目の配下項目を選択します。
      • 引数に選択先のパスになるidentifyを指定します。
    • routeSelection
      • 特定の項目を選択します。
      • 引数に先頭からの経路を一階層ごとに配列で指定します。
JSP
<script type="text/javascript">
  function rootLoader(func) {
    var data = [{
    	label:"sample1",
    	identifier:"1",
    	hasColumns:true
    }]
    func(data);
  }
  function childrenLoader(request,func) {
    var data = [
      {
    	label:"sample1-1",
    	identifier:"1",
    	hasColumns:true
      },
      {
        label:"sample2-1",
        identifier:"2",
        hasColumns:true
      },
      {
        label:"sample3-1",
        identifier:"3",
        hasColumns:true
      }
    ]
    func(data);	
  }
  $(function(){
    $('#nextSelection').on('click', function(){
      var identifier = '3';
      $('#sampleId').imuiColumnView('nextSelection',identifier);
    });
    $('#currentSelection').on('click', function(){
      var identifier = '2';
      $('#sampleId').imuiColumnView('currentSelection',identifier);
    });
    $('#routeSelection').on('click', function(){
      var identifier = [1,3,2];
      $('#sampleId').imuiColumnView('routeSelection',identifier);
    });
  })
</script>
<div>
  <button class="imui-button" id="nextSelection">nextSelection</button>
</div>
<div>
  <button class="imui-button" id="currentSelection">currentSelection</button>
</div>
<div>
  <button class="imui-button" id="routeSelection">routeSelection</button>
</div>
<imui:columnView rootLoader="rootLoader" childrenLoader="childrenLoader" id="sampleId" />

テーブルの中にカラムビューを配置し、カラムビューの幅がテーブルの幅より大きくなってしまうとレイアウトが崩れる場合の対処例

テーブルの中にカラムビューを配置し、カラムビューの幅がテーブルの幅より大きくなってしまうとレイアウトが崩れる場合の対処例
  • テーブルの中にカラムビューを配置し、カラムビューの幅がテーブルの幅より大きくなってしまうとレイアウトが崩れる場合があります。
  • カラムビューの横幅に固定値を指定することでこの現象は回避することができます。
JSP
<script type="text/javascript">
  function rootLoader(func) {
    $.ajax({
      url:'sample/columnView_getFiles',
      success:function(data, textStatus, jqXHR){
        func(data);
      }
    })
  }
  function childrenLoader(request,func) {
    $.ajax({
      url:'sample/columnView_getFiles',
      data:{name:request.identifier},
      success:function(data, textStatus, jqXHR){
   	    func(data);
      }
    })
  }
 
</script>
<div>
  <table class="imui-table">
    <tbody>
     <tr>
        <th><label class="imui-required">【UIコンポーネント】カラムビュー</label></th>
        <td>
          <imui:columnView rootLoader="rootLoader" childrenLoader="childrenLoader" style="width:400px;"/>
        </td>
      </tr>
    </tbody>
  </table>
</div>
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" />

  <!-- columnViewのファイル情報を取得 -->
  <file-mapping path="/sample/columnView_getFiles" page="sample/columnView/columnView_getFiles" />

</routing-jssp-config>
サーバサイド JavaScript(sample/columnView/columnView_getFiles.js)
function init(request){
    var path;
    var name = '';
    if (!request.name) {
        path = '';
    } else {
        var name = request.name;
        path = name + '/';
    }
    var dir = new PublicStorage(name);
        var columns = [];
    // folder
    var dirs = dir.directories();
    for (var i = 0, n = dirs.length; i < n; i++) {
        columns[columns.length] = {
            identifier: path + dirs[i],
            label: dirs[i],
            hasColumns: true,
            iconClass: 'im-ui-icon-common-24-folder'
        };
    }
    // file
    var files = dir.files();
    for (var i = 0, n = files.length; i < n; i++) {
        var icon = '';

        if (files[i].indexOf('.sql') != -1) {
            icon = 'icon-sql';
        } else if (files[i].indexOf('.png') != -1 || files[i].indexOf('.gif') != -1 || files[i].indexOf('.jpg') != -1) {
            icon = 'ui-icon icon-image';
        }
        columns[columns.length] = {
            identifier: path + files[i],
            label: files[i],
            iconClass: icon
        };
    }
    returnHttpResponse(columns);
}

function returnHttpResponse(args){
    var data = ImJson.toJSONString(args);
    var response = Web.getHTTPResponse();
    response.setContentType('application/json; charset=UTF-8');
    response.sendMessageBodyString(data);
}

Copyright © 2012 NTT DATA INTRAMART CORPORATION