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

treeNode

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

機能説明

  • ツリーノードを作成します
  • 主にurl属性を指定したtreeタグと組み合わせて使用します
  • treeのvalue属性と同じ形式でvalue属性を受け取り、その内容をHTMLのリスト形式に変換し出力します
注意事項
  • ajax通信でコンテンツの中身を取得して表示する場合は、返却するHTMLにテーマがかからないように指定してください。詳細は以下の サンプル を参照してください。

属性一覧

注釈 属性名 型 説明 省略時の動作 実行時評価
id String ツリーのidです 代替idを付与
name String ツリーのnameです 代替nameを付与
value List<? extends Map<?, ?>> - -

サンプル

value

value
valueには以下のオブジェクトを指定してください
注釈 属性名 型 説明 省略時の動作
identity String ノードのidです 代替idを付与
無害化国際化label String ノードのラベルです -
無害化 classNamesList<String> ノードのclass属性に指定するクラス名の配列です -
無害化 rel String ノードのrel属性です（主にtypesプラグインと組み合わせて使用します） -
無害化 imgPath String ノードに表示する画像のURLです
プラグインにimuiTreeIconを指定しないと使用できません
imgPathとiconClassを同時指定することはできません、どちらか片方のみを指定してください 		-
無害化 iconClass String ノードに表示する画像のCSSスプライトクラス名です
プラグインにimuiTreeIconを指定しないと使用できません
imgPathとiconClassを同時指定することはできません、どちらか片方のみを指定してください		-
無害化 attributesMap<String, String> ノードに指定する属性名と属性値をキーと値に持つオブジェクトです -
children List<? extends Map<?, ?>>ノードの子ノードです -
treeのurl属性、treeNodeを組み合わせて使用することで、ノード情報をノード展開時に適宜通信し取得することができます
これにより、ツリー初期表示時のレスポンスを向上させることが可能です
通信先サーバへのリクエストには、ノード情報のattributesに設定した名前/値が送信されます
以下のサンプルコードでは分かりやすさのためノード情報をプログラム中に埋め込み返却していますが、実際の処理ではnodeIdentityの値に応じて各種APIを通じた結果を返す実装を行ってください
JSP
<%!
    <T> List<T> makeList(final List<T> list, final T... values) {
        for (T value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, T>... entries) {
        for (final Map.Entry<String, T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }
%>
<imui:tree parameter="<%= makeMap(new HashMap<String, Object>(), new HashMap.SimpleEntry("plugins", makeList(new ArrayList<String>(), "ui", "themes", "html_data"))) %>" url="sample/tree/ajax.jsp" />
JSP(sample/tree/ajax.jsp)
<%!
    <T, U extends T> List<T> makeList(final List<T> list, final U... values) {
        for (final U value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }

    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    List<Map<String, Object>> buildList(final String nodeIdentity) {
        if (nodeIdentity == null) {
            final Map<String, Object> node1 = makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("identity", "node1"),
                    makeEntry("label", "ノード1"),
                    makeEntry("classNames", makeList(new ArrayList<String>(), "ClassName1", "ClassName2")),
                    makeEntry("rel", "TypeA"),
                    makeEntry("attributes", makeMap(
                            new HashMap<String, String>(),
                            makeEntry("data-node-identity", "ThisIsNode1"),
                            makeEntry("data-certain-attribute1", "attribute-value1"),
                            makeEntry("data-certain-attribute2", "attribute-value2")
                    ))
            );
            final Map<String, Object> node2 = makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("identity", "node2"),
                    makeEntry("label", "ノード2"),
                    makeEntry("classNames", makeList(new ArrayList<String>(), "jstree-closed", "ClassName2")),
                    makeEntry("rel", "TypeB"),
                    makeEntry("attributes", makeMap(
                            new HashMap<String, String>(),
                            makeEntry("data-node-identity", "ThisIsNode2"),
                            makeEntry("data-certain-attribute2", "attribute-value3")
                    ))
            );

            return makeList(new ArrayList<Map<String, Object>>(), node1, node2);
        } else if (nodeIdentity.equals("ThisIsNode2")) {
            final Map<String, Object> node = makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("identity", "node3"),
                    makeEntry("label", "ノード3"),
                    makeEntry("classNames", makeList(new ArrayList<String>(), "jstree-closed", "ClassName4", "ClassName5")),
                    makeEntry("rel", "TypeA"),
                    makeEntry("attributes", makeMap(
                            new HashMap<String, String>(),
                            makeEntry("data-node-identity", "ThisIsNode3"),
                            makeEntry("data-certain-attribute", "attribute-value4")
                    ))
            );

            return makeList(new ArrayList<Map<String, Object>>(), node);
        } else if (nodeIdentity.equals("ThisIsNode3")) {
            final Map<String, Object> node = makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("label", "ノード4"),
                    makeEntry("attributes", makeMap(
                            new HashMap<String, String>(),
                            makeEntry("data-node-identity", "ThisIsNode4")
                    ))
            );

            return makeList(new ArrayList<Map<String, Object>>(), node);
        }

        return new ArrayList<Map<String, Object>>();
    }
%>

<%
    response.setContentType("text/plain; charset=utf-8");
%>

<imui:treeNode value="<%= buildList(request.getParameter("data-node-identity")) %>" />

