Canonical Voices

Posts tagged with 'opensource'

Michael Hall

Back again for one more article on developing an Ubuntu SDK app.  This one might be short,  but it covers one of the cooler bits of magic that QML gives you: Transitions.  But first, be sure to read the previous articles in this series!

Transitions

It used to be that if you wanted to animate parts of your app, you had to setup timers, calculate distances and speeds, program each step along the way, and do it all without killing the user’s CPU.  Sure it could be done, it was done, but it wasn’t easy.  QML is different, QML Transitions aren’t something you have to bolt on yourself, they’re built in at the foundation.

A Transition is defined as a collection of Animation components that can change different properties in different ways, triggered automatically by a change in a component’s state or other properties.  All you, the developer, needs to do is tell QML what you want to change, and how.

ListView Event Transitions

QML offers a variety of ways to define transitions, depending on what you need.  All Items have a transitions  property, which takes a list of Transition instances that will be called whenever the Item’s state property is changed.  You can also define a Transition for any property change using the “Behavior on <property> {}” syntax, which creates a Transition for changes on the named property.

But for me, it was a third item that fit best.  QML’s ListView component has several properties that take a Transition instance, properties such as add and remove, which correspond to an item being added or removed from the ListView.  These transitions are then applied to the delegate ListItem component when it is being added or removed.  I used these properties to make the items slide in and out of view when changing subreddit, or moving from one page to another.

    ListView {
        id: articleList
        ...
        add: Transition {
            id: addAnimation
            property bool forward: true
            SequentialAnimation {
                NumberAnimation { properties: "x"; from: addAnimation.forward ? articleList.width : -articleList.width; to: 0; duration: 300 }
            }

        }
        remove: Transition {
            id: removeAnimation
            property bool forward: true
            SequentialAnimation {
                NumberAnimation { properties: "x"; from: 0; to: removeAnimation.forward ? -articleList.width : articleList.width; duration: 300 }
            }
        }
    }

At first I just had transitions going in one direction, but I wanted to give some implicit meaning to them, going one direction for “more results” and another for “new results” (reload, change subreddit, etc).  That’s why I added the extra forward property, which is used to determine the direction of the transition.

You can see it in action in this video:

Next Time: Who knows?

This is the last revision currently in my bzr branch.  I have some other code in the works, for Sharing using the new Friends service, and HUD integration.  But for one reason or another, neither is working quite the way I want it yet, and they haven’t been committed to my branch yet.  There were typically several days between revisions when I was developing uReadIt, and I’ve been blogging about it nearly every day since my first post.  Once I have some time to hack on uReadIt some more, I will have more to write about, so stay tuned!

Read more
Michael Hall

I’ve blogged three times now, here, here and here, highlighting some of the apps being written with the Ubuntu SDK.  Well after covering 44 of them, and more already popping up since yesterday’s article, we’ve decided that we need to start getting these into the Ubuntu Touch Preview images so that people can try them out on supported devices, give the developers real-use feedback and bug reports, and generally promote the amazing work being done by our community of app developers.

The Collection

So Alan Pope (popey) and I have kicked off what we’re calling the App Collection, which are apps being developed outside of the scope of our Core Apps project, but that we still want to support, promote, and  guide through the process of getting them ready for deployment to Ubuntu devices.  This means we’re going to commit to helping developers get their apps packaged, and we’re going to be uploading them to a new PPA specifically for these apps.

The Apps

We’re starting out by collecting a list of known apps, with information about where to find their source code, the status of packaging for the app, and finally whether they are available in the PPA or not.  I seeded the list with the apps I’ve been blogging about, but it’s open to anybody who has an app, or knows about an app, to add it to this list.

Apps should be in a usable state before adding them to the list, and should perform a function that might be of interest to a user or tester.  Hello World apps are great for learning, but it’s not really something that you want to promote to users.

Packaging

You don’t have to know about Debian packaging to get your app in our PPA, we’re going to help you bootstrap and debug your package.  Our goal is to provide the minimal amount of packaging necessary for your app to be installable, on the desktop or on devices, and work properly.  Of course, if you can provide packaging for your app, that will greatly speed up the process of getting it into the PPA.

