WaveMaker Visual AJAX Studio 4.0 Training

1
WaveMaker Visual AJAX Studio 4.0 Training

• Basics Templates

2
Templates

• Templates are predefined groups of UI components
• Provide a shortcut for laying out pages
• Templates are available in the Template section
  of the Palette

3
Using Templates

• To use a template
• Drag a template from the Palette and drop it in
  the canvas
• Configure individual widgets within the template
  to get the look you want
• Bind individual widgets (buttons, forms, etc.) to
  backing data and services

4
Footer

• The Footer template contains a Panel with a Label
• To change the text in the Footer, edit the Label
  caption
• To change font styles, edit the Styles for the
  Label
• To change background color, edit the Styles for
  the Panel

5
TitleBar

• Four-Panel Title bar layout. Top Panel holds
  three sub-Panels side-by-side
• Application Name is defined as the caption of a
  Label widget, wedged between two Spacer widgets
• Two rightmost sub-Panels are empty
• Change colors by editing Style Properties for
  Panel widgets
• Change fonts by editing Style properties for
  Label Widget

6
Toolbar

• The Toolbar template consists of a Panel that
  contains two Buttons separated by a Spacer. You
  could easily add more Buttons, separated by
  similar Spacers
• You can edit properties and styles for the Panel,
  Buttons and Spacer to get the look you want
• To make the Buttons work, define the onclick
  event for each of them

7
CenteredLayout

• Provides a central Panel of fixed width, flanked
  by two gutter Panels, flexed to take up
  remaining space
• Edit the size and flex properties of the three
  Panels to adjust sizes
• Edit the style properties of any Panels to change
  color, and so on

8
TwoColumns Template

• A Layout with a Toolbar across the top and two
  vertical Panels below separated by a Splitter
  widget
• Left Panel is fixed width, while right Panel is
  flexed to take up remaining space
• Both Panels and Toolbar have background colors
  that you can change with Style Properties
• Toolbar has three buttons
• you can add or delete buttons
• define onclick Events for buttons

9
TabbedTwoColumn Template

• A Layout with three tabbed Layers
• The first Layer has a complex two-column layout
• The left Panel is fixed width
• The right Panel is flexed to take up remaining
  space and has a Toolbar configuration at the top

10
SearchListDetail

• Provides a complete layout for a basic
  search/list/detail page
• Search button and text-entry field (Editor
  widget)
• DataGrid for list
• LiveForm for detail
• You need to set up the data sources and Variables
  to use as the data set for the DataGrid and set
  up the onclick event for the Button
• DataSet for the LiveForm is selected item in the
  DataGrid

11
Toolbar and Form
Toolbar with Two Buttons

• Layout composed of many individually configurable
  widgets
• Note that Form is individual Editors, and not a
  LiveForm

Centered Panel for Form Title
Form Editors
Form Buttons
12
Complex Layout
Toolbar with Two Buttons
Accordion Layers
DataGrid
Splitter Widget
Nested Panel Widgets with Styling
13

• Questions?

14
Exercise 6

• Create a new application
• User templates to a layout a page
• Customize templates