7.2. 基本（ スマートフォン版 画面アイテムの開発 ）¶

画面種別の取得方法¶

実行中の画面種別は、以下の方法で取得可能です。

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>
/>

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);

type.js¶