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