intra-mart Accel Platform — テーマ仕様書   第5版  

Transcription

1 Copyright 2013 NTT DATA INTRAMART CORPORATION 1 Top

2 目 次 改 訂 情 報 はじめに 本 書 の 目 的 対 象 読 者 本 書 の 構 成 テーマ 概 要 テーマとは 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 み テーマモジュール 用 語 テーマの 詳 細 ThemeFilter ThemeManager PageBuilder テーマモジュール テーマモジュールの 作 成 標 準 テーマカスタマイズの 概 要 スクラッチ 開 発 サンプル 付 録 テーマモジュールのフォルダ ファイル 構 成 テーマモジュールのサンプル ユーティリティプラグイン intra-mart が 提 供 するテーマの 一 覧 2

3 改 訂 情 報 変 更 年 月 日 変 更 内 容 初 版 第 2 版 下 記 を 追 加 変 更 しました テーマモジュール の JSSP からGoogleChromeFrameの 記 述 を 削 除 テーマモジュールのサンプル の JSSP からGoogleChromeFrame の 記 述 を 削 除 第 3 版 下 記 を 変 更 しました テーマモジュール に ヘルプドロップダウン を 追 加 しました テーマモジュール の header の 画 像 を 変 更 しました 第 4 版 下 記 を 変 更 しました PageBuilder の 設 定 ファイルで 指 定 する に FullThemeBuilder の 設 定 ファイルを 追 記 しました 第 5 版 下 記 を 変 更 しました PageBuilder に ライブラリ 群 の 切 り 替 え を 追 加 しました テーマモジュール に ライブラリ 群 の 切 り 替 え を 追 加 しました テーマモジュールのサンプル の head を 修 正 しました 3

4 はじめに 本 書 の 目 的 本 書 ではテーマの 詳 細 について 説 明 します 説 明 範 囲 は 以 下 のとおりです テーマの 持 つ 機 能 の 全 体 像 テーマを 実 現 する 構 造 と 動 作 テーマモジュールの 作 成 方 法 対 象 読 者 本 書 では 次 の 利 用 者 を 対 象 としています intra-mart Accel Platform に 画 面 を 持 つアプリケーションを 作 成 したい 開 発 者 の 方 テーマモジュールを 作 成 カスタマイズしたいデザイナの 方 本 書 の 構 成 テーマ 概 要 テーマの 持 つ 機 能 の 全 体 像 について 説 明 します テーマの 詳 細 概 要 で 説 明 したテーマの 全 体 像 を 実 現 するための 構 成 要 素 を 説 明 します ThemeFilter テーマの 入 り 口 となるサーブレットフィルタについて 説 明 します ThemeManager テーマモジュールを 管 理 する 部 分 について 説 明 します PageBuilder テーマモジュールとコンテンツを 組 み 合 わせたHTMLを 生 成 する 部 分 について 説 明 します また テーマモジュールとコンテンツとの 組 み 合 わせを 決 定 する 方 法 についても 説 明 します テーマモジュール テーマモジュールを 説 明 します テーマモジュールの 作 成 4

5 テーマモジュールの 作 成 方 法 について 説 明 します 5

6 テーマ 概 要 テーマとは テーマとは 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 み その 構 成 ファイル 群 を 指 します 読 者 の 立 場 によって 見 え 方 が 異 なるものになります アプリケーションの 開 発 者 の 立 場 からは 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 みとしての 側 面 が 主 なもの となるでしょう デザイナの 立 場 からは 構 成 ファイル 群 特 に HTML と CSS とで 画 面 のデザインを 行 う 対 象 となるでしょう ユーザの 立 場 からは 画 面 の 見 た 目 や 操 作 感 の 違 い として 見 えるでしょう 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 み 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 みは 主 に 以 下 の 機 能 で 実 現 します ThemeFilter ThemeManager PageBuilder 主 にアプリケーションの 開 発 者 が 関 係 する 部 分 になります これらの 章 を 読 むことで 設 定 ファイルの 書 き 方 や プログラムからの 指 定 によってテーマモジュールの 組 み 合 わせ 方 を 制 御 できるようになります テーマモジュール テーマを 構 成 するファイル 群 を テーマモジュール と 呼 びます テーマモジュールは JSSP CSS CSJS 画 像 設 定 ファイル で 構 成 されます テーマモジュールには 標 準 標 準 (シンプル) v5 互 換 v6 互 換 の4 種 類 があります 標 準 (シンプル) 以 外 のテーマモジュールには いくつかのカラーバリエーションがあります 6

7 用 語 JSSP JSSP とは JavaScriptServerPage の 略 称 で スクリプト 開 発 モデルで 実 装 された HTML と JavaScript の 組 み 合 わせを 指 します CSJS CSJS とは ClientSideJavaScript の 略 称 で クライアントつまり Web ブラウザ 上 で 動 作 する JavaScript のこと を 指 します SSJS SSJS とは ServerSideJavaScript の 略 称 で サーバ 上 で 動 作 する JavaScript のことを 指 します 7

8 テーマの 詳 細 テーマ 概 要 で 述 べたとおり テーマは 大 きく 分 けて 2 つの 部 分 でできています 画 面 レイアウトやスタイルを 切 り 替 える 仕 組 み ThemeFilter ThemeManager PageBuilder テーマモジュール 以 降 の 説 明 ではこれらの 機 能 の 詳 細 を 解 説 していきます ThemeFilter ThemeFilter は javax.servlet.filter を 実 装 した Java のクラスです *.jsp と JSSP に 対 してマッピングされてい ます ここでは ThemeFilter の 役 割 と 制 御 方 法 を 説 明 します 項 目 ThemeFilter の 役 割 テーマモジュールを 適 用 する 条 件 HTML の 生 成 キャッシュ 制 御 制 御 パラメータ キャッシュ 制 御 テーマの 適 用 制 御 PageBuilderの 制 御 ThemeFilter の 役 割 ThemeFilter は 以 下 の 機 能 を 持 っています リクエストされたページの URL やパラメータなどをチェックし テーマモジュールを 適 用 するかどうかを 決 定 します テーマモジュールを 適 用 する 場 合 コンテンツに 対 してテーマモジュールを 適 切 に 適 用 し HTMLを 生 成 し ます レスポンスに キャッシュ 制 御 の HTTP ヘッダを 付 与 します テーマモジュールを 適 用 する 条 件 ThemeFilter は コンテンツに 対 してテーマモジュールを 適 用 するかどうかを 決 定 します 以 下 の 条 件 のいずれ かを 満 たす 場 合 テーマモジュールを 適 用 します 8

9 Content-Type が 指 定 されていない Content-Type が text/html である なお 後 述 の テーマの 適 用 制 御 で フラグに false を 指 定 した 場 合 上 記 の 条 件 に 合 致 してもテーマモジュール は 適 用 されません HTML の 生 成 ThemeFilter はテーマモジュールを 適 用 する 条 件 に 合 致 した 場 合 コンテンツをバイト 配 列 としてメモリ 内 に 保 存 し 後 述 の PageBuilder に 渡 します ThemeFilter は PageBuilder が 生 成 した HTML をレスポンスとして Web ブラウザに 送 信 します テーマモジュールを 適 用 する 条 件 に 合 致 しない 場 合 レスポンスの 操 作 は 行 いません 対 象 のサーブレット サー ブレットフィルタが 生 成 したレスポンスがそのまま Web ブラウザに 返 ることになります キャッシュ 制 御 HTTP ヘッダに 以 下 のものをセットします Cache-Control: No-Cache Pragma: No-Cache なお 後 述 の キャッシュ 制 御 で フラグに true をセットした 場 合 これらの HTTP ヘッダはセットされません 制 御 パラメータ ThemeFilter には 動 作 を 変 更 するためのパラメータが 存 在 します キャッシュ 制 御 Cache-ControlとPragma に No-Cache を 指 定 するかどうかを 制 御 します このパラメータを 指 定 しない 場 合 または false を 指 定 した 場 合 キャッシュ 制 御 の HTTP ヘッダがレスポンスに 付 与 されます true を 指 定 した 場 合 キャッシュ 制 御 の HTTP ヘッダはレスポンスに 付 与 されません このパラメータは リクエストの 属 性 として 指 定 してください JavaScript の 例 function init(request) { //キャッシュ 制 御 の HTTP ヘッダを 出 力 しない request.setattribute('x-jp-co-intra-mart-disable-no-cache',true); //キャッシュ 制 御 を 自 ら 行 う let response = Web.getHTTPResponse(); response.setheader("cache-control", "private,max-age=3600"); response.setheader("last-modified", new Date(2013,9,1,13,0,0)); 9

10 Java の 例 request.setattribute(themefilter.disable_no_cache, true); response.setheader("cache-control", "private,max-age=7200"); テーマの 適 用 制 御 テーマモジュールを 適 用 するかどうかを 制 御 します このフラグに false を 指 定 した 場 合 テーマ 適 用 の 条 件 に 合 致 していてもテーマモジュールは 適 用 されません true を 指 定 した 場 合 テーマモジュールを 適 用 するかどうかはテーマ 適 用 の 条 件 に 従 います このパラメータは リクエストのパラメータとして 指 定 してください クエリパラメータとして 指 定 することで 一 時 的 にテーマモジュールを 適 用 させないで 画 面 表 示 を 確 認 する 場 合 に 使 うことを 想 定 しています PageBuilderの 制 御 セッションをスコープとした PageBuilder のビルダーモジュールを 指 定 します 通 常 は リクエストをスコープとしてビルダーモジュールが 決 まりますが このパラメータを 指 定 するとセッションを スコープとしてビルダーモジュールを 指 定 することができます これは 外 部 メニューに 指 定 された intra-mart Accel Platform の 画 面 を 現 在 のテーマで 表 示 するためのパラメータです このパラメータは リクエストのパラメータとして 指 定 してください <form action="somewhere">... <input type="hidden" name="imui-session-scope-builder-module" value="headwithcontainer"/>... </form> ThemeManager ここでは ThemeManager の 役 割 を 説 明 します ThemeManager の 役 割 テーマモジュールの 情 報 を 管 理 します システムに 登 録 されているすべてのテーマモジュールの 情 報 ログイン しているユーザのテーマの 情 報 などを 取 得 する 機 能 を 提 供 します 詳 細 は API リスト を 参 照 してください PageBuilder 10

11 PageBuilder ここでは PageBuilder の 役 割 と 制 御 方 法 を 説 明 します 項 目 PageBuilder の 役 割 組 み 合 わせ 方 の 制 御 設 定 ファイルで 指 定 する リクエストへのパラメータで 指 定 する 適 用 順 位 指 定 例 設 定 ファイルで 指 定 する 例 リクエストへの 属 性 として 指 定 する 例 リクエストへのパラメータとして 指 定 する 例 ライブラリ 群 の 切 り 替 え 適 用 順 位 指 定 例 設 定 ファイルで 指 定 する 例 リクエストへのパラメータとして 指 定 する 例 リクエストへの 属 性 として 指 定 する 例 PageBuilder の 役 割 PageBuilder は テーマモジュールの JSSP と コンテンツを 組 み 合 わせた HTML を 生 成 します テーマモジュールは 以 下 の 4 つの JSSP で 構 成 されています head HTML の head タグの 部 分 header ヘッダ 部 body footer ボディ 部 フッタ 部 組 み 合 わせ 方 は head, header, body, footer head, body, footer head, body body テーマ 適 用 無 し 11

12 の 5 パターンであるものと 定 義 しています 実 装 は 以 下 の6つがあります 1. HeadWithFooterThemeBuilder head, body, footer を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ)を 表 示 したくないが footer は 表 示 したい 場 合 に 使 用 します body は <div id= imui-container > で 囲 まれて 出 力 されます 2. HeadWithContainerThemeBuilder head, body を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ) footer を 表 示 したくないが CSS やクライアントサイド JavaScript は 使 用 したい 場 合 に 使 用 します 主 に intra-mart Accel Platform 向 けに 作 成 した 画 面 を 表 示 するために 使 用 することを 想 定 して います body は <div id= imui-container > で 囲 まれて 出 力 されます 3. HeadOnlyThemeBuilder head, body を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ) footer を 表 示 したくないが CSS やクライアントサイド JavaScript は 使 用 したい 場 合 に 使 用 します 主 に iwp7.2 以 前 のシステム 向 けに 作 成 した 画 面 を 表 示 するために 使 用 することを 想 定 していま す body は 指 定 された URL の HTML そのものが 出 力 されます 4. BodyOnlyThemeBuilder DOCTYPE htmlタグ body を 含 んだ HTML を 生 成 します header (メニューや ユーティリティ) footer を 表 示 せず CSS やクライアントサイド JavaScript も 使 用 しない 場 合 に 使 用 します body は 指 定 された URL の HTML そのものが 出 力 されます 5. NoThemeBuilder 指 定 された URL の HTML をそのまま 返 します テーマを 一 切 使 用 せず 自 分 で 作 成 した HTML をそのまま 出 力 したい 場 合 に 使 用 します body は 指 定 された URL の HTML そのものが 出 力 されます 6. FullThemeBuilder head, header, body, footer のすべてを 含 んだ HTML を 生 成 します body は <div id= imui-container > で 囲 まれて 出 力 されます 基 本 はこれを 使 用 します 上 記 の 順 に 処 理 すべき PageBuilder を 検 索 し その PageBuilder がリクエストを 処 理 します リクエストを 処 理 すべきかどうかは それぞれのモジュールが 持 つ 設 定 ファイルに 記 載 されたパスがリクエストパスに 合 致 するか どうかや 後 述 のパラメータなどに 合 致 するかどうかで 判 断 します リクエストパスが 設 定 ファイルに 合 致 しない 場 合 や パラメータで 指 定 されていない 場 合 FullThemeBuilder が 12

