by pascal echemann-molinengo · on the adobe® flash® platform. it was designed from scratch to be...

3.0

Creating Rich Internet Applications for Freeby Pascal Echemann-Molinengo

Banana Tree Design White Paper

Update october 2010

Copyright © 2008-2009 Banana Tree Design. All rights reserved.

SPAS, SPAS 3.0, Swing Package fo ActionScript, are trademarks of Banana Tree Design.The information contained in this document represents the opinions of Banana Tree Design on the date of publication. Banana Tree Design cannot be held liable should some information become erroneous or outdated subject to market changes following the publication of this document.

Flash®, Flex®, Flash® CS3, are either trademarks or registered trademarks of Adobe Systems Incorporated.

Table of Contents

1 What is a Rich Internet Application (RIA)? ...........................................................................................11.1 About FlashDevelop .....................................................................................................................11.2 Requirements ...............................................................................................................................11.3 The demo application ...................................................................................................................2

2 Preparing the Project Space...................................................................................................................22.1 Configuring the project template .................................................................................................22.2 The directory structure .................................................................................................................32.3 The Resource Files: styles.css .....................................................................................................4

3. Creating the Application ........................................................................................................................43.1 The Application class ....................................................................................................................43.2 Integrating CSS styles ..................................................................................................................53.3 Creating the views container ........................................................................................................53.3 Creating the panel views ..............................................................................................................6

3.3.1 Designing the views ........................................................................................................73.3.2 The EventCollector class ................................................................................................73.3.3 The “createPanel” method ..............................................................................................83.3.4 Embedding assets...........................................................................................................83.3.5 Adding dragging events...................................................................................................93.3.6 Go with the interactive elements .....................................................................................9

3.4 Adding interactivity .......................................................................................................................93.4.1 Creating the button controls ..........................................................................................103.4.2 Playing with the CubicView’s transition effect ...............................................................103.4.3 CSS rocks! .................................................................................................................... 113.4.4 Removing and reloading the application .......................................................................13

3.5 Adding forms to the application ..................................................................................................143.5.1 The Form class .............................................................................................................143.5.2 Adding a combobox to a form .......................................................................................153.5.3 Adding ComboBox CSS style........................................................................................163.5.4 Adding the credit card form ...........................................................................................163.5.5 Introducing the DateField and the Calendar classes ....................................................173.5.6 The confirmation view ...................................................................................................17

3.5. Conclusion.................................................................................................................................193.5.1 Powerful and totally free................................................................................................193.5.2 Where to go from here ..................................................................................................19

Appendix A: CubicForm.as .....................................................................................................................20

Appendix B: style.css ..............................................................................................................................24

1Creating Rich Internet Applications for Free

1 What is a Rich Internet Application (RIA)?A few years ago, surfing on the Web was a really fantastic but rigid experience. Navigation from pages to page was linear, and Web sites were only made of text and static images.

In 2002, Macromedia coined the term Rich Internet Application (RIA). RIAs provide a new kind of Web experience by introducing a high level of interactivity. RIAs are richer, more spectacular and attractive than all others web concepts. As described on the Adobe®’s web site:

RIAs combine the flexibility, responsiveness, and ease of use of desktop applications with the broad reach of the web.

This tutorial will show you the way to build easily Rich Internet Applications with the “Swing Package for ActionScript 3.0” (SPAS 3.0). SPAS 3.0 is a powerful development solution based on the Adobe® Flash® Platform. It was designed from scratch to be used for the development of online products with:

• the creation of Internet sites,

• the deployment of online RIAs,

• the deployment of offline application based on new Adobe® AIR™ technology.

All the technologies discussed and used in this tutorial to create the application are available for free.

1.1 About FlashDevelop

FlashDevelop is a popular open source ActionScript 2/3 and web development environment. FlashDevelop can be used as an external ActionScript editor for the Adobe® Flash® IDE, or as a complete open source development environment. It integrates Adobe® Flex 3™ SDK, MTASC, haXe and swfmill.

For more information about FlashDevelop software, please refer to the project’s Internet page: http://www.flashdevelop.org/

1.2 Requirements

Prior experience working with Flash® CS3 ActionScript 3.0 to create applications would be helpful. Some experience using the Flex framework would also be helpful, but it is not required. This article builds on the code developed in that article.

To successfully complete this tutorial you will need the following software and files:

• SPAS 3.0 API

http://www.flashapi.org/

• FlashDevelop


http://www.flashdevelop.org/

• Flex 3™ SDK

http://www.adobe.com/go/flex3_sdk

1.3 The demo application

The sample application discussed in this article shows you how to create a payment form that successively displays three different views. The first view allows users to complete personal information. The second one is used to complete credit card information, and the third displays a simple information message. The payment operation can be canceled at any time, and the payment form can be displayed by clicking on a button.

Source files of the demo application can be downloaded at the following link: http://www.flashapi.org/projects/cubic_form/cubicform.zip

You can test online the application at: http://www.flashapi.org/projects/cubic_form/

2 Preparing the Project Space

2.1 Configuring the project template

