Building an Ubuntu SDK App: rev 7

Hurray, it’s Friday!  I’ve got a somewhat lighter article to celebrate the end of the work week (sorry to those of you for whom it isn’t).  Today I’m going to cover revision 7, in which I replaced the large default Headers with small, customized headers specifically for my app.  If you haven’t read my previous articles in this series, I strongly encourage you to do so, as each one builds on top of the one before it.

New Header Component

To replace the old Header, I first had to create the new ones.  Headers are relatively simple things, they sit on top and display text, so there wasn’t a whole lot to it.  I created an Item to act as the container.  Items are the most based UI elements in QML, all they really do is hold other elements, and provide the base type for other elements to inherit from.  Inside of the Item I put a Rectangle, which is pretty much exactly what it sounds like.  What a Rectangle can do that an Item can’t is set a border and background color, which is what I wanted to do with my header.  Finally I put a Label inside of the Rectangle to contain the header.

Item {
    id: header
    anchors.right: parent.right
    anchors.left: parent.left
    anchors.top:parent.top

    height: headerText.height + units.gu(1)
    Rectangle{
        anchors.fill: parent
        color: 'lightblue'
        border.width: 1
        border.color: 'grey'
        Label {
            id: headerText
            anchors.centerIn: parent
            text: ''
            fontSize: 'large'
            font.bold: true
        }
    }
}

You can see that I set the anchors for the Item to place it at the top of it’s parent (SubredditListView in this case) which is important for reasons you’ll see below.  I also set the Rectangle’s background color to ‘lightblue’. For the subreddit page I made the fontSize large, bold, and centered in the header (that’s what anchors.centerIn: parent does).  That works for the short text name of a Subreddit, but for the article I needed something a little bit different.

Item {
    id: header
    anchors.right: parent.right
    anchors.left: parent.left
    anchors.top:parent.top
    visible: false
    height: headerText.contentHeight + units.gu(1)
    Rectangle{
        anchors.fill: parent
        color: 'lightblue'
        border.width: 1
        border.color: 'grey'
        Label {
            id: headerText
            anchors.fill: parent
            anchors.verticalCenter: parent.verticalCenter
            anchors.margins: units.gu(0.5)
            font.bold: false
            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
        }
    }
}

Here I made left the Label text it’s default size, and not bold.  I also didn’t center it horizontally like I did for the subreddit page.  But most importantly, I set the text to wrap so that articles with an overly long title will flow over multiple lines, increasing the size of the header to accommodate it.

Keeping it up to date

Since I was already passing the full article data data to the ArticleView component, extracting the new title and updating it was easy to do, I just needed to add a line to the onArticleChanged callback.

    onArticleChanged: {
        if (article) {
            articleWebView.url = article.data.url
            headerText.text = article.data.title
        }
    }

But changing the header on the SubredditListView required a little more work.  Since I already had a property on it called subreddit, I was able to write an onSubredditChanged callback to run whenever I needed to update the Subreddit name in this header.

    onSubredditChanged: updateHeader()
    Component.onCompleted: updateHeader()
    function updateHeader() {
        if (subreddit == '') {
            headerText.text = 'Frontpage'
        } else {
            headerText.text = subreddit
        }
    }

Next time: Transitions

One of the really neat things about QML is that it makes developing rich, fancy interfaces very easy.  And part of how it does this is by building support for transition animations right in at the ground level.  I knew from the beginning of this project that I wanted to try them out, and in the next revision I finally took the opportunity to add them.

This entry was posted in OpenSource, Programming, Projects and tagged , , , , , , . Bookmark the permalink.