Cocktail, HTML/CSS rendering engine

Code before talk

The following code sample switches a picture when the user clicks it.

The interface is written in HTML and styled with CSS

[sourcecode language="html"]
<html>
<head>
<title>Getting Started with Cocktail</title>
<link href="style.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="Main.js"></script>
</head>
<body>
<h1>Hello Cocktail</h1>
<p>Cocktail is a HTML/CSS rendering engine.</p>
<div>
<img id="icon" alt="cocktail" src="assets/icone_cocktail_blanche_ombre.png" width="132" height="132"></img>
</div>
</body>
</html>
[/sourcecode]
[sourcecode language="css"]
body {
background-color:white;
}

h1 {
word-spacing:10px;
color:orange;
font-family:arial;
margin-top:0;
margin-bottom:0;
text-align:center;
}

p, div {
text-align:center;
}
[/sourcecode]

Then the HTML DOM is manipulated using Haxe.

[sourcecode language="javascript"]
// get the image node
var image:Image = cast Lib.document.getElementById("icon");

// create interactivity
image.onclick = function(e) {
// if image source is cocktail icon, change it to Haxe one
if (image.src.indexOf("assets/icone_cocktail_blanche_ombre.png") != -1)
image.src = "assets/icone_haxe_blanche_ombre.png";
// if image source is not cocktail icon, change it back to cocktail
else
image.src = "assets/icone_cocktail_blanche_ombre.png";
}
[/sourcecode]

The resulting applications are available below. Click on the images for interactivity.

JavaScript version

Flash version, using Cocktail

What is Cocktail ?

Cocktail parses and renders HTML and CSS, and implements the W3C DOM API to create native and web applications.
It is written as a library for the Haxe programming language.

Cocktail is an open-source project supported by Silex Labs released under the MIT licence.

If you want to start using Cocktail right away , see the Getting started with Cocktail tutorial.

Still not sure what we mean ?

Try the interactive demo !

Features

Cocktail’s goal is to implement as many of the W3C standards as can be, prioritised by popularity. Only standard APIs are and will be implemented.

What Cocktail has now :

  • support for most HTML4 tags (<img>, <div>, <p>, <input>…) and some HTML5 tags (<video>, <audio>)
  • support for most CSS 2.1 styles (display, position, font styles, text styles…) and some CSS3 styles (transitions)
  • Includes an HTML (for now XHTML) and CSS parser
  • Implements a good chunk of the DOM API (appendChild, getElementByID, getElementByClassName…)
  • Implements the DOM Event API (addEventListener, dispatchEvent…)
  • Cocktail can be built for NME and Flash/Air, providing access to most popular platforms (iOS, Android, Windows, MacOS, Linux…)
  • Cocktail can be used to build full application or embedded like a webview, in a NME or Flash/Air application. See the embedding tutorial.
  • Cocktail is compatible with Haxe JS/DOM API, meaning that your project can also be built to regular JavaScript, in which case, Cocktail is not included as the browser already include the same functionnalities.

Of course, like any open-source project, some of those features are incomplete or have known bugs. For a detailed list of what’s implemented, check this document.

Requirements

Getting the code

All the source code for cocktail is hosted on github. If you want to start hacking around the code, you can check those design document to help you get started.

Bug tracking

Bugs are tracked using the issue tracker of the github repo. If you’re not sure if you’re confronted to a bug, ask us on the forums.

Having questions ?

If you have any question about the project (installation, usage, roadmap…), feel free to ask us on the forums.

Why Cocktail ?

Haxe cleverly bridges the gap between platforms for algorithms and data manipulations. NME successfully implements a cross-platform graphics library for games. Cocktail builds on these 2 projects to implement an API for applications.

Unlike popular rendering engines (Webkit, Gecko…), Cocktail was not built to be included in a browser but instead to be included in apps. The embedding API is straight-forward, allowing Cocktail’s inclusion for the UI part of your application in a few lines of code.

Popular rendering engines are written in C++, a language foreign to most web-developers. Haxe, on the other hand has first targeted web platforms (JS, AS, PHP). It feels natural to implement a web engine in a language familiar to web-developers.

Who uses Cocktail ?

Cocktail is starting to see some commercial use, the most note-worthy was for the android version of an app for TF1 (french television channel).
You can download the app from the google store.

Here is the app, presented with a fancy video (the iOS version is showcased) :

Resources

Tutorials

Developer resources

Other resources

Articles

Add a comment

Warning!

This content
is outdated.

Discover Silex v2,
online website builder.

Upcoming Events

  1. Atelier Silex à Silicon Banlieue (#Hello World)

    September 29 @ 2:00 pm - 4:30 pm

Sign up for Silex Labs news by email

SilexLabs community Tweets