1. QML Qt Quick with QML and you can use JavaScript for engine along C++ Started to be released since late 2009 (Qt 4.7) Nokia focused on that for the Symbian/Meego phone and future smartphone development Support on QtCreator JavaScript-based declarative Components Sub classing QDeclerativeItem

2. QML Syntax for QML business logic code (in main.cpp): QmlApplicationViewer viewer; viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto); viewer.setMainQmlFile(QLatin1String("example.qml")); viewer.showExpanded(); Rectangle { id: myRect property string text width: 75; height: 50 radius: 6 color: "#646464" border.width: 4; border.color: "white" MouseArea { anchors.fill: parent hoverEnabled: true onEntered: { focusRect.x = myRect.x; focusRect.y = myRect.y; focusRect.text = myRect.text; } } }

3. QML (.qml)

4. QML QML typical button: import QtQuick 1.0 Image { source: "quit.png" scale: quitMouse.pressed ? 0.8 : 1.0 smooth: quitMouse.pressed MouseArea { id: quitMouse anchors.fill: parent anchors.margins: -10 onClicked: Qt.quit() }

5. QML The generic form of the various imports are as follows: import Namespace VersionMajor.VersionMinor import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier import "directory" import "file.js" as ScriptIdentifier Examples: import QtQuick 2.0QtQuick import QtQuick.LocalStorage 2.0 as DatabaseQtQuick import "../privateComponents" import "somefile.js" as Script

6. QML Animations Easing Curves Animation Groups

7. Animations Handle form factor changes Outline application state changes Orchestrate high level logic Natural transitions Our brain expects movement Helps the user find its way around the GUI

8. Animations Animations update properties to cause a visual change Animations are property animations, and animation types: NumberAnimation for changes to numeric properties ColorAnimation for changes to color properties RotationAnimation for changes to orientation of items Vector3dAnimation for motion in 3D space Easing curves are used to create variable speed animations Animations are used to create visual effects

9. Animations import QtQuick 2.0 Rectangle { width: 400; height: 400 color: "lightblue" Image { x: 220 source: "../images/backbutton.png" NumberAnimation on y { from: 350; to: 150 duration: 1000 } Applied directly to properties with the on keyword The y property is changed by the NumberAnimation starts at 350 and ends at 150 takes 1000 milliseconds

10. Animations Animations can be performed sequentially and in parallel SequentialAnimation defines a sequence with each child animation run in sequence (Example: a rescaling animation, followed by an opacity changing animation) ParallelAnimation defines a parallel group with all child animations run at the same time (Example: simultaneous rescaling and opacity changing animations Sequential and parallel animations can be nested)

11. Animations Image { id: rocket anchors.centerIn: parent source: "../images/rocket.png“ } SequentialAnimation { NumberAnimation { target: rocket; properties: "scale" from: 1.0; to: 0.5; duration: 1000 } NumberAnimation { target: rocket; properties: "opacity" from: 1.0; to: 0.0; duration: 1000 } running: true }

12. Animations Other animations ColorAnimation for changes to color properties RotationAnimation for changes to orientation of items Vector3dAnimation for motion in 3D space AnchorAnimation animate an anchor change ParentAnimation animates changes in parent values. SpringAnimation allows a property to track a value in a spring-like motion PropertyAction the PropertyAction element allows immediate property changes during animation ScriptAction allows scripts to be run during an animation

13. Qt Quick Using Qt Quick, the business logic and everything critical to performance can be implemented using C++. The user interface is implemented using QML ( The idea is for QML to be a language that is designed for handling many objects in a setting where many states and transitions between states need to be handled). QML, the language for building Qt Quick-based user interfaces QtDeclarative Qt module. It contains classes for executing QML (an engine, a context and a view) It also contains bindings for QML and mechanisms for integrating C++ and QML.

14. Qt Quick - Components The most commonly used components are: ItemItem: Basic visual object type inherited by visual object types RectangleRectangle: A rectangle type ImageImage : For incorporating bitmaps into a scene BorderImageBorderImage: Allows the use of images as borders AnimatedImageAnimatedImage: Playing animations stored as an animated gif AnimatedSpriteAnimatedSprite: Playing animations stored as a series of frames SpriteSequenceSpriteSequence - Playing and transitioning between multiple animations stored as a series of frames TextText - For inserting formatted text into a scene WindowWindow - Provides a top-level window

15. Qt Quick - Properties For all the basic elements, a range of common properties For placement and size, use x, y, width and height The color and opacity can be controlled The element can be shown or hidden It can be transformed, e.g. scaled and rotated Also id property and the parent property Anchor layout as well as Grid, Row and Column for layout

16. Qt Quick – Vidual Item Utils Visual Item Utility Accessible - Attached property to make components accessible Accessible Gradient - For defining a color gradient Gradient GradientStop - Used to define a color within a Gradient GradientStopGradient SystemPalette - Provides access to the Qt palettes SystemPalette Screen - Provides information about the screen on which an Item is displayed ScreenItem Sprite - Specifies sprite animations for other Items to display Sprite FontLoader - Loads fonts by name or URL FontLoader

17. Qt Quick- Visual Items Visual Item Generation Repeater - Uses a model to create multiple Item instances Repeater Loader - Eases on-demand loading of Items Loader Visual Item Transformations Transform - Allows specification of advanced transformations on Items Transform Scale - Assigns item scaling behaviors Scale Rotation - Assigns item rotation behaviors Rotation Translate - Assigns item translation behaviors Translate

18. Qt Quick - User Input MouseAreaMouseArea - Sets up an area for mouse interaction KeysKeys - Provides components with attached properties to handle key input. KeyNavigationKeyNavigation - Supports key navigation by arrow keys FocusScopeFocusScope - Mediates keyboard focus changes FlickableFlickable - Provides a surface that can be "flicked" PinchAreaPinchArea - Enables simple pinch gesture handling MultiPointTouchAreaMultiPointTouchArea - Enables handling of multiple touch points DragDrag - For specifying drag and drop events for visual items DropAreaDropArea - For specifying drag and drop event handling in an area TextInputTextInput - Captures user key input TextEditTextEdit - Displays multiple lines of editable formatted text

19. Interaction Interaction is handled through areas. The MouseArea accepts mouse events The GestureArea accepts gestures. Notice that gestures are based on touch events. Some touch based devices with single- point touch might only report mouse events. In this case, gestures do not work. Keyboard events are handled through the focus concept, where the item with focus receives key events.