Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Hello, QML

1.392 visualizaciones

Publicado el

Introduction of QML

Publicado en: Ingeniería
  • Sé el primero en comentar

Hello, QML

  1. 1. Hello, QML Jack Yang jackyang5000@gmail.com
  2. 2. Installation ● http://www.qt.io/download-open-source/ ● C++ Compiler (Win): Visual Studio 2013 express
  3. 3. Why QML ? wxWidget, GTK+, MFC, .Net, etc.
  4. 4. ● Easy to learn ● Easy to customize ● Easy to extension ● Plentiful UI interaction, animation, image processing
  5. 5. What is QML ? Qt Meta/ Modeling/ Mockup Language declarative javascript control
  6. 6. What is QtQuick ? Qt library provide type and functionality to QML
  7. 7. QtQuick for all QML types o Visual - Item, Rectangle, Text, Image, …etc. o Input - TextInput, MouseArea, IntValidator, ...etc. o Positioning - Column, Row, Grid,...etc. o Model/View - ListView, GridView, ListModel, ...etc. o Convenience - Timer, Connections, ... etc.
  8. 8. QML Submodule Local storage, Window, Dialogs, Controls, Layouts, Particles, XML List Model
  9. 9. Category of QML module ● https://qt-project.org/doc/qt-5- snapshot/modules-qml.html
  10. 10. QtCreator ● IDE for QML/C++ ● Kit (套件) for building o Qt version, compiler, device, other settings ● Set environment o path (C:QtQt5.3.25.3msvc2013_64_openglbin) o QTDIR (ex: C:QtQt5.3.25.3msvc2013_64_opengl)
  11. 11. QtCreator shortcuts ● ctrl + b: build ● ctrl + r: run ● ctrl + k: location ● ctrl + tab: switch file ● F1: go to document ● F2: go to symbol ● F4: switch between cpp & header
  12. 12. Basic type ● int, bool, real, double, string, url, variant, var ● color, font, date, point, size, rect ● https://qt-project.org/doc/qt-5- snapshot/qtqml-typesystem-basictypes.html
  13. 13. QML Object attributes http://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html
  14. 14. id, property, method, signal
  15. 15. Custom define property ● property <type> <name> ● signal handler: on<PropertyName>Changed
  16. 16. Custom define signal
  17. 17. Alias type Car.qml
  18. 18. Grouped property ● font, anchors, border
  19. 19. Attached property ● Component ● Keys, KeyNavigation
  20. 20. QML global object ● Qt QML type o Qt.quit() o Qt.binding(js func) o Qt.fromDateTime(data, format) o qsTr() o ... ● XMLHttpRequest ● Math, JSON, Date, Array
  21. 21. Property Binding Property with JS expression http://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html
  22. 22. Property Binding ● Lose binding if property is later assigned a static value ● Qt.binding
  23. 23. Inline js function
  24. 24. Javascript file import ● import external js file ● include js in js Common.js Extend.js
  25. 25. Connection signal ● signal “connect” to slot
  26. 26. Components ● Reusable element ● Inherited element import QtQuick 2.3 Rectangle { …. } Wheel.qml import QtQuick 2.3 Rectangle { Wheel { ... } } Car.qml import QtQuick 2.3 Car { …. } Taxi.qml
  27. 27. Qt Enterprise Components ● Qt Chart ● Qt Virtual Keyboard ● Qt Data Visualization ● Qt Quick Enterprise Controls ● http://www.qt.io/qt-features/
  28. 28. Positioning ● Row, Column, Grid, Flow
  29. 29. TextField/TextInput ● Mouse Selection ● Invalidator ● echo mode: password
  30. 30. State ● State is a set of batched changes from the default configuration
  31. 31. Transition ● A Transition defines the animations to be applied when a State change occurs
  32. 32. Model / View / Delegate
  33. 33. Model / View / Delegate ● ListModel, ListElement
  34. 34. Model / View / Delegate ● ListView, GridView, PathView
  35. 35. Model / View / Delegate ● Visualize item in the modelMyContactDelegate.qml
  36. 36. Model / View / Delegate ● Deleage can get value from model item role, attach property: index, attach property from viewer
  37. 37. Demo
  38. 38. Practice ● Flickr feed url: o http://api.flickr.com/services/feeds/photos_public.gn e?id=your_id&format=json&nojsoncallback=1 ● XMLHttpRequest object ● JSON.parse
  39. 39. Q & A

×