Once you have both FlashDevelop and Flex 3™ SDK installed, open FlashDevelop, and go to the “Tools > Program Settings” menu. Choose the “AS3Context” group and look for the “Flex SDK Location” property. Set it to the folder where Flex 3™ SDK is installed. SPAS 3.0, FlashDevelop and the free Flex 3™ SDK from Adobe® Open Source are a powerful combination to develop 100% free RIAs, as you will see throughout this tutorial.

Once FlashDevelop and Flex 3™ SDK are configured, you can create the project template. Go to “Project > New Project” and select the “Actionscript 3 Default Project” template. Then enter “CubicForm” as project name.

To finish preparing our workspace, you have to define the project properties. Open the “Project Properties” panel (“Project > Properties”) and complete the properties we need to create the SWF file:

• Target version: “Flash Player 9”,

• Output file: “CubicForm.swf”,

• Dimensions: “800 x 600 px”,

• Framerate: “24 fps”.

These parameters are reproduced on the Figure 1.

At the end, set the global path for the SPAS 3.0 API. Click “Classpaths > Edit Global Classpath” and use the “Add Classpath” button to browse the classpath of your SPAS 3.0 API local folder.


Figure 1: CubicForm project properties

2.2 The directory structure

Now, our project can be compiled in ActionScript 3.0 to a SWF file, with the Flex 3™ SDK (ctrl+Enter or click the “Build Project” icon of the main tool bar).

The directory structure is pretty simple. Left click on the project name in the “Project panel”, and add 3 new folders:

• the “assets” folder, to store external embedded files like icons.

• the “css” folder, to store external cascading style sheets.

• the “src” folder, to store the application’s source file.

The final step involves creating the main ActionScript class: left click on the “src” folder, and


select “Add > New Class”. The filename is “CubicForm.as”. Once the main class file is created, we indicate to FlashDevelop and Flex 3 Flex 3™ compiler that this file is the main entry point of the compiled SWF file. Left click on the “CubicForm.as” into the folder structure, and select “Always Compile”.

2.3 The Resource Files: styles.css

SPAS 3.0 deals really closely with CSS designing. So, in this application we use external styles to manage the appearance of the visual components. Keep in mind that all we do with CSS can be done using SPAS 3.0 ActionScript properties with the same result. But the advantages of using separated style files are the same as in the XHTML language and the Document Object Model (DOM) structure. Therefore, we show through this example that SPAS 3.0 behaves like classical DOM structure, which is more pleasant and flexible for web developers.

Left click on the “css” folder and select “Add > New CSS File”. Type “style.css” as filename for this file.

3. Creating the Application

3.1 The Application class

SPAS 3.0 creates its own structure to manage Internet applications. It defines a “default”, or Application, container that lets you start adding content to your application and much more (like setting styles using external CSS files, for example).

To benefit from this structure, your application must extend SPAS 3.0 “Application” class. Open the CubicForm class, and use the “extends” keyword to define CubicForm as a subclass of the Application class. This class is located in the “org.flashapi.swing” package. When you type the name of the class, FlashDevelop’s auto-completion shows you several possibilities. Just select “org.flashapi.swing.Application” with the keyboard and press Enter. As you can see, FlashDevelop automatically integrates class paths and simplifies coding process.

Now you have extended the main class, your file should look like shown below:

CubicForm class extending SPAS 3.0 Application class:package src { import org.flashapi.swing.Application; public class CubicForm extends Application{ public function CubicForm() { super(); } }}


Note: we strongly encourage ActionScript developers to follow best OOP established scripting rules. In this way, we assume that each application developed with SPAS 3.0 should use a “super” statement in its constructor function.

3.2 Integrating CSS styles

If you compile now the “CubicForm” class and open the newly created SWF file, you will see a wonderful empty flash file. Not really attractive as a RIA! Fortunately, SPAS 3.0 CSS implementation can easily help us to change that.

SPAS 3.0 uses the same css selectors model as HTML and XHTML model. But in addition, many of SPAS 3.0 CSS selectors are the same as XHTML ones, with the same behaviors.

For that reason, the main application’s selector tag is “body” in both systems. SPAS 3.0 philosophy is to provide RIAs developers the most easy-to-use tools with a maximum of functionalities, and all SPAS 3.0 functionalities are studied in the case.

To come back to our application, we want the background to be visible with a gradient colors effect. So, open the “style.css” file, and write the following CSS properties into the “body” selector tag:

body { visibility : visible; gradient : true;}

Then, create an “init” function into the “CubicForm” class, that will be used to create the application, with the following body:

private function init():void { this.styleSheet = “css/style.css”;}

The styleSheet property of the Application class allows to load and apply styles at runtime; You just have to set the external style’s URI, and SPAS 3.0 deals with the rest.

What we have to do is calling the “init” method directly from the constructor function:

public function CubicForm() { super(); init();}

You can compile your file to view changes!

Note: Remember that we can change these parameters directly from ActionScript by using the gradientBackground and bodyVisibility properties of the Application class. Therefore, our goal here is to completely separate code from presentation.

3.3 Creating the views container


SPAS 3.0 has several container objects to display visual controls. Each container object has its own specific properties. For the “CubicForm” class, we use a “CubicView” container:

