Page History

Servoy offers a layered mechanism of styling the UI of solutions, with the options slightly differing for Smart Clients and Web Clients. 

Smart Client: Java Swing Look And Feel > Look And Feel Theme (optional, depending on the used Look And Feel) > Styling within the Solution

Web Client: Default StyleSheet > Web Client Template modification > Styling within the Solution

This chapter descibes the various level of Styling options for a solution in Servoy. First the smart and Web client specific Styling options will be discussed, after which Styling options within the Solution are discussed, that are applicable to both Clients. 

Smart Client specific styling options

Servoy Smart Clients are Java Swing applications and Java Swing has the concepts of Look And Feels (LAFs) that can be applied on all Swing components.

...

There are many third party Look And Feels around for Java, both free/open source LAFs and commercial LAFs. The quality of these LAFs differs, so when opting to use a third party LAF, make sure to properly test the LAF in combination with the developed Solution in Servoy. A public listing of the majority of the available third party LAFs can be found on http://www.javootoo.com/

 Servoy partners with Centigrade, a company that provides User interface Design services and products, one of the products being a customizable Look and Feel that is fully compatible with Servoy. For more information, see the Centigrade website

...

Access to the Preference panel by the user can be removed using the window plugin , that allows to remove the Preference menuitem in the Edit menu

Web Client specific styling options

Web Client

...

OS/Browser Level

Smart Client Look and Feel with optional Themes, depending on the Look and Feel

Servoy StyleSheets within the solution

Object properties

OS level >>

>> SC: LAF > CSS > Property > Scripting

...

Default StyleSheet

The default styling of Forms and Element in the Web Client is determined by a default stylesheets that can be customized. See Customizing the Web Client for more info.

Web Client Template modification

Each Form created in Servoy Developer results in a customizable HTML and CSS template which are at runtime utilized to create the HTML markup of the Web Client. See Customizing the Web Client for more info on template customization.

Solution Styling options

Within a Solution, regardless of whether the Solution will run in a Smart or Web Client, Servoy provides 2 layers of designtime styling options and 2 layers of runtime dynamic styling options

Designtime styling options

The two levels of designtime styling options are StyleSheets and designtime properties of all the UI components

StyleSheets

Servoy provides the ability to separate the Styling from the Solution's code through CSS StyleSheets. These StyleSheets can be created and managed inside the Servoy Developer IDE (Solution Explorer > Resources > Styles).

A StyleSheet is linked to a Form using the Form's 'styleName' property. 

The StyleSheet can define default styling for each UI objects within Servoy (Forms and Elements) and provide any number of additional StyleClasses for each UI object. These additional StyleClasses can be set on individual UI objects through their 'styleClass' property.

In addition to providing styling for specific UI objects, the StyleSheet can also provide odd/even/selected for the rows in the grids of forms in TableView and Portals. 

When creating a new StyleSheet in Servoy Developer, the "New StyleSheet wizard" provides a option to insert a StyleSheet sample in the newly created StyleSheet. This sample provides a good overview of the available options.

The CSS Editor in Servoy Developer provides full code completion for the supported CSS properties and their values. 

For an overview of the supported CSS properties, see Supported CSS style properties

Designtime properties 

While the StyleSheet support provides generic styling options, with the option to differentiate on individual UI objects through additional StyleClasses, all the UI objects also support several styling related properties, like borderType, background anf fontType for example.

As long as these properties are set to default the styling of the element will be according to the applicable StyleSheet and StyleClasses. When specifying a a custom value for the property, it overrides the Styling inherited through the StyleSheet.

Runtime dynamic styling options 

Servoy StyleSheets > Object Properties > Runtime Scripting > onRender event

Supported CSS

Web Client Templating

...

Java Look And Feel's (LAFS)

...

3rd Party LAFS

...

Explain the options:

- Platform is the highest level

- WC: browser > Default Web Client StyleSheet, SC: LAF > Theme

- Servoy StyleSheets

- Element Properties

- Runtime settings

Special Web Client:

- WEBDAV templates

...

- Hacking UI properties: http://www.servoycamp.com/topics/tips/117-tuning-your-servoy-look-a-feel.html