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

QMLSyntax 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; } } }

QML (.qml)

QMLQML 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() }}

QML

The generic form of the various imports are as follows:

import Namespace VersionMajor.VersionMinorimport Namespace VersionMajor.VersionMinor as SingletonTypeIdentifierimport "directory"import "file.js" as ScriptIdentifier

Examples:import QtQuick 2.0import QtQuick.LocalStorage 2.0 as Databaseimport "../privateComponents"import "somefile.js" as Script

QML• Animations• Easing Curves• Animation Groups

Animations

Handle form factor changes• Outline application state changes• Orchestrate high level logic• Natural transitions• Our brain expects movement• Helps the user find its wayaround the GUI

AnimationsAnimations 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

Animationsimport QtQuick 2.0Rectangle {

width: 400; height: 400color: "lightblue"Image {

x: 220source: "../images/backbutton.png"

NumberAnimation on y {from: 350; to: 150duration: 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

AnimationsAnimations 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 animationsSequential and parallel animations can be nested)

AnimationsImage {

id: rocketanchors.centerIn: parentsource: "../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

}

AnimationsOther 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-likemotion• PropertyAction the PropertyAction element allows immediate propertychanges during animation• ScriptAction allows scripts to be run during an animation

Qt QuickUsing 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 interfacesQtDeclarative 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.

Qt Quick - ComponentsThe most commonly used components are:Item: Basic visual object type inherited by visual object typesRectangle: A rectangle typeImage : For incorporating bitmaps into a sceneBorderImage: Allows the use of images as bordersAnimatedImage: Playing animations stored as an animated gif AnimatedSprite: Playing animations stored as a series of framesSpriteSequence - Playing and transitioning between multiple animations stored as a series of framesText - For inserting formatted text into a sceneWindow - Provides a top-level window

Qt Quick - PropertiesFor 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•

Qt Quick – Vidual Item UtilsVisual 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

Qt Quick- Visual ItemsVisual 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

Qt Quick - User Input

MouseArea - Sets up an area for mouse interactionKeys - Provides components with attached properties to handle key input.KeyNavigation - Supports key navigation by arrow keysFocusScope - Mediates keyboard focus changesFlickable - Provides a surface that can be "flicked"PinchArea - Enables simple pinch gesture handlingMultiPointTouchArea - Enables handling of multiple touch pointsDrag - For specifying drag and drop events for visual itemsDropArea - For specifying drag and drop event handling in an areaTextInput - Captures user key inputTextEdit - Displays multiple lines of editable formatted text

InteractionInteraction 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.