Cocktail is a project supported by Silex Labs. It is a cross-platform library for the Haxe programming language.
- 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
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.
For more practical information like this, see the Getting started with Cocktail guide.
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
Here is the Getting started with Cocktail guide.
Articles and demos