We would also welcome any help from packagers. Even if you don’t have an app of your own, you can help support the app developer community by spending some time getting their packaging in order.  QML apps are relatively simple when it comes to packaging, so a seasoned packaging veteran could probably knock one out in a matter of minutes.

PPA Review

You won’t have to conform to all of the requirements that you will to get into the Ubuntu archives, and there won’t be a lengthy review process.  The Apps Collection is offered up for users to evaluate and test Ubuntu Touch and apps written for it, there is no guarantee of stability or security.  Generally if it installs and runs, we’ll include it in the PPA.  But we’re not crazy, and we won’t be uploading apps that are obviously malware or detrimental to the user or platform.

Preview Image Review

Your app will need to go through a more intense review before being approved to go into the default install of the Ubuntu Touch Preview.  You code will be inspected by the engineers responsible for the preview images, to make sure it won’t cause any problems with stability or security that would interfere with the primary goal of the preview images, which is showing off the incredible user experience that Ubuntu provides on touch devices.

Inclusion

Once it’s ready, your app will join the default apps being developed by Canonical, as well as Core Apps being developed by other members of the community in collaboration with Canonical project managers, as part of the demonstration platform for Ubuntu Touch.

This is a great opportunity for you, as a developer, to get your app in the hands of a large number of early adopters.  It’s also a great opportunity for us, being able to promote off our platform and how it is being used by the app developer community.

Read more
Michael Hall

The excitement around the Ubuntu SDK and application development is still going strong, both on the Ubuntu Touch Core Apps side and with independent developers. So strong, in fact, that it’s time for another round of updates and spotlights on the work being done.

Core Apps in the Touch Preview

Some big news on the Core Apps side is that they are now being reviewed for inclusion in the daily Ubuntu Touch Preview images being developed by Canonical for the Nexus family of devices, and by community porters to a growing number of others.

Now that all of the Core Apps are being regularly built and packaged in the Core Apps PPA, they can be easily installed on desktops or devices.  And, after being reviewed by the team building the Ubuntu Touch Preview images, three of them have been selected to be part of the default installed application set. So please join me in congratulating the developers who work to them.

For the Calendar, Frank MertensKunal Parmar and Mario Boikov have done a fantastic job implementing the unique design interactions that were defined by Canonical’s design team.  For the Calculator, Dalius DobravolskasRiccardo Ferrazzo and Riccardo Padovani were able to quickly build something that is not only functional, but offers unique features that set it apart from other standard calculators.  Finally, the Clock app, where Juha Ristolainen, Nick Leppänen LarssonNekhelesh Ramananthan and Alessandro Pozzi have put together a visually stunning, multi-faceted application that I just can’t get enough of.

New Independent App Development

In addition to the work happening on the Core Apps, there has been a continuous development by independent app developers on their own projects.

LoadShedding

Load shedding (or rolling blackouts) are a way for electricity utilities to avoid being overloaded by energy demands at peak times.  This an be an inconvenience, to say the least, especially if you don’t know it’s coming.  Maybe that’s why developer razor created this LoadShedding schedule app.

Multi-Convert

Multi-Convert was originally an Android application, written in HTML5, that is now being ported to Ubuntu.  Multi-Convert allows real-time conversion of weight, length, area, volume and temperature between different standard units.

 TV Remotes

I ran across not one, but two different apps for the remote control of home-theater-PCs, bringing the promise of your mobile phone as a “second screen” to Ubuntu Touch.

First is Joseph Mills (who also created a Weather app featured in the first of these roundups), with a remote control for MythTV:

And if you’re an XBMC user instead, not to worry, because Michael Zanetti has you covered with his remote control for XBMC:

CatchPodder

If you use your mobile device for listening to podcasts, you’ll be pleased to find the nice and functional podcast manager CatchPodder, which lets you subscribe to multiple feeds as well as playing files directly from the server.

AudioBook Reader

Keeping with the theme of listening to people talk on your Ubuntu device, we have an AudioBook manager and player that is being written with the Ubuntu SDK, which lets you load books, display cover images, and more.

Bits

If you’re a software developer, sysadmin or network engineer, there’s a good chance you’ve had to convert numbers between decimal, hexadecimal and binary.  This makes Bits a very handy utility app to keep in your pocket.

Periodic Table

