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.