Ubuntu HTML5

Anatomy of an Ubuntu HTML5 app

An Ubuntu HTML5 app does not differ much in terms of its structure when compared to a traditional HTML site. This means developers will feel at home developing apps for Ubuntu using their familiar tools and workflows.

The main differences lie in the runtime and the presentation layer, both of which are handled in a way that is nearly transparent and does not get in the way for app authors.

The runtime and rendering

HTML5 apps in Ubuntu run in a native app wrapper instead of in a browser. This wrapper essentially contains a QML WebView component based on the Webkit engine that loads the main HTML file and takes care of the rendering.

To provide a simple example to illustrate how it works, here’s the code that loads the HTML file for a basic HTML5 application:

1

2

3

4

5

WebView {

    id: webView

    anchors.fill: parent

    url:"html/index.html"

}

The WebView is contained within the same Ubuntu SDK MainView component that native apps use, which can take care of features such as orientation.

The content, logic and presentation

At this point, we can follow the standard design philosophy for separation of content and logic, applied to the web technologies.

• Content: you can use semantic HTML to provide your conttent, with minimal markup to add Ubuntu theming support
• Logic: use standard JavaScript files loaded from the HTML files
• Presentation: for basic Ubuntu applications just minimal CSS is required, as the HTML theme takes care of the presentation. If your application has more theming or customization demands, you can use more CSS imported in the same way from HTML as in the web.

The Ubuntu HTML theme

While cross-platform development is a significant advantage of HTML5 apps, users expect the software to look and behave in a way that is consistent with each platform’s UX guidelines. And here’s where the Ubuntu HTML theme brings differentiation with minimal effort.

The Ubuntu HTML theme reproduces the look and feel and behaviour of the native Ubuntu SDK widgets with web technologies. In practical terms, this means a CSS3 theme customized for Ubuntu and an Ubuntu UI JavaScript framework to implement the logic. With them, the familiar widgets from the SDK can be reused in HTML5 app, providing a native look and feel without any extra effort.

An important part of using the Ubuntu HTML theme are the data-role attributes in the HTML code. They are used to effectively define the Ubuntu SDK widgets that we want to use in our UI. They will act as selectors for the Ubuntu HTML theme to provide the right style and the behaviour to each widget.

Note that the names for data-role try to match the names of existing widgets in the SDK: page, pagestack, dialog, etc. While already usable for writing apps, the Ubuntu HTML theme is still under development, so some of these still need to be defined as classes but might change in the future.

Get started with the Ubuntu SDK

Follow these easy steps to install the Ubuntu SDK:

1. Open a terminal by pressing the Ctrl+Alt+T key combination
2. Enter the following command, pressing Enter at the end of the line and following the prompts

For Ubuntu 12.04 LTS, Ubuntu 12.10 and Ubuntu 13.04 users:

sudo add-apt-repository ppa:ubuntu-sdk-team/ppa && sudo apt-get update && sudo apt-get install ubuntu-sdk

Alternatively, for those using a development release:

sudo apt-get install ubuntu-sdk

Congrats! Now you’re all set to start writing a phone app.

Design something beautiful

To enable you to design and build beatiful and usable apps for Ubuntu on the phone, we’ve also prepared a set of clear guides with everything you need to know about UX and visual design best practices.

The App Design Guides are a resource that keeps growing with new guides to make your apps stand out, so stay tuned for new content!

Show me the App Design Guides ›