IM-FormaDesigner for Accel Platform 画面アイテム作成ガイド第6版 2017-04-01

目次 ≪ 6.2. 画面アイテム構成ファイルの実装 6.6. リンク機能のある画面アイテムを作成する ≫

6.5. 実装した画面アイテムをシステムに登録する¶

6.5.1. ツールキットへの登録¶

実装した画面アイテムを「フォーム・デザイナ」画面で画面アイテムとして使用できるよう、設定ファイルに登録します。

画面アイテムの登録は、以下の設定ファイルで行います。
<%WAR%>/WEB-INF/conf/forma-extension-config/forma-config_xxx.xml
コラム

配置するファイル名は、 IM-BIS で提供する「forma-config_bis.xml」と重複しないようにしてください。

上記の条件に合致していれば、ファイル名は任意の名前を設定できます。

コラム

画面アイテムに対するヘルプの設定については、「 IM-FormaDesigner 作成者操作ガイド」の「 IM-FormaDesigner の高度な設定を行う」を参照してください。
画面アイテム構成ファイルの格納フォルダのパスを以下の場所に登録します。
…
  <toolkit-setting>
       <define-item>
           <item-path>%画面アイテム構成ファイルの格納フォルダのパス%</item-path>
       …
IM側で提供している画面アイテム構成ファイルの格納フォルダのパスの先頭は、forma/designer/types/です。

たとえば、画面アイテム「文字列」の場合は、以下の通りです。

新規に画面アイテムを作成する場合はproductフォルダ以下は使用せずに、新規にフォルダを作成してください。
…
  <toolkit-setting>
       <define-item>
           <item-path>forma/designer/types/product/72/textbox</item-path>
       …
次に、画面アイテムをツールキット上に表示させるための設定を行います。

既存のグループに追加する場合は、追加したいグループの子に、画面アイテムタイプを設定します。
…
  <toolkit-setting>
       …
       <default-grouping>
           <group>
               <group-id>%グループID%</group-id>
               <item-id>%画面アイテムタイプ%</item-id>
       …
画面アイテム「文字列」の場合は、以下の通りです。
…
  <toolkit-setting>
       …
       <default-grouping>
           <group>
               <group-id>input</group-id>
               <item-id>Product_72_textbox</item-id>
       …
次に、画面アイテムをどのアプリケーション種別（BIS作成種類）で表示するかを設定します。

設定しない場合には、すべてのアプリケーション種別（BIS作成種類）のツールキットで表示されます。

複数のアプリケーション種別（BIS作成種類）を指定する場合には、カンマ区切りで設定します。
…
  <toolkit-setting>
       …
       <default-grouping>
           <group>
               <group-id>%グループID%</group-id>
               <item-id application-type="{対象のアプリケーション種別（BIS作成種類）}">%画面アイテムタイプ%</item-id>
       …
画面アイテム「ボタン（登録）」の場合は、以下の通りです。
…
  <toolkit-setting>
       …
       <default-grouping>
           <group>
               <group-id>button</group-id>
               <item-id application-type="std,imw,bis_wkf">product_80_registButton</item-id>
       …
ツールキットで画面アイテムを表すアイコンを設定します。

アイコンとして利用するCSS Sprite用の画像とCSSファイルのパス（src/main/publicからの相対パス）を指定します。
…
  <toolkit-setting>
       …
       <css-path>{CSSファイルパス}</css-path>
       …
IM-BIS の画面アイテムの場合は、以下の通りです。
…
  <toolkit-setting>
       …
       <css-path>forma/css/bis-forma-ui-icons.css</css-path>
       …
コラム

CSS Spriteとは複数の画像部品を連結して1枚の画像ファイルにまとめ、CSSで表示範囲を指定することによって画像を表示する手法のことです。

intra-mart Accel Platform における画像表示には CSS Sprite が利用されています。

CSS Sprite用のCSSファイルをアイコン画像から生成するためのツールは以下からダウンロードして利用してください。

「プロダクトファイルダウンロード」-「CSS Sprite ジェネレータ」

ダウンロードには intra-mart Accel Platform のライセンスが必要です。

詳細な利用方法は、CSS Sprite ジェネレータのZIPファイル内の <readme.txt> を参照してください。

画面アイテム・グループの追加方法¶

ツールキットに画面アイテム・グループを追加する方法は以下の通りです。
default-grouping の下へ、他のgroup-idと重複しないIDを持つgroupを作成します。
…
  <toolkit-setting>
      …
      <default-grouping>
          <group>
              <group-id>newgroup</group-id>
          </group>
       …
次にメッセージプロパティファイルへグループ名を追加し、<%WAR%>/WEB-INF/jssp/product/src/forma/designer/form_designer_toolkit.js へ表示名を追加します。

画面アイテムタイプをキーとして、値にメッセージマネージャから取得した表示名を設定します。
var $groups;

function init(arg) {
  messages = {
    input:MessageManager.getMessage("imfr.form_designer.label.item_group.input"),
    button:MessageManager.getMessage("imfr.form_designer.label.item_group.button"),
    master:MessageManager.getMessage("imfr.form_designer.label.item_group.master"),
    workflow:MessageManager.getMessage("imfr.form_designer.label.item_group.workflow"),
    general:MessageManager.getMessage("imfr.form_designer.label.item_group.general"),
    display:MessageManager.getMessage("imfr.form_designer.label.item_group.display").
    newgroup: MessageManager.getMessage("imfr.form_designer.label.item_group.newgroup") // 追加グループ表示名
  }
  $groups = arg.groups;
  for(var i = 0; i < $groups.length; i++) {
       $groups[i].title = messages[$groups[i].id] ? messages[$groups[i].id] : "";
  }
}
以上で、新規グループが作成されます。追加したグループに画面アイテムを追加してください。

