目次


IBM Case Manager プロパティー・ビューにおけるカスタム・エディターの開発

プロパティー・ビューにカスタム・エディターを追加するためのエクステンションの開発手順の紹介

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です:

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:

このシリーズの続きに乞うご期待。

はじめに

IBM Case Manager (ICM) では、ケース管理ソリューションで扱う情報を「ケース・プロパティー」として定義し、ケースの作業者はそれらのケース・プロパティーを参照したり更新したりしながら作業を進めていきます。したがって、ケース・プロパティーを表示する「プロパティー・ビュー」は作業者にとって最も重要なユーザー・インターフェイスの一つです。ICM は Web ベースのツール「Case Manager Builder」を提供しており、その機能の一つに、プロパティー・ビューの表示や振る舞いをカスタマイズするための「Properties View Designer」があります (図 1)。Properties View Designer でカスタマイズしたプロパティー・ビューは実行時には図 2 の例のように表示されます。

図 1 からわかるように、Properties View Designer ではケース・プロパティーのレイアウトや細かい設定ができるようになっています。ここで注目していただきたいのは図 1 の右下の方にある「エディター」という設定項目です。エディターとはプロパティーの値を入力するための入力部品のことで、プロパティーの型に応じたいくつかのエディターがあらかじめ提供されており、それらの中から選択できるようになっています。例えば、プロパティーが日付型であれば日付テキスト・ボックスや時刻テキスト・ボックスなどが選択できます。

従来の ICM ではそれらのあらかじめ提供されているエディターから選ぶしかありませんでした。しかし、プロパティー・ビューは日々ケースを扱う作業者にとっては作業効率に大きく影響する重要なユーザー・インターフェイスです。そこで、ICM 5.2.1 ではカスタム・エディターを作って Properties View Designer に登録できる機能が追加されました。それにより、例えば、入力フィールドの横に「選択」ボタンを持ち、何かを選択するためのダイアログを出すとか、論理型のプロパティーの入力に「はい」「いいえ」「未選択」の 3 ステートを許すといった、業務に固有の入力部品を提供することが可能になります。この記事ではそのようなカスタム・エディターの開発から登録までを解説します。

図 1. プロパティー・ビューの UI をカスタマイズする Properties View Designer
図 2. 実行時のプロパティー・ビュー

なお、ケース管理の考え方や ICM の概要について詳しく知りたい方は、参考文献の製品紹介ページ「IBM Case Manager」や developerWorks 記事「IBM Case Manager 概説」を参照してください。

前提環境

実行環境として ICM 5.2.1 がすでにインストールされていることを前提とします。ICM 5.2.0 では動作しませんのでご注意ください。ICM 5.2.1 のインストールおよび構成の手順については、参考文献の Knowledge Center ページ「IBM Case Manager のインストールおよび構成」を参照してください。

また、開発環境として ICN プラグインの開発環境が必要です。ICN プラグインの開発環境の詳細については、参考文献の developerWorks 記事「IBM Content Navigator におけるプラグイン開発手順」を参照してください。この参考文献では Rational Application Developer (RAD) 8.0.4 を前提環境としていますが、この記事では特に RAD 特有の機能は必要としませんので、Eclipse (4.2 Juno / 4.3 Kepler / 4.4 Luna) による開発環境を前提として説明します。

サンプルのカスタム・エディターの概要

この記事で作成するサンプルのカスタム・エディターは、下図 3 のように、入力フィールドの横に「Select」ボタンを持つものです。ボタンを押すと図 4 のようなダイアログ・ボックスが表示され、チェックボックスで値の選択ができます。選択して「OK」ボタンを押すと図 5 のように選択した値が入力フィールドに反映されます。

図 3. 入力値を選択させるためのボタンを持つサンプルのカスタム・エディター
図 4. 入力値選択ダイアログ・ボックス
図 5. ダイアログで Green と Red を選択した結果の例

カスタム・エディター開発のプロジェクト

プロジェクト構成

