Canonical Voices

Posts tagged with 'ubuntu'

Michael Hall

So you may have heard (seriously, how could you not?) that Canonical is crowd-funding a showcase phone called Ubuntu Edge.  This is very exciting for a number of reasons, which I will get to below, but first go look at the Indie GoGo campaign page to see what I’m talking about.

Back? Good.  Did you contribute?  For the first 24 hours you can get a phone for a highly discounted contribution of $600 USD, rather than the $830 USD it will cost you tomorrow, so if you really want one of these it’s best to put your money on the table now.

Hardware Innovation

The phone hardware is impressive on it’s own, with more CPU, RAM and storage space than the laptop I was using for daily work last year.  Not only that, but it’s going to feature advances in the glass and battery that I haven’t seen on other phones.  Sapphire crystal glass, which can only be scratched by diamond, will keep your screen looking brand new for years to come.  And the silicon-anode battery promises faster charging and longer runtime without increasing the size of the handset.  You can see the full spec list on our other announcements.

I like this because we’re not asking you to contribute to making just another ordinary phone like all the rest you can buy already.  Instead we’re pushing the envelope to pioneer a new class of convergent superphones, a market that Ubuntu is uniquely positioned for.  This hardware will run Ubuntu Touch, Ubuntu for Android, and (when docked) a full Ubuntu Desktop.  But we’re not just playing the “make it bigger, make it faster” game, the design of Ubuntu Edge’s hardware is deliberate, everything choice was made based on what would provide the best user experience, what would make the edge-swipe gestures easy and responsive, what would let us show more of an app’s content while still fitting into the palm of the user’s hand.  This is a device designed from top to bottom for Ubuntu.

The margin on most production phones is thin enough to see though, which means that an OEM can’t afford to take risks with emerging technology or markets.  That’s why it’s so important that we prove both the capabilities of Ubuntu for convergence, and the consumer appeal for such a device.  Apple had to do it with the original iPhone, Google does it with their Nexus line of devices, and now it’s our turn to show what’s possible.

Community Campaign

Instead of seeking private capital to build these phones, then trying to sell them (at a profit or loss), we’ve decided to take it directly to the user community, which is why we’re asking you to pledge some amount to our campaign.  We couldn’t build Ubuntu without our community, and we can’t build Ubuntu Edge without you either.

Our target goal is $32 million, which sounds like a lot, but only because it is.  It really is.  But it’s still only a fraction of the cost of an actual production line of phones.  In order for an OEM to ship an Ubuntu phone (or any new phone), they would typically invest multiple times this amount.  So as big as our target goal is, and I don’t think anybody’s crowd-sourced more, it’s certainly not an unreasonable amount for what we’re offering.

The target amount will allow us to manufacture just 40,000 handsets, most of which I would imagine will already be claimed by those contributing $830 or more (only $600 if you do it the first day!).  All of the money raised in this campaign will go directly towards manufacturing and shipping these devices, it won’t be used for other Canonical business or even future Ubuntu development.  When you do the math, which I did, you see that it comes out to $800 per device to manufacture, and we’re only asking for $830 to get it (again, in the first 24 hours, you can get it below that cost).  This is an effort to build a new class of superphone, not a way of making Canonical rich.  If we reach our goal, you should have your Ubuntu Edge in hand sometime in May 2014!

Non-monetary contributions

I know that $830 is a lot of money, even $600 is a lot of money, but those aren’t the only ways you can help.  In addition to giving smaller amounts in support of this campaign (for which there are other perks) you can help make it a success by spreading the word.  No doubt it will be picked up by the usual online news sources, forums and blogs but let’s break it out of our usual Linux/FLOSS sphere.

So share links to the Indie GoGo campaign page on Facebook, Twitter and Google+.  Tell your friends, especially any tech savvy ones, about it.  Send an email to your local newspaper, radio or television stations, you never know who might think it’s an interesting story (and wouldn’t you just love to see Ubuntu on TV?).  Every person you tell about the campaign brings us one step closer to reaching our goal, and it doesn’t cost you a penny.

Read more
Michael Hall

We’ve had a great week running the Ubuntu Core Apps Hack Days so far, we’ve seen several new contributors join our development teams, and lots of merge proposals coming in and landing.  But we’re not done yet, we’ll be in #ubuntu-app-devel again today from 9am to 9pm UTC to help anybody who is interested in getting started contributing to these apps.

