4.3.2 Designs

Rather than using the SizeChanged event to determine when to change the layout, Designs can be used to provide specific points at which to implement different appearances.

Designs are given a width. When the width of the page becomes less than the Design, the DesignChanged event is fired throughout the application allowing decisions to be made about the appearance.

* Designs

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)

 

* Application

Define_Com Class(#XKMAPP) Name(#Application) Scope(*APPLICATION)

 

Evtroutine Handling(#Com_owner.DesignChanged) Design(#Design)

 

#Application.DesignChanged( #Design )

 

Endroutine

 

The associated Application object can be used to centralize the processing of the DesignChanged event something like this:

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

Refer to the code generated when 4.2 Using a Web Page Template for examples on how to implement designs for effective Responsive Design.