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.

Code before talking


Right away, a code sample: load and display an image 
<html>
    <head>
        <title>Code before talking</title>
    </head>
    <body>
        <div style="text-align:center;">
            <img id="icon" alt="cocktail" width="132" height="132"
                src="assets/icone_cocktail_blanche_ombre.png">
            </img>
        </div>
    </body>
</html>

Then apply styles to the image

// get the image node
var image:Image = cast Lib.document.getElementById("icon");

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

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

Using Coktail, this code can be compiled to JavaScript, Flash, PHP, and native apps.

For more practical informations (compilation and more) , see the Getting started with Cocktail guide.

What is Cocktail ?

Cocktail is cross-platform, embeddable and 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.

Native
Cocktail does not require any virtual machine, it is not interpreted.
This has a positive impact on the performance and allows access to native functionalities and libraries 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.


cocktail_icon.png

Details

Cocktail focuses on UIs and aims to bridge the gap between all 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.

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

Note1: we plan to be able to output native apps directly with Haxe compiler, in c++, java, .net

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 dilemmas 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

Tutorials

Developer resources

Other resources

Release notes

Articles and demos

version #15433, modified 2012-09-04 16:22:56 by codam