×
Namespaces

Variants
Actions

Nokia MeeGo 1.2 Harmattan Components- QuickStart

From Nokia Developer Wiki
Jump to: navigation, search

This article explains about the basic UI components in MeeGo 1.2

Article Metadata
Article
Created: SeemaB (10 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)
Featured Article
11 Dec
2011

Contents

Introduction

  • Qt Quick Components provides ready made building blocks to develop great looking Graphical User Interfaces for MeeGo 1.2 Harmattan.
  • The aim of this article is to introduce developers with this components, possible usages and code samples. Thus acting as a quick starter.

Component Description, Usage and Sample Code

Button

Button is used for an action. It’s helpful to add a meaningful and short text label for a button.
Make sure the size is big enough as MeeGo is mainly finger friendly.

  • Example: ok, submit, cancel.

Meego-button.png

  • Code Sample:
Button {
id: testButton
text: "OK"
}

Icon button

Icon button are actionable like button control but they do not have button edges and hence look like icons.

  • Example: Icons in the toolbar.

Meego-iconbutton.png

  • Code Sample:
IconButton {
id: iButton
 
icon: "image.png"
iconDown: "imageDown.png"
}

Radio Button

A radio button is a GUI control that allows the user to choose only one of a predefined set of options.

  • Example: Gender selection.

Meego-radio.png

  • Code Sample:
RadioGroup { id: rGroup }
RadioButton {
id: fButton
group: rGroup
value: "female"
Component.onCompleted: { rGroup.add(fButton) }
}
RadioButton {
id: mButton
group: rGroup
value: "male"
Component.onCompleted: { rGroup.add(mButton) }
}

Check box

A check box helps user for multiple selections. It’s a toggle input control.

  • Example: When asking input for Hobbies, where multiple selection can be done.

Meego-checbox.png

  • Code Sample:
CheckBox {
id: myCheckBox
text: "CheckBox Text Description"
}
Text {
text: myCheckBox.checked ? "Checked" : "Unchecked"
}

Slider bar

With the help of a slider bar, user can select various values within a specified range.
The thumb value (box) shows the current value. Minimum and maximum values can be displayed if required.

  • Example: Selection of location radius in a map’s application.

Meego-slider.png

  • Code Sample:
Slider {
id: mySlider
 
min: 0
max: 3
value: 1.25
}

Progress bar

Progress bar indicates that a task is in progress/continuation.
But it should be used wisely, for very quickly happening tasks progress bar should not be used, use only when the tasks are time consuming to indicate user that the progress is happening such as downloading a file.
Ideal task time when to use this control: more than 5 sec.

  • Example: File download/upload, Installation.

Meego-progress.png

  • Code Sample:
ProgressBar {
id: progressBar
percentage: 75.0
}

Busy Indicator/ Spinner

Busy Indicator indicates some task is in progress, but estimates of completion are not known to developer.
Hence no quantifiable data is shown by this control.
Can be placed on top and middle to make it prominent.

  • Example: Refreshing a web application page.

Meego-spinner.png

  • Code Sample:
Spinner {
id: spinbar
 
interval: 100
maxSpinTime : 1000
spinning  : true
}

Text Fields

If the user input is not predictable, then instead of checkboxes/radio buttons the Text Field control helps.
Depending on the expected length of the user input, developer has to decide if he want to go for single line or multiline text field.

  • Example: First Name Field (SingleLine), Address (Multiline)

Meego-text.png

  • Code Sample:
TextEntry {
id: tEntry
 
text: "text field"
}
 
TextArea {
height: 80; width: 120
placeholderText: " multiline textarea"
}

Notification/Information Banner

Notification Banner is used to notify user about an event.
No user input is required but the developer feels the need that the user should be aware of that event.

  • Example: Error messages.

Meego-notification.png

Query Dialog

If we require a specific input from user and the purpose is not just to notify then developer should use this control

  • Example: Deleting file, a confirmation is required.

Meego-dialog.png

List

A list control consists of a sequence of items arranged vertically. It can have dividers to specify logically related section.
It occupies full width area of the screen.
If the list item goes beyond the screen length it becomes scrollable.

  • Example: List of possible actions of the application as shown in example picture of a media player.

Meego-list.png

  • Code Sample:
ListItem {
id: iListItem
Column {
anchors.fill: iListItem.padding
ListItemText {
id: text1
mode: iListItem.mode
role: "Heading"
text: " Heading Description"
}
ListItemText {
id: text1
mode: iListItem.mode
role: "Title"
text: "Title Description "
}
}
}

Toolbar

Toolbar is used to facilitate access to important actions.
In landscape mode, its position is on top of the screen and in portrait mode, it is at the bottom.

  • Example: Exit, Options

Meego-toolbar.png

  • Code Sample:
ToolBar {
anchors.bottom: parent.bottom
tools: ToolBarLayout {
 
ToolButton {
iconSource: "add"
}
ToolButton {
iconSource: "play"
}
ToolButton {
iconSource: "option"
}
}
}
This page was last modified on 13 June 2012, at 13:56.
266 page views in the last 30 days.
×