注意

本ファイルを利用した入力チェックにおいて、システムエラーが発生する場合があります。

• 複数ユーザが同一タイミングで登録/更新ボタン押下し、入力チェックを行う

そのため、本ファイルを利用した入力チェックは非推奨です。

ファイル名	ディレクトリ	概要
items_library.js	<%WAR%>/WEB-INF/jssp/product/src/forma/designer/types	サーバサイドでの共通仕様定数と共通処理を記述しているファイルです。 load 関数でファイルを読み込んで使用します。

• 関数

  • LIBRARY.validation.properties

    「フォーム・デザイナ」画面上で、画面アイテムのプロパティ画面から入力した時に行われる入力チェックです。

    各画面アイテムで共通なプロパティ項目は、ここに記述されている関数を利用して入力チェックを行っています。

    主なチェック関数名と対象プロパティは以下のとおりです。

    チェック関数名	対象プロパティ
    itemViewNames	アイテム名チェック
    labelName	ラベル名チェック
    inputId	フィールド識別ID チェック
    labelSize	ラベル幅チェック
    itemViewType	アイテム表示タイプチェック
    inputViewNames	フィールド識別名チェック
    inputFieldSize	入力フィールド横幅チェック
    valueLength	最小・最大入力文字数チェック
    numberValue	最小・最大入力値チェック
    styles	アイテムの表示スタイルチェック

  • LIBRARY.validation.client

    「フォーム・デザイナ」画面で作成したフォームを使用してデータを登録する時に行われるユーザ入力チェック用の共通関数です。

    各画面アイテムで共通なチェック項目は、ここに記述されている関数を使用して入力チェックを行っています。

    主なチェック関数名は以下のとおりです。

    チェック関数名	対象プロパティ
    required	必須入力チェック
    selectRequired	必須選択チェック
    minLength	最小文字数チェック
    maxLength	最大文字数チェック
    onlyAscii	英数字のみチェック
    onlyNumber	数値のみチェック
    minusNumber	負数チェック
    numberSize	数値のサイズ（最小・最大値）チェック
    decimalSize	小数部桁数チェック
    dateFormat	日付形式チェック
    fileAmount	添付ファイルの個数チェック

• 定数

  • LIBRARY.dataTypeString

    登録データ形式（文字列）の画面アイテムプロパティ設定値が定義されています。

  • LIBRARY.dataTypeNumber

    登録データ形式（数値）の画面アイテムプロパティ設定値が定義されています。

  • LIBRARY.dataTypeDate

    登録データ形式（日付）の画面アイテムプロパティ設定値が定義されています。

  • LIBRARY.dataTypeTimestamp

    登録データ形式（タイムスタンプ）の画面アイテムプロパティ設定値が定義されています。

  • LIBRARY.viewType

    表示タイプの画面アイテムプロパティ設定値が定義されています。

  • LIBRARY.appType

    アプリケーションタイプが定義されています。

    画面アイテム内でアプリケーションタイプを判定する必要がある場合に使用します。

  • LIBRARY.dateFormats

    設定ファイルで定義されている、日付形式を配列で取得します。

• 関数

  各画面アイテムでのプロパティ項目は、ここに記述されている関数を使用して入力チェックを行っています。

  主なチェック関数名と対象プロパティは以下のとおりです。

  チェック関数名	対象プロパティ
  itemViewNames	アイテム名チェック
  labelName	ラベル名チェック
  inputId	フィールド識別ID チェック
  labelSize	ラベル幅チェック
  itemViewType	アイテム表示タイプチェック
  inputViewNames	フィールド識別名チェック
  inputFieldSize	入力フィールド横幅チェック
  valueLength	最小・最大入力文字数チェック
  numberValue	最小・最大入力値チェック
  styles	アイテムの表示スタイルチェック

• 関数

  各画面アイテムでのチェック項目は、ここに記述されている関数を使用して入力チェックを行っています。

  主なチェック関数名は以下のとおりです。

  チェック関数名	対象プロパティ
  required	必須入力チェック
  selectRequired	必須選択チェック
  minLength	最小文字数チェック
  maxLength	最大文字数チェック
  onlyAscii	英数字のみチェック
  onlyNumber	数値のみチェック
  minusNumber	負数チェック
  numberSize	数値のサイズ（最小・最大値）チェック
  decimalSize	小数部桁数チェック
  dateFormat	日付形式チェック
  fileAmount	添付ファイルの個数チェック

