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を用意し、パターンに応じて分岐します。
ヘッダー
<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>フッター
<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>アクションシート
<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' }; }