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