Hello, QML

1,111 views

Published on

Introduction of QML

Published in: Engineering
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,111
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
35
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • QML object attributes: http://qt-project.org/doc/qt-5/qtqml-syntax-objectattributes.html
    Scope and Naming resolution: http://qt-project.org/doc/qt-5/qtqml-documents-scope.html
  • 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

    ×