ICM のカスタム・エディター開発におけるプロジェクトの構成は、下図 6 のように、全体としては ICN プラグイン・プロジェクトですが、ICMRegistry というサブ・フォルダに Case Builder 用の設定ファイルを含む形となります。

図 6. カスタム・エディターのプロジェクトの構成

このプロジェクトを Ant スクリプトによってビルドすることで、最終的には下図 7 のような ZIP ファイルのパッケージを作成します。この ZIP ファイルは、ICN プラグインのプロジェクトをビルドした JAR ファイル、および ICMRegistry サブ・フォルダを丸ごとそのまま含めた構成のパッケージになっています。

図 7. ビルドされたカスタム・エディターのパッケージの構成

カスタム・エディターの作成

開発環境として Eclipse を使ってサンプルのカスタム・エディターを作成します。なお、完成版はこの記事の末尾にあるダウンロードの章の MyCustomEditorProject.zip ファイルの中に含まれている MyCustomEditor プロジェクトを参考にしてください。

プロジェクトの作成

まず、ルート・プロジェクトを作成します。ここでは MyCustomEditor という名前の Java プロジェクトを以下の手順で作成します。

  1. Eclipse のメニューから「ファイル」 > 「新規」 > 「プロジェクト」を選択します。
  2. 「Java プロジェクト」を選択して「次へ」をクリックします。 (図 8)
  3. プロジェクト名に「MyCustomEditor」と入力して「終了」をクリックします。 (図 9)
図 8. Java プロジェクトを選択
図 9. MyCustomEditor プロジェクトを作成

MyCustomEditor プロジェクトは ICN プラグインのプロジェクトとなるため、ICN が提供する JAR ファイルである navigatorAPI.jar をライブリーとして追加する必要があります。 (IBM Case Manager V5.2.1 Platform Installation Tool Components を使ってインストールしている場合は C:\Program Files (x86)\IBM\ECMClient\lib\ navigatorAPI.jar が使えます。) 詳しくは参考文献の developerWorks 記事「IBM Content Navigator におけるプラグイン開発手順」を参照してください。

  1. パッケージ・エクスプローラーで MyCustomEditor プロジェクトを右クリックし、「ビルド・パス」 > 「ビルド・パスの構成」を選択します。 (図 10)
  2. 「ライブラリー」タブを選択して「外部 JAR 追加」をクリックし、navigatorAPI.jar をライブラリーに追加して、「OK」をクリックします。 (図 11)
図 10. ビルド・パスの構成
図 11. MyCustomEditor プロジェクトのライブラリーとして navigatorAPI.jar を指定

フォルダとファイルの作成

プロジェクトの作成が完了したら、カスタム・エディターの実装に必要なフォルダおよびファイルを作成します。このサンプルでは下図 12 にあるフォルダおよびファイルを作成します。lib フォルダには必要に応じて追加のライブラリーを置きます。 (後述の Ant スクリプトが参照するので、特に追加のライブラリーがなくても lib フォルダを作成してください。) 各ファイルの詳細については表 1 にまとめてあります。

なお、MyCustomEditor プロジェクトは ICN プラグインのプロジェクトですので、参考文献の developerWorks 記事「IBM Content Navigator におけるプラグイン開発手順」で紹介されている ICN プラグインのプロジェクトをあわせて参照するとより理解が深まります。

図 12. カスタム・エディター実装用のファイルとフォルダの作成
表 1. プロジェクト内の各ファイルの詳細
ファイル名詳細
src/com/ibm/ecm/extension/mycustomeditors フォルダ
MyCustomEditorPlugin.javaICN プラグインの Plugin クラス
src/com/ibm/ecm/extension/mycustomeditors/WebContent フォルダ
MyCustomEditorPlugin.jsICN プラグインの JavaScript ファイル
src/com/ibm/ecm/extension/mycustomeditors/WebContent/sample フォルダ
Initializer.jsカスタム・エディターの初期化スクリプト
SampleEditor.jsカスタム・エディターのウィジェットの実装
registry/RegistryConfiguration.jsカスタム・エディターの登録設定ファイル
resources/SampleEditor.cssカスタム・エディターのウィジェットのスタイルシート
templates/SampleEditor.htmlカスタム・エディターのウィジェットのテンプレート HTML
ICMRegistry フォルダ
Extensions.json拡張パッケージの登録ファイル
lib フォルダ

