Download presentation
Presentation is loading. Please wait.
Published byClara Short Modified over 8 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.