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 cross-platform, embeddable and truly native.
It renders HTML5, CSS3 and Haxe Javascript in native applications and web apps.

Cross-platform
Same rendering on all the targets, desktop, browser and mobile. Cocktail compiles to javascript/HTML5, ActionScript Flash, neko and php versions.

Embeddable
Cocktail classes are made to be compiled with your application in order to render its user interface.
Cocktail is compatible with NME, Adobe AIR or PhoneGap.

Truly native
Cocktail do not require any virtual machine, it is not interpreted.
This has a positive impact on the performances and allows access to native functionnalities and ibraries in native language such as objective C, C++, php, ActionScript…

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

Details
Cocktail focuses on UIs and has the goal to bridge the gap between all the targets supported by Haxe. It offers a nice workflow: compile a standard HTML page together with your logic in Haxe/javascript. This will produce a javascript/HTML/CSS application, with a Flash fallback. Then you can publish your application online and package as a native application using NME, Adobe AIR or PhoneGap.

Note1: for now, in your HTML pages, Cocktail does not support external style sheets, only inline styles
Note2: we plan to be able to output native apps directly with Haxe compiler, in c++, java, .net


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

// create an image tag and load a picture
var image = js.Lib.document.createElement("img");
image .src = "picture.png";

// apply style to position it on the page
image .style.position = "absolute";
image .style.display = "block";

// center the image
backGround.style.top = "50%";
backGround.style.left = "50%";

// display the image
js.Lib.document.body.appendChild(image);

The same result can be obtained using HTML :

<img style="position: absolute; 
    top: 50%; left: 50%;
    display:block;" 
    src="picture.png"></img>

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

  • 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 #15313, modified 2012-08-10 18:25:55 by codam