Today we’ll be focusing on an app that may not be high on the average user’s list of mobile apps, but is indispensable for anybody working on a ported image or writing an app for Ubuntu Touch, that is the File Manager App!

Thanks to reusing the Folder List Model QML Plugin from the Nemo Mobile project, the File Manager developers were able to get a very functional application working in a very short amount of time.  That means that our dogfooding list is already complete!

  • Browse folders. DONE!
  • View files within folders. DONE!
  • View file information. DONE!
  • Copy files. DONE!
  • Delete files. DONE!
  • Move files. DONE!

But don’t let that list fool you, there’s still plenty of work to be done.  The biggest one is making sure that any changes we’ve made to the Nemo plugin are sent back upstream.  If anybody from the Nemo project can help us with this, please find me (mhall119 on IRC).  We also need to make sure we have full Autopilot test coverage, and fix any remaining bugs that have been reported.

Read more
Michael Hall

I hope you all enjoyed spending some time playing Sudoku yesterday, because we’re back to work again for another Ubuntu Core App Hack Day!  As always you can find us in #ubuntu-app-devel on Freenode IRC from 9am to 9pm UTC to answer all of your app hacking questions, help get you setup and started contributing, or just generally discuss how to write Ubuntu Touch apps in general.

Today we leave behind yesterday’s light hearted fun and games and turn to the (only slightly) more serious work of reading news with the RSS Reader app!  Another one of the original Core Apps, the RSS Reader got some unexpected designs from the Canonical Design team that converted it from the typical list-of-headlines to a beautiful organic grid seen here.

Because of these very recent and very major changes to the UI, there’s a lot of work to be done to get all of the previous functionality working again at the same level.  For dogfooding the RSS Reader, these are our goals:

  • Add a feed.
  • Browse feeds. DONE!
  • View a feed.
  • Select an item to view from within the feed.

Because of the major changes, this app can use a lot of help from people who are simply willing to use it and report bugs so that the developers (and all of you new contributors) have a list of things to work on.  Then we need you QML/Javascript hackers to pick things from that list and start making and submitting your fixes.  Finally we need Autopilot tests written or updated for this new look, so I’m looking at you Python guys and gals to lend us a hand too.

Read more
Michael Hall

We’re continuing our Ubuntu Core Apps Hack Days again today in the #ubuntu-app-devel channel on Freenode IRC, from 9am to 9pm UTC.  If you want to learn more about the Core Apps and how you can get involved, jump into the channel and give myself (mhall119), Alan Pope (popey) or David Planella (dpm) a shout.

We’ve been working hard on the Core Apps lately, which is why I’m glad that today we get spend time on something a little more fun: the Sudoku App!  Sudoku was originally developed outside of the Core Apps umbrella, but it progressed so quickly and fit Ubuntu Touch so well, that we invited it’s developer to join the rest of our Core Apps.

Sudoku was so far along before joining the Core Apps, that our dogfooding list was already largely complete:

  • Start a new game DONE!
  • Record and display game statistics DONE!
  • Provide hints DONE!

But even as complete as it is, there are still a few bugs to squash and some final Autopilot tests to write, so if you have QML and Javascript skills or Python skills and can spare a little bit of your time, you can help us put the finishing touches on this classic game.  And if you want to help us, you know, “test” it for a few hours of your day, we’ll totally consider that a contribution too.

Read more
Michael Hall

It’s day 5 of the Ubuntu Core Apps Hack Days!  We’ve seen a tremendous amount of work coming into the Core Apps, and have several new contributors joining the initiative.  We’re keeping that momentum going throughout the week in #ubuntu-app-devel on Freenode from 9am to 9pm UTC, so come and be a part of this exciting project.

Today we’ll turn our attention to the Weather application, another one of the original Core Apps, and another one that is already largely complete.  The Weather app gained multi-city support and a long range forecast early on, and has more recently added the ability to toggle between Celsius and Fahrenheit temperature displays.  Between those, it met all of the criteria we set for dogfooding:

  • Choose a location to view weather from. DONE!
  • View current weather conditions. DONE!
  • View a 10 day forecast. DONE!
  • Configure C or F and display that chosen setting for all locations. DONE!

