Michael Hall

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.

Well I’m back again, with part 4 of this series.  No, that’s not a typo in the title, this post will be primarily about revision 5 and revision 6 of my bzr branch.  What happened to rev 4?  Well it was pretty boring to be honest, just removing some console.log() calls that I used as a poor excuse for a debugger.  Anyway, boring.

If you haven’t read the previous articles in this series, you’ll want to do that before reading any further here:

• Rev 1: Creating a project, ListViews & ListModels
• Rev 2: ListItem thumbnails, Dialogs and WebKit
• Rev 3: Refactoring, visual improvements & gesture controls

Comments

Everybody knows that comments are half the fun of Reddit, but up until now uReadIt wasn’t able to view them.  Now, the proper way to do this would be to use the Reddit API to download the comment threads, and load them using nested ListViews.  But that’s going to take a while, and I wanted comments now.  So I cheated, took the easy way out, and just used the existing WebView to load the Reddit comments page URL instead.  I’ll do it the right way in a later revision….probably.

The first thing I needed was a way to load comments instead of the article content.  This meant finally using the Comments toolbar action I put in place earlier.  But I needed a way to change back too, nobody likes a one-way trip, so I added an Article action as well.

    Action {
        id: commentAction
        objectName: "comment"
        visible: true

        iconSource: Qt.resolvedUrl("comments.png")
        text: i18n.tr("Comments")

        onTriggered: {
            articleContent.showComments()
            articleAction.enabled = true
            commentAction.enabled = false
            articleViewActions.active = false
        }
    }
    Action {
        id: articleAction
        objectName: "article"
        enabled: false

        iconSource: Qt.resolvedUrl("avatar.png")
        text: i18n.tr("Article")

        onTriggered: {
            articleContent.showArticle()
            commentAction.enabled = true
            articleAction.enabled = false
            articleViewActions.active = false
        }
    }

Then I had to write the showComments and showArticle functions, which would switch the WebView.url from one to the other.  There was just one problem, that code didn’t have the comments url, only the content url.  So first I had to pass more data to my articleView page.  To avoid having to do this again, I decided to just pass it the whole article data model that I was getting from JSONListModel, that way I would have all the data I could potentially need for future features.

Since I created a new property called article, I also get a callback handler called onArticleChanged, which I took advantage of to determine if an article’s content was already a link to a Reddit comment page, and if so disabling the option to switch between Article and Comments.