The CubicView class uses a 3D rotating cube effect as transition, to go from the current view to the next selected view of this multiview object. [...] The CubicView class does not define the six sides of a virtual cube. That means you can add as many views as you want to the multiview object, and select the order you want them to be displayed.

First, we declare a private property named “cube” to store and access the CubicView instance:

private var cube:CubicView;

Then we can create the CubicView object into the initializing method:

cube = new CubicView(3);cube.id = “cube”;cube.draggable = true;

The CubicView instance has “cube” defined as the unique identifier, and can be “mouse dragged”. The first constructor’s parameter represents the number of views defined by default for this container (we need three views in this project). Use the Application.addElement method to add the CubicView to the application. Now, your “init” function should be like this:

private function init():void { this.styleSheet = “css/style.css”; cube = new CubicView(3); cube.id = “cube”; cube.draggable = true; this.addElement(cube);}

Note: Do not forget to import the CubicView class from the package swing: “org.flashapi.swing.CubicView”.

The unique identifier proprety (cube.id) can be used to set CSS property. We use it to set the size and the shadow effect of the container. Go to the style file and write the following CSS declaration:

#cube { width : 425; height : 255; shadow : true;}

3.3 Creating the panel views

To create the views we need, we use the PanelContainer class, which has the same function as Flex’s panel control (org.flashapi.swing.PanelContainer). As we have done before, we create three private variables, each one representing a view of the application. One for the information form, one for the credit card form and the last for the final message:

private var formPanel:PanelContainer;private var paymentPanel:PanelContainer;private var finalPanel:PanelContainer;


3.3.1 Designing the views

Each view of the application must have the same characteristics:

• the title bar displays an icon and the title of the view,

• the title bar dispatches events to start or stop component dragging,

• the view uses the CSS class name: “panelContainer”,

• the view has a “footer” container to display one or two buttons.

Figure 2: design of the panel views

Because we have three views to create, it is better to write a routine method not to repeat this tedious coding work. Here is the signature of such a method:

private function createPanel(title:String, btn1:Button,

btn2:Button = null):PanelContainer {}

We got the title parameter, the first button to display, and the second button with the default value “null”, because it is optional. This method will create a new PanelContainer instance and return it to furnish access to the view by using the formPanel, paymentPanel and finalPanel CubicForm properties.

3.3.2 The EventCollector class

The new ActionScript 3.0 Event System is more powerful than ever, but it also can increase your coding time and causes memory leak. In response to that, SPAS 3.0 provides an utility class available into the “org.flashapi.swing.event” package: the EventCollector class. As we will work with events all along this project, let’s create an instance of the EventCollector class called “evtColl“:

Title

(footer)

(content)

Button Button (optional)


private var evtColl:EventCollector = new EventCollector();

The way the EventCollector class works will be discussed in many parts of this tutorial.

3.3.3 The “createPanel” method

Once the createPanel method and the internal algorithm are defined, we can fill the function’s body.

• We create a new PanelContainer instance with title as first parameter:var pc:PanelContainer = new PanelContainer(title);

• Next, we set the className property, used by SPAS 3.0 CSS management sub-system, to “panelContainer”:

pc.className = “panelContainer”;

• Then, if the third parameter is not null, we use the addGraphicElements method to add the two buttons to the “footer” container of this PanelContainer. Or else, we add the single button with the addElement method. Using the addGraphicElements method allows you to save resources if you have to add several controls to a container object at the same time. To show the PanelContainer’s footer container, use the footer.display method:

btn2 != null ? pc.footer.addGraphicElements(btn1, btn2) : pc.footer.addElement(btn1);pc.footer.display();

• To finish, the function returns the newly created PanelContainer instance:return pc;

The following code represents the complete createPanel function:

private function createPanel(title:String, btn1:Button,

btn2:Button = null):PanelContainer { var pc:PanelContainer = new PanelContainer(title); pc.className = “panelContainer”; btn2 != null ? pc.footer.addGraphicElements(btn1, btn2) : pc.footer.addElement(btn1); pc.footer.display(); return pc;}

3.3.4 Embedding assets

As we have seen in the part 3.3.2, the title bar must display an icon. The PanelContainer.


setIcon method is used to display icons on the face of PanelContainer instances. This method accepts one parameter which can be a string that represents an URI of an external graphic file, or an object that is a reference to an embedded graphic object. Here we use the second option. To embed objects into our application, we just use the [Embed] metadata tag. In this example we choose to embed an SWF file called “icon.swf” and located into the “assets” folder. Reproduce the following to lines into the CubicForm class to embed the icon:

[Embed(source=”../assets/icon.swf”)]private var IconAsset:Class;

Once the icon file is embedded, we just have to assign a new icon object to each PanelContainer. We simply do that by writing the couple of lines below into the createPanel function:

var icon:Object = new IconAsset();pc.setIcon(icon);

Note: If you prefer use external files instead of embedded files, you just have to use the setIcon method with the external file’s URI as parameter:

pc.setIcon(“myFileUri.png”);

3.3.5 Adding dragging events

