Return of the Ubuntu UI Toolkit

Next month will be the release of Ubuntu 15.04 (Vivid Vervet) for desktop, and this version of Ubuntu will soon become the version that will be installed on Ubuntu phones as well. With the release of 15.04, we also release a new version of our UI toolkit: Ubuntu.Components 1.2. Below are some of the new features that it will have.

Hasta la vista, toolbar!

In Ubuntu.Components 1.1, the bottom-edge toolbar was replaced by a new header that can be used for navigating the app and trigger actions. Actions that used to be in the  toolbar were automatically moved to the header, and a useDeprecatedToolbar property was added to the MainView for developers that liked to keep the toolbar. In 1.2, the toolbar and useDeprecatedToolbar property are definitely gone which enabled us to clean up the MainView and header code, so that we can give you a fresh new visual design and more control over the looks and behavior of the header very soon.

One ListItem to rule them all

There are many different list items in Ubuntu.Components.ListItems, but they are not always easy to customize and the performance when you use thousands of them in your app is not optimal. Therefore, we now introduce the all-new ListItem component. It replaces all of the old list items, is super-fast (even when you have ten thousands of them), you can swipe them left and right to reveal actions, they offer selection mode (to quickly select a subset of all the list items), and the user can re-order the items in a list. Awesome :)

Ubuntu Shape up (doo doo doo)

The UbuntuShape is now in the best shape ever! It has been refactored to optimize performance (for example, the rendering is now "batched" so even a lot of them can be rendered fast), semi-transparent images and colored backgrounds are supported, you can use all the fill modes and tiling that the Image component supports, there is 2D transformation support, and the implementation was made extensible so that new features can be added more easily.

Here is the code for the app that was used for the two screenshots above:

import QtQuick 2.4
import Ubuntu.Components 1.2

MainView {
    width: units.gu(40)
    height: units.gu(50)
    //useDeprecatedToolbar: false // terminated

    Page {
        title: "Return of the UITK"

        ListItemActions {
            id: exampleLeadingActions
            actions: [
                Action {
                    iconName: "tick"
                },
                Action {
                    iconName: "delete"
                }
            ]
        }

        ListView {
            anchors.fill: parent
            model: 10
            delegate: ListItem {
                id: listItem
                Label {
                    anchors {
                        left: parent.left
                        leftMargin: units.gu(2)
                        verticalCenter: parent.verticalCenter
                    }
                    text: "List item "+index
                }
                leadingActions: exampleLeadingActions

                UbuntuShape {
                    anchors {
                        right: parent.right
                        top: parent.top
                        bottom: parent.bottom
                        margins: units.gu(0.5)
                    }
                    height: width
                    backgroundMode: listItem.highlighted ?
                                        UbuntuShape.VerticalGradient :
                                        UbuntuShape.SolidColor
                    backgroundColor: listItem.highlighted ?
                                         UbuntuColors.blue :
                                         UbuntuColors.lightGrey
                    secondaryBackgroundColor: UbuntuColors.green
                    source: Image {
                        source: "logo.png"
                    }
                    sourceFillMode: UbuntuShape.PreserveAspectFit
                }
            }
        }
    }
}

Besides these new features, we fixed a whole bunch of bugs and we are working hard on the next version of the UI toolkit that we will be blogging about in the near future, so stay tuned for more good stuff!