WaveMaker Visual AJAX Studio 4'0 Training

1
WaveMaker Visual AJAX Studio 4.0 Training

• Styling your application

2
Styling your application

• 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 http//www.w3schools.com/

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