Flex Blog » Examples

SWIZ Framework in Flex 4 Example: Part I

Arjan — Fri, 06 Aug 2010 15:36:57 +0000

Line Break

Author: Arjan (36 Articles) - Author Website

Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.

A few weeks ago I posted about the SWIZ Framework. The post was useless, but I was so enthusiastic about SWIZ, that I had to post something at that time. This post will be more usefull, I promise. Lets see how we can get the SWIZ Framework working in combination with the Flex 4 SDK.

First, you may want to find out about flex frameworks, MVC(S) in general if you don’t know anything about them. Its really helpful to have some sort of understandig why we want to do things using the MVC paradigm and how we can use frameworks to help us to achieve that.

Try to understand the basics of flex frameworks (Cairngorm, PureMVC, SWIZ etc. etc.) and MVC(S) by reading about them before you start developing applications. As I found out, understanding the concepts is really important. Just visit some framework / MVC sites and wiki’s to get a basic understanding.

Im not gonna talk about the pro and cons of certain frameworks here. All I know is that I know a few of them and SWIZ is the only one that I really like for a few simple reasons:

It doesn’t slow down you development time at all
Easy to understand
Easy to apply
Its MVC(S), but that applies to all the major frameworks

Now enough about all that, lets create a simple application with MySQL, PHP and Flex 4 using SWIZ. First, you will need the SWIZ swc file, at this time, the latest release is 1.0 RC1, you can download it here.

Lets discuss the functional specs of our mini flex application briefly before we start building it. What I want is the following:

Storage:

Store company data (name and location)
Store contact persons for companies (firstname, lastname)

Application:

List of companies showing name and location
List of contact persons of the selected company (loaded when user selects a company).

This post, Part I will only cover the first item in our list. In part II, we are going to handle item two in our list.

Let’s get started. First, we’ll need some database and two tables to facilitate this. In this example we are using PHP and MySQL so I used PHPMyAdmin to create the following:

A table company which has 3 fields: id (int, auto increment primary key), name (text 100) and location (text 100)
A table contactperson which has 4 fields: id (int auto increment primary key), companyid (int), firstname (text 100) and lastname (text 100).

Add some dummy data to both tables using phpMyAdmin.

When you’re finished you’re ready to start coding in Flex. Start your Flash Builder 4 and create a new project (in my case I called it SimpleSWIZExamplePart1).

After that, add the SWIZ swc file to you libs folder inside your project folder. You can just drag and drop it from your filesystem to do this. Now you’re all set to start using SWIZ. First, lets add the basic configuration to our main application file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<fx:Declarations>

<swiz:Swiz beanProviders="{[]}">

<swiz:config>
<swiz:SwizConfig setUpEventType="creationComplete"
setUpEventPhase="{ EventPhase.CAPTURING_PHASE } "
setUpEventPriority="50"
tearDownEventType="{ Event.REMOVED_FROM_STAGE }"
tearDownEventPhase="{ EventPhase.CAPTURING_PHASE }"
tearDownEventPriority="50"
strict="true"
viewPackages="com.flexblog.swizexample.view.*"
defaultFaultHandler="onFault"
defaultDispatcher="dispatcher" />
swiz:config>

swiz:Swiz>

fx:Declarations>

Notice that you can set some properties, the most important one is viewPackages. Later on, you’ll have to specify your own package here. Notice that there’s a defaultFaultHandler in the configuration which calls a function onFault, this requires a tiny bit of script in your main application file:

1
2
3
4
5
6
7
8
9
10
11

<fx:Script>
[CDATA[
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;

private function onFault(event:FaultEvent):void
{
Alert.show( event.fault.message, "Error" );
}
]]>
fx:Script>

First we’re going to create our application model. Create a package structure first, for example com.flexblog.swizexample. In that package, create another package called model. Inside that model package, create an ActionScript class called Model.as. This class is going to be our central data store in the application. Here’s the code for the initial model class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package com.flexblog.swizexample.model
{
import mx.collections.ArrayCollection;

public class Model
{
/**
* List of companies
*/
[Bindable]
public var companies:ArrayCollection;

public function Model()
{
}
}
}

As you can see, the model has on variable called companies, this is going to hold the list of companies that we retrieve from the backend using a service (which is called by a controller). You still with me? Let create the ActionScript service that communicates with the backend.

