QML – новый подход к построению GUI<br />
Введение<br />	Подходы к построению десктопных приложений:<br />Императивный<br />Декларативный<br />QML - это декларативн...
Синтаксис<br />	Дерево объектов со свойствами:<br />Rectangle { <br />        id: canvas <br />        width: 200 <br />  ...
Основные типы данных<br />Item { x: 10.5 // a 'real' property state: "details"// a 'string' property focus: true // a 'boo...
Идентификаторы объектов<br />Row { <br />Text { <br />			id: text1 <br />			text: "Hello World" <br />		} <br />Text { tex...
Выражения<br />JavaScript – выражения могут быть использованы для назначения свойств элементов:<br />Пример 1:<br />Item {...
Соединения (Connections)<br />Создает подключение к QML-сигналу:<br />MouseArea { <br />id: area <br />}<br />... <br />Co...
Сигналы. Обработка сигналов<br />Обработка сигнала нажатия кнопки мыши:<br />Item { <br />		width: 100; <br />		height: 10...
Состояния<br />Это множество изменений по отношению к стандартной конфигурации элемента:<br />Rectangle { <br />id: myRect...
Поведение элементов<br />	Поведение определяет анимации, которые должны применяться, когда изменяются определенные значени...
Анимация<br />	Свойства и методы анимации привязаны непосредственно к элементам QML:<br />Rectangle { <br />	width: 100 <b...
Работа с мышью<br />	Для обработки сигналов, отправленных мышьюслужит элемент MouseArea:<br />Rectangle { <br />	width: 10...
QML в С++ приложениях<br />Создание и передача свойства «цвет» из C++ приложения в QML:<br />// main.cpp<br />#include <QA...
Upcoming SlideShare
Loading in...5
×

QML - новый подход к построению GUI

1,743
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,743
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

QML - новый подход к построению GUI

  1. 1. QML – новый подход к построению GUI<br />
  2. 2. Введение<br /> Подходы к построению десктопных приложений:<br />Императивный<br />Декларативный<br />QML - это декларативный язык, предназначенный для описания пользовательского интерфейса программы.<br /> Сравнение:<br />XAML<br />CSS<br />
  3. 3. Синтаксис<br /> Дерево объектов со свойствами:<br />Rectangle { <br /> id: canvas <br /> width: 200 <br /> height: 200 <br /> color: "blue" <br />Image { <br /> id: logo source: "pics/logo.png" <br />anchors.centerIn: parent <br /> x: canvas.height / 5 <br /> } <br />}<br />
  4. 4. Основные типы данных<br />Item { x: 10.5 // a 'real' property state: "details"// a 'string' property focus: true // a 'bool' property ... <br />Item { x: 10.5 // a 'real' property state: "details"// a 'string' property focus: true // a 'bool' property ... <br />Item { x: 10.5 // a 'real' property state: "details"// a 'string' property focus: true // a 'bool' property ... <br />Item{ <br /> x: 10.5 // a 'real' property<br /> state: "details“ // a 'string' property<br /> focus: true // a 'bool' property}<br />action<br />bool<br />color<br />date<br />enumeration<br />font<br />int<br />list<br />point<br />real<br />rect<br />size<br />string<br />time<br />url<br />vector3d<br />
  5. 5. Идентификаторы объектов<br />Row { <br />Text { <br /> id: text1 <br /> text: "Hello World" <br /> } <br />Text { text: text1.text } <br />}<br />Идентификатор элемента виден во всей области компонента, в котором этот элемент находится<br />
  6. 6. Выражения<br />JavaScript – выражения могут быть использованы для назначения свойств элементов:<br />Пример 1:<br />Item { <br />width: 100 * 3 <br />height: 50 + 22 <br />}<br />Пример 2:<br />Item { <br /> width: 300 <br />height: 300 <br />Rectangle{ <br /> width: parent.width - 50 <br /> height: 100 <br />color: "yellow" <br /> } <br />}<br />
  7. 7. Соединения (Connections)<br />Создает подключение к QML-сигналу:<br />MouseArea { <br />id: area <br />}<br />... <br />Connections { <br />target: area <br />onClicked: foo(...) <br />}<br />Преимущества:<br />для одного сигнала можно написать несколько соединений<br />создание связей за пределами сферы отправителя сигнала<br />подключение к источникам не нужно предопределять<br />
  8. 8. Сигналы. Обработка сигналов<br />Обработка сигнала нажатия кнопки мыши:<br />Item { <br /> width: 100; <br /> height: 100 <br />MouseArea { <br />anchors.fill: parent <br />onClicked: { <br /> console.log("mouse button clicked") <br /> } <br /> }<br />}<br />Возможность создания собственных сигналов с последующей их обработкой<br />
  9. 9. Состояния<br />Это множество изменений по отношению к стандартной конфигурации элемента:<br />Rectangle { <br />id: myRect<br />width: 100; height: 100 <br />color: "black" <br />MouseArea { <br />id: mouseArea<br />anchors.fill: parent <br />onClicked:myRect.state == 'clicked' ? <br />myRect.state = "" : <br />myRect.state = 'clicked'; <br />} <br />states: [ <br />State { <br />name: "clicked" <br />PropertyChanges { target: myRect; color: "red" } <br />} <br />] <br />}<br />
  10. 10. Поведение элементов<br /> Поведение определяет анимации, которые должны применяться, когда изменяются определенные значения свойств элемента:<br />Rectangle { <br />id: rect<br />width: 100; <br />height: 100 <br />color: "red" <br />Behavior on width { <br />NumberAnimation { duration: 1000 } <br />} <br />MouseArea { <br />anchors.fill: parent <br />onClicked: rect.width = 50 <br />} <br />}<br />
  11. 11. Анимация<br /> Свойства и методы анимации привязаны непосредственно к элементам QML:<br />Rectangle { <br /> width: 100 <br /> height: 100 <br /> color: "green" <br />RotationAnimation on rotation { <br /> loops: Animation.Infinite<br /> from: 0<br />to: 360 <br /> } <br />}<br />Свойства, присущие для всех видов анимации:<br />alwaysRunToEnd : bool<br />loops : int<br />paused : bool<br />running : bool<br />
  12. 12. Работа с мышью<br /> Для обработки сигналов, отправленных мышьюслужит элемент MouseArea:<br />Rectangle { <br /> width: 100; height: 100 <br /> color: "green" <br />MouseArea { <br />anchors.fill: parent <br />onClicked: { parent.color = 'red' } <br /> } <br />}<br />
  13. 13. QML в С++ приложениях<br />Создание и передача свойства «цвет» из C++ приложения в QML:<br />// main.cpp<br />#include <QApplication> <br />#include <QDeclarativeView> <br />#include <QDeclarativeContext> <br />int main(intargc, char *argv[]) { <br />QApplication app(argc, argv); <br />QDeclarativeView view; <br />QDeclarativeContext *context = view.rootContext(); <br /> context->setContextProperty("backgroundColor", QColor(Qt::yellow)); <br />view.setSource(QUrl::fromLocalFile("main.qml")); <br />view.show(); <br /> return app.exec(); <br />}<br />// main.qml<br />Rectangle { <br /> width: 300 <br /> height: 300 <br /> color: backgroundColor<br />Text { <br />anchors.centerIn: parent <br /> text: "Hello Yellow World!" <br /> } <br />}<br />
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×