Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Creating a QML Marquee Component

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Created: jappit (17 Feb 2011)
Last edited: hamishwillee (30 Jan 2013)



This article shows how to create a Marquee component by using QML. A Marquee is a UI component that shows scrolling text.

Wiki n8 qml marquee.png

Creating the Component

Creating the static structure

Start by creating an empty Marquee.qml file in a Qt Quick project.

Then, let's define a Rectangle that will contain the scrollable text. Since only the text contained in the Rectangle's boundaries must be visible, let's set its clip property to true. The Rectangle's height will be later defined by binding it to the Marquee's text height.

Rectangle {
clip: true
width: parent.width

In order to allow for customization of the Marquee text, the Component defines a series of properties that can be used to modify the Marquee's appearance and scrolling speed:

// text to be displayed by the Marquee
property string text
// top/bottom text padding
property int padding : 10
// the font size used by the Marquee
property int fontSize : 20
// the scrolling animation interval
property int interval : 100
// the text color
property color textColor: "black"

Now, a Text object is added to the root Rectangle, in order to display the Marquee text. The properties defined above are used to bind the Text properties, as its font size and text color. Finally, the root Rectangle height is bound to the Text's height (plus the padding defined by the Component padding property)

Rectangle {
clip: true
width: parent.width
height: marqueeText.height + padding
Text {
anchors.verticalCenter: parent.verticalCenter
id: marqueeText
font.pointSize: fontSize
color: textColor
text: parent.text

Adding the animation

The Component defined above defines the base structure for the Marquee component. Now, it's time to animate the Text: in this article, text will be scrolled from right to left, restarting once its right boundary has exited the parent Rectangle. With small modifications the same code can be used to create different type of scrollings (for instance, left to right, or alternate).

First, let's place the Text in its starting position, by setting its x property.

    Text {
x: parent.width

The animation is implemented by using a Timer object, that will run with the interval defined by the above property. The following Timer is added to the Component:

Timer {
interval: parent.interval
onTriggered: moveMarquee()
running: true
repeat: true

The actual scrolling animation is performed by the JavaScript moveMarquee() function, defined below:

function moveMarquee()
if(marqueeText.x + marqueeText.width < 0)
marqueeText.x = marqueeText.parent.width;
marqueeText.x -= 10;

Using the Marquee

The Marquee component can be easily used as shown in the code snippet below. To use it, be sure to import Marquee.qml in your qml file.

Rectangle {
width: 360
height: 640
Marquee {
width: 300
padding: 2
anchors.centerIn: parent
text: "This is a very very long text that should never end!"
color: "black"
textColor: "white"

A video of the Marquee in action on a Nokia N8 device can be seen here:

The media player is loading...

Related content

The complete Qt Creator project for the Marquee component can be downloaded here:

A SIS file for Symbian^3 devices is also available here: File:Marqueequickapp qt-4 7 0 exp m1 1 0 s3 v0

This page was last modified on 30 January 2013, at 04:28.
143 page views in the last 30 days.