SlideShare a Scribd company logo
1 of 10
QtQml
Outline
• What is Qt ?
• What is Qml?
• Qml Elements
• Qt creator
• Qt on Android
What is Qt ?
• Cross-platform GUI application framework
• Written in C++
• Open Source
• Qt modules: Qt Core, Qt GUI, Qt QML, Qt Quick, Qt
Network, Qt Multimedia, Qt WebKit, Qt SQL …
• Software developed by Qt
– Perforce , tesla , VLC , google earth, Mathematica,
jewelrybox …
What is Qml ?
• Qt Meta Language
• JavaScript-based, declarative language for
designing user interface–centric app
• Support by QtQuick (the standard library for
writing QML applications)
• Mainly for mobile app
• Qml element easily to be extended by javascript
and C++ class
• Qml can use various qt modules
Qt Elements
• Item– basic element
• Rectangular – inherit from items
• Component --encapsulated QML types
• Animation
• Model --contains the data and its structure
• Delegate--dictates how the data should appear in the view
• View--a container that displays the data
– Pathview
– Grid view
– List view
Qt creator
• IDE
• Layout
• Example :
– calqlatr (java script)
– Calendar (c++)
QML on Android
• Support for native android style with Qt Quick Controls ,not
yet included material design
– http://doc.qt.io/qt-5/android-support.html
– http://doc.qt.io/qt-5/qtquickcontrols-
platformnotes.html#android-style
• Support most of Qt modules: multimedia , sensor reading,
GPS , bluetooth…
– http://doc.qt.io/qt-5/examples-android.html
• Develop on Qt creator
Qt Android Extras
• The way to call the android java api
• Example : qt notifier
http://doc.qt.io/qt-5/qtandroidextras-
notification-notificationclient-cpp.html
• Qt thread & Android thread
– http://www.kdab.com/qt-android-episode-7/
Pros
• Cross-platform
• powerful UI libraries
• IDE: Qt Creator
• Native-look
• Performance is the same with (maybe better than)
native app
– Qt Core is written in high performance C++
– Utilize hardware acceleration
– http://stackoverflow.com/questions/22460127/how-slow-or-fast-is-qt-
mobile-for-android
– http://www.developereconomics.com/cross-platform-apps-qt-vs-
html5/
– http://v-play.net/2014/10/qt-vs-html5-cross-platform-apps/
cons
• Size is large
– 35MB for hello world
– http://achipa.blogspot.tw/2014/11/native-ui-in-
qt-on-android-without.html
• Need to compile QMl
• Licensing is confusing
– https://blog.qt.io/blog/2009/11/30/qt-making-
the-right-licensing-decision/

More Related Content

What's hot

Meet Qt 6.0
Meet Qt 6.0 Meet Qt 6.0
Meet Qt 6.0
Qt
 

What's hot (20)

Best Practices in Qt Quick/QML - Part IV
Best Practices in Qt Quick/QML - Part IVBest Practices in Qt Quick/QML - Part IV
Best Practices in Qt Quick/QML - Part IV
 
Basics of Model/View Qt programming
Basics of Model/View Qt programmingBasics of Model/View Qt programming
Basics of Model/View Qt programming
 
Best Practices in Qt Quick/QML - Part II
Best Practices in Qt Quick/QML - Part IIBest Practices in Qt Quick/QML - Part II
Best Practices in Qt Quick/QML - Part II
 
Qt 5 - C++ and Widgets
Qt 5 - C++ and WidgetsQt 5 - C++ and Widgets
Qt 5 - C++ and Widgets
 
Qt for beginners part 1 overview and key concepts
Qt for beginners part 1   overview and key conceptsQt for beginners part 1   overview and key concepts
Qt for beginners part 1 overview and key concepts
 
