8.1. 共通ライブラリ・ファイル¶
8.1.1. サーバサイド共通ライブラリ・ファイル¶
【非推奨】items_library.js¶
注意
本ファイルを利用した入力チェックにおいて、システムエラーが発生する場合があります。
- 複数ユーザが同一タイミングで登録/更新ボタン押下し、入力チェックを行う
そのため、本ファイルを利用した入力チェックは非推奨です。
ファイル名 ディレクトリ 概要 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
設定ファイルで定義されている、日付形式を配列で取得します。
properties_validation_utils.js¶
ファイル名 ディレクトリ properties_validation_utils.js <%WAR%>/WEB-INF/jssp/product/src/forma/common/util
関数
各画面アイテムでのプロパティ項目は、ここに記述されている関数を使用して入力チェックを行っています。主なチェック関数名と対象プロパティは以下のとおりです。
チェック関数名 対象プロパティ itemViewNames アイテム名チェック labelName ラベル名チェック inputId フィールド識別ID チェック labelSize ラベル幅チェック itemViewType アイテム表示タイプチェック inputViewNames フィールド識別名チェック inputFieldSize 入力フィールド横幅チェック valueLength 最小・最大入力文字数チェック numberValue 最小・最大入力値チェック styles アイテムの表示スタイルチェック
client_validation_utils.js¶
ファイル名 ディレクトリ client_validation_utils.js <%WAR%>/WEB-INF/jssp/product/src/forma/common/util
関数
各画面アイテムでのチェック項目は、ここに記述されている関数を使用して入力チェックを行っています。主なチェック関数名は以下のとおりです。
チェック関数名 対象プロパティ required 必須入力チェック selectRequired 必須選択チェック minLength 最小文字数チェック maxLength 最大文字数チェック onlyAscii 英数字のみチェック onlyNumber 数値のみチェック minusNumber 負数チェック numberSize 数値のサイズ(最小・最大値)チェック decimalSize 小数部桁数チェック dateFormat 日付形式チェック fileAmount 添付ファイルの個数チェック
const_utils.js¶
ファイル名 ディレクトリ const_utils.js <%WAR%>/WEB-INF/jssp/product/src/forma/common/util
定数
imfrConstUtils.prototype.dataTypeString
登録データ形式(文字列)の画面アイテムプロパティ設定値が定義されています。imfrConstUtils.prototype.dataTypeNumber
登録データ形式(数値)の画面アイテムプロパティ設定値が定義されています。imfrConstUtils.prototype.dataTypeDate
登録データ形式(日付)の画面アイテムプロパティ設定値が定義されています。imfrConstUtils.prototype.dataTypeTimestamp
登録データ形式(タイムスタンプ)の画面アイテムプロパティ設定値が定義されています。imfrConstUtils.prototype.viewType
表示タイプの画面アイテムプロパティ設定値が定義されています。imfrConstUtils.prototype.appType
アプリケーションタイプが定義されています。画面アイテム内でアプリケーションタイプを判定する必要がある場合に使用します。imfrConstUtils.prototype.dateFormats
設定ファイルで定義されている、日付形式を配列で取得します。コラム
既存プログラムにおいて、「items_library」利用している場合、プログラムの置き換えが必要です。手順は以下のとおりです。
- 既存のプロジェクトで「LIBRARY」「BIS_LIBRARY」で検索し、該当箇所が修正対象です。
API側
- LIBRARY.validation.client.xxxxx の処理を client_validation_utils.js に移植します。
- LIBRARY.validation.properties.xxxxx の処理を properties_validation_utils.js に移植します。
- LIBRARY.xxxx.xxxx の定数を const_utils.js に移植します。
API利用箇所
アイテム実行時入力チェック関数の呼び出し箇所の修正
LIBRARY.validation.client.xxxxx()→ Procedure.imfr_client_validation_utils.xxxxx(.....,data.imfr_full_check) に変更します。⇒ data.imfr_full_check を引数の最後に追加してください。LIBRARY.validation.client.fullCheck = xxxxx; を削除します。
アイテムプロパティ設定時入力チェック関数の呼び出し箇所の修正
LIBRARY.validation.properties.xxxxx()→ Procedure.imfr_properties_validation_utils.xxxxx() に変更します。LIBRARY.validation.properties.itemViewType を削除します。
定数の呼び出し箇所の修正
LIBRARY.xxxx.xxx定数に置き替えられたもの ⇒ Procedure.imfr_const_utils.xxxxProcedure.imfr_const_utils.dataTypeString Procedure.imfr_const_utils.dataTypeNumber Procedure.imfr_const_utils.dataTypeDate Procedure.imfr_const_utils.dataTypeTimestamp Procedure.imfr_const_utils.itemViewType Procedure.imfr_const_utils.inputValidator Procedure.imfr_const_utils.displayStyles Procedure.imfr_const_utils.inputItemType Procedure.imfr_const_utils.today Procedure.imfr_const_utils.appType Procedure.imfr_const_utils.todayOfAcount Procedure.imfr_const_utils.dateFormats関数に置き替えられたもの ⇒ Procedure.imfr_const_utils.xxxx()Procedure.imfr_const_utils.dataTypeLabels() Procedure.imfr_const_utils.tableItems() Procedure.imfr_const_utils.itemsDataType() Procedure.imfr_const_utils.viewTypeTable(appType) Procedure.imfr_const_utils.selectDateFormats() Procedure.imfr_const_utils.accountDateFormat() Procedure.imfr_const_utils.calendarMonthFull() Procedure.imfr_const_utils.calendarMonthShort() Procedure.imfr_const_utils.calendarDayNameFull() Procedure.imfr_const_utils.calendarDayNameShort() Procedure.imfr_const_utils.calendarDayNameMin()全般な修正
ライブラリのロード処理を削除します。→ load(‘forma/designer/types/items_library’)
8.1.2. クライアントサイド共通ライブラリ・ファイル¶
itemObject.js¶
ファイル名 ディレクトリ 概要 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¶
ファイル名 ディレクトリ 概要 jquery.formEditor.js <%WEB_PATH%>/forma/csjs 「フォーム・デザイナ」画面用 CSJS ファイルです。画面アイテムでも利用可能なユーティリティ関数が存在します。
forma.current 変数
現在選択(編集)中画面アイテムの、プレビューdiv のelement と、画面アイテムタイプが保存されています。forma.getComponent 関数
forma.current 変数を引数として与えると、現在選択(編集)中画面アイテムの、データ構造を返却します。データ構造が存在しない場合は null を返却します。forma.getComponentById 関数
アイテム ID から、画面アイテムのデータ構造を返却します。データ構造が存在しない場合は null を返却します。
8.2. 画面アイテム構成ファイル¶
8.2.1. サーバサイド・ファイル¶
type (js)¶
ファイル名 ディレクトリ 概要 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)¶
ファイル名 ディレクトリ 概要 preview (.html/.js) forma/designer/types/画面アイテムタイプ 「フォーム・デザイナ」画面上で表示される、編集中フォームの画面アイテムプレビューと、画面アイテムプレビューの定義を記述します。formaItems.addItemPreviewDef 関数をここで記述することにより、初めてプレビューが表示された時に、画面アイテム別基本データ構造の初期化が行われます。また、画面アイテムプレビューの初期化処理を記述することによって、プロパティで変更された値のプレビューへの即時反映(画面アイテムプロパティ値変更リスナー)や、「フォーム・デザイナ」画面の表示ロケール変更時のプレビュー表示ロケール変更(ロケール変更リスナー)などが行えます。
formaItems.addItemPreviewDef 関数
preview.html で必ず記述する必要があります。関数の詳細は、クライアントサイド共通ファイルのitemObjectを参照してください。画面アイテム「文字列」の場合、関数の処理は以下のとおりです。
- 画面初期値を表示する処理
- プロパティ画面によるデータ変更時の処理
- ロケール変更時に、指定したロケールに対応する処理
properties (html/js)¶
ファイル名 ディレクトリ 概要 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>上記が基本的な形式です。id 属性値やCSS クラス名は固定ですので、上記のとおりに記述してください。id=imfr_item_prop_error_mes のdiv は入力エラーメッセージの表示エリアです。プロパティ入力チェックが行われた後、エラーがある場合は自動的にここにメッセージが表示されます。id= imfr_item_help のdiv は、アイテムプロパティヘルプを表示するためのエリアです。ヘルプ内容は別ファイルへ記述しますので、この部分に直接ヘルプ内容を書かないでください。プロパティの値が変更された時に値を設定する関数は必ずcomponent.set 関数を使用してください。画面アイテム「文字列」の場合、関数の処理は以下のとおりです。
- プロパティの画面による各データ変更時の値設定処理(component.set)
- 指定ロケールのデータ設定処理
input (html/js)¶
ファイル名 ディレクトリ 概要 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)¶
ファイル名 ディレクトリ 概要 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
ユーザが入力したデータを表示するための項目、および、他画面アイテムから値を利用するための、非表示項目を記述します。
8.2.2. クライアントサイド・ファイル¶
%画面アイテムタイプ% (js)¶
ファイル名 ディレクトリ 概要 %画面アイテムタイプ%.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に3つの入力フィールド情報を格納していて、フィールド一覧の表示対象にするのは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);
8.3. 画面アイテムプロパティ共通タグライブラリ¶
画面アイテムプロパティ共通の入力フィールドには以下の表示用タグライブラリが用意されています。また、画面アイテムプロパティ画面を構築する上で以下の便利なタグライブラリが用意されています。
8.3.1. 表示タイプ(imart type=’formaPropViewType’)¶
アイテムプロパティ「表示タイプ」の入力フィールドを表示する部分に、下記のタグライブラリを記述します。<imart type=’formaPropViewType’ item_view_type=XXXX/>item_view_type 属性にはimfrConstUtils.prototype.itemViewType で定義された「表示タイプ」の種別を指定します。
表示タイプの種別 説明 例 imfrConstUtils.prototype.itemViewType.VI_VR_IV 入力系アイテム(表示[input]、表示[reference]、非表示を選択) 文字列、数値、日付などimfrConstUtils.prototype.itemViewType.VR_IV 表示系アイテム(表示[reference]・非表示を選択) 見出し、各種ボタン、横線などimfrConstUtils.prototype.itemViewType.VI_IV 特殊な入力系アイテム(表示[input]・非表示を選択)隠しパラメータ
imfrConstUtils.prototype.itemViewType. VI_VR_IV を指定した場合の表示例
imfrConstUtils.prototype.itemViewType.VR_IV またはimfrConstUtils.prototype.itemViewType.VI_IV を指定した場合の表示例
実装例
properties.jsvar $propData = {}; function init(arg){ $propData.itemViewType = Procedure.imfr_const_utils.itemViewType.VI_VR_IV; }properties.html<imart type="formaPropViewType" item_view_type=$propData.itemViewType/>
8.3.2. アイテムサイズ・配置(imart type=’ formaPropPlacement’)¶
8.3.3. 入力チェック(imart type=’ formaInputValidation’)¶
画面アイテムプロパティ「入力チェック」の入力フィールドを表示する部分に、下記のタグライブラリを記述します。inputListIdx 属性には、入力フィールドリストinput_list 配列の何番目かを指定します。validators 属性には、properties.js で必要なチェック項目をconst_utils.js から取得して渡します。
実装例
properties.js$propData.inputValidateArgs = [ Procedure.imfr_client_validation_utils.required, // 必須チェック Procedure.imfr_client_validation_utils.onlyAscii, // 英数字のみ Procedure.imfr_client_validation_utils.minLength, // 最小入力文字数(文字列の場合)、最小入力値(数値の場合) Procedure.imfr_client_validation_utils.maxLength, // 最大入力文字数(文字列の場合)、最大入力値(数値の場合) Procedure.imfr_client_validation_utils.permitMinus, // 負数入力許可 Procedure.imfr_client_validation_utils.permitDecimal,// 小数入力許可 Procedure.imfr_client_validation_utils.decimalSize // 小数部最大入力桁数 ];const_utils.js には、下記のように記述されています。const_utils.jsinputValidator [ required : {key: FRItems.PROP_REQUIRED}, onlyAscii : {key: FRItems.PROP_ONLY_ASCII} , maxLength: {key: FRItems.PROP_MAX_LENGTH}, minLength: {key: FRItems.PROP_MIN_LENGTH}, permitMinus: {key: FRItems.PROP_PERMIT_MINUS}, permitDecimal: {key: FRItems.PROP_PERMIT_DECIMAL}, decimalSize: {key: FRItems.PROP_DECIMAL_SIZE} ];タグの内容は下記のファイルに記述されています。<%WAR%>/WEB-INF/jssp/product/src/forma/designer/types/common/parts/input_validation.js/html画面アイテム配置時の入力チェック項目の初期値の設定はクライアントサイドファイルの%画面アイテムタイプ% (js)から取得します。
関数アイテムの実装例
func.jsinput_properties : { ... required : false, min_length : '', max_length : 9999999999, only_ascii : false, permit_minus : false, permit_decimal : false, decimal_size : 0, ... }複数のデータ型や、複数の列タイプに対応している画面アイテムの場合、データ型や列タイプが変更された時の入力チェック部品の項目値を初期化するため、各画面アイテムのproperties.html でデータ型や列タイプの変更時に共通の関数”changeDatatype(index)” を呼びます。
画面アイテム「関数」のプロパティ画面でデータ型が変更されるタイミングの例
画面アイテム「明細テーブル」のプロパティ画面で「明細テーブル」の列タイプが変更されるタイミングの例
また、入力チェック部品の項目を変更する処理を.changeInput( index , value )関数を呼び出して行います。
画面アイテム「明細テーブル」のプロパティ画面で表示内容が変更されるタイミングの例(対象列の設定ボタンクリック時)
validators 属性で指定した項目の入力チェック処理は、type.js で実装する必要があります。
最小入力文字数と最大入力文字数の入力チェックを使用する場合
/** 最小入力文字数 */ result = Procedure.imfr_properties_validation_utils.valueLength( setting, serverFlg, 'min_length' ); if( result.error ){ if( serverFlg ){ return result; }else{ errorArray.push( result ); } } /** 最大入力文字数 */ result = Procedure.imfr_properties_validation_utils.valueLength( setting, serverFlg, 'max_length' ); if( result.error ){ if( serverFlg ){ return result; }else{ errorArray.push( result ); } } /** 最小・最大文字数の整合性チェック */ result = Procedure.imfr_properties_validation_utils.lengthIntegrity( setting, serverFlg ); if( result.error ){ if( serverFlg ){ return result; }else{ errorArray.push( result ); } }以上が入力チェック部品の実装方法です。入力チェック部品で使用される主な関数は下記の通りです。
FormaItemObject.changeDatatype( index )
入力チェック部品の項目の値を初期化する関数です。データ型や列の画面アイテム「明細テーブル」で列の入力タイプが変更されるタイミングで利用します。引数のindex は、対象オブジェクトのinput_list 配列の何番目かを指定します。changeDatatype 関数を利用すると、値を必ず初期化するため、関数を記述する位置に注意が必要です。itemObject のinput_list に保持する入力項目の中からフィールド一覧に表示対象となる入力項目リストを返却します。
画面アイテム「関数」のproperties.html でchangeDatatype 関数を利用する場合の実装例
expressionDataType.change(function(){ var oldDataType = component.input_list[0].input_data_type; var newDataType = $(this).val(); …; if(oldDataType != newDataType){ component.changeDatatype(0); } … }).val(component.input_list[0].input_data_type).change();
FormaItemObject.changeInput( index , value )
入力チェック部品の項目を変更する関数です。後述のaddInputListener で登録されたリスナー関数を順次呼び出します。各画面アイテム特有の処理も同時に実行可能です。第一引数の index は、対象オブジェクトのinput_list 配列の何番目かを指定します。第二引数のvalue を指定した場合は、addInputListener に追加したリスナー関数の呼び出し時に第二引数として渡されるので、画面アイテムが独自の処理で扱う引数として使用できます。FormaItemObject.addInputListener( listener )
changeInput メソッドが呼び出されたときに実行されるリスナー関数を設定します。登録した関数の呼び出し時には、第一引数にchangeInput メソッド呼び出し時に指定したindex の入力フィールドオブジェクトが渡されます。changeInput メソッド呼び出し時にvalue を指定した場合には、第二引数にvalue が渡されます。入力チェック部品を組み込むと入力チェック項目と、その値を画面に反映させるリスナー関数が自動的に登録されます。入力チェック項目ではない項目の表示の切り替え等、画面アイテム特有の処理を行いたい場合にはリスナー関数を追加することが可能です。入力チェック部品のリスナーの内容は、下記に記述されています。<%WAR%>/WEB-INF/jssp/product/src/forma/designer/types/common/parts/input_validation.html
8.3.4. 連結リストボックス(imart type=’ formaDisplayItemSelector’)¶
下記のタグライブラリを利用することで、連結した2 つのリストボックスを画面アイテムプロパティに表示させることができます。<imart type="formaDisplayItemSelector" displayListId=XXXX undisplayListId=XXXX displayListName=XXXX undisplayListName= XXXX />displayListId 属性、undisplayListId 属性にはそれぞれリストボックスの上部に表示させるタイトル用のメッセージキーを指定します。指定しない場合は、以下のデフォルトのメッセージキーが設定されます。
- displayListId 属性 : imfr.item.common.prop.displayItems
- undisplayListId 属性 : imfr.item.common.prop.undisplayItems
displayListName 属性、undisplayListName 属性にはそれぞれ、生成されるリストボックスのname 属性に設定したい文字列を指定します。指定しない場合は以下のデフォルト値が設定されます。
- displayListName 属性 : displayList
- undisplayListName 属性 : undisplayList
また、リストボックスの内容についてはproperties.html のJavascript で適宜option タグを挿入してください。option タグを挿入する処理については、このタグを利用した画面アイテム「ユーザ選択」のソースを参考にしてください。
実装例
properties.html<imart type="formaDisplayItemSelector" displayListId="imfr.item.userselect.label_page.displayItems"表示例