Skip to content

Instantly share code, notes, and snippets.

@jaymzznoori

jaymzznoori/Example.qml

Last active November 27, 2016 21:59
Download ZIP

Revisions

  1. jaymzznoori renamed this gist Jun 28, 2016. 1 changed file with 0 additions and 0 deletions.
    0 Ecample.qml → Example.qml
    View file
    File renamed without changes.
  2. jaymzznoori renamed this gist Jun 28, 2016. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → Ecample.qml
    View file
    File renamed without changes.
  3. jaymzznoori created this gist Jun 28, 2016.
    231 changes: 231 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,231 @@
    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
    }
    }
    }
    }
    }