画面アイテム・グループを特定のアプリケーション種別のときのみ使用可能にする方法¶

作成した画面アイテム・グループを特定のアプリケーション種別の時のみツールキットに表示してグループ内の画面アイテムを使用できるようにしたい場合は、上記で作成したgroup にapplication-type 属性を追加します。
<group application-type="std">
    <group-id> newgroup </group-id>
    ・・・・・
指定する値は以下の通りです。

アプリケーション種別標準・・・std

アプリケーション種別 IM-Workflow・・・imw

IM-BIS のフローの場合は以下の通りです。

BIS作成種類 BISフロー・・・bis_bf

BIS作成種類ワークフロー・・・bis_wkf

application-type 属性の指定がない画面アイテム・グループは、アプリケーション種別問わず常にツールキットに表示されます。

作成した画面アイテムを画面アイテム「一覧選択」の取得値フィールド対象外にする¶

画面アイテム「一覧選択」では、クエリで取得される項目が1 つの場合は、必ず自分自身のテキストボックスへ反映されますが、複数存在する場合は2 つ以降は他の画面アイテムの入力項目へ反映させることができます。

この時フォーム内に存在する入力フィールドリスト（input_list）を持つ画面アイテムが取得値を反映させる対象フィールドですが、入力フィールドリストを持っていても作成した画面アイテムを画面アイテム「一覧選択」の取得値を反映させる対象フィールドにはしたくない場合は、以下の設定を行います。

この設定を行うことで、対象の画面アイテムのフィールドは取得値設定対象から除外され画面アイテム「一覧選択」の取得値設定セレクトボックスに表示されないように設定できます。
設定方法

item-setting タグ内のexclude-itemselect 要素を追加し画面アイテムタイプを設定します。

標準で提供する画面アイテムではチェックボックスやラジオボタンなどが設定されています。
<item-setting>
   <date-format>yyyy/MM/dd</date-format>
   ・・・・・
   <exclude-itemselect>product_72_checkbox</exclude-itemselect>
   <exclude-itemselect>product_72_listbox</exclude-itemselect>
   ・・・・・
   <exclude-itemselect>%画面アイテムタイプ%</exclude-itemselect>
</item-setting>

ツールキット設定ファイルの実装例¶

ツールキットの設定ファイルの実装例です。

サンプル1¶

以下のサンプルでは、２つの画面アイテムを次の内容で設定しています。

画面アイテム「hoge」

アイテムグループを「共通マスタ」に設定

アプリケーション種別（BIS作成種類）の利用範囲は「標準」のみ

画面アイテム「hoge2」

アイテムグループを「表示アイテム」に設定

アプリケーション種別（BIS作成種類）の利用範囲は「すべて」（設定なし）

<?xml version="1.0" encoding="UTF-8"?>
<forma-extension-config xmlns="http://www.intra-mart.jp/forma-extension-config" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://www.intra-mart.jp/forma-extension-config ../../schema/forma-extension-config.xsd">

    <toolkit-setting>
        <define-item>
            <item-path>forma/designer/types/product/sample/hoge</item-path>
            <item-path>forma/designer/types/product/sample/hoge2</item-path>
        </define-item>
        <default-grouping>
            <group>
                <group-id>master</group-id>
                <item-id application-type="std">hoge</item-id>
            </group>
            <group>
                <group-id>display</group-id>
                <item-id>hoge2</item-id>
            </group>
        </default-grouping>
    </toolkit-setting>
</forma-extension-config>

サンプル2¶

以下のサンプルでは、２つの画面アイテムを次の内容で設定しています。

画面アイテム「hoge」

アイテムグループを「ボタンアイテム」に設定

アプリケーション種別（BIS作成種類）の利用範囲は「標準」「IM-Workflow」「BISフロー」

画面アイテム「hoge2」

アイテムグループを「汎用アイテム」に設定

アプリケーション種別（BIS作成種類）の利用範囲は「BISフロー」「ワークフロー」

アイコン用にCSSスプライトを追加

<?xml version="1.0" encoding="UTF-8"?>
<forma-extension-config xmlns="http://www.intra-mart.jp/forma-extension-config" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://www.intra-mart.jp/forma-extension-config ../../schema/forma-extension-config.xsd">

    <toolkit-setting>
        <define-item>
            <item-path>forma/designer/types/product/sample/bis_hoge</item-path>
            <item-path>forma/designer/types/product/sample/bis_hoge2</item-path>
        </define-item>
        <default-grouping>
            <group>
                <group-id>button</group-id>
                <item-id application-type="std,imw,bis_bf">bis_hoge</item-id>
            </group>
            <group>
                <group-id>general</group-id>
                <item-id application-type="bis_bf,bis_wkf">bis_hoge2</item-id>
            </group>
        </default-grouping>
        <css-path>forma/css/bis-hoge.css</css-path>
    </toolkit-setting>
</forma-extension-config>

目次 ≪ 6.2. 画面アイテム構成ファイルの実装 6.6. リンク機能のある画面アイテムを作成する ≫