As we want the views being draggable into the application when users presses the mouse left button over each views’ title bar, we must add “mouse press” and “mouse release” events for each title bar. In order to do that, we use the titleBarButton property of the PanelContainer class. When the user press the mouse button over the PanelContainer’s titleBarButton object, the draggable property of the CubicView instance is set to true; when it is released, this property is set to false. First import the flash.events.MouseEvent class, and add the both following event listeners into the createPanel function’s body:

evtColl.addEvent(pc.titleBarButton, MouseEvent.MOUSE_DOWN, doDrag);evtColl.addEvent(pc.titleBarButton, MouseEvent.MOUSE_UP, undoDrag);

Then, create the doDrag and undoDrag functions corresponding to these events:

private function doDrag(event:MouseEvent):void { cube.startDrag();}private function undoDrag(event:MouseEvent):void { cube.stopDrag();}

3.3.6 Go with the interactive elements

By now, we have seen how to create displayable content. But to compile our application and make it “rich” and spectacular, we need to add some interactive elements such as buttons and transitions between the views.

3.4 Adding interactivity


3.4.1 Creating the button controls

Our application uses 5 buttons to navigate through it: 3 buttons allow the user to go from one view to the others, one button cancels the operation, one is used to remove the views when all operations are performed, and the last one allows users to display the form again. As we have done before, create five private variables to store each Button instance:

private var goTo1:Button;private var goTo2:Button;private var goTo3:Button;private var finish:Button;private var cancel:Button;private var launch:Button;

Now we can create the buttons into the initializing method:

cancel = new Button(“Cancel”);goTo1 = new Button(“Previous”);goTo2 = new Button(“Next”);goTo3 = new Button(“Validate”);finish = new Button(“Finish”);launch = new Button(“Show dialog”);

Note: It is better to add SPAS 3.0 elements after you define properties to them. In this way you will prevent element’s display refreshing due to modifications of some properties such as colors or resizing, etc.. With this aim in view, you always should place the following line “this.addElement(cube);” at the end of the initializing method body.

Once the Button instances are created, we get all elements to use the createPanel method and to show the result. So first add the following six lines of code as a result of the last five button coding lines, and compile your application:

//--> Create all panels by using the predefined createPanel()// method:formPanel = createPanel(“1. Profile”, goTo2, cancel);paymentPanel = createPanel(“2. Payment”, goTo1, goTo3);finalPanel = createPanel(“3. Command Validation”, finish);

//--> Adds all created panels to each cube’s view by using the// CubicView.getViewAt method:cube.getViewAt(0).addElement(formPanel);cube.getViewAt(1).addElement(paymentPanel);cube.getViewAt(2).addElement(finalPanel);

3.4.2 Playing with the CubicView’s transition effect

At this stage, we can drag the CubicView container, but there is no possibility to go from one view to another. We have to add “button click” events to set the CubicView.index property. In doing so, the CubicView’s 3D transition effect will automatically be launched. By using the UIMouseEvent (org.flashapi.swing.event.UIMouseEvent) and the UIMouseEvent target property


(inherited from the Event class), we easily can check what button is clicked to fire the mouse event. The initTransition function attributes the right index corresponding to this button. The navigation is devoted to the goTo1, goTo2 and goTo3 buttons; add this code into the CubicForm class body:

private function initTransition(event:UIMouseEvent):void { switch(event.target) { case goTo1 : cube.index = 0; break; case goTo2 : cube.index = 1; break; case goTo3 : cube.index = 2; break; }}

Notice that the 3 buttons react with the same registered event. That is why we can implement the useful addEventCollection method from the EventCollector class. This method allows to add the same event listener to a collection of EventDispatcher objects, as shown below:

evtColl.addEventCollection([goTo1, goTo2, goTo3], UIMouseEvent.CLICK, initTransition);

The preceding code must be placed into the initializing function. (Do not forget to import the UIMouseEvent class.)

If you test the code, you can see that effect always turn from bottom to top. But the CubicView class defines a special property to choose the effect’s moving direction. This is the direction property which accepts 4 Position class constants (org.flashapi.swing.constants.Position) as parameter: Position.TOP, Position.BOTTOM, Position.LEFT and Position.RIGHT. Let’s create a new method to implement this functionality and to visually improve our 3D effect:

