This article explains about the basic UI components in MeeGo 1.2
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.
Button { id: testButton text: "OK" }
Icon button are actionable like button control but they do not have button edges and hence look like icons.
IconButton { id: iButton icon: "image.png" iconDown: "imageDown.png" }
A radio button is a GUI control that allows the user to choose only one of a predefined set of options.
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) } }
A check box helps user for multiple selections. It’s a toggle input control.
CheckBox { id: myCheckBox text: "CheckBox Text Description" } Text { text: myCheckBox.checked ? "Checked" : "Unchecked" }
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.
Slider { id: mySlider min: 0 max: 3 value: 1.25 }
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.
ProgressBar { id: progressBar percentage: 75.0 }
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.
Spinner { id: spinbar interval: 100 maxSpinTime : 1000 spinning : true }
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.
TextEntry { id: tEntry text: "text field" } TextArea { height: 80; width: 120 placeholderText: " multiline textarea" }
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.
If we require a specific input from user and the purpose is not just to notify then developer should use this control
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.
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.
ToolBar { anchors.bottom: parent.bottom tools: ToolBarLayout { ToolButton { iconSource: "add" } ToolButton { iconSource: "play" } ToolButton { iconSource: "option" } } }
Source Nokia Developer