value

valueには以下のオブジェクトを指定してください
注釈 属性名 型 説明 省略時の動作
identity String ノードのidです 代替idを付与
無害化国際化label String ノードのラベルです -
無害化 classNamesList<String> ノードのclass属性に指定するクラス名の配列です -
無害化 rel String ノードのrel属性です（主にtypesプラグインと組み合わせて使用します） -
無害化 imgPath String ノードに表示する画像のURLです
プラグインにimuiTreeIconを指定しないと使用できません
imgPathとiconClassを同時指定することはできません、どちらか片方のみを指定してください 		-
無害化 iconClass String ノードに表示する画像のCSSスプライトクラス名です
プラグインにimuiTreeIconを指定しないと使用できません
imgPathとiconClassを同時指定することはできません、どちらか片方のみを指定してください		-
無害化 attributesMap<String, String> ノードに指定する属性名と属性値をキーと値に持つオブジェクトです -
children List<? extends Map<?, ?>>ノードの子ノードです -
treeのurl属性、treeNodeを組み合わせて使用することで、ノード情報をノード展開時に適宜通信し取得することができます
これにより、ツリー初期表示時のレスポンスを向上させることが可能です
通信先サーバへのリクエストには、ノード情報のattributesに設定した名前/値が送信されます
以下のサンプルコードでは分かりやすさのためノード情報をプログラム中に埋め込み返却していますが、実際の処理ではnodeIdentityの値に応じて各種APIを通じた結果を返す実装を行ってください
JSP
<%!
    <T> List<T> makeList(final List<T> list, final T... values) {
        for (T value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, T>... entries) {
        for (final Map.Entry<String, T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }
%>
<imui:tree parameter="<%= makeMap(new HashMap<String, Object>(), new HashMap.SimpleEntry("plugins", makeList(new ArrayList<String>(), "ui", "themes", "html_data"))) %>" url="sample/tree/ajax.jsp" />
JSP(sample/tree/ajax.jsp)
<%!
    <T, U extends T> List<T> makeList(final List<T> list, final U... values) {
        for (final U value : values) {
            list.add(value);
        }

        return list;
    }

    <T> Map<String, T> makeMap(final Map<String, T> map, final Map.Entry<String, ? extends T>... entries) {
        for (final Map.Entry<String, ? extends T> entry : entries) {
            map.put(entry.getKey(), entry.getValue());
        }

        return map;
    }

    <T> Map.Entry<String, T> makeEntry(final String key, final T value) {
        return new AbstractMap.SimpleEntry(key, value);
    }

    List<Map<String, Object>> buildList(final String nodeIdentity) {
        if (nodeIdentity == null) {
            final Map<String, Object> node1 = makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("identity", "node1"),
                    makeEntry("label", "ノード1"),
                    makeEntry("classNames", makeList(new ArrayList<String>(), "ClassName1", "ClassName2")),
                    makeEntry("rel", "TypeA"),
                    makeEntry("attributes", makeMap(
                            new HashMap<String, String>(),
                            makeEntry("data-node-identity", "ThisIsNode1"),
                            makeEntry("data-certain-attribute1", "attribute-value1"),
                            makeEntry("data-certain-attribute2", "attribute-value2")
                    ))
            );
            final Map<String, Object> node2 = makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("identity", "node2"),
                    makeEntry("label", "ノード2"),
                    makeEntry("classNames", makeList(new ArrayList<String>(), "jstree-closed", "ClassName2")),
                    makeEntry("rel", "TypeB"),
                    makeEntry("attributes", makeMap(
                            new HashMap<String, String>(),
                            makeEntry("data-node-identity", "ThisIsNode2"),
                            makeEntry("data-certain-attribute2", "attribute-value3")
                    ))
            );

            return makeList(new ArrayList<Map<String, Object>>(), node1, node2);
        } else if (nodeIdentity.equals("ThisIsNode2")) {
            final Map<String, Object> node = makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("identity", "node3"),
                    makeEntry("label", "ノード3"),
                    makeEntry("classNames", makeList(new ArrayList<String>(), "jstree-closed", "ClassName4", "ClassName5")),
                    makeEntry("rel", "TypeA"),
                    makeEntry("attributes", makeMap(
                            new HashMap<String, String>(),
                            makeEntry("data-node-identity", "ThisIsNode3"),
                            makeEntry("data-certain-attribute", "attribute-value4")
                    ))
            );

            return makeList(new ArrayList<Map<String, Object>>(), node);
        } else if (nodeIdentity.equals("ThisIsNode3")) {
            final Map<String, Object> node = makeMap(
                    new HashMap<String, Object>(),
                    makeEntry("label", "ノード4"),
                    makeEntry("attributes", makeMap(
                            new HashMap<String, String>(),
                            makeEntry("data-node-identity", "ThisIsNode4")
                    ))
            );

            return makeList(new ArrayList<Map<String, Object>>(), node);
        }

        return new ArrayList<Map<String, Object>>();
    }
%>

<%
    request.setAttribute("imui-theme-builder-module","notheme");
%>

<imui:treeNode value="<%= buildList(request.getParameter("data-node-identity")) %>" />

Copyright © 2012 NTT DATA INTRAMART CORPORATION