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 ページ・テンプレートの利用」時に生成されたコードを参照してください。

  • No labels