Since the features are complete, we now need to put the rest of our effort towards polish and quality.  This means we need those of you with QML and Javascript knowledge to help fix the reported bugs in Launchpad, and those of you with Python knowledge to help us finish the Autopilot test coverage, so that we can make this app rock solid and reliable for every day use.

Read more
Michael Hall

Welcome back to another week of Ubuntu Core Apps Hack Days!  As always we will be in #ubuntu-app-devel on Freenode’s IRC from 9am to 9pm UTC to answer all of your questions, help you get your development environment setup, and get started contributing to the Core Apps projects.

To start off this week we will be taking a look at the Calculator app.  The Calculator was another one of the original core apps, made some of the fastest progress and was one of the first to make it onto the device images’ default install.  The Calculator is as simple as it is beautiful, and thanks to this and the hard work put in by it’s developers, that means it’s already feature-complete as far as our dogfooding list was concerned:

  • Create a common calculation (subtraction, addition, multiplication etc). DONE!
  • Create a new calculation. DONE!
  • Keep previous calculations across reboots of the app and device DONE!

But even though the main features are complete, there is still some work left to be done.  Most importantly, with Ubuntu’s focus on quality these days, we need to finish up our Autopilot test coverage, which means we need the help of all your Python developers out there.  We also have a list of reported bugs that need to be fixed, which is going to require somebody with QML and/or Javascript knowledge.  If either of those suits you, please join us in #ubuntu-app-devel today to get started!

Read more
Michael Hall

Today is the last Ubuntu Core Apps Hack Day of the week, but don’t worry because we’re coming back every day next week to cover more of our amazing Core Apps.  Like previous days, we’ll be in #ubuntu-app-devel in Freenode IRC from 9am to 9pm UTC to help you get setup and contributing to these apps.

Today our focus will be the Clock app, one of the original Core Apps, and while you might think that a clock app would be simple, there’s a lot going on in this one.  In addition to showing you the current local time, the Clock app also sports a world clock, a timer, a stopwatch, and soon the ability to set alarms.  Our dogfooding goals for the clock are:

  • View local time. DONE!
  • View times in different cities. DONE!
  • Stopwatch (start, stop, pause, lap) DONE!
  • Set alarm, be notified when the alarm time arrives
  • Set timer, be notified when the time runs out

As you can see, the first 3 are already done and working.  The remaining two are blocked on platform work for setting alarms that will be triggered by the system even when the Clock app itself isn’t active.

But that doesn’t mean there’s nothing for new contributors to do.  One of the Clock’s most active developers, Nekhelesh Ramananthan, has helpfully provide me with a list of things that he needs your help with:

  • Getting autopilots tests ready for the timer, stopwatch and clock
  • Bug fixes for timer, clock and world clock
  • Caching support for sunrise/sunset times. The sunrise/sunset should only be retrieved once a day or when the location is changed. I will create a bug report to track this and also tag it hackday.

He even went so far as to tag bugs that would make good hack day targets and provide some insight into how to solve them, so you can go grab one from this list and give it a shot.  Some of these will require QML and Javascript knowledge, others are for needed Autopilot tests that need Python, so we’ve got something for everybody.  Nekhelesh (nik90) will also be in the IRC channel tomorrow to help you work on these items and review your contributions.

Read more
Michael Hall

Welcome to day 2 of the Ubuntu Core Apps Hack Days!  Once again we will be in #ubuntu-app-devel on Freenode IRC from 9am to 9pm UTC to help you get started contributing to Ubuntu Touch’s Core Apps.

Today we’re going to turn our attention to the Music app.  This app is a little bit different in the fact that it didn’t start off as a Core App, or even as a single app.  Several people had started on music apps or mockups for music apps, so we brought them together to combine their efforts into a single app.  Because of this, instead of progressing through the usual steps of defining requirements, designing user experience and then implementing features, we had all three things coming together at the same time.  This put the Music app both ahead and behind the others in different ways.