13 リクエストを 処 理 します コラム CSSモジュール 一 覧 内 のスタイルの 一 部 は <div id= imui-container > の 内 部 の 要 素 だけに 適 用 されます この div で 内 容 が 囲 まれない PageBuilder (HeadOnlyThemeBuilder, BodyOnlyThemeBuilder, NoThemeBuilder) を 利 用 し かつ CSSモジュール 一 覧 のスタイルを 適 用 したい 場 合 は <div id= imui-container > で 内 容 を 囲 むように 実 装 してください 組 み 合 わせ 方 の 制 御 head, header, body, footer の 組 み 合 わせは 上 述 の PageBuilder の6つの 実 装 の 設 定 で 決 まります それぞれ の 設 定 ファイルを 記 述 したり リクエストへパラメータを 指 定 したりすることで どの 組 み 合 わせ 方 にするかを 指 定 することができます 設 定 ファイルで 指 定 する どの 組 み 合 わせ 方 にするかが 静 的 に 決 定 する 場 合 設 定 ファイルに 記 述 します 設 定 ファイルは WEB-INF/conf 配 下 の PageBuilder の 実 装 毎 のフォルダに 配 置 します ファイル 名 は 任 意 で す HeadWithFooterThemeBuilder WEB-INF/conf/theme-head-with-footer-path-config HeadWithContainerThemeBuilder WEB-INF/conf/theme-head-with-container-path-config HeadOnlyThemeBuilder WEB-INF/conf/theme-head-only-path-config BodyOnlyThemeBuilder WEB-INF/conf/theme-body-only-path-config NoThemeBuilder WEB-INF/conf/theme-no-theme-path-config FullThemeBuilder WEB-INF/conf/theme-full-theme-path-config 注 意 それぞれの 設 定 ファイルは 異 なる XML Schema で 定 義 されています いずれかの 設 定 ファイル を 別 のフォルダにコピーしても 動 作 しないので 注 意 してください リクエストへのパラメータで 指 定 する どの 組 み 合 わせ 方 にするかが 動 的 に 決 定 する 場 合 や forward する 場 合 リクエストへパラメータを 指 定 します forward を 行 うと PageBuilder が 処 理 対 象 とする URL は forward 前 の URL となります forward 後 のペー 13

14 ジに 対 して forward 前 の PageBuilder とは 別 の PageBuilder を 指 定 したい 場 合 リクエストにパラメータを 指 定 することで PageBuilder を 切 り 替 えることができます 指 定 するキー imui-theme-builder-module 適 用 したい PageBuilder HeadWithFooterThemeBuilder 指 定 する 値 headwithfooter HeadWithContainerThemeBuilder headwithcontainer HeadOnlyThemeBuilder BodyOnlyThemeBuilder NoThemeBuilder headonly bodyonly notheme 上 記 の 値 をリクエストのパラメータ または 属 性 として 指 定 することで PageBuilder が 切 り 替 わります 適 用 順 位 設 定 ファイル パラメータ 属 性 の 適 用 は 以 下 の 順 に 検 索 し 最 初 に 合 致 した PageBuilder を 使 用 します 設 定 ファイルに 記 述 したものより 属 性 に 指 定 したものの 方 が 優 先 されます 1. 属 性 2. パラメータ 3. 設 定 ファイル 指 定 例 設 定 ファイルで 指 定 する 例 例 として へのリクエストを head, body, footer を 含 んだ HTML としたい 場 合 を 取 り 上 げます この 場 合 使 用 する PageBuilder は HeadWithFooterThemeBuilder になります HeadWithFooterThemeBuilder の 設 定 ファイルは 以 下 のようになります <?xml version="1.0" encoding="utf-8"?> <theme-head-with-footer-path-config xmlns=" <path>/sample/page</path> </theme-head-with-footer-path-config> path の 中 に コンテキストパス 以 下 のパスを / から 記 述 します 別 の 例 とし て へのリクエストを 異 なるビルダーモジュールで 表 示 する 場 合 を 取 り 上 げます この 場 合 正 規 表 現 を 利 用 して path を 表 現 します path 要 素 に regex 属 性 を true として 追 加 することで 正 規 表 現 として 扱 われます 14

