Themed background for Material Design themed applications |
Member of Panel (PRIM_PANL)
Data Type - Enumeration
The ThemeBackground property is used to change the background of the application from white to dark gray.
As this is a built in feature, other facets of the styling are automatically changed to suit the background color. For example, the default text color will change from dark to light and drop shadows for controls such as Action Button will no be removed.
By default, child composite controls such as panel will have a ThemeBackground set to Parent so that a change to the page will be reflected throughout the application.
Enum Value | Description |
|---|---|
Dark | Dark background and light text |
Light | Light background and dark text |
Parent | Use the ThemeBackground of the parent control |
In this example, two buttons are used to display the alerts.
Both are attached to the bottom of the screen, flowing up so that they don't overlay each other.
Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME) Height(585) Width(697) LayoutManager(#Layout)
Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListRow1) DisplayPosition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListColumn1) DisplayPosition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListRow1) Manage(#ListIcon) MarginLeft(8) Parent(#LayoutList) Row(#LayoutListColumn1) Sizing(None)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem2) Alignment(CenterLeft) Column(#LayoutListRow1) Manage(#ListPrimaryText) MarginLeft(68) MarginRight(16) Parent(#LayoutList) Row(#LayoutListColumn1) Sizing(ContentHeightFitToWidth)
Define_Com Class(#PRIM_TBLO) Name(#Layout)
Define_Com Class(#PRIM_TBLO.Column) Name(#Column1) DisplayPosition(1) Parent(#Layout)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) DisplayPosition(1) Parent(#Layout) Height(0.21)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row2) DisplayPosition(2) Parent(#Layout) Height(1.79)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout2Item1) Alignment(CenterLeft) Column(#Column1) Manage(#ToggleBackGround) Parent(#Layout) Row(#Row1) Sizing(None) MarginLeft(8)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout2Item2) Column(#Column1) Manage(#List) Parent(#Layout) Row(#Row2)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#ToggleBackGround) DisplayPosition(2) Left(8) Parent(#COM_OWNER) TabPosition(1) ThemeDrawStyle('MediumTitle') Top(13) Caption('DARK')
Define_Com Class(#PRIM_MD.List) Name(#List) DisplayPosition(1) LayoutManager(#LayoutList) Left(0) Parent(#COM_OWNER) RowHeight(48) TabPosition(2) TabStop(False) ThemeDrawStyle('Card') Top(62) Height(523) Width(697)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListIcon) DisplayPosition(3) Height(32) Icon('image') IconAlignment(Center) IconImageSizing(Cropped) Left(8) Parent(#List) TabPosition(3) TabStop(False) ThemeDrawStyle('ForegroundMediumPrimary') Top(8) Width(32)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') DisplayPosition(4) Height(19) Left(68) Parent(#List) TabPosition(4) TabStop(False) ThemeDrawStyle('Heading3') Top(15) Width(611)
Evtroutine Handling(#Com_owner.CreateInstance)
Inz_List Named(#List) Num_Entrys(10)
Endroutine
Evtroutine Handling(#ToggleBackGround.Click)
If (#Com_owner.ThemeBackground = Dark)
#Com_owner.ThemeBackground := Light
#ToggleBackGround.Caption := Dark
Else
#Com_owner.ThemeBackground := Dark
#ToggleBackGround.Caption := Light
Endif
Endroutine
End_Com