• 定数

  • imfrConstUtils.prototype.dataTypeString

    登録データ形式（文字列）の画面アイテムプロパティ設定値が定義されています。

  • imfrConstUtils.prototype.dataTypeNumber

    登録データ形式（数値）の画面アイテムプロパティ設定値が定義されています。

  • imfrConstUtils.prototype.dataTypeDate

    登録データ形式（日付）の画面アイテムプロパティ設定値が定義されています。

  • imfrConstUtils.prototype.dataTypeTimestamp

    登録データ形式（タイムスタンプ）の画面アイテムプロパティ設定値が定義されています。

  • imfrConstUtils.prototype.viewType

    表示タイプの画面アイテムプロパティ設定値が定義されています。

  • imfrConstUtils.prototype.appType

    アプリケーションタイプが定義されています。

    画面アイテム内でアプリケーションタイプを判定する必要がある場合に使用します。

  • imfrConstUtils.prototype.dateFormats

    設定ファイルで定義されている、日付形式を配列で取得します。

ファイル名	ディレクトリ	概要
itemObject.js	<%WEB_PATH%>/forma/csjs/types	画面アイテムの基本データ構造と各種リスナー、画面アイテム用ユーティリティ関数が記述されています。 画面アイテムの基礎となる関数等を提供しています。そのため本ファイルを編集する場合は、影響範囲を考慮の上、編集を行ってください。

• 画面アイテム基礎系関数

  • FormaItemObject

    関数全ての画面アイテムに共通な、基本データ構造を定義しています。

    画面アイテムをフォームに新しく配置する場合は、new 演算子を使用してこの関数の新しいオブジェクトを生成し、1 画面アイテムに対して1 オブジェクトを持ちます。

    生成処理は「フォーム・デザイナ」画面側で自動的に行われるため画面アイテム側で行う必要はありません。

  • FormaItemObject.set 関数

    生成した画面アイテムオブジェクトへ、プロパティで入力や変更された値をセットする時に使用する関数です。

    主にproperties(.html/.js)で使用します。

    この関数を使用して値のセットを行うと、後述のリスナー追加関数を利用してオブジェクトに追加されたリスナーを自動的に実行します。

    アイテムオブジェクトへ値をセットする場合は必ずこの関数を使用するようにしてください。

    引数と使用方法は以下のとおりです。

    

  • FormaItemObject.addListener 関数

    画面アイテム構造へデータをセットした時に実行されるリスナー関数を設定します。

    主に preview(.html/.js)で使用します。

    引数で与える関数の this は画面アイテム構造自身を指し、引数event に与えられているプロパティと例文は以下のとおりです。

    

    • 使用例

      object.addListener( function( event ){
        if( event.key == ‘foo’ ){
              alert( ‘old:’ + event.oldValue + ‘,new:’ + event.newValue );
        }
      } );

  • FormaItemObject.addLocaleListener 関数

    「フォーム・デザイナ」画面の表示ロケールが変更された時に実行されるリスナー関数を設定します。

    引数で与える関数の this は画面アイテム構造自身を指し、引数locale には変更後のロケールID が与えられます。

    

  • FormaItemObject.addItemDef 関数

    画面アイテムのデータ構造や、初期化時の関数など画面アイテム定義情報を設定します。

    主に、クライアントサイドの画面アイテム専用js で使用します。

    引数は以下のとおりです。

    

  • FormaItemObject.addItemPreviewDef 関数

    ラベル初期値などの多言語情報が必要なプロパティなどの、追加分の画面アイテムのデータ構造と、画面アイテムプレビューの初期化を行う関数を設定します。

    引数は以下のとおりです。

    