From the same developer who created a Software Center front-end and Pivotal Tracker (both featured in previous posts) has a new project underway, an element browser that gives you loads of detailed information about everything on the periodic table.

WebMap

Canonical engineering Manager Pat McGowan has gotten into the fun too, building an app for displaying web-based maps from a number of providers.

GetMeWheels

For Car2Go customers looking to rent or return a vehicle, GetMeWheels lets you easily find the nearest locations to you.  Created by the same developer as the XBMC remote, this app was originally developed for Maemo/Meego, but is now being ported to the Ubuntu SDK.

PlayMee

A third app from the developer of GetMeWheels and XBMC Remote is PlayMee, a local music player that again was originally developed for Maemo/Meego, and is being ported to the Ubuntu SDK.

Tic-Tac-Toe

Tic-Tac-Toe is not a fancy game, but this one developed by Hairo Carela makes beautiful use of animation and colors, and even keeps a nice score history.

LightOff

If games are you thing, you should also check out LightOff, a simple yet challenging game where the object is to turn off all of the lights, but clicking one toggles the state of every square around it.

 

That’s all for now, keep those apps coming and be sure to post them in the Ubuntu App Developers community on Google+

 

Read more
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.

Read more
Michael Hall

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:

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.

Read more
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

It’s official, UDS 13.05 is coming up next month, marking our second online Ubuntu Developer Summit, and coming only two months after the last one. While going virtual was part of our transition to make Ubuntu’s development more open and inclusive, the other side of that coin was to start holding them more often. The first we put into affect in March, and the second is coming in May. Read below for information about this UDS, and changes that have been made in response to feedback from the last one.

Scheduling

The dates for UDS 13.05 are May 14, 15 and 16, from 1400 UTC to 2000 UTC.  We will once again have 5 tracks: App Development, Community, Client, Server & Cloud and Foundations.  The track leads for these will be:

  • App Development: Alan Pope, David Planella & Michael Hall
  • Community: Daniel Holbach, Nick Skaggs & Jono Bacon
  • Client: Jason Warner & Sebastien Bacher
  • Server & Cloud: Dave Walker & Antonio Rosales
  • Foundations: Steve Langasek

Track leads will be in charge of approving Blueprints and getting them on the schedule.  If you are going to be responsible for running a session, please get with the track lead to make sure they have marked you as being required for that session. If you would like to get a session added for this UDS, you can do so either through registering a Blueprint or proposing a meeting through Summit itself.  Both approaches will require the approval of a Track Lead, so make sure you discuss it with them ahead of time.

Changes to…

Using feedback from attendees of the March UDS, we will be implementing a number of changes for UDS 13.05 to improve the experience.

Hangouts

Google+ Hangouts have a limit of 15 active participants (if started with a Canonical user account, it’s 10 if you don’t have a Google Apps domain), but in practice we rarely had that many people join in the last UDS.  This time around we’re going to encourage more people to join the video, especially community participants, so please check your webcams and microphones ahead of time to be ready.  If you want to join, just ask one of the session leaders on IRC for the hangout URL. We are also investigating ways to embed the IRC conversations in the Hangout window, to make it easier for those on the video to keep track of the conversation happening there.

The Plenaries

Most people agreed that the mid-day plenaries didn’t work as well online as they do in person.  There was also a desire to have a mid-day break to allow people to eat, stretch, or hold a sidebar conversation with somebody.  So we are replacing the mid-day plenaries with a “lunch” slot, giving you an hour break to do whatever you need to do. We will be keeping the introductory plenary on the morning of the first day, because that helps set the tone, goals and information needed for the rest of the week.  In addition to that, we have added back a closing plenary at the end of the last day, where track leads will be able to give a summary of the discussions and decisions made.

The Schedule

In addition to the above plenary changes, we have added an extra day to this UDS, making it 3 days instead of two.  The last day will allow for overflow of sessions that couldn’t fit into 2 days, or the scheduling of follow-up session when it is determined they are necessary following a discussion earlier in the week.

Registration

Registration to attend will now be done in Summit itself, rather than through a Launchpad Sprint.  So if you’re not a track lead, and you’re not registering Blueprints, there’s nothing you need to do on Launchpad itself.  This will help those who do not have a Launchpad profile, though you will still need an Ubuntu SSO account to log in.