ICN プラグインの実装

まずは、ICN プラグインの Plugin クラスを実装します。このサンプルの Plugin クラスは、 com.ibm.ecm.extension.mycustomeditors パッケージの MyCustomEditorPlugin クラスで、実装はリスト 1 にあります。

基本的には ICN プラグインの Plugin クラスの一般的な実装方法をベースにしていますので、Plugin クラスとして実装が必要なメソッドの詳細などについては、参考文献の developerWorks 記事「IBM Content Navigator におけるプラグイン開発手順」を参照してください。

リスト 1. ICN プラグインの Plugin クラス (MyCustomEditorPlugin.java)
package com.ibm.ecm.extension.mycustomeditors;
import java.util.Locale;
import com.ibm.ecm.extension.Plugin;

public class MyCustomEditorPlugin extends Plugin {

    @Override
    public String getId() {
        return "MyCustomEditorPlugin";
    }

    @Override
    public String getName(Locale arg0) {
        return "IBM Case Manager Custom plug-in";
    }

    @Override
    public String getVersion() {
        return "1.0.0";
    }

    @Override
    public String getScript() {
        return "MyCustomEditorPlugin.js";
    }

}

次に、Plugin クラスの getScript メソッドで指定した、ICN プラグイン JavaScript の MyCustomEditorPlugin.js を実装します。 (リスト 2)

ここでは次の情報を記述します。

  • SampleEditor ウィジェットのパッケージ名 (sample) とそのパス
  • SampleEditor ウィジェットのスタイルシートのパス
  • ブートストラップ・モジュールとブートストラップ・メソッド

ブートストラップ・モジュールのブートストラップ・メソッドはモジュールの起動時に呼び出され、初期化の処理を行います。

「DO NOT MODIFY THE CODE BELOW」というコメント以下の行では、スタイルシートのロードやブートストラップ・メソッドの呼び出しを行っていますがこの部分のコードは変更する必要はありません。

リスト 2. ICN プラグイン JavaScript (MyCustomEditorPlugin.js)
require([
    "dojo/_base/lang",
    "dojo/_base/array",
    "dojo/dom-construct",
    "dojo/sniff",
    "dojo/promise/all",
    "dojo/Deferred"
], function(lang, array, domConstruct, sniff, all, Deferred) {

    var extensions = [
        {
            packages:
            {
                sample: "/navigator/plugin/MyCustomEditorPlugin/getResource/sample"
            },
            css: [
                "/navigator/plugin/MyCustomEditorPlugin/getResource/sample/resources/SampleEditor.css"
            ],
            bootstrapModule: "sample/Initializer",
            bootstrapMethod: "initialize"
        }
    ]; // End of extension definitions.
    
    // !!! DO NOT MODIFY THE CODE BELOW !!!
    // Load the extension packages
    var promises = [];
    array.forEach(extensions, function(extension) {
        if (extension.packages) {
            // Set up the promise;
            var deferred = new Deferred();
            promises.push(deferred.promise);

            // Load the module packages.
            require({
                paths: extension.packages
            });

            // Load the stylesheets.
            array.forEach(extension.css, function(url) {
                if (sniff("ie")) {
                    document.createStyleSheet(url);
                } else {
                    domConstruct.create("link", {
                        rel: "stylesheet",
                        type: "text/css",
                        href: url
                    }, document.getElementsByTagName("head")[0]);
                }
            });

            // Call the bootstrap method.
            if (extension.bootstrapModule && extension.bootstrapMethod) {
                require([extension.bootstrapModule], function(bootstrapClass) {
                    var bootstrap = new bootstrapClass();
                    if (lang.isFunction(bootstrap[extension.bootstrapMethod])) {
                        bootstrap[extension.bootstrapMethod]();
                        deferred.resolve();
                    } else {
                        deferred.resolve();
                    }

                });
            } else {
                deferred.resolve();
            }
        }
    });
    all(promises);
});

