Canonical Voices

Posts tagged with 'sdk'

Michael Hall

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.

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

Read more
Michael Hall

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
             title: "Change Subreddit"
             text: "Select a new Subreddit"

             TextField {
                 id: subreddit
                 placeholderText: 'Homepage'
                 text: currentSubreddit
             }
             Button {
                 id: 'goButton'
                 text: 'Go'
                 color: 'green'
                 onClicked: {
                     currentSubreddit = subreddit.text
                     PopupUtils.close(dialog)
                 }
             }
         }
    }

To call up the dialog, I added a new button to the bottom toolbar.  Since I hadn’t added any before (the “Back” button was provided by PageStack) I had to give my subreddits page a property called tools that contains a ToolbarActions instance.  Inside of that, I was able to add an Action for opening my dialog.  Here is why you needed to wrap your Dialog in a Component, because it’s the component that you need to pass to PopupUtils.open.

    tools: ToolbarActions {
        Action {
            id: subredditAction
            objectName: "action"

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

            onTriggered: {
                PopupUtils.open(dialogComponent, subredditAction.itemHint)
            }
        }
    }

 

Viewing Articles

Now that I could change subreddits, and my subreddit article list was starting to look pretty good, I really, Really wanted to be able to view the contents of those articles.  Since I had no idea what the contents would be (webpage, image, video, reddit comments page), I wanted to be able to display anything that could be posted to Reddit, which essentially means I needed a browser.

Fortunately, the popular and powerful WebKit browser engine has a Qt component, which makes adding it to a QML dead simple.  So in my articleView page, I just needed to add the WebView component. I did have to set the visible property to false, otherwise it would display the content of the WebView, even when the articleView page wasn’t (I suspect it has something to do with WebKit taking over rendering from Qt/QML).

Page {
    id: articleView
    title: 'Article'

    WebView {
        id: articleContent
        anchors.fill: parent
        url: ""
        scale: 1
        visible: false
    }
}

And then in the ListItem.onClicked callback handler I defined earlier, in addition to pushing the articleView page on to the top of the PageStack, I also had to set the url property of the WebView. I also set the title of the articleView page to be the article’s title. Finally, I have this callback set the visibility to true to that it would actually be displayed.

ListView {
    id: articleList
    ...
    delegate: ListItem.Subtitled {
        ...
        onClicked: {
            articleView.title = model.data.title
            articleContent.url = model.data.url
            articleContent.visible = true
            pageStack.push(articleView)
        }
    }
}

Property Change handlers

One important bit of code that changed in this revision was the addition of a global currentSubreddit property (you can see it being used in the change subreddit dialog). In QML, any property you define will automatically get an on<Property>Changed callback. This means that I got an onCurrentSubredditChanged callback (camel case, which means the first letter of your property name is capitalized), so I used that to make the appropriate changes to the other components in my app.

    property string currentSubreddit: ''
    function onCurrentSubredditChanged() {
        console.debug('Changing Subreddit: '+currentSubreddit)
        if (currentSubreddit != '') {
            subredditFeed.source = "http://www.reddit.com/hot.json"
            subreddits.title = 'Homepage'
        } else {
            subredditFeed.source = "http://www.reddit.com/r/"+currentSubreddit+"/hot.json"
            subreddits.title = '/r/'+currentSubreddit
        }

        pageStack.clear()
        pageStack.push(subreddits)
    }

Another consequence of getting these automatic property change callbacks, is that you usually just need to change a component’s property in order to get it to do something. In this case, changing the source property on my JSONListModel was enough to make it load the new Reddit API data, which was then enough for my ListView to drop it’s currently items and add the new ones just loaded into the model. It really does border on magical sometimes.

Next time: Refactoring

Up until this point, all of the code I’ve been writing was in a single uReadIt.qml file, and it was starting to get rather large. But with QML it doesn’t need to be that way (and really, it shouldn’t be that way), so for revision 3 I decided to split it out into separate files.

Read the next article

Read more
Michael Hall

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

Read more
Michael Hall

Shortly after announcing the Ubuntu Phone, we made an ambitious and frankly unprecedented decision to make the development of the phone’s core apps a community initiative.  We weren’t just open sourcing the apps being developed by Canonical (though we did that too), we would let the community drive the design and development of what would become the foundation of the Ubuntu Touch app ecosystem.  And we would do it ten short months.

Work Item Tracking

Building 11 apps in less than a year is a lot of work, and tracking that work is itself a lot of work.  To do this, we are using the same tools and process as the rest of Ubuntu’s development.  This means using Launchpad for code hosting and bug tracking.  But more importantly, it also means using Blueprints for planning, breaking the work into individual tasks, and assigning those tasks to individual contributors.  This also allows us to use the Ubuntu Status Tracker to view the progress being made on those tasks.  As of right now, that chart looks like this:

As you can see, when we started tracking them we had about 165 work items defined, and about 140 left to finish.  As tasks are completed, and the developer updates the Blueprint with the new status of the work item, the orange part of the chart will shrink, and the green part will grow.  If we can keep the green part on or below the black line, then we’re on track to finish them all by our October goal.

Milestones

Ten months is a short amount of time to build a collection of well designed and polished apps, but it’s also a very long time for planning development work.  In order to narrow our focus and concentrate on immediate development tasks, we’ve further broken down the development period into a number of milestones, one for every month between now and October.

So instead of planning out the entire cycle, we will be scheduling tasks on a monthly basis.  This will make the amount of work seem less daunting, and also give us a more agile cycle of planning, development, and evaluation.  Each milestones will in turn get it’s own burn-down chart, so we can track the progress being made within the month as well.

Development Teams

Work items are also separated by team, which allows us to track the progress of individual projects, as well as the overall projects of the core apps campaign.

This allows teams to easily check if they are on track to complete their project  by October, and also gives them an idea of how much (or how little) work remains to be done.

Next Steps

The first milestone, coreapps-13.10-month-0 is coming up in mid-April.  For this milestone, we have been scheduling work items that were already making good progress, or that were small enough they could be completed in the two weeks between when it was defined and when it ends.

The milestone after that, ubuntu-13.10-month-1, ends mid-May, and will be our target for an alpha-level release of most of the apps.  As you can see, there is still a lot of work to be done between now and then, but we are currently below the burn-down line, so as long as we keep the momentum going we will make that goal.

Everything not currently scheduled for one of these two milestones is targeted to the final October goal.  Sometime in May we will begin scheduling work items for the coreapps-13.10-month-2 milestone, based on the progress made on these first two miles.

Read more
Michael Hall

If you missed it, I posted an earlier round of SDK apps a couple weeks ago.  Well the pace of new app development didn’t slow down, so here I am again with another round of apps being written with what is still an alpha version of the Ubuntu SDK.

Core Apps Update

First an update on the Ubuntu Touch Core Apps project.  I highlighted a few of these already in my last post, but in the past week those apps have received several updates, and others have had the initial features start to land as well.

Calculator

In addition to being able to scroll back through previous calculations, the Calculator App developers have now added the ability to start a new calculation by dragging up and “tearing off” the current one, moving it into the history for later browsing.

Clock

The Clock app has been given a slight visual update on the main screen, and all new stop watch functionality too!

Calendar

The Calendar App now shows events for the day, and will take over the full screen to let you easily view your busy schedule.

Weather

The weather app too has added some visual features, and with the detailed design workflows just released, you can expect to see major changes coming to this app soon.

RSS Reader

The RSS Reader got off to a good start this week, allowing you to add feeds and read articles, either all aggregated together or one feed at a time.


File Manager

Finally, the File Manager is now working enough to let you browse through files and folders, and even open files in the appropriate application

Independent Apps

A man of many talents

Developer Ashley Johnson has been working on a couple of new apps using the Ubuntu SDK.  His first was a touch-friendly version of the Ubuntu Software Center:

Click for video

Followed up earlier this week with an Ubuntu Touch client for the Pivotal Tracker project management web service:

Click for video

Ubuntu Loves Reddit

We must, because there is not one, not two, but three separate Reddit apps being written with the Ubuntu SDK.

By Victor Thompson

By Bram Geelen

By yours truly

Ultimate Time Waster

Even Canonical’s VP of Engineering, Rick Spencer, has gotten in on the fun.  Though his app, which gathers funny pictures from across the internet for easy browsing, it’s as productivity-focuses as you might expect.

Dawning of the age of Aquarius

Canonical’s Stuart Langridge (aquarius on IRC, for those who don’t get the reference) is our resident audio-phile, which might explain why he’s written two music apps with the Ubuntu SDK, one for Ext.fm and another for Ubuntu One’s Music Streaming service.

Zeegaree

Developer Micha? Pr?dotka is porting his desktop timer app Zeegaree to the Ubuntu SDK

GPS Workout tracker

Fitness trackers are becoming more and more popular, especially as mobile apps.  Ready to meet this demand is Marin Bareta and his workout tracker for Ubuntu Touch

uQQ

QQ, the popular instant messaging service out of China, is getting it’s own native uQQ Ubuntu SDK client thanks to developer ? ? (shared to me by Szymon Waliczek)

Resistor Color Codes

I’m not electrical engineer, so I don’t know exactly what this does, but if you do I bet it would be handy to have available in your pocket, so thank Oliver Marks for making it.

Stock Tracker

Last but not least, I just saw this stock price tracker from Robert Steckroth

 

If you are writing an Ubuntu SDK app, or have come across one that I haven’t blogged about yet, be sure to drop me an email or ping me on IRC.  I get the feeling this isn’t the last SDK Apps update I’ll be posting.

Read more