To register for UDS 13.04, go to the summit page, and just above the schedule you will see an orange “Register in Summit” button.  If you don’t see that, you either need to log in to  summit or you’ve already registered.

Summit Scheduler

Chris Johnston and Adnane Belmadiaf have been working hard to improve the Summit Scheduler website, taking feedback from attendees to improve the interface and workflow of the site.  We will include as many enhancements as possible before the start of UDS 13.05.  If you are interested in helping improve it, and you have some web development skills, please find them on #ubuntu-website on Freenode to find out how you can get involved.

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
Michael Hall

I’m happy to announce that today I filed for a Feature Freeze Exception to get the latest Unity stack into Ubuntu Raring.  It’s a lot of new code, but it should all be available in a PPA in the next day or so, and it’ll be available there for about two weeks for people to test and provide feedback before it lands.  I won’t go into all of the fixes, performance work and other technical changes, but if you’re interested in what this means for you as a user, keep reading.

Smart Scopes

Discussed during a UDS-style Ubuntu On-Air hangout back in January, Smart Scopes use an intelligent server-side service to decide when they should be used to search.  This allows a single process (the Dash Home) to run a query through only a sub-set of your installed scopes.  It also allows the scopes processes to be terminated when you close the dash, and only re-start those that are likely to produce a relevant result.  As defined by the spec, this service will learn as more people use it, providing more relevant results, so you don’t get unwanted Amazon product results when it should be obvious you’re looking for an application.  It also means fewer running processes on your local machine, and therefore less memory usage overall.

100 Scopes

While there won’t be quite 100 in this release, there will be more scopes installed on the client than in previous releases, and even more that we will be able to implement on the server-side.  Thanks to the Smart Scope Service, these additional local scopes won’t be using up a lot of your system resources, because they’ll only be run when needed, then immediately terminated.  You will be able to install 3rd party scopes, just as before, even ones that the Smart Scope Service doesn’t know about yet.  Plus we will be able to add more server-side scopes during the lifetime of a stable release.  So while we’re not at 100 yet, there is still a large and growing number of scopes available.

Privacy

Now I know I couldn’t get away with talking about changes to the Dash, especially ones that put more of it’s functionality online, without talking about privacy concerns.  With these changes we’ve tried to strike a balance between control and convenience, privacy and productivity.  So while we’re providing more fine-grained controls over what scopes to enable, and whether or not to use the Smart Scope service, the default will still be to enable the services that we believe provides the best user experience on Ubuntu.  In addition, 13.04 has already added more notice to users that their the Dash will search online sources as well as local.

Read more
Michael Hall

UPDATE: A command porting walk-through has beed added to the documentation.

Back around UDS time, I began work on a reboot of Quickly, Ubuntu’s application development tool.  After two months and just short of 4000 lines of code written, I’m pleased to announce that the inner-workings of the new code is very nearly complete!  Now I’ve reached the point where I need your help.

The Recap

First, let me go back to what I said needed to be done last time.  Port from Python 2 to Python 3: Done. Add built-in argument handling: Done. Add meta-data output: Well, not quite.  I’m working on that though, and now I can add it without requiring anything from template authors.

But here are some other things I did get done. Add Bash shell completion: Done.  Added Help command (that works with all other commands): Done.  Created command class decorators: Done.  Support templates installed in any XDG_DATA_DIRS: Done.  Allow template overriding on the command-line: Done.  Started documentation for template authors: Done.

Now it’s your turn

With the core of the Quickly reboot nearly done, focus can now turn to the templates.  At this point I’m reasonably confident that the API used by the templates and commands won’t change (at least not much).  The ‘create’ and ‘run’ commands from the ubuntu-application template have already been ported, I used those to help develop the API.  But that leaves all the rest of the commands that need to be updated (see list at the bottom of this post).  If you want to help make application development in Ubuntu better, this is a great way to contribute.

For now, I want to focus on finishing the port of the ubuntu-application template.  This will reveal any changes that might still need to be made to the new API and code, without disrupting multiple templates.

How to port a Command

The first thing you need to do is understand how the new Quickly handles templates and commands.  I’ve started on some documentation for template developers, with a Getting Started guide that covers the basics.  You can also find me in #quickly in Freenode IRC for help.

