WaveMaker Visual AJAX Studio 4.0 Training Java Script Events

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

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

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

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!

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

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

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

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

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.

11 Button Events ● onClick – Fires when a user click the button

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

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.

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.

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.

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()

17 Questions?

18 Exercise 19 ● Add Java Script to a Service Call Event