7.2. 基本( スマートフォン版 画面アイテムの開発 )¶
ここでは、標準的な画面アイテム(コンテンツエリアにのみ配置するパターン)の実装方法について説明します。
7.2.1. スマートフォン版の画面アイテムを実装する¶
アプリ実行画面(入力)・アプリ実行画面(参照)・プレビュー画面の3つの画面を用意する必要があります。これらは同一のJSSPにて実装する必要があるため、実行中の画面種別を取得し、分岐した処理を記述します。
画面種別の取得方法¶
実行中の画面種別は、以下の方法で取得可能です。
実行中の画面モードの取得方法(サーバサイド)¶
入力可・参照の状態は、sp_view.js の init 関数のパラメータ imfr_sp_view_type にて取得可能です。
実行中の画面モード imfr_sp_view_type の値 アプリ実行画面(入力) input アプリ実行画面(参照) reference プレビュー表示かどうかは、sp_view.js の init 関数のパラメータ imfr_response_type にて取得可能です。
実行中の画面モード imfr_response_type の値 プレビュー画面 sp_preview
実行中の画面モードの取得方法(クライアントサイド)¶
サーバサイドで取得した imfr_sp_view_type、imfr_response_type の値をプレゼンテーション・ページにバインドして利用します。
forma.funcs.isReferenceView 関数を利用することで、指定した情報に合致するアイテムがアプリ実行画面(参照)のモードで実行されているかどうかを取得することができます。
forma.funcs.isReferenceView(id)
引数には、以下のいずれかのIDを指定します。
- アイテムID
- フィールド識別ID
- テーブル識別ID
指定したアイテムがアプリ実行画面(参照)のモードで実行されている場合、true が戻り値として返却されます。
sp_view.js¶
スマートフォン版 画面アイテムを出力するスクリプト開発モデルのファンクション・コンテナ ファイルです。
- プレゼンテーション・ページにバインドするための前処理を実装します。
- 画面種別を含む画面表示リクエストの情報が引数として取得できます。
var $viewType; var $properties; var $data; function init(args) { var component = args.setting; var data = args.data; var locale = Contexts.getAccountContext().locale; var inputProperties = component.input_list[0].input_properties; var initialValue = inputProperties.initial_value[locale]; $viewType = args.imfr_sp_view_type; $properties = { label : component.item_properties.labels[0][locale], input_id : component.input_list[0].input_id, max_length : inputProperties.max_length, data_type : component.input_list[0].input_data_type, label_class : '' }; $data = { value : initialValue }; if (typeof data[$properties.input_id] !== 'undefined') { $data.value = data[$properties.input_id]; } // 必須マークのCSSをセット if (inputProperties.required) { $properties.label_class = 'imui-smart-ui-required'; } }
注意
sp_view.html¶
スマートフォン版 画面アイテムを出力するスクリプト開発モデルのプレゼンテーション・ページ ファイルです。
- モバイルフレームワークで提供されているUIコンポーネントを利用して画面UIを実装します。
- イベント処理でセレクターを記述するための識別情報(id・name属性など)を用意します。
<label class='<imart type="string" value=$properties.label_class escapeJs="false" />'> <imart type="string" value=$properties.label escapeJs="false" /> </label> <input type="text" class="sample_item_imwMatterName" name='<imart type="string" value=$properties.input_id escapeJs="false" />' value='<imart type="string" value=$data.value escapeJs="false" />' maxlength='<imart type="string" value=$properties.max_length escapeJs="false" />' <imart type="decision" case="reference" value=$viewType escapeJs="false"> readonly="readonly" </imart> />
注意
7.2.2. イベント処理を実装する¶
入力操作などが実施された際のイベントに対する画面アイテムの振る舞いをイベント処理として記述します。入力アイテムについては、共通して実装しなければならない関数があります。
sp_%アイテムタイプ%.js¶
スマートフォン版 画面アイテムのイベント処理を記述するクライアントサイド・ファイルです。
- 入力アイテムについては、以下の関数を実装する必要があります。
- エラー表示
- エラー表示クリア
- 入力モード変換
(function ($) { if (!window.formaItems) { window.formaItems = {}; } window.formaItems.sample_item_imwMatterName = {}; // アイテム固有のイベント処理 $( document ).on( 'change', 'input.sample_item_imwMatterName' ,function(){ var pageType = $('input[name="imwPageType"]').val(); var matterName = $(this).val(); // 申請/一時保存/申請(起票案件) if( (pageType === '0')||(pageType === '1')||(pageType === '2')||(pageType === '10')||(pageType === '11')||(pageType === '12') ){ $('input[name="imwMatterName"]').val(matterName); // 再申請 }else if((pageType === '3')||(pageType === '13')){ if($('input[name="imwMatterName"]').size() === 0){ $('#form').append('<input type="hidden" name="imwMatterName" id="imwMatterName" value>'); } $('input[name="imwMatterName"]').val(matterName); if($('input[name="imwForcedParamFlag"]').size() === 0){ $('#form').append('<input type="hidden" name="imwForcedParamFlag" value>'); } $('input[name="imwForcedParamFlag"]').val('1'); } } ); /* エラー表示 */ window.formaItems.sample_item_imwMatterName.AcceptError = function (event) { $('[name="' + event.inputId + '"]').parent() .append('<div class="imui-smart-validation-error">' + event.message + '</div>'); }; /* エラー表示クリア */ window.formaItems.sample_item_imwMatterName.ClearError = function(event) { $('[name="' + event.inputId + '"]').parent().find('div.imui-smart-validation-error').remove(); }; /* 入力モード変換 */ window.formaItems.sample_item_imwMatterName.changeInputMode = function (controlSetting) { var editableFlg = (controlSetting.mode === 'valid') ? true : false; var target = $('[name="' + controlSetting.inputId + '"]'); if (editableFlg) { target.textinput('enable'); target.removeAttr('readonly'); } else { target.textinput('disable'); target.attr('readonly', true); } }; })(jQuery);
7.2.3. スマートフォン版 画面アイテムをシステムに登録する¶
type.jsの関数を実装し、スマートフォン版 画面アイテムが利用できるようにシステムに登録します。
type.js¶
スマートフォン版 画面アイテムの有効化¶
type.jsのinit関数の戻り値にて、mobileFriendlyプロパティがtrueとなるように返却することで、スマートフォン版 画面アイテムを有効にします。function init(){ return { id : 'sample_item_imwMatterName', icon : 'forma_sample_items-icon-blog-blue', title : 'MSG.I.FORMA.ITEM.MATTERNAME.TITLE', preload : false, defaultStyle: { height: '30px', width: '300px' }, // スマートフォン版対応 mobileFriendly : true }; }コラム
mobileFriendlyプロパティにreferenceOnlyをセットすることで、参照表示での利用に限定することが可能です。
- 具体的には、以下の通りに動作します。
- sp_view.jsのinit関数のパラメータ imfr_sp_view_typeの値はreferenceのみです。
- 表示タイプ「参照」として動作します。DB登録・入力チェックの対象外です。
sp_%アイテムタイプ%.js 読み込み設定¶
実装したsp_%アイテムタイプ%.jsをアプリ実行画面にて読み込むための設定を行います。type.jsのgetHeaderSettingList関数の戻り値にて、sp_%アイテムタイプ%.jsのパス情報を返却します。
- スマートフォン表示の時だけ読み込ませる場合は、clientTypeにspを設定します。
- 既存のクライアントサイド・ファイルをスマートフォン表示で読み込ませたくない場合は、clientTypeにpcを設定します。
- PC版・スマートフォン版の両方で読み込ませる場合は、clientTypeの指定は不要です。
function getHeaderSettingList() { return [ { 'type' : 'javascript', 'src' : 'forma/csjs/types/sample/item/sp/sp_%アイテムタイプ%.js', 'clientType': 'sp' } ]; }