To create the service, we can use one of the great new features of Flash Builder 4 to connect with out database. Click on the data button in Flash Builder 4, select Connect to PHP and click the generate sample link. Connect to your local mysql server. In my case: user / pass, hostname: localhost, port: 3306. After that, select the company table. Flash Builder automatically generates a PHP file for you that communicates with the back-end! Make sure you give the service an appropriate name (e.g. CompanyService) and put your newly created actionscript class in a services package, for example com.flexblog.swizdemo.services, for the datatype package, use com.flexblog.swizexample.domain.

Now to execute this service, we are going to create a Controller. Create a new package called controller inside your “main” package. In my example the package is com.flexblog.swizexample.controller. Inside the package, create a new ActionScript class called CompanyController.as. Put the following code in the class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

package com.flexblog.swizexample.controller
{
import com.flexblog.swizexample.model.Model;
import com.flexblog.swizexample.services.CompanyService;

import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;

import org.swizframework.utils.services.ServiceHelper;

public class CompanyController extends AbstractController
{
/**
* companyService, Injected by SWIZ Framework
*/
[Inject]
public var companyService:CompanyService;

public function CompanyController()
{
}

/**
* Automatically called by SWIZ Framework after
* application startup by using the [PostConstruct] tag
*/
[PostConstruct]
public function getAllCompanies():void
{
sh.executeServiceCall( companyService.getAllCompany(), handleGetAllResult, handleFault );
}

private function handleGetAllResult(event:ResultEvent):void
{
model.companies = event.result as ArrayCollection;
}

private function handleFault(event:FaultEvent):void
{
Alert.show( event.fault.message, "Error" );
}
}
}

Notice the [PostConstruct] tag above the getAllCompanies() method. This nice SWIZ metadata tag lets SWIZ know that it should automatically execute the method decorated with that tag on application startup. Very nice!

As you can see, the CompanyController extends a Class called AbstractController which holds some things that all my Controllers are going to need, create that class as well:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

package com.flexblog.swizexample.controller
{
import com.flexblog.swizexample.model.Model;

import org.swizframework.utils.services.ServiceHelper;

public class AbstractController
{
/**
* ServiceHelper to facilitate service calls, Injected by SWIZ Framework
*/
[Inject]
public var sh:ServiceHelper;

/**
* Application model, Injected by SWIZ Framework
*/
[Inject]
public var model:Model;

public function AbstractController()
{
}
}
}

Now we need to do some additional things to make these classes work. As you can see i’m using variables called companyService, model and serviceHelper which are never instantiated…here’s where SWIZ helps you with a great little thing called Dependency Injection: it automatically creates an object of type CompanyService for you when it’s needed. Strange when you see it for the first time but it helps you A LOT.

To let SWIZ tie everything together, we need something called a BeanProvider. Create a new MXML component called Beans.mxml in you main package (com.flexblog.siwzexample) based on anything and replace all the code with the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?xml version="1.0" encoding="utf-8"?>
<swiz:BeanProvider xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:swiz="http://swiz.swizframework.org"
xmlns:controller="com.flexblog.swizexample.controller.*"
xmlns:services="com.flexblog.swizexample.services.*"
xmlns:model="com.flexblog.swizexample.model.*" >

<controller:CompanyController id="companyController"/>
<services:CompanyService id="companyService"/>
<swiz:ServiceHelper id="serviceHelper"/>
<model:Model id="model"/>

swiz:BeanProvider>

With this, SWIZ knows that it should do Dependency injection on all Objects of type Model, CompanyController, CompanyService and ServiceHelper when the variables have the [Inject] metadata tag.

Now with that out of the way lets set up a view that can display our company details. First, create a view package that can hold all your MXML view components. In my example the package is com.swizexample.view. After that, create a new MXML component inside that package called MainView.mxml. Make sure it’s based on a VGroup and remove the height and width details. After that, create a new MXML component called CompanyView.mxml, also based on a VGroup, remove the width and height here too.

Now you should have 2 new MXML components. Add the MainView.mxml to your application file like this:

1	<view:MainView id="mainView" width="100%" height="100%"/>

And add the CompanyView to your mainview:

1	<view:CompanyView id="companyView" width="100%" height="100%"/>

Ok, now lets finish our CompanyView, we will just add a basic DataGrid to list all companies with a simple title to it:

1
2
3
4
5
6
7
8

