You are on page 1of 31

Building beautiful applications in Sailfish OS

joona.petrell@jolla.com
Confidential

DESIGN CONTAINERS COMPONENTS TEXT INPUT


Confidential

DESIGN
Confidential

Principles
Simple Beautiful Truly natural Intuitive Magical
Confidential

World-class e perience
Fast only load !I on demand" profile constantly Smooth apply transitions to all visual changes #i$el perfect use platform fonts" colors" margins Transparent prefer gestures over e$plicit controls

Confidential

Colors #rimary Secondary %ighlighted


Confidential

&hite" '(() &hite" +(,-() From *allpaper

!a"o#ts

Confidential

Application icons

Confidential

CONTAINERS
Confidential

$asic application
import import import Import QtQuick 2.0 Sailfish.Silica 1.0 pages cover ApplicationWindow { cover: CoverPage {} initialPage: MainPage {} }

Confidential

Co%er
CoverBackground { SilicaListView { model: callLogModel delegate: Row { Image { source: getIcon(... } Label { text: caller.name ... } } ... } CoverActionList { CoverAction { iconSource: "icon-dialer.png onTriggered: dialer.open() } CoverAction { iconSource: "icon-people.png onTriggered: openContactPicker() } } }
Confidential

Pa&e
Page { SilicaGridView { PullDownMenu { ... } header: PageHeader { text: "Photos" } model: photosModel delegate: Image { source: model.photo } } }

Confidential

Dialo&
Dialog { canAccept: textField.text.length > 0 onAccepted: createAlarm() Column { ... DialogHeader { acceptText: formatTime() } TimePicker { ... } Row { TextField { id: textField; ... } IconButton { ... } } WeekDaySelector { ... } } }
Confidential

Attac'ed pa&e
Page { onStatusChanged: { if (status === PageStatus.Active) { pageStack.pushAttached( Qt.resolvedUrl("ContactPage.qml"), { 'contact': conversation.person }) } } SilicaListView { model: conversation delegate: Message { ... section.delegate: SectionHeader { ... footer: Row { TextArea { ... } ... } }

Confidential

Split %ie(
SplitViewPage { background: ShareMethodList { header: PageHeader { title: photosModel.currentTitle } PullDownMenu { ... } } foreground: SlideshowView { model: photosModel delegate: PinchablePhoto { ... } } }

Confidential

Slides'o( %ie(
SilicaFlickable { PullDownMenu { ... } Column { SlideshowView { model: monthModel delegate: DateGrid { ... } ... } SilicaListView { model: agendaModel delegate: EventItem { ... } ... } } }
Confidential

Doc)ed panel
ApplicationWindow { bottomMargin: panel.visibleSize ... DockedPanel { id: panel dock: Dock.Bottom Column { Row { DialerButton { key: Row { DialerButton { key: Row { DialerButton { key: Row { DialerButton { key: Button { text: "Call" onClicked: call() } } } }
Confidential

1; 4; 7; *;

.. .. .. ..

COMPONENTS
Confidential

P#lle" *en#
SilicaListView { PullDownMenu { MenuItem { text: "Delete" onClicked: pageStack.push(... } MenuItem { text: "Search for messages" onClicked: searchEnabled = true } MenuItem { text: "New message" onClicked: newMessage() } } ... }
Confidential

!ist ite*
ListItem { onClicked: openContactCard(model.contact) height: theme.itemSizeSmall Row { ... Label { text: contact.firstName color: highlighted ? theme.highlightColor : theme.primaryColor } Label { text: contact.lastName ... } } }
Confidential

Conte t *en#
ListItem { menu: ContextMenu { MenuItem { text: "Send message" onClicked: sendMessage() } MenuItem { text: "Open contact card" onClicked: openContactCard() } MenuItem { text: "Delete" onClicked: delete() } } ... }
Confidential

Deletin& ite*s
ListItem { id: listItem function delete() { } ListView.onRemove: animateRemoval() menu: ContextMenu { MenuItem { text: "Delete" onClicked: { listItem.remorseAction( "Deleting", listItem.delete) } } } ... }
Confidential

Co*+o +o
ComboBox { currentIndex: 1 label: "Data roaming" width: page.width menu: ContextMenu { MenuItem { text: "Always ask" } MenuItem { text: "Do not allow" } MenuItem { text: "Always allow" } } }

Confidential

S(itc'es
Switch { checked: true icon.source: "image://theme/icon-m-bluet.. } TextSwitch { checked: true text: "System sounds" description: "Plays sound on system ... }

Confidential

Sliders
Slider { value: 0.8 label: Brightness } ProgressBar { label: Searching for devices... value: bluetooth.scanning } ProgressBar { label: "Searching networks" indeterminate: true }

Confidential

TEXT INPUT
Confidential

Te t field
Column { TextSwitch { text: "Bluetooth ... } TextField { text: "Unnamed" label: "Device name" placeHolderText: Device name focus: true } Combobox { label: "Visibility"; ... } ProgressBar { label: "Searching for devices"; ... } }
Confidential

Te t area
Page { SilicaFlickable { anchors.fill: parent PullDownMenu { ... } TextArea { focus: true placeholderText: "Write a note..." text: "Pears\nMangos\nApples\n..." ... } } ... }

Confidential

Searc' field
SilicaListView { PulleyMenu { ... } header: SearchField { text: "Ani" focus: true } model: Cities { filter: searchString } delegate: ListItem { Label { text: theme.highlightText( model.city, searchString, theme.highlightColor) ... } ... } }
Confidential

Enter )e"
Dialog { canAccept: contact.valid onAccepted: saveContact() Column { DialogHeader { ... } ... TextField { text: De Swert label: Last name EnterKey.enabled: text.length > 0 EnterKey.iconSource: "image://theme/icon-m-enter-next" EnterKey.onClicked: { companyField.focus = true } } ... } }
Confidential

T,AN- .OU
Confidential

http ..sailfishos.org