1. WaveMaker Visual AJAX Studio 4.0 Training Basics: Templates

2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11 Toolbar and Form Toolbar with Two Buttons Centered Panel for Form Title Form Editors Form Buttons ● Layout composed of many individually configurable widgets ● Note that Form is individual Editors, and not a LiveForm

12. 12 Complex Layout Toolbar with Two Buttons Accordion Layers DataGrid Splitter Widget Nested Panel Widgets with Styling

13. 13 Questions?

14. 14 Exercise 6 ● Create a new application ● User templates to a layout a page ● Customize templates