Displaying an Image with a scroll indicator

An Image element displayed in a Flickable element can be scrolled in the Flickable’s viewport. To indicate the position the user is currently looking at we will develop a simple scroll indicator.

Using the ListView with an XML Model

The ListView can also be used with more advanced models, like the XmlListModel. The XmlListModel allows you to specify a XPath query to extract information from the XML data source.

Using the ListView with a model

This post explains shortly how to use a ListView with a simple model and a delegate to paint the model data.

Designing a Login View

Now we have all building blocks together to create a login view with username and password field and 2 buttons, one for login the other one for login as guest.

Rows and Columns

The Row/Column element in QML are called positioners. They position their children horizontally/vertically in a line-up.

A TextInput Component

In a previous post we post, we developed a beautiful TextInput with borders. In this post, we will extract this in a component for later reuse.

DIGIA demos Qt Quick

If you ever wondered, what is possible with QtQuick, aka QML have a look.

Sweet!

Using TextInput

TextInput allows you to add an editable line to your scene.

Getting started with QML Video

This is a nice screen cast to show you how to run the QML examples and work with QML inside QtCreator.

Background for our Examples

I would like to make the next example a little bit more fancier than today. The first step is to define a background.