• ユーティリティ系関数

  • formaItems.getItemPreview 関数

    配置時に生成した画面アイテム毎のデータ構造オブジェクトから、フォーム上の画面アイテムプレビューのdivElement を取得します。

    

  • formaItems.addPropertiesValidation 関数

    プロパティの入力チェックエラーハンドリング関数を設定します。

    引数は以下のとおりです。

    

  • jQuery 拡張changeErrorStyle 関数

    プロパティ画面入力時にエラーが発生した場合のエラーハンドリングを記述します。

    各画面アイテム個別の処理は、%画面アイテムタイプ% (js)で記述するので、ここでは共通なもののみを記述します。

    通常のテキストフィールドでの入力の場合は、関数内の nameMap 変数へ、入力チェック関数から返却されるtarget 名と、テキストボックスのname 属性値を追加することで、自動的にテキストボックスのスタイルが変更されます。

    

ファイル名	ディレクトリ	概要
jquery.formEditor.js	<%WEB_PATH%>/forma/csjs	「フォーム・デザイナ」画面用 CSJS ファイルです。 画面アイテムでも利用可能なユーティリティ関数が存在します。

• forma.current 変数

  現在選択（編集）中画面アイテムの、プレビューdiv のelement と、画面アイテムタイプが保存されています。

• forma.getComponent 関数

  forma.current 変数を引数として与えると、現在選択（編集）中画面アイテムの、データ構造を返却します。

  データ構造が存在しない場合は null を返却します。

• forma.getComponentById 関数

  アイテム ID から、画面アイテムのデータ構造を返却します。

  データ構造が存在しない場合は null を返却します。

ファイル名	ディレクトリ	概要
type.js	forma/designer/types/画面アイテムタイプ	各画面アイテム固有のプロパティ情報データ構成定義と画面アイテムプロパティ入力チェック、ユーザ入力時の入力チェックを記述します。

• init 関数

  init 関数の返却値として「フォーム・デザイナ」画面に読み込まれる画面アイテム定義情報を記述します。

  返却されるオブジェクト情報を「フォーム・デザイナ」画面が受け取り、ツールキットに表示します。

  このファイルのロードタイミングはサーバの起動時です。変更の際はサーバの再起動を行ってください。

  

  画面アイテム「文字列」の場合

  

• validate 関数

  ユーザが入力した値の入力チェックを記述します。

  「フォーム・デザイナ」画面で作成されたフォームの登録処理が行われた場合に、自動的に実行されます。

  関数名は固定です。変更した場合、自動的に実行はされません。

  引数として以下の変数が与えられます。

  

  画面アイテム「文字列」の場合、使用入力チェック関数は以下のとおりです。

  required	必須入力チェック
  minLength	最小文字数チェック
  maxLength	最大文字数チェック
  onlyAscii	英数字のみチェック

• propertiesValidate 関数

  「フォーム・デザイナ」画面上で、画面アイテムプロパティに入力された値の入力チェックを記述します。

  画面アイテム個別のチェック時は、プロパティ画面が閉じられる時に実行されます。

  関数名は固定です。変更した場合、自動的に実行はされません。

  引数として以下の変数が与えられます。

  

  画面アイテム「文字列」の場合、使用入力チェック関数は以下のとおりです。

  itemViewNames	アイテム名チェック
  labelName	ラベル名チェック
  labelSize	ラベル幅チェック
  inputId	フィールド識別ID チェック
  itemViewType	アイテム表示タイプチェック
  inputViewNames	フィールド識別名チェック
  inputFieldSize	入力フィールド横幅チェック
  valueLength	最小・最大入力文字数チェック
  lengthIntegrity	最小・最大文字数の整合性チェック
  styles	アイテムの表示スタイルチェック

• getHeaderSettingList 関数

  ユーザ入力時にロードする必要のある外部ファイルを記述します。

  ロードしたいファイルの種類によって、決められた形式のオブジェクトを返却します。

  ロードファイルが複数ある場合は、配列にして返却、ロードする必要がない場合は空オブジェクトを返却します。

  オブジェクトのプロパティと例文は以下のとおりです。

  

  • 使用例

    function getHeaderSettingList(){
      return [
          {
                type : 'javascript',
                src : 'forma/csjs/types/xxx/xxx.js'
          },
          {
                type : 'stylesheet',
                href : 'forma/css/types/xxx/xxx.css',
                media : 'print'
          }
      ];
    }
    

    画面アイテム「文字列」の場合、ロードするファイルはありませんので空のオブジェクトを返しています。

