Getting started with Cocktail

Cocktail renders standard HTML/CSS and executes Haxe Javascript in native and web applications. It is cross-platform, embeddable and native.

Check Cocktail overview and links here : official Cocktail page

Introduction

In this tutorial, we will install Cocktail and use it to build a simple application that will be compiled to JavaScript, Flash and also with NME.

The complete tutorial sources are available here

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

JavaScript version

Flash version

Here are the steps we will follow:

  • installation
  • code
  • compilation
  • testing

Installation

First, install Haxe 3 if not already done.
Then install cocktail via the command line using haxelib.

haxelib install cocktail

Project folders

Create a folder that will contain the project anywhere you like, then add the following folders into it :

  • bin
  • build
  • src

Create also an « assets » folder in the « bin » folder.

Code

Creation of the HTML/CSS and the corresponding interactivity in HaxeJS .

Structure

First, create an « index.html » file, which will be used as a basis for the application.
Place this file in the « src » folder at the root of your project.

[sourcecode language= »html »]
<html>
<head>
<title>Getting Started with Cocktail</title>
</head>
<body>
<h1>Hello Cocktail</h1>
<p>Cocktail is a HTML/CSS rendering engine.</p>
</body>
</html>
[/sourcecode]

Styles

Then apply styles to the html. This can be done either using inline or external css, but also using haxeJS. In this tutorial external CSS is used. Create an « app.css » file which will contain all the styles used in the application. Place this file in the « bin » folder at the root of your project.

[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 link the css file to the index.html file by adding this line to the header :

[sourcecode language= »html »]
<link href="app.css" type="text/css" rel="stylesheet"></link>
[/sourcecode]

Your « index.html » file should now look like this :

[sourcecode language= »html »]
<html>
<head>
<title>Getting Started with Cocktail</title>
<link href="app.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<h1>Hello Cocktail</h1>
<p>Cocktail is a HTML/CSS rendering engine.</p>
</body>
</html>
[/sourcecode]

Adding a picture

Download this .png image (available here). Place this file in the « bin/assets » folder at the root of your project. Then, load this asset by adding it to the HTML.

[sourcecode language= »html »]
<div><img id="icon" src="assets/icone_cocktail_blanche_ombre.png" alt="cocktail" width="132" height="132" /></div>
[/sourcecode]

Your « index.html » file should now look like this :

[sourcecode language= »html »]
<html>
<head>
<title>Getting Started with Cocktail</title>
<link href="app.css" type="text/css" rel="stylesheet"></link>
</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]

Bootstrap Cocktail

Create a « Main.hx » file which will contain the main Haxe Javascript (HaxeJS) class code and place it in the « src » folder.
Bootstrap Cocktail for non-js targets using the following code:

[sourcecode language= »javascript »]
import js.Lib;
import js.Dom;

class Main
{
static function main()
{
#if !js
//init cocktail and load the "index.html" file in the bin folder
cocktail.api.Cocktail.boot();
#end

}
}
[/sourcecode]

Adding Interactivity

Download this other .png image (available here). Place this file in the « assets » folder.
Then update the « Main.hx » file with following code. Mouse events will be used with callback functions to add interactivity so that the image in the html is changed when clicking on it.

[sourcecode language= »javascript »]
import js.Lib;
import js.Dom;

class Main
{
static inline var ICON_COCKTAIL_PATH:String = "assets/icone_cocktail_blanche_ombre.png";
static inline var ICON_HAXE_PATH:String = "assets/icone_haxe_blanche_ombre.png";

static function main()
{
#if !js
//init cocktail and load the "index.html" file in the bin folder
cocktail.api.Cocktail.boot();
#end

//html and css loaded
Lib.window.onload = function(e) new Main();
}

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

// create interactivity
image.onmouseup = function(event:Event) {
// if image source is cocktail icon, change it to Haxe one
if (image.src.indexOf(ICON_COCKTAIL_PATH) != -1)
image.src = ICON_HAXE_PATH;
// if image source is not cocktail icon, change it back to cocktail
else
image.src = ICON_COCKTAIL_PATH;
}
}
}
[/sourcecode]

Compilation

Depending on the platform you are targeting, you need to use the corresponding compilation scripts.

JS

To compile the application to JS, create a « compile-js.hxml » file containing:

[sourcecode language= »bash »]
-main Main
-cp ../src
-js ../bin/Main.js
[/sourcecode]

Then in a terminal, execute following command:

[sourcecode language= »bash »]
haxe compile-js.hxml
[/sourcecode]

The corresponding binary file will be generated in the bin/ directory.

Flash

To compile the application to Flash, create a « compile-swf.hxml » file containing:

[sourcecode language= »bash »]
-main Main
-cp ../src
-swf ../bin/Main.swf
-swf-version 10.2

-lib cocktail
–remap js:cocktail
[/sourcecode]

Then in a terminal, execute following command:

[sourcecode language= »bash »]
haxe compile-swf.hxml
[/sourcecode]

The corresponding binary file will be generated in the bin/ directory.

NME

To compile the application to Flash, create a « compile-nme.nmmle » file containing:

[sourcecode language= »xml »]
<?xml version="1.0" encoding="utf-8"?>
<project>

<app main="Main" path="../bin" file="Main"/>
<meta title="Cocktail" package="org.silexlabs.cocktail" version="1.0.0" company="Silex Labs" />
<window width="350" height="350" fps="30" orientation="portrait" resizable="true" unless="target_flash" />

<set name="SWF_VERSION" value="10.2" />

<classpath name="../src" />

<haxelib name="nme" />
<haxelib name="cocktail" />

<assets path="../bin/assets" rename="assets"></assets>
<assets path="../bin/style.css" rename="style.css" ></assets>
<assets path="../bin/index.html" rename="index.html"></assets>

<ndll name="std" />
<ndll name="regexp" />
<ndll name="zlib" />
<ndll name="nme" haxelib="nme" />

<compilerflag name="–remap js:cocktail" />

</project>
[/sourcecode]

Then in a terminal, go to the build , execute following command:

[sourcecode language= »bash »]
nme test windows
[/sourcecode]

The corresponding binary file will be generated in the bin/ directory.

Testing

JS

To run the Javascript version, launch the bin/index.html version in a browser.

Flash

To be able to run your Flash code (Main.swf), you can either :
-launch it directly in Flash player
-launch it in a browser, by embedding it in a HTML page.

To embed it in an HTML page, add an « index-swf.html » file in the « bin » folder containing the following code :

[sourcecode language= »html »]
<html>
<head>
<title>Getting Started with Cocktail</title>
</head>
<body style="margin:0">
<div id="haxe:trace"></div>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="movie_name" align="middle">
<param name="movie" value="Main.swf"/>
<param name="scale" value="noscale" />
<!–[if !IE]>–>
<object type="application/x-shockwave-flash" data="Main.swf" width="100%" height="100%">
<param name="movie" value="Main.swf"/>
<param name="scale" value="noscale" />
<!–<![endif]–>
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/>
</a>
<!–[if !IE]>–>
</object>
<!–<![endif]–>
</object>
</body>
</html>
[/sourcecode]

Conclusion

In this tutorial, we’ve seen how to install and use Cocktail to build and application for JavaScript, Flash and also with NME.

If you want to go further you can also package this as a native application using the following libraries :

This article demonstrate how an application for multiple devices, including connected TV’s was built using Cocktail.

Comments

Laissez un commentaire

News letter

Evénements Silex Labs sur Paris et sa région: Inscrivez vous à la Newsletter mensuelle

Silex Labs community Tweets

Facebook page