ブートストラップ・モジュールの実装

ICN プラグイン JavaScript の MyCustomEditorPlugin.js から呼び出されるブートストラップ・モジュールを実装します。

カスタム・エディターの登録設定情報 (RegistryConfiguration.js) をマージしています。必要であれば追加の初期化コードを記述します。

リスト 3. ブートストラップ・モジュール (Initializer.js)
define([
    "dojo/_base/declare",
    "dojo/has!icm-builder?icm/propsdesign/ui/registry/RegistryManager: ⇒(折り返し)
    icm/widget/properties/registry/RegistryManager",
    "./registry/RegistryConfiguration"
], function(declare, RegistryManager, registryConfig) {
    return declare(null, {
        // Bootstrap method.
        initialize: function() {
            // Merge the registry for the custom editor.
            RegistryManager.mergeConfiguration(registryConfig);
            // More initialization code as you need..
        }
    });
});

カスタム・エディターの登録設定ファイル

カスタム・エディターの登録設定ファイルでは、ケース・プロパティーの型にカスタム・エディターを対応付けます。リスト 4 では “string” 型に対して SampleEditor ウィジェットを登録しています。したがって、Properties View Designer において、String 型のケース・プロパティーに対するエディター設定のドロップダウンで SampleEditor ウィジェットを選択できるようになります (図 13)。label で指定されたラベル “Sample Custom Editor” がドロップダウンに表示されます。指定できる型の名前は次のとおりです。

  • boolean
  • datetime
  • float
  • integer
  • string
図 13. String 型プロパティーのエディター設定
リスト 4. カスタム・エディターの登録設定ファイル (RegistryConfiguration.js)
define([
    "dojo/_base/declare",
    "sample/SampleEditor"
], function(declare, SampleEditor) {

    return {
        editors: {
            editorConfigs: {
                "SampleEditor": {
                    label: "Simple Custom Editor",
                    editorClass: SampleEditor
                }
            },
            mappings: {
                types: {
                    "string": {
                        single: {
                            editorConfigs: [
                                "SampleEditor"
                            ]
                        }
                    }
                }
            }
        }
    };
});

カスタム・ウィジェットの実装

次に、カスタム・エディターの本体であるカスタム・ウィジェットを実装します。カスタム・ウィジェットは Dojo ウィジェットであり、JavaScript、スタイルシート、テンプレートから成ります。リスト 5 に JavaScript 実装を示します。

このサンプル・ウィジェットは、図 3、図 4 に示したように、Select ボタンを押すと値を選択させるためのダイアログ・ボックスを表示するものです。

継承しているベース・クラスのうち、_CssStateMixin, _CompositeMixin, _ValidationMixin, _EditorMixin の 4 つはプロパティー・ビューで必要とされるモジュールです。

ウィジェットは、プロパティー・ビューのコントローラーと値の受け渡しをするために、_setValueAttr() と _getValueAttr() を実装する必要があります。

このサンプル・コードでは中身が空の onChange() メソッドを、ダイアログ・ボックスの OK ボタンを押したときに呼ばれる onOk() から呼び出しています。一見無意味に見えますが、onChange() はウィジェットの外から connect されます。したがって、ベース・クラスの一つに onChange() メソッドを持たない場合はカスタム・ウィジェット側で onChange() を用意し、値を変更した場合は onChange() を呼び出すことでコントローラーに変更を通知します。