<s:Label text="Companies" fontWeight="bold"/>
<mx:DataGrid dataProvider="{model.companies}"
width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Location" dataField="location"/>
mx:columns>
mx:DataGrid>

As you can see, the CompanyView uses model.companies as the dataprovider for the datagrid. To make it a bit more complicated, this is not the model we discussed earlier. This model is acutally a new ActionScript class called CompanyViewPresentationModel.as which is going to be the Presentation Model of our CompanyView. Still with me? Create a new subpackage in the model package called presentation. Inside that package, create the CompanyViewPresentationModel.as class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

package com.flexblog.swizexample.model.presentation
{
import mx.collections.ArrayCollection;

public class CompanyViewPresentationModel
{

/**
* List of companies, injected and binded to the application model using SWIZ
*/
[Bindable]
[Inject(source="model.companies", bind="true")]
public var companies:ArrayCollection;

public function CompanyViewPresentationModel()
{
}
}
}

As you can see it also has a companies variable. This companies variable is binded to the global model (Model.as) using the SWIZ [Inject(source="model.companies", bind=true)] tag.

Also add this new Class to your Beans.mxml file so that SWIZ can Inject this in your view.

1	<presentation:CompanyViewPresentationModel id="companyViewPresentationModel"/>

Now add the following to your CompanyView:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<fx:Script>
[CDATA[
import com.flexblog.swizexample.model.presentation.CompanyViewPresentationModel;

/**
* The presentation model for the CompanyView,
* Injected by SWIZ
*/
[Inject]
[Bindable]
public var model:CompanyViewPresentationModel;

]]>
fx:Script>

Ok, now you’re ready to finish configuring SWIZ in your application file. Add the Beans.mxml to the swiz config (and import the Beans.mxml in the script section) and make sure the viewPackages property is ok:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<fx:Declarations>

<swiz:Swiz beanProviders="{[Beans]}">

<swiz:config>
<swiz:SwizConfig setUpEventType="creationComplete"
setUpEventPhase="{ EventPhase.CAPTURING_PHASE } "
setUpEventPriority="50"
tearDownEventType="{ Event.REMOVED_FROM_STAGE }"
tearDownEventPhase="{ EventPhase.CAPTURING_PHASE }"
tearDownEventPriority="50"
strict="true"
viewPackages="com.flexblog.swizexample.view.*"
defaultFaultHandler="onFault"
defaultDispatcher="dispatcher" />
swiz:config>

swiz:Swiz>

fx:Declarations>

That should be it. Try running your application. If everything is ok, you should see a list of companies from your local database (if you added the dummy data, ofcourse).

Something like this, view source is enabled. Check out the ASDoc here:

Dynamic AdvancedDataGridColumn in Flex 4

Arjan — Wed, 04 Aug 2010 18:08:54 +0000

Line Break

Author: Arjan (36 Articles) - Author Website

This little example shows you how you can add an AdvancedDataGrid column to your AdvancedDataGrid dynamically.

First lets create a simple layout to hold our AdvancedDataGrid in your application file:

1
2
3
4
5
6
7
8
9

<s:layout>
<s:VerticalLayout paddingLeft="5" paddingTop="5"/>
s:layout>
<mx:AdvancedDataGrid id="adg" dataProvider="{ac}" width="450" height="250">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="firstname" headerText="Firstname"/>
mx:columns>
mx:AdvancedDataGrid>
s:Application>

Notice that the AdvancedDataGrid uses a dataProvider, declare that in your script section:

1
2
3
4

import mx.collections.ArrayCollection;

[Bindable]
private var ac:ArrayCollection;

Now create a method init() that’s called on the initialize event of the application that fills the ArrayCollection with some dummy data:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

private function init():void
{
// Create some dummy data
ac = new ArrayCollection();
var obj:Object = new Object();
obj.firstname = "John";
obj.lastname = "Doe";
ac.addItem(obj);

obj = new Object();
obj.firstname = "Jane";
obj.lastname = "Doughnut";
ac.addItem(obj);
}

Now lets create the stuff that’s going to help us add a column to our existing AdvancedDataGrid. First create a button
above the AdvancedDataGrid in the layout:

1	<s:Button id="addColumnBtn" click="addColumn()" label="Add Last Name Column"/>

Notice that it calls a method addColumn(), lets add that to our script section:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