[Webinar] QtSerialBus: Using Modbus and CAN bus with Qt
[Webinar] QtSerialBus: Using Modbus and CAN bus with Qt[Webinar] QtSerialBus: Using Modbus and CAN bus with Qt
[Webinar] QtSerialBus: Using Modbus and CAN bus with Qt
 
Qt Application Programming with C++ - Part 2
Qt Application Programming with C++ - Part 2Qt Application Programming with C++ - Part 2
Qt Application Programming with C++ - Part 2
 
Qt Application Programming with C++ - Part 1
Qt Application Programming with C++ - Part 1Qt Application Programming with C++ - Part 1
Qt Application Programming with C++ - Part 1
 
Introduction to the Qt State Machine Framework using Qt 6
Introduction to the Qt State Machine Framework using Qt 6Introduction to the Qt State Machine Framework using Qt 6
Introduction to the Qt State Machine Framework using Qt 6
 
Introduction to Qt
Introduction to QtIntroduction to Qt
Introduction to Qt
 
Qt multi threads
Qt multi threadsQt multi threads
Qt multi threads
 
Best Practices in Qt Quick/QML - Part III
Best Practices in Qt Quick/QML - Part IIIBest Practices in Qt Quick/QML - Part III
Best Practices in Qt Quick/QML - Part III
 
Qt and QML performance tips & tricks for Qt 4.7
Qt and QML performance tips & tricks for Qt 4.7Qt and QML performance tips & tricks for Qt 4.7
Qt and QML performance tips & tricks for Qt 4.7
 
Meet Qt 6.0
Meet Qt 6.0 Meet Qt 6.0
Meet Qt 6.0
 
Qt Technical Presentation
Qt Technical PresentationQt Technical Presentation
Qt Technical Presentation
 
Introduction to Qt programming
Introduction to Qt programmingIntroduction to Qt programming
Introduction to Qt programming
 
Lessons Learned from Building 100+ C++/Qt/QML Devices
Lessons Learned from Building 100+ C++/Qt/QML DevicesLessons Learned from Building 100+ C++/Qt/QML Devices
Lessons Learned from Building 100+ C++/Qt/QML Devices
 
02 - Basics of Qt
02 - Basics of Qt02 - Basics of Qt
02 - Basics of Qt
 
Qt for Beginners Part 3 - QML and Qt Quick
Qt for Beginners Part 3 - QML and Qt QuickQt for Beginners Part 3 - QML and Qt Quick
Qt for Beginners Part 3 - QML and Qt Quick
 
QVariant, QObject — Qt's not just for GUI development
QVariant, QObject — Qt's not just for GUI developmentQVariant, QObject — Qt's not just for GUI development
QVariant, QObject — Qt's not just for GUI development
 

Viewers also liked

Viewers also liked (15)

QtQuick Day 4
QtQuick Day 4QtQuick Day 4
QtQuick Day 4
 
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
 
QML demo for makerpro (1)
QML demo for makerpro (1)QML demo for makerpro (1)
QML demo for makerpro (1)
 
What's unique to Qt
What's unique to QtWhat's unique to Qt
What's unique to Qt
 
QtQuick Day 2
QtQuick Day 2QtQuick Day 2
QtQuick Day 2
 
QtQuick Day 3
QtQuick Day 3QtQuick Day 3
QtQuick Day 3
 
Intro to QML / Declarative UI
Intro to QML / Declarative UIIntro to QML / Declarative UI
Intro to QML / Declarative UI
 
Qt quick (qml)
Qt quick (qml)Qt quick (qml)
Qt quick (qml)
 
Qt Creator Bootcamp
Qt Creator BootcampQt Creator Bootcamp
Qt Creator Bootcamp
 
Targeting Android with Qt
Targeting Android with QtTargeting Android with Qt
Targeting Android with Qt
 
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
Build Cutting edge Mobile Apps using QML and JavaScript for MeeGo N9: Linux F...
 
QtQuick Day 1
QtQuick Day 1QtQuick Day 1
QtQuick Day 1
 