Next you’ll need to find the code for the command you want to port.  If you already have the current Quickly installed, you can find them in /usr/share/quickly/templates/ubuntu-application/, or you can bzr branch lp:quickly to get the source.

The commands are already in Python, but they are stand-alone scripts.  You will need to convert them into Python classes, with the code to be executed being called in the run() method.  You can add your class to the ./data/templates/ubuntu-application/commands.py file in the new Quickly branch (lp:quickly/reboot).  Then submit it as a merge proposal against lp:quickly/reboot.

Grab one and go!

So here’s the full list of ubuntu-application template commands.  I’ll update this list with progress as it happens.  If you want to help, grab one of the TODO commands, and start porting.  Email me or ping me on IRC if you need help.

add: TODO
configure: TODO
create: DONE!
debug: TODO
design: TODO
edit: DONE!
license: TODO
package: DONE!
release: TODO
run: DONE!
save: DONE!
share: TODO
submitubuntu: TODO
test: TODO
tutorial: TODO
upgrade: TODO

Read more
Michael Hall

During this latest round of arguing over the inclusion of Amazon search results in the Unity Dash, Alan Bell pointed out the fact that while the default scopes shipped in Ubuntu were made to check the new privacy settings, we didn’t do a very good job of telling third-party developers how to do it.

(Update: I was told a better way of doing this, be sure to read the bottom of the post before implementing it in your own code)

Since I am also a third-party lens developer, I decided to add it to my come of my own code and share how to do it with other lens/scope developers.  It turns out, it’s remarkably easy to do.

Since the privacy setting is stored in DConf, which we can access via the Gio library, we need to include that in our GObject Introspection imports:

from gi.repository import GLib, Unity, Gio

Then, before performing a search, we need to fetch the Unity Lens settings:

lens_settings = Gio.Settings(‘com.canonical.Unity.Lenses’)

The key we are interested in is ’remote-content-search’, and it can have one of two value, ‘all’ or ‘none’.  Since my locoteams-scope performs only remote searches, by calling the API on http://loco.ubuntu.com, if the user has asked that no remote searches be made, this scope will return without doing anything.

And that’s it!  That’s all you need to do in order to make your lens or scope follow the user’s privacy settings.

Now, before we get to the comments, I’d like to kindly point out that this post is about how to check the privacy setting in your lens or scope.  It is not about whether or not we should be doing remote searches in the dash, or how you would rather the feature be implemented.  If you want to pile on to those argument some more, there are dozens of open threads all over the internet where you can do that.  Please don’t do it here.
&nbps;

Update

I wasn’t aware, but there is a PreferencesManager class in Unity 6 (Ubuntu 12.10) that lets you access the same settings:

You should use this API instead of going directly to GSettings/DConf.

Read more
Michael Hall

The Ubuntu Skunkworks program is now officially underway, we have some projects already staffed and running, and others where I am gathering final details about the work that needs to be done.  Today I decided to look at who has applied, and what they listed as their areas of interest, programming language experience and toolkit knowledge.  I can’t share details about the program, but I can give a general look at the people who have applied so far.

Most applicants listed more than one area of interest, including ones not listed in Mark’s original post about Skunkworks.  I’m not surprised that UI/UX and Web were two of the most popular areas.  I was expecting more people interested in the artistic/design side of things though.

Not as many people listed multiple languages as multiple areas of interest.  As a programmer myself, I’d encourage other programmers to expand their knowledge to other languages.  Python and web languages being the most popular isn’t at all surprising.  I would like to see more C/C++ applicants, given the number of important projects that are written in them.  Strangely absent was any mention of Vala or Go, surely we have some community members who have some experience with those.

The technology section had the most unexpected results.  Gtk has the largest single slice, sure, but it’s still much, much smaller than I would have expected.  Qt/QML even more so, where are all you KDE folks?  The Django slice makes sense, given the number of Python and Web applicants.

So in total, we’ve had a pretty wide variety of skills and interests from Skunkworks applicants, but we can still use more, especially in areas that are under-represented compared to the wider Ubuntu community.  If you are interested, the application process is simple: just create a wiki page using the ParticipationTemplate, and email me the link (mhall119@ubuntu.com).

Read more
Michael Hall