private function addColumn():void
{
// Get the AdvancedDataGrid colums (array)
var columns:Array = adg.columns;
// Create new AdvancedDataGridColumn
var adgColumn:AdvancedDataGridColumn = new AdvancedDataGridColumn();
// Set the headerText and dataField properties
adgColumn.headerText = "Lastname";
adgColumn.dataField = "lastname";
// Set the column width
adgColumn.width = 225;
// add the new column to the existing column array with the push() method
columns.push(adgColumn);
// set the AdvancedDataGrid columns to the array of columns
adg.columns = columns;
// Hide the Button
addColumnBtn.visible = false;
}

Run the application, at first you should see one column with the button to add the second column. After you’ve clicked it, the second column appears and the button disappears.

Check out the sample application:

Here’s the complete source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" initialize="init()"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
-- Place non-visual elements (e.g., services, value objects) here -->
fx:Declarations>

<fx:Script>
[CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var ac:ArrayCollection;

private function init():void
{
// Create some dummy data
ac = new ArrayCollection();
var obj:Object = new Object();
obj.firstname = "John";
obj.lastname = "Doe";
ac.addItem(obj);

obj = new Object();
obj.firstname = "Jane";
obj.lastname = "Doughnut";
ac.addItem(obj);
}

private function addColumn():void
{
// Get the AdvancedDataGrid colums (array)
var columns:Array = adg.columns;
// Create new AdvancedDataGridColumn
var adgColumn:AdvancedDataGridColumn = new AdvancedDataGridColumn();
// Set the headerText and dataField properties
adgColumn.headerText = "Lastname";
adgColumn.dataField = "lastname";
// Set the column width
adgColumn.width = 225;
// add the new column to the existing column array with the push() method
columns.push(adgColumn);
// set the AdvancedDataGrid columns to the array of columns
adg.columns = columns;
// Hide the Button
addColumnBtn.visible = false;
}

]]>
fx:Script>

<s:layout>
<s:VerticalLayout paddingLeft="5" paddingTop="5"/>
s:layout>

<s:Button id="addColumnBtn" click="addColumn()" label="Add Last Name Column"/>
<mx:AdvancedDataGrid id="adg" dataProvider="{ac}" width="450" height="250">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="firstname" headerText="Firstname"/>
mx:columns>
mx:AdvancedDataGrid>
s:Application>

How to make a magnetic button in Flex 4

Janez Feldin — Wed, 30 Jun 2010 21:26:54 +0000

Line Break

Author: Janez Feldin (3 Articles) - Author Website

Janez likes to experiment with flash in his own free time. His other hobbies are playing volleyball, listening to the music, watching movies and above all else, paragliding.

I have made a simple example on what most people refer to as magnetic (button) on the web. By extending the standard button you are able to do such a thing with Flex 4.

Finished result:

For this I have made a new class which extands spark button (you should extand the component you want to applay “magnetic” effect to it) and it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

package com.flexblog.components
{
import flash.events.MouseEvent;
import flash.ui.Mouse;

import mx.core.FlexGlobals;
import mx.events.FlexEvent;
import mx.events.MoveEvent;

import spark.components.Button;
import spark.effects.Move;
import spark.effects.easing.Elastic;

public class MagneticButton extends Button
{
// xAncor and yAncor determine the point to which
// the button returns when mouse cursor is too far away
[Bindable] public var xAncor:Number = 0;
[Bindable] public var yAncor:Number = 0;

// Distance on x axis which determine maximum
// distance from xAncor in one direction
[Bindable] public var xDist:Number = 100;

// Distance on y axis which determine maximum
// distance from yAncor in one direction
[Bindable] public var yDist:Number = 50;

// Property that makes transitions between different positions
private var _move:Move = new Move(this);

public function MagneticButton()
{
super();

/**
* Tries to add event listener for mouse move event to stage.
* If stage is null than adds event listener for application
* complete and than adds event listener for mouse move
*/
try
{
_move.easer = new Elastic();
_move.duration = 1500;

xAncor = this.x;
yAncor = this.y;
FlexGlobals.topLevelApplication.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move);
}
catch(e:Error)
{
FlexGlobals.topLevelApplication.addEventListener(FlexEvent.APPLICATION_COMPLETE, app_complete);
}
}

/**
* Function that is called when Main application is complete.
* It sets easer property and duration property for _move, set ancor
* of the button to the buttens current x and y position and as
* mentioned above adds an event listener for mouse move
*/
private function app_complete(e:FlexEvent):void
{
_move.easer = new Elastic();
_move.duration = 1500;

xAncor = this.x;
yAncor = this.y;

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouse_move);
}