ファイル名	ディレクトリ	概要
preview (.html/.js)	forma/designer/types/画面アイテムタイプ	「フォーム・デザイナ」画面上で表示される、編集中フォームの画面アイテムプレビューと、画面アイテムプレビューの定義を記述します。 formaItems.addItemPreviewDef 関数をここで記述することにより、初めてプレビューが表示された時に、画面アイテム別基本データ構造の初期化が行われます。 また、画面アイテムプレビューの初期化処理を記述することによって、プロパティで変更された値のプレビューへの即時反映（画面アイテムプロパティ値変更リスナー）や、「フォーム・デザイナ」画面の表示ロケール変更時のプレビュー表示ロケール変更（ロケール変更リスナー）などが行えます。

• formaItems.addItemPreviewDef 関数

  preview.html で必ず記述する必要があります。

  関数の詳細は、クライアントサイド共通ファイルのitemObjectを参照してください。
  画面アイテム「文字列」の場合、関数の処理は以下のとおりです。

  • 画面初期値を表示する処理
  • プロパティ画面によるデータ変更時の処理
  • ロケール変更時に、指定したロケールに対応する処理

ファイル名	ディレクトリ	概要
properties (.html/.js)	forma/designer/types/画面アイテムタイプ	画面アイテムプロパティを入力するための入力フィールドを記述します。 記述するHTML構造はある程度決まっており、下記の形式で記述することによって、自動的にタブ化などの処理が行われます。 プロパティの各項目が変更された際に、変更内容をプレビュー画面に動的に反映させるための処理も記述します。

<div id=’imfr_item_prop_error_mes’ class=’state-error’></div>
  <div id=’imfr_item_prop_tabs’>
     <ul>
         <li><a href=’#imfr_item_prop_tab1’>xxx</a></li>
         <li><a href=’#imfr_item_prop_tab2’>xxx</a></li>
         <li><a href=’#imfr_item_prop_tab3’>xxx</a></li>
     </ul>
     <div id=’imfr_item_prop_tabs1’ class=’imfr_item_prop_body’>
        タブ1 の内容
     </div>
     <div id=’imfr_item_prop_tabs2’ class=’imfr_item_prop_body’>
        タブ2 の内容
     </div>
     <div id=’imfr_item_prop_tabs3’ class=’imfr_item_prop_body’>
        タブ3 の内容
     </div>
</div>
<div id='imfr_item_help' class='ui-corner-all' ></div>

• プロパティの画面による各データ変更時の値設定処理（component.set)
• 指定ロケールのデータ設定処理

ファイル名	ディレクトリ	概要
input (.html/.js)	forma/designer/types/画面アイテムタイプ	「フォーム・デザイナ」画面で編集されたフォームを使用して、ユーザがデータを入力する画面に表示される部品を記述します。 画面アイテムプロパティを設定した時、表示タイプを『入力可』に設定した画面で表示されます。

• input.js

  init 関数の引数に、データ構造とフォーム全体の登録済みの値がプロパティとして与えられます。

  登録済みデータを取得するには、data プロパティからフィールド識別ID と一致するプロパティの値を参照します。

  • 使用例

    init( arg ){
      var setting = arg.setting; //画面アイテムデータ構造
      var data = arg.data; // フォーム全体の入力値
    
      var value = data[ setting.input_list[0].input_id ];
    }
    

  • 画面アイテム「文字列」の場合

    var $properties;
    var $data;
    
    function init(args){
      var component = args.setting;
      var data = args.data;
      $properties = {
          label : component.item_properties.labels[0][ Module.client.get( 'locale' ) ],
          label_size : component.item_properties.label_size[0],
          initial_value : component.input_list[0].input_properties.initial_value[ Module.client.get( 'locale' ) ],
          input_id : component.input_list[0].input_id,
          input_field_size: component.input_list[0].input_properties.input_field_size,
          max_length : component.input_list[0].input_properties.max_length,
          tab_index : component.input_list[0].input_properties.tab_index
    };
    
      $data = {
          value : $properties.initial_value
      };
    
      if( typeof data[ $properties.input_id ] != 'undefined' ){
          $data.value = data[ $properties.input_id ];
      }
    }
    

