Your SlideShare is downloading. ×
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,128

Published on

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

No Downloads
Views
Total Views
1,128
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
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

×