Now that Google+ has added a Communities feature, and seeing as how Jorge Castro has already created one for the wider Ubuntu community, I went ahead and created one specifically for our application developers.  If you are an existing app developer, or someone who is interested in getting started with app development, or thinking about porting an existing app to Ubuntu, be sure to join.

Google+ communities are brand new, so we’ll be figuring out how best to use them in the coming days and weeks, but it seems like a great addition.

Read more
Michael Hall

Shortly after the Ubuntu App Showdown earlier this year, Didier Roche and Michael Terry kicked off a series of discussions about a ground-up re-write of Quickly.  Not only would this fix many of the complications app developers experienced during the Showdown competition, but it would also make it easier to write tools around Quickly itself.

Unfortunately, neither Didier nor Michael were going to have much time this cycle to work on the reboot.  We had a UDS session to discuss the initiative, but we were going to need community contributions in order to get it done.

JFDI

I was very excited about the prospects of a Quickly reboot, but knowing that the current maintainers weren’t going to have time to work on it was a bit of a concern.  So much so, that during my 9+ hour flight from Orlando to Copenhagen, I decided to have a go at it myself. Between the flight, a layover in Frankfurt without wifi, and a few late nights in the Bella Sky hotel, I had the start of something promising enough to present during the UDS session.  I was pleased that both Didier and Michael liked my approach, and gave me some very good feedback on where to take it next.  Add another 9+ hour flight home, and I had a foundation on which a reboot can begin.

Where is stands now

My code branch is now a part of the Quickly project on Launchpad, you can grab a copy of it by running bzr branch lp:quickly/reboot.  The code currently provides some basic command-line functionality (including shell completion), as well as base classes for Templates, Projects and Commands.  I’ve begun porting the ubuntu-application template, reusing the current project_root files, but built on the new foundation.  Currently only the ‘create’ and ‘run’ commands have been converted to the new object-oriented command class.

I also have examples showing how this new approach will allow template authors to easily sub-class Templates and Commands, by starting both a port of the ubuntu-cli template, and also creating an ubuntu-git-application template that uses git instead of bzr.

What comes next

This is only the very beginning of the reboot process, and there is still a massive amount of work to be done.  For starters, the whole thing needs to be converted from Python 2 to Python 3, which should be relatively easy except for one area that does some import trickery (to keep Templates as python modules, without having to install them to PYTHON_PATH).  The Command class also needs to gain argument parameters, so they can be easily introspected to see what arguments they can take on the command line.  And the whole thing needs to gain a structured meta-data output mechanism so that non-Python application can still query it for information about available templates, a project’s commands and their arguments.

Where you come in

As I said at the beginning of the post, this reboot can only succeed if it has community contributions.  The groundwork has been laid, but there’s a lot more work to be done than I can do myself.  Our 13.04 goal is to have all of the existing functionality and templates (with the exception of the Flash template) ported to the reboot.  I can use help with the inner-working of Quickly core, but I absolutely need help porting the existing templates.

The new Template and Command classes make this much easier (in my opinion, anyway), so it will mostly be a matter of copy/paste/tweak from the old commands to the new ones. In many cases, it will make sense to sub-class and re-use parts of one Template or Command in another, further reducing the amount of work.

Getting started

If you are interested in helping with this effort, or if you simply want to take the current work for a spin, the first thing you should do is grab the code (bzr branch lp:quickly/reboot).  You can call the quickly binary by running ./bin/quickly from within the project’s root.

Some things you can try are:

./bin/quickly create ubuntu-application /tmp/foo

This will create a new python-gtk project called ‘foo’ in /tmp/foo.  You can then call:

./bin/quickly -p /tmp/foo run

This will run the applicaiton.  Note that you can use -p /path/to/project to make the command run against a specific project, without having to actually be in that directory.  If you are in that directory, you won’t need to use -p (but you will need to give the full path to the new quickly binary).

If you are interested in the templates, they are in ./data/templates/, each folder name corresponds to a template name.  The code will look for a class called Template in the base python namespace for the template (in ubuntu-application/__init__.py for example), which must be a subclass of the BaseTemplate class.  You don’t have to define the class there, but you do need to import it there.  Commands are added to the Template class definition, they can take arguments at the time you define them (see code for examples), and their .run() method will be called when invoked from the command line.  Unlike Templates, Commands can be defined anywhere, with any name, as long as they subclass BaseCommand and are attached to a template.

