Update on the Ubuntu HTML5 SDK UI

As you may know HTML5 apps are first class citizens on Ubuntu, to acheive that the Ubuntu plateform provides a set of APIs and UI elements like the QML SDK, in this post i'll provide some updates on the HTML5 UI elements.

Ubuntu Shape

The actual implementation is using an image as background with the pseudo class :after which is very limited the design team have suggested that we used a simple CSS border-radius for now, a proposal made by Stuart Langridge.

Swipe To delete

Last week-end i had to seat and work on this missing feature, it's still a work in progress since i need to finished the design of the API and how it should be declared.

i18n

The first proposal was based on JSON files, but we thought that this will need a lot of work to be consistent with Launchpad translation infrastructure.

The HTML translation is done by using :

• data-i18n-translate : this is used to collect all the strings that needs be translated used by JavaScript and used for pot generation

<h1 data-i18n-translate>Good Morning</h1>

• data-i18n-args : JSON data used to replace variables in the string, it only supports one level so far

<h1 data-i18n-translate data-i18n-args='{ "user": "daker" }'>Good Morning </h1>

• data-i18n-plural : This is the plural string, here Kyle suggested that we hardcode the "n" counter used to determine if the string will be plural or not to "num", so the dev have to passe the "num" in the data-i18n-args instead of a proper data-i18n-n.

<h1 data-i18n-translate data-i18n-plural="I have   cars" data-i18n-args='{ "num": "1", "brand": "Mercedes" }'>I have a  car</h1>

For the JS API, we will provide tree functions i18n.tr and i18n.dtr like in QML and a function to do string replacement i18n.strargs :

• tr(text);
• tr(singular, plural, int n);
• dtr(domain, text);
• dtr(domain, singular, plural, n);

i18n.tr('Good Morning');
i18n.strargs(i18n.tr('Good Morning '), '{ "user": "daker" }'));
i18n.strargs(i18n.tr('I have a  car', 'I have   cars', '1'), '{ "num": "1", "brand": "Mercedes" }'));

Grid Layout

I have tried to use the flexbox technique to provide a simple implementation of a grid layout by using data attributes :

• data-role="row" : To define a row
• data-role="column" : To define a column
• data-align="top, bottom, center" : To define the vertical alignment
• data-role="column" + data-offset="[10, 20, 25, 33, 34, 50, 66, 67, 75, 80, 90]" : To define the offset of the column
• data-role="column" + data-size="[10, 20, 25, 33, 34, 50, 66, 67, 75, 80, 90]" : To define the size of the column

If you want to helps us by contributing, by fixing bugs or share your opinions ping me "daker" or "alex-abreu" on #ubuntu-webapps channel on freenode.