Building cross-platform applications with Cocktail

A proof of concept

Cocktail is the ideal Haxe library to include UIs in your cross platform applications. Without conditional compilation, Cocktail API can be compiled and packaged for

  • mobiles and tablets
  • desktop computers
  • televisions (Google TV, Adobe Air for TV, HbbTV (using DTT, equivalent to french TNT))
  • all major browsers, in HTML5 with a Flash fallback
  • PHP, in order to be able to generate and manipulate the client « view » on the server side

Here is a little application which we have deployed and tested on each of these targets. For now, some functionalities are still missing, e.g. keyboard & accessibility which make it impossible to navigate inside the application on connected TVs.

This small app shows icons on start page, which let the user open the inner sections of the app, navigate in pages using lists of items. It makes an extensive use of liquid layouts which are rendered as native CSS styles in HTML, but are emulated in Flash which is close to what you can do with the Flex framework.
It is a very simple example which will show show you how easy it is to build cross platform applications with Haxe and Cocktail.

Feel free to download the source code of the application on github (which uses the previous Cocktail API which is now deprecated) or the compiled application – one app for each target. The code to generate the home page is quite simple, it is explained as a sample code at the end of the article.

Phones & tablets native apps (iOS, Android…)

The mobile version of the app is just the first step to real native apps. For this first tests we have used both JavaScript version with Phonegap and also the Flash version with AIR to package the application for Android, iOS and more. It is really interesting to see how the application resizes and how fast it reacts responsively. In the future we plan to compile Cocktail app directly in C language and package it without PhoneGap or AIR, which can have low performance, can be heavy and are not supported by all phones.

Web sites in HTML5 with a Flash fallback

Here is the online version of the application. If your browser supports HTML5, you will see the HTML version, and the Flash version otherwise. We considere that either HTML5 or Flash is a reasonable requirement nowadays for a web application to reach the vast majority of the users.

Also a pure HTML version without javascript should be served in order to be well indexed by search engines. This will be possible when Cocktail also compiles to PHP, which will be the case before we release a beta version. Take a look at the HTML version of the web app demo here, and look at the generated HTML code. It is clean and meaningful, like this:

[sourcecode language= »html »]
<html>
<head>
<title>Haxe JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
</head>
<body style="display: inline; min-height: 130%; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; ">

<div id="haxe:trace">
</div>
<script type="text/javascript" src="WebApp.js">
</script>
<div style="display: block; min-height: 130%; z-index: 0; ">
<img style="min-height: 130%; position: absolute; display: block; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; z-index: 0; "
src="images/blackPixel.png"></img>
<div style="display: block; z-index: 0; ">
<img src="images/blackPixel.png">
<ul>
<li>
<img src="images/calendrier_blanc.png">
<div>Cal</div>
</li>
….
<li>
<img src="images/NavButtonCreditsHD.png">
<div>Credits</div>
</li>
</ul>
</div>
</div>

</body>
</html>
[/sourcecode]

And here is the Flash version(to be served at those who do not have HTML5 (50% of the browsers).

TV applications

Thanks to Intermedia Paris company, we have the chance to test and deploy on a multitude of TVs, with different hardware and software. The most exciting experience has been made with France Televisions (first French TV group), on TV sets which are not connected to the internet, but through the waves of the TNT. These TV sets implement a common open standard, HbbTV, which we also target with Cocktail. It is based on HTML, so it is not a real separate target in itself, but we have to take the remote control and the broadcast video into account.

As for HBBTV target, the GoogleTV is not really a separate target, since a native app for iOS and Android simply has to take the input controller into account to be compatible. Here are the links to test it on your TV, knowing that the focus and keyboard navigation is not yet implemented, as it is explained in Cocktail v1.0.0alpha2 release notes.

Desktop applications or widget

This target also runs with AIR for now and we plan to compile with NME and Haxe cpp target in a near future. This will also make it possible to integrate Haxe/Cocktail bits, initially developed for the web app version, into a native C++ desktop app. Download Cocktail web app demo for the desktop (packaged using Adobe Air)

Take a look at the code

The code to generate the home page is quite simple – you can recognize Haxe JS API (*appendChild » *.style.*). Also you should compare the DOM elements we create and the structure of the HTML generated in the HTML version – see the section « Web sites in HTML5 with a Flash fallback » of this article.

[sourcecode language= »php »]
// **
// **
// create a list of icons

// create the data
var pageData = [
{text:"Cal", imagePath:"images/calendrier_blanc.png" },
{text:"Music", imagePath:"images/icone_music_blanc.png" },

];

// create a main container for the cells
var content:HtmlDOM = Lib.document.createElement("div");
content.style.display = block;

// create list’s cells
var cellData:Dynamic;
for (cellData in pageData)
{
// create cell with text and image
// empty cell part
var cell:HtmlDOM = Lib.document.createElement("li");

// image part
if (cellData.imagePath != "" && cellData.imagePath != null)
{
var cellImage:Image = cast(Lib.document.createElement("img"));
// set image source
cellImage.src = cellData.imagePath;
// add image
cell.appendChild(cellImage);
}

// add text
var cellTextContainer:HtmlDOM = Lib.document.createElement("div");
if (cellData.text != "" && cellData.text != null)
{
var textElement:Lib.document.createTextNode(cellData.text);
cellTextContainer.appendChild(textElement);
cell.appendChild(cellTextContainer);
}

// add cell to instance
content.appendChild(cell);

}

//**
// the main screen

// build the main container for all of our elements
var page:HtmlDOM = Lib.document.createElement("div");

// style
page.style.width = "100%";
page.style.height = "100%";
page.style.backgroundColor = "black";

// attach the content to the page container
page.appendChild(content);

// attach the page container to the body
var body:HtmlDOM = Lib.document.body;
body.appendChild(page);
[/sourcecode]

Laissez un commentaire

News letter

Evénements Silex Labs sur Paris et sa région: Inscrivez vous à la Newsletter mensuelle

Silex Labs community Tweets

Facebook page