Qt Qt is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere ” first true Qt device from Nokia” Qt … is everywhere twitter.com/Qt4iOS Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt … is everywhere Qt Story points • • • • • • • • • • • • • Qt is everywhere Qt Qt Essentials & Add-ons Qt Lighthouse Qt Quick 1.0 QML Qt Declarative Qt Creator 1.x Open Source – qt.project.org Qt5 Qt Quick 2.0 Demo Q&A Qt Qt is a cross-platform application and UI framework with APIs for C++ programming and Qt Quick for rapid UI creation. Qt Essentials • • • • • • Qt Core Qt Network Qt OpenGl Qt Qml Qt Webkit Qt Multimedia • • • • • • Qt Sql Qt Location Qt Sensors Qt Service Framework Qt Publish & Subscribe Qt System Info Qt Add-ons • • • • • • • • • • • • Qt Widgets (desktop) Qt Quick Components Qt Svg Qt Xml Qt XmlPatterns Qt Script, tools Qt Concurrent Qt Print Support Qt Help Qt UiTools Qt Designer Qt ActiveQt (windows) • • • • • • • • • • • • Qt WebKit (WebKit1) Qt Multimedia Widgets Qt Feedback Qt 3D Qt Compositor Qt Wayland Qt Graphical Effects Qt Json DB Qt Mime Type Qt Organizer Qt Contacts Qt Versit Qt Lighthouse • Windowing system pushed to plug-ins • Easier porting and adaption to platforms • E.g. Used by the Qt / Android and iOS community ports Qt Quick 1.0 ♥☺ 01010001 01001101 01001100 Qt C++ Flash Mockups Photoshop Developers are from Mars Designers are from Venus Qt Quick 1.0 Fixing the UI design workflow Designer´s Idea Proof of Concept Realized on Device Qt Quick 1.0 QML QtDeclarative Qt User Interface Creation Kit Qt Quick 1.0 What´s so Quick about it ? Quick to Quick to Quick to Quick to Learn Iterate Render Extend Qt Quick 1.0 QML Qt C++ Qt Quick Designer* Qt QML • Declarative! • • • Very simple and intuitive • • • Uses signals and slots, properties Fun to use! JavaScript inspired • • Direct and Expressive language No construction detour (Tool and Quick Designer in perfect sync) 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++ Qt QML import Qt 4.7 Rectangle { width: 200; height: 200 gradient: Gradient { Library import with version Basic Visual element (Capitalized) property: value property: object GradientStop { position: 0.0 color: "lightsteelblue“ } SVG color names GradientStop { position: 1.0 color: "#0000FF“ Hex color notation } Element nesting } Text { id: myText Instance identifier text: 'QML <b>rocks</b>!‘ Rich text Anchor layouts anchors.right:parent.right anchors.top:parent.top font.pointSize:parent.width/10 } } Scope dependent resolution Property + expression binding Qt QML - States and Animations • A state is another name for specific property values in a set of items • • • A transition combines two states, from and to An animation is how the property values is smoothly changed from the first to second state • • (e.g. make the rectangle drop down and bounce before it is static again) PropertyAnimation key to other Animation types; • • • • E.g. the position of a red rectangle ColorAnimation, NumberAnimation Sequential- and ParallelAnimation can be used to control ordering Actions allow direct changes during animation Follow enables tracking values Qt QML - Elements Qt QML - Behavioral Primitives • Flickable • • Flipable • • Responds to mouse input (Gestures being researched) FocusScope • • Dual-state MouseArea • • • Like a scrollview, but touch Enable sub-element focus WebView • WebKit HTML engine Public © 2010 Nokia QtQuick.ppt / 2010-6 • • • • • • • • • • • • Positioners Column Row Grid Views ListView GridView PathView Models ListModel SqlQuery XmlListModel Qt Declarative • Native UI runtime • • • • Not to be confused with a web runtime or any other runtime Reads in the plain text QML file Translates QML to actual UI – which is actually a QGraphicsView scene Allows very tight and easy integration with existing Qt business logic Quick QML HTML QtScript Adobe Go Live Dreamweaver etc… C+ + Qt Creator QtDeclarative QtCore, QtNetwork, QtGui QtWebKit Qt Creator 2.1 • • • • • • Cross-platform IDE written in Qt Available for Windows, Mac OS and Linux Optimized to develop Qt based C++ & QML applications Introducing Qt Quick tooling with Qt Creator 2.1 Core component of the Nokia Qt SDK Used to develop cross-platform applications for: • Symbian • MeeGo • Windows • Mac OS X • Linux/X11 Qt Creator 2.1 Qt Creator covers complete application development life-cycle Design Code Get started Deploy Build Test Qt Creator 2.1 – welcome screen • • Qt Quick is a brand new technology Qt Creator provides all you need to get started: • • • • Tutorials & examples Manuals & reference documentation Integrated help in every step of the development life-cycle Wizards to create new Qt Quick applications Qt Creator 2.1 – User Interface Tutorials Mode selector Featured items (quick guide) Choose target Run application Examples Project wizards Qt Creator 2.1 - Integrated Help Example or tutorial code Example or tutorial documentation Qt Creator 2.1 - Manuals & Docs HTML based help files & manuals All available manuals Search in manuals Qt Creator 2.1 - Quick Project Wizards • Wizards guide users through • the project creation steps Available wizards: • • • Qt Quick UI pure QML project, recommended for designers Qt Quick Application app can be deployed to a device, can contain C++ code Custom QML Extension Plugin advanced project type for C++ developers who want to provide extension in Qt Quick UI projects Qt Creator 2.1 - Agile Collaboration • • • Allow designers and developers to use their preferred tools While making transfer of deliverables more easy Convert a Photoshop file into a single QML file with an Image or Text element for each layer Photoshop QML Export script Gimp QML Exporter Qt Creator 2.1 - Designer / • QML file generated by QML Exporter used in Qt Quick Designer Developer • QML Export script for Photoshop is feature complete – use it ;) Preserve layers (with their name) Text layers can be converted to Text elements Layer styles (i.e. Drop Shadow) are converted to images Qt Creator 2.1 - WYSIWYG Editor States Navigator Item Library Canvas Properties Qt Creator 2.1 - Item Library • Items displays QML elements grouped by type: • • • • • • • your own QML components on top basic elements (such as Image, Text) interaction elements: Focus Scope, Mouse Area Views: Grid, List & Path view Advanced items: Flickable, Flipable and Web View Resources displays images and other files that you copy to the project folder Drag & drop items from Library to your QML application canvas Qt Creator 2.1 - Properties • • • Top part of the Properties pane displays properties that are common to all elements, such as element type, position, size, visibility, and opacity. Layout allows you to set anchors and margins for elements Advanced offers transformations, such as scale and rotation Qt Creator 2.1 - Specific Element Properties • Some QML elements have a lot of element specific properties: • • • • • Rectangle Text TextInput Image These properties can be easily managed in the Property panel Qt Creator 2.1 - Powerful Code Editor • • • • • • • • Aids in creating, editing and navigating code Syntax checking In-line error indicators Context sensitive help Semantic Highlighting (types, local variables,..) Highlighting & folding of code blocks Code bookmarks Outline Project browser Outline (all elements of current code file) Context sensitive help Code Editor Semantic highlighting of QML elements or components Qt Creator 2.1 - Code Completion • • As you write code, Qt Creator suggests elements, properties, Ids and code snippets to complete the code Ctrl+Space triggers code completion at any time Qt Creator 2.1 - Snippets • • • Snippets generate code for every day tasks thus saving a lot of typing Code snippets can consist of multiple fields that you specify values for Select an item in the list and press Tab or Enter to complete the code automatically added code for QML states Qt Creator 2.1 – Qt Quick toolbars • Helpful toolbars for QML elements whose properties are hard to get without visual feedback i.e. colours, font styles, gradients or animations Qt Creator 2.1 – Qt Quick toolbars • Text • Rectangle • PropertyAnimation • Image • BorderImage Qt Creator 2.1 - Refactoring • • • Improve code readability and reduce complexity Refactor QML element : move an item and its functionality into a component (separate file) Refactor id: give an item a meaningful id and update all references to the old id new file automatically generated Qt Creator 2.1 - Fast Code Navigation Usages are highlighted Search Results display all locations (line number) where expression is used Double click on search result line to jump to actual code line (#30) Qt Creator 2.1 - Preview without Building • • • Fast development and test cycles Qt Quick UI projects don’t need to be built or compiled Just press Run to preview and test these projects with the QML Viewer on your desktop Qt Creator 2.1 - Debugger • Debug the JavaScript part of you QML application: • • • set breakpoints inspect variables with Locals and Watchers Both JavaScript and C++ parts can be debugged simultaneously Breakpoint Step through the code Values of variables Qt Creator 2.1 - Inspect & Change Running Application • • • Switch to Observer Mode in QML Viewer Navigate in your code by selecting items of interest in your application Small adjustments to QML can be applied to the running program! Allows fast UI tweaking, e.g. fixing geometry properties On-the-fly without restarting the application Hover box: id (type) of QML element Qt Creator 2.1 - Navigation Within Application and Code • Hover mouse over items of interest element is outlined with a blue line and hover box is displayed • Use Breadcrumb navigation or double click on element code editor jumps to the line where element is defined 1. Start in clocks.qml 2. Double click on hour image in Clock component in QML Viewer 3. Clock.qml is opened and cursor jumps to definition Qt Creator 2.1 - Build & Deploy Qt Quick Applications • • • • • Qt Quick UI projects are a great way to do initial prototyping without the need to compile your project Downside is that these project types cannot be deployed to devices or distributed via Ovi Store In order to do so you need to convert your project into a Qt Quick Application Qt Creator provides a Wizard to do so Build the same application (same code base) for multiple targets: • • Symbian Maemo Qt Creator 2.1 - Deploy a Qt Quick UI Project 1. 2. 3. 4. 5. Start the Qt Quick Application Wizard Choose a location for the project Select the Qt Versions (= targets) • Desktop, Symbian*, Maemo* Applications Options • Target specific options, such as icons or capabilities QML Sources • Select any QML file in your Qt Quick UI project • The complete project is imported and made available * Available if Nokia Qt SDK is installed Qt Creator 2.1 - Build for Multiple Targets • Qt Quick Applications need to be compiled • In order to do so Qt Creator adds a lot of extra code (i.e. handling different platform settings and a QtDeclarativeView) • Designers are not bothered with details and can concentrate on QML files • Choose target platform (i.e. Symbian, Maemo or MeeGo) and Run Qt Creator 2.1 - Simulator • • • Qt Quick Application cannot be previewed in QML Viewer Use the Qt Simulator of the Nokia Qt SDK instead Qt Simulator can be chosen as a target in Qt Creator Qt Creator 2.1 - Deploy • • Installation files (SIS or debian packages) are created 3 signing options: • • • Not Signed Self Signed Certificate Custom Certificate • Run will automatically deploy your application to a connected device • Packages for distribution via Ovi Store can be built Create Smart Installer packages • Qt Creator 2.1 – QML Exporter • Photoshop QML Export script http://www.youtube.com/watch_popup?v=2Hgo9CWV400&vq=hd720#t=33 • Gimp QML Exporter http://labs.qt.nokia.com/2010/10/19/exporting-qml-from-photoshop-and-gimp/ Qt Open @ qt.project.org • Open Development • Open Governance Increased • • • • Fair Transparent Inclusive Meritocratic Richer releases stability Broader Qt Ecosystem Shared roadmapping More opportunities for Qt experts Easier customization Qt 5 • Qt 5.0 will be the foundation for a new way of developing applications, where Qt Quick is in the center of Qt. • Qt 5 continues to offer all of the power of native Qt C++, and we don’t want Qt 5 to be disruptive for existing code developed for Qt 4. • Qt 5 enables highly sophisticated user experiences, offering applications the full capabilities of OpenGL/OpenGL ES graphics acceleration. • In this respect, Qt 5.0 is a feature-driven release with time-to-market requirements especially for embedded environments. Qt Quick 2.0 < Shader demo > See QML version Qt Quick 2.0 < Particles demo > See QML version Qt Quick 2.0 < Path demo > See QML version Qt Quick 2.0 < 3D demo > See QML version Demo Q&A Thank You