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