...
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.
Stoc |
---|
...
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.
Servoy supports using Java Swing Look and Feels out of the box.
...
Java Swing Look and Feels come in two variaties:
...
Some LAFs support multiple themes.
...
...
Besides the LAFs that are shipped with Java itself, additional third party LAFs can be added to Servoy, by placing the LAF library in the {servoyInstall}/application_server/lafs directory.
...
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/
...
...
Creating custom Look and Feels requires detailed Java knowledge and is in general a lot of work.
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
...
...
The Smart Client Settings on the Servoy Application Server allow the configuration of the default LAF for all Smart Clients, through the 'selectedlnf' property. This property needs to be set to the className of the Look And Feel class. When the classNAme is unknown, it can be retrieved by calling the following function in a Smart Client, after manually selecting the LAF in the Smart Client Preferences:
...
If the LAF supports themes, the default theme to use can be specified through the 'lnf.theme' setting.
...
...
Through the Preference panel in the Smart Client, users can select the Look and Feel of their liking. The Preference panel is accessible through Edit > Preferences > Look and Feel.
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
...
The default styling of Forms and Element in the Web Client is determined by a default stylesheet that can be customized. See Customizing the The Web Client for more info.
...
Code Block |
---|
<div servoy:id="sv__82335AC7_C903_46F1_8F36_9B44AA4615E3_wrapper" id="sv____82335AC7__C903__46F1__8F36__9B44AA4615E311_wrapper" class="fieldStyleClass" style="position:absolute;height:16px;min-width:130px;width:130px;left:150px;top:130px;"> <input servoy:id="sv__82335AC7_C903_46F1_8F36_9B44AA4615E3" name="10" class="field" type="text" value="3" id="sv____82335AC7__C903__46F1__8F36__9B44AA4615E311" autocomplete="off" onkeydown="onKeyDownConsumeEnter(event, '?x=u1ooTww5c8GP17GlZDvgUmxY17mD3BWf5ccGjoUMzTveUu0Mi2G1wRitV1MI28ok', 'sv____82335AC7__C903__46F1__8F36__9B44AA4615E311')" onkeypress="return Servoy.Validation.numbersonly(event,false,'.',',','$','%',this,-1);" style="margin:0px;" tabindex="4" onblur="postEventCallback(this,'blur','?x=JZec7WTy2t8cdQ*ePrREbjfGUSFMI- ZQ8HNJMnJl7JuYaifcsWmWShVmxcd1w*8w',event,false)"> </div> |
...
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 The Web Client for more info on template customization.
...
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
...
The two levels of designtime styling options are StyleSheets and designtime properties of all the UI components
...
When this code gets executed, any Form that was designed to use the StyleSheet 'baseStyle' will instead start using the 'customerXStyle'. Note that this will only take effect on Forms that are loaded after performing the switch.
...
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.
...
At runtime there are 2 levels of dynamically changing styling:
...
Each UI component provides a scripting API and that API provides methods to alter the appearance of the UI component dynamically at runtime.
For a complete overview of the runtime API of all UI components see RuntimeForm for Form instances and the childnodes of elements for all the different Element types
...
The onRender event on Forms and Elements provides a way to conditionally change the appearance of the UI component.
...