WaveMaker Visual AJAX Studio 4'0 Training

1
WaveMaker Visual AJAX Studio 4.0 Training

• Basics Building Your First Application
• Binding 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
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
What is a Binding

• In WaveMaker, the connection between a widget and
  a source of data, is called the binding.
• Source of data
• Database Import (Live Variable),
• Web Service Import (Service Variable)
• Custom Java Code (Service Variable)
• Variables (Variable)
• Create a variable which will contain a single
  instance of the data
• Bind the widget to the variable to populate it
  with data

4
Type of Variables

• Three Types of Variables
• New Variable Can be simple or complex types
  (Examples Strings, Numbers, Dates, complex type
  which represent an object like customer)
• New LiveVariable special variable that stores
  an instance of a LiveTable or LiveView (more on
  this later)
• New ServiceVariable way to perform an
  operation, such as a database operation, web
  service, or custom Java method
• Also used to create New Navigation action that
  controls travel to other pages or layers within
  the application

5
Binding Examples

• Hello World Label
• Create variable of type string with the value
  Hello World
• Add a Label widget to the page
• Bind the Labels caption property to the
  testVar.dataValue

6
Binding Examples

• Populating a DataGrid
• Create a LiveVariable which is populated via a
  LiveTable (i.e., Customers)
• The variable is now filled with an object of type
  customers and all of its data
• Add a Grid
• Bind the Grids dataset to the liveVariable1

7
How to Bind

• Any property that can be bound is marked with a
  circular bind icon
• Properties that are bound have the target
  displayed in the field and are marked with a link
  icon
• Bindings can be changed or deleted
• Click the X icon to delete the binding
• Click the link to change the existing binding

8
How to Bind

• To bind a property, click the circular bind icon
• Choose a binding target
• Simple list of most commonly bound targets
  based on the property you are binding
• Advanced all available binding targets
• Expression any valid java script function can
  be used
• Click Bind to save your settings

9
Binding Tips

• Expand the widget groups to see all of the
  properties
• When binding to an Editor, bind to the dataValue
• Sometimes UI elements will be bound to the
  displayValue

10
How to populate a DataGrid

• DataGrid
• Highly configurable widget used to display lists
• Users can sort and resize the columns
• Binding Data to a DataGrid
• Bind the dataSet property to appropriate variable
  or service call
• DataGrid will be populated with the data from the
  underlying dataSet

11
DataGrid Basics
12
Populating the DataGrid

• Data Properties
• dataSet list of all object you would most
  likely display in a list.
• If you dont see your choice click the bind
  button to manually find the object
• After selecting the dataSet, each type in the
  dataSet will be displayed as a column in the
  DataGrid.
• You will see a real-time representation of the
  data in the Designer.

13
Add / Remove Columns

• Operations
• addColumn manually add a single column
• autoColumns adds a column for each type
• clearColumns removes all columns
• updateNow retrieves data and updates DataGrid
  with live data

14
Naming DataGrid Columns

• You can edit the properties, delete, or rearrange
  the columns in the DataGrid.
• Common Properties
• name unique name for the widget
• caption title displayed at top of column

15
Configuring Column Properties

• Data Properties
• field data type that is displayed in column,
  all types in dataSet are listed
• dataExpression allows any java script
  expression
• display controls the format of the data (i.e.
  Date, Currency etc)
• format fine grain control over the display
  (i.e. number of places)
• Layout Properties
• autoSize - adjust widget to size of content
• columnWidth fixed size for a widget
• index order in which column is displayed in
  DataGrid, first column is 0

16
How to filter result sets

• Add search criteria
• Add input fields to the page
• Live Variables have a filter property
• Filters can be bound to the input fields
• When a value in the input field is updated the
  filter is applied to the result set.
• Note the change takes affect as soon as an input
  field looses focus

17
Adding a Search Button

• Adding a button to perform the search
• Add a button widget to the canvas
• Most widgets have an event property
• Events are fired at different times depending on
  the lifecycle of the widget
• Events can be configured to
• make service calls
• refresh variables
• call any custom code
• Buttons have an onClick event
• Set the onClick event to update the LiveVariable
• Note the button is not needed for the filter to
  be applied

18
Test Run your application

• Deploys the application in its current state to
  the tomcat web server
• Opens a new browser and launches the application
• You can leave the application open subsequent
  test runs will use the same open window

19

• Questions?

20
Exercise 4

• Add a Live Variable
• Bind Variable to Grid
• Add text fields
• Bind the Variables filter to the text fields
• Add a button
• Change the buttons event to update the variable
• Test Run the Application