Cocktail, HTML/CSS rendering engine

Community > Haxe Libraries > Cocktail, HTML/CSS rendering engine
You are viewing an old version of this entry, click here to see latest version.

Cocktail is a project supported by Silex Labs. It is a cross-platform library for the Haxe programming language.


d39887f505d3aa5caac6841e7990f5c5-bpfull.jpg

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 (iOS, Android, BlackBerry...)
  • desktop computers (Windows, Mac, Linux)
  • televisions (Google TV, Adobe Air for TV, HbbTV (european smart TV standard))
  • 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

Code before talking


Right away, a code sample: load and display an image as the background of the application

// create an image container and load an asset
var backGround:ImageDOMElement = new ImageDOMElement();
backGround.load("images/blackPixel.png");

// style is applied here even if the image is not loaded yet
backGround.style.position = PositionStyleValue.absolute;
backGround.style.display = DisplayStyleValue.block;

// 100% of height and width
backGround.style.top = PositionOffsetStyleValue.length(px(0));
backGround.style.left = PositionOffsetStyleValue.length(px(0));
backGround.style.width = DimensionStyleValue.percent(100);
backGround.style.height = DimensionStyleValue.percent(100);

Note: this is the "html way" of using cocktail, Flash developers may use backGround.x instead of backGround.style.left. But backGround.x does not accept a percentage value.

In HTML, this will render like this 

<img style="position: absolute; 
    top: 0px; left: 0px; 
    width: 100%; height: 100%;" 
    src="images/blackPixel.png"></img>

In ActionScript, this code generates 1 sprite, filled with a bitmap. Cocktail attaches the events needed to resize the sprite when its container resizes, as the width and height are in %.

In C++ the result will be rendered in a canvas using NME. The result looks pretty much the same, as you can see in the Cocktail web app demo.

In PHP you will end up with a string containing the same as the javascript generated HTML.

For more practical information like this, see the Getting started with Cocktail guide.

Scope: why do we need all this?

Cocktail helps the development of graphical user interfaces for multi-device/cross-platform applications. It bridges the gap between all the targets supported by Haxe, removing inconsistencies behind a common API. With Cocktail the same code base is used to deploy as a first step to HTML5/javaScript, Flash & PHP targets, which are the basis to deploy to all other targets as a second step (native applications on desktop, phones, tablets and more...).

Check Cocktail supported platforms for the detailed list.

The goals and the strategical orientation are

  • address the dilemas of cross-platform UIs and DOM manipulation
    • cross-platform liquid UIs
    • semantic when needed
    • clean and simple generated DOM (no useless containers)
    • access to native controls and UI elements

  • let the choice to develop with the Flash or HTML philosophy
    • html/css style: relative positioning, use of the flow, variable size in function of the container and simblings...
    • flash style: absolute positioning, pixel perfect, manipulate containers like sprites...
  • elegant way of dealing with cross target issues
    • handle the target capabilities
    • API to provide alternative formats

Getting started and links

Here is the Getting started with Cocktail guide.

Articles and demos

Developer resources

Other resources

Release notes

version #12354, modified 2012-02-13 11:29:26 by codam