WaveMaker Visual AJAX Studio 4.0 Training

1. WaveMaker Visual AJAX Studio 4.0 Training Basics: Building Your First Application Designer Basics

2. Define Data 2. Build GUI Building your First Application 3. Bind data to GUI Import data in Live Tables Drag-n-drop widgets in Page Designer Connect data to widgets in Page Designer Can deploy app to any Java server Can also import Java and Web Services ** Steps 1 and 2 can be reversed – you can design first then add data

3. Page Designer Overview 2. Build GUI Canvas Palette Property Editor Design Toolbar Variable Editor StudioVersion

4. 2. Build GUI Commonly Used Widgets • Panel • Label • Editor • Button • Spacer • Bevel • Splitter • Picture • Content

5. 2. Build GUI 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

6. 2. Build GUI 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

7. 2. Build GUI 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

8. 2. Build GUI 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

9. 2. Build GUI 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.

10. Arranging Widgets • Using the Box Property: Top-to-Bottom

11. Arranging Widgets • Using the Box Property: Left-to-Right

12. 2. Build GUI 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

13. 2. Build GUI 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

14. 2. Build GUI 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

15. 2. Build GUI 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

16. 2. Build GUI 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

17. 2. Build GUI 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

18. 2. Build GUI 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

19. 2. Build GUI 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.

20. 2. Build GUI 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

21. 2. Build GUI Using the Bevel widget • Visible divider bar • Can be horizontal or vertical, depending on box orientation of parent container

22. 2. Build GUI 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

23. 2. Build GUI 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”

24. 2. Build GUI 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

25. 2. Build GUI 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

26. 2. Build GUI Keyboard Shortcuts • <Ctrl>X – cut • <Ctrl>C – copy • <Ctrl>V – paste • <Ctrl>S – saves the open project • <Esc> – switches focus to the parent widget

27. Questions?

28. Exercise 3 • Layout a Page with the following • Header • MainBody • Footer