リスト 5. カスタム・エディターのウィジェットの実装 (SampleEditor.js)
define([
    "dojo/aspect",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",
    "dojo/text!./templates/SampleEditor.html",
    "dijit/Dialog", // used in template
    "dijit/form/Button", // used in template
    "dijit/form/CheckBox", // used in template
    "dijit/form/TextBox", // used in template
    "idx/form/_CssStateMixin",
    "idx/form/_CompositeMixin",
    "idx/form/_ValidationMixin",
    "pvr/widget/editors/mixins/_EditorMixin"
], function(aspect, declare, lang, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, template,
    Dialog, Button, CheckBox, TextBox, _CssStateMixin, _CompositeMixin, _ValidationMixin, _EditorMixin)
{
    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin,
    _CompositeMixin, _ValidationMixin, _EditorMixin], {

        templateString: template,
        baseClass: "SampleEditor",
        oneuiBaseClass: "",

        postCreate: function(){
            aspect.after(this.selBtn, "onClick", lang.hitch(this, "onSel"));
            aspect.after(this.dlg, "onExecute", lang.hitch(this, "onOk"));
            this._event = { "input": "onChange", "blur": "_onBlur", "focus": "_onFocus" };
            this.inherited(arguments);
        },

        _setValueAttr: function(/*String*/val){
            // You MUST implement this method to communicate with the controller
            this.textbox.set("value", val);
        },

        _getValueAttr: function(){
            // You MUST implement this method to communicate with the controller
            return this.textbox.get("value");
        },

        onSel: function(){
            var values = this.get("value").split(/,/);
            this.dlg.set("value", {cb1:values});
            this.dlg.show();
        },

        onOk: function(){
            this.set("value", this.dlg.get("value").cb1.join(","));

            // Notify the controller that the value has been changed
            this.onChange();
        },

        onChange: function(){
            // A stub function to be connected to
        }
    });
});

ウィジェットのスタイルシートの resources/SampleEditor.css の実装は、必要に応じて適宜行います。

リスト 5 で baseClass: "SampleEditor", と指定しているため、ウィジェットのルート・ノードには “SampleEditor” という名前のクラスが付与されます。それをセレクターとして利用してウィジェット固有のスタイルを指定することもできます。

リスト 6. カスタム・エディターのウィジェットのスタイルシート (SampleEditor.css)
/* Styles for the SampleEditor widget */

.SampleEditor {

}

リスト 7 はウィジェットのテンプレート HTML ファイルです。このサンプル・ウィジェットではダイアログ・ボックスを表示するので、ファイルの後半部分にはダイアログ・ボックスの定義がありますが、もちろん必須項目ではありません。一方、コメントで Do not change とある部分はカスタム・エディターとして一般的に必要な部分ですのでそのまま使います。

リスト 7. カスタム・エディターのウィジェットのテンプレート HTML (SampleEditor.html)
<div class="dijitInline dijitReset dijitLeft idxComposite">
    <!-- Label and star indicator. Do not change this part. -->
    <div class="idxLabel dijitInline dijitHidden" dojoAttachPoint="labelWrap">
        <label dojoAttachPoint="compLabelNode"></label>
    </div>
    
    <div class="dijitInline" dojoAttachPoint="fieldWrap">
        <!-- Custom code goes in the div with stateNode and oneuiBaseNode attach point. -->
        <div dojoAttachPoint="stateNode,oneuiBaseNode" class="dijit dijitReset dijitInline dijitLeft"
            role="presentation">
            <input data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="textbox,focusNode"
                data-dojo-props="readOnly:true" style="width:180px">
        </div>
            <button data-dojo-type="dijit/form/Button" data-dojo-attach-point="selBtn">Select</button>

        <!-- Error icon. Do not change this part. -->
        <div class='dijitReset dijitInline dijitValidationContainer' dojoAttachPoint="iconNode">
            <div class="dijitValidationIcon">
                <input class="dijitReset dijitInputField dijitValidationInner" value="&#935; "
                    type="text" tabIndex="-1" readonly="readonly" role="presentation"/>
            </div>
        </div>
    </div>

    <!-- Dialog box -->
    <div data-dojo-type="dijit/Dialog" data-dojo-attach-point="dlg" style="display:none;width:200px"
            data-dojo-props="title:'Select Colors'">
        <div class="dijitDialogPaneContent">
            <input data-dojo-type="dijit/form/CheckBox" data-dojo-props="name:'cb1',value:'G'">Green<br>
            <input data-dojo-type="dijit/form/CheckBox" data-dojo-props="name:'cb1',value:'Y'">Yellow<br>
            <input data-dojo-type="dijit/form/CheckBox" data-dojo-props="name:'cb1',value:'R'">Red<br>
        </div>
        <div class="dijitDialogPaneActionBar">
            <button data-dojo-type="dijit/form/Button" data-dojo-props="type:'submit'">OK</button>
            <button data-dojo-type="dijit/form/Button"
                data-dojo-props="type:'button', onClick:function(){ this.getParent().onCancel(); }">
                Cancel</button>
        </div>
    </div>
