×
Namespaces

Variants
Actions

How to integrate JavaScript in QML

From Nokia Developer Wiki
Jump to: navigation, search


Article Metadata
Code ExampleTested with
Devices(s): Qt Quick SDK
Compatibility
Platform(s):
Symbian
Article
Keywords: How to integrate JavaScript in QML
Created: girishpadia (14 Mar 2011)
Last edited: hamishwillee (24 Jul 2012)

Contents

Introduction

Recently, there was a contest on Qt Quick (QML). The contest was open till 6th March 2011 to participate. Many developers have contributed so many nice and innovative articles for the contest. My this article is very simple and useful to the beginners who just want to see how to start working on QML and JavaScript.

What you need ?

You need to download QT SDK 1.1 beta version from Here The QT SDK 1.1 version is available as Online and Offline version for Windows, Linux and Mac Operating Systems. Download and install appropriate version.

Getting Started

Since this is simple application for QML beginners and shows how to integrate JavaScript with QML, We will create a Text with it's id property as "txt". This simple application will count the number of clicks on the Rectangle area and will show the counter on the text. The counter is implemented using JavaScript. You can read the article written Introduction to QML for Web developers about the QML components.

Application Code

Once you install Qt SDK, you need to create a new project. To do this goto File->New File or Project... You will find a dialog box shown in following image. Choose Qt Quick Project and Qt Quick UI. Give appropriate name to your project e.g. "FirstQML.

Article 14 image 1.PNG

You will see the "FirstQML.qml" with some code. Replace the existing code with the code below. Please read each comment written in .qml file which will make you understand the meaning and importance of each line.

// You must import QtQuick 1.0
import QtQuick 1.0
 
// This is JavaScript file. The JS file can be created by right clicking on
// project and "Add new followed by "General". It will ask for file name. Give appropriate
// file name to add. Here in this example we gave name "jsTest.js"
// Now using following syntax you can import the JS file to use within qml.
 
import "jsTest.js" as MyJS
 
// Defining Rectangle area.
 
Rectangle {
width: 360 // Width of Rectangle
height: 360 // Height of Rectangle.
color: "lightyellow" // The color of Rectangle is set to "lightyellow"
//We create a text area within the rectangle.
Text {
id: txt // The id is assigned as txt. The id of each component must be unique.
//The location of the text area will be the center of the parent control. Here the
//parent control of text area is Rectangle and the Text area is child of Rectangle.
//Following syntax put text area into center of parent
anchors.centerIn: parent
 
text: "<h2>Click Counter<h2>" //The defualt value is set.
color: "Green" // The color of text is set to Green
 
}
 
// The MouseArea detects the mouse activity on Rectangle. The mouse activity includes
// click, mouse over etc.
 
MouseArea {
x: 0
y: 0
// The MouseArea is filled with parent. Here we defined to cover whole area of Rectangle
anchors.fill: parent
 
// The event onClicked is declared.
 
onClicked: {
// Remember we imported jsTest.js file as MyJS above.
// Now each variable and function in jsTest.js file can be accessed as
// MyJS.<variable or function>.
// In the following line MyJS.x indicates the value of variable x in the jsTest.js file
// If the value of x is greater then or equal to 10, the program will be terminated.
if (MyJS.x>=10)
Qt.quit(); // Program will end here
else
// jsTest is function withing jsTest.js file. It returns some value
// and the value returned by it will be set to txt text area which we
// defined above.
txt.text = MyJS.jsTest();
}
}
}


Replace the JavaScript file (Please read comments on above application code which shows how to create the .js file) with the following code.

//A variable named 'x' is defined with intial value as Zero.
var x=0;
//Defining a function jsTest with no arguments
function jsTest()
{
x++; // The value of x is incremented by 1.
 
// Following line will return the text as below.
return "<h2>Your click count is : "+x+"</h2>";
}


Post Condition

As soon as you run the application it will show the screen as shown in below figure.

Article 14 image 2.PNG

Now click on the running application. As soon as you click, the counter will increase and the text will be replaced by click counter as shown in following figure. The counter will be incremented up to 10. Once it reaches to 10, the next click will terminate the application as we have defined it to run up to 10 only.

Article 14 image 3.PNG

Source code to download

You can download the source code of the above example at File:QMLJavascriptTest.zip

This page was last modified on 24 July 2012, at 04:43.
130 page views in the last 30 days.
×