Nokia MeeGo 1.2 Harmattan Components- QuickStart

This article explains about the basic UI components in MeeGo 1.2

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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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.

• 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)

• 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.

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.

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.

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 {
     anchors.bottom: parent.bottom
     tools: ToolBarLayout {
         ToolButton {
             iconSource: "add"
         }
         ToolButton {
             iconSource: "play"
         }
         ToolButton {
             iconSource: "option"
         }
     }
 }

 
Source Nokia Developer