Ubuntu – What does the head: property do on Page{} in qml

application-developmentqmlubuntu-sdkubuntu-touch

I have an app that I am trying to get the toolbar in the header to work. In the documentation I've noticed a property called head that seems to create and add items to the header toolbar.

What is the difference between this and the toolbaritems?

Also, related, in trying to use this head property, I get the error: Cannot assign to non-existent property "head" (similar to question Why am I getting the error “Cannot assign to non-existent property ”head"?)

Which one is the correct (or better) way?

Thank you

Randy

Best Answer

toolbaritems has been deprecated in Ubuntu.Components 1.1, so its use is strongly discouraged. It is maintained for backward compatibility, but the right way to add items to the header toolbar is now using head.actions.

The main difference between head.actions and toolbaritems is that you don't need anymore to add ToolbarButton items and then set their action property. All you need with head.actions is to specify a list of actions and then they will be automatically shown according to Ubuntu Touch patterns.

An example that shows how to use head property is the following (from official documentation):

import QtQuick 2.0
import Ubuntu.Components 1.1

MainView {
     width: units.gu(48)
     height: units.gu(60)
     Page {
         title: i18n.tr("Example page")
         Label {
             anchors.centerIn: parent
             text: i18n.tr("Hello world!")
        }
        head.actions: [
             Action {
                 iconName: "search"
                 text: i18n.tr("Search")
             },
             Action {
                 iconName: "contacts"
                 text: i18n.tr("Contacts")
             }
        ]
    }
}

There are some other useful settings for PageHead (e.g. custom Item to show instead of the title), so I'd suggest you to take a look at this page.

If you are running Ubuntu 14.04 LTS, these new APIs are not available, due to their dependence on Qt 5.3. You can solve this issue following this link .

Related Question