Michael Hall: Building an Ubuntu SDK App: rev 1

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 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…

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.

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.

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.

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.

How do you like Plasma 5? The best KDE Desktop ever. Definitely a nice improvement. Not decided yet. Haven't tried it yet. I do not like some of the changes. KDE is taking the wrong way. I am still sticking with KDE 3.5. I have no opinion, but wanted to vote anyway.

Copyright 2001-2015 KDE-Look.org Team All rights reserved. KDE-Look.org is not liable for any content or goods on this site.All contributors are responsible for the lawfulness of their uploads.KDE and K Desktop Environment are trademarks of KDE e.V.