пятница, 19 октября 2012 г.

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() // вызываем написанную нами функцию
        }
    }
}


2 комментария:

  1. Здравствуйте, а сами Sencha приложения можно запаковать внутрь QT и построить его с помощью HTML+CSS

    ОтветитьУдалить
  2. Большое спасибо, очень помогло.

    ОтветитьУдалить