The feature targets we set out for dogfooding the Music app are all larely half-done, as a result of how the app is the amalgamation of several formerly independent efforts.  You’ll find that many of them are complete on the back-end but need to be integrated with the new front-end work, or vice-versa.  As such, this is a project where a little bit of effort can make a very large impact.  To get the Music app ready, we want to get the following working:

  • Read in music from ~/Music.
  • Browse a list of artists.
  • Browse albums by an artist.
  • Browse songs by an artist.
  • Play a song, with transport controls (Play, Stop/Pause, Skip Back/Forwards).
  • Shuffle.
  • Bonus: pull in album cover/details from the net.

To do these, you’ll need some working knowledge of QML and Javascript.  The Music app also re-uses the File Manager App’s plugin to find and read metadata of music files, so if you have C++ experience there are things you can work on there too.  And of course our Python developers can help by working on Autopilot tests to make sure that the above features work (and continue to work) as expected.

Just like the Calendar app, there are some things that we want the Music app to do that require work to be done on the platform side.  Specifically, we want the Music app to continue playing songs when you switch away from it or turn off the phone’s screen.  Currently the platform will suspend the Music app’s process when this happens, so playback stops.  However Canonical’s Jim Hodapp, who has already done a lot of work on multimedia integration and gstreamer, will soon begin work on a system-wide media playback service that the Music app will be able to hand songs off to.  Until then we will continue using the Qt Multimedia APIs to play songs while the application is still active.

Read more
Michael Hall

Today is the first of the Ubuntu Core Apps Hack Days, where we will focus on one app per day to help get new contributors setup, walk people though installing and testing the Core apps, filing bug reports and knocking out some of the outstanding feature requirements needed to get the Core Apps ready for release.

The Hack Day activity will happen in the #ubuntu-app-devel channel on Freenode IRC.  We will have dedicated helpers (myself, dpm and popey) from 9am to 9pm UTC to answer your questions, help get your setup, and review your code.  We will also have developers of the Core Apps themselves joining the channel as they can to help with your contribution.

Today we’re going to be focusing on the Calendar application, one of the original Core apps and also one of those that is already in the default device images.  Our goal for today is to get the Calendar ready for every-day use (dogfooding), which means we need to get the following features working:

  • Browse by month
  • Browse by week
  • Browse by day
  • Bonus: sync Google Calendar

To help with these, you’ll need to know some QML and/or Javascript.  You can read through our Core Apps Development Guide to get started.

In addition to these required features, we also have a load of new designs to improve the functionality and user experience for the app.  If you’re feeling like taking on a slighter larger task, and you have a good handle on building front-end functionality in QML, here’s a good opportunity to leave your mark.

We also want to fill out our automated test coverage, of which there are currently five bugs that need somebody to work on them.  Autopilot tests are all written in Python, so this is a great way for our large community of Python developers to get involved with the Core Apps projects.

Read more
Michael Hall

This is my third Core Apps update, you can go back and read about the Clock and Calendar apps if you missed them.  Today I’m going to show off the Calculator app.

Calculator Features

Basic Functions

The Calculator does exactly what you would expect a calculator to do.  It’s a four-function calculator and does it’s job perfectly well.  But it has a few unique features that make it so much more useful.  Using the old paper-roll calculators as inspiration, the calculator lets you label the numbers in your calculation, so you can go back and see “7 what?”.  When you’re done with a calculation, instead of clearing it off, you simply drag upwards to “tear off” that individual calculation.

Calculation History

Just because you’ve torn off a calculation, doesn’t mean you’ve thrown it away.  Instead, your calculation is stored in a browseable history.  This makes the labels even more useful, because you can go back hours, days, even months to an old bit of calculating.  You can even tap on any number in any of those calculations to insert it into your current one.  If you really are done with a calculation, you can swipe it to the right or left to delete it from your history.

Visual Designs

The Design team says we’ll have visual designs for the Calculator later this week, so the developers will be able to start on implementing those.  Keep an eye on the design team blog and Google+ to see them when they come out.

Release Schedule

The release schedule for the Calculator is the same as the Clock.  It’s already well past what would be considered an Alpha release, so we just called May for that milestone.  Going forward, we plan on delivering a Beta in July that includes the visual designs, followed by a final release in August.

Read more
Michael Hall

Yesterday I posted the first in a new series of Core App Update, featuring the Clock App’s development.  Today I’m going to cover the status of the Calendar

Calendar Features

