ubuntu-touch-coreapps team mailing list archive

[Tim Peeters <tim.peeters@xxxxxxxxxxxxx>]

Hello,

You have seen before that there are new designs that move all the
functionality of the toolbar to the header.
It is now possible in applications to use the new header. All you need to
do is set the useDeprecatedToolbar property of the app's MainView to false,
and the back button, tabs button and actions will move to the header in
your application automatically.

It is still possible to use the old API for defining the actions in the
header, just as long as they are defined using an Action. For example if
your MainView defines tools like this:

MainView {

useDeprecatedToolbar: false
tools: ToolbarItems {
    ToolbarButton {
        text: "hello"
        onClicked: print("hi")
    }
}
}

then the ToolbarButton will not show up in the header, you need to use an
Action as is shown below:

MainView {
useDeprecatedToolbar: false
tools: ToolbarItems {
   ToolbarButton {
      action: Action {
        text: "hello"
        iconName: "redo"
        onTriggered: print("hello from the action")
    }
}
}

As long as you do not set useDeprecatedToolbar to false, the actions will
keep working in the toolbar as they did before.

For a list of icon names that you can pass to the action, try to run 'dpkg
-L ubuntu-mobile-icons|grep actions'. In a few days all the icons will be
added in the UITK gallery for a more convenient overview. Of course,
instead of iconName it is also possible to include your own icons and use
iconSource in the action to use them.

This is the first version of the new header, and more functionality will be
added, but if something is broken or missing, feel free to let me know (by
e-mail or t1mp on freenode IRC), and/or to report a bug on
https://bugs.launchpad.net/ubuntu-ui-toolkit tagged with 'header'.

Have fun with the new header,
Tim.