Home Nokia MeeGo 1.2 Harmattan Components- QuickStart

Nokia MeeGo 1.2 Harmattan Components- QuickStart

This article explains about the basic UI components in MeeGo 1.2


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


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

Source Nokia Developer

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.