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 Developers are from Mars Designers are from Venus ♥☺  01010001 01001101 01001100 Qt C++ Flash Mockups Photoshop ♥☺ 

Fixing the UI design workflow Qt Quick 1.0 Fixing the UI design workflow Designer´s Idea Proof of Concept Realized on Device

Qt User Interface Creation Kit QML QtDeclarative Quick 1.0

What´s so Quick about it ? Qt Quick 1.0 What´s so Quick about it ? Quick to Learn Quick to Iterate Quick to Render Quick to Extend

Qt Quick 1.0 QML Qt C++ Qt Quick Designer*

Qt QML Declarative! Very simple and intuitive JavaScript inspired 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++ No construction detour (Tool and Editor in perfect sync) -Qt Designer typically has a construction detour where the XML .ui file is converted (using uic) to a ui_*.h file that can be used in C++ Signals and slots is an implementation of the observer pattern QML and JavaScript Signals is like events Properties are similar to javascript signals Slots are function calls in javascript Instead of a DOM element, you would have access to a id-ed QML Item element, similar to a <div id=…> in HTML

Qt QML Library import with version Basic Visual element (Capitalized) import Qt 4.7 Rectangle { width: 200; height: 200 gradient: Gradient { GradientStop { position: 0.0 color: "lightsteelblue“ } GradientStop { position: 1.0 color: "#0000FF“ } Text { id: myText text: 'QML <b>rocks</b>!‘ anchors.right:parent.right anchors.top:parent.top font.pointSize:parent.width/10 Library import with version Basic Visual element (Capitalized) property: value property: object SVG color names Hex color notation Element nesting Instance identifier import Qt 4.6 Rectangle { width: 200; height: 200 gradient: Gradient { GradientStop { position: 0.0 color: "lightsteelblue" } position: 1.0 color: "blue" } } Text { id: myText text: 'QML <b>rocks</b>!' anchors.right:parent.right anchors.top:parent.top font.pointSize:16 Rich text Anchor layouts Scope dependent resolution Property + expression binding

QML - States and Animations Qt QML - States and Animations A state is another name for specific property values in a set of items E.g. the position of a red rectangle 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; ColorAnimation, NumberAnimation Sequential- and ParallelAnimation can be used to control ordering Actions allow direct changes during animation Follow enables tracking values import Qt 4.6 Rectangle { width: 200; height: 200 MouseRegion { id: mouseRegion anchors.fill:parent } gradient: Gradient { GradientStop { position: 0.0 color: "lightsteelblue" } position: 1.0 color: "steelblue" } Text { id: myText x: 61 y: 30 text: 'QML <b>rocks</b>!' font.pointSize:16 states: [ State { when: mouseRegion.pressed PropertyChanges { x: 59 y: 164 color: "#ff0000" target: myText name: "State1" ] transitions: [ Transition { ParallelAnimation { NumberAnimation { matchProperties: "y,x"; duration: 1000 } ColorAnimation { matchProperties: "color"; duration: 1000 }

Qt QML - Elements

QML - Behavioral Primitives Qt QML - Behavioral Primitives Flickable Like a scrollview, but touch Flipable Dual-state MouseArea Responds to mouse input (Gestures being researched) FocusScope Enable sub-element focus WebView WebKit HTML engine Positioners Column Row Grid Views ListView GridView PathView Models ListModel SqlQuery XmlListModel Public © 2010 Nokia QtQuick.ppt / 2010-6

Qt Declarative Native UI runtime Reads in the plain text QML file 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

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 covers complete application development life-cycle Design Code Get started Deploy Build Test

Creator 2.1 – welcome screen 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

Creator 2.1 – User Interface Qt Creator 2.1 – User Interface Mode selector Run application Tutorials Featured items (quick guide) Choose target Examples Project wizards

Creator 2.1 - Integrated Help Qt Creator 2.1 - Integrated Help Example or tutorial code Example or tutorial documentation

Creator 2.1 - Manuals & Docs 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

Creator 2.1 - Designer / Developer Qt Creator 2.1 - Designer / Developer QML file generated by QML Exporter used in Qt Quick Designer 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

Creator 2.1 - WYSIWYG Editor Qt Creator 2.1 - WYSIWYG Editor States Properties Navigator Item Library Canvas

Qt Creator 2.1 - Item Library   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

Creator 2.1 - Specific Element Properties 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

Outline (all elements of current code file) 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 Context sensitive help Code Editor Outline (all elements of current code file) Semantic highlighting of QML elements or components

Creator 2.1 - Code Completion 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

automatically added code for QML states 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

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

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

Creator 2.1 - Fast Code Navigation 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

Creator 2.1 - Navigation Within Application and Code 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

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 MeeGo

Creator 2.1 - Deploy a Qt Quick UI Project 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

Creator 2.1 - Build for Multiple Targets 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 Fair Transparent Inclusive Meritocratic Broader Qt Ecosystem Richer releases Increased stability More opportunities for Qt experts Easier customization Shared roadmapping

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.

< Shader demo > See QML version Qt Quick 2.0 < Shader demo > See QML version

< Particles demo > Qt Quick 2.0 < Particles demo > See QML version

< Path demo > See QML version Qt Quick 2.0 < Path demo > See QML version

< 3D demo > See QML version Qt Quick 2.0 < 3D demo > See QML version

Demo

Q & A

Thank You