Skip to content

Instantly share code, notes, and snippets.

Embed
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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.