Source Tab

Sections

Overview

One can add custom JavaScript anywhere on the Source tab. The entire contents of the Source tab is written to as the file $PROJECTwebapprootpages$PAGE$PAGE.js where $PROJECT is the project name and $PAGE is the page name.

No code on the Source tab will be executed until invoked by an event. This could be in response to the page start function or any other event, such as button click. Code can be declared outside of an event handler for re-use, but must be invoked within an event handler to be executed. 

Functions declared inside the dojo.declare are page scoped and use the dojo function syntax

functionName: function (parameters) {

//function

},

Functions declared outside of the dojo.declare are not page scoped and use normal JavaScript syntax

functionName = function(paramaters) {

//function

}

Now that you have learned the basics, practice is what will help you develop the skills. Feel free to try out the examples below and don't hesitate to visit the Samples and Examples sections of the Dev to keep those skills in shape. Keep us posted with your questions and progress in the Community Forum.

External Source Code Editors

Some developers have a favorite JS editor. Also, the source code editor in WM 6.0 has known issues. You can use your own third party editor, here's some tips to get you started:
Syncing changes
How to Use

Examples

WhereCode Example

Here is an example main.js page from the WhereCode.zipattached v4 example project export.

//declared outside of dojo.declare for page

test1 =  function(){

alert("test1");

 }


dojo.declare("Main", wm.Page, {
start: function() {
alert("start");   //called upon page start
},

button1Click: function(inSender, inEvent) {
alert("Button1 Click"); //called upon button 1 click  
},

button2Click: function(inSender, inEvent) {   
test1();  //call test1
this.test2(); //call the test2 function
},

test2: function(){
alert("test2");  //test 2 function
},

test3: function(){
alert("test3");  //never called 
},
end: 0
});

Simple Google Map Example

Simple Google Map

Original Simple Example

Wavemaker Implementation

Project Export Download

Dojo right click menu

A code snippet of the dojo menu in it's simplest form.
Project Export Download

See also

Third Party Resources

Related Documentation

Customizing WaveMaker Applications with Javascript