JavaScript 3 Ways

QML and JavaScript work very closely together in Cascades. JavaScript is the main way to make "stuff happen" using QML in you application. There are three main ways you can implement your JavaScript into your QML. Let's investigate each of these with a simple example.

In-Line JavaScript

The easiest way it to write the JavaScript in-line with the rest of the QML. Let's demonstrate this in the onClicked {} of a Button. So consider the following code in the onClicked: {} signal there is a JavaScript function that defines a random number 1-3 and based off that number generates a phrase to have as the text of a label

import bb.cascades 1.0
 
Page {
    Container {
        Button {
            text: "Button 1"
            onClicked: {
                var gennumber = Math.floor((Math.random() * 3) + 1);
                if (gennumber == 1) {
                    label1.text = "Button 1, Phrase 1";
                } else if (gennumber == 2) {
                    label1.text = "Button 1, Phrase 2";
                } else if (gennumber == 3) {
                    label1.text = "Button 1, Phrase 3";
                }
            }
        }
        ...
        Label {
            id: label1
        }
    }
}
 

 

Function Within the QML File

The next way you can have a JavaScript function defined within your QML file and call that function when necessary. So let's consider a similar function as above except within the main Page {} of the file define a function named phrase2 ()

function phrase2() {
        var gennumber = Math.floor((Math.random() * 3) + 1);
        if (gennumber == 1) {
            label1.text = "Button 2, Phrase 1";
        } else if (gennumber == 2) {
            label1.text = "Button 2, Phrase 2";
        } else if (gennumber == 3) {
            label1.text = "Button 2, Phrase 3";
        }
    }

Then we can have an onClicked: {} of a Button call our "phrase2 ()" function

import bb.cascades 1.0
 
Page {
    Container {
        Button {
            text: "Button 2"
            onClicked: {
                phrase2();
            }
        }
        ...
        Label {
            id: label1
        }
    }
...
}

Function Defined in a Separate .js File

The third way is to define your JavaScript functions in a separate .js file then connect that file to your QML file. Again we'll create the same function, this time called phrase3(), within a file called otherFunctions.js

//otherFunctions.js
 
function phrase3() {
  var gennumber = Math.floor((Math.random() * 3) + 1);
  if (gennumber == 1) {
    label1.text = "Button 3, Phrase 1";
  } else if (gennumber == 2) {
    label1.text = "Button 3, Phrase 2";
  } else if (gennumber == 3) {
    label1.text = "Button 3, Phrase 3";
  }
}

Now in your QML file declare the .js file

import "otherFunctions.js" as PhraseFunctions

Now you can call that function inside of a Button onClicked by doing the following

import bb.cascades 1.0
import "otherFunctions.js" as PhraseFunctions
 
Page {
    Container {
        Button {
            text: "Button 3"
            onClicked: {
                PhraseFunctions.phrase3();
            }
        ...
        Label {
            id: label1
        }
    }
}

Also you can have all three in a single page, such as

import bb.cascades 1.0
import "otherFunctions.js" as PhraseFunctions
 
Page {
    Container {
        Button {
            text: "Button 1"
            onClicked: {
                var gennumber = Math.floor((Math.random() * 3) + 1);
                if (gennumber == 1) {
                    label1.text = "Button 1, Phrase 1";
                } else if (gennumber == 2) {
                    label1.text = "Button 1, Phrase 2";
                } else if (gennumber == 3) {
                    label1.text = "Button 1, Phrase 3";
                }
            }
        }
        Button {
            text: "Button 2"
            onClicked: {
                phrase2();
            }
        }
        Button {
            text: "Button 3"
            onClicked: {
                PhraseFunctions.phrase3();
            }
        }
        Label {
            id: label1
        }
    }
    function phrase2() {
        var gennumber = Math.floor((Math.random() * 3) + 1);
        if (gennumber == 1) {
            label1.text = "Button 2, Phrase 1";
        } else if (gennumber == 2) {
            label1.text = "Button 2, Phrase 2";
        } else if (gennumber == 3) {
            label1.text = "Button 2, Phrase 3";
        }
    }
}
 

There you have it, the three ways to define/run a JavaScript function from your QML file. It is all a matter of preference/coding style of which way you choose to do it. Typically I like to use inline JavaScript for short/one time use functions. I like to use defined functions within the QML for longer/used multiple times within that one QML file functions. And I like to use functions defined for very long or functions that will be used in multiple QML files. Or another application of a separate .js file is a set of Functions that you plan to use in multiple apps, you can easily add that file to the project and have access to it.

-Brian