Web Page - ThemeBackground Property

Application theme background

Member of Web Page (PRIM_WEB)

Data Type - Enumeration

Details

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.

Allowed Values

Enum ValueDescription
DarkDark background and light text
LightLight background and dark text

Example

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

See also

All Component Classes

Technical Reference

Febuary 18 V14SP2