private function doTransition(id:uint, direction:String):void { //--> If the index (id) has not changed, do nothing: if (cube.index == id) return; //--> Sets the effect’s direction: cube.direction = direction; //--> Start the effect using the right index: cube.index = id;}

To use the doTransition method, we need to change the initTransition method like this:

private function initTransition(event:UIMouseEvent):void { switch(event.uio) { case goTo1 : doTransition(0, Position.RIGHT); break; case goTo2 : doTransition(1, Position.LEFT); break; case goTo3 : doTransition(2, Position.TOP); break; }}

After that, the cube object can turn in three logical directions. But even if the effect is rendering better than before, the visual appearance of the application do not look very good. We can edit the CSS file to easily improve the graphical design of the work.

3.4.3 CSS rocks!


To begin, we apply new gradient colors to the application’s background. Open the “style.css” file.

Note: SPAS 3.0 loads CSS files at runtime. So, to show the effects of the style declaration on your work, you just have to reload the SWF file. In FlashDevelop, this operation can easily be done by double clicking on the project’s generated SWF file.

To apply new background gradient colors, add this line into the body css tag:

gradient-colors: #444444 #EEEEEE;

To hide the CubicView’s border and background, set the CubicView.backgroundOpacity and CubicView.borderWidth properties to 0. Write the following two lines into the cube CSS identifier:

background-opacity : 0;border-width : 0;

This demonstrates as only three CSS style declaration can radically change the appearance of a User Interface!

Now remember that we had declared a CSS class name for all PanelContainer instances: panelContainer. So let’s declare the CSS style for this class;iIn addition to color and size properties, SPAS 3.0 CSS sub-system allows to apply margin, padding, and layout properties:

.panelContainer { width : 400; height : 180; color : #666666; font-color : white; background-color : #444444; padding : 10; layout-orientation : vertical; footer-opacity : 0;}

Note: The footer color and opacity properties are set from the AWM class.

You probably have noticed that button are cut at their bottom edge. This is not a bug: by default, the height of the Footer container is fix. We can use CSS footer selector to enforce the container to automatically adjust it size to its content’s size. By the way, we decide to align the footer’s content to the right:

footer { layout-alignment : right; height : auto;}

To finish, we can declare CSS properties for all buttons. We want all the buttons have a shadow effect; we decide too that the color of text and icon is white for all states.

button { font-color : white; icon-color : white; shadow : true;}


You can see that the label of buttons are not easily readable, because they appear with a withe color over a soft gray background. But SPAS 3.0 CSS sub-system implements CSS pseudo selectors. That means that you can use “up”, “down” and “over” CSS pseudo selectors to define properties for each button state:

button:up { color : #666666;}

button:over { color : #999999;}

button:down { color : #333333;}

As we said above: SPAS 3.0 CSS rocks!

3.4.4 Removing and reloading the application

Internet form programs typically offers to the user the possibility to cancel current operation, or to restart all the process. That’s the reason why we have three other buttons: finish, cancel and launch. To perform these actions, we create two simple functions, one to remove the application, and one to reload it:

//--> Removes the application:private function removeMultiView(event:UIMouseEvent):void { //--> Removes the cube object from the main application: this.removeElement(cube); //--> Adds the launch button to the main application: this.addElement(launch);}//--> Reloads the application: private function showDialog(event:UIMouseEvent):void { //--> Removes the launch button from the main application: this.removeElement(launch); //--> Initializes the index of the cube object: cube.index = 0; //--> Adds the cube object to the main application: this.addElement(cube);}

To make the process available from User Interface, we add two event listeners into the initializing method:

evtColl.addEventCollection([finish, cancel], UIMouseEvent.CLICK, removeMultiView);evtColl.addEvent(launch, UIMouseEvent.CLICK, showDialog);

Note: In the preceding code, both, finish and cancel buttons, are registered with


the same event. This is not wrong if you admit that both actions remove the CubicView container. However, these action should be differentiated, because a “finish” action does treat data, and a “cancel” action does not. Such an algorithm is not reproduced in this book.

If you compile the file, the application should perfectly work. At this time, we can go to the final step of this tutorial: “Adding forms to the application”.

3.5 Adding forms to the application

3.5.1 The Form class

SPAS 3.0 provides an easy-to-use object to create complex forms: the Form class (org.flashapi.swing.Form). Creating forms is performed with only two operations: creating a form instance and adding items to the form. To specify form items, we use constants of the FormItem class (org.flashapi.swing.constants.FormItem). So first we import these couple of classes into the CubicForm class body. Then, we define private variables to store internal references of the form instances, as we did before:

private var profileForm:Form;private var cardForm:Form;

Now we create a specific function to manage the form that will display user’s profile information:

private function createProfileForm():void { //--> Creates the profileForm object: profileForm = new Form();}

Next, we add text inputs to get user’s profile basic information like name or location. The Form.addItem method accepts an object as parameter. The properties of this object may change with the type of object you want to add. But all objects must have a type and a label property. To add text input objects, use the FormItem.INPUT constant, as shown below:

profileForm.addItem({ type:FormItem.INPUT, label:”First name”});profileForm.addItem({ type:FormItem.INPUT, label:”Last name” });profileForm.addItem({ type:FormItem.INPUT, label:”Street” } );profileForm.addItem({ type:FormItem.INPUT, label:”Zip” } );profileForm.addItem({ type:FormItem.INPUT, label:”City” } );

To add the newly created form into the formPanel container, call the createProfileForm function from the initializing method and use the addElement method to add the profilForm object to the formPanel container, as follows:

formPanel = createPanel(“1. Profile”, goTo2, cancel);createProfileForm();formPanel.addElement(profileForm);

After having compiled the application file, you can set the width of all input text controls by using


the input CSS selector tag:

input { width : 250;}

3.5.2 Adding a combobox to a form

To add a combobox control to a form, use the FormItem.COMBOBOX constant. ComboBox objects can store and display complex data. To add these data to a ComboBox instance, we need a reference of the combobox object created by the form. The Form.addItem method returns a special kind of object which allows developers to access the added control. This object is an instance of the ListItem class (org.flashapi.swing.list.ListItem). It has an item property which stores a reference to the added control through the formItem property. Import the ListItem class and add the following line of code into the createProfileForm function, to get a reference of the added combobox:

var li:ListItem = profileForm.addItem( { type:FormItem.COMBOBOX, label:”Country”, itemLabel:”Select” } );

Notice that the itemLabel property allows to define the combobox’ default text.

Once we have access to the combobox, we can fill it with specific data. For that, we can use the ComboBox.dataProvider property. SPAS 3.0 data provider process is a powerful mechanism, shared by all Listable objects, to simplify data implementation. Import the DataProvider class into your file (org.flashapi.swing.databinding.DataProvider), and create a new DataProvider object into the createProfileForm function:

var data:DataProvider = new DataProvider();

The DataProvider.addAll method accepts a collection of objects as parameter. These objects must specify a label property. Use the selected property to set the item’s state to selected:

data.addAll( { label:”France”, selected:true }, { label:”United States” }, { label:”United Kingdom” }, { label:”Japan” }, { label:”Germany” } );

To finish, define the DataProvider object you have created as parameter of the combobox’s dataProvider property:

li.item.formItem.dataProvider = data;

Well now, the createProfileForm function you wrote should look at something like this:

private function createProfileForm():void{var data:DataProvider = new DataProvider();data.addAll( { label:”France”, selected:true }, { label:”United States” }, { label:”United Kingdom” }, { label:”Japan” }, { label:”Germany” } );profileForm = new Form();


profileForm.addItem({type:FormItem.INPUT, label:”First name” });profileForm.addItem({type:FormItem.INPUT, label:”Last name” } );profileForm.addItem( { type:FormItem.INPUT, label:”Street” } );profileForm.addItem( { type:FormItem.INPUT, label:”Zip” } );profileForm.addItem( { type:FormItem.INPUT, label:”City” } );var li:ListItem = profileForm.addItem( { type:FormItem.COMBOBOX, label:”Country”, itemLabel:”Select” } );li.item.formItem.dataProvider = data;}

3.5.3 Adding ComboBox CSS style

The ComboBox button control behaves like buttons. It has the same style properties for each button state. For that reason, we can apply the same styles as used for the application’s buttons. Fortunately, SPAS 3.0 CSS sub-system allows to combine multiple tags, as it is commonly used in XHTML for example:

button, combobox { font-color : white; icon-color : white; shadow : true;}

button:up, combobox:up{ color : #666666;}

button:over, combobox:over { color : #999999;}

button:down, combobox:down { color : #333333;}

3.5.4 Adding the credit card form

To create the credit card form, we proceed exactly the same as we have done for the profile form. Write the following function, used to manage the form that will display credit card informations, into the main class:

private function createCardForm():void{var data:DataProvider = new DataProvider();data.addAll( { label:”American Express”, selected:true}, { label:”Visa” }, { label:”MasterCard” } );

cardForm = new Form();


var li:ListItem = cardForm.addItem( { type:FormItem.COMBOBOX, label:”Credit card”, itemLabel:”Select” } );li.item.formItem.dataProvider = data;cardForm.addItem({type:FormItem.INPUT, label:”Card number”});cardForm.addItem({type:FormItem.DATE, label:”Expiration date”});}

Note: The last item we add to the form is a type of FormItem.DATE. The FormItem.DATE type creates a dateField object which allows users to select a date from a Calendar object. These classes will be covered in the next part of this tutorial: “3.5.5 Introducing the DateField and the Calendar classes”.

Then, add the newly created form into the cardPanel container and call the createCardForm function from the initializing method, as we did before:

paymentPanel = createPanel(“2. Payment”, goTo1, goTo3);createCardForm();paymentPanel.addElement(cardForm);

If you compile the application, and test it, you will see that information typed into both forms are persistent, even if you remove or cancel the forms. This is not a logical behavior for such an application, so we have to reset all forms every time the remove function is called by user interactions. This can easily be done by using the Form.reset method:

private function removeMultiView(event:UIMouseEvent):void { this.removeElement(cube); this.addElement(launch); profileForm.reset(); cardForm.reset();}

3.5.5 Introducing the DateField and the Calendar classes

As we said before, the credit card form contents a DateField object. The SPAS 3.0 online documentation describes the DateField control as follows:

The DateField class provides a Date entry field which is an occurrence of the TextInput class. When the user clicks inside the bounding box of the uiobject it pops up a Calendar uiobject instance. Then users can select a Date using the calendar.

As you can see, the Form class is really easy to use, and it deals with SPAS 3.0 components to let developers add several controls without caring about complex code and interactions. So now, we just have to use the calendar CSS selector to change the DateField’s calendar appearence:

calendar { color : #666666; background-color : #EEEEEE; font-color : white; shadow : true;}

3.5.6 The confirmation view


Once the user has validated the form, we redirect it to the confirmation view’s panel. This panel container is composed of a title label, a simple text to display useful customer information and a button link to access to a contact page. (This contact page is not reproduced into this tutorial.) To create the final view, we add a method only devoted to this task. First import the Text, Label and ButtonLink classes from the org.flashapi.swing package. Then create the three variables to store the references to the needed controls:

private var contact:LinkButton;private var thanksLabel:Label;private var infos:Text;

The createLastPanel function is very simple. As we want the thanksLabel and infos controls to have their own style, we give them a unique CSS identifier:

private function createLastPanel():void {

//--> Creates a new Label object with “thanksLabel” as // unique identifier:

thanksLabel = new Label(“Your title here.”); thanksLabel.id = “thanksLabel”;

//--> Creates a new Text object “infos” as unique // identifier:

infos = new Text(); infos.id = “infos”;

//--> Adds custom text to the Text object: infos.appendText(“Your text here.”);

//--> Creates a new LinkButton instance contact = new LinkButton(“Contact Us”);

//--> Adds all the preeceding elements into the //finalPanelcontainer: finalPanel.addGraphicElements(thanksLabel, infos, contact);}

Of course, we must call this method from the initializing function to display these elements into the finalPanel container.

At the end, we declare the CSS styles corresponding to these elements. Notice that SPAS 3.0 CSS text properties use the same syntax as standardized CSS text format properties:

#thanksLabel { font-color : #333333; font-size : 16; font-weight : bold;}

#infos { width : parent; height : auto;}

Once you have compiled your application, you should see the final result as shown below:


3.5. Conclusion

3.5.1 Powerful and totally free

SPAS 3.0 can be used with both, Flash CS3 and Flex 3, technologies. But these ones are not free, even if they offers impressive functionalities. All along this tutorial, we have seen that SPAS 3.0 combined with FlashDevelop and the Free flex 3 SDK offers a real powerful alternative to Adobe’s softwares. It allows ActionScript developers to go far into the RIAs creation and deployment process for free.

Another very important point of SPAS 3.0 API is its simplicity. The API is not as verbose as others are. For example, if you want to create a real window, use the new Window statement. No JFrames, no 3rd party codes and no obscure methods! It confers SPAS 3.0 API a great superiority concerning the learning and development phases.

3.5.2 Where to go from here

We have covered a lot of functionalities in the last chapter. However, SPAS 3.0 offers so many possibilities, and its API is regularly growing so much, that it is not possible to view them all in detail. To get more information and tutorials about SPAS 3.0 programmatic technics, go to the SPAS 3.0 online documentation and the tutorial section on the SPAS 3.0 Web site at: http://www.flashapi.org.


Appendix A: CubicForm.asCubicForm.as/*//////////////////////////////////////////////////////////////////// Copyright (C) 2008 BANANATREE DESIGN & Pascal ECHEMANN.// All Rights Reserved.// The following is Sample Code and is subject to all restrictions // on such code as contained in the End User License Agreement// accompanying this product.// If you have received this file from a source other than // BANANATREE DESIGN, then your use, modification, or distribution // of it requires the prior written permission of BANANATREE // DESIGN.//////////////////////////////////////////////////////////////////*/

package src{

/*** @class CubicForm* @author Pascal ECHEMANN* @date 13/08/2008 22:35* @version 1.0*/

import org.flashapi.swing.Application;import org.flashapi.swing.Button;import org.flashapi.swing.ComboBox;import org.flashapi.swing.CubicView;import org.flashapi.swing.Form;import org.flashapi.swing.Label;import org.flashapi.swing.LinkButton;import org.flashapi.swing.PanelContainer;import org.flashapi.swing.Text;

import org.flashapi.swing.constants.Position;import org.flashapi.swing.constants.FormItem;import org.flashapi.swing.databinding.DataProvider;import org.flashapi.swing.event.EventCollector;import org.flashapi.swing.event.UIMouseEvent;import org.flashapi.swing.list.ListItem;

import flash.events.MouseEvent;

public class CubicForm extends Application{


public function CubicForm(){super();init();}

private var cube:CubicView;private var formPanel:PanelContainer;private var paymentPanel:PanelContainer;private var finalPanel:PanelContainer;private var goTo1:Button;private var goTo2:Button;private var goTo3:Button;private var finish:Button;private var cancel:Button;private var launch:Button;private var contact:LinkButton;private var profileForm:Form;private var cardForm:Form;private var thanksLabel:Label;private var infos:Text;private var evtColl:EventCollector = new EventCollector(); [Embed(source=”../assets/icon.swf”)]private var IconAsset:Class; private function init():void{

this.styleSheet = “css/style.css”;cube = new CubicView(3);cube.id = “cube”;cube.draggable = true; cancel = new Button(“Cancel”);goTo1 = new Button(“Previous”);goTo2 = new Button(“Next”);goTo3 = new Button(“Validate”);finish = new Button(“Finish”);launch = new Button(“Show dialog”);formPanel = createPanel(“1. Profile”, goTo2, cancel);createProfileForm();formPanel.addElement(profileForm);paymentPanel = createPanel(“2. Payment”, goTo1, goTo3);createCardForm();paymentPanel.addElement(cardForm); finalPanel = createPanel(“3. Command Validation”, finish);createLastPanel();cube.getViewAt(0).addElement(formPanel);cube.getViewAt(1).addElement(paymentPanel);cube.getViewAt(2).addElement(finalPanel); evtColl.addEventCollection([goTo1, goTo2, goTo3], UIMouseEvent.CLICK, initTransition);evtColl.addEventCollection([finish, cancel], UIMouseEvent.CLICK, removeMultiView);


evtColl.addEvent(launch, UIMouseEvent.CLICK, showDialog);this.addElement(cube);} private function createPanel(title:String, btn1:Button, btn2:Button = null):PanelContainer{var pc:PanelContainer = new PanelContainer(title);pc.className = “panelContainer”;var icon:Object = new IconAsset();pc.setIcon(icon);evtColl.addEvent(pc.titleBarButton, MouseEvent.MOUSE_DOWN, doDrag);evtColl.addEvent(pc.titleBarButton, MouseEvent.MOUSE_UP, undoDrag);btn2 != null ? pc.footer.addGraphicElements(btn1, btn2) : pc.footer.addElement(btn1);pc.footer.display();return pc;} private function initTransition(event:UIMouseEvent):void{ switch(event.uio) { case goTo1 : doTransition(0, Position.RIGHT); break; case goTo2 : doTransition(1, Position.LEFT); break; case goTo3 : doTransition(2, Position.TOP); break; }} private function doTransition(id:uint, direction:String):void{if (cube.index == id) return;cube.direction = direction;cube.index = id;} private function createProfileForm():void{ var data:DataProvider = new DataProvider();data.addAll( { label:”France”, selected:true }, { label:”United States” }, { label:”United Kingdom” },{ label:”Japan” }, { label:”Germany” } );profileForm = new Form();profileForm.addItem( { type:FormItem.INPUT, label:”First name” } );profileForm.addItem( { type:FormItem.INPUT, label:”Last name” } );profileForm.addItem( { type:FormItem.INPUT, label:”Street” } );profileForm.addItem( { type:FormItem.INPUT, label:”Zip” } );profileForm.addItem( { type:FormItem.INPUT, label:”City” } );var li:ListItem = profileForm.addItem( { type:FormItem.COMBOBOX, label:”Country”, itemLabel:”Select” } );li.item.formItem.dataProvider = data;} private function createCardForm():void{


var data:DataProvider = new DataProvider();data.addAll( { label:”American Express”, selected:true }, { label:”Visa” }, { label:”MasterCard” } ); cardForm = new Form();var li:ListItem = cardForm.addItem( { type:FormItem.COMBOBOX, label:”Credit card”, itemLabel:”Select” } );li.item.formItem.dataProvider = data;cardForm.addItem( { type:FormItem.INPUT, label:”Card number” } );cardForm.addItem( { type:FormItem.DATE, label:”Expiration date” });} private function createLastPanel():void{thanksLabel = new Label(“Thank you for choosing BananaTree Design.”);thanksLabel.id = “thanksLabel”;infos = new Text();infos.id = “infos”;infos.appendText(“If you have another question about BananaTree Design and our products or would like to ask us a question then please click the following link to go to the Help and Contact Us page:”);contact = new LinkButton(“Contact Us”);finalPanel.addGraphicElements(thanksLabel, infos, contact);} private function doDrag(event:MouseEvent):void{cube.startDrag();} private function undoDrag(event:MouseEvent):void{cube.stopDrag();} private function removeMultiView(event:UIMouseEvent):void{this.removeElement(cube);this.addElement(launch);profileForm.reset();cardForm.reset();} private function showDialog(event:UIMouseEvent):void{this.removeElement(launch);cube.index = 0;this.addElement(cube);}}}


Appendix B: style.cssstyle.css

/*//////////////////////////////////////////////////////////////////// Copyright (C) 2008-2010 BANANATREE DESIGN & Pascal ECHEMANN.// All Rights Reserved.// The following is Sample Code and is subject to all // restrictions on such code as contained in the End User // License Agreement accompanying this product.// If you have received this file from a source other than // BANANATREE DESIGN, then your use, modification, or // distribution of it requires the prior written permission of // BANANATREE DESIGN.//////////////////////////////////////////////////////////////////*/

/*//------------------------------// SPAS 3.0 body selector//------------------------------*/

body { visibility : visible; gradient : true; gradient-colors: #444444 #EEEEEE;}

button, combobox { font-color : white; icon-color : white; shadow : true;}

footer { layout-alignment : right; height : auto;}


input { width : 250;}

calendar { color : #666666; font-color : white;}

/*//------------------------------// SPAS 3.0 pseudo selectors//------------------------------*/

button:up, combobox:up{ color : #666666;}

button:over, combobox:over { color : #999999;}

button:down, combobox:down { color : #333333;}

/*//------------------------------// CSS Class styles//------------------------------*/

.panelContainer { width : 400; height : 180; color : #666666; font-color : white; background-color : #444444; padding : 10; layout-orientation : vertical; footer-opacity: 0;}


/*//------------------------------// CSS Unique identifier styles//------------------------------*/

#cube { background-opacity : 0; width : 425; height : 255; border-width : 0; shadow : true;}

#thanksLabel { font-color : #333333; font-size : 16; font-weight : bold;}

#infos { width : parent; height : auto;}

by pascal echemann-molinengo · on the adobe® flash® platform. it was designed from scratch to be...

Documents