Design (PRIM_DESN.Design)
Design Class used to provide different layouts and appearance for different device sizes
Ancestors - Object (PRIM_OBJT)
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.
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
| 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 |
| 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) |
Febuary 18 V14SP2