</div>

以上でカスタム・ウィジェットの実装は完了です。

拡張パッケージの登録ファイル

次に拡張パッケージの定義をします。ICMRegistry サブ・フォルダの中の JSON ファイルで定義を行います。

リスト 2 の ICN プラグイン JavaScript (MyCustomEditorPlugin.js) と一部重複した情報を与えることになりますので、両者で常に値を一致させ、一貫性を保っておく必要があります。

リスト 8. 拡張パッケージの登録ファイル (Extensions.json)
{
    "Name": "My Custom Editors",
    "Description": "A set of custom editors.",
    "Locale": "",
    "Version": "1.0.0",
    "Extensions": [
        {
            "id": "SampleEditor",
            "title": "Simple Custom Editor",
            "description": "This is a simple sample custom editor",
            "type": "ViewDesignerExtensions",
            "packages": {
                "sample": "/navigator/plugin/MyCustomEditorPlugin/getResource/sample"
            },
            "css": [
                  "/navigator/plugin/MyCustomEditorPlugin/getResource/sample/resources/SampleEditor.css"
            ],
            "bootstrapModule": "sample/Initializer",
            "bootstrapMethod": "initialize"
        }
    ]
}

拡張パッケージのビルド

実装が完了したら、プロジェクトをビルドして拡張パッケージを作成します。ビルドには Ant を使用します。リスト 9 にビルド・スクリプトの例を示します。

リスト 9. ビルド・スクリプト (build.xml)
<?xml version='1.0' encoding='UTF-8'?>

<project name="MyCustomEditorPlugin" default="all" basedir=".">

    <target name="all" depends="clean,compile,jar" />
    
    <!-- Change the properties below according to your needs -->
    <property name="extpkgname" value="MyCustomEditorPlugin" />
    <property name="packagebase" value="com/ibm/ecm/extension/mycustomeditors" />
    <property name="pluginclass" value="com.ibm.ecm.extension.mycustomeditors.MyCustomEditorPlugin" />
    <property name="bootstrapjs" value="${extpkgname}.js" />
    <property name="compressedbootstrapjs" value="${bootstrapjs}.gjz" />
    
    <!-- Properties below are supposed to be generated -->
    <property name="webcontentbase" value="${packagebase}/WebContent" />
    <property name="buildoutput" value="${basedir}/build" />
    <property name="buildtemp" value="${buildoutput}/temp" />
    <property name="compiledbin" value="${buildtemp}/bin" />
    <property name="compiledwebcontent" value="${buildtemp}/webcontent" />
    <property name="icmregistry" value="ICMRegistry" />

    <!-- Generic code to build an extensions package -->
    <path id="classpath">
        <fileset dir="lib" >
            <include name="*.jar" />
        </fileset>
        <file name="C:\IBM\ECMClient\lib\navigatorAPI.jar" />
    </path>

    <target name="clean">
        <delete dir="${buildoutput}" />
    </target>

    <target name="compile">
        <mkdir dir="${buildoutput}"/>
        <mkdir dir="${buildtemp}"/>
        <mkdir dir="${compiledbin}"/>
        <mkdir dir="${compiledwebcontent}"/>

        <javac srcdir="src" destdir="${compiledbin}" source="1.6" target="1.6" debug="true"
            includeantruntime="false">
            <classpath refid="classpath" />
            <include name="**/*.java" />
        </javac>

        <copy todir="${compiledwebcontent}" >
            <fileset dir="src">
                <include name="${webcontentbase}/**" />
                <exclude name="**/.*ignore" />
            </fileset>
        </copy>
        <gzip src="${basedir}/src/${webcontentbase}/${bootstrapjs}"
            destfile="${compiledwebcontent}/${webcontentbase}/${bootstrapjs}.jgz"/>
    </target>

    <target name="jar">
        <jar jarfile="${buildoutput}/${extpkgname}.jar" >
            <fileset dir="${compiledbin}" includes="**/*" />
            <fileset dir="${compiledwebcontent}" includes="**/*" />
            <manifest>
                <attribute name="Plugin-Class" value="${pluginclass}" />
                <section name="build">
                    <attribute name="Built-By" value="${user.name}" />
                    <attribute name="Build" value="${TODAY}" />
                </section>
            </manifest>
        </jar>

        <zip destfile="${buildoutput}/${extpkgname}.zip">
            <zipfileset dir="${buildoutput}/">
                <include name="${extpkgname}.jar"/>
            </zipfileset>
            <zipfileset dir="${basedir}">
                <include name="${icmregistry}/**.*"/>
            </zipfileset>
        </zip>
    </target>