Read more
Michael Hall

A few weeks ago, Canonical founder Mark Shuttleworth announced a new project initiative dubbed “skunk works”, that would bring talented and trusted members of the Ubuntu community into what were previously Canonical-only development teams working on some of the most interesting and exciting new features in Ubuntu.

Since Mark’s announcement, I’ve been collecting the names and skill sets from people who were interested, as well as working with project managers within Canonical to identify which projects should be made part of the Skunk Works program.  If you want to be added to the list, please create a wiki page using the SkunkWorks/ParticipationTemplate template and send me the link in an email (mhall119@ubuntu.com).  If you’re not sure, continue reading to learn more about what this program is all about.

 What is Skunk Works?

Traditionally, skunk works programs have involved innovative or experimental projects lead by a small group of highly talented engineers.  The name originates from the Lockheed Martin division that produced such marvels as the U-2, SR-71 and F-117.  For us, it is going to focused on launching new projects or high-profile features for existing projects.  We will follow the same pattern of building small, informal, highly skilled teams that can work seamlessly together to produce the kinds of amazing results that provide those “tada” moments.

Why is it secret?

Canonical is, despite what some may say, an open source company.  Skunk Works projects will be no exception to this, the final results of the work will be released under an appropriate open license.  So why keep it secret?  One of the principle features of a traditional skunk works team is autonomy, they don’t need to seek approval for or justify their decisions, until they’ve had a chance to prove them.  Otherwise they wouldn’t be able to produce radically new designs or ideas, everything would either be watered down for consensus, or bogged down by argument.  By keeping initial development private, our skunk works teams will be able to experiment and innovate freely, without having their work questioned and criticized before it is ready.

Who can join?

Our Skunk Works is open to anybody who wants to apply, but not everybody who applies will get in on a project.  Because skunk works teams need to be very efficient and independent, all members need to be operating on the same page and at the same level in order to accomplish their goals.  Mark mentioned that we are looking for “trusted” members of our community.  There are two aspects to this trust.  First, we need to trust that you will respect the private nature of the work, which as I mentioned above is crucial to fostering the kind of independent thinking that skunk works are famous for.  Secondly, we need to trust in your ability to produce the desired results, and to work cooperatively with a small team towards a common goal.

What kind of work is involved?

We are still gathering candidate projects for the initial round of Skunk Works, but we already have a very wide variety.  Most of the work is going to involve some pretty intense development work, both on the front-end UI and back-end data analysis.  But there are also  projects that will require a significant amount of new design and artistic work.  It’s safe to say that the vast majority of the work will involve creation of some kind, since skunk works projects are by their nature more on the “proof” stage of development rather than “polish”.  Once you have had a chance to prove your work, it will leave the confines of Skunk Works and be made available for public consumption, contribution, and yes, criticism.

How to join

Still interested?  Great!  In order to match people up with projects they can contribute to, we’re asking everybody to fill out a short Wiki page detailing their skill sets and relevant experience.  You can use the SkunkWorks/ParticipationTemplate, just fill it in with your information.  Then send the link to the new page to my (mhall119@ubuntu.com) and I will add you to my growing list of candidates.  Then, when we have an internal project join the Skunk Works, I will give the project lead a list of people who’s skills and experience match the project’s need, and we will pick which ones to invite to join the team.  Not everybody will get assigned to a project, but you won’t be taken off the list.  If you revise your wiki page because you’ve acquired new skills or experience, just send me another email letting me know.

Read more
Michael Hall

When the Unity developers introduced Dash Previews in Unity 6, I knew it was something I wanted to add to Singlet.  I didn’t have time to get the feature added in time to get it into Quantal’s Universe archive, but thanks to Didier Roche and Iain Lane, I was able to get it into Quantal’s Backports archive before the actual release date, so it will be available to all Ubuntu users right away.

Previews for all!

One of the main goals of Singlet, second only to making it easy to write Unity lenses and scopes, was to automatically add new features to any lenses and scopes written with it.  Previews are my first opportunity to put this into practice.  Singlet 0.3 will add Preview information for any Scope or SingleScopeLens written for Singlet 0.2!  To do this, Singlet 0.3 will use the same image, title and description used in the search results to populate the preview.  This is a big improvement over having no preview at all, and there is absolutely nothing the developer needs to do. Even better, if you have a custom handle_uri method, it will also add an “Open” button to your preview which will call it.

