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

7.3. 応用( ヘッダー・フッターへ画面アイテムを配置する )

ここでは、ヘッダー・フッターに配置する画面アイテムの実装方法について説明します。
ヘッダー・フッターに配置する画面アイテムは、基本的にはボタン用途を想定しています。

7.3.1. ヘッダー・フッターのUIを実装する

コンテンツのUIを出力するsp_view (html/js)と同一のjsspにて実装します。
そのため、配置される各パターンに応じて処理を分岐して、適切な画面を出力する必要があります。

レイアウトパターンの取得方法

画面アイテムの配置場所は、サーバサイド・ファイルの init 関数のパラメータ imfr_sp_call_parts にて取得可能です。
配置場所 imfr_sp_call_parts の値
ヘッダー sp_parts_header
フッター sp_parts_footer
アクションシート footer_actionsheet

注意

各画面アイテムのレイアウトパターンは、スマートフォン設定にて決定されます。
詳細については、「 IM-FormaDesigner デザイナヘルプ 」の「 スマートフォン設定 」を参照してください。

sp_view.js

分岐するために、レイアウトパターンの情報をプレゼンテーション・ページにバインドします。
  • sp_view.js

    var $properties;
    var $spProp = {};
    
    function init(args){
    
        var component  = args.setting;
        var responseType = args.imfr_response_type;
    
        $properties = {
            item_id             : component.item_id,
            label               : component.item_properties.labels[0][ Contexts.getAccountContext().locale ],
            script              : component.item_properties.script
        };
        $spProp.callParts = ( !isBlank( args.imfr_sp_call_parts ) ) ? args.imfr_sp_call_parts : 'sp_parts_contents';
        $spProp.position  = ( !isBlank( args.imfr_sp_header_position ) ) ? args.imfr_sp_header_position : 'right';
    
        if ( 'sp_preview' === responseType ) {
            $properties.script = '';
        }
    }
    

sp_view.html

レイアウトパターンごとのUIを用意し、パターンに応じて分岐します。
  • ヘッダー

    ../../_images/header_footer_01.png
    <imart type="decision" case="sp_parts_header" value=$spProp.callParts>
      <div id='<imart type="string" value=$properties.item_id />'>
        <a href="#"
          id='eventButton_<imart type="string" value=$properties.item_id />'
          class='ui-link ui-btn-<imart type="string" value=$spProp.position escapeJs="false" />
          ui-btn ui-shadow ui-corner-all product_80_eventButton'>
            <imart type="string" value=$properties.label escapeJs="false" escapeJs="false" />
        </a>
      </div>
    </imart>
  • フッター

    ../../_images/header_footer_02.png
    <imart type="decision" case="sp_parts_footer" value=$spProp.callParts>
      <div  id='<imart type="string" value=$properties.item_id />'>
      <a href="#"
        id='eventButton_<imart type="string" value=$properties.item_id />'
        class="ui-btn ui-btn-inline imfr-sp-btn-footer product_80_eventButton">
          <span class="forma-icon-sp-footer-event-gray"></span><br/>
          <span><imart type="string" value=$properties.label escapeJs="false" escapeJs="false" /></span>
      </a>
      </div>
    </imart>
  • アクションシート

    ../../_images/header_footer_03.png
    <imart type="decision" case="footer_actionsheet" value=$spProp.callParts>
      <div  id='<imart type="string" value=$properties.item_id />'>
      <a href="#"
        id='eventButton_<imart type="string" value=$properties.item_id />'
        class="ui-btn ui-actionsheet-commandbtn product_80_eventButton">
          <imart type="string" value=$properties.label escapeJs="false" escapeJs="false" />
      </a>
      </div>
    </imart>
  • コンテンツ

    <imart type="decision" case="sp_parts_contents" value=$spProp.callParts>
      <div>
        <a href="#"
          id='eventButton_<imart type="string" value=$properties.item_id />'
          class="ui-btn ui-shadow ui-corner-all product_80_eventButton">
            <imart type="string" value=$properties.label escapeJs="false" escapeJs="false" />
        </a>
      </div>
    </imart>

7.3.2. ヘッダー・フッターへの配置を有効にする

ヘッダー・フッターへの配置を有効にします。
  • type.jsのinit関数の戻り値にて、itemKindTypeプロパティが’button’となるように返却します。

type.js

function init(){

    return {
        id           : 'product_80_eventButton',
        icon         : 'forma-icon-ui-button-arrow-007',
        title        : 'MSG.I.FORMA.ITEM.EVENTBUTTON.TITLE',
        preload      : false,
        defaultStyle : {
            height : '50px',
            width  : '170px'
        },
        eventTrigger : true,
        mobileFriendly : true,
        spSwitchPage   : false,
        // ヘッダー・フッター対応
        itemKindType   : 'button'
    };
}