[ |../../index.htm#lansa/vlwebeng01_0515.htm]
現在地:

4.3.2 デザイン

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