WaveMaker Visual AJAX Studio 4.0 Training

Basics: Building Your First ApplicationDesigner Basics

2

Building your First Application

Import data in Live Tables

Drag-n-drop widgets in Page Designer

Connect data to widgets in Page Designer

1.Define Data

2. Build GUI

3. Bind data to GUI

Can also import Java and Web Services

Can deploy app to any Java server

** Steps 1 and 2 can be reversed – you can design first then add data

3

Page Designer Overview

Palette

Canvas

Variable Editor

Property Editor

StudioVersion

Design Toolbar

2. Build GUI

4

Commonly Used Widgets

● Panel● Label● Editor● Button● Spacer● Bevel● Splitter● Picture● Content

2. Build GUI

5

Using a Panel Widget

● Container for other widgets

● Useful for laying out pages

● Not visible in final layout by default

– Unless certain style properties are specified

● Contents can be added:– Left to right

– Top to bottom

– Use Box property to adjust

● Contents can be:– Centered

– Left or right justified

– Top or bottom aligned

– Use BoxPosition property to adjust

2. Build GUI

6

Panel Properties

● Common– name – widget name, used to identify

widget in Model Tree, on Canvas, and in binding dialogs

– showing – if checked, widget is visible on Canvas

● Layout – lock – if checked, widgets cannot be added

or removed from the container

– autoSize – if checked, widget’s size automatically adjusted to be large enough to hold its contents, cannot manually resize widget

2. Build GUI

7

Panel Properties

● Layout – height / width – widget size

– Specify units:– px – default type, pixel,

– em – text size, adapts automatically to current screen size

– pt – point,1/72 inch

– flex – stretches widget to fill up proportional area of available space

– Specify value: – for px, em, and pt, the value is the size of the widget

– for flex, the value is the proportion

2. Build GUI

8

Panel Properties

● Layout – box – arrangement of contents in widget

– Left-to-Right – added horizontally

– Top-to-Bottom – added vertically

– boxPosition – justification of contents in widget

– If box is set to Left-to-Right, boxPosition can be:– right

– center

– left

– If box is set to Top-to-Bottom, boxPosition can be:– top

– center

– bottom

2. Build GUI

9

Setting Widget Size

● You can only set the either the height or the width of a widget depending on its parent container’s box setting.

– If the parent container’s box property is set to Top-to-Bottom, you can only adjust the width of the child widgets. The height is determined by the parent container’s height.

– If the parent container’s box property is set to Right-to-Left, you can only adjust the height of the child widgets. The width is determined by the parent container’s width.

2. Build GUI

10

Arranging Widgets

● Using the Box Property: Top-to-Bottom

11

Arranging Widgets

● Using the Box Property: Left-to-Right

12

Sizing Widgets: Flex

● If a widget’s size (height/width) property is set to flex, the widget cannot be manually resized.

● The widget will fill up the available space in its parent container relative to its set proportion.

– Example: flexPanel1 and flexPanel 2 flex = 1

– Example: flexPanel1=4 flexPanel2 = 1 flexPanel1 is 4 times the size as flexPanel1

2. Build GUI

13

Changing the Look and Feel

● Using the Styles Property– Custom design can be applied to

widgets

– Classes – built-in styling options

– Expand desired category and apply selections by checkbox

– Custom – use a class from a pre-defined CSS style sheet

– Custom Styles – editor to input CSS style sheet

2. Build GUI

14

Using the Label widget

● Used to display static text

● Common– caption – value displayed to user, can be set in this

field or dynamically set

– showing – determines if the widget is visible

– disabled – disables events from firing

● Formatting– display – formatting options for caption

– Number, Date, Time, DateTime, Currency

– Link, RegularExpression, Evaluation

– link – hyperlinks caption to URL or Service Variable

2. Build GUI

15

Using the Editor widget

● Editing– An editor is a generic widget which can be

configured using the display property as any type of input widget. By default it is a text input widget.

– Changing the display property turns the editor into on of the following types of input / output widgets

– Text , Date, Time, Number

– Currency, Select, Checkbox

– TextArea, RadioButton, Slider

2. Build GUI

16

Using the Editor Widget

● Setting the Display properties– readonly – if checked, editor only

displays data, not an input field

– captionSize – the proportion of the field size to use for the caption

– captionAlign – horizontal alignment

– right, left, center

– captionPosition – vertical alignment

– left, right, top, bottom

2. Build GUI

17

Using the Editor Widget

● Configuring the default values

● Use the Editing Property– displayValue – set the default display

value

– dataValue – set the default data value

– emptyValue – allows developers to control the value used when a user does not enter a value

– Default(unset)

– Null

– emptyString

– false

2. Build GUI

18

What’s the difference

● Display Value– Visual presentation of data

– Example: Date Editor– 9/30/2008

● Data Value– Representation of how data is stored in the database

– Example: Date Editor– 1222758000000

– Seconds since the Epoch

2. Build GUI

19

Using the Button Widget

● Common– disabled – if checked, when button is clicked

at runtime, no event is fired

● Display– hint – tip displayed at runtime when mouse is

hovered over button

● Layout– autoSize – by default, this property is

checked, button will be sized to fit its caption

– To manually size button, uncheck autoSize.

● Has on onClick Event which allows you to execute code when the button is clicked.

2. Build GUI

20

Using the Spacer Widget

● Adds white space between widgets

● Use to center, align, or lay out other widgets

● By default, not visible at runtime

● Size (height/width) is most useful property

2. Build GUI

21

Using the Bevel widget

● Visible divider bar

● Can be horizontal or vertical, depending on box orientation of parent container

2. Build GUI

22

Using the Splitter widget

● Adjustable visible divider

● User can move splitter to adjust size of containers on either side

● Do not flex widgets on both side of splitter, one side must be set using px so it is resizable.

Layout– minimum – limits Splitter’s range to top or

left of container

– maximum – limits Splitter’s range to bottom or right of container

– -1, default, is unlimited movement

2. Build GUI

23

Using the Picture widget

● Used to display images– Common

– source – location of image

– path is relative to webapproot folder in project directory, use backslash “/”

– can be external URL

– Layout– aspect

– h – preserve image horizontally

– v – preserve image vertically

– none – default

– Other– link – URL or Service Variable

– creates an “image link”

2. Build GUI

24

Using the Content widget

● Displays HTML markup

● Enter HTML code under Source Markup– Use <div> tags to encapsulate

HTML

– content – drop-down menu populated by <div id> tags from source in Markup tab

2. Build GUI

25

Keyboard Shortcuts

● <Ctrl>-B – toggles box setting between Top-to-Bottom and Left-to-Right

● <Ctrl>-E – toggles boxPosition setting between top, center, bottom or left, center, right

● <Ctrl>-F – toggles the sizeUnits between flex and px

● <Shift> + dragging a widget – forces the widget out of the current container

● <Ctrl> + dragging a widget – forces the widget to remain in the current container

2. Build GUI

26

Keyboard Shortcuts

● <Ctrl>X – cut

● <Ctrl>C – copy

● <Ctrl>V – paste

● <Ctrl>S – saves the open project

● <Esc> – switches focus to the parent widget

2. Build GUI

27

Questions?

28

Exercise 3

● Layout a Page with the following– Header

– MainBody

– Footer