Qt quick at Cybercom Developer Day 2010 by Alexis Menard 7.9.2010


Published on

Alexis Menard´s presentation at Cybercom Developer Day 2010

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Qt quick at Cybercom Developer Day 2010 by Alexis Menard 7.9.2010

  1. 1. Qt Quick<br />A deep dive...<br />
  2. 2. Agenda<br />Introduction<br />Opportunities<br />Meet QML<br />Tooling support<br />Language basics<br />Engine Details<br />Integrating Native Components (e.g. Plasma)<br />
  3. 3. About Me<br />Qt Developer since 2008, based in Oslo<br />Mainly work on QGraphicsView and Widgets<br />Involved in QML development<br />Recently moved to QtWebKit/WebKit development<br />Started KDE development in 2006 with KPlato<br />Plasma developer since 2007<br />
  4. 4. French Fast Food<br />
  5. 5. Norwegian Gastronomy<br />
  6. 6. Qt Background & Opportunities in UI development<br />
  7. 7. Qt Background & Opportunities in UI development<br />
  8. 8. Qt Background & Opportunities in UI development<br />Qt comes from the desktop world<br />Initially designed to solve building a UI on Motif + Windows 15 years ago<br />Component-based architecture not truly cross-platform<br />Doesn’t fit with differentiated UI’s<br />Collaborating with Designers can be difficult<br />Designers speak a different language, use other tools<br />Imperative languages can be counter-productive<br />steps to reach a desired result - contrary to expressing what L&F directly<br />Canvas-based architectures becoming prevalent<br />Animations, fluid Transformations, resolution more UI differentiation<br />Hardware capabilities converging, UI form-factors diverging<br />
  9. 9. Meet QML<br />Qt Quick is an umbrella term for QtDeclarative, QML and Creator<br />QML = Qt Meta-Object Language<br />A new way to create Qt UI’s<br />Declarative Language (JavaScript inspired)<br />Supports JavaScript<br />Intuitive and Fun to use!<br />Similar structure to HTML (but it’s not the same!)<br />Components are created from smaller order / simpler elements<br />Build your own button<br />Each item is independently accessible<br />QGraphicsView (canvas) base<br />Supports States and Animated Transitions<br />Configurations of properties, and interpolating between them<br />
  10. 10. Why Qt Quick?<br />Ease the creation of animated user interface<br />Bridge the gap in Qt for mobile development<br />Focus on performance<br />All platforms : desktop and embedded<br />More productivity<br />Bring designers and developers together<br />Empower designers to create real apps<br />
  11. 11. Tooling support<br />“qmlviewer” allows loading a .qml file<br />and loads plugins for extending semantics dynamically<br />Qt Creator with great QML support<br />Project Wizard<br />Syntax Highlighting<br />Error checking<br />Help lookup<br />Code completion and snippets<br />WYSIWYG graphical editor<br />And meanwhile, in research...<br />
  12. 12. Demo!<br />
  13. 13. QML Language Basics<br />Declarative!<br />Direct and Expressive language<br />No construction detour (Tool and Quick Designer in perfect sync)<br />Very simple and intuitive<br />Uses signals and slots, properties<br />Fun to use!<br />JavaScript inspired<br />Tap into existing knowledge<br />Built on top of C++<br />All QML elements are implemented in Qt using C++<br />QML can very easily be customized and extended from C++ without NPAPI intricacies<br />
  14. 14. States and Transitions<br />A state is another name for specific property values in a set of item<br />A transition combines two states, from and to<br />An animation is how the property values is smoothly changed from the first to second state<br />PropertyAnimation key to other Animation types;<br />ColorAnimation, NumberAnimation<br />Sequential- and ParallelAnimation can be used to control ordering<br />Actions allow direct changes during animation<br />Follow enables tracking values<br />
  15. 15. Demo!<br />
  16. 16. QML is Web-enabled<br />SVG support<br />PNG, JPEG, etc<br />JavaScript functionality using JavaScriptCore<br />XmlHttpRequest for AJAX-functionality<br /><div id=…> functionality ( Item { id:… }<br />QML allows parent and children[] accessors similar to CSS<br />QML items can anchor/chain edges to other items’ anchor lines<br />Synchronous API of the HTML5 Web Database API<br />
  17. 17. QML Elements<br />
  18. 18. QML Engine Details<br />QML is<br />Description of an object tree with properties<br />Property bindings<br />QMLEngine features<br />Script execution (JavaScriptCore)<br />Network access (HTTP, URI’s, XmlHttpRequest, etc)<br />Import control for custom libraries<br />Debugging tooling<br />Property inspector, framerate tracing, console output to name a few…<br />Parser interface<br />Key classes<br />QDeclarativeEngine<br />QDeclarativeComponent<br />QObject<br />
  19. 19. C++ Bindings<br />Exposing your C++ to QML<br />QObjects, !abstract, default constructor<br />Exposing C++ instance to QML<br />Context are key to correct behavior<br />determines scope resolution of variables and script execution<br />QML is Easy to integrate into existing Qt UI code<br />QML_DECLARE_TYPE ()int qmlRegisterType ( const char * uri, int versionMajor,<br />int versionMinor,<br />const char * qmlName )<br />QDeclarativeView view;<br />QDeclarativeContext *context = view.rootContext();<br />context->setContextProperty("backgroundColor", QColor(Qt::yellow));<br />
  20. 20. Demo!<br />
  21. 21. Plasma and QML<br />All Plasma widgets are available in QML<br />Like any QGraphicsWidget<br />You can connect to Plasma::DataEngines from QML to get data<br />Theming support<br />You can create applets in QML, package it and share it on kde-apps.org<br />
  22. 22. Demo!<br />
  23. 23. What's coming next?<br />Multitouch<br />More Qt Mobility APIs accessible trough QML<br />Qt Components<br />Bringing more advanced elements in QML (PushButton, CheckBox, Slider...)<br />Qt/3D with QML<br />Vahalla for performance improvements<br />
  24. 24. Questions?<br />Want to contribute and get involved in QML?<br />IRC chat on #qt-qml on irc.freenode.net<br />Sign up for out qt-qml email list at lists.trolltech.com/mailman/listinfo/qt-qml<br />Want to contribute and get involved in Plasma?<br />plasma-devel@kde.org<br />#plasma on freenode<br />Code : /playground/base/plasma/shells/mobile/<br />Alexis Menard : menard@kde.org, alexis.menard@nokia.com<br />