SizeChanged イベントを使って、レイアウト変更の時を決定するのではなく、デザインを使って、異なる外観を実装する特定の時を提供することができます。
デザインには幅が引き渡されます。このページの幅がデザインよりも小さくなった時、アプリケーションの実行中に DesignChanged イベントが起動され、外観についての判断を下せるようになります。
- デザイン
Define_Com Class(#PRIM_DESN) Name(#DesignManager)
Define_Com Class(#PRIM_DESN.Design) Name(#MobileDesign) Designmanager(#DesignManager) Width(600)
Define_Com Class(#PRIM_DESN.Design) Name(#TabletDesign) Designmanager(#DesignManager) Width(1000)
- アプリケーション
Define_Com Class(#XKMAPP) Name(#Application) Scope(*APPLICATION)
Evtroutine Handling(#Com_owner.DesignChanged) Design(#Design)
#Application.DesignChanged( #Design )
Endroutine
関連するアプリケーション・オブジェクトは、次のように使用することで、DesignChanged イベントの処理を集中させることができます。
Mthroutine Name(DesignChanged)
Define_Map For(*input) Class(#Prim_desn.Design) Name(#Design) Pass(*By_reference)
#ActiveDesign <= #Design
If (#Design *Is *null)
#Com_Owner.ActivateDesktopView
Else
If (#Design.Name = MobileDesign)
#Com_Owner.ActivateMobileView
Else
#Com_Owner.ActivateTabletView
Endif
Endif
Endroutine
Mthroutine Name(ActivateMobileView)
Signal Event(HideContent)
#ActiveView := MOBILE
Signal Event(MobileView)
Signal Event(ShowContent)
Endroutine
Mthroutine Name(ActivateTabletView)
Signal Event(HideContent)
#ActiveView := TABLET
Signal Event(TabletView)
Signal Event(ShowContent)
Endroutine
Mthroutine Name(ActivateDesktopView)
Signal Event(HideContent)
#ActiveView := DESKTOP
Signal Event(DesktopView)
Signal Event(ShowContent)
Endroutine
効果的なリスポンシブ・デザインの実装方法の例については、「4.2 Web ページ・テンプレートの利用」時に生成されたコードを参照してください。