QML + JavaScript, начало

В связи с тем что в последние 2 месяца я активно трудился в дебрях библиотеки Sencha, то у меня появился некоторый опыт работы с JavaScript.

Исходя из полученных знаний я решил в очередной раз опробовать свои силы в кодах QML + JS, (в прошлый раз это был провал).

Создадим новое Qt Quick приложение:
Файл -> Новый файл или проект... -> Проект Qt Quick -> Интерфейс пользователя на Qt Quick.

В новом проекте сразу добавим js файлик.
Файл -> Новый файл или проект... -> QML -> Файл JS и обзовём его myjstest.js

Итак, первым делом в нашем QML коде для главного прямоугольника зададим id, а в MouseArea удалим выход по нажатию. После изменений код станет выглядеть следующим образом:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5

import QtQuick 1.1

Rectangle {

    id: mainRec

    width: 360

    height: 360

    Text {

        anchors.centerIn: parent

        text: "Hello World"

    }

    MouseArea {

        anchors.fill: parent

        onClicked: {

        }

    }

}

Теперь в myjstest.js сделаем так, чтобы функция func() что-нибудь делала. Например будем менять у mainRec фоновый цвет. Тогда func() станет выглядеть так:

function func() {

    mainRec.color = "blue"

}

Ну и последним этапом подключим наш JS файл и вызовем нашу функцию:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5

import QtQuick 1.1

import "myjstest.js" as JsTry // подключаем js файл

Rectangle {

    id: mainRec

    width: 360

    height: 360

    Text {

        anchors.centerIn: parent

        text: "Hello World"

    }

    MouseArea {

        anchors.fill: parent

        onClicked: {

            JsTry.func() // вызываем написанную нами функцию

        }

    }

}