← Back to team overview

unity-design team mailing list archive

making web applications look native


Hi all,

I have been doing a bit of tinkering with the webapps system, I want to get Ubuntu desktop integration into a bunch of open source business applications (things you install locally rather than hosted services) like OpenERP, vtiger, OwnCloud, Alfresco, Redmine, OSticket, elgg etc. etc. these wouldn't be done via the locally installed user scripts, but by putting the code into the upstream project, or having a module to install on the web server that provides it. I made a start on HUD integration for OpenERP and learned a few things.

1) You can't give the web app relative URLs. When you init the integration you need to pass a full absolute URL, you also need to set the homepage parameter using protocol and port or it will default to port 80, so your init function looks more like this:

window.Unity.init({name: "OpenERP",
iconUrl: window.location.protocol+'//'+window.location.host+"/sale/static/src/img/icon.png",

2) In Chromium the external object isn't ready early enough when running javascript in the page, you need to pause before doing window.Unity = external.getUnityObject(1);

3) The documentation doesn't work. This is bad. http://developer.ubuntu.com/api/ubuntu-12.04/javascript/index.html is lovely documentation, but flat out wrong. The examples don't work now, most trivial of which is the showNotification method, which now requires three parameters (third being the icon)so Unity.Notification.showNotification("Attention", "Lorem ipsum dolor sit amet"); is invalid and the examples on the page do not work any more. We have to not do this. When calling external.getUnityObject(1) we should be getting back a static API that never breaks (or at least always accepts function calls that were documented in that version) because we are passing in a version number - this is what it is for. If we are going to break the API like this then it becomes really hard for upstream projects to integrate with the desktop. The desktop notification API also broke in an undocumented way, which is why things like gm-notify don't work any more.

4) Generating the callback for the HUD integration involves some dark magic that hides in utils.js in the installed webapps, it writes a literal javascript function into the DOM and then using eval to create it in the page context as a function that can be called back. This works great, but wow.

5) I want to make the web application look cosmetically like it is a part of the Ubuntu desktop. We don't really have a style guide or reference application, but one thing I did think of doing was changing some of the colours to harmonise with the chameleon colour of the launcher. It would be great to expose on the Unity javascript object the hex colour of the launcher - so in javascript I could do something like $('body').css('background-color',window.Unity.chameleoncolor)


I work at http://libertus.co.uk

Follow ups