Meego Wiki
Views

QML/Keyboard navigation

From MeeGo wiki
(Difference between revisions)
Jump to: navigation, search
(How to)
(How to)
Line 15: Line 15:
== How to ==
== How to ==
-
You basically need a QML application with some input elements to start with.
+
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:
You then add keyboard navigation using the following QML elements:
Line 21: Line 21:
* <code>KeyNavigation</code>, for defining paths between pairs of UI elements (e.g. to move between input elements)
* <code>KeyNavigation</code>, for defining paths between pairs of UI elements (e.g. to move between input elements)
* <code>Keys</code>, for connecting key presses to actions (e.g. to submit data entered in input elements)
* <code>Keys</code>, for connecting key presses to actions (e.g. to submit data entered in input elements)
 +
 +
=== Create the QML application ===
 +
 +
# In the Qt Creator Welcome screen, click ''Create Project''.
 +
# Select '''Qt Quick Project''' and '''QML Application''', then click ''Choose''.
 +
# Enter a name for the project (e.g. '''key-nav'''), then click ''Next'' and ''Finish''.

Revision as of 14:21, 25 November 2010

Contents

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.
Personal tools