Ubuntu Touch QML API : PageHeadStyle

Question

I'm looking for some help to use PageHeadStyle components which is available in Ubuntu SDK. If somebody has example, I will be grateful.

Thanks.

Answer 1

The Ubuntu SDK offers style components in Ubuntu.Components 1.2 version to allow app developers to customize components to their liking. PageHeadStyle is one such component that can be used to customize the page header throughout the app.

Before using this style component, one needs to first define a custom application theme which would include these custom style components and instruct the application to use this.

Creating a application theme can be done by either deriving it from an existing system theme provided in Ubuntu Touch like Ambiance or SuruDark, or creating a theme from scratch. The latter is definitely the recommended way of creating a new theme since there are many style API that are still unstable and could change in the future.

Let's define our application in a new folder called MyTheme. The second step would be to create a file called parent_theme where you put the URI of the theme your application theme derives from. Your parent_theme would look like,

// parent_theme
Ubuntu.Components.Themes.SuruDark

Let's also define our theme's palette colors by creating a file called Palette.qml,

// Palette.qml

import QtQuick 2.4
import Ubuntu.Components 1.2
import Ubuntu.Components.Themes.SuruDark 1.1 as SuruDark

SuruDark.Palette {
    normal.background: “#A21E1C”
    selected.backgroundText: “yellow”
}

Now let's use the PageHeadStyle to customize our page header by creating a file called PageHeadStyle.qml which has the following structure,

import QtQuick 2.4
import Ubuntu.Components 1.2
import Ubuntu.Components.Styles 1.2
import Ubuntu.Components.Themes.Ambiance 1.1 as Ambiance

Ambiance.PageHeadStyle {
   fontSize: "small"
   fontWeight: Font.DemiBold
   textLeftMargin: units.gu(10)
}

Your MyTheme folder structure should look like,

MyTheme
-- parent_theme
-- PageHeadStyle.qml
-- Palette.qml

And then in your main qml file where MainView is defined, you can load your application theme by,

// main.qml

import QtQuick 2.4
import Ubuntu.Components 1.2

MainView {
    // Your code comes here

    // Set your theme
    Component.onCompleted: Theme.name = “MyTheme”

}

And then your application should look like,

Voila, here's your themed app! You can find more details about ubuntu touch app development at developer.ubuntu.com where SDK developers blog about this. This application theming guide was created by Zsombor Egri (SDK Dev) here.

You can find the entire sample code here.