15 <?xml version="1.0" encoding="utf-8"?> <theme-head-with-container-path-config xmlns=" <path regex="true">/example/[^/]+?</path> </theme-head-only-path-config> <?xml version="1.0" encoding="utf-8"?> <theme-head-with-footer-path-config xmlns=" <path regex="true">/example/[^/]+?/[^/]+?</path> </theme-head-with-footer-path-config> リクエストへの 属 性 として 指 定 する 例 function init(request) { request.setattribute("imui-theme-builder-module", "headwithfooter"); forward("somewhere"); リクエストへのパラメータとして 指 定 する 例 <form name="form" action="sample/page"> <input type="hidden" name="imui-theme-builder-module" value="headwithfooter"> <input type="submit" value="submit"/> </form> ライブラリ 群 の 切 り 替 え intra-mart Accel Platform 2015 Winter(Lydia) からライブラリ 群 の 切 り 替 え 機 能 を 追 加 しました この 機 能 は jquery のバージョンを 切 り 替 えることを 主 な 目 的 としています 指 定 されなかったり 存 在 しない 組 み 合 わせ 名 を 指 定 されたりした 場 合 設 定 ファイルリファレンス - ライブラリ 群 設 定 に 指 定 された version を 辞 書 の 昇 順 でソートし 最 初 のものが 利 用 されます 標 準 では iap が 指 定 されたことになります ライブラリの 切 り 替 えは 上 記 の 設 定 ファイル パラメータ 属 性 でライブラリ 群 の 組 み 合 わせ 名 を 指 定 します どの ような 組 み 合 わせ 名 が 用 意 されているかは 設 定 ファイルリファレンス - ライブラリ 群 設 定 を 参 照 してくださ い 適 用 順 位 設 定 ファイル パラメータ 属 性 の 適 用 は 以 下 の 順 に 検 索 し 最 初 に 合 致 したライブラリ 群 の 組 み 合 わせを 使 用 します 設 定 ファイルに 記 述 したものより 属 性 に 指 定 したものの 方 が 優 先 されます 1. 属 性 2. パラメータ 15

16 3. 設 定 ファイル 指 定 例 設 定 ファイルで 指 定 する 例 設 定 ファイルの path 要 素 に libraries-version 属 性 を 追 加 します ここでは /sample/page に 対 して iap を 指 定 します この 指 定 によって /sample/page は jquery や jqueryui を 使 用 するようになりま す <?xml version="1.0" encoding="utf-8"?> <theme-head-with-footer-path-config xmlns=" <path libraries-version="iap ">/sample/page</path> </theme-head-with-footer-path-config> リクエストへのパラメータとして 指 定 する 例 リクエストのパラメータとして 指 定 する 場 合 キーに IMUI_THEME_LIBRARIES_VERSION を 値 にライブラリ 群 の 組 み 合 わせ 名 を 指 定 します <form name="form" action="sample/page"> <input type="hidden" name="imui_theme_libraries_version" value="iap "> <input type="submit" value="submit"/> </form> リクエストへの 属 性 として 指 定 する 例 リクエストの 属 性 として 指 定 する 場 合 キーに IMUI_THEME_LIBRARIES_VERSION を 値 にライブラリ 群 の 組 み 合 わせ 名 を 指 定 します function init(request) { request.setattribute("imui_theme_libraries_version", "iap "); forward("somewhere"); テーマモジュール ここではテーマモジュールの 役 割 と 構 成 を 説 明 します 16

17 項 目 テーマモジュールの 役 割 テーマモジュールの 構 成 設 定 ファイル theme-config message JSSP head header body footer 画 像 CSS CSS のフォルダ ファイル 構 成 CSJS テーマモジュールの 役 割 テーマモジュールは 画 面 レイアウトとスタイルを 定 義 した JSSP CSS CSJS 画 像 をまとめたものです 一 般 ユーザから 見 た 場 合 テーマモジュールはテーマそのものに 見 えます また テーマを 切 り 替 える と 現 在 利 用 しているテーマモジュールとは 別 のテーマモジュールを 使 って 画 面 を 表 示 することになります テーマモジュールの 構 成 テーマモジュールは 以 下 のような 要 素 で 構 成 されます 設 定 ファイル JSSP 画 像 CSS CSJS 詳 細 なフォルダ ファイル 構 成 は テーマモジュールのフォルダ ファイル 構 成 を 参 照 してください 17

18 コラム テーマを 切 り 替 えるには 下 図 の テーマ 画 面 で 利 用 したいテーマの このテーマを 利 用 する ボ タンをクリックします 詳 細 は 一 般 ユーザ 操 作 ガイド を 参 照 してください テーマ 画 面 設 定 ファイル theme-config %CONTEXT_PATH%/WEB-INF/conf/theme-config 配 下 に テーマモジュール 毎 に 設 定 ファイルが 存 在 しま す ファイル 名 は 任 意 ですが システム 上 一 意 になるようにテーマID と 同 じ 名 前 をつけることをお 勧 めします こ のファイルには テーマID や JSSP のパス などが 記 述 されています theme 要 素 の 属 性 は 以 下 の 通 りです id テーマIDを 定 義 します システム 上 一 意 になるような 値 を 指 定 してください imagepath テーマ 画 面 で 使 用 するサムネイル 画 像 のパスを 指 定 します theme-folder このテーマのJSSPのパス テーマIDと 同 じ 名 前 をつけることをお 勧 めします sortkey テーマ 画 面 に 表 示 する 際 のソートキー 昇 順 でソートされます ソートキーが 同 じ 場 合 テーマID でソートさ れます この 値 には 0 以 上 の 整 数 を 指 定 してください author 作 成 者 ( 未 使 用 ) version バージョン( 未 使 用 ) theme 要 素 の 子 要 素 として client-type-info 要 素 を 定 義 します client-type-info 要 素 の 属 性 は 以 下 の 通 りで す 18

19 id クライアントタイプIDを 指 定 します 現 在 は pc のみ 指 定 できます default このテーマをデフォルトテーマとするかどうかのフラグです 通 常 は false を 指 定 します この 値 が true の 設 定 ファイルの 中 で 最 初 に 見 つかったテーマモジュールがデフォルトテーマとなります 例 として 標 準 テーマ 青 色 の 設 定 ファイルを 下 に 示 します <?xml version="1.0" encoding="utf-8"?> <theme-config xmlns=" xmlns:xsi=" xsi:schemalocation=" theme.xsd "> <theme id="im_theme_dropdown_blue" author="intra-mart" version="8.0" imagepath="ui/theme/im_theme_dropdown_blue/images/thumbnail.png" theme-folder="theme/im_theme_dropdown_blue" sortkey="10"> <client-type-info id="pc" default="true"/> </theme> </theme-config> message テーマ 画 面 で 使 用 するメッセージプロパティを 定 義 します 定 義 するメッセージキーは 以 下 の 二 つです CAP.Z.IWP.THEME.テーマID.NAME テーマ 画 面 で 表 示 されるテーマの 名 前 CAP.Z.IWP.THEME.テーマID.DESCRIPTION テーマ 画 面 で 表 示 されるテーマの 説 明 %CONTEXT_PATH%/WEB-INF/conf/message/platform/theme/テーマID 配 下 に 以 下 のファイルを 作 成 しま す caption.properties caption_en.properties caption_ja.properties caption_zh_cn.properties 詳 細 は 多 言 語 化 対 応 を 参 照 してください JSSP head HTML の head タグを 実 装 します UIコンポーネントが 必 要 とする CSJS CSS などシステムを 動 作 させるため に 必 要 な 情 報 が 記 述 されています 19

20 標 準 テーマ 青 色 を 例 にすると head タグは 主 に 以 下 の 要 素 で 構 成 されています これらの 要 素 は 全 テーマモ ジュールで 必 須 な 要 素 です 文 字 コード 文 字 コードを UTF-8 に 指 定 します <meta charset="utf-8" /> InternetExplorer 向 けの 設 定 対 象 ブラウザの 最 新 のレンダリングエンジンを 使 用 するように 指 定 します <meta http-equiv="x-ua-compatible" content="ie=edge"> Google Chrome 向 けの 設 定 Google Chrome が 翻 訳 を 行 うかどうかを 問 い 合 わせるダイアログの 表 示 を 抑 制 します <meta name="google" content="notranslate"> base タグ base タグを 指 定 します <base href='<imart type="string" value=base></imart>' target="_self"> テーマのCSS テーマの CSS を 読 み 込 みます <imart type="imuilink" href="ui/theme/im_theme_dropdown_blue/css/theme.css"></imart> UIコンポーネントのCSS UIコンポーネントの CSS を 読 み 込 みます <imart type="imuilink" href="ui/css/imui.css"></imart> twitter bootstrap のCSS twitter bootstrap の CSS を 読 み 込 みます <link rel="stylesheet" type="text/css" href="ui/css/bootstrap.css"> IE8 向 けの 設 定 IE8 向 けに HTML5 の 要 素 を 扱 えるようにするライブラリを 読 み 込 みます 20

21 <!--[if lt IE 9]> <script type="text/javascript" src="ui/libs/html5.js"></script> <![endif]--> 3rd party ライブラリの 読 み 込 み テーマ および UIコンポーネントが 利 用 する サードパーティライブラリを 読 み 込 みます <imart type="imuiscript" src="ui/libs/jquery js"></imart> <imart type="imuiscript" src="ui/libs/jquery-ui custom.js"></imart> <script type="text/javascript" src="ui/libs/jstree_pre1.0_fix/jquery.jstree.js"></script> <script type="text/javascript" src="csjs/libs/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script> <imart type="imuiscript" src="ui/libs/jquery.jqgrid-4.3.3/js/jquery.jqgrid.src.js" suffix="min" regexp="src" defer="defer"></imart> <link rel="stylesheet" type="text/css" href="ui/libs/jquery-file-upload/css/jquery.fileupload-ui.css"> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/tmpl.min.js" defer="defer"></script> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/jquery.iframe-transport.js" defer="defer"> </script> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/jquery.fileupload.js" defer="defer"></script> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/jquery.fileupload-ip.js" defer="defer"> </script> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/jquery.fileupload-ui.js" defer="defer"> </script> <script type="text/javascript" src="ui/libs/jquery-file-upload/js/jquery.fileupload-jui.js" defer="defer"> </script> <script type="text/javascript" src="ui/js/jquery.imui.fileupload.js" defer="defer"></script> <script type="text/javascript" src="csjs/libs/lightbox2/js/lightbox.js"></script> <imart type="imuiscript" src="ui/libs/chardinjs/js/chardinjs.js" suffix="min" regexp="src" defer="defer"> </imart> <link rel="stylesheet" type="text/css" href="ui/libs/chardinjs/css/chardinjs.css"> セッション 自 動 維 持 機 能 の 読 み 込 み セッション 自 動 維 持 機 能 を 実 現 するタグを 記 述 します <imart type="imuisessionkeeper"/> UIコンポーネントのCSJS UIコンポーネント の ClientSideJavaScript を 読 み 込 みます <imart type="condition" validity=loadsystemlocale><imart type="imuiscript" src=systemlocalescript /> </imart> <imart type="condition" validity=loadtenantlocale><imart type="imuiscript" src=tenantlocalescript /> </imart> <imart type="imuiscript" src=userlocalescript></imart> <imart type="imuiscript" src="ui/js/imui.js"></imart> <script src="ui/js/imui-form-util.js"></script> テーマのCSJS 21

22 テーマの ClientSideJavaScript を 読 み 込 みます 読 み 込 む ClientSideJavaScript ClientSideJavaScript の 実 装 は 各 テーマによって 異 なります <imart type="imuiscript" src="ui/theme/im_theme_dropdown_blue/js/theme.js"></imart> <script type="text/javascript" src="csjs/im_json.js" ></script> <script type="text/javascript" src="csjs/im_window.js" ></script> ライブラリ 群 の 切 り 替 え intra-mart Accel Platform 2015 Winter(Lydia) からライブラリ 群 の 切 り 替 え 機 能 を 追 加 しました 標 準 では 上 記 の テーマのCSS UIコンポーネントのCSS twitter bootstrap のCSS IE8 向 けの 設 定 3rd party ライブラリの 読 み 込 み セッション 自 動 維 持 機 能 の 読 み 込 み UIコンポーネントのCSJS テーマの CSJS の 組 み 合 わせを 定 義 しています この 組 み 合 わせはテーマ 共 通 モジュールとして 提 供 しています どのような 組 み 合 わせ 名 が 用 意 されているかの 詳 細 は 設 定 ファイルリファレンス - ライブラリ 群 設 定 を 参 照 してください 組 み 合 わせの 指 定 方 法 は ライブラリ 群 の 切 り 替 え で 説 明 します imart type= head のプレースホルダー <imart type= head > 内 に 指 定 された 文 字 列 と 置 き 換 えられるプレースホルダーです <imart type="replaceheadtop"></imart> imuiajaxsubmit のメッセージ 表 示 用 関 数 imuiajaxsubmit の 結 果 を 表 示 するための 関 数 です <script> (function($) { $(document).ready(function() { var message = '<imart type="string" value=message />'; var options = <imart type="string" value=options />; var messagetype = '<imart type="string" value=messagetype />'; var detail = <imart type="string" value=detail />; if(messagetype == 'warning') { $.imuiformutil.showwarningmessage(message, detail, options); else { $.imuiformutil.showsuccessmessage(message, options); ); )(jquery); </script> header ヘッダー 部 分 を 実 装 します 標 準 テーマでは グローバルナビゲーション ユーティリティ マイメニューなどが 実 22

23 装 されています ロゴ 標 準 テーマでは intra-mart のロゴ 画 像 を 配 置 します この 画 像 をクリックすると テナント 管 理 で 設 定 するホーム URLへ 遷 移 します グローバルナビ 標 準 テーマでは ドロップダウンメニューを 配 置 します このドロップダウンメニューには テナント 管 理 のメニュー 設 定 でグローバルナビ(PC 用 )をメニューグループとして 定 義 したメニューが 含 まれます グローバルナビ(PC 用 )の 設 定 は テナント 管 理 者 操 作 ガイド を 参 照 してください マイメニュー 標 準 テーマでは マイメニューを 表 示 するためのアイコンを 配 置 します 検 索 ボックス 標 準 テーマでは サイト 内 をキーワード 検 索 するための 検 索 ボックスを 表 示 するためのアイコンを 配 置 します IM- ContentsSearch をインストールすると このアイコンが 表 示 され 検 索 ボックスから 全 文 検 索 を 行 うことができま す ユーティリティ ユーティリティは 個 人 設 定 やログイン/ログアウトなど 業 務 外 の 操 作 をまとめたメニュー 群 です ユーティリティは UserUtilityTag と そのタグが 呼 び 出 すプラグインで 構 成 されています 標 準 で 提 供 しているプラグインは ChangeToSPItemProvider スマートフォン 版 へ CompanyItemProvider 会 社 切 り 替 え LoginLogoutItemProvider ログインログアウト PersonalSettingsItemProvider 個 人 設 定 です プラグインは UtilityItemProvider インタフェースを 実 装 したクラスとして 作 ります このプラグインの 作 成 方 法 は ユーティリティプラグイン を 参 照 してください ヘルプドロップダウン ヘルプドロップダウンは 画 面 に 簡 易 ヘルプを 表 示 する 機 能 とドキュメントライブラリへのリンクをまとめたメ ニュー 群 です メニューはサイトヘルプカテゴリに 登 録 されたメニューアイテムが 表 示 されています 23

24 コラム ヘルプドロップダウンは 2014 Winter(Iceberg) からの 機 能 になります body ボディ 部 分 を 実 装 します 標 準 テーマは 以 下 のように 実 装 されています <div id="imui-container"> <imart type="replacecontents"/> </div> なお v5,v6 の 互 換 テーマでは グローバルナビゲーションもこの JSSP に 実 装 されています footer フッター 部 分 を 実 装 します 標 準 テーマでは Copyright 表 記 Powered by intra-mart 画 像 などが 実 装 されてい ます 注 意 使 用 許 諾 により Copyright 表 記 Powered by intra-mart 画 像 を 表 示 しないことは 禁 じられていま す 画 像 ロゴやアイコンなど テーマモジュール 固 有 の 画 像 ファイルを 格 納 します CSS テーマが 使 用 する CSS を 実 装 します CSS を 使 った 際 のパフォーマンス 劣 化 を 避 けつつ テーマモジュール 間 で 共 通 な 部 分 を 共 有 するた めに LESS を 用 いて 実 装 しています テーマモジュールのビルド 時 に LESS で 書 いた.less ファイルをコンパイルし CSS に 変 換 します また CSS の 最 小 化 も 行 います 変 換 した CSS と 最 小 化 した CSS の 両 方 を Web サーバ またはアプリケーションサーバ にデプロイします CSS 上 の 共 通 な 部 分 として 以 下 のものがあります これらはテーマモジュールを 作 成 する 際 に 必 須 なファイルで す intra-mart Accel Platform が 提 供 する CSS Module List intra-mart Accel Platform が 提 供 するコンポーネント 24

25 スクリプト 開 発 モデル JavaEE 開 発 モデル jqueryui が 定 義 するコンポーネント また これらのファイルが 要 求 するパラメータも 必 要 になります CSS のフォルダ ファイル 構 成 CSS をビルドするのに 必 要 なフォルダ LESS ファイルの 構 成 は 以 下 の 通 りです テーマモジュール 固 有 のファイルは body.less, footer.less, header.less, parameter.less の 4 つです theme.less は そのほかの LESS ファイルをインポートするように 実 装 されていて このファイルをコンパイルす ることで 全 ての 定 義 を 取 り 込 んだ theme.css を 生 成 することができます imart/ui/theme/テーマid/css/ theme.less 以 下 の.less ファイルをまとめる less ファイル theme テーマモジュール 固 有 の less ファイルを 配 置 します body.less #imui-container の 定 義 footer.less footer header.less テーマのヘッダ parameters.less LESS のパラメータ common テーマモジュール 共 通 の less ファイルを 配 置 します components.less intra-mart Accel Platform が 提 供 するコンポーネント default.less HTML 要 素 を 定 義 します icons.less CSS Sprites jqueryui.less jqueryui が 提 供 する CSS mixins.less 共 通 の 関 数 modules.less intra-mart Accel Platform が 提 供 する CSS モジュール parameters.less LESS の 共 通 パラメータ portal.less ポータル theme/parameters.less の 必 須 パラメータは 以 下 のものです 25

26 /* テーマの 基 準 色 のカラーコード /* テーマの 暗 い 基 準 色 のカラーコード /* テーマの 基 準 文 字 色 のカラーコード /* テーマの 基 準 色 を 背 景 色 としたときの 文 字 色 のカラーコード /* ボタンのハイライトのカラーコード /* ボタンのボーダーのカラーコード /* グローバルナビの 左 端 からの 位 置 /* ツールバーの 高 さ CSJS テーマが 使 用 する CSJS を 実 装 します 標 準 テーマでは グローバルナビ 検 索 ボックス マイメニュー iframeの 大 きさを 制 御 する 関 数 を 実 装 していま す iframe の 大 きさを 制 御 する 関 数 は テーマモジュール 共 通 のものです この 関 数 は 以 下 のように 実 装 されていま す id が IM_MAIN の iframe が 存 在 する 場 合 その 高 さ 幅 をウィンドウの 高 さ 幅 からグローバルナビゲー ションなどを 除 いた 大 きさまで 広 げる id が IM_MAIN の iframe の 中 の iframe に imui-no-resize-iframe が class 属 性 にセットされている 場 合 その iframe は 大 きさの 変 更 対 象 外 とする 26

27 (function($) { $(document).ready(function() { fitiframe(); $(window).resize(fitiframe); ); function fitiframe() { // ヘッダー 部 分 の 高 さを 取 得 する var header = $('#imui-header').height(); // iframe の 高 さは window の 高 さからヘッダーの 高 さを 引 いた 値 var height = $(window).height() - header; // #IM_MAIN の 中 の iframe の 大 きさをセット $('#IM_MAIN').find('iframe:not(".imui-no-resize-iframe")').height(height).width($(window).width()); // #IM_MAIN の 大 きさをセット $('#IM_MAIN').height(height).width($(window).width()); //iframe のコンテンツ 読 み 込 みが 終 了 したら iframe 内 の min-width を window の 幅 にする $($('#IM_MAIN')).load(function () { try { if ($('#IM_MAIN').get(0).contentDocument && $("#IM_MAIN").contents().find('body').css('minwidth') > $(window).width()) { $("#IM_MAIN").contents().find('body').css('min-width', $(window).width()); $("#IM_MAIN").contents().find('#imui-container').css('min-width', $(window).width()); catch(ignore) { ); )(jquery); 27

28 テーマモジュールの 作 成 ここではテーマモジュールの 作 成 方 法 について 説 明 します 標 準 テーマカスタマイズを 使 って 標 準 テーマをカスタマイズする 方 法 と HTML や CSS などはじめから 作 り 込 んでいくスクラッチ 開 発 の 方 法 があります 項 目 標 準 テーマカスタマイズの 概 要 スクラッチ 開 発 設 定 ファイル JSSP CSS 画 像 CSJS サンプル 準 備 設 定 ファイル JSSP CSS 画 像 CSJS 標 準 テーマカスタマイズの 概 要 ここでは 標 準 テーマカスタマイズの 概 要 を 説 明 します 標 準 テーマカスタマイズは 標 準 テーマ 標 準 テーマ(シンプル)をカスタマイズしたテーマモジュールを 生 成 する ツールです このツールは テーマの 標 準 的 な 色 とロゴファイルを 変 更 したテーマモジュールを 簡 単 に 生 成 するこ とを 目 的 としています カスタマイズ 可 能 な 項 目 は テーマの 標 準 的 な 色 ロゴ 画 像 グローバルナビの 開 始 位 置 です HTML を 修 正 するようなカスタマイズ 特 定 の 要 素 だけを 変 更 するような 細 やかなカスタマイズには 対 応 で きません カスタマイズできる 標 準 テーマには v5 v6 の 互 換 テーマは 含 まれません 詳 細 は 標 準 テーマカスタマイズ 操 作 ガイド を 参 照 してください 28

29 スクラッチ 開 発 必 要 なファイルをすべて 作 り 込 んでいく 方 法 です intra-mart e Builder for Accel Platform でユーザモジュール プロジェクトを 作 り テーマモジュールに 必 要 なファイルを 作 成 していきます 注 意 スクラッチ 開 発 を 行 うと 標 準 テーマやそのカスタマイズでは 実 現 できない 見 た 目 や 操 作 性 を 実 装 することが 可 能 です その 反 面 CSS モジュールや UI コンポーネントを 適 切 にカスタマイズしな いと 思 わぬ 画 面 のレイアウト 崩 れ CSJS の 競 合 などが 発 生 する 恐 れがあります スクラッチ 開 発 を 行 う 場 合 は 対 象 となる 全 画 面 で 全 操 作 を 行 ってもレイアウトの 崩 れがないこと 操 作 した 際 に CSJS のエラーが 発 生 しないことなどを 十 分 に 確 認 してください 設 定 ファイル theme-config src/main/conf/theme-config 配 下 にテーマID と 同 じファイル 名 を 持 つ xml ファイルを 作 成 します 内 容 は 設 定 ファイル を 参 考 にしてください message src/main/conf/message/platform/theme 配 下 にテーマID と 同 じフォルダ 名 のフォルダを 作 り その 中 にプロパ ティファイルを 作 成 します message を 参 照 し 各 言 語 分 プロパティファイルを 作 成 します JSSP src/main/jssp/src/theme 配 下 にテーマID と 同 じ 名 前 のフォルダを 作 成 し その 中 に PageBuilder が 要 求 する head, header, body, footer の 4 つの JSSP を 作 成 します head head の 内 容 を 含 む JSSP を 実 装 します これら 以 外 に jquery のプラグインなど 必 要 なものがあれば 追 記 してく ださい 既 存 のテーマからコピーするのが 簡 単 です この 場 合 テーマID を 修 正 する 必 要 があります <imart type="imuilink" href="ui/theme/テーマid/css/theme.css"></imart>... <imart type="imuiscript" src="ui/theme/テーマid/js/theme.js"></imart> header 必 要 な 要 素 を 実 装 してください 29

30 汎 用 的 なテーマモジュールを 作 成 する 場 合 ロゴ グローバルナビ マイメニュー 検 索 ボックス ユーティリ ティ ヘルプドロップダウン は 必 須 です 汎 用 的 ではないテーマモジュールを 作 成 する 場 合 必 須 な 要 素 はありません 必 要 な 要 素 だけを 実 装 してくださ い id に imui-header を 持 つ div や header 要 素 を 含 むようにしてください <header id="imui-header"> <!-- ロゴ -->... </header> ロゴ ロゴは img タグとして 実 装 することになると 思 います この 画 像 をクリックしたとき ホームURL へ 指 定 された URL に 遷 移 することが 望 ましい 動 きになります ホームURL を 取 得 するには ThemeManager.getEncodedHomeUrl を 呼 び 出 してください <a href='<imart type="string" value=home></imart>'><img src="ui/theme/テーマid/images/logo.png"></a> let thememanager = new ThemeManager(); home = thememanager.getencodedhomeurl(); グローバルナビ MenuGroupManager を 呼 び 出 すことで ユーザにひも 付 いたグローバルナビのメニュー 情 報 を 取 得 することが できます imuidropdown タグを 利 用 して 表 示 する 例 を 下 に 挙 げます 30

31 /* imuidropdown の data 属 性 にセットするメニュー 情 報 */ var menu = []; function init(request) { /* * グローバルナビ * imuidropdown の 形 式 にメニュー 情 報 を 変 換 します */ var menugroupmanager = new MenuGroupManager(); var resultobject = menugroupmanager.getavailablemenutree('im_global_nav_pc'); if (!resultobject.error) { var context = Contexts.getAccountContext(); var menutree = resultobject.data; walk(menutree, menu, context.locale); function walk(menutree, menu, locale) { if (menutree) { var menuitem = menutree.menuitem; var item = {; menu.push(item); item.label = 'Menu'; if (menuitem.displaynames[locale]) { item.label = menuitem.displaynames[locale].displayname; if (menuitem.type!== 'FOLDER') { item.href = menuitem.url; var children = menutree.children; if (children && children.length > 0) { item.children = []; for (var i = 0; i < children.length; i++) { var child = children[i]; walk(child, item.children, locale); <imart type="imuidropdown" data=menu /> マイメニュー マイメニューは CSJS で 実 装 されています header.js の 該 当 部 分 ( 行 目 )を 参 照 してください 検 索 ボックス 検 索 ボックスは SearchBoxTag を 実 装 してください <imart type="searchboxtag" id="imui-nav-global-search-wrapper"/> このタグは 下 記 のような HTML を 生 成 します 31

32 SearchBoxTag に 指 定 する id その 中 の imui-nav-global-search.imui-form-global-search.imui-formglobal-search-input.imui-form-global-search-submit に 対 してスタイルを 当 ててください また 表 示 / 非 表 示 を 切 り 替 えるように CSJS で 関 数 を 作 成 してください <ul id="imui-nav-global-search-wrapper"> <li class="imui-nav-global-search active"> <a><span class="im-ui-icon-common-16-search-white"></span></a> <form style="display: block;" method="get" action="search" target=" search_window "> <fieldset class="imui-form-global-search"> <input type="search" name="q" class="imui-form-global-search-input"> <input type="submit" value=" 検 索 " class="imui-form-global-search-submit"> </fieldset> </form> </li> </ul> ユーティリティ ユーティリティは UserUtilityTag を 実 装 してください <imart type="userutilitytag" id="imui-user-utility" /> このタグは 下 記 のような HTML を 生 成 します UserUtilityTag に 指 定 する id その 中 の li.imui-nav-global-pulldown さらにその 中 の ul.imui-nav-globalpulldown-inner に 対 してスタイルを 当 ててください また 表 示 / 非 表 示 を 切 り 替 えたり ドロップダウンするように CSJS で 関 数 を 作 成 してください 32

33 <ul id="imui-user-utility"> <li class="imui-nav-global-pulldown"> <a href="javascript:void(0);"> 青 柳 辰 巳 </a> <ul class="imui-nav-global-pulldown-inner" style="display:none"> <li> <a href="javascript:void(0)"> 個 人 設 定 </a> <ul> <li> <a href="...">パスワード</a> </li> <li> <a href="...">カレンダー</a> </li>... </ul> </li> <li> <a href="mobile_fw/to_sp">スマートフォン 版 へ</a> </li> <li> <a href="logout">ログアウト</a> </li> </ul> </li> </ul> ヘルプドロップダウン MenuGroupManager を 呼 び 出 すことで ユーザにひも 付 いたサイトヘルプのメニュー 情 報 を 取 得 することができ ます imuidropdown タグを 利 用 して 表 示 する 例 を 下 に 挙 げます 33

34 /* imuidropdown の data 属 性 にセットするメニュー 情 報 */ var helpmenu = []; function init(request) { /* * ヘルプドロップダウン * imuidropdown の 形 式 にメニュー 情 報 を 変 換 します */ var menugroupmanager = new MenuGroupManager(); var locale = Contexts.getAccountContext().locale; var resultobject = menugroupmanager.getavailablemenutree('im_site_help_pc'); var childrendata = []; if (!resultobject.error) { for(var index=0; index<resultobject.data.children.length; index++) { childrendata.push({ href: resultobject.data.children[index].menuitem.url, label: resultobject.data.children[index].menuitem.displaynames[locale].displayname, identity: resultobject.data.children[index].menuitem.id ) helpmenu = [ { iconclass:"im-ui-icon-common-16-help-white", children:childrendata ] <imart type="imuidropdown" data=helpmenu /> id 属 性 start_help_pc に 対 して 簡 易 ヘルプを 呼 び 出 すスクリプトを 実 装 してください また href 属 性 の URL に 遷 移 しないように URL を 無 効 化 してください body id が imui-container となる div と その 中 に <imart type= xxx /> を 必 ず 実 装 してください <div id="imui-container"> <imart type="replacecontents"/> </div> footer poweredbyim.png を 表 示 してください 34

35 <footer id="imui-footer"> <div class="imui-footer-inner"> <ul class="imui-footer-utility"> <li><img src="ui/theme/テーマid/images/poweredbyim.png"/></li> </ul> </div> </footer> CSS src/main/public/ui/theme 配 下 にテーマID と 同 じ 名 前 のフォルダを 作 成 し その 中 に css フォルダを 作 成 しま す このフォルダの 中 にテーマモジュールで 使 用 するCSSを 配 置 します CSS ファイルの 名 前 は theme.css, theme.min.css と 命 名 することをお 勧 めします head.html に imuilink タグの href 属 性 に theme.css と 記 述 さ れているので この 名 前 にすることで 修 正 を 最 小 限 に 抑 えることができます テーマが 使 用 するCSS の 通 り CSS は LESS を 利 用 して 生 成 しています テーマモジュール 間 で 共 通 な 部 分 を 共 有 するため スクラッチでテーマモジュールを 作 成 する 場 合 も LESS を 使 用 して CSS を 生 成 してください 基 となる LESS ファイル 群 は %CONTEXT_PATH%/ui/theme/ 元 とするテーマID/css に 配 置 されています こ のフォルダに 含 まれるファイルをコピーしてください LESS ファイル 群 をコンパイルし テーマ の CSS を 生 成 します また パフォーマンス 向 上 を 目 的 として 最 小 化 し たテーマの CSS も 生 成 することをお 勧 めします LESS ファイルをコンパイルするには lessc や koala などを 利 用 してください LESS ファイルの 修 正 は テーマ 固 有 の LESS ファイル theme/parameter.less にとどめることをお 勧 めします 共 通 の LESS ファイルに 対 してカスタマイズを 行 うことはお 勧 めしません 画 像 src/main/public/ui/theme 配 下 にテーマID と 同 じ 名 前 のフォルダを 作 成 し その 中 に images フォルダを 作 成 し ます このフォルダの 中 にテーマモジュールで 使 用 する 画 像 を 配 置 します テーマ 毎 に 必 要 な 画 像 は 以 下 の4つです マイメニューのアイコン btn_im_01.png ロゴ 画 像 logo.png Powred by intra-mart 画 像 poweredbyim.png テーマ 画 面 に 表 示 するサムネイル 画 像 thumbnail.png CSJS 35

36 src/main/public/ui/theme 配 下 にテーマID と 同 じ 名 前 のフォルダを 作 成 し その 中 に js フォルダを 作 成 します このフォルダの 中 にテーマモジュールで 使 用 する CSJS を 配 置 します CSJS ファイルの 名 前 は theme.js, theme.min.js と 命 名 することをお 勧 めします head.html に imuiscript タグの src 属 性 に theme.js と 記 述 され ているので この 名 前 にすることで 修 正 を 最 小 限 に 抑 えることができます テーマモジュールに 必 須 の iframeの 大 きさを 制 御 する 関 数 と 作 成 するテーマモジュールで 必 要 になる CSJS を 作 成 します iframe の 大 きさを 制 御 する 関 数 は %CONTEXT_PATH%/ui/theme/テーマID/js/im_fit_iframe.js として 配 置 さ れています サンプル ここでは 以 下 のようなテーマを 作 成 していきます テーマカラーは # とします ヘッダーは ロゴ グローバルナビ 検 索 ボックス ユーティリティ マイメニューの 全 要 素 を 配 置 します 標 準 テーマとの 違 いは 上 下 の2 段 とし 丈 夫 にロゴ 検 索 ボックス ユーティリティ マイメニュー を 下 段 にグローバルナビを 配 置 します フッタは Powred by intra-mart 画 像 だけを 配 置 します head, body は 標 準 テーマと 同 じにします テーマID は sample_theme とします 準 備 36

37 intra-mart e Builder for Accel Platform でモジュールプロジェクトを 作 成 しておきます モジュールプロジェクト の 作 り 方 は intra-mart e Builder for Accel Platform アプリケーション 開 発 ガイド の モジュール プロジェクト 作 成 を 参 照 してください 設 定 ファイル theme-config まず 設 定 ファイルを 作 成 します src/main/conf/theme-config/sample_theme.xml を 作 成 します 内 容 は 以 下 のようになります <?xml version="1.0" encoding="utf-8"?> <theme-config xmlns=" xmlns:xsi=" xsi:schemalocation=" "> <theme id="sample_theme" author="intra-mart" version="8.0" imagepath="ui/theme/sample_theme/images/thumbnail.png" theme-folder="theme/sample_theme" sortkey="0"> <client-type-info id="pc" default="false"/> </theme> </theme-config> message src/main/conf/message/platform/theme/sample_theme に 以 下 の4つのファイルを 作 成 します caption.properties caption_en.properties caption_ja.properties caption_zh_cn.properties 内 容 は 以 下 のようになります CAP.Z.IWP.THEME.SAMPLE_THEME.NAME=Sample Theme CAP.Z.IWP.THEME.SAMPLE_THEME.DESCRIPTION=This is sample theme. CAP.Z.IWP.THEME.テーマID.NAME をキーに 持 つ 値 がテーマ 名 CAP.Z.IWP.THEME.テーマ ID.DESCRIPTION をキーに 持 つ 値 がテーマの 説 明 になります また Java のプロパティファイルとなるため ASCII 以 外 の 文 字 列 は native2ascii 等 でエンコードしてください 37

38 JSSP 次 に JSSP を 作 成 します head 既 存 のテーマの head をコピーし それを 修 正 します ここでは 標 準 テーマ 青 色 をコピー 対 象 とします 以 下 のファイルを src/main/jssp/src/theme/sample_theme にコピーします %CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/head.html %CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/head.js head.html は 標 準 テーマ 青 色 のテーマID である im_theme_dropdown_blue を sample_theme に 書 き 換 え るように 修 正 します --- %CONTEXT_PATH%/imart/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/head.html +++ src/main/jssp/src/theme/sample_theme/head.html -10,7 +10,7 <link rel="icon" href="<imart type="string" value=base></imart>favicon.ico" type="image/x-icon" /> <link rel="shortcut Icon" type="img/x-icon" href="<imart type="string" value=base></imart>favicon.ico" /> - <imart type="imuilink" href="ui/theme/im_theme_dropdown_blue/css/theme.css"></imart> + <imart type="imuilink" href="ui/theme/sample_theme/css/theme.css"></imart> <imart type="imuilink" href="ui/css/imui.css"></imart> <link rel="stylesheet" type="text/css" -39,7 <imart type="imuiscript" src=userlocalescript></imart> <imart type="imuiscript" src="ui/js/imui.js"></imart> <script src="ui/js/imui-form-util.js"></script> - <imart type="imuiscript" src="ui/theme/im_theme_dropdown_blue/js/theme.js"></imart> + <imart type="imuiscript" src="ui/theme/sample_theme/js/theme.js"></imart> <script type="text/javascript" src="csjs/im_json.js" ></script> <script type="text/javascript" src="csjs/im_window.js" ></script> head.js は 修 正 不 要 です header header は 以 下 のように 実 装 します src/main/jssp/src/theme/sample_theme/header.html 38

39 <header id="imui-header" class="container-fluid sample-header"> <div class="row-fluid"> <!-- ロゴ --> <div class="span6"> <a id="logo" href='<imart type="string" value=home></imart>'><img src="ui/theme/sample_theme/images/logo.png"></a> </div> <div class="span6"> <!-- マイメニュー --> <div style="float:right;"> <ul id="imui-nav-global-launcher-wrapper" style="display:inline-block;"> <li class="imui-nav-global-launcher"><a class="action"><img src="ui/theme/sample_theme/images/btn_im_01.png" alt="im launcher"></a></li> </ul> </div> <!-- ユーティリティ --> <div style="float:right;"> <imart type="userutilitytag" id="imui-user-utility"></imart> </div> <!-- 検 索 ボックス --> <div style="float:right;"> <imart type="searchboxtag" id="imui-nav-global-search-wrapper"></imart> </div> </div> </div> <div class="row-fluid"> <!-- グローバルナビ --> <div class="span12"> <imart type="imuidropdown" data=menu /> </div> </div> </header> src/main/jssp/src/theme/sample_theme/header.js 39

40 var home; var menu = []; function init(request) { /* * ロゴ */ var thememanager = new ThemeManager(); home = thememanager.getencodedhomeurl(); /* * グローバルナビ * imuidropdown の 形 式 にメニュー 情 報 を 変 換 します */ var menugroupmanager = new MenuGroupManager(); var resultobject = menugroupmanager.getavailablemenutree('im_global_nav_pc'); if (!resultobject.error) { var context = Contexts.getAccountContext(); var menutree = resultobject.data; var tmpmenu = []; walk(menutree, tmpmenu, context.locale); for (var i = 0; i < tmpmenu[0].children.length; i++) { // 再 帰 的 にメニューの 情 報 を 取 得 します menu.push(tmpmenu[0].children[i]); function walk(menutree, menu, locale) { if (menutree) { var menuitem = menutree.menuitem; var item = {; menu.push(item); item.label = 'Menu'; if (menuitem.displaynames[locale]) { item.label = menuitem.displaynames[locale].displayname; if (menuitem.type!== 'FOLDER') { item.href = menuitem.url; var children = menutree.children; if (children && children.length > 0) { item.children = []; for (var i = 0; i < children.length; i++) { var child = children[i]; walk(child, item.children, locale); body 既 存 のテーマの body をコピーします 40

41 以 下 のファイルを src/main/jssp/src/theme/sample_theme にコピーします %CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/body.html %CONTEXT_PATH%/WEB-INF/jssp/platform/src/theme/im_theme_dropdown_blue/body.js footer footer は 以 下 のように 実 装 します src/main/jssp/src/theme/sample_theme/footer.html <footer> <img src="ui/theme/sample_theme/images/poweredbyim.png"/> </footer> src/main/jssp/src/theme/sample_theme/footer.js function init() { CSS 既 存 のテーマの LESS ファイルをコピーし それを 修 正 します 以 下 のフォルダを src/main/public/ui/theme/sample_theme にコピーします %CONTEXT_PATH%/ui/theme/im_theme_dropdown_blue/css 修 正 対 象 は src/main/public/ui/theme/sample_theme/css/theme 配 下 にある 以 下 の3ファイルです parameter.less footer.less header.less parameter.less テーマカラーを # にします その 他 の 値 は 修 正 #005678; footer.less footer の 背 景 を 黒 に Powred by intra-mart の 画 像 を 中 央 に 配 置 します 41

42 footer { background-color: #000; height: 100px; margin-top: 20px; text-align: center; img { margin-top: 24px; header.less ヘッダのスタイルを 指 定 します #imui-nav-global-launcher-wrapper {... #imui-header{ /* nav-global */ #imui-nav-global{ height:@nav-global-height;... /* nav-global(wrap) */.imui-nav-global-wrap{ position:relative; min-width:960px; margin:0 10px; height:@nav-global-height; 画 像 既 存 のテーマの 画 像 ファイルをコピーし それを 修 正 します 以 下 のフォルダを src/main/public/ui/theme/sample_theme にコピーします %CONTEXT_PATH%/ui/theme/im_theme_dropdown_blue/images コピーしたファイルの 内 thumbnail.png のみこのテーマモジュールと 実 体 が 伴 いません あとでスクリーンショッ トを 取 得 し その 画 像 と 入 れ 替 えてください CSJS このテーマモジュールで 使 用 する 関 数 を 実 装 します 42

43 今 回 は iframe の 大 きさ 制 御 マイメニュー 検 索 ボックスの 制 御 関 数 を 実 装 します 詳 細 は Appendix を 参 照 してください 43

44 付 録 テーマモジュールのフォルダ ファイル 構 成 44

45 テーマモジュール build.xml build_js_css.xml message.properties message_en.properties message_ja.properties message_zh_cn.properties module.xml pom.xml src main conf message platform theme caption.properties caption_en.properties caption_ja.properties caption_zh_cn.properties テーマID caption.properties caption_en.properties caption_ja.properties caption_zh_cn.properties theme-config テーマID.xml jssp platform src theme テーマID body.html body.js footer.html footer.js head.html head.js header.html header.js public ui theme テーマID css CSS を 参 照 してください images logo.png poweredbyim.png thumbnail.png... js CSJS を 参 照 してください 45

46 テーマモジュールのサンプル 項 目 設 定 ファイル message sample_theme.xml JSSP head header body footer CSS parameter.less header.less footer.less CSJS フォルダ ファイル 構 成 設 定 ファイル message src/main/conf/message/platform/theme/sample_theme/caption.properties 1 2 CAP.Z.IWP.THEME.SAMPLE_THEME.NAME=Sample Theme CAP.Z.IWP.THEME.SAMPLE_THEME.DESCRIPTION=This is sample theme. caption_en.properties, caption_ja.properties, caption_zh_cn.properties も 同 じ 内 容 です sample_theme.xml src/main/conf/theme-config/sample_theme.xml 46

47 <?xml version="1.0" encoding="utf-8"?> <theme-config xmlns=" xmlns:xsi=" xsi:schemalocation=" "> <theme id="sample_theme" author="intra-mart" version="8.0" imagepath="ui/theme/sample_theme/images/thumbnail.png" theme-folder="theme/sample_theme" sortkey="0"> <client-type-info id="pc" default="false"/> </theme> </theme-config> JSSP head src/main/jssp/src/theme/sample_theme/head.html 47

48 <head> <meta charset="utf-8" /> <meta name="author" content="ntt DATA INTRAMART CORPORATION" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="google" content="notranslate"> <base href='<imart type="string" value=base></imart>' target="_self"> <link rel="icon" href='<imart type="string" value=base></imart>favicon.ico' type="image/x-icon" /> <link rel="shortcut Icon" type="img/x-icon" href='<imart type="string" value=base> </imart>favicon.ico' /> <imart type="string" value=libraries/> <imart type="replaceheadtop"></imart> <script> (function($) { $(document).ready(function() { var message = '<imart type="string" value=message />'; var options = <imart type="string" value=options />; var messagetype = '<imart type="string" value=messagetype />'; var detail = <imart type="string" value=detail />; if(messagetype == 'warning') { $.imuiformutil.showwarningmessage(message, detail, options); else { $.imuiformutil.showsuccessmessage(message, options); ); )(jquery); </script> </head> src/main/jssp/src/theme/sample_theme/head.js 48

49 let base; let message; let detail; let locale; let options = {; let messagetype = 'success'; let libraries; function init(request) { //imuiajaxsubmit で 送 られたメッセージキーをチェックし 存 在 すればメッセージを 表 示 if (request['imui-message-key'] == Client.get('x-jp-co-intra-mart-ajaxsubmit-message-key')) { message = Client.get('x-jp-co-intra-mart-ajaxsubmit-message'); messagetype = Client.get('x-jp-co-intra-mart-ajaxsubmit-message-type'); if (messagetype == 'warning') { detail = Client.get('x-jp-co-intra-mart-ajaxsubmit-detail-message'); if (request.getparameter("imui-message-closable")!= null) { options.closable = request.getparameter("imui-message-closable").getvalue() === 'true'? true : false; if (request.getparameter("imui-message-duration")!= null) { options.duration = request.getparameter("imui-message-duration").getvalue() - 0; if (request.getparameter("imui-message-escape")!= null) { options.escape = request.getparameter("imui-message-escape").getvalue() === 'true'? true : false; if(detail!= null){ detail = (ImJson.parseJSON(detail)[0]).toSource(); else { var a = new Array(); detail = a.tosource(); options = (options).tosource(); base = Web.base() + '/'; var thememanager = new ThemeManager(); var contents = new Content(themeManager.getLibrariesPath()); libraries = contents.execute(); header src/main/jssp/src/theme/sample_theme/header.html 49

50 <header id="imui-header" class="container-fluid sample-header"> <div class="row-fluid"> <!-- ロゴ --> <div class="span6"> <a id="logo" href='<imart type="string" value=home></imart>'><img src="ui/theme/sample_theme/images/logo.png"></a> </div> <div class="span6"> <!-- マイメニュー --> <div style="float:right;"> <ul id="imui-nav-global-laucher-wrapper" style="display:inline-block;"> <li class="imui-nav-global-launcher"><a class="action"><img src="ui/theme/sample_theme/images/btn_im_01.png" alt="im launcher"></a></li> </ul> </div> <!-- ユーティリティ --> <div style="float:right;"> <imart type="userutilitytag" id="imui-user-utility"></imart> </div> <!-- ヘルプドロップダウン --> <div style="float:right;"> <imart type="imuidropdown" data=helpmenu id="imui-nav-help-dropdown" style="top:10px;position:relative;"/> </div> <!-- 検 索 ボックス --> <div style="float:right;"> <imart type="searchboxtag" id="imui-nav-global-search-wrapper"></imart> </div> </div> </div> <div class="row-fluid"> <!-- グローバルナビ --> <div class="span12"> <imart type="imuidropdown" data=menu /> </div> </div> </header> src/main/jssp/src/theme/sample_theme/header.js 50

51 51

52 var home; var menu = []; var helpmenu = []; function init(request) { /* * ロゴ */ var thememanager = new ThemeManager(); home = thememanager.getencodedhomeurl(); /* * グローバルナビ * imuidropdown の 形 式 にメニュー 情 報 を 変 換 します */ var menugroupmanager = new MenuGroupManager(); var resultobject = menugroupmanager.getavailablemenutree('im_global_nav_pc'); if (!resultobject.error) { var context = Contexts.getAccountContext(); var menutree = resultobject.data; var tmpmenu = []; walk(menutree, tmpmenu, context.locale); for (var i = 0; i < tmpmenu[0].children.length; i++) { // 再 帰 的 にメニューの 情 報 を 取 得 します menu.push(tmpmenu[0].children[i]); gethelpdropdown(); function walk(menutree, menu, locale) { if (menutree) { var menuitem = menutree.menuitem; var item = {; menu.push(item); item.label = 'Menu'; if (menuitem.displaynames[locale]) { item.label = menuitem.displaynames[locale].displayname; if (menuitem.type!== 'FOLDER') { item.href = menuitem.url; var children = menutree.children; if (children && children.length > 0) { item.children = []; for (var i = 0; i < children.length; i++) { var child = children[i]; walk(child, item.children, locale); function gethelpdropdown(){ var menugroupmanager = new MenuGroupManager(); var locale = Contexts.getAccountContext().locale; var resultobject = menugroupmanager.getavailablemenutree('im_site_help_pc'); 52

53 var resultobject = menugroupmanager.getavailablemenutree('im_site_help_pc'); var childrendata = []; if (!resultobject.error) { for(var index=0; index<resultobject.data.children.length; index++) { childrendata.push({ href: resultobject.data.children[index].menuitem.url, label: resultobject.data.children[index].menuitem.displaynames[locale].displayname, identity: resultobject.data.children[index].menuitem.id ) helpmenu = [ { iconclass:"im-ui-icon-common-16-help-white", children:childrendata ] body src/main/jssp/src/theme/sample_theme/body.html <div id="imui-container"> <imart type="replacecontents"> </imart> </div> src/main/jssp/src/theme/sample_theme/body.js 1 function init(){ footer src/main/jssp/src/theme/sample_theme/footer.html <footer> <img src="ui/theme/sample_theme/images/poweredbyim.png"/> </footer> src/main/jssp/src/theme/sample_theme/footer.js 1 function init(){ 53

54 CSS parameter.less src/main/public/ui/theme/sample_theme/css/theme/parameter.less /* テーマの 標 準 的 な 色 のカラーコード /* テーマの 標 準 的 な 暗 い 色 のカラーコード /* テーマの 標 準 的 な 文 字 色 のカラーコード /* テーマの 標 準 的 な 色 を 背 景 色 としたときの 文 字 色 のカラーコード /* グローバルナビの 左 端 からの 位 置 158px; /* ボタンのハイライトのカラーコード /* ボタンのボーダーのカラーコード /* ツールバーの 高 さ /* グローバルナビの 高 header.less src/main/public/ui/theme/sample_theme/css/theme/header.less 54

55 55

56 #logo { position: relative; top: 5px; #imui-user-utility { position: relative; top: 10px; > li.imui-nav-global-pulldown { > a { &.ui-state-active { > span.ui-button-text { color: #333333; > span.ui-button-text { color: #ffffff; #imui-nav-global-search-wrapper { position: relative; top: 13px; form { float: left; > li.imui-nav-global-search { > a { > span { float: right; margin: 3px; /* IM-Launcher area */ #imui-nav-global-laucher-wrapper { margin-top: 4px;.imui-nav-global-launcher{ margin-left:8px;.action{ z-index: 1000; position:relative;.imui-nav-global-launcher.active{ position:relative; /* IM-Launcher area box */.imui-box-launcher{ position:absolute; top:5px; 56

57 top:5px; right:20px; width:830px; z-index:999; padding:30px px; background: rgb(0,0,0); background: rgba(0,0,0,0.8);.theme-border-radius(10px, 10px, 10px, 10px);.theme-box-shadow(0px, 3px, 10px, #333333); a{ display:block; overflow:hidden;.imui-list-launcher{ margin-left:5px; margin-bottom:20px; li{ float:left; text-align:center; padding:0 10px 0 0; height:80px; width:80px; a { span.imui-list-launcher-label{ display:block; font-size:75%; text-decoration:none; padding:2px 10px; background:#000000; width:60px; overflow:hidden; white-space: normal; word-wrap: break-word; word-break: break-all; color:@theme-header-accent-text-color;.theme-border-radius(10px, 10px, 10px, 10px); span.imui-list-launcher-info{ margin-left:140px; width:500px;.imui-btn-launcher-back{ position:absolute; left:10px; top:28px; border:1px solid #888888;.theme-border-radius(3px, 3px, 3px, 3px); a{ line-height:50px; 57

58 imui-btn-launcher-add{ position:absolute; right:68px; bottom:4px;.theme-border-radius(3px, 3px, 3px, 3px);.imui-btn-launcher-settings{ position:absolute; right:38px; bottom:4px;.theme-border-radius(3px, 3px, 3px, 3px);.imui-btn-launcher-close{ position:absolute; right:7px; bottom:7px; padding:0px 1px; border:1px solid #888888;.theme-border-radius(3px, 3px, 3px, 3px); #imui-header{ /* nav-global */ #imui-nav-global{ border-bottom:3px /* nav-global(wrap) */.imui-nav-global-wrap{ position:relative; min-width:960px; margin:0 10px; { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #EEE; position: absolute; top: 6px; right: 3px; 58

59 imui-triangle-down { width: 0; height: 0; border-top: 6px solid #EEE; border-left: 5px solid transparent; border-right: 5px solid transparent; footer.less src/main/public/ui/theme/sample_theme/css/theme/footer.less footer { background-color: #000; height: 100px; margin-top: 20px; text-align: center; img { margin-top: 24px; CSJS src/main/public/ui/theme/sample_theme/js/theme.js 59

60 60

61 /* * 検 索 ボックス */ (function($) { $.widget("imui.imuisearchbox", { active: false, _create: function() { var self = this; var form = $(this.element).find('form'); var trigger = $(this.element).find('li.imui-nav-global-search'); self.formarea = form; self._close(); trigger.children('a').bind('click', function() { if (self.active) { self._close(); this.focus(); else { self._open(); self.formarea.find('.imui-form-global-search-input').focus(); return false; ); form.bind('submit', function() { if (self.active) { self._close(); );, _open: function() { this.active = true; $(this.element.children('li')).addclass('active'); this.formarea.show();, _close: function() { this.active = false; $(this.element.children('li')).removeclass('active'); this.formarea.hide(); ); $.widget("imui.imuimenuitem", { defaultelement: "<ul>", delay: 150, options: { iconclass: null, position: { my: "left top", at: "right top", collision: 'flip none', _create: function() { var self = this; 61

62 var self = this; this.activemenu = this.element; this.element.addclass( "imui-menu ui-widget ui-widget-content" ).attr({ id: this.menuid, role: "menu" ).bind( "mouseover.imuimenuitem", function( event ) { if ( self.options.disabled ) { return; cleartimeout($.data(self.options.root.element, 'imui_dropdown_menu.closealltimer')); var target = $( event.target ).closest( ".imui-menu-item" ); if ( target.length ) { self.focus( event, target ); ).bind("mouseout.imuimenuitem", function( event ) { if ( self.options.disabled ) { return; cleartimeout($.data(self.options.root.element, 'imui_dropdown_menu.closealltimer')); var timer = settimeout(function() { self.closeall(); self.options.root._close();, 500); $.data(self.options.root.element, 'imui_dropdown_menu.closealltimer', timer); var target = $( event.target ).closest( ".imui-menu-item" ); if ( target.length ) { self.blur( event ); ).find('a').each(function() { var anchor = $(this); var iconclassname = anchor.data('iconclass') self.options.iconclass; if (anchor.data('icon')) { anchor.prepend( $('<span class="imui-menu-item-icon"/>').css('background-image', 'url(' + anchor.data('icon') + ')') ); else if (iconclassname) { anchor.prepend( $('<span class="imui-menu-item-icon"/>').addclass(iconclassname) ); if ($(anchor).next('ul').length == 0) { anchor.bind('click', function() { self.closeall(); self.options.root._close(); 62

63 , ); ).end().imuiscrollmenu({ position: this.options.position ).find('ul').imuiscrollmenu({position: this.options.position); this.refresh();, refresh: function() { var self = this; // initialize nested menus var submenus = this.element.find("ul:not(.imui-menu)").addclass( "imui-menu ui-widget ui-widget-content" ).attr("role", "menu").hide(); // don't refresh list items that are already adapted var items = submenus.add(this.element).children( "li:not(.imui-menu-item):has(a)" ).addclass( "imui-menu-item" ).attr( "role", "presentation" ); items.children( "a" ).addclass( " ui-state-default" ).attr( "tabindex", -1 ).attr( "role", "menuitem" ); items.children('a').each(function() { var html = $(this).html(); $(this).empty().append($('<span class="imui-menu-item-label"/>').wrapinner(html)); ); submenus.each(function() { var menu = $(this); var item = menu.prev("a"); item.attr("aria-haspopup", "true").prepend('<div class="imui-triangle-right"></div>'); );, focus: function( event, item ) { var self = this; this.blur(); if ( this._hasscroll() ) { var bordertop = parsefloat( $.curcss( this.element[0], "bordertopwidth", true) ) paddingtop = parsefloat( $.curcss( this.element[0], "paddingtop", true) ) 0, offset = item.offset().top - this.element.offset().top - bordertop - paddingtop, scroll = this.element.scrolltop(), elementheight = this.element.height(), 63

64 elementheight = this.element.height(), itemheight = item.height(); if ( offset < 0 ) { this.element.scrolltop( scroll + offset ); else if ( offset + itemheight > elementheight ) { this.element.scrolltop( scroll + offset - elementheight + itemheight ); this.active = item.first().children( "a" ).addclass( "ui-state-focus" ).end(); // highlight active parent menu item, if any this.active.parent().closest(".imui-menu-item").children("a:first").addclass("ui-stateactive"); self.timer = settimeout(function() { self._close();, self.delay) var nested = $(">ul", item); if (nested.length && /^mouse/.test(event.type)) { self._startopening(nested); this.activemenu = item.parent(); this._trigger( "focus", event, { item: item );, blur: function(event) { if (!this.active) { return; cleartimeout(this.timer); this.active.children( "a" ).removeclass( "ui-state-focus" ); this.active = null;, _startopening: function(submenu) { cleartimeout(this.timer); var self = this; self.timer = settimeout(function() { self._close(); self._open(submenu);, self.delay);, _open: function(submenu) { cleartimeout(this.timer); this.element.find(".imui-menu").not(submenu.parents()).hide().attr("aria-hidden", "true"); /* var position = $.extend({, { of: this.active, $.type(this.options.position) == "function" 64

65 , $.type(this.options.position) == "function"? this.options.position(this.active) : this.options.position ); submenu.show().removeattr("aria-hidden").attr("aria-expanded", "true").position(position); */ submenu.width(submenu.width()); submenu.show().removeattr("aria-hidden").attr("aria-expanded", "true").css('opacity', 0).imuiScrollMenu('adjust',$.extend(this.options.position, {of: submenu.parent().parent())).css('opacity', 1);, closeall: function() { this.element.find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end().find("a.ui-state-active").removeclass("ui-state-active"); this.blur(); this.activemenu = this.element;, _close: function() { this.active.parent().find("ul").hide().attr("aria-hidden", "true").attr("aria-expanded", "false").end().find("a.ui-state-active").removeclass("ui-state-active");, _hasscroll: function() { // TODO: just use.prop() when we drop support for jquery older than 1.6 return this.element.height() < this.element[ $.fn.prop? "prop" : "attr" ]( "scrollheight" );, select: function( event ) { // save active reference before closeall triggers blur var ui = { item: this.active ; this.closeall(); this._trigger( "select", event, ui );, destroy: function() { this.element.removeattr('aria-activedescendant').find('.imui-menu').andself().removeclass('imui-menu ui-widget ui-widget-content ').removeattr('role').removeattr('tabindex').removeattr('aria-labelledby').removeattr('aria-expanded').removeattr('aria-hidden').show(); 65

66 show(); this.element.find('.imui-menu-item').unbind('.imuimenuitem').removeclass('imui-menu-item').removeattr('role').children('a').removeclass('ui-state-hover').removeattr('tabindex').removeattr('role').removeattr('aria-haspopup').removeattr('id').children('.ui-icon').remove(); $.Widget.prototype.destroy.call(this); ); $.widget("imui.imui_dropdown_menu",{ options: { iconclass: null, menubarclass: '',//'imui-nav-global-list imui-menubar ui-widget-header ui-helper-clearfix', menubaritemclass: '',//'imui-menubar-item', activeforie8: null, _create: function() { // this will be ul var that = this; // items will be toplevel li var items = this.items = this.element.children('li').addclass(that.options.menubaritemclass).children('a'); // let only the first item receive focus items.slice(1).attr( "tabindex", -1 ); //this.element.addclass("imui-menubar ui-widget-header ui-helper-clearfix"); this.element.addclass(this.options.menubarclass); items.each(function() { var anchor = $(this); anchor.bind('mouseenter.imui_dropdown_menu', function(event) { anchor.addclass('ui-state-hover'); ).bind('mouseleave.imui_dropdown_menu', function(event) { anchor.removeclass('ui-state-hover'); ).bind('click.imui_dropdown_menu', function(event) { if (anchor.next('ul').size() == 0) { that._trigger('select', event, {item: anchor.closest('li')); ); ); items.next('ul') 66

67 items.next('ul').imuimenuitem({ select: function( event, ui ) { ui.item.parents( "ul.imui-menu:last" ).hide(); that._trigger( "select", event, ui ); that._close(); // TODO what is this targetting? there's probably a better way to access it $(event.target).prev().focus();, iconclass: this.options.iconclass, root: this ).hide(); items.each(function() { var input = $(this), menu = input.next('ul'); input.bind("click.imui_dropdown_menu focus.imui_dropdown_menu mouseenter.imui_dropdown_menu mouseleave.imui_dropdown_menu", function(event) { // ignore triggered focus event if ( event.type == "focus" &&!event.originalevent ) { return; //サブメニューがないメニューは eventをそのまま 続 行 if ($(this).next('ul').length!= 0) { event.preventdefault(); if ( event.type == "click" && menu.is( ":visible" ) && that.activemenu && that.activemenu[0] == menu[0] ) { that._close(); return; if ( ( that.open && event.type == "mouseenter" ) event.type == "click" ) { that._open( event, menu ); if (event.type == 'mouseenter') { cleartimeout($.data(that, 'imui_dropdown_menu.closealltimer')); that._open(event, menu); return; if (event.type == 'mouseleave' && menu.is(':visible')) { cleartimeout($.data(that.element, 'imui_dropdown_menu.closealltimer')); var timer = settimeout(function() { that._close();, 500); $.data(that.element, 'imui_dropdown_menu.closealltimer', timer); return; ).addclass('ui-button ui-widget ui-button-text-only imui-menubar-link').wrapinner( "<span class='ui-button-text'></span>" ).removeclass( "ui-button-text-only" ).addclass( "ui-button-text-icon-secondary" ); 67

68 //for IE8 if (input.width() > input.children().outerwidth(true)) { input.width(input.children().outerwidth(true)); //サブメニューがある 場 合 は 下 向 き 三 角 アイコンを 追 加 if (input.next('ul').length!= 0) { input.prepend('<div class="imui-triangle-down" style="position: absolute;top: 10px;right:.5em;"></div>'); ); $(that.element).each(function(event){ $(this).bind('focusin.imui_dropdown_menu', function(event) { cleartimeout(that.closetimer); ); $(this).bind('focusout.imui_dropdown_menu', function(event) { that.closetimer = settimeout(function() { that._close(event);, 100); ); );, _close: function(event, menu) { if (!this.activemenu!this.activemenu.length ) { //for IE8 if ($.data(this.element, 'imui_dropdown_menu.active')!= null) { this.activemenu = $.data(this.element, 'imui_dropdown_menu.active'); else { return; this.element.children('li').removeclass('active'); this.activemenu.imuimenuitem("closeall").hide(); this.activemenu.prev().removeclass("ui-state-active").removeattr("tabindex"); this.activemenu = null; this.open = false; //for IE8 this.options.activeforie8 = null; $.removedata(this.element, 'imui_dropdown_menu.active');, _open: function(event, menu) { var that = this; if (menu.length == 0) { return; if ( this.activemenu && this.activemenu[0] == menu[0] ) { //for IE8 68

69 //for IE8 if (this.options.activeforie8!= null) { this.activemenu = this.options.activeforie8; else { return; this.element.children('li').addclass('active'); if (this.activemenu) { this.activemenu.imuimenuitem("closeall").hide(); this.activemenu.prev().removeclass("ui-state-active"); var button = menu.prev().addclass("ui-state-active"); menu.width(menu.width()); if (menu.width() < menu.parent().width()) { menu.width(menu.parent().width()); this.activemenu = menu.show().css('opacity', 0).imuiScrollMenu('adjust', { collision: 'flip none', my: 'right top', at: 'right bottom', of: button, true).css('opacity', 1); //for IE8 this.options.activeforie8 = this.activemenu; $.data(this.element, 'imui_dropdown_menu.active', this.activemenu); this.open = true; this._trigger('select', event, {item: this.activemenu.closest('li'));, destroy: function() { this.element.find(':imui-imuimenu').imuimenuitem('destroy'); this.element.removeclass('imui-menubar ui-widget-header ui-helper-clearfix').removeattr('role').unbind('.imui_dropdown_menu'); this.element.children('li').removeclass('imui-menubar-item').removeattr('role'); $('> li > a', this.element).removeclass('ui-button ui-widget ui-button-text-only ui-menubar-link ui-state-default').removeattr('role').unbind('.imui_dropdown_menu'); 69

70 unbind('.imui_dropdown_menu'); $.Widget.prototype.destroy.call(this); ); /* * マイメニュー */ $(document).ready(function() { $('#imui-user-utility').imui_dropdown_menu(); $('#start_help_pc').children().removeattr('href'); var starthelp = function(){ $('body').imuisitetour('start'); ; $('body').imuisitetour(); $('#start_help_pc').on('click.sitehelp',starthelp); var parent = $(this).parent()[0]; var removelauncher = function() { $('.imui-box-launcher').remove(); $('div[aria-labelledby=ui-dialog-title-imui-launcher-add-dialog]').remove(); $('#imui-launcher-add-dialog').remove(); $(parent).removeclass('active'); ; $('a', '.imui-nav-global-launcher').bind('click', function(event) { event.preventdefault(); if ($('.imui-box-launcher').size() == 0) { var launcher = new Array(); launcher.push('<div class="imui-box-launcher">') launcher.push('<div id="imui-list-launcher" class="imui-list-launcher"><ul><li></li> </ul></div>'); launcher.push('<p class="imui-btn-launcher-back"><a href="javascript: void(0);"> <span></span></a></p>'); launcher.push('<p class="imui-btn-launcher-add"><a href="javascript: void(0);"> <span></span></a></p>'); launcher.push('<p class="imui-btn-launcher-settings"><a href="user/mymenu/settings"><span class="im-ui-icon-common-24-settings"></span></a></p>'); launcher.push('<p class="imui-btn-launcher-close"><a href="javascript: void(0);"> <span></span></a></p>'); launcher.push('<div id="imui-launcher-add-dialog"></div>'); launcher.push('</div>'); $(this).after(launcher.join('')); $('.imui-box-launcher').hide().fadein(200); $('.imui-box-launcher.imui-btn-launcher-back').hide(); $('.imui-box-launcher.imui-btn-launcher-add').hide(); $('.imui-box-launcher.imui-btn-launcher-settings').hide(); var parent = $(this).parent()[0]; $(parent).addclass('active'); $.ajax({ headers:{'x-jp-co-intra-mart-ajax-request-from-imui-form-util':'true', 70

71 headers:{'x-jp-co-intra-mart-ajax-request-from-imui-form-util':'true', datatype:'text', type:'get', url:'user/mymenu/js_launcher', data:{, success:function(data) { eval(data.replace(/<\/?script[^>]*>/g, ''));, error:function(request, textstatus, errorthrown) { removelauncher(); if (jquery.imuiformutil && jquery.imuiformutil.transitiontoerrorpage) { jquery.imuiformutil.transitiontoerrorpage(request, textstatus, errorthrown); else { imuishowerrormessage(request.statustext + '(' + request.status + ')', ''); ); $('.imui-box-launcher.imui-btn-launcher-back a').mouseover(function() { $('.imui-btn-launcher-back').addclass('ui-state-hover'); $(this).find('span:first').removeclass('im-ui-icon-launcher-16-move-upgray').addclass('im-ui-icon-launcher-16-move-up-black'); ).mouseout(function() { $('.imui-btn-launcher-back').removeclass('ui-state-hover'); $(this).find('span:first').removeclass('im-ui-icon-launcher-16-move-upblack').addclass('im-ui-icon-launcher-16-move-up-gray'); ).mouseout(); $('.imui-box-launcher.imui-btn-launcher-add a').mouseover(function() { $('.imui-btn-launcher-add').addclass('ui-state-hover'); ).mouseout(function() { $('.imui-btn-launcher-add').removeclass('ui-state-hover'); ).mouseout(); $('.imui-box-launcher.imui-btn-launcher-settings a').mouseover(function() { $('.imui-btn-launcher-settings').addclass('ui-state-hover'); ).mouseout(function() { $('.imui-btn-launcher-settings').removeclass('ui-state-hover'); ).mouseout(); $('.imui-box-launcher.imui-btn-launcher-close a').click(function() { $('.imui-box-launcher').fadeout(200, function() { removelauncher(); ); ).mouseover(function() { $('.imui-btn-launcher-close').addclass('ui-state-hover'); $(this).find('span:first').removeclass('im-ui-icon-launcher-16-closegray').addclass('im-ui-icon-launcher-16-close-black'); ).mouseout(function() { $('.imui-btn-launcher-close').removeclass('ui-state-hover'); $(this).find('span:first').removeclass('im-ui-icon-launcher-16-closeblack').addclass('im-ui-icon-launcher-16-close-gray'); ).mouseout(); else { $('.imui-box-launcher').fadeout(200, function() { removelauncher(); 71

72 removelauncher(); ); ); ); )(jquery); /* * iframe の 大 きさ 制 御 関 数 */ (function($) { $(document).ready(function() { fitiframe(); $(window).resize(fitiframe); ); function fitiframe() { var header = $('#imui-header').height(); var height = $(window).height() - header; $('#IM_MAIN').find('iframe:not(".imui-no-resizeiframe")').height(height).width($(window).width()); $('#IM_MAIN').height(height).width($(window).width()); //iframe のコンテンツ 読 み 込 みが 終 了 したら iframe 内 の min-width を window の 幅 にする $($('#IM_MAIN')).load(function () { try { if ($('#IM_MAIN').get(0).contentDocument && $("#IM_MAIN").contents().find('body').css('min-width') > $(window).width()) { $("#IM_MAIN").contents().find('body').css('min-width', $(window).width()); $("#IM_MAIN").contents().find('#imui-container').css('min-width', $(window).width()); catch(ignore) { ); )(jquery); フォルダ ファイル 構 成 src main conf message platform theme sample_theme caption.properties caption_en.properties caption_ja.properties caption_zh_cn.properties routing-jssp-config routing-service-config theme-config 72

73 theme-config sample_theme.xml generated java jssp src theme sample_theme body.html body.js footer.html footer.js head.html head.js header.html header.js plugin public ui theme sample_theme css common components.less default.less icons.less jqueryui.less mixins.less modules.less parameters.less portal.less theme body.less footer.less header.less parameters.less theme.css theme.less theme.min.css images btn_im_01.png logo.png poweredbyim.png thumbnail.png js theme.js theme.min.js resources schema storage public system webapp test conf 73

74 conf message routing-jssp-config routing-service-config generated java jssp src plugin public resources schema storage public system webapp ユーティリティプラグイン ここではユーティリティプラグインの 作 成 の 概 要 と サンプルプログラムについて 説 明 します 項 目 ユーティリティプラグイン 作 成 の 概 要 プラグイン 本 体 plugin.xml サンプルプログラム プラグイン 本 体 plugin.xml 処 理 を 実 行 するサーバ 側 のプログラムを 呼 び 出 すための CSJS 処 理 を 実 行 するサーバ 側 のプログラム 実 行 例 サンプルプログラムの 実 装 例 プラグイン 本 体 plugin.xml CSJS フォルダ 構 成 ユーティリティプラグイン 作 成 の 概 要 ここではユーティリティプラグインの 作 成 の 概 要 を 説 明 します ユーティリティプラグインは PluginManager が 管 理 するプラグインとして 実 装 します このプラグインは 以 下 の 要 素 で 構 成 されます plugin.xml プラグイン 本 体 74

75 この 他 に 必 要 であれば 以 下 のような 要 素 を 追 加 します 処 理 を 実 行 するサーバ 側 のプログラムを 呼 び 出 すための CSJS 処 理 を 実 行 するサーバ 側 のプログラム Java JSSP 設 定 ファイル ルータの 設 定 ファイル 多 言 語 ファイル プラグイン 本 体 プラグイン 本 体 は UtilityItemProvider インタフェースを 実 装 したクラスとして 作 ります サブメニューを 持 つプラグインを 作 成 する 場 合 UtilityItemProvider#getChildrenを 実 装 し UtilityItemProvider を 実 装 したクラスのインスタンスを 返 します プラグインが 呼 び 出 されると ul > li > a のような DOM が 構 築 されます 対 象 のリンクをクリックした 際 の 動 作 は a タグの href で 表 現 したり a タグに id を 割 り 振 り その id で 何 らかの 処 理 を 行 うように 実 装 することになりま す isvisible getlabel geturl scriptsource getchildren toliststring plugin.xml PluginManager が 管 理 する plugin.xml を 作 成 します extension 要 素 の point 属 性 には jp.co.intra_mart.foundation.ui.theme.utility.item を 指 定 してください その 他 の 要 素 属 性 については PluginManager の API リファレンス を 参 照 してください 処 理 を 実 行 するサーバ 側 のプログラムを 呼 び 出 すための CSJS ユーティリティメニューをクリックした 際 クライアント 側 で 動 作 するロジックを 実 装 します オプショナルです 処 理 を 実 行 するサーバ 側 のプログラム ユーティリティメニューをクリックした 際 サーバ 側 で 動 作 するロジックを 実 装 します オプショナルです 設 定 ファイル 75

76 必 要 であれば 以 下 のようなファイルを 作 成 します ルータの 設 定 ファイル 多 言 語 ファイル サンプルプログラム ここでは ユーティリティプラグインのサンプルとして ログインユーザのロケールを 切 り 替 えるプラグインを 作 成 し ます このプラグインは UtilityItemProvider を 実 装 したクラスとして 実 装 します メニューは 現 在 のロケールを 表 示 す る 親 メニューと 選 択 可 能 なロケールの 一 覧 を 表 示 するサブメニューとで 構 成 します ロケール 切 り 替 えのサーバ 側 のプログラムは 既 存 のロケール 切 り 替 えの 仕 組 みを 流 用 します プラグイン 本 体 plugin.xml 処 理 を 実 行 するサーバ 側 のプログラムを 呼 び 出 すための CSJS 処 理 を 実 行 するサーバ 側 のプログラム 既 存 のロケール 切 り 替 えの 仕 組 みを 流 用 します プラグイン 本 体 jp.co.intra_mart.sample.localeitemprovider として 実 装 します 以 下 の 必 要 なメソッドを 実 装 します isvisible getlabel geturl scriptsource getchildren toliststring isvisible ここでは 認 証 済 ユーザであればこのプラグインを 表 示 できるようにします public boolean isvisible() { AccountContext context = Contexts.get(AccountContext.class); return context.isauthenticated(); getlabel ここでは 認 証 済 ユーザのロケールを 表 示 します アカウントコンテキストに 格 納 されているロケールを 表 示 します 表 示 する 際 にエスケープを 行 います 76

77 public String getlabel() throws JspException { AccountContext context = Contexts.get(AccountContext.class); Locale locale = context.getlocale(); String name = locale.getdisplayname(locale); return Util.escape(name, Escaping.STRICT_HTML); geturl ここでは 表 示 だけを 行 い 処 理 はしないため null を 返 します public String geturl() throws JspException { return null; scriptsource ここでは CSJS のパスを 返 します UserUtilityTag プラグインには CSJS の 実 装 を 直 接 HTML に 出 力 する 方 法 がないため 外 部 ファイルに 実 装 し た 関 数 を 呼 び 出 すという 方 法 を 採 ります このメソッドが 返 すパスに CSJS の 実 装 を 記 述 します public String scriptsource() { return "sample/js/changelocale.js"; getchildren ここでは システムに 登 録 されているロケールの 一 覧 を 返 します また 返 すクラスは UtilityItemProvider を 実 装 したクラスとして 実 装 します public List<UtilityItemProvider> getchildren() throws JspException { final List<UtilityItemProvider> children = new ArrayList<UtilityItemProvider>(); // システムロケールの 一 覧 を 作 成 します LocaleInfo[] localeinfos = SystemLocale.getLocaleInfos(); for (LocaleInfo localeinfo: localeinfos) { children.add(new LocaleListItemProvider(localeInfo)); return children; toliststring このプラグインが 返 す HTML を 生 成 します ul > li > a となるように 実 装 します また サブメニューを ul > li の 中 の ul として 返 すように 実 装 します 77

78 public String toliststring() throws JspException { final StringBuilder buf = new StringBuilder(); final String url = geturl() == null? StringUtil.EMPTY_STRING : "href=\"" + geturl() + "\""; buf.append("<li><a ").append(url).append(">").append(getlabel()).append("</a>"); if (getchildren()!= null) { buf.append("<ul>"); for (final UtilityItemProvider item : getchildren()) { buf.append(item.toliststring()); buf.append("</ul>"); buf.append("</li>"); return buf.tostring(); サブメニューの 項 目 の 一 つ 一 つはこのクラスで 実 装 します private static class LocaleListItemProvider implements UtilityItemProvider { private LocaleInfo localeinfo; public LocaleListItemProvider(final LocaleInfo localeinfo) { this.localeinfo = localeinfo; ラベルとして システムロケールの 一 つを 表 示 します インスタンス 化 した 際 のロケールの 値 を 表 示 します public String getlabel() throws JspException { return Util.escape(this.localeInfo.getDisplayName(), Escaping.STRICT_HTML); クリックした 際 の URL を 返 します ここで CSJS の 関 数 を 呼 び 出 すことになります public String geturl() throws JspException { return String.format("javascript:changeLocale('%s');", this.localeinfo.getlocale()); HTML として li タグを 返 します public String toliststring() throws JspException { final StringBuilder buf = new StringBuilder(); final String url = "href=\"" + geturl() + "\""; buf.append("<li><a ").append(url).append(">"); buf.append(getlabel()).append("</a>"); buf.append("</li>"); return buf.tostring(); plugin.xml 78

79 プラグインの 設 定 を 記 述 します extension 要 素 の point 属 性 に jp.co.intra_mart.foundation.ui.theme.utility.item を 指 定 します また item 要 素 の classname 属 性 に プラグイン 本 体 のクラス 名 を 指 定 します <?xml version="1.0" encoding="utf-8"?> <plugin> <extension point="jp.co.intra_mart.foundation.ui.theme.utility.item"> <item id="sample_localeitemprovider" name="localeitemprovider" classname="jp.co.intra_mart.sample.localeitemprovider" version="1.0" rank="1" enable="true" /> </extension> </plugin> 処 理 を 実 行 するサーバ 側 のプログラムを 呼 び 出 すための CSJS ここでは 簡 単 のため 既 存 のロケール 切 り 替 えの 仕 組 みを 呼 び 出 すような 実 装 を 行 います プラグイン 本 体 の scriptsource メソッドが 返 す 値 である sample/js/changelocale.js に 下 記 の 実 装 を 記 述 しま す アクセス 先 の user/settings/locale/update_locale は ルータの 設 定 サーバ 側 のロジックの 実 装 などはテナ ント 管 理 モジュールで 実 装 されています function changelocale(locale) { (function($, locale) { var form = $('<form/>').attr('id', 'sampleform') // 既 存 のロジックを 呼 び 出 します.attr('action', 'user/settings/locale/update_locale').attr('method','post'); var locale = $('<input/>').attr('type','hidden').attr('name','locale').attr('value',locale); form.append(locale); form.appendto('body'); imuiajaxsubmit('#sampleform', 'POST', 'json', 'home', []); )(jquery, locale); 処 理 を 実 行 するサーバ 側 のプログラム このサンプルでは 実 装 を 行 いません サーバ 側 のロジックはテナント 管 理 モジュールで 実 装 されています 79

80 実 行 例 このプラグインをデプロイすると 以 下 のような 画 面 が 表 示 され ロケールを 切 り 替 えることができるようになりま す サンプルプログラムの 実 装 例 プラグイン 本 体 src/main/java/jp/co/intra_mart/sample/localeitemprovider.java 80

81 81

82 package jp.co.intra_mart.sample; import java.util.arraylist; import java.util.list; import java.util.locale; import javax.servlet.jsp.jspexception; import jp.co.intra_mart.common.aid.jdk.java.lang.stringutil; import jp.co.intra_mart.foundation.context.contexts; import jp.co.intra_mart.foundation.context.model.accountcontext; import jp.co.intra_mart.foundation.i18n.locale.localeinfo; import jp.co.intra_mart.foundation.i18n.locale.systemlocale; import jp.co.intra_mart.foundation.ui.tags.theme.utilityitemprovider; import jp.co.intra_mart.system.ui.util.util; import org.jamon.escaping.escaping; public class LocaleItemProvider implements UtilityItemProvider { private static class LocaleListItemProvider implements UtilityItemProvider { private LocaleInfo localeinfo; /** * コンストラクタ localeinfo ロケール 情 報 */ public LocaleListItemProvider(final LocaleInfo localeinfo) { this.localeinfo = localeinfo; /** * サブメニューを 返 します null:サブメニューはありません JspException public List<UtilityItemProvider> getchildren() throws JspException { return null; /** * このメニューのラベルを 返 します ロケール 名 JspException エラーが 発 生 したときにスローします public String getlabel() throws JspException { return Util.escape(this.localeInfo.getDisplayName(), Escaping.STRICT_HTML); /** * このメニューをクリックしたときの URL を 返 します * <br/> * このメニューをクリックするとロケールを 82 選 択 したことになるので CSJS のロケール 変 更 リクエス

83 * このメニューをクリックするとロケールを 選 択 したことになるので CSJS のロケール 変 更 リクエス トを 送 信 するように 実 装 します JspException エラーが 発 生 したときにスローします public String geturl() throws JspException { return String.format("javascript:changeLocale('%s');", this.localeinfo.getlocale()); /** * このUtilityItemProviderを 表 示 するかどうかを 返 します true: 表 示 する public boolean isvisible() { return true; /** * このUtilityItemProviderが 使 用 する 外 部 CSJSのパスを 返 します null: 外 部 CSJSを 使 用 しません public String scriptsource() { return null; /** * このUtilityItemProviderのHTML 表 現 を 返 します * <br/> * 親 メニューのリストの 子 要 素 とします メニュー 項 目 とする liタグ JspException public String toliststring() throws JspException { final StringBuilder buf = new StringBuilder(); final String url = "href=\"" + geturl() + "\""; buf.append("<li><a ").append(url).append(">"); buf.append(getlabel()).append("</a>"); buf.append("</li>"); return buf.tostring(); /** * 子 メニューのリストを 返 します List 子 メニューのリスト JspException エラーが 発 生 したときにスローします public List<UtilityItemProvider> getchildren() throws JspException { 83

84 final List<UtilityItemProvider> children = new ArrayList<UtilityItemProvider>(); LocaleInfo[] localeinfos = SystemLocale.getLocaleInfos(); for (LocaleInfo localeinfo: localeinfos) { children.add(new LocaleListItemProvider(localeInfo)); return children; /** * このプラグインを 表 示 したときのラベルを 返 します ラベル JspException エラーが 発 生 したときにスローします public String getlabel() throws JspException { AccountContext context = Contexts.get(AccountContext.class); Locale locale = context.getlocale(); String name = locale.getdisplayname(locale); return Util.escape(name, Escaping.STRICT_HTML); /** * クリックしたときの 遷 移 先 URL を 返 します null JspException エラーが 発 生 したときにスローします public String geturl() throws JspException { return null; /** * ロケールの 切 り 替 え 項 目 を 表 示 するかどうかを 決 定 します * <br/> * 認 証 済 ユーザであれば 切 り 替 え 項 目 を 表 示 します 切 り 替 え 項 目 を 表 示 する 場 合 は true, しない 場 合 は false public boolean isvisible() { AccountContext context = Contexts.get(AccountContext.class); return context.isauthenticated(); /** * このプラグインを 動 作 させるのにCSJSが 必 要 な 場 合 そのパスを 返 します public String scriptsource() { return "sample/js/changelocale.js"; 84

85 /** * このUtilityItemProviderのHTML 表 現 を 返 します liタグ public String toliststring() throws JspException { final StringBuilder buf = new StringBuilder(); final String url = geturl() == null? StringUtil.EMPTY_STRING : "href=\"" + geturl() + "\""; buf.append("<li><a ").append(url).append(">").append(getlabel()).append("</a>"); if (getchildren()!= null) { buf.append("<ul>"); for (final UtilityItemProvider item : getchildren()) { buf.append(item.toliststring()); buf.append("</ul>"); buf.append("</li>"); return buf.tostring(); plugin.xml src/main/plugin/jp.co.intra_mart.sample.locale_item_provider/plugin.xml <?xml version="1.0" encoding="utf-8"?> <plugin> <extension point="jp.co.intra_mart.foundation.ui.theme.utility.item"> <item id="sample_localeitemprovider" name="localeitemprovider" classname="jp.co.intra_mart.sample.localeitemprovider" version="1.0" rank="1" enable="true" /> </extension> </plugin> CSJS src/main/public/sample/js/changelocale.js 85

86 function changelocale(locale) { (function($, locale) { var form = $('<form/>').attr('id', 'sampleform').attr('action', 'user/settings/locale/update_locale').attr('method','post'); var locale = $('<input/>').attr('type','hidden').attr('name','locale').attr('value',locale); form.append(locale); form.appendto('body'); imuiajaxsubmit('#sampleform', 'POST', 'json', 'home', []); )(jquery, locale); フォルダ 構 成 86

87 message.properties message_en.properties message_ja.properties message_zh_cn.properties module.xml src main conf message routing-jssp-config routing-service-config generated java jp co intra_mart sample LocaleItemProvider.java jssp src plugin jp.co.intra_mart.sample.locale_item_provider plugin.xml public sample js changelocale.js resources schema storage public system webapp test conf message routing-jssp-config routing-service-config generated java jssp src plugin public resources schema storage public system webapp intra-mart が 提 供 するテーマの 一 覧 87

88 intra-mart が 提 供 するテーマの 一 覧 テーマ 一 覧 テーマサンプル 画 像 テーマ 名 intra-mart Accel Platform 標 準 テー マ ( 黒 ) テーマID im_theme_dropdown_black intra-mart Accel Platform 標 準 テー マ ( 青 ) im_theme_dropdown_blue intra-mart Accel Platform 標 準 テー マ ( 茶 ) im_theme_dropdown_brown intra-mart Accel Platform 標 準 テー マ (セラドングリーン) im_theme_dropdown_celadon_green intra-mart Accel Platform 標 準 テー マ (ココアブラウン) im_theme_dropdown_cocoa_brown intra-mart Accel Platform 標 準 テー マ (コッパーラスト) im_theme_dropdown_copper_rust intra-mart Accel Platform 標 準 テー マ ( 灰 色 ) im_theme_dropdown_gray intra-mart Accel Platform 標 準 テー マ ( 緑 ) im_theme_dropdown_green intra-mart Accel Platform 標 準 テー マ (ヒアシンスブルー) im_theme_dropdown_hyacinth_blue 88

89 テーマサンプル 画 像 テーマ 名 テーマID intra-mart Accel Platform 標 準 テー マ (アイビーグリーン) im_theme_dropdown_ivy_green intra-mart Accel Platform 標 準 テー マ (ラベンダーグレー) im_theme_dropdown_lavender_gray intra-mart Accel Platform 標 準 テー マ (ミディアムパープル) im_theme_dropdown_mediumpurple intra-mart Accel Platform 標 準 テー マ (ネイビーブルー) im_theme_dropdown_navy_blue intra-mart Accel Platform 標 準 テー マ (オレンジ) im_theme_dropdown_orange intra-mart Accel Platform 標 準 テー マ (オーキッド ピンク) im_theme_dropdown_orchid_pink intra-mart Accel Platform 標 準 テー マ (ピンク) im_theme_dropdown_pink intra-mart Accel Platform 標 準 テー マ ( 赤 ) im_theme_dropdown_red intra-mart Accel Platform 標 準 テー マ (レッドオレンジ) im_theme_dropdown_red_orange intra-mart Accel Platform 標 準 テー マ (ローズグレー) im_theme_dropdown_rose_gray 89

90 テーマサンプル 画 像 テーマ 名 テーマID intra-mart Accel Platform 標 準 テー マ (サーモンピンク) im_theme_dropdown_salmon_pink intra-mart Accel Platform 標 準 テー マ ( 紫 ) im_theme_dropdown_violet intra-mart Accel Platform 標 準 テー マ (ヨットブルー) im_theme_dropdown_yacht_blue intra-mart Accel Platform 標 準 テー マ ( 黄 ) im_theme_dropdown_yellow intra-mart Accel Platform 標 準 テー マ (イエローグリーン) im_theme_dropdown_yellow_green intra-mart Accel Platform 標 準 テー マ シンプルスタイル im_theme_dropdown_simple iwp/iaf Version6 互 換 テーマ ( 青 ) im_theme_60_blue iwp/iaf Version6 互 換 テーマ ( 緑 ) im_theme_60_green iwp/iaf Version6 互 換 テーマ (オレ ンジ) im_theme_60_orange iwp/iaf Version6 互 換 テーマ ( 赤 ) im_theme_60_red 90

91 テーマサンプル 画 像 テーマ 名 テーマID iwp/iaf Version5 互 換 テーマ ( 青 ) im_theme_50_blue iwp/iaf Version5 互 換 テーマ ( 緑 ) im_theme_50_green iwp/iaf Version5 互 換 テーマ (オレ ンジ) im_theme_50_orange iwp/iaf Version5 互 換 テーマ ( 赤 ) im_theme_50_red 91