Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Hello, QML

1.401 Aufrufe

Veröffentlicht am

Introduction of QML

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

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

×