Example for Sailfish UI programming in QML

Example.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
                }
            }
        }
    }
}