Show Contents List
You are here:
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 Using a Web Page Template for examples on how to implement designs for effective Responsive Design.
Show Contents List