• input.html

  ユーザが入力するための入力フィールドと、入力チェックのためのエラー表示関数と、エラー表示クリア関数を記述します。

  エラーハンドリングとエラー表示クリアは以下の形式で記述します。

  if( !window.formaItems ) window.formaItems = {};
  
  if( !window.formaItems.xxx ){ // xxx = %アイテムタイプ%
       window.formaItems.xxx = { // xxx = %アイテムタイプ%
            AcceptError : function(){
              // エラー表示処理
            } ,
            ClearError : function(){
              // エラー表示クリア処理
            }
       }
    }
  

  • 画面アイテム「文字列」の場合

    if( !window.formaItems ) window.formaItems = {};
    
            window.formaItems.product_72_textbox = {
                /** エラー表示 */
                AcceptError : function( event ){
                    if($('input[name="' + event.inputId + '"]').parent().find( 'img[src$="exclamation-red.png"]' ).size() == 0 ){
                          $('input[name="' + event.inputId + '"]').addClass( 'imfr_item_input_error' )
                           .parent().append( '<img src="images/icons/16x16/fugue-icons/shadow/exclamation-red.png" border="0"
     />' );
                    }
                 },
                 /** エラー表示クリア */
                 ClearError : function( event ){
                     $('input[name="' + event.inputId + '"]').removeClass( 'imfr_item_input_error' )
                     .parent().find( 'img[src$="exclamation-red.png"]' ).remove();
                 }
            };
       }
    

ファイル名	ディレクトリ	概要
reference (.html/.js)	forma/designer/types/画面アイテムタイプ	「フォーム・デザイナ」画面で編集されたフォームを使用して、ユーザが登録したデータを参照する画面に表示される部品を記述します。 画面アイテムプロパティを設定した時、表示タイプを『参照』または、『表示』に設定した画面で表示されます。

• reference.js

  init 関数の引数に、データ構造とフォーム全体の登録済みの値がプロパティとして与えられます。

  登録済みデータを取得するには、data プロパティからフィールド識別ID と一致するプロパティの値を参照します。

  • 使用例

    init( arg ){
      var setting = arg.setting; //画面アイテムデータ構造
      var data = arg.data; // フォーム全体の入力値
    
      var value = data[ setting.input_list[0].input_id ];
    }
    

  • 画面アイテム「文字列」の場合

    var $properties;
    var $data;
    
    function init(args){
      var component = args.setting;
      var data = args.data;
    
      $properties = {
          label : component.item_properties.labels[0][ Module.client.get( 'locale' ) ],
          label_size : component.item_properties.label_size[0],
          initial_value : component.input_list[0].input_properties.initial_value[ Module.client.get( 'locale' ) ],
          input_id : component.input_list[0].input_id,
          input_field_size: component.input_list[0].input_properties.input_field_size
      };
    
      $data = {
          value : $properties.initial_value
      };
    
      if( typeof data[ $properties.input_id ] != 'undefined' ){
            $data.value = data[ $properties.input_id ];
      }
    }
    

• reference.html

  ユーザが入力したデータを表示するための項目、および、他画面アイテムから値を利用するための、非表示項目を記述します。

ファイル名	ディレクトリ	概要
%画面アイテムタイプ%.js	<%WEB_PATH%>/forma/csjs/types	画面アイテムの個別データ構造オブジェクト生成時の初期化関数などの定義、プロパティでの入力チェックエラー発生時のエラーハンドリングを記述します。

• formaItems.xxx 関数

  画面アイテムの個別データ構造です。

  アイテムデータ構造のうち、共通なものは別ファイルで定義されているので、ここでは画面アイテムで個別な部分を定義します。

  ここで定義された値を優先する形で、基本構造とマージされますので、画面アイテムデータの初期値なども設定しておきます。

  xxx の部分は、画面アイテムタイプを使用してください。

