5.1.1 Getting Started with System Themes

At the simplest level System Themes allow you to quickly change the color scheme used by your Web Page without needing to spend time creating your own theme.

When you create a Web Page the following skeleton code is generated:

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)

 

Evtroutine Handling(#Com_owner.Initialize)

Endroutine

 

End_Com

 

If you look at the properties in the details tab associated with Begin_Com you will see the default value for Theme is set as MaterialDesignBlue, indicating that the system theme MaterialDesignBlue will be applied as this is the default system theme.

Alternatively, you can select a different System Theme from the dropdown list or you can prompt to select a User Defined Theme.

Note: Most of the colors listed with a year are used with Forms – not with web pages. In the source code, you will see a message if you select a color that isn't suitable for the web.

Let's say you have coded something like this (two buttons have been added so there is something visual on the page):

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<2015DeepOrange>)

 

Define_Com Class(#PRIM_PHBN) Name(#Button1) Caption('Button1') DisplayPosition(2) Left(32) Parent(#COM_OWNER) TabPosition(2) Top(48) Height(87) Width(218)

Define_Com Class(#PRIM_PHBN) Name(#Button2) Caption('Button2') DisplayPosition(1) Left(32) Parent(#COM_OWNER) TabPosition(1) Top(160) Height(87) Width(218)

 

Evtroutine Handling(#Com_owner.Initialize)

Endroutine

 

End_Com

 

Notice in the code that you now have 2015DeepOrange theme as your style. The buttons only show the style when they have focus, so tab around to move the focus to the buttons:

If you compile and run your Web Page in a browser, you will see the newly assigned theme in action:

Reusable parts adopt their theme from the context in which they are used. That is at runtime they will inherit any theme settings from the Web Page, in this case, on which they are used.

For more information on Themes, refer to Themes in the Visual LANSA Developer's Guide.