QML

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): QmlApplicationViewerviewer; viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto); viewer.setMainQmlFile(QLatin1String("example.qml")); viewer.showExpanded(); Rectangle { id: myRectproperty string text width: 75; height: 50 radius: 6 color: "#646464" border.width: 4; border.color: "white" MouseArea{ anchors.fill: parenthoverEnabled: true onEntered: { focusRect.x= myRect.x; focusRect.y= myRect.y; focusRect.text = myRect.text; } } }

3. QML (.qml)

4. QML QML typical button: import QtQuick1.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.0 import QtQuick.LocalStorage 2.0 as Database 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 • RotationAnimationfor 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. • 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 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 } } }

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 •RotationAnimationfor changes to orientation of items • Vector3dAnimation for motion in 3D space • AnchorAnimation animate an anchor change • ParentAnimationanimates changes in parent values. • SpringAnimation allows a property to track a value in a spring-like motion • PropertyActionthe PropertyActionelement 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 QtQuick-based user interfaces QtDeclarativeQt 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: Item: Basic visual object type inherited by visual object types Rectangle: A rectangle type Image: For incorporating bitmaps into a scene BorderImage: Allows the use of images as borders AnimatedImage: Playing animations stored as an animated gif AnimatedSprite: Playing animations stored as a series of frames SpriteSequence - Playing and transitioning between multiple animations stored as a series of frames Text - For inserting formatted text into a scene Window - 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 Gradient - For defining a color gradient GradientStop - Used to define a color within a Gradient SystemPalette - Provides access to the Qt palettes Screen - Provides information about the screen on which an Item is displayed Sprite - Specifies sprite animations for other Items to display FontLoader - Loads fonts by name or URL

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

18. Qt Quick - User Input MouseArea - Sets up an area for mouse interaction Keys - Provides components with attached properties to handle key input. KeyNavigation - Supports key navigation by arrow keys FocusScope - Mediates keyboard focus changes Flickable - Provides a surface that can be "flicked" PinchArea - Enables simple pinch gesture handling MultiPointTouchArea - Enables handling of multiple touch points Drag - For specifying drag and drop events for visual items DropArea - For specifying drag and drop event handling in an area TextInput - Captures user key input TextEdit - 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.