• formaItems.addPropertiesValidation 関数

  プロパティ画面の入力でエラーが発生した場合の処理を定義します。

  プロパティ項目ごとの個別処理のほか、共通な処理の場合は、imfr_item_prop_tabs のid 属性値を持つdivに対して、changeErrorStyle 関数を実行させれば、itemObject.js ファイルで定義されているとおりに、他画面アイテムと共通なエラー表示処理が行われます。

• formaItems. getFieldList 関数

  itemObject のinput_list に保持する入力項目の中からフィールド一覧に表示対象となる入力項目リストを返却します。

  返却入力項目リストがinput_listの格納順と異なる場合は、fieldListIndexプロパティにinput_listでの格納順を設定する必要があります。

  例えば、 input_listに３つの入力フィールド情報を格納していて、フィールド一覧の表示対象にするのは2番目の入力フィールドのみという場合は、2番目の入力フィールドのfieldListIndexに2と設定します。

  格納順が変わらない場合は、指定の必要はありません。

  

  itemObject のinput_list に保持する入力項目の中からフィールド一覧に表示対象となる入力項目リストを返却します。

  • 実装例

    formaItems.product_72_departmentSelect.getFieldList = function( input_list ) {
           var inputList = [];
           inputList.push( $.extend( true, {fieldListIndex : 2}, input_list[2] ) );
           return inputList;
       }
    

• formaItems. isTabIndexItem 関数

  実装することで、入力項目のある画面アイテム以外でもタブインデックスを設定できます。

  フィールド一覧へ表示され、タブインデックスを設定することができます。

  

  • 実装例

    formaItems.product_80_eventButton.isTabIndexItem = function() {
           return true;
    }
    

• formaItems. isForbiddenTabTransition 関数

  実装することで、入力項目のある画面アイテムへのタブインデックスの設定を制限することができます。

  フィールド一覧上での入力項目のある画面アイテムへのタブインデックスの設定を制限することができます。

  

  • 実装例

    formaItems.product_72_departmentSelect.getFieldList = function( input_list ) {
           var inputList = [];
           inputList.push( $.extend( true, {fieldListIndex : 2}, input_list[2] ) );
           return inputList;
       }
    

• 画面アイテム「文字列」の%画面アイテムタイプ%.js（textbox.js）

  (function($){
  
      formaItems.product_72_textbox = {
          item_id : '',
          item_type : 'product_72_textbox',
          item_exist_dbinput : true,
          item_view_type : {
              REGISTRATION : '0',
              EDIT : '0',
              REFERENCE : '0'
          },
          style : {
              top : 0,
              left : 0,
              width : 300,
              height : 25,
              zindex : 0
          },
          item_properties : {
              labels : [{}],
              label_size : [ 100 ],
              label_styles : [{
                  label_background_color : '',
                  label_font_color : '',
                  label_font_size : 13,
                  label_font_family : {},
                  label_font_bold : false,
                  label_font_italic : false,
                  label_font_underline : false
              }]
          },
          input_list : [{
              input_id : '',
              input_data_type : '',
              input_view_names : {},
              input_dbinput : true,
              input_properties : {
                  tab_index : 0,
                  min_length : 0,
                  max_length : 500,
                  input_field_size : 150,
                  initial_value : {},
                  required : false,
                  only_ascii : false,
                  input_background_color : '',
                  border_style : '0',
                  border_shadow : true,
                  no_frames : false,
                  bottom_only : false,
                  border_color : '',
                  input_font_color : '',
                  input_font_size : 13,
                  input_font_family : {},
                  input_font_bold : false,
                  input_font_italic : false,
                  input_font_underline : false,
                  custom_input_chk : false,
                  custom_chk_format : '',
                  custom_err_msg : {}
              }
          }]
      };
      
      formaItems.addItemDef('product_72_textbox', formaItems.product_72_textbox, function( model, locales ){
      
          $.extend(true,this,model);
          this.item_id = formaItems.getRandomString(12);
          
          return this;
      });
      
      formaItems.addPropertiesValidation('product_72_textbox', function( result ){
      
          $( 'div#imfr_item_prop_tabs' ).changeErrorStyle( result.target );
      });
  })(jQuery);