1. Qt

2. Qt is everywhere

3. Qt
… is everywhere

4. Qt
… is everywhere

5. Qt
… is everywhere

6. Qt
… is everywhere

7. Qt
… is everywhere

8. Qt
… is everywhere

9. Qt
… is everywhere
” first true Qt device
from Nokia”

10. Qt
… is everywhere
twitter.com/Qt4iOS

11. Qt
… is everywhere

12. Qt
… is everywhere

13. Qt
… is everywhere

14. Qt
… is everywhere

15. Qt
… is everywhere

16. Qt
… is everywhere

17. Qt
… is everywhere

18. Qt
… is everywhere

19. Qt
… is everywhere

20. 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

21. Qt
Qt is a cross-platform application and UI framework with APIs for C++ programming and Qt Quick for rapid UI creation.

22. 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

23. 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

24. 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

25. Qt Quick 1.0 Developers are from Mars Designers are from Venus ♥☺ 
Qt C++
Flash Mockups Photoshop
♥☺ 

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

27. Qt User Interface Creation Kit
QML
QtDeclarative
Quick 1.0

28. 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

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

30. 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

31. 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

32. QML - States and AnimationsQt
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: }
ColorAnimation { matchProperties: "color"; duration: 1000 }

33. Qt
QML - Elements

34. QML - Behavioral PrimitivesQt
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
© Nokia QtQuick.ppt /

35. 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

36. 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

37. Qt Creator covers complete application development life-cycle
Design
Code
Get started
Deploy
Build
Test

38. Creator 2.1 – welcome screenQt
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

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

40. Creator 2.1 - Integrated HelpQt
Creator Integrated Help
Example or tutorial code
Example or tutorial documentation

41. Creator 2.1 - Manuals & DocsQt
Creator Manuals & Docs
HTML based help files & manuals
All available manuals
Search in manuals

42. 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

43. 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

44. Creator 2.1 - Designer / DeveloperQt
Creator 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

45. Creator 2.1 - WYSIWYG EditorQt
Creator WYSIWYG Editor
States
Properties
Navigator
Item Library
Canvas

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

47. 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

48. Creator 2.1 - Specific Element PropertiesQt
Creator 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

49. Outline (all elements of current code file)Qt
Creator 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

50. Creator 2.1 - Code CompletionQt
Creator 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

51. automatically added code for QML statesQt
Creator 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

52. 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

53. Creator 2.1 – Qt Quick toolbars
Text
Rectangle
PropertyAnimation
Image
BorderImage

54. 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

55. Creator 2.1 - Fast Code NavigationQt
Creator 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)

56. 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

57. Qt
Creator 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

58. 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

59. Creator 2.1 - Navigation Within Application and CodeQt
Creator 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

60. 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

61. 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

62. Creator 2.1 - Build for Multiple TargetsQt
Creator 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

63. Qt
Creator 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

64. Qt
Creator 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

65. Qt Creator 2.1 – QML Exporter
Photoshop QML Export script
Gimp QML Exporter

66. 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

67. 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.

68. < Shader demo > See QML versionQt
Quick 2.0
< Shader demo >
See QML version

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

70. < Path demo > See QML versionQt
Quick 2.0
< Path demo >
See QML version

71. < 3D demo > See QML versionQt
Quick 2.0
< 3D demo >
See QML version

72. Demo

73. Q & A

74. Thank You