Your SlideShare is downloading. ×
0
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Qt quickatlinuxcollaborationsummit2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Qt quickatlinuxcollaborationsummit2010

1,138

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,138
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
50
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Rapid Application Development with Qt Quick Henrik Hartz Monday, April 26, 2010 1
  • 2. Agenda • Background • Structure of a Quick App • Hello Elements • Integrating with Native code • Hello Device • Adding New Semantics • Hello Widgets Monday, April 26, 2010 2
  • 3. Background QWidget QGraphicsView Components Controls come from Low-level API Convenience of prebuilt desktop components Controls are boxed Close to hardware C++ Controls are for Mouse Cumbersome to implement Difficult to customize fluid UI Controls are heavyweight Limited API to push UX-specific hardware capapbilities Easy to shoot yourself in the foot Monday, April 26, 2010 3
  • 4. Qt Quick App QML QtDeclarativeView Java UI JavaScriptCore Script QtDeclarative QtWebKit QtSVG QtOpenGL QtGui QtXmlPatterns QtNetwork QtXml QtScript QtSQL QtCore System Libs Monday, April 26, 2010 4
  • 5. Qt Meta-Object Language import Qt 4.7 import "content" Rectangle { color: "#545454" width: 300; height: 300 // Dial with a slider to adjust it Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } Rectangle { id: container anchors.bottom: parent.bottom; anchors.bottomMargin: 10 anchors.left: parent.left; anchors.leftMargin: 20 anchors.right: parent.right; anchors.rightMargin: 20; height: 16 gradient: Gradient { GradientStop { position: 0.0; color: "gray" } GradientStop { position: 1.0; color: "white" } } radius: 8; opacity: 0.7; smooth: true Rectangle { id: slider x: 1; y: 1; width: 30; height: 14 radius: 6; smooth: true gradient: Gradient { GradientStop { position: 0.0; color: "#424242" } GradientStop { position: 1.0; color: "black" } } MouseArea { anchors.fill: parent drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 } } } } Monday, April 26, 2010 5
  • 6. Qt Meta-Object Language import Qt 4.7 Built-in import "content" Elements Rectangle { color: "#545454" width: 300; height: 300 // Dial with a slider to adjust it Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } Rectangle { id: container anchors.bottom: parent.bottom; anchors.bottomMargin: 10 anchors.left: parent.left; anchors.leftMargin: 20 anchors.right: parent.right; anchors.rightMargin: 20; height: 16 gradient: Gradient { GradientStop { position: 0.0; color: "gray" } GradientStop { position: 1.0; color: "white" } } radius: 8; opacity: 0.7; smooth: true Rectangle { id: slider x: 1; y: 1; width: 30; height: 14 radius: 6; smooth: true gradient: Gradient { GradientStop { position: 0.0; color: "#424242" } GradientStop { position: 1.0; color: "black" } } MouseArea { anchors.fill: parent drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 } } } } Monday, April 26, 2010 5
  • 7. Qt Meta-Object Language import Qt 4.7 import "content" Local Elements Rectangle { color: "#545454" width: 300; height: 300 // Dial with a slider to adjust it Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } Rectangle { id: container anchors.bottom: parent.bottom; anchors.bottomMargin: 10 anchors.left: parent.left; anchors.leftMargin: 20 anchors.right: parent.right; anchors.rightMargin: 20; height: 16 gradient: Gradient { GradientStop { position: 0.0; color: "gray" } GradientStop { position: 1.0; color: "white" } } radius: 8; opacity: 0.7; smooth: true Rectangle { id: slider x: 1; y: 1; width: 30; height: 14 radius: 6; smooth: true gradient: Gradient { GradientStop { position: 0.0; color: "#424242" } GradientStop { position: 1.0; color: "black" } } MouseArea { anchors.fill: parent drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 } } } } Monday, April 26, 2010 5
  • 8. Qt Meta-Object Language import Qt 4.7 import "content" Rectangle { Toplevel color: "#545454" Window width: 300; height: 300 // Dial with a slider to adjust it Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } Rectangle { id: container anchors.bottom: parent.bottom; anchors.bottomMargin: 10 anchors.left: parent.left; anchors.leftMargin: 20 anchors.right: parent.right; anchors.rightMargin: 20; height: 16 gradient: Gradient { GradientStop { position: 0.0; color: "gray" } GradientStop { position: 1.0; color: "white" } } radius: 8; opacity: 0.7; smooth: true Rectangle { id: slider x: 1; y: 1; width: 30; height: 14 radius: 6; smooth: true gradient: Gradient { GradientStop { position: 0.0; color: "#424242" } GradientStop { position: 1.0; color: "black" } } MouseArea { anchors.fill: parent drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 } } } } Monday, April 26, 2010 5
  • 9. Qt Meta-Object Language import Qt 4.7 import "content" Rectangle { color: "#545454" Basic width: 300; height: 300 properties // Dial with a slider to adjust it Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } Rectangle { id: container anchors.bottom: parent.bottom; anchors.bottomMargin: 10 anchors.left: parent.left; anchors.leftMargin: 20 anchors.right: parent.right; anchors.rightMargin: 20; height: 16 gradient: Gradient { GradientStop { position: 0.0; color: "gray" } GradientStop { position: 1.0; color: "white" } } radius: 8; opacity: 0.7; smooth: true Rectangle { id: slider x: 1; y: 1; width: 30; height: 14 radius: 6; smooth: true gradient: Gradient { GradientStop { position: 0.0; color: "#424242" } GradientStop { position: 1.0; color: "black" } } MouseArea { anchors.fill: parent drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 } } } } Monday, April 26, 2010 5
  • 10. import Qt 4.7 Qt Meta-Object Language Item { id: root property real value : 0 width: 210; height: 210 Image { source: "background.png" } import Qt 4.7 Image { import "content" x: 93 y: 35 Rectangle { source: "needle_shadow.png" color: "#545454" transform: Rotation { width: 300; height: 300 origin.x: 11; origin.y: 67 angle: needleRotation.angle // Dial with a slider }to adjust it Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } } Custom Type Image { Rectangle { id: needle id: container x: 95; y: 33 anchors.bottom: parent.bottom; anchors.bottomMargin: 10 smooth: true anchors.left: parent.left; anchors.leftMargin: 20 source: "needle.png" anchors.right: parent.right; Rotation { transform: anchors.rightMargin: 20; height: 16 gradient: Gradient { id: needleRotation GradientStop { position: 0.0; color: "gray" } origin.x: 7; origin.y: 65 GradientStop { position: -130 color: "white" } angle: 1.0; } SpringFollow on angle { radius: 8; opacity: 0.7; smooth: true spring: 1.4 Rectangle { damping: .15 id: slider to: Math.min(Math.max(-130, root.value*2.6 - 130), 133) x: 1; y: 1; width: 30; height: 14 } radius: 6; smooth: true } gradient: }Gradient { GradientStop { position: 0.0; color: "#424242" } } Image { x: 21; y: 18; source: "overlay.png" GradientStop { position: 1.0; color: "black" } } } MouseArea { anchors.fill: parent drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 } } } } Monday, April 26, 2010 5
  • 11. import Qt 4.7 Qt Meta-Object Language Item { id: root property real value : 0 width: 210; height: 210 Image { source: "background.png" } import Qt 4.7 Image { import "content" x: 93 y: 35 Rectangle { source: "needle_shadow.png" color: "#545454" transform: Rotation { width: 300; height: 300 origin.x: 11; origin.y: 67 angle: needleRotation.angle // Dial with a slider }to adjust it Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } } Image { Rectangle { id: needle id: container x: 95; y: 33 anchors.bottom: parent.bottom; anchors.bottomMargin: 10 smooth: true Anchor Lines anchors.left: parent.left; anchors.leftMargin: 20 source: "needle.png" w/Margins anchors.right: parent.right; Rotation { transform: anchors.rightMargin: 20; height: 16 gradient: Gradient { id: needleRotation GradientStop { position: 0.0; color: "gray" } origin.x: 7; origin.y: 65 GradientStop { position: -130 color: "white" } angle: 1.0; } SpringFollow on angle { radius: 8; opacity: 0.7; smooth: true spring: 1.4 Rectangle { damping: .15 id: slider to: Math.min(Math.max(-130, root.value*2.6 - 130), 133) x: 1; y: 1; width: 30; height: 14 } radius: 6; smooth: true } gradient: }Gradient { GradientStop { position: 0.0; color: "#424242" } } Image { x: 21; y: 18; source: "overlay.png" GradientStop { position: 1.0; color: "black" } } } MouseArea { anchors.fill: parent drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 } } } } Monday, April 26, 2010 5
  • 12. import Qt 4.7 Qt Meta-Object Language Item { id: root property real value : 0 width: 210; height: 210 Image { source: "background.png" } import Qt 4.7 Image { import "content" x: 93 y: 35 Rectangle { source: "needle_shadow.png" color: "#545454" transform: Rotation { width: 300; height: 300 origin.x: 11; origin.y: 67 angle: needleRotation.angle // Dial with a slider }to adjust it Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } } Image { Rectangle { id: needle id: container x: 95; y: 33 anchors.bottom: parent.bottom; anchors.bottomMargin: 10 smooth: true anchors.left: parent.left; anchors.leftMargin: 20 source: "needle.png" anchors.right: parent.right; Rotation { transform: anchors.rightMargin: 20; height: 16 gradient: Gradient { id: needleRotation GradientStop { position: 0.0; color: "gray" } origin.x: 7; origin.y: 65 GradientStop { position: -130 color: "white" } angle: 1.0; } SpringFollow on angle { radius: 8; opacity: 0.7; smooth: true spring: 1.4 Rectangle { damping: .15 id: slider to: Math.min(Math.max(-130, root.value*2.6 - 130), 133) x: 1; y: 1; width: 30; height: 14 } radius: 6; smooth: true } gradient: }Gradient { GradientStop { position: 0.0; color: "#424242" } } Image { x: 21; y: 18; source: "overlay.png" GradientStop { position: 1.0; color: "black" } } } MouseArea { Mouse anchors.fill: parent Interaction area } drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 } } } Monday, April 26, 2010 5
  • 13. import Qt 4.7 Qt Meta-Object Language Item { id: root property real value : 0 width: 210; height: 210 Image { source: "background.png" } import Qt 4.7 Image { import "content" x: 93 y: 35 Rectangle { source: "needle_shadow.png" color: "#545454" transform: Rotation { width: 300; height: 300 origin.x: 11; origin.y: 67 angle: needleRotation.angle // Dial with a slider }to adjust it Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) } } Image { Rectangle { id: needle id: container x: 95; y: 33 anchors.bottom: parent.bottom; anchors.bottomMargin: 10 smooth: true anchors.left: parent.left; anchors.leftMargin: 20 source: "needle.png" anchors.right: parent.right; Rotation { transform: anchors.rightMargin: 20; height: 16 gradient: Gradient { id: needleRotation GradientStop { position: 0.0; color: "gray" } origin.x: 7; origin.y: 65 GradientStop { position: -130 color: "white" } angle: 1.0; } SpringFollow on angle { radius: 8; opacity: 0.7; smooth: true spring: 1.4 Rectangle { damping: .15 id: slider to: Math.min(Math.max(-130, root.value*2.6 - 130), 133) x: 1; y: 1; width: 30; height: 14 } radius: 6; smooth: true } gradient: }Gradient { GradientStop { position: 0.0; color: "#424242" } } Image { x: 21; y: 18; source: "overlay.png" GradientStop { position: 1.0; color: "black" } } } MouseArea { anchors.fill: parent drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32 } } } } Monday, April 26, 2010 5
  • 14. Code Walkthrough • (MeeGo?) RSS viewer • Written in-flight; ~4 hrs • Single window, 2 lists • Graphics borrowed Monday, April 26, 2010 6
  • 15. Hello Elements • Item, Rectangle • MouseArea, LineEdit • Model,View • BorderImage, Gradient, Rotation Monday, April 26, 2010 7
  • 16. What’s Quick about it? • Simplicity of language and intuitive structure • Created with Designers in mind • Easy to pick up • Good separation between code and presentation • Designers and developers in same environment • Common understanding of semantics • Design around same constraints • Hardware accelerated • Openl GL (ES), OpenVG Monday, April 26, 2010 8
  • 17. States and Transitions • State represents a configuration of properties for some items • PropertyChanges, ParentChange, AnchorChanges • Transitions define interpolation between two states • PropertyAnimation, SequentialAnimation/ ParallelAnimation, PauseAnimation Monday, April 26, 2010 9
  • 18. Integrating with Native Code • QtDeclarative == Qt, native C++ • QGraphicsView runtime environment populated by QDeclarativeEngine::load() • All QMetaObject information exposed • Signals, Slots, Properties ➡Easy to bind to native business logic Monday, April 26, 2010 10
  • 19. Hello Device • QML UI ‘runtime’ identical on Desktop and Device • Device-specific features can be guarded and added in executable • Device-specific packaging apply • Lets do it.. Monday, April 26, 2010 11
  • 20. Adding New Semantics • Any QGraphicsItem can be exposed #define QML_DECLARE_TYPE(T) int qmlRegisterType ( const char * uri, int versionMajor, int versionMinor, const char * qmlName ) • Must subclass QObject, default-constructor • Properties can be bound to if NOTIFY is present Monday, April 26, 2010 12
  • 21. Hello Widgets http://qt.gitorious.org/qt-components Monday, April 26, 2010 13
  • 22. Roadmap ✓ Emulate MeeGo Netbook UX with Qt (QML) • WIP components to enable easy app creation, starting with embedded/mobile space • MeeGo handset-optimized • ...but will work on others too • Enable bindings of other UX (QGraphicsView-based) to QML • Working on controller API for UI • i.e. models pluggable to multiple UX • http://qt.gitorious.org/qt-components Monday, April 26, 2010 14
  • 23. Where, What, How? • http://qt.nokia.com/developer/qt-roadmap • http://qt.nokia.com/doc/4.7-snapshot/declarativeui.html • 4.7 branch of git://gitorious.org/qt/qt.git • http://labs.trolltech.com/blogs/category/labs/graphics/ kinetic/declarative_ui/ • http://twitter.com/#search?q=QML • http://chaos.troll.no/~hhartz/ QtQuickAtLinuxCollaborationSummit2010.pdf • #qt-qml on irc.freenode.org Monday, April 26, 2010 15

×