テーマモジュールの作成¶

theme-config¶

src/main/conf/theme-config 配下にテーマID と同じファイル名を持つ xml ファイルを作成します。 内容は 設定ファイル を参考にしてください。

message¶

src/main/conf/message/platform/theme 配下にテーマID と同じフォルダ名のフォルダを作り、その中にプロパティファイルを作成します。 message を参照し、各言語分プロパティファイルを作成します。

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¶

必要な要素を実装してください。

汎用的なテーマモジュールを作成する場合、ロゴ 、 グローバルナビ 、 マイメニュー 、 検索ボックス 、 ユーティリティ 、 ヘルプドロップダウン は必須です。

汎用的ではないテーマモジュールを作成する場合、必須な要素はありません。必要な要素だけを実装してください。

id に imui-header を持つ div や header 要素を含むようにしてください。

<header id="imui-header">
   <!-- ロゴ -->
   ...
</header>

body¶

id が imui-container となる div と、その中に <imart type=”xxx”/> を必ず実装してください。

<div id="imui-container">
    <imart type="replaceContents"/>
</div>

footer¶

poweredbyim.png を表示してください。

<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>

theme-config¶

まず、設定ファイルを作成します。

src/main/conf/theme-config/sample_theme.xml を作成します。 内容は以下の通りです。

<?xml version="1.0" encoding="UTF-8"?>
<theme-config
  xmlns="http://www.intra-mart.jp/theme/theme"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.intra-mart.jp/theme/theme ../../schema/theme.xsd ">
  <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 等でエンコードしてください。

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" href="ui/css/bootstrap.css">

@@ -39,7 +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

<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

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 をコピーします。

以下のファイルを 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() {}

parameter.less¶

テーマカラーを #005678 にします。その他の値は修正しません。

@theme-color: #005678;

footer.less¶

footer の背景を黒に、Powred by intra-mart の画像を中央に配置します。

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{
  color: @accent-text;
  background-color: @theme-color;
  /* 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;
    }
  }
}