Wavemaker AJAX
-
Upload
basmaat -
Category
Technology
-
view
2.062 -
download
2
Transcript of Wavemaker AJAX
![Page 1: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/1.jpg)
WaveMaker Visual AJAX Studio 4.0 Training
Basics: Building Your First ApplicationDesigner Basics
![Page 2: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/2.jpg)
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
![Page 3: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/3.jpg)
3
Page Designer Overview
Palette
Canvas
Variable Editor
Property Editor
StudioVersion
Design Toolbar
2. Build GUI
![Page 4: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/4.jpg)
4
Commonly Used Widgets
● Panel● Label● Editor● Button● Spacer● Bevel● Splitter● Picture● Content
2. Build GUI
![Page 5: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/5.jpg)
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
![Page 6: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/6.jpg)
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
![Page 7: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/7.jpg)
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
![Page 8: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/8.jpg)
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
![Page 9: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/9.jpg)
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
![Page 10: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/10.jpg)
10
Arranging Widgets
● Using the Box Property: Top-to-Bottom
![Page 11: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/11.jpg)
11
Arranging Widgets
● Using the Box Property: Left-to-Right
![Page 12: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/12.jpg)
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
![Page 13: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/13.jpg)
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
![Page 14: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/14.jpg)
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
![Page 15: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/15.jpg)
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
![Page 16: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/16.jpg)
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
![Page 17: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/17.jpg)
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
![Page 18: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/18.jpg)
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
![Page 19: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/19.jpg)
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
![Page 20: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/20.jpg)
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
![Page 21: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/21.jpg)
21
Using the Bevel widget
● Visible divider bar
● Can be horizontal or vertical, depending on box orientation of parent container
2. Build GUI
![Page 22: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/22.jpg)
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
![Page 23: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/23.jpg)
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
![Page 24: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/24.jpg)
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
![Page 25: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/25.jpg)
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
![Page 26: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/26.jpg)
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
![Page 27: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/27.jpg)
27
Questions?
![Page 28: Wavemaker AJAX](https://reader035.fdocuments.in/reader035/viewer/2022062220/555ad947d8b42a62528b4bfe/html5/thumbnails/28.jpg)
28
Exercise 3
● Layout a Page with the following– Header
– MainBody
– Footer