How to use Styles

Styles and cascading stylesheets are completely new to most VFP developers as a means to enhance their average windows application. We are pretty used to OOP and inheritance but the use of CSS (Cascading Style Sheets) offers a whole new dimension and very flexible possibilities to seperate look and feel from layout.

Servoy actually supports three ways to change the style (appearance) of a solution:

Look And Feel (LAF)
Skins
Servoy styles

Look And Feel (LAF)

This feature allows your client to change the default Look And Feel of the application comparable to the way you can change the default look and feel of your OS. The client can change this by choosing a look and feel from the preferences menu. You can even create your own look and feel schema. If you want to do this then you will find more information in the User Guide.

Default LAF

Metal LAF

Nimbus LAF

Skins

A Skin is basically a zipfile with elements to enhance the graphical user interface (GUI) very similar to the way Look And Feel styles are applied.There are also out-of-the-box third-party styles that you can buy. I saw an impressive presentation by Centigrade at Servoy World 2011 of their interface enhancement products. For a lot of endusers an application is only as good as it looks...

Servoy styles

A Servoy style is an HTML cascading style sheet (CSS) - a textfile containing style definitions. You can share styles between solutions, apply styles to one or more forms or apply styles to one or more form elements.

In the samples a solution has been included to demonstrate styles. To see the effect of styles do the following:

Activate the servoy_sample_styles solution
Start the smart-client or the web-client
Change the style to see the effect

Style svy_Autumn

Style svy_Charcoal

Style svy_Wheat

For those of you who are unfamiliar with cascading style sheets (CSS), see the example below. A cascading style sheet consists of a textfile with an HTML markup-language that describes what style to use on user-interface elements of a certain type.

By default the styles are located in the servoy_localhost_resources folder of the servoy_workspace folder. When you look inside the svy_Autumn.css file you will see blocks of code where each block contains markup code for a specific object such as label, button, form, tabpanel, field, field.border, field.noborder etc.
While these design features are applied by default they can be overridden at the form or element level.