QML/Keyboard navigation

Overview

This tutorial explains how to make a QML user interface entirely navigable by keyboard.

Pre-requisites

If you don't know anything about QML, reading the introductory Qt/QML documentation might be helpful.

System Setup

Install the MeeGo SDK first. Alternatively, you could just install the meego-sdk-qt-creator and meego-sdk-qt packages (see the same page for the location of the repos).

I'm using Fedora 13 Linux here, and have run the application on that and MeeGo 1.1.

How to

You basically need to create a QML application with some input elements to start with.

You then add keyboard navigation using the following QML elements:

• KeyNavigation, for defining paths between pairs of UI elements (e.g. to move between input elements)
• Keys, for connecting key presses to actions (e.g. to submit data entered in input elements)

Create the QML application

1. In the Qt Creator Welcome screen, click Create Project.
2. Select Qt Quick Project and QML Application, then click Choose.
3. Enter a name for the project (e.g. key-nav), then click Next and Finish.