Qt for beginners part 4 doing more
Qt for beginners part 4   doing moreQt for beginners part 4   doing more
Qt for beginners part 4 doing more
 
Qt Application Development
Qt Application DevelopmentQt Application Development
Qt Application Development
 
Practical QML - Key Navigation, Dynamic Language and Theme Change
Practical QML - Key Navigation, Dynamic Language and Theme ChangePractical QML - Key Navigation, Dynamic Language and Theme Change
Practical QML - Key Navigation, Dynamic Language and Theme Change
 

Similar to Qt Qml

Plasmaquick Workshop - FISL 13
Plasmaquick Workshop - FISL 13Plasmaquick Workshop - FISL 13
Plasmaquick Workshop - FISL 13
Daker Fernandes
 
下午3 intel fenghaitao_mee_go api and application development
下午3 intel fenghaitao_mee_go api and application development下午3 intel fenghaitao_mee_go api and application development
下午3 intel fenghaitao_mee_go api and application development
csdnmobile
 
Necessitas - Qt on Android - from FSCONS 2011
Necessitas - Qt on Android - from FSCONS 2011Necessitas - Qt on Android - from FSCONS 2011
Necessitas - Qt on Android - from FSCONS 2011
Johan Thelin
 

Similar to Qt Qml (20)

Plasmaquick Workshop - FISL 13
Plasmaquick Workshop - FISL 13Plasmaquick Workshop - FISL 13
Plasmaquick Workshop - FISL 13
 
下午3 intel fenghaitao_mee_go api and application development
下午3 intel fenghaitao_mee_go api and application development下午3 intel fenghaitao_mee_go api and application development
下午3 intel fenghaitao_mee_go api and application development
 
cpp-2013 #18 Qt Part 2
cpp-2013 #18 Qt Part 2cpp-2013 #18 Qt Part 2
cpp-2013 #18 Qt Part 2
 
Qt Automotive Suite - under the hood // Qt World Summit 2017
Qt Automotive Suite - under the hood // Qt World Summit 2017Qt Automotive Suite - under the hood // Qt World Summit 2017
Qt Automotive Suite - under the hood // Qt World Summit 2017
 
Qt programming-using-cpp
Qt programming-using-cppQt programming-using-cpp
Qt programming-using-cpp
 
Advanced Visualization with OpenGL in Oil & Gas
Advanced Visualization with OpenGL in Oil & GasAdvanced Visualization with OpenGL in Oil & Gas
Advanced Visualization with OpenGL in Oil & Gas
 
PyData NYC 2015 Presentation
PyData NYC 2015 PresentationPyData NYC 2015 Presentation
PyData NYC 2015 Presentation
 
Necessitas - Qt on Android - from FSCONS 2011
Necessitas - Qt on Android - from FSCONS 2011Necessitas - Qt on Android - from FSCONS 2011
Necessitas - Qt on Android - from FSCONS 2011
 
Qt for S60
Qt for S60Qt for S60
Qt for S60
 
Google web toolkit gwt training
Google web toolkit gwt trainingGoogle web toolkit gwt training
Google web toolkit gwt training
 
Cutest technology of them all - Forum Nokia Qt Webinar December 2009
Cutest technology of them all - Forum Nokia Qt Webinar December 2009Cutest technology of them all - Forum Nokia Qt Webinar December 2009
Cutest technology of them all - Forum Nokia Qt Webinar December 2009
 
Dot net platform and dotnet core fundamentals
Dot net platform and dotnet core fundamentalsDot net platform and dotnet core fundamentals
Dot net platform and dotnet core fundamentals
 
Witekio Qt and Android
Witekio Qt and AndroidWitekio Qt and Android
Witekio Qt and Android
 
Qt quick at Cybercom Developer Day 2010 by Alexis Menard 7.9.2010
Qt quick at Cybercom Developer Day 2010 by Alexis Menard 7.9.2010Qt quick at Cybercom Developer Day 2010 by Alexis Menard 7.9.2010
Qt quick at Cybercom Developer Day 2010 by Alexis Menard 7.9.2010
 
