Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Example for Sailfish UI programming in QML
import QtQuick 2.0
import Sailfish.Silica 1.0
ApplicationWindow {
// Chapter 1: Basic primitives
Image {
visible: false
source: "jolla.png"
Behavior on opacity { NumberAnimation {} }
MouseArea {
anchors.fill: parent
onClicked: parent.opacity = parent.opacity == 0 ? 1.0 : 0.0
}
}
// Chapter 2: Positioning
Column { // or Row, Grid, Flow
visible: false
spacing: Theme.paddingLarge
anchors.centerIn: parent
Button {
text: "Hello world!"
}
Button {
text: "Hello world!"
}
Button {
text: "Hello world!"
}
}
// Chapter 3: Creating views
// Sub-chapter 3.1: Content list
initialPage: Page {
SilicaListView {
model: 200
opacity: model.ready ? 1.0 : 0.0
Behavior on opacity { FadeAnimation {} }
width: parent.width
clip: true
anchors {
top: parent.top
bottom: panel.top
}
PullDownMenu {
MenuItem {
text: "Settings"
onClicked: pageStack.push(settingsPage)
}
MenuItem {
text: panel.open ? "Close panel" : "Open panel"
onClicked: panel.open = !panel.open
}
}
header: PageHeader { title: "App name" }
delegate: ListItem {
onClicked: pageStack.push(gridPage)
menu: ContextMenu {
MenuItem { text: "Move to top" }
MenuItem {
text: "Delete"
onClicked: remorseAction("Deleting", function () { animateRemoval(listItem)})
}
}
Label {
text: "Item " + model.index
font.pixelSize: Theme.fontSizeLarge
anchors.verticalCenter: parent.verticalCenter
color: highlighted ? Theme.highlightColor : Theme.primaryColor
x: Theme.paddingLarge
}
}
VerticalScrollDecorator {}
}
// Chapter 7: Adding panels
DockedPanel {
id: panel
width: parent.width
height: row.height + Theme.paddingLarge*2
Row {
id: row
anchors.centerIn: parent
IconButton {
icon.source: "image://theme/icon-m-previous"
}
IconButton {
property bool playing
icon.source: "image://theme/icon-l-" + (playing ? "pause" : "play")
onClicked: playing = !playing
}
IconButton {
icon.source: "image://theme/icon-m-next"
}
}
}
// Sub-chapter 3.2: Visual grid
Component {
id: gridPage
Page {
SilicaGridView {
anchors.fill: parent
cellWidth: parent.width/3
cellHeight: cellWidth
model: 200
delegate: Rectangle {
width: GridView.view.cellWidth
height: width
color: Theme.highlightColor
opacity: 0.2+0.8*Math.random()
}
}
}
}
// Sub-chapter 3.3: Full-screen carousel
Component {
id: slideShowPage
Page {
SlideshowView {
anchors.fill: parent
model: 200
delegate: Item {
width: parent.width
height: parent.height
Rectangle {
anchors {
fill: parent
margins: Theme.paddingLarge
}
color: Theme.rgba(Theme.highlightBackgroundColor, 0.3)
anchors.centerIn: parent
InfoLabel {
color: Theme.primaryColor
anchors.centerIn: parent
text: "View " + model.index
}
}
}
}
}
}
// Chapter 4: Handling busy state
Column {
anchors.verticalCenter: parent.verticalCenter
width: parent.width
spacing: Theme.paddingMedium
BusyIndicator {
id: busyIndicator
running: !model.ready
size: BusyIndicatorSize.Large
anchors.horizontalCenter: parent.horizontalCenter
}
InfoLabel {
text: "Loading"
width: parent.width
opacity: busyIndicator.opacity
anchors.horizontalCenter: parent.horizontalCenter
}
}
Timer {
id: model
property bool ready
running: true
interval: 3000
onTriggered: ready = true
}
// Chapter 5: First time use hints
TouchInteractionHint {
id: hint
Component.onCompleted: restart()
interactionMode: TouchInteraction.Pull
direction: TouchInteraction.Down
}
InteractionHintLabel {
text: "Pull down to setup your account"
opacity: hint.running ? 1.0 : 0.0
Behavior on opacity { FadeAnimation {} }
width: parent.width
invert: true
}
}
// Chapter 6: Creating settings forms
Component {
id: settingsPage
Page {
Column {
width: parent.width
PageHeader { title: "Settings" }
SectionHeader { text: "General" }
TextSwitch {
width: parent.width
text: "Switch A"
checked: true
description: "Describe item if not self-explanatory"
}
TextSwitch {
width: parent.width
text: "Switch B"
description: "Describe item if not self-explanatory"
}
SectionHeader { text: "Sub-section" }
ComboBox {
label: "Mode"
menu: ContextMenu {
MenuItem { text: "All" }
MenuItem { text: "Option 1" }
MenuItem { text: "Option 2" }
}
}
TextField {
width: parent.width
label: "Name"
placeholderText: label
EnterKey.iconSource: "image://theme/icon-m-enter-next"
EnterKey.onClicked: nextField.focus = true
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment