← 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",
            onInit:unityReady,
homepage:window.location.protocol+'//'+window.location.host});

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)


Alan.

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



Follow ups