/**
* Sets the ancor of the button and also move it to that position.
*/
public function setAncor(_x:Number,_y:Number):void
{
xAncor = _x;
yAncor = _y;
_move.xTo = _x;
_move.yTo = _y;
_move.play();
}

/**
* Function that actually calculates and moves the button to the right position.
*/
private function mouse_move(e:MouseEvent):void
{
// Some basic math logic to calculate if mouse cursor
// is close enough to move the button to that location
if ( Math.abs((xAncor + this.width/2) - stage.mouseX) < 2*xDist &&
Math.abs((yAncor + this.height/2) - stage.mouseY) < 2*yDist )
{
_move.xTo = stage.mouseX - this.width/2;
_move.yTo = stage.mouseY - this.height/2;
}
else
{
_move.xTo = xAncor;
_move.yTo = yAncor;
}
_move.play();
}
}
}

With this we have acctualy created new component and to use it we need to add that component to stage in our mxml component just like we would any other component.

Our main.mxml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:components="com.flexblog.components.*"
backgroundColor="#B9B9B9" width="500" height="300"
viewSourceURL="srcview/index.html">

<components:MagneticButton label="I am magnetic button"
x="100" y="50" xDist="50" yDist="30"/>
<components:MagneticButton label="I am also magnetic button"
x="300" y="50" xDist="50" yDist="30" />
<s:Button label="I am normal button" x="150" y="150"/>

s:Application>

Using ASDoc as an External Tool in Flash Builder 4

Arjan — Tue, 22 Jun 2010 09:34:57 +0000

Line Break

Author: Arjan (36 Articles) - Author Website

When developing Flex and AIR applications for clients / customers it’s always nice to deliver a structured structured Flash Builder project with well documented sources.

Similar to JavaDoc for Java, Actionscript has the opportunity to use a tool that generates HTML files in which you can navigate through all your project packages, ActionScript Classes and MXML files. ASDoc is essentially a command line tool, but you can configure Eclipse / Flash Builder in such a way that you can run ASDoc with a click of a button. This example show you how to do this.

Here is an example of what ASDoc can output for you:

Let’s configure Flash Builder so that we can do this with one click of a button!

First, open the external tools configuration in your Flash Builder and create a new configuration by clicking on the new launch configuration icon:

Set the following for the configuration values:

Location: Navigate to the asdoc.exe file on your filesystem. Its located in your SDK X.X.X\bin folder.

Working directory: Browse to the location of your project.

Arguments: -source-path src and -doc-sources src.

If you are using any external libraries (SWC files) in your project, you need to specify them as well (in my example, they are located in the libs folder in my project):

-external-library-path: libs

After that, you should see something like this:

Now you’re all set, you can generate ASDoc for your project by clicking the External Tools button in you Flash Builder.

This will automatically output all files to [your project location]\asdoc-output. When asdoc.exe finishes, open the index.html file to see the result.

For information how to comment your Classes, Methods, MXML Files and such, take a look at the ASDoc documentation from Adobe here.

Note: This example assumes that you are using the Flex 4 SDK, for all other SDKs you should pick the correct location of asdoc.exe on your filesystem to get it working for your project.

Flex Encryption (MD5, SHA1, SHA224, SHA256, HMAC)

Janez Feldin — Mon, 21 Jun 2010 10:58:13 +0000

Line Break

Author: Janez Feldin (3 Articles) - Author Website

Janez likes to experiment with flash in his own free time. His other hobbies are playing volleyball, listening to the music, watching movies and above all else, paragliding.

After a question on our flex forum about MD5 encryption, I decided to write an example about all the encryption types available in Flex.

Encryption is not available by default, you have to download the latest version of the (open source) project AS3corelib.

If you would like to encrypt a String with an MD5, you have the MD5 class in as3corelib-.92.1srccomadobecryptoMD5.as.

Import this class and than just call

1	MD5.hash("some string");

and there you go…

To show you every encryption method I’ve written this example.

Janez

No related posts.

The SWIZ framework for Flex 3 / Flex 4: Easy, Light and Very Powerfull

Arjan — Fri, 11 Jun 2010 14:41:28 +0000

Line Break

Author: Arjan (36 Articles) - Author Website

I recently followed a course about using the SWIZ framework with Flex (3 in the course). What i’ve found out is that SWIZ a very powerfull framework with a lot of really nice features to help you with your flex development.

Some of the best features of SWIZ:

- Light (unlike cairngorm and PureMVC)
- Easy
- Dependency Injection
- Event Mediation

I will post some examples using the SWIZ framework in combination with Flex 4 soon. Until then, check out the framework site and the SWIZ Wiki

SWIZ Framework in Flex 4 Example: Part I

Call Javascript function from Flex / Flash Builder (AS3)

Roelof — Fri, 07 May 2010 11:58:06 +0000

Line Break

Author: Roelof (11 Articles) - Author Website

Roelof is a SAP Consultant specialized in Front-End development. In his spare free time he is either developing on the web, playing basketball, watching soccer, travelling or just being lazy. He is also the co-owner of Flex-Blog.com.

This are actually two examples in one. First I will show how to call a Javascript function from your Flex Application. The second example will be a direct execution of Javascript code from your AS3.

Calling Javascript can be done easily using the ExternalInterface class. I have used this in my Flex Comment Form to refresh the screen after the comment is placed.

What’s possible?

ActionScript -> Javascript (HTML)

Call any JavaScript function (with any number of arguments, any names and any data types).
Receive a return value from the Javascript function.

Javascript (HTML) -> Actionscript

Call any ActionScript function (using the standard function notation).
Receive a return value from the ActionScript function.

Please note that you cannot use the ExternalInterface using AIR.

Example

I will start of with an example. I have added this Javascript function to the header of the HTML file generated with the release (view source).

1
2
3
4
5

This Javascript function will be called if you press on the button of the Flex component below.

Calling Javascript Function from Flex.

You probably wonder what Actionscript code is behind this. It’s actually very simple. I have created this function, which eventually calls the Javascript function with 1 parameter.

1
2
3
4
5
6
7
8
9

private function showJavascriptAlert():void {
var javascriptFunction:String = "myfunction";
var message:String = message.text;
if(ExternalInterface.available)
{
// call the javascript function!
ExternalInterface.call(javascriptFunction, message);
}
}

Calling Javascript from Flex (no function).

It is possible to create a Javascript function to call from your Flex Application, but it’s not necessary. Within Actionscript 3.0 it is possible to execute Javascript code directly. Sometimes it’s just overkill to create a complete Javascript function for something easy. Like for example showing an alert. This example is not using a JavaScript function.

Example 2

Here is the example. (use right mouse click -> View Source)

Source Code

1
2
3
4
5
6
7
8

private function showJavascriptAlert():void {
var message:String = message.text;
if(ExternalInterface.available)
{
// call the javascript function!
ExternalInterface.call("alert", message);
}
}

I did not write an example about calling ActionScript functions from JavaScript. If you would like to see that example leave a comment!

Flex FlashVars in AS3 Example

Roelof — Tue, 04 May 2010 12:54:33 +0000

Line Break

Author: Roelof (11 Articles) - Author Website

While building my WordPress Flash Comment Form in Flex / ActionScript 3.0 over the weekend I needed to find out how to use FlashVars to pass data to my SWF file.

In this small example I will show you how to pass them and how to handle them in your Flex application. And ofcourse a small example application (with view source enabled).

Example Application

Below is an example using FlashVars with View Source enabled. Complete source of the HTML and Flex application can be found below.

Continue reading for more implementation tips.

Passing FlashVars to your SWF

Adding SWF files to your HTML is not an easy job, at our examples we usualy embed the HTML file, that was generated when you release your project, in an Iframe. If you are using that solution, you should add your FlashVars as follows:

The source below is taken from FlashVarsExample.html, created with the release build of this example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

The flashvar called name will be available in your Flex application.

1	flashvars.name = "Flex-Blog Visitor";

The next option to embed your SWF is directly. For WordPress you have a great plugin called Kimili Flash Embed, this will generate the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Especially note this:

1	<param name="FlashVars" value="name=Flex-Blog.com Visitor">

So how to use the FlashVar in your Flex application?

In your application you have an Array available called:

1	this.parameters;

