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.

Thumbnails

For some subreddits, Reddit will provide an image thumbnail to go along with the article.  Not only is this a nice feature of Reddit, but it’s also supplied as part of their API.  Since ListItem.Subtitled derives from ListItem.Base, it also has an optional icon property that can conveniently take a URL.  This made adding the thumbnail to my ListView incredibly easy.

Since not all articles have a thumbnail image, for now I just used a placeholder (the avatar image you get from the template).  I also didn’t do anything to make sure the images would fit in the ListItem.  In later revisions I would get a little smarter about how I handled thumbnails.

ListView {
    id: articleList
    ...
    delegate: ListItem.Subtitled {
        ...
        icon: (model.data.thumbnail) ? model.data.thumbnail : Qt.resolvedUrl("avatar.png")
        ...
    }
}

Changing Subreddits

Now that the subreddit article list in a pretty good state, I turned my attention to being able to change from one subreddit to another.  Revision 1 had a text input and button for this, but due to my not understanding QML layout this was hidden behind the header in those earlier screenshots.

So this time I decided to use another Ubuntu SDK component, Popups.Dialog, to show the form as an overlay on top of the article list.  This was very simple to do, and it looks so much nicer and more professional too.  The default theme that you get with the Ubuntu SDK makes it easy to make good looking apps, even if you’re not a designer.

The Dialog itself is straight forward, you simply wrap it up in a Component (you’ll see why later), give it a title and a bit of descriptive text for the user, and add your widgets to it.  All I needed was a TextField and a Button.  Since the Reddit “Frontpage” doesn’t have a subreddit, I decided to use no subreddit value to mean “Frontpage”, and used the TextField’s placeholderText property to display that when the TextField was empty (and yes I called it “Homepage” at first, I did correct it in later revisions).

    Component {
         id: dialogComponent
         Popups.Dialog {
             id: dialog
       ...read more 
Source: FULL ARTICLE at Planet Ubuntu