Calendar View

The calendar now provides several different views you can choose from.  You start off with a full month at the top, and your events for the day below.  Swiping left and right on the month will take you back or forward a month at a time.  Swiping left or right on the bottom half will take you back and forward a day at a time.

Pull the event area down and let it go, and the month will collapse down into a single week. Now swiping left and right there will move you back and forward a week at a time.  Pull down and let it go again and it will snap back to showing the full month.

Finally, you have an option in the toolbar (swipe up from the bottom edge) to switch from an event list to a timeline view of your events.

Adding Events

You can current add events to the calendar app, and they will be stored in a local database.  However, after discussions with Ubuntu Touch developers, the Calendar team is refactoring the app to use the Qt Organizer APIs instead.  This will allow it to automatically support saving to Evolution Data Server as a backend as soon as it’s integrated, making calendar events available to other parts of Ubuntu such as the datetime indicator.  Being able to import your ical feeds is also on the developer’s TODO list.

Visual Designs

We don’t have new visual designs for the Calendar yet, but it is one of the apps that the Design team has committed to providing one for.  Now that they are done with the Clock’s visual designs, I hope to see these soon for the Calendar.

Release Schedule

Once again I worked with the Calendar developers to set release targets for their app.  The alpha release is targeted for month-2, this month, and should include the switch to Qt Organizer.  Then we plan on having a Beta release in August and a Final in September.

Read more
Michael Hall

The Ubuntu Touch Core Apps project is a new kind of collaboration between Canonical and the wider Ubuntu community, with a goal of developing high-quality applications for Ubuntu Touch. A couple of months ago I set out the Core Apps roadmap to October, and it’s high time I got around to giving you an update on our progress.

I had originally planned on giving an update of each of the core apps in a single blog post, but I realized that was going to get very, very long.  And nobody has time to read a giant wall of text.  So instead I’ll be breaking them up, one post per apps, so you can spread your reading time over multiple days.

To kick this off, here are the latest developments going on in the Clock app:

Clock Features

Sunrise & Sunset

Recently added to the main Clock tab is a way to check the sunrise and sunset times for the day.  Simply tap on the clock face and it will switch to the sunrise/sunset view.  Tap it again to switch back.  Swipe up from the bottom to reveal the toolbar, where you can set your location (which is used to calculate your specific sunrise and sunset times).

Alarms

The Clock app developers are still waiting on a platform API to support registering alarms that will work even when the Clock app isn’t running.  But while they’re waiting on that, they’ve still be working hard on the interface for managing your alarms.  Their approach is both minimal and obvious, you drag the hour and minute hands around to the time you and and click Done in the center.  If you need more options, you can pick how often to repeat, what alarm tone to use, and whether or not to vibrate.

Now these won’t actually work until the platform API is in place, but you can already see how it will look to the user, and how simple it is to do.

Timer

Like the alarms, setting a timer is both minimal and obvious.  Unlike alarms, the timer is working today.  Drag the hand around to set how many seconds, tap the minutes part of the time and drag the hand to set the minutes.  Make more than one revolution around the dial and it will start adding hours as well.

Another nice feature is the ability to define custom timers that you can use again and again.  Swipe up from the bottom to reveal the toolbar again, select Add Preset, and set the duration using the same simple dragging motions on the dial.

Stopwatch

Finally we come to the stopwatch part of the app.  In addition to simple start, pause and reset functionality, the stopwatch lets you mark laps as it goes, and keeps a log of each one that you can view both while the stopwatch is running and after.

Visual Designs

Some of you may have seen the new visual concepts that the Design Team published last month, which received quite a bit of positive feedback.  Well this week they sent the Clock developers the completed visual designs for the Clock app, so we should start to get our first taste of those designs in action in the next few weeks.

Release Schedule

Starting a couple of weeks ago, I started working with each of the Core Apps developer teams to set release targets for Alpha, Beta and Final releases of the app, with a goal to have them all at a 1.0 version before the October release of Ubuntu 13.10.  For the clock, we decided to mark the month-1 milestone (May) as an alpha release, because of the progress they had already made.  We then picked month-3 (July) for beta and month-4 (August) for our final release target.  Furthermore we have work items assigned on a monthly release basis to track the progress we are making.

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