Getting started with Cocktail
You are viewing an old version of this entry, click here to see latest version.
Cocktail, HTML rendering engine
Cocktail is cross-platform, embeddable and native. It renders HTML5, CSS3 and Haxe Javascript in native applications and web apps.
Check Cocktail overview and links here : official wiki page of the Cocktail library
Cocktail is a project supported by Silex Labs.
The complete project sources are available here
The resulting applications are available here :
-JavaScript version
-Flash version
Introduction
To create a cocktail application, there are several steps to follow:
-code
-compile
-package (optional)
Code
Creation of the Html/CSS and the corresponding interativity in HaxeJS .
Container
First, create an "index.html" file, which will be used as a basis for the application.
<html>
<head>
<title>Getting Started with Cocktail</title>
</head>
<body>
</body>
</html>
Text
Then add some text in the html body (here a heading and a paragraph).
<h1>Hello Cocktail</h1>
<p>Cocktail is a HTML rendering engine.</p>
Styles
We will then use CSS styles as follows:
// apply styles to the texts <h1 style="word-spacing:10px; color:orange; font-family:arial; margin-top:0px; margin-bottom:0px; text-align:center;">Hello Cocktail</h1> <p style="text-align:center;">Cocktail is a HTML rendering engine.</p>
This syntax let you use the CSS styles which are native in HTML, and which will run on all Cocktail supported targets.
This is an easy way to produce cross platform liquid interfaces, like the web app demo design which adapts on any screen sizes.
Assets (images, videos)
Add an image (available here) in "assets" directory.
Then, load an asset -a png image for example-.
<div style="text-align:center;"> <img id="icon" alt="cocktail" src="assets/icone_cocktail_blanche_ombre.png" width="132" height="132"></img> </div>
Interactivity (Mouse)
Add another image (available here) in "assets" directory.
Then create a "Main.hx" file which will contain the main Haxe Javascript (HaxeJS) class code.
Mouse events will be used with callback functions to add interactivity.
import js.Lib; import js.Dom; class Main { /** * Constructor */ public function new() { // get the image node var image:Image = cast Lib.document.getElementById("icon"); // create interactivity image.onmousedown = onMouseDown; image.onmouseup = onMouseUp; } /** * Mouse Down callback. Changes the image to be displayed. * @param event */ public static function onMouseDown(event:Event):Void { var image:Image = cast(event.target); image.src = "assets/icone_haxe_blanche_ombre.png"; } /** * Mouse Up callback. Resets the image to be displayed and loads the dynamic data. * @param event */ public static function onMouseUp(event:Event):Void { var image:Image = cast(event.target); image.src = "assets/icone_cocktail_blanche_ombre.png"; } }
Compilation
Depending on the platform you are targetting, you need to use the corresponding compilation scripts.
JS
To compile the application to JS, create a "compile-js.hxml" file containing:
#sources
-main Cocktail
-cp ../../src/
-cp src
#binary
-js bin/js/Main.js
--macro Cocktail.create('index.html','Main')
#copy assets directory
-cmd cp -R assets bin\js\
Flash
To compile the application to Flash, create a "compile-swf.hxml" file containing:
#sources
-main Cocktail
-cp ../../src/
-cp src
#binary
-swf bin/swf/Main.swf
-swf-version 10.2
--remap js:cocktail
--macro Cocktail.create('index.html','Main')
#copy assets directory
-cmd cp -R assets bin\swf\
Native Apps
In this example we will focus on native application creation via NME.
First, install NME.
Then create a "compile-nme.nmml" file:
<?xml version="1.0" encoding="utf-8"?>
<project>
<app title="Cocktail" main="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="BUILD_DIR" value="bin" />
<set name="SWF_VERSION" value="10.2" />
<classpath name="../../src" />
<classpath name="src" />
<haxelib name="nme" />
<template path="assets" rename="bin/assets" ></template>
<ndll name="std" />
<ndll name="regexp" />
<ndll name="zlib" />
<ndll name="nme" haxelib="nme" />
<compilerflag name="--remap js:cocktail" />
<compilerflag name="--macro Cocktail.create('index.html','Main')" />
</project>
And compile it (to windows in this example) using following command in the shell:
nme test compile-nme.nmml windows -debug
Packaging
JS
To be able to run the generated JavaScript code (Main.js) in a browser, you need to create an index.html file to embed it .
<html> <head> <title>MyApp</title> </head> <body> <div id="haxe:trace"></div> <script type="text/javascript" src="Main.js"></script> </body> </html>
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.
<html> <head> <title>MyApp</title> </head> <body> <div id="haxe:trace"></div> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="800" 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>
Native Apps
Depending on the native target and the compiler you are using, packaging can be really different:
-NME
-Adobe AIR
-PhoneGap.
version #15425, modified 2012-09-03 19:27:15 by codam
