Programming | JavaScript, Ajax » Client side JavaScript in WaveMaker

Client Side JavaScript in WaveMaker 3.x The WaveMaker client uses builds upon the Dojo Toolkit to provide AJAX widgets in an open standards environment. WaveMaker studio provides tooling for an increasing array of functionality. Application developers can further enhance WaveMaker applications with client side JavaScript. By combining standard JavaScript code with widgets objects and server service call functions; developers can quickly and easily deliver powerful applications. This document describes the entry points for JavaScript coding within WaveMaker applications. Some areas discussed are targeted for tooling within studio in upcoming releases and the methods covered will no longer be necessary. These areas will be noted accordingly In addition some APIs may change in the future. Subsequent releases of WaveMaker will provide logically equivalent behavior but API compatibility is not guaranteed. This, App and inSender As in many languages, “this” is a reserved word and refers

to the current object. In a WaveMaker application “this” is always a reference to the current page. In a newly created WaveMaker application the default page is named ‘main’ and ‘this’ refers to the main page. A button named button1 on the main page would thus be referenced as ‘this.button1’ The variable “app” refers to the application and can be used to reference global application level elements. App is used to reference components across pages Only service calls and variables created at the application level are available across pages. A variable component named varMyObject declared at the application level would be reference to as ‘app.varMyObject’ inSender is the reference the calling object in an event. Every widget event is passed the inSender reference. For example, in the onclick event for a button, the reference to the button that was clicked is available via inSender. Use the inSender reference as you would a reference to any widget via this or app.

Developers can use any JavaScript that the target browser(s) support. Using this, app and inSender to reference the widgets and service calls of an application enables developers to provide a nearly unlimited amount of logic and customization. JavaScript entry points Studio easily provides entry points for calling JavaScript. For any widget event, simply choose the “- JavaScript” option in the drop down for an event. This will automatically declare the appropriate function and bring you to the appropriate place in the source tab. For a button named button2, the onClick event would be automatically framed as: button2Click: function(inSender) { }, To execute JavaScript upon the loading of the page, simply go to the Source tab for that page and implement the start function. With the firebug add-on installed, you could write the log using the start function like this: start: function() { console.log("Hello WaveMaker"); }, Service Calls Most all service calls can be

executed in JavaScript by calling its update function. For a service call declared in the project components at the page level called “serviceCall1”, the service call would be triggered within that same page by calling: this.serviceCall2update(); If the service call was declared at the application level, the service call could be triggered on any page by calling: app.serviceCall2update(); All the input and output bindings of the service call are used. No parameters should be passed to the update function. To access the results of a service call, bind a variable to the desired service call output and access the variable in your code. As that AJAX is asynchronous by definition we want to use the onResult event of the service call. The onResult event is called upon the successful completion of the service call. Here is an example of accessing the results of a service call in its onResult event. The service call is getActoryById from the MySQL SakilaLight example database. The

variable myActor is bound to the output of the service call. The code accesses the variable data and concatenates the first and last name together into a variable called “actorName” actorName = this.myActorgetValue("data")firstName + " " + this.myActorgetValue("data")lastName; Labels The caption of labels can be set using the setCaption function. For a page level label named label1, from within the same page we can set the caption using: this.label1setCaption(“New Caption”); If we wanted the label caption to be our actorName from above we would use: this.label1setCaption(actorName); Within the limits of JavaScript, functions and variables can be nested. To set a label to the current date, set the display property of the label to Date and insert the following line in an entry point such as the start function for the page: this.label3setCaption(new Date()getTime()); Sometimes setting the caption of a label is not enough and the entire label

needs to disappear or appear. For example, an error message output label that is only desired when an error occurs. For such situations, the setShowing function can be used this.label3setShowing(false); this.label3setShowing(true); Editors Data and Display Values For most all editors, the displayValue and the dataValue are the same. It is best practice to work with the dataValue although setting either the displayValue or dataValue will update the other property. The most common case in which the 2 values are different is for dates and times. DisplayValue is the readable and localized string (02/01/08) whereas the dataValue is the date in milliseconds that is expected by the database service and the database. Setting and Clearing Values *This area is targeted for tooling in an upcoming release It is common practice to clear the data input fields upon completion of the operation. For an editor named “editor1” the data value can be nulled by calling:

this.editor1setValue("dataValue", null); Normally this would be done in the onResult event for a service call which is triggered upon successful completion of the service call. The above however, can be tedious for a page with many editors. The code below can be used to clear all editors used as inputs to a service call. Note that it is specifically targeted to be used within an onResult event. The use of inSender allows the code to be caller agnostic and does not require project specific widget names. serviceCall1Result: function(inSender, inResult) { var wires = inSender.componentsinputcomponentsbindingcomponents,e, s; // null the value of the source editor for each binding wire for (var i in wires) { s = wires[i].sourcesplit(""); e = this.getValueById(sshift()); if (e instanceof turbo.Editor) e.setValue("dataValue", null); } }, Debugging The Firefox add-on Firebug provides several debugging tools to the developer. Firebug lets you know of errors

within your application with a status bar error indicator. Watching the status bar indicator will quickly let you know when there is a problem. From within any JavaScript function, informational statements and variables can be printed out the firebug console using console.log() To log a static string to the console use: console.log(“Hello WaveMaker”); To log the value of a variable called actorName use: console.log("Actor Name: " + actorName); Firebug provides a command line for testing your code without editing your source files. To utilize, simply go the firebug command line, enter whatever JavaScript you have and hit run. For example to enable the debug out of studio widgets, run: turbo.logErrors=true; The firebug console is a quick and convenient means to test edits to your JavaScript without reloading your application. Within the console, you will need to specify the page name instead of “this”. To null the data value of an editor1 on the main page from the

firebug console use: main.editor1setValue("dataValue", null); Using the Console or Net Tab and XHR features, one can easily monitor JSON RPC service call post and responses. This is very useful for tracking down service calls that are not working as expected. Here we see the post for the getActorById service call: And the response to the service call: These can also be seen on the Console tab: References Firebug Firefox web development add-on http://getfirebug.com/ JavaScript Kit JavaScript Reference http://www.javascriptkitcom/jsref/ W3 Schools JavaScript Tutorial and Reference http://www.w3schoolscom/js