| 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