You can use it in your application as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="500" height="100"
initialize="init(event)" viewSourceURL="srcview/index.html">
<fx:Script>
[CDATA[
import mx.events.FlexEvent;

[Bindable] public var flashvarname:String;

protected function init(event:FlexEvent):void
{
var obj:Object = this.parameters;
flashvarname = obj.name;
}

]]>
fx:Script>

<s:Label text="Hello {flashvarname}" verticalAlign="middle" height="100%" width="100%" textAlign="center"/>
s:Application>

Please rate this post or leave a comment!

WordPress Flash / Flex Comments Form

Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction

Arjan — Fri, 30 Apr 2010 09:50:35 +0000

Line Break

Author: Arjan (36 Articles) - Author Website

I’ve written a few posts about the AdvancedDataGrid, including one where you can show a Tree inside of it. I’ve never written a post about the iconFunction though, so I thought it would be a good idea to do that. This post described how you can use a Tree in an AdvancedDataGrid where the Tree Node icons are dependant of XML node name and other data in the XML element.

In fact it’s quite straightforward, you just have to know how to do it. First, I will create some dummy XML data in my initialize method, from that data, I create an hierarchical data variable that I can use in my AdvancedDataGrid so that it shows a Tree.

Some variables we need:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import mx.collections.HierarchicalData;

[Bindable]
private var dataHierarchy:HierarchicalData;

[Embed(source="assets/dialog-error.png")]
private var iconError:Class;

[Embed(source="assets/dialog-warning.png")]
private var iconWarning:Class;

[Embed(source="assets/weather-clear.png")]
private var iconClear:Class;

[Embed(source="assets/office.png")]
private var iconOffice:Class;

The initialize method:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

private function init():void
{
var i:int;
// Root Node: Corporate Finance
var xmlData:XML = <Finance>Finance>;
xmlData.@itemName = "Corporate Finance";
// Sales node
var sales:XML = <Sales>Sales>;
sales.@itemName = "Corporate Sales";
// Expenses Node
var expenses:XML = <Expenses>Expenses>;
expenses.@itemName = "Corporate Expenses";

// Append Sales and Expenses to Coporate finance
xmlData.appendChild(sales);
xmlData.appendChild(expenses);

var salesItem:XML;

// Add some random sales items
for( i=0; i<5; i++)
{
salesItem = new XML(<item>item>);
salesItem.@amount = Math.round(Math.random() * 100000);
salesItem.@itemName = "Random Sale " + i;
sales.appendChild(salesItem);
}

// Add some random expense items
var expensesItem:XML;
for( i=0; i<5; i++)
{
expensesItem = new XML(<item>item>);
expensesItem.@amount = Math.round(Math.random() * 100000);
expensesItem.@itemName = "Random Expense " + i;
expenses.appendChild(expensesItem);
}
// Greate hierarchy based on created XML
dataHierarchy = new HierarchicalData(xmlData);
}

Now they very simple layout:

1
2
3
4
5
6
7
8
9
10

<s:Button label="Generate New Data" click="init()"/>

<mx:AdvancedDataGrid id="adg" width="100%" height="100%"
dataProvider="{dataHierarchy}" iconFunction="iconFunction">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Finance" width="350"
labelFunction="labelFunction"/>
<mx:AdvancedDataGridColumn headerText="Amount" dataField="@amount" width="150"/>
mx:columns>
mx:AdvancedDataGrid>

The label function (declared on the first AdvancedDataGridColumn, to return the node name):

1
2
3
4
5

private function labelFunction(item:XML, col:AdvancedDataGridColumn):String
{
// Return itemName as the label for the node
return item.@itemName;
}

And last but not least, the icon function to return the icon depending on node name and other data (read comments in source for explanation):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

private function iconFunction(item:XML):Class
{
var parentName:String;
var parentNode:XML;
parentNode = item.parent();

// Return office icon if node name not equal to item
if( item.name() != "item" )
{
return iconOffice;
}

// Check if parent not null
if (parentNode != null ){
// Get parent name
parentName = parentNode.name();

// Sales below 30000: return error icon
// Expenses below 30000: return clear icon
if( item.@amount < 30000 )
{
return parentName == "Sales" ? iconError : iconClear;
}
// Warning icon: the same threshold for both cases
else if ( item.@amount < 60000 )
{
return iconWarning;
}
// amount is greater than 60000, return clear if sales
// and error if Expenses
else
{
return parentName == "Sales" ? iconClear : iconError;
}
}
// default if none of the above apply
return iconOffice;
}

