WaveMaker Visual AJAX Studio 4.0 Training Styling your application

2 ● What we will cover –How to use built in styles –How to use custom styles –How to use a style sheet ● What we will not cover –We will not be teaching CSS –Check out

3 Using Built-in Styles ● Each widgets has a style property ● Built-in styles make it easy to quickly make applications look professional without having to know CSS –Does not include all style elements available for a particular widget just the most common

4 Using Built-in Styles ● Select a widget ● Select the Style Property –For a given class you may choose 1 or more style options –If you choose more then 1 options where only 1 is needed the larger value takes precedent. –Example: Font Size 120percent and 200percent: font will appear 200percent –Some Classes require more then 1 option –Example: Border needs a size, style and color attribute ● Some styles are only visible if you turn off expanded and outline mode: –Example: Borders

5 Using Custom Styles ● If you know CSS and you can add custom styling to any widget ● Select the Style Property ● Open they Custom Style According Group ● Type in any valid CSS ● Click the Apply Button –If the style does not show up properly check your syntax or try running the project.

6 Maintaining Custom Styles ● When you add custom styling to a widget the CSS is added under the source tab –This makes it easy to manage all custom CSS –You can edit the CSS in either the custom styles according or under the style tab.

7 Creating custom CSS Classes ● Under the source tab you can create your own CSS Classes –Page CSS: available only to the current page –Application CSS: available to any page in the application ● On the Widgets Style properties under the built in classes type in the class name into the Custom input box –Hit the enter key and the style will take affect

8 Using Style Sheets ● To use a pre-defined Style sheet do the following –Open the style sheet in any text editor –Select the Classes you would like to use and copy them –In WaveMaker Studio from the designer click on Source then select the CSS tab –Paste the styles either in under Page CSS or Application CSS depending on your application requirements –Use the classes the same way as custom classes –For each widget that you would like to apply the style type in the class name in the style box

9 Using Firebug to help with styling ● If you want all Labels to have a certain style ● Use Firebug –Click HTML option, then click Inspect –Mouse over the element you want to style –You can see the label gets its style from the wmlabel class

10 Using Firebug to help with styling ● You can overwrite the built in class –From the Designer click Source –Select the CSS tab –By adding a class by the same name you can overwrite the default behavior –Example: The following turns the text of all label widgets red and bold

11 Questions?

12 Exercise 15 ● Copy WM40Exercise Project ● Use the Build in styles ● Apply custom styles ● Add Custom classes