WSO2Con USA 2015: End-to-end Microservice Architecture with WSO2 Identity Ser...
WSO2Con USA 2015: End-to-end Microservice Architecture with WSO2 Identity Ser...WSO2Con USA 2015: End-to-end Microservice Architecture with WSO2 Identity Ser...
WSO2Con USA 2015: End-to-end Microservice Architecture with WSO2 Identity Ser...
 
Radu vunvulea building and testing windows 8 metro style applications using ...
Radu vunvulea  building and testing windows 8 metro style applications using ...Radu vunvulea  building and testing windows 8 metro style applications using ...
Radu vunvulea building and testing windows 8 metro style applications using ...
 
Qt and the Red Flag Linux Distro
Qt and the Red Flag Linux DistroQt and the Red Flag Linux Distro
Qt and the Red Flag Linux Distro
 
Evolution of a cloud start up: From C# to Node.js
Evolution of a cloud start up: From C# to Node.jsEvolution of a cloud start up: From C# to Node.js
Evolution of a cloud start up: From C# to Node.js
 
Meet qt intro
Meet qt introMeet qt intro
Meet qt intro
 
Meet qt intro
Meet qt introMeet qt intro
Meet qt intro
 

Qt Qml

  • 2. Outline • What is Qt ? • What is Qml? • Qml Elements • Qt creator • Qt on Android
  • 3. What is Qt ? • Cross-platform GUI application framework • Written in C++ • Open Source • Qt modules: Qt Core, Qt GUI, Qt QML, Qt Quick, Qt Network, Qt Multimedia, Qt WebKit, Qt SQL … • Software developed by Qt – Perforce , tesla , VLC , google earth, Mathematica, jewelrybox …
  • 4. What is Qml ? • Qt Meta Language • JavaScript-based, declarative language for designing user interface–centric app • Support by QtQuick (the standard library for writing QML applications) • Mainly for mobile app • Qml element easily to be extended by javascript and C++ class • Qml can use various qt modules
  • 5. Qt Elements • Item– basic element • Rectangular – inherit from items • Component --encapsulated QML types • Animation • Model --contains the data and its structure • Delegate--dictates how the data should appear in the view • View--a container that displays the data – Pathview – Grid view – List view
  • 6. Qt creator • IDE • Layout • Example : – calqlatr (java script) – Calendar (c++)
  • 7. QML on Android • Support for native android style with Qt Quick Controls ,not yet included material design – http://doc.qt.io/qt-5/android-support.html – http://doc.qt.io/qt-5/qtquickcontrols- platformnotes.html#android-style • Support most of Qt modules: multimedia , sensor reading, GPS , bluetooth… – http://doc.qt.io/qt-5/examples-android.html • Develop on Qt creator
  • 8. Qt Android Extras • The way to call the android java api • Example : qt notifier http://doc.qt.io/qt-5/qtandroidextras- notification-notificationclient-cpp.html • Qt thread & Android thread – http://www.kdab.com/qt-android-episode-7/
  • 9. Pros • Cross-platform • powerful UI libraries • IDE: Qt Creator • Native-look • Performance is the same with (maybe better than) native app – Qt Core is written in high performance C++ – Utilize hardware acceleration – http://stackoverflow.com/questions/22460127/how-slow-or-fast-is-qt- mobile-for-android – http://www.developereconomics.com/cross-platform-apps-qt-vs- html5/ – http://v-play.net/2014/10/qt-vs-html5-cross-platform-apps/
  • 10. cons • Size is large – 35MB for hello world – http://achipa.blogspot.tw/2014/11/native-ui-in- qt-on-android-without.html • Need to compile QMl • Licensing is confusing – https://blog.qt.io/blog/2009/11/30/qt-making- the-right-licensing-decision/