Embedding Cocktail in a flash or NME app

If you haven’t already, you should check the getting started tutorial to help you setup cocktail.

Introduction

There are 2 ways to use cocktail :

  • You can use it to build a full cocktail application, you can refer to the getting started tutorial for this.
  • Tou can embed cocktail inside your application.

This tutorial will cover the latter. Let’s say you’ve built an app or a game using flash and/or NME and now you’d like to add some type of UI or a form to it. You can use the flash API as is, or if you prefer an HTML/CSS workflow, you can embed a cocktail view inside your application. You control when and where this cocktail view appears.

If you’ve already built a native mobile application for iOS or Android, you’ll find the cocktail view similar to a webview component. Furthermore, with cocktail you have the added benefit of full access to the DOM of the document you embed, meaning you can easily communicate between the parts of your app written with the flash API and the DOM API.

Let’s get going !

Overview

The project we are building will display a flash text field and will load a cocktail view below this text field. The cocktail view will contain a form with a text area which, when submitted will take the content of the text area and set it as the content of the flash text field.

This will show you :

  • How to setup and position a cocktail view, and to make it load an html file.
  • How to communicate between the cocktail view and the flash part of your application.
Here is the result of this tutorial :

Getting the source code

The full source code for the project is here.
To get started, download the startup source code here. It contains the basic structure and some asset for the project.

Project folders

The projects contains the following folders :

  • bin
  • build
  • src

HTML and CSS

We will use the following HTML and CSS for the cocktail view :

HTML content for head tag

<link type="text/css" href="sober/style.css" rel="stylesheet"></link>
<link type="text/css" href="style.css" rel="stylesheet"></link>

HTML content for body tag

<form id="frm">
<div>
<h4>When submitting, it will copy the content into the flash text field</h4>
 <textarea id="ta" name="comment">Copy me</textarea></div>
<div><input type="submit" /></div>
</form>

CSS styles

[sourcecode language= »css »]
body {
margin:0;
}
form {
width:200px;
border:black solid thin;
padding:20px;
margin:0;
}

textarea {
width:100%;
}
[/sourcecode]

Add a index.html file and a style.css file in the bin folder and fill them with there respective code.

We can see the HTML contains a form with a text area and a submit button. It also loads the css.

As for CSS, it just touches up some styles for the form.

You can see that a sober/style.css is also loaded. It it already provided in the project source, you can check it out. This is a CSS theme styling form element in cocktail. This is the way to skin form element such as button and checkbox in cocktail, they have no hard-coded skin.

Code

Open the Main.hx file in the src folder in an editor.

Setup

Add the following code after the main function :

[sourcecode language= »javascript »]
var tf:TextField;

var cv:CocktailView;

public function new()
{
initFlash();
initCocktail();
}
[/sourcecode]

This code contains the constructor which will init the flash and the cocktail parts of the project. It also adds 2 classes attribute to hold references to the flash text field and to the cocktail view we will create. Don’t forget to import the TextField and CocktailView classes :

[sourcecode language= »javascript »]
import cocktail.api.CocktailView;
import flash.text.TextField;
[/sourcecode]

TextField

The following methods create the flash text field and attaches it to the stage

[sourcecode language= »javascript »]
function initFlash()
{
tf = new TextField();
tf.width = 200;
tf.height = 100;
tf.text = "this is a flash text field,\n the content of the text area\n will be copied here";

flash.Lib.current.addChild(tf);
}
[/sourcecode]

Cocktail view

Here is the fun part ! The following method set up the cocktail view and will make it load the index.html file we created previously at runtime.

[sourcecode language= »javascript »]
function initCocktail()
{
cv = new CocktailView();

//position and size the view relative to the stage
cv.viewport = { x:0, y:100, width:400, height:400 };

//load html document
cv.loadURL("index.html");

//when document ready
cv.window.onload = function(e) {

//attach cocktail view to the stage
flash.Lib.current.addChild(cv.root);
}
}
[/sourcecode]

A few things to note :

  • the viewport can be set any number of time, allowing for instance to animate the cocktail view
  • instead of loadURL, you can use the loadHTML method to directly provide an HTML string instead of loading one through http. Check the CocktailView class for more info.
  • The cocktail view is not by default attached to the stage, it’s up to you to attach when you need using the root attribute. The root attribute is the Sprite at the top of the cocktail view display list hierarchy. You can use it to hide the cocktail view or set its alpha for instance.
  • The cocktail view provides access to the window object of the created html document. It also exposes the document object as we’ll see later.

Adding form interactivity

Now we will add the code filling the flash text field with the content of the text area. Update the initCocktail method :

[sourcecode language= »javascript »]
function initCocktail()
{
cv = new CocktailView();

//position and size the view relative to the stage
cv.viewport = { x:0, y:100, width:400, height:400 };

//load html document
cv.loadURL("index.html");

//when document ready
cv.window.onload = function(e) {

//attach cocktail view to the stage
flash.Lib.current.addChild(cv.root);

//listen for submission of the form defined in the html
var form = cv.document.getElementById("frm");
form.onsubmit = onFormSubmit;
}
}
[/sourcecode]

By accessing the document object through the cocktail view, you get acces to the whole DOM and DOM API methods such as « getElementById ».

Now add the form submission callback :

[sourcecode language= »javascript »]
function onFormSubmit(e)
{
//prevent form submission
e.preventDefault();

var form = e.target;
var ta:TextArea = cast cv.document.getElementById("ta");
tf.text = ta.value;
}
[/sourcecode]

Don’t forget to import the following class (containing the TextArea definition) :

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

Pretty straight-forward, takes the content of the text area and set it on the flash text field. We prevent the form submssion, which would cause a document reload otherwise with the « preventDefault » method on the « submit » event.

And we’re done with code

Build the project

To build for flash use the following hxml :

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

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

The last 2 lines import the cocktail lib and remap all the js class used in the tutorial to the matching cocktail classes.

To build for NME, you can use the nmml provided in the build folder.

Run the project

To run the compiled project, you can either open directly the bin/Main.swf file or open the index_flash.html file in a browser.

And that’s it !

Conclusion

In this tutorial, you’ve seen how to embed cocktail like a web view and how to communicate between this webview and the main parts of your application.

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