-
 KDE-Apps.org Applications for the KDE-Desktop 
 GTK-Apps.org Applications using the GTK Toolkit 
 GnomeFiles.org Applications for GNOME 
 MeeGo-Central.org Applications for MeeGo 
 CLI-Apps.org Command Line Applications 
 Qt-Apps.org Free Qt Applications 
 Qt-Prop.org Proprietary Qt Applications 
 Maemo-Apps.org Applications for the Maemo Plattform 
 Java-Apps.org Free Java Applications 
 eyeOS-Apps.org Free eyeOS Applications 
 Wine-Apps.org Wine Applications 
 Server-Apps.org Server Applications 
 apps.ownCloud.com ownCloud Applications 
--
-
 KDE-Look.org Artwork for the KDE-Desktop 
 GNOME-Look.org Artwork for the GNOME-Desktop 
 Xfce-Look.org Artwork for the Xfce-Desktop 
 Box-Look.org Artwork for your Windowmanager 
 E17-Stuff.org Artwork for Enlightenment 
 Beryl-Themes.org Artwork for the Beryl Windowmanager 
 Compiz-Themes.org Artwork for the Compiz Windowmanager 
 EDE-Look.org Themes for your EDE Desktop 
--
-
 Debian-Art.org Stuff for Debian 
 Gentoo-Art.org Artwork for Gentoo Linux 
 SUSE-Art.org Artwork for openSUSE 
 Ubuntu-Art.org Artwork for Ubuntu 
 Kubuntu-Art.org Artwork for Kubuntu 
 LinuxMint-Art.org Artwork for Linux Mint 
 Arch-Stuff.org Art And Stuff for Arch Linux 
 Frugalware-Art.org Themes for Frugalware 
 Fedora-Art.org Artwork for Fedora Linux 
 Mandriva-Art.org Artwork for Mandriva Linux 
--
-
 KDE-Files.org Files for KDE Applications 
 OpenTemplate.org Documents for OpenOffice.org
 GIMPStuff.org Files for GIMP
 InkscapeStuff.org Files for Inkscape
 ScribusStuff.org Files for Scribus
 BlenderStuff.org Textures and Objects for Blender
 VLC-Addons.org Themes and Extensions for VLC
--
-
 KDE-Help.org Support for your KDE Desktop 
 GNOME-Help.org Support for your GNOME Desktop 
 Xfce-Help.org Support for your Xfce Desktop 
--
openDesktop.orgopenDesktop.org:   Applications   Artwork   Linux Distributions   Documents    LinuxDaily.com    Linux42.org    OpenSkillz.com   
 
Artwork
News
Groups
Knowledge
Events
Forum
People
Jobs
Register
Login

-
- News . 
0
votes
click to vote up

Michael Hall: Building an Ubuntu SDK App: rev 1


Published Apr 8 2013 via RSS

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.



BackRead original postSend to a friend

Add comment

Add comment
Show all posts




-

-
Do you like or dislike Ubuntu Unity?
 Yes, unity is alien technology!
 It is less confusing than Gnome 3 default, shell.
 Granny thinks it is much more usable than Gnome 2
 Canonical is embarrasing itself with this split project
 Gnome 3 default shell is much better
 I dislike Unity, Gnome 3 default shell is alien technology!
 None of the above, I like the 2Gb for free and Apple alike behavior. Will post a comment instead

resultmore




 
 
 Who we are
Contact
More about us
Frequently Asked Questions
Register
Twitter
Blog
Explore
Artwork
Jobs
Knowledge
Events
People
Updates on identi.ca
Updates on Twitter
Facebook App
Content RSS   
News RSS   
Discussion RSS   
Events RSS   

Participate
Groups
Forum
Add Artwork
Public API
About KDE-Look.org
Legal Notice
Spreadshirt Shop
CafePress Shop
Advertising
Sponsor us
Report Abuse
 

Copyright 2001-2014 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.