[SailfishDevel] Silica API documentation on sailfishos.org website updated

[Joona Petrell]

> Generally, for me there should be more examples on active covers

Hi Harald,

You're right, cover layouts is an area where Silica components need to improve. We provide common UI components for easily building Sailfish-style application pages, but so far when it comes to covers developers have unfortunately mostly been required to create their own custom cover layouts. This is because most application cover layouts have so far been so different from each other that not too many clear UI patterns have emerged that would nicely turn into a reusable common component.

Luckily similar UI development principles often apply for cover pages as for the normal application pages like 1.) use Theme.paddingLarge margin around the page edges and 2.) keep most text of size Theme.fontSizeMedium. Also since the space on the covers is very limited remember to use truncationMode: TruncationMode.Fade for non-wrapped one-line labels.

Quickly thinking we currently have seven types of cover pages in use:

1. Empty state cover. App icon + descriptive label (most platform apps when there is no content)
  - example: CoverPlaceholder { visible: model.count === 0; text: "Sign in to..."; icon.source: appIcon }
2. Thumbnail cover. Scaled down, cropped view of the app contents (Maps, current tab in Browser, open PDF document in Documents, open photo in Gallery)
  - example: Image { anchors.fill: parent; fillMode: Image.PreserveAspectCrop; source: currentItem.source }
3. Grid cover. 2 column x 3 row grid of items, e.g. photos or icons (Gallery, Settings, Camera)
  - example: Grid { Repeater { model: photos; Image {} }}
4. List cover of one-line items. Vertical list of 5-7 items with an icon and a label (Phone, Documents)
  - example: ListView { model: callLog: delegate: ListItem { Row { Image {} Label {} } } }
5. List cover of two-line items. Vertical list of 3 two-line items (Messages, Notes)
  - example: ListView { model: conversations: delegate: Column { Label {} Label {} } }
6. Header and two items cover (Calendar, Clock)
  - example: Column { HeaderItem {} ListView {} }
7. Static cover. Big billboard graphic and status text (Store, Tutorial)
  - example: Column { Image {} Label {} }

I'll add an item to our backlog about writing instructions on how to build active covers. Also in the future we should provide some common cover layout components.

Cheers,

Joona

________________________________________
From: devel-bounces at lists.sailfishos.org [devel-bounces at lists.sailfishos.org] on behalf of Harald Schmitt [linux at hschmitt.de]
Sent: 07 February 2014 15:07
To: devel at lists.sailfishos.org
Subject: Re: [SailfishDevel] Silica API documentation on sailfishos.org website updated

Am 07.02.2014 13:36, schrieb Joona Petrell:
> Hi,
>
> As requested on Together Jolla website we have just updated the outdated
> Silica documentation on our developer website to match the latest SDK.
>
> See https://sailfishos.org/sailfish-silica/index.html
>
> We have also included a new UI development guide called Common Pitfalls
> in Sailfish Application Development in the documentation. I encourage
> everybody interested in building Sailfish applications to read it. :)
>
> https://sailfishos.org/sailfish-silica/sailfish-application-pitfalls.html

I did a quick read and the pitfalls section is very helpful.

Generally, for me there should be more examples on active covers since
you say: "... this concept is at the core of the multitasking
capabilities of Sailfish."

Best regards,
Harald

_______________________________________________
SailfishOS.org Devel mailing list