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.
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.
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
// 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.
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.
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
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.
// The MouseArea is filled with parent. Here we defined to cover whole area of Rectangle
// The event onClicked is declared.
// 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.
Qt.quit(); // Program will end here
// 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();
//A variable named 'x' is defined with intial value as Zero.
//Defining a function jsTest with no arguments
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>";
As soon as you run the application it will show the screen as shown in below figure.
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.
Source code to download