</project>

build.xml ファイルの準備ができたら、以下の手順で Ant を実行します。

  1. Eclipse のパッケージ・エクスプローラー上で build.xml を右クリックし、「実行」 > 「Ant ビルド」を選択します。
  2. Ant タスクが実行され、図 14 のように MyCustomEditor プロジェクトの build フォルダに MyCustomEditorPlugin.zip という拡張パッケージのファイルが作成されたことを確認します。 (表示されていない場合はパッケージ・エクスプローラーを更新してみてください)
図 14. 作成された拡張パッケージ

以上で拡張パッケージのビルドは完了です。

拡張パッケージのデプロイ

カスタム・エディターの開発が完了して拡張パッケージがビルドできたら、拡張パッケージをデプロイして実際に動かしてみます。

拡張パッケージをデプロイするには、Case Manager をインストールしたサーバーにインストールされているデスクトップ・アプリケーションである「Case Manager 構成ツール (Case Manager Configuration Tool) 」を使用します。デプロイの手順は次のとおりです。

  1. Case Manager 構成ツールがインストールされているマシンに、拡張パッケージの ZIP ファイルをコピーしておきます。
  2. Case Manager 構成ツールを起動し、インストールに使用した構成プロファイルを開きます。 (もしプロファイルがない場合は新規に作成し、サーバー情報などを設定してください。IBM Case Manager V5.2.1 Platform Installation Tool Components を使ってインストールしている場合は C:\Program Files (x86)\IBM\cmpit\install-scripts\profiles\DeployICM\DeployICM.cfgp が使えます。)
  3. 左側のツリー・ビュー内で右クリックし、「Add New Task」 > 「Deploy and Register Extensions Package」を選択します。 (図 15)
  4. 追加された「New_Deploy and Register Extensions Package」を右クリックし、「Enable Task」を選択してタスクを有効にします。 (図 16)
  5. 「New_Deploy and Register Extensions Package」をダブルクリックしてタスクを開きます。「Extensions package file path」に 1 でコピーしておいた拡張パッケージの ZIP ファイル (ここでは MyCustomEditorPlugin.zip) を指定し、デプロイするサーバーの情報を「Application server node」「Application server name」で選択したら、「Save」ボタンを押して保存します。 (図 17)
  6. 「Run Task」ボタンを押してタスクを実行します。コンソールに「Finished running New_Deploy and Register Extensions Package」というメッセージが表示されれば完了です。
図 15. タスクの追加
図 16. タスクを有効にする
図 17. タスクを設定し、実行する

カスタム・エディターの動作確認

