Getting started with Cocktail

Community > Haxe Libraries > Cocktail, HTML/CSS rendering engine > Getting started with Cocktail

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.

For more theoretical information about Cocktail, see the official wiki page of the Cocktail library

Create a root container for an application

Get a reference to the root Flash stage or the HTML body by creating a BodyDOMElement, which represents our application stage, to which we will attach other DOMElements.

var rootDOMElement:BodyDOMElement = new BodyDOMElement();
var containerDOMElement:ContainerDOMElement =  new ContainerDOMElement();
rootDOMElement.addChild(containerDOMElement);

Text

Create a containerDOMElement, add a text to it displaying "hello world! how's the party?", and attach it to the root DOM element:

var containerDOMElement:ContainerDOMElement =  new ContainerDOMElement();
containerDOMElement.addText("hello world! how's the party?");
rootDOMElement.addChild(containerDOMElement);

Manipulation of the DOM

You can manipulate DOM elements, which represents assets, text or any native DOM elements like this:

domElement.x = 25;
domElement.rotation = 180;

Or you can use the styles (the HTML-like way of using Cocktail) and benefit the layouts:

containerDOMElement.style.left = PositionOffsetStyleValue.length(px(0));
containerDOMElement.style.width = DimensionStyleValue.percent(100);

This syntax let you use the CSS styles which are native in HTML, and this will run on all the supported targets. It is a way to produce cross platform liquid interfaces!

Just like the web app demo which looks good on any screen sizes.

Assets

Load an asset, a png image for example, and then place it at a given point on the stage

var imageDOMElement:ImageDOMElement;
imageDOMElement.load("assets/second_needle.png");
rootDOMElement.addChild(imageDOMElement);

Drawing API

The drawing API which is exposed by the GraphicDOMElement lets you copy parts of a bitmap from an ImageDOMElement like this:

var graphicDOMElement:GraphicDOMElement = new GraphicDOMElement();
rootDOMElement.addChild(graphicDOMElement);
graphicDOMElement.drawImage(imageDOMElement, {x:25, y:30}, {x:0,y:0,width:100,height:100});

And you can also draw in a GraphicDOMElement like this:

//this method clears the bitmap data of the cross-platform 
//graphic dom element
graphicDOMElement.clear();

//here we draw a rectangle with a monochrome fill 
//using the graphic dom element drawing API
var fill:FillStyleValue = monochrome( { color:0xe0e0ff, alpha:100 } );
var line:LineStyleValue = LineStyleValue.none;

graphicDOMElement.beginFill(fill, line);
graphicDOMElement.drawRect(0, 0, 640, 480);
graphicDOMElement.endFill();

Mouse and Keyboard

Look at the use of the classes of the cocktail.keyboard package, in the ski demo provided with Cocktail.

Loading data

Let's assume that you want to load config data from an XML file.

ResourceLoaderManager.loadString("./config.xml", successCallback, errorCallback);
private function successCallback(xmlString : String)
{
    var xml:Xml = Xml.parse(xmlString);
    initConfig(xml);
}

And you can also use ResourceLoaderManager.loadString to call php scripts, do long polling etc.

See the ResourceLoaderManager API

Links

Here is the Getting started with Cocktail guide.

Articles and demos

Developer resources

Other resources

Release notes

version #12308, modified 2012-01-31 18:38:59 by codam

One language, everywhere.