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

2. 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. 3 Page Designer Overview Palette Canvas Variable Editor Property Editor Studio Version Design Toolbar 2. Build GUI

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

5. 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. 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. 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. 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. 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. 10 Arranging Widgets ● Using the Box Property: Top-to-Bottom

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

12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 21 Using the Bevel widget ● Visible divider bar ● Can be horizontal or vertical, depending on box orientation of parent container 2. Build GUI

22. 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. 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. 24 Using the Content widget ● Displays HTML markup ● Enter HTML code under Source  Markup –Use tags to encapsulate HTML –content – drop-down menu populated by tags from source in Markup tab 2. Build GUI

25. 25 Keyboard Shortcuts ● -B – toggles box setting between Top-to- Bottom and Left-to-Right ● -E – toggles boxPosition setting between top, center, bottom or left, center, right ● -F – toggles the sizeUnits between flex and px ● + dragging a widget – forces the widget out of the current container ● + dragging a widget – forces the widget to remain in the current container 2. Build GUI

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

27. 27 Questions?

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