拡張パッケージのデプロイが完了したら、次の手順でカスタム・エディターの動作確認を行います。

  1. ブラウザから Case Manager Builder を開きます。

    http://<ICM_server>:<port>/CaseBuilder/

  2. 動作確認に使用するソリューションを選択して「編集」リンクをクリックします。
  3. 「プロパティー」タブで String 型のプロパティーを追加し、名前を「カラー・コード」とします。 (図 18)
  4. 「ケース・タイプ」タブでケース・タイプを選択または作成します。
  5. 左側のナビゲーションで「プロパティー」を選択し、「カラー・コード」プロパティーを追加します。 (図 19)
  6. 左側のナビゲーションで「ビュー」を選択し、ビューを選択または作成します。簡単に動作確認をするためにそのビューを「デフォルト・ビュー」として設定しておきます。 (図 20)
  7. ビュー名のリンク (図 20 では MyView) をクリックし、「Properties View Designer」を開き、「カラー・コード」プロパティーをレイアウトします。 (図 21)
  8. レイアウト画面に配置された「カラー・コード」をクリックし、右側の「エディター」ドロップダウンで「Simple Custom Editor」を選択します。 (図 22)
  9. ページを保存し、ソリューションをコミットしてデプロイします。
  10. デプロイしたソリューションをブラウザで開き、プロパティー・ビューを持つ適当なページ (「ケースの追加」など) を開きます。先に示した図 3、図 4、図 5 のようにカスタム・エディターが動作することを確認します。
図 18. プロパティーを追加
図 19. ケース・タイプにプロパティーを追加
図 20. デフォルト・ビューの設定
図 21. ケース・プロパティーのレイアウト設定
図 22. カスタム・エディターの選択

以上でカスタム・エディターの動作確認は完了です。

Eclipse プラグインによるプロジェクトの作成

ここまで、手作業によりプロジェクトを作成する手順を紹介してきました。手順がやや多かったかもしれませんが、プロジェクトの全体の構成や仕組みがご理解いただけたと思います。一方で、決まりごとが多く、変更する必要のない部分・変更してはいけない部分が多くあるのも事実です。そこで、今回紹介したサンプル・コードのプロジェクトを生成する Eclipse プラグインを紹介します。 (今回の記事向けに筆者らが作成したもので、Windows 版 Eclipse Juno, Kepler, Luna および IBM Java 6, 7 で動作確認しています。)

Eclipse プラグインのインストール

  1. 添付の ICMEclipsePlugin.zip をダウンロードし、展開します。
  2. プラグインの jar ファイル (com.ibm.tsdl.icm.ui_*.jar) を Eclipse の dropins フォルダにコピーし、Eclipse を再起動します。

Eclipse プラグインの使用方法

  1. 「ファイル」 > 「新規」 > 「プロジェクト」を選択します。
  2. 「新規プロジェクト」ダイアログから「ICM」 > 「ICM 5.2.1 Custom Editor Project」を選択します。
  3. ウィザードの指示に従って設定を進めます。 (navigatorAPI.jar のパスの指定は必須ですので必ず指定してください)

なお、「新規プロジェクト」ダイアログから「ICM」 > 「ICM 5.2 Custom Page Widget Project」を選択することで、IBM Case Manager のカスタム・ウィジェット開発手順で紹介したカスタム・ウィジェット開発のためのプロジェクトを作成することもできます。

まとめ

この記事では ICM のプロパティー・ビューを拡張するためのカスタム・エディターを開発するにあたって、プロジェクトの構成を説明し、実際にプロジェクトを作成してデプロイ、動作確認までの一連の手順を紹介しました。また、プロジェクト作成を支援する Eclipse プラグインも紹介しました。プロパティー・ビューは日々の業務でケースを扱う作業者にとっての主要なインターフェイス部分となるため、ビジネスのニーズに応じたさまざまな要求があり得ると思われます。今回紹介したサンプル・コードを発展させることで、幅広いニーズに応えるケース管理ソリューションを開発するための一助となれば幸いです。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=DevOps, Web development
ArticleID=992304
ArticleTitle=IBM Case Manager プロパティー・ビューにおけるカスタム・エディターの開発
publish-date=12112014