That’s it! Here’s the sample application followed by the complete source code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
initialize="init()" width="500" height="400"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600" viewSourceURL="srcview/index.html">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5"/>
s:layout>
<fx:Script>
[CDATA[
import mx.collections.HierarchicalData;

[Bindable]
private var dataHierarchy:HierarchicalData;

[Embed(source="assets/dialog-error.png")]
private var iconError:Class;

[Embed(source="assets/dialog-warning.png")]
private var iconWarning:Class;

[Embed(source="assets/weather-clear.png")]
private var iconClear:Class;

[Embed(source="assets/office.png")]
private var iconOffice:Class;

private function init():void
{
var i:int;
// Root Node: Corporate Finance
var xmlData:XML = <Finance>Finance>;
xmlData.@itemName = "Corporate Finance";
// Sales node
var sales:XML = <Sales>Sales>;
sales.@itemName = "Corporate Sales";
// Expenses Node
var expenses:XML = <Expenses>Expenses>;
expenses.@itemName = "Corporate Expenses";

// Append Sales and Expenses to Coporate finance
xmlData.appendChild(sales);
xmlData.appendChild(expenses);

var salesItem:XML;

// Add some random sales items
for( i=0; i<5; i++)
{
salesItem = new XML(<item>item>);
salesItem.@amount = Math.round(Math.random() * 100000);
salesItem.@itemName = "Random Sale " + i;
sales.appendChild(salesItem);
}

// Add some random expense items
var expensesItem:XML;
for( i=0; i<5; i++)
{
expensesItem = new XML(<item>item>);
expensesItem.@amount = Math.round(Math.random() * 100000);
expensesItem.@itemName = "Random Expense " + i;
expenses.appendChild(expensesItem);
}
// Greate hierarchy based on created XML
dataHierarchy = new HierarchicalData(xmlData);
}

private function labelFunction(item:XML, col:AdvancedDataGridColumn):String
{
// Return itemName as the label for the node
return item.@itemName;
}

private function iconFunction(item:XML):Class
{
var parentName:String;
var parentNode:XML;
parentNode = item.parent();

// Return office icon if node name not equal to item
if( item.name() != "item" )
{
return iconOffice;
}

// Check if parent not null
if (parentNode != null ){
// Get parent name
parentName = parentNode.name();

// Sales below 30000: return error icon
// Expenses below 30000: return clear icon
if( item.@amount < 30000 )
{
return parentName == "Sales" ? iconError : iconClear;
}
// Warning icon: the same threshold for both cases
else if ( item.@amount < 60000 )
{
return iconWarning;
}
// amount is greater than 60000, return clear if sales
// and error if Expenses
else
{
return parentName == "Sales" ? iconClear : iconError;
}
}
// default if none of the above apply
return iconOffice;
}

]]>
fx:Script>

<s:Button label="Generate New Data" click="init()"/>

<mx:AdvancedDataGrid id="adg" width="100%" height="100%"
dataProvider="{dataHierarchy}" iconFunction="iconFunction">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Finance" width="350"
labelFunction="labelFunction"/>
<mx:AdvancedDataGridColumn headerText="Amount" dataField="@amount" width="150"/>
mx:columns>
mx:AdvancedDataGrid>

s:Application>

WordPress Flash / Flex Comments Form

Roelof — Wed, 28 Apr 2010 17:22:35 +0000

Line Break

Author: Roelof (11 Articles) - Author Website

This post is not an example, but a showcase! As you’ve seen, we have been creating WordPress Plugins in Flex for a while now, which you can download for free.

While creating these plugins, we have learned that Flex and WordPress are a powerful combination, which we should use more often. A while ago, I was looking at our website, and saw our comment form, which was not really impressing me. So I started creating one in Flex.

Some technical info:

The comment form was created in Flash Builder 4.
The panel look was changed using Skinning.
We receive WordPress data through Flashvars.
We post data via a HTTPService.
We refresh the screen using Javascript (ExternalInterface).
Gravatar support, using the gravatar api. (which uses an MD5 hash of the emailaddress)

Check this great Flex & WordPress Showcase underneath every post. Let us know what you think about it! If you like it we might make a WordPress Plugin for it!

This showcase gave me a lot of inspiration for more examples on Flex Blog. Oh and btw, leave a comment !