Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Web Page - ThemeBackground Property

Panel
bgColor#2c3c4c

Application theme background

Member of 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 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 Value

Description

Dark

Dark background and light text

Light

Light 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

        Endroutine 

        Evtroutine Handling(#ToggleBackGround.Click)

           If (#Com_owner.ThemeBackground = Dark) 

              #Com_owner.ThemeBackground := Light
              #ToggleBackGround.Caption := Dark Else

           Else 

              #Com_owner.ThemeBackground := Dark
              #ToggleBackGround.Caption := Light Endif

           Endif 

        Endroutine

     End_Com


See also

All Component Classes

Technical Reference