Page History
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 Using a Web Page Template for examples on how to implement designs for effective Responsive Design.