Wolf Vollprecht
Asylstrasse 127
8032 Zürich

TEL: +41 76 729 39 99

MAIL: w.vollprecht@gmail.com

Tutorial: Creating an ubuntu application with HTML and Quickly

// 14 January 2013

So, apparently there are quite some more templates for quickly then I thought there were.

Gabriel asked me to help him out, package his awesome Ubuntu Phone Clock app so he could upload it to his PPA, and I also had some problems figuring debian packaging stuff out. But -- quickly comes to rescue. So I wanted to do this little tutorial on how easy it is to create, package and distribute a HTML application for the desktop with Ubuntu.

Install additional quickly templates

Installing additional quickly templates is straight forward for anyone who has already used a ppa:

sudo add-apt-repository ppa:quickly-templates-hackers/quickly-community-templates-daily
sudo apt-get update
sudo apt-get install quickly quickly-ubuntu-html-app-template

This installs quickly with all it's dependencies and the HTML Application Template. Now you are ready to go!

Create the quickly HTML Application

This is fairly easy. Open up your favorite shell and do a

quickly create ubuntu-html-app appname

Which creates an folder with appname as name.
Now you can navigate into the appname folder and see the stuff the quickly template made for you:

├── appname.desktop.in
├── data
│   ├── app.css
│   ├── appname
│   ├── glib-2.0
│   │   └── schemas
│   │       ├── gschemas.compiled
│   │       └── net.launchpad.appname.gschema.xml
│   ├── __init__.py
│   ├── lib
│   │   ├── backend.js
│   │   ├── HTMLWindow.py
│   │   ├── __init__.py
│   │   ├── mediator.js
│   │   └── require.js
│   ├── main.html
│   ├── main.js
│   ├── media
│   │   ├── appname.svg
│   │   ├── background.png
│   │   └── bg_dotted.png
│   └── MyWindow.py
├── setup.py
└── src -> data

Of course, the biggest interest here is in main.html and main.js.

These files are automatically loaded into the app window. For our specific use case, we already have the HTML and JS ready for the ubuntu clock. Now I am putting this into the folder.

Send signals from and to the Webview

Because the goal was to make a frameless window, the close button needs to be designed and connected from the HTML as well. (One drawback as well is that the window without a frame is only movable with ALT mousedrag).

So going to the main.js we see libraries loaded via require. I have added jquery to the mix:

require(['lib/mediator', 'lib/backend', 'scripts/jquery-1.8.3.js'], function(mediator, backend, $) {

now we can use the $ shorthand functions inside main.js. The closebutton in the html get's the id "close" like this:

<span id="close">x</span>

And we connect the click event, and send a signal with mediator (one of the libs quickly added to main.js offers you):

$('#close').click(function() {
    mediator.publish('send_backend', 'quit', 'quit');

This gets send to the backend (the MyWindow.py) and we can handle it there:

def on_html_message(self, signal_name, data):
    print "signal received from frontend: %(signal)s, with this data: %(data)s" % {'signal': signal_name, 'data': data}

    if signal_name == 'frontend_loaded':
        version = 'Unknown OS'
        for line in open('/etc/lsb-release'):
            if 'DISTRIB_DESCRIPTION' in line:
                version = line.replace('DISTRIB_DESCRIPTION=', '')[1:-2]
        self.send_html_message('version_provided', {"version": "%s %s" % (data, version)})

    # This is the stuff we have added!
    elif signal_name == 'quit':

So now we have a working close button as well, awesome!

In this specific case we also wanted to get rid of things like the menubar at the top of the window, so I changed the __init__(self) in lib/MyWindow.py to not make the Menubar with the menu etc.

Package and release

The reason why quickly is so awesome is that it does the packaging for you! Packaging an app for debian/ubuntu is no piece of cake and really frustrating at times.

With quickly, it's easy: To package just say quickly package and release: quickly release to upload to your PPA.

To quickly release you might have to setup your launchpad account and GPG Keys. Here is a description how to do this: https://help.launchpad.net/YourAccount/ImportingYourPGPKey