Better, faster, simpler Previews

Getting previews for free is nice, but it does limit the preview to only the information you are giving to the result item.  But the Previews API allows you to do so much more, and Singlet lenses and scopes can take full advantage of them.

The simplest way to add more data to your preview is to add a method to your Scope or SingleScopeLens class called add_preview_data.  This method will be called whenever Unity needs to show a preview for one of your result items, and will be given the specific result item being previewed, as well as a reference to the Unity.Preview object itself.

def add_preview_data(self, result_item, preview):
    if result_item['category'] == self.lens.events:
        url_parts = result_item['uri'].split('/')
        event = self._ltp.getTeamEvent(url_parts[5])
        venue = self._ltp.getVenue(event['venue'])
        if 'latitude' in venue and 'longitude' in venue:
            preview.props.image_source_uri = 'http://maps.googleapis.com/maps/api/staticmap?center=%s,%s&zoom=11&size=600x600&markers=%s,%s&sensor=false' % (venue['latitude'], venue['longitude'], venue['latitude'], venue['longitude'])

The result_item is a Python dict containing the keys ‘uri’, ‘image’, ‘category’, ‘mime-type’, ‘title’, ‘description’, and ‘dnd-uri’, the same fields you added to the results model in your search field. The code above, added to the LoCo Teams scope, sets the Preview image to a Google Maps view of the venue’s location. You can also add additional Preview Actions from within this method.

If you want even more control, you can instead add a method called simply preview to your class, which takes the result_item and the full result_model from your scope, letting you create a Unity.Preview object yourself, and doing whatever you want with it.

def preview(self, result_item, result_model):
    preview = Unity.GenericPreview.new(result_item['title'], result_item['description'], None)
    preview.props.image_source_uri = result_item['image']

    some_action = Unity.PreviewAction.new("do_something", "Do Something", None)
    some_action.connect('activated', self.do_something)
    preview.add_action(some_action)

    return preview

Read more
Michael Hall

Well, we did it.  The six members of the Canonical Community Team stayed awake and (mostly) online for 24 straight hours, all for your entertainment and generous donations.  A lot of people gave a lot over the last week, both in terms of money and time, and every one of you deserves a big round of applause.

Team Insanity

First off, I wanted to thank (blame) our fearless leader, Jono Bacon, for bringing up this crazy idea in the first place.  He is the one who thought we should do something to give back to other organizations, outside of our FLOSS eco-system.  It’s good to remind us all that, as important as our work is, there are still things so much more important.  So thanks, Jono, for giving us a chance to focus some of our energy on the things that really matter.

I also need to thank the rest of my team, David Planella, Jorge Castro, Nick Skaggs and Daniel Holbach, for keeping me entertained and awake during that long, long 24 hours.  There aren’t many people I could put up with for that long, I’m glad I work in a team full of people like you.  And most importantly, thanks to all of our families for putting up with this stunt without killing us on-air.

Upstream Awesomeness

Before we started this 24-hour marathon, I sent a challenge to the Debian community.  I said that if I got 5 donations from their community, I would wear my Debian t-shirt during the entire broadcast.  Well, I should have asked for more, because it didn’t take long before I had more than that, so I was happily sporting the Debian logo for 24 hours (that poor shirt won’t ever be the same).

I wasn’t the only one who put a challenge to the Debian community.  Nick made a similar offer, in exchange for donations he would write missing man pages, and Daniel did the same by sending patches upstream.  As a result, the Debian community made an awesome showing in support of our charities.

All of our donors

The biggest thanks, of course, go out to all of those who donated to our charities.  Because of your generosity we raised well over £5000, with the contributions continuing to come in even after we had all finally gone to bed.  As of right now, our total stands at £ 5295.70 ($8486).  In particular, I would like to thank those who helped me raise £739.13 ($1184) for the Autism Research Trust:

And a very big thank you to my brother, Brian Hall, who’s donation put us over £5000 when we only had about an hour left in the marathon.  And, in a particularly touching gesture of brotherly-love, his donation came with this personal challenge to me:

So here it is.  The things I do for charity.

Read more