Page {
    id: articleView
    title: 'Article'
    property var article: undefined

    onArticleChanged: {
        if (article) {
            articleContent.article = article
            commentAction.enabled = !article.data.is_self
            articleAction.enabled = false
            articleView.title = article.data.title
            articleContent.visible = true
        }
    }

Now I could finally implement showComments and showArticle, which I decided to do inside of ArticleView.  To support that, I would also need to pass the article data model on again, this time to ArticleView.  Then I could use that data to switch the WebView’s url.

Item {
    property var article: undefined
    property string baseUrl: 'http://www.reddit.com'

    onArticleChanged: {
        if (article) {
            articleWebView.url = article.data.url
        }
    }
    ...
    function showComments() {
        console.log('Comments: '+baseUrl + article.data.permalink)
        articleWebView.url = baseUrl + article.data.permalink
    }
    function showArticle() {
        articleWebView.url = article.data.url
    }

Subreddit Filters

I usually only read the Hot subreddit filter, I’ve only used New a handful of times, but like I said in the first article in this series, I’m going things to learn the Ubuntu SDK, not make a Reddit app.  I wanted to write some code that used the Ubuntu Popups.Popover component, and changing Reddit filters seemed like a good use for that kind of component.

Like Popups.Dialog, using a Popover is relatively simple.  You start with a Component to contain your popup, add your components to it, then call PopupUtils.open.  For changing filters, I chose to just put in a Column filled with ListItem.Standard items, one for each filter.  When one of them is selected, it will change a new filter property on my SubredditListView (which will reload from Reddit using the new filter).

Component {
    id: popoverComponent
    Popups.Popover {
        id: popover
        Column {
            id: containerLayout
            ...
            ListItem.Standard {
                text: "Hot"
                selected: articleList.filter == 'hot'
                onClicked: {
                    articleList.filter = 'hot'
                    PopupUtils.close(popover)
                }
            }
            ListItem.Standard {
                text: "New"
                selected: articleList.filter == 'new'
                onClicked: {
                    articleList.filter = 'new'
                    PopupUtils.close(popover)
                }
            }
            ListItem.Standard {
                text: "Rising"
                selected: articleList.filter == 'rising'
                onClicked: {
                    articleList.filter = 'rising'
                    PopupUtils.close(popover)
                }
            }
            ListItem.Standard {
                text: "Controversial"
                selected: articleList.filter == 'controversial'
                onClicked: {
                    articleList.filter = 'controversial'
                    PopupUtils.close(popover)
                }
            }
            ListItem.Standard {
                text: "Top"
                selected: articleList.filter == 'top'
                onClicked: {
                    articleList.filter = 'top'
                    PopupUtils.close(popover)
                }
            }
        }
    }
}
tools: ToolbarActions {
    ...
    Action {
        id: filterAction
        objectName: "filterAction"

        iconSource: Qt.resolvedUrl("settings.png")
        text: i18n.tr("Filter")

        onTriggered: {
            PopupUtils.open(popoverComponent, filterAction.itemHint)
        }
    }
}

Packaging

Finally I was ready to package uReadIt, to make it easy to install.  I copied my packaging files from what was used by the Ubuntu Touch Core Apps, which was itself copied from packaging files used by the notepad-qml app.  Now I’ll admit, it’s not perfect, and we’ve already had patches submitted to fix the Core Apps packaging, changes which I will be applying to uReadIt at some point.  So don’t take these as the right way to package your app, I’m putting them here to explain in a broad sense what the different files do in a Debian package.

debian/control

The control file gives all of the data about your package.  It has two sections, the first is for the source package, it contains the source package name, list of dependent packages needed to build your app and package, and some other miscellaneous information used by the packaging system.  Below that will be one or more binary package definitions.  I only have one, you probably will too.  This section contains another list of dependent packages, but these are packages needed to run your app, not build it. It also contains a space to describe your application.  The first line of the Description should be a brief description, used when listing a lot of packages together, and the lines below it should have a longer description, used when showing more information about a single package.

Source: ureadit
Priority: extra
Maintainer: Michael Hall 
Build-Depends: debhelper (>= 8.0.0), 
Standards-Version: 3.9.4
Section: misc
Homepage: https://launchpad.net/~mhall119/

Package: ureadit
Section: misc
Architecture: any
Depends: ${shlibs:Depends}, ${misc:Depends},
         qmlscene,
         qtdeclarative5-ubuntu-ui-toolkit-plugin | qt-components-ubuntu,
         qtdeclarative5-qtquick2-plugin
Description: Reddit Browser
 Desktop application for browsing Reddit, it's articles and comments

debian/rules

The rules file is what actually does the building, it’s like a Makefile for your package.  Ideally this doesn’t do much more than calling dh (debhelper).  In fact, mine should be doing that, but it has a lot of unnecessary complication due to being copied from one project to another to another.  You’re probably better of just ignoring mine, just remember that debian/rules does the building.

#!/usr/bin/make -f
# -*- makefile -*-
# Sample debian/rules that uses debhelper.
# This file was originally written by Joey Hess and Craig Small.
# As a special exception, when this file is copied by dh-make into a
# dh-make output file, you may use that output file without restriction.
# This special exception was added by Craig Small in version 0.37 of dh-make.

# Uncomment this to turn on verbose mode.
#export DH_VERBOSE=1

# Work-around for some machines where INSTALL_ROOT is not set properly by
# dh_auto_install
override_dh_auto_install:
	dh_auto_install -- INSTALL_ROOT=$(CURDIR)/debian/tmp

# Workaround a bug in that debhelper package version
override_dh_install:
	mkdir -p $(CURDIR)/debian/tmp/usr/share/applications/
	mkdir -p $(CURDIR)/debian/tmp/usr/bin/
	mkdir -p $(CURDIR)/debian/tmp/usr/share/uReadIt/
	cp uReadIt.desktop $(CURDIR)/debian/tmp/usr/share/applications/
	cp uReadIt.bin $(CURDIR)/debian/tmp/usr/bin/uReadIt
	cp -r *.qml *.js *.png $(CURDIR)/debian/tmp/usr/share/uReadIt/
	
	dh_install --sourcedir=debian/tmp --fail-missing

%:
	dh $@

debian/changelog

The changelog file contains a record of revisions to your package, just like a bzr or git changelog.  More importantly, the changelog is what tells debhelper the lasted version of your package.  So the (0.3) in the top line on mine tells it to build ureadit_0.3_all.deb.  It will also use the signature line to try and find a matching GPG key when signing packages.

ureadit (0.3) raring; urgency=low

  * Initial release

 -- Michael Hall   Mon, 25 March 2013 23:09:00 -0400

debian/copyright

Making sure that FOSS packages can be distributed, modified, and redistributed is important, so in Debian and Ubuntu having a properly formed copyright file is a requirement.  I won’t go into much detail on how to do this, the link at the top will take you to the official spec.  The key pieces are the sections that give a file glob, license and attribution.  You can have as many of these sections as you need to properly cover all of your app.

Format: http://dep.debian.net/deps/dep5
Upstream-Name: uReadIt
Source:

Files: *
Copyright: 2013 Michael Hall
License: GPL-3.0

Files: debian/*
Copyright: 2013 Michael Hall
License: LGPL-3.0

Next time: Customizing headers

The stock Ubuntu component Headers are nice, but they weren’t serving my purposes.  I wanted them to display more text, and ideally take up less room.  So in the next revision, I replaced them with some custom components that did exactly what I wanted.

This is part 3 of an ongoing series, you should read rev 1 and rev 2 first.

In this revision I make several visual improvements to the existing components, try out some new gesture-based interactions, and undergo a significant refactoring effort to separate my code into smaller, cleaner files.

The Refactor

For the refactor, I wanted to split my app into logical components, based largely on the QML Components, but grouping the major and minor components that could be treated as a single entity.

I started by separating the components for each of my Pages, subreddits and articleView, into independent QML files that I could treat as single components when adding them to my Page.  For the SubredditListView, I further separated the model code (based on the JSONListModel) and delegate code (based on ListItem.Subtitled) into their own files.

These changes would allow me build domain-specific functionality on top of the base components in the Ubuntu SDK, while keeping my main code file uncluttered by all of that code.  My main file, uReadIt.qml, could then focus solely on layout and navigation.

Connecting the dots

I went out of my way to avoid inter-dependency between these components, so the ArticleListItem doesn’t need to know about the ArticleView.  But I wanted to change my ArticleView whenever an ArticleListItem was clicked.  This meant I had provide aliases, signals and callback handlers on my top-level components, and they connect them together in my main file.

I gave my SubredditListView an itemClicked signal, which would automatically provide an onItemClicked callback property that I could access from uReadIt.qml.  Then, in my delegate’s onClicked callback, I simply fired off the signal with a reference to the ListModel item.

Item {
    ...
    signal itemClicked(var model)
    ...
    ListView {
        id: articleList
        ...
        delegate: ArticleListItem {
            id: articleItemDelegate
            onClicked: {
                itemClicked(model)
            }
        }
        ...
    }
    ...
}

Then in my ArticleView code, I made a property alias called url that was linked to the url property on the inner WebView component.  Setting ArticleView.url would then behave exactly like setting WebView.url did.

Item {
    property alias url: articleWebView.url
    ...
    WebView {
        id: articleWebView
        url: ""
        ...
    }
    ...
}

Finally, in uReadIt.qml, I set the onItemClicked handler for my SubredditListView to change the url property on my ArticleView,

    PageStack {
        id: pageStack
        ...
        Page {
            id: subreddits
            ...
            SubredditListView {
                id: articleList
                ...
                onItemClicked: {
                    articleView.title = model.data.title
                    articleContent.url = model.data.url
                    articleContent.visible = true
                    pageStack.push(articleView)
                }
            }
            ...
        }
        Page {
            id: articleView
            title: 'Article'

            ArticleView {
                id: articleContent
                ...
            }
        }
        ...
    }
}

Visual tweaks

Alright, enough of the refactoring, I managed to do some more interesting and fun things in this revision as well.  For one thing, I improved the look of thumbnails on the ListView by giving different icons for in-Reddit articles, as well as NSFW and ‘default’ articles.  I also restricted their size to 5×5 grid units.

A Grid Unit is a resolution-independent way of defining size of things in the Ubuntu SDK.  Instead of using pixels, which don’t work on both high and low density displays, or using physical units which don’t work on both hand-held and 10-foot displays, the Ubuntu SDK uses a Grid Unit.  The number of pixels in a grid unit depends on the device your app is running on.  On high-density displays, like the Retina displays on new Macs, your grid unit will use more pixels than on a standard resolution LCD, so that a Grid Unit is roughly the same physical size on both.  Likewise, on a television screen meant to be viewed from across the room, a grid unity will have a larger physical size than it would when running on a hand-held device, even if they are both 1080p screens.

ListItem.Subtitled {
    text: model.data.title
    subText: '('+model.data.domain+') - ' + model.data.score + ' - ' + model.data.subreddit + ' - ' + model.data.author
    icon: {
        var icon = model.data.thumbnail;
        if (icon == 'self') {
            icon = Qt.resolvedUrl("reddit.png");
        } else if (icon == 'default') {
            icon = Qt.resolvedUrl("avatar.png");
        } else if (icon == 'nsfw') {
            icon = Qt.resolvedUrl("settings.png");
        }

        return icon;
    }
    __iconHeight: units.gu(5)
    __iconWidth: units.gu(5)
    progression: true
}

In addition to these changes to the ListView, I was also getting tired of wondering if my content was being slow to load, or if it had failed for some reason, so I wanted to add a loading progress bar to my ArticleView.

To do this, I used the ProgressBar component from the Ubuntu SDK, and connected it to the loading property for the WebView component.  First I set the visibility of the progress bar to the loading status of the content with the onLoadingChanged callback.  If it was loading, the bar was visible, and when it wasn’t the bar was hidden.  Next I used the onLoadProgressChanged to set the progress bar’s value to the current loading progress of the content.  Once everything was connected, QML made it all just work.

    WebView {
        id: articleWebView
        ...
        onLoadingChanged: {
            loadProgressBar.visible = loading
        }

        onLoadProgressChanged: {
            loadProgressBar.value = loadProgress
        }
    }
    ProgressBar {
        id: loadProgressBar
        ...
        minimumValue: 0
        maximumValue: 100
    }

Dragging gestures

Finally I started to experiment with drag-gestures for moving from one page of results to the next, or reloading the subreddit entirely.  This was pretty tricky, the ListView component doesn’t provide any single property to tell you how far past the either end a user drag or flick has moved the content.  However, it does provide a contentY property that I could use to, eventually, calculate how far off the natural bounds the user has moved the content.

First I created a callback handler for onContentYChanged so that my app was aware of the content movement within the ListView.  Then, if Qt says the user was dragging the content (as opposed to movement caused by a flick), I would calculate the over-drag for both the top and bottom of the list.  I didn’t want to trigger an event for small drag distances, so below a certain threshold it will give instructions to continue dragging to perform an action, and beyond that threshold the text will change to tell the user to let go of the drag to initiate that action.

Next time: Packaging

By now I had an app that I wanted to use regularly on my Nexus 7.  Previously I had been running it from QtCreator by pressing Ctrl+F12 while I had my N7 connected via a USB cable, but that meant I could only start it when I was plugged into my laptop.  Not ideal for in-bed Reddit browsing.  So in the 4th revision of my code branch I added Debian packaging files for easy installation.

Read the next article

In my previous article I discussed how I got started with a new Ubuntu SDK app, and how easy it was to get a listing of Reddit articles displayed in a simple list. In my second revision, I added image thumbnails to that list, the ability to change to a different subreddit, and finally the capability to actually display the article’s content. Continue reading →

This is going to be the first in a series of articles about my journey into the wonderful world of Ubuntu SDK app development.  I’m no stranger to programming, or even app development on Ubuntu, but I am a stranger to Qt and QML.  Or at least I was.

Why build a Reddit client?

I started uReadIt for two primary reasons:

1. I missed browsing Reddit in bed from my Nexus 7 (/r/science/ is nice when the “educational” channels in the US are playing crap), which I could do when it was running Android.  But even more importantly…
2. I wanted to learn to write apps using the new Ubuntu SDK, and I always learn best by building something real.

The first of these was remarkably easy, I has a way of browsing my favorite subreddits within a day.  It’s the second reason, now, that is driving this development.  That’s important to remember, because it means I may choose to add features so that I can learn a part of the SDK, not necessarily because it’s an overly useful feature.  It also means I probably won’t be adding features that would make for an awesome Reddit app, unless they provide a way for me to try something new.

Tabs or PageStack?  That is the question

The Ubuntu SDK uses QtCreator, and adds plugins for integration with Ubuntu Devices, the Ubuntu Components, and also a set of Ubuntu App templates.  The QML templates both use the Ubuntu MainView component as it’s top-level element, but where they immediately differ is on the second-level components used for managing multiple “pages” in your app.

The first option is Tabs, which allows the user to switch between pages using an Ubuntu-themed tab-bar at the top.  This is what the Core Apps are using, and also what is used by default apps included in the Ubuntu Touch devices images, such as the Phone and Gallery apps.  Tabs are an easy way to provide flat navigation that the user can switch between any time.

The second option uses the PageStack component, which as the name implies manages a stack of pages.  PageStack doesn’t give you automatic navigation like Tabs do, you have to write the code to push pages to the stack (such as onClicked event handlers on a ListView itemm more on that later).  But it will automatically put a “Back” toolbar button in the bottom toolbar for you when when you push more than one page onto the stack, and clicking that will bring the user to the previous page in the stack.

I started out with Tabs, but decided that PageStack made more sense for what I wanted.

Putting it all together

So, to get started I created a new project in QtCreator, using the Ubuntu UI – Simple template (this is the PageStack one).  This gave me MainView, PageStack, and a single Page components in my uReadIt.qml file.  I knew I wanted the first page to be my subreddit list of articles, so I gave it an id of “subreddits”.  Next I created a second page and called it “articleView”, which is where I would load the actual article.  I gave each page a title, which the PageStack and MainView components automatically used to produce a large text header for my app.

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"
    applicationName: "uReadIt"
    id: window

    width: units.gu(50)
    height: units.gu(75)

    PageStack {
        id: pageStack
        anchors.fill: parent
        Component.onCompleted: pageStack.push(subreddits)

        Page {
            id: subreddits
            anchors.fill: parent
            title: 'uReadIt'
        }

        Page {
            id: articleView
            title: 'Article'
        }
    }
}

Next I added a ListView component to the first page, which I knew I needed for my list of articles.  Getting data into a ListView is simply a matter of giving it a ListModel instance.  And while Qt provides a very feature-full XMLListModel, Reddit’s API uses JSON.  Fortunately there JSONListModel implementation readily available on the internet, and I quickly found one on GitHub by Romain Pokrzywka that fit the bill nicely.  All I needed to do was give it the Reddit API URL for a subreddit, a json path query for pulling out just the article data, and it was ready to go.

Page {
    id: subreddits
    anchors.fill: parent
    title: 'uReadIt'

    ListView {
        id: articleList
        ...
        JSON.JSONListModel {
            id: subredditFeed
            source: "http://www.reddit.com/r/Ubuntu/hot.json"

            query: "$.data.children[*]"
        }
        model: subredditFeed.model

    }
}

To display the JSON data in the ListView, I needed to give it a “delegate” component, which QML will use as a kind of template for building an component item for each data item in the ListModel.  I opted for the ListItem.Subtitled provided by the Ubuntu SDK Components, which would allow me to give the article title as the primary text, and the article’s Reddit score as a sub-text. By settings progression to true, it even added an indicator arrow to inform the user that clicking on it will take them somewhere else. Finally I set the item’s onClicked callback handler to push the articleView page to the top of the PageStack, which will switch the user to that page, and provide a “Back” toolbar button to return the user to the subreddits page.

    ListView {
        id: articleList
        ...
        delegate: ListItem.Subtitled {
            text: model.data.title
            subText: 'Score: ' + model.data.score
            progression: true
            onClicked: pageStack.push(articleView)
        }
    }

That’s all I needed!  QML even took care of kicking off the HTTP request to the Reddit API as soon as the app starts.  My previous GUI programming experience is with python/Gtk and Java/Swing, which are both very verbose, very explicit toolkits.  QML is almost magical, by comparison, and it did take me a while to adjust and become comfortable with it “just working” the way it should, without me having to tell it.

Next Time: Content!

With that, I committed revision 1 to my Bazaar branch.  I had a working article list being pulled from Reddit.  In my next post, I’ll be covering how I got it to display the actual content of the article in the articleView page.

Read the next article