Latest Changes
Differences between version #15342 and #15425
14c14
< The complete project sources are available [[https://github.com/silexlabs/Cocktail/tree/master/samples|here]]
---
> The complete project sources are available [[https://github.com/silexlabs/Cocktail/tree/master/samples/GettingStarted|here]]
17,18c17,18
< -[[http://demos.silexlabs.org/cocktail/GettingStarted/js/|JavaScript version]]
< -[[http://demos.silexlabs.org/cocktail/GettingStarted/swf/|Flash version]]
---
> -[[http://demos.silexlabs.org/cocktail/samples/GettingStarted/js/|JavaScript version]]
> -[[http://demos.silexlabs.org/cocktail/samples/GettingStarted/swf/|Flash version]]
22,25c22,25
< To generate a cocktail project, these steps needs to be followed:
< -coding
< -compiling
< -packaging (optional)
---
> To create a cocktail application, there are several steps to follow:
> -code
> -compile
> -package (optional)
29a30,31
> Creation of the Html/CSS and the corresponding interativity in HaxeJS .
>
31c33
< First, create a container and attach it to the application's stage.
---
> First, create an "index.html" file, which will be used as a basis for the application.
33,40c35,41
< // create a container to gather all of our visual elements
< var container = Lib.document.createElement("div");
<
< // create a reference to the body
< var body = Lib.document.body;
<
< //attach the container to the body
< body.appendChild(container);
---
> <html>
> <head>
> <title>Getting Started with Cocktail</title>
> </head>
> <body>
> </body>
> </html>
44,52c45
< Then create a text node and attach it to the container.
< <code haxe>
< // create a text node and attach it to the container
< var text = Lib.document.createTextNode("Welcome to");
< container.appendChild(text);
< </code>
<
< ===== DOM's manipulation =====
< You can manipulate DOM elements, which represents assets, text or any native DOM elements as follows:
---
> Then add some text in the html body (here a heading and a paragraph).
54,55c47,48
< htmlNode.x = 25;
< htmlNode.rotation = 180;
---
> <h1>Hello Cocktail</h1>
> <p>Cocktail is a HTML rendering engine.</p>
58c51,52
< In this example we will use CSS styles (the HTML-like way of using Cocktail) and benefit of the layouts as follows:
---
> ===== Styles =====
> We will then use CSS styles as follows:
60,63c54,56
< // apply styles to the container
< container.style.marginLeft = container.style.marginRight = "auto";
< container.style.width = "150px";
< container.style.textAlign = "center";
---
> // 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>
66,69c59,60
< This syntax let you use the CSS styles which are native in HTML, and which will run on all supported targets.
< This is a really easy way to produce cross platform liquid interfaces.
<
< Just like [[/com/libs/cocktail/cocktail_web_app_demo|the web app demo]] which looks good on any screen sizes.
---
> 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 [[/com/libs/cocktail/cocktail_web_app_demo|the web app demo]] design which adapts on any screen sizes.
72c63,65
< Then, load an asset -a png image for example- and add it to the stage.
---
> Add an image (available [[http://demos.silexlabs.org/cocktail/samples/GettingStarted/js/assets/icone_cocktail_blanche_ombre.png|here]]) in "assets" directory.
>
> Then, load an asset -a png image for example-.
74,77c67,69
< // create an image and attach it to the container
< var image:Image = cast(Lib.document.createElement("img"));
< image.src = "../assets/icone_cocktail_blanche_ombre.png";
< container.appendChild(image);
---
> <div style="text-align:center;">
> <img id="icon" alt="cocktail" src="assets/icone_cocktail_blanche_ombre.png" width="132" height="132"></img>
> </div>
81,87c73,74
< ===== Interactivity (Mouse and Keyboard) =====
< To create interactivity, we will use Haxe Javascript mouse and keyboard events, and add the corresponding behaviour using callback functions.
< <code haxe>
< // create interactivity
< image.onmousedown = onMouseDown;
< image.onmouseup = onMouseUp;
< </code>
---
> ===== Interactivity (Mouse) =====
> Add another image (available [[http://demos.silexlabs.org/cocktail/samples/GettingStarted/js/assets/icone_haxe_blanche_ombre.png|here]]) in "assets" directory.
88a76,78
> 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.
89a80,84
> import js.Lib;
> import js.Dom;
>
> class Main
> {
90a86,99
> * Constructor
> */
> public function new()
> {
>
> // get the image node
> var image:Image = cast Lib.document.getElementById("icon");
>
> // create interactivity
> image.onmousedown = onMouseDown;
> image.onmouseup = onMouseUp;
> }
>
> /**
97c106
< image.src = "../assets/icone_haxe_blanche_ombre.png";
---
> image.src = "assets/icone_haxe_blanche_ombre.png";
99,101c108
< </code>
<
< <code haxe>
---
>
103c110
< * Mouse Up callback.
---
> * Mouse Up callback. Resets the image to be displayed and loads the dynamic data.
109c116
< image.src = "../assets/icone_cocktail_blanche_ombre.png";
---
> image.src = "assets/icone_cocktail_blanche_ombre.png";
111,124c118,119
< </code>
<
<
<
< ===== Loading data =====
< Finally, to load external data we will use a Http request
< <code haxe>
< // calls the http request
< var request:Http = new Http("../assets/feed.txt");
< // sets the callbacks
< request.onData = onData;
< request.onError = onError;
< // closes the http request
< request.request(false);
---
>
> }
127d121
< And you can also use a Html object node to load external data or logic.
129,130d122
<
<
135c127
< To compile the application to JS (directly via HaxeJS, no Cocktail usage):
---
> To compile the application to JS, create a "compile-js.hxml" file containing:
138,139c130,131
< -main Main
< -js js/Main.js
---
> #sources
> -main Cocktail
140a133,140
> -cp src
>
> #binary
> -js bin/js/Main.js
> --macro Cocktail.create('index.html','Main')
>
> #copy assets directory
> -cmd cp -R assets bin\js\
144c144,145
< To compile the application to Flash (using Cocktail):
---
> To compile the application to Flash, create a "compile-swf.hxml" file containing:
>
146,147c147,148
< -main Main
< -swf swf/Main.swf
---
> #sources
> -main Cocktail
149c150,153
< -swf-header 500:500:60:ffffff
---
> -cp src
>
> #binary
> -swf bin/swf/Main.swf
151a156,159
> --macro Cocktail.create('index.html','Main')
>
> #copy assets directory
> -cmd cp -R assets bin\swf\
155c163,168
< To compile the application to Native Apps (using Cocktail & NME):
---
> In this example we will focus on native application creation via NME.
>
> First, install [[http://www.haxenme.org/|NME]].
>
> Then create a "compile-nme.nmml" file:
>
157,164c170,194
< -main Main
< -cpp nme
< -D nme
< -cp ../../src/
< -lib nme
< -debug
< --remap flash:nme
< --remap js:cocktail
---
> <?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>
166a197
> And compile it (to windows in this example) using following command in the shell:
167a199,202
> <code>
> nme test compile-nme.nmml windows -debug
> </code>
>
171c206
< To be able to run your JavaScript code in a browser, you need to embed it in a HTML page.
---
> 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 .
186c221
< To be able to run your Flash code, you can either :
---
> To be able to run your Flash code (Main.swf), you can either :
| Ver | Date | Entry | Lg | User | Action |
|---|---|---|---|---|---|
| #19360 | 2013-05-13 17:42:34 | doc/libraries | en | Confidant | View | Diff |
| #19359 | 2013-05-13 05:01:15 | manual/macros/advanced | en | jason | View | Diff |
| #19358 | 2013-05-12 02:55:03 | com/ide | en | MarcWeber | View | Diff |
| #19357 | 2013-05-11 05:26:13 | ref/conditionals | jp | shohei909 | View | Diff |
| #19356 | 2013-05-10 09:29:15 | manual/completion | en | jason | View | Diff |
| #19355 | 2013-05-09 00:24:39 | download/manual_install/leopard | en | JLM | View | Diff |
| #19354 | 2013-05-09 00:10:46 | download/manual_install/leopard/justinsbuildnotes | en | JLM | View | Diff |
| #19353 | 2013-05-08 18:42:04 | com/news | en | ncannasse | View | Diff |
| #19352 | 2013-05-08 18:12:08 | manual/haxe3 | en | ncannasse | View | Diff |
| #19351 | 2013-05-08 18:09:11 | manual/haxe3 | en | Simn | View | Diff |
| #19350 | 2013-05-08 18:04:19 | manual/haxe3 | en | ncannasse | View | Diff |
| #19349 | 2013-05-08 15:57:29 | doc/haxelib/haxelib2 | en | jason | View | Diff |
| #19348 | 2013-05-08 15:57:29 | doc/haxelib/haxelib2 | en | jason | Changed title from Haxelib 2 to Haxelib 3 |
| #19347 | 2013-05-08 15:21:08 | manual/haxe3/features | jp | shohei909 | View | Diff |
| #19346 | 2013-05-08 15:15:14 | manual/haxe3/features | en | shohei909 | View | Diff |
| #19345 | 2013-05-08 11:51:53 | doc/haxelib/haxelib2 | en | back2dos | View | Diff |
| #19344 | 2013-05-08 11:28:55 | api/flash/display/graphics | kr | api | View | Diff |
| #19343 | 2013-05-08 11:28:36 | api/flash | kr | api | View | Diff |
| #19342 | 2013-05-08 11:28:03 | api | kr | api | View | Diff |
| #19341 | 2013-05-08 11:27:08 | api | ro | api | View | Diff |
Previous | Next
