wavemaker visual ajax studio 4.0 training java script events
DESCRIPTION
3 How to override an event ● Widgets and Services have events ● In the Property Panel select the Events property to see all of the exposed events ● Select an option from the Drop Down –JavaScript –New Service –New Navigation –Existing Service Variable –Existing Navigation ● Or Type the name of an existing Java Script FunctionTRANSCRIPT
![Page 1: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/1.jpg)
WaveMaker Visual AJAX Studio 4.0 Training
Java Script Events
![Page 2: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/2.jpg)
2
Event Model and Java Script
● What we will cover– Events in General– Common Service Events– Common widget Events– Java Script basics
● What we will not cover– How to write Java Script
![Page 3: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/3.jpg)
3
How to override an event
● Widgets and Services have events● In the Property Panel select the Events
property to see all of the exposed events
● Select an option from the Drop Down– JavaScript– New Service– New Navigation– Existing Service Variable– Existing Navigation
● Or Type the name of an existing Java Script Function
![Page 4: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/4.jpg)
4
Calling Existing Services or Navigations
● Select an existing ServiceVariable– The ServiceVar is executed
– Execute a custom query– Call custom Java Code– Call a Web Service
● Select an existing Navigation– The Navigation is executed and the request
page / layer is loaded
![Page 5: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/5.jpg)
5
Calling New Services or Navigations
● Select New Service– Creates a New Service Variable – Sets the Event Value– Takes you to the New Service Variable so
it can be configured.
● Select New Navigation– Creates a New Navigation – Sets the Event Value– Takes you to the New Navigation so it can
be configured.
● Eliminates a few mouse clicks!
![Page 6: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/6.jpg)
6
Queuing Service Calls
● If you want to chain together service calls– After one executes call another you don’t need
to write Java Script– Use the Service Variables Queue property– Service Calls fire in order only if the previous
one did not thrown an error
![Page 7: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/7.jpg)
7
Calling JavaScript
● Select Java Script– A New Java Script function is created – The Event is set to the new function– You are taken to the Source / Script Screen where you can add
your custom java script
● Java Script API document provided under Help Java Script Documentation
![Page 8: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/8.jpg)
8
Service Events
● Common Service Events– Each service has a set of events that get fired
● You can– Add custom code to those events to
– Change application behavior– Handle errors
– Call additional Services or Navigations
![Page 9: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/9.jpg)
9
Service Variable Events
● onBeforeOperation– Fires just before the event is executed– This is good time to set additional filter criteria etc
● onResult– Fires after the Service is executed whether it was successful or not
● onSuccess– Only fires if no Errors were thrown
● onError– Only fires if an Error happens– Example: If this occurs you may use Java Script to set a label’s
caption with an error message to display
![Page 10: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/10.jpg)
10
Editor Events
● onChange– Fires when the display value of the
widget changes.– Example: when a user selects a
value from a drop-down menu, the display value of that menu changes.
– You could use the onchange event to call an operation that populates a second drop-down menu.
● onBlur– Fires when a user leaves an input field.
![Page 11: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/11.jpg)
11
Button Events
● onClick– Fires when a user click the
button
![Page 12: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/12.jpg)
12
DataGrid Events
● onCellClick– fires when a single cell is clicked
● onHeaderCellClick– by default, when a user clicks on a
header cell, the application performs a sort on the column. You can use this event to override the behavior
● onSelected– fires when an entire row is selected
● onDeselected– Fires when an entire row is deselected
![Page 13: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/13.jpg)
13
DataGrid Events
● onSetColumns– This event fires for each Column as the data is being set.– Used for computed columns– Used to add images to columns
● onSetStructure– This event fires when the column structure is created for
the grid. The default structure is provided as an event argument.
– Use this event for advanced processing of the grid structure. New columns or sub-rows, for example, could be added to the grid.
● onBeforeRender– This event fires right before the grid is populated.– Note that the grid is rendered whenever its dataSet
changes. Use this event to customize grid properties or perform tasks just prior to rendering.
● onAfterRender– This event fires right after the grid is populated. Note that
the grid is rendered whenever its dataSet changes. Use this event to customize grid properties or perform tasks just after rendering.
![Page 14: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/14.jpg)
14
LiveForm Events
● onBeginInsert– This event fires when the form is placed into insert mode (via an EditPanel or
the beginDataInsert method), clearing the editors and output data. – Use this event to pre-populate editors or output data with default data that
should be used for the insert.● onInsertData
– This event fires after the server processes a successful insert operation. Use this event to customize what happens after the server processes an insert.
● onBeginUpdate– This event fires when the form is placed into update mode (via an EditPanel or
the beginDataUpdate method) and appropriate editors are made editable.– Use this event to change an editor's readonly state or contents or modify any of
the form's output data.● onUpdateData
– This event fires after the server processes a successful update operation. Use this event to customize what happens after the server processes an update.
● onBeginDelete– This event fires when a delete is about to occur. A user can use this event to
customize what happens right before a delete occurs.● onDeleteData
– This event fires after the server processes a successful delete operation. Use this event to customize what happens after the server processes a delete.
![Page 15: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/15.jpg)
15
LiveForm Events
● onCanelEdit– This event fires either via the cancel button on an EditPanel or when the
cancelEdit method is called. – Editors are restored to a readonly state and default data stored in the
form's dataSet property is shown in the form's editors. Use this event to customize what happens when the user cancels an edit.
● onSuccess– This event fires when any form operation succeeds: insert, update or
delete. Data returned from the operation is available in the event. ● onResult
– This event fires when any form operation returns from the server: insert, update or delete. It fires when either the operation succeeded or failed.
● onError– This event fires when any form operation returns from the server with an
error: insert, update or delete. The error message is an event argument. Use this event to customize what happens whenever any form operation returns from the server with an error.
● onBeforeOperation– This event fires right before any form operation is performed by the
server. The operation type is an event argument. – Use this event to customize the form's dataOutput data that will be sent
to the server.
![Page 16: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/16.jpg)
16
Java Script Basics
● To access a widget use– this.widgetName
● To change a widgets properties– this.widgetName.getValue(“propertyName”)– this.widgetName.setValue(“propertyName”, value)
● To clear values from a widget– this.dataGrid.clearSelection() clears the selectedItem in a DataGrid– this.Variable.setData() clears a variables values
● To execute a service call– this.serviceVariable.update()
![Page 17: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/17.jpg)
17
Questions?
![Page 18: WaveMaker Visual AJAX Studio 4.0 Training Java Script Events](https://reader036.vdocument.in/reader036/viewer/2022082501/5a4d1b217f8b9ab059995813/html5/thumbnails/18.jpg)
18
Exercise 19
● Add Java Script to a Service Call Event