Design

Design (PRIM_DESN.Design)

Design Class used to provide different layouts and appearance for different device sizes

Details

Designs are used to control the appearance of an application as it resizes.
 
Layout Managers can be used to ensure controls size correctly, but additional functionality is required to allow for changes to layout flow and control styles.
 
For example, a page that might be shown as two sides, left and right when on a large screen, but may appear as top and bottom on a mobile.
 
A design is implemented when the Width of the container reaches its threshhold.  The DesignChanged event is fired to indicate that a new Design is being activated. DesignChanged will also fire on every reusable part, providing an opportunity for code to be executed to adjust the appearance.
 
All Designs are independent and should not rely on other designs to set aspects of their appearance.

Example

This example shows a simple responsive design with labels changing size as the screen resizes.
 
The mobile design is implemented when the width is 320 pixels. The font size is then changed and a new layout applied to the page.

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(360) Width(737) Layoutmanager(#LayoutMobile) Style(#ApplicationStyle) Designmanager(#Designs)
   Define_Com Class(#PRIM_VS.Style) Name(#ApplicationStyle) Fontsize(36)
 
   Define_Com Class(#PRIM_VS.Style) Name(#Style2) Backgroundbrush(#Brush1)
   Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(219:244:255)
 
   Define_Com Class(#PRIM_VS.Style) Name(#Style3) Backgroundbrush(#Brush2)
   Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush2) Color(232:255:210)
 
   Define_Com Class(#PRIM_DESN) Name(#Designs)
   Define_Com Class(#PRIM_DESN.Design) Name(#Mobile) Designmanager(#Designs) Width(320)
 
   Define_Com Class(#PRIM_TBLO) Name(#LayoutWide)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column1) Displayposition(1) Parent(#LayoutWide)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column2) Displayposition(2) Parent(#LayoutWide)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) Displayposition(1) Parent(#LayoutWide)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Alignment(TopLeft) Column(#Column1) Flow(Down) Manage(#Height) Parent(#LayoutWide) Row(#Row1)
   Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Alignment(TopLeft) Column(#Column2) Flow(Down) Manage(#Width) Parent(#LayoutWide) Row(#Row1)
 
   Define_Com Class(#PRIM_TBLO) Name(#LayoutMobile)
   Define_Com Class(#PRIM_TBLO.Column) Name(#Column3) Displayposition(1) Parent(#LayoutMobile)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) Displayposition(1) Parent(#LayoutMobile)
   Define_Com Class(#PRIM_TBLO.Row) Name(#Row3) Displayposition(2) Parent(#LayoutMobile)
   Define_Com Class(#PRIM_TBLO.Item) Name(#HeightItem1) Column(#Column3) Manage(#Height) Parent(#LayoutMobile) Row(#Row2)
   Define_Com Class(#PRIM_TBLO.Item) Name(#WidthItem1) Column(#Column3) Manage(#Width) Parent(#LayoutMobile) Row(#Row3)
 
   Define_Com Class(#PRIM_LABL) Name(#Height) Caption('Height') Displayposition(1) Ellipses(Word) Height(180) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Verticalalignment(Center) Width(737) Alignment(Center) Style(#Style2)
   Define_Com Class(#PRIM_LABL) Name(#Width) Caption('Width') Displayposition(2) Ellipses(Word) Height(180) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(180) Verticalalignment(Center) Width(737) Alignment(Center) Style(#Style3)
 
   Evtroutine Handling(#Com_owner.DesignChanged) Design(#Design)
 
      If (#Design *IsEqualTo #Mobile)
 
         #Com_owner.LayoutManager <= #LayoutMobile
         #ApplicationStyle.FontSize := 22
 
      Endif
 
      If (#Design *Is *null)
 
         #Com_owner.LayoutManager <= #LayoutWide
         #ApplicationStyle.FontSize := 36
 
      Endif
 
   Endroutine
 
   Evtroutine Handling(#Com_owner.SizeChanged)
 
      #Height := "Height " + #Com_owner.Height.asstring
      #Width := "Width " + #Com_owner.Width.asstring
 
   Endroutine
 
End_Com

Properties

Name	Description
ComponentClassName	ComponentClassName is the name of the component's class. Inherited from Object (PRIM_OBJT)
ComponentMembers	ComponentMembers provides access to all the member components of this component Inherited from Object (PRIM_OBJT)
ComponentPatternName	ComponentPatternName is used to qualify the class of the component. Inherited from Object (PRIM_OBJT)
ComponentTag	Generic space allowing a value to be stored for the instance Inherited from Object (PRIM_OBJT)
ComponentType	ComponentType gives you access to the type information about the component Inherited from Object (PRIM_OBJT)
ComponentTypeName	ComponentTypeName is the fully qualified name of the component's class. Inherited from Object (PRIM_OBJT)
DesignManager	Reference to a Design Manager
Name	Name identifies the component Inherited from Object (PRIM_OBJT)
Owner	Owner owns this component Inherited from Object (PRIM_OBJT)
Parent	The component instance to which this instance is attached. The visual container for a control or the collector of a set of child instances Inherited from Object (PRIM_OBJT)
Width	Width at which this design will be applied

Events

Name	Description
CreateInstance	CreateInstance is signalled when an instance of a component is created Inherited from Design (PRIM_DESN.Design)
DestroyInstance	DestroyInstance is signalled when an instance of a component is about to be destroyed Inherited from Design (PRIM_DESN.Design)

Details

Example

Properties

Events

See also