Use the Flex Framework with the Least MXML Possible

Mon Feb 15 00:54:09 2010

Using the Flex Framework is great tool to have if you know what you're doing. Sadly, not everyone has the time to put in the extra man hours to learn it, although I would thoroughly recommend trying to do so if you had the chance, as it can speed up your workflow immensely and there are so many pre-made components out there that you are really spoiled for choice.

In any regard, this post is mainly for those people who want to know how they can import components such as the ComboBox, Button, and the infamous DataGrid, and all with the minimum amount of MXML possible. However, I would just like to say before I go any further that it is probably a lot faster and easier in most cases just to learn that little bit of MXML than by doing it all in ActionScript alone... and believe me, being a big ActionScript fan, I was one of the ones who just didn't want to let go either. Anyhow, with all that said, let's get coding.

To my current knowledge, there are a few ways of getting this to work. In this post I will run through what I think is the best way of doing it. First off, you will need to create an MXML file. All files after this one can be ActionScript files, but the main project file must be a MXML file. Inside that file, you will need to place the following code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute"

I have set the layout to absolute since this will enable you to put your objects anywhere on the screen. Note that there are two more properties that you can play with; vertical and horizontal, which I won't go into now, but Flash coders for example will probably feel most at home with absolute layout.

The important thing to remember for this file is that when importing you own classes, you have to set the location so that flex can find it. I have used xmlns:classLocation="*", the * [hash] of which simply denotes 'root level', or the place where the MXML file exists. Alot of flex coders put their custom classes or components inside a folder called components and so they would use xmlns:classLocation="components.*". Finally on line 5 we call out custom class/component using classLocation:myClassName/>. The actual class name is determined in place of 'myClassName'.

Next create an ActionScript file as you would normally. The code below can be used for quick reference.

   import mx.core.*;
   import mx.controls.*;	

   public class Main {

      public function Main(){
         var app:Object = FlexGlobals.topLevelApplication;
         var l:Label = new Label();
         l.text = "Minimum MXML";

The code above simply places a label on the stage and sets the text to "Minimum MXML". The important thing to remember here is that in most cases you will need to set a reference to the FlexGlobals.toplevelapplication in order to add things to the display list, which is something I discovered recently after the move from Flex 3 to the Flex 4 SDK. On line 9 of the code above, I have created a variable called app, datatyped it to an Object and set it to FlexGlobals.toplevelapplication. Now each time I add something to the stage, I use app as a reference as seen on line 11.

And that's it. Compile the MXML file and you should see the words "Minimum MXML". If you aren't sure on how to compile MXML and ActionScript, take a look at one of my previous posts Compile AS files with Flex SDK

If you would like to download the example files for this post, you can get them from the link below.

Download Minimum MXML files

**Remember though, I do recommend learning a little MXML if that's why you are looking for this information. Don't fight it! You know that you want it really.

Passing Serialized Arrays Between PHP Pages

Fri Feb 12 05:58:43 2010

Passing arrays between pages can be a useful thing to know, particularly when you feel data is a little too long to stick inside a url and use $_GET[]. That is not to say that this is the best way of doing it. I am quite sure that there are many coders out there just shouting about a better method, or about the does and don'ts of PHP, but this, as I say, is good to know. So here goes...

First off, we need an array to pass. I will be using the one below as an example.

$arrayToSerialize = array("key1"=>"value1","key2"=>"value2","key3"=>"value3");
As you can see, it is an associative array with keys and values. To serialized the array simply call the serialized() method and pass in the array name, as in the following example. Note that I have used the variable $serializedArray to store the serialized data.

$serializedArray = serialize($arrayToSerialize);
Now we create a form to send the serialized data on a submit button click as follows.

<form action="unserialize.php" method="post">

      <input type="hidden" id="serializedArray" name="serializedArray" 
         value='<?php echo $serializedArray;?>'/>

      <input type="submit" value="Continue;">
The action of the form above points to a file we will create next called unserialize.php. The method is set to post as we will be sending the data. Inside the form, there is a hidden input which will store and pass the data on to the unserialize.php file. The name of the hidden input is set to 'serializedArray' which we will need to remember for later. Lastly, inside the form also resides the submit button that will trigger the form and send the data.

Next we need to create a file called unserialize.php as we mentioned earlier. Inside that file we write the following.

$serializedArray = $_REQUEST["serializedArray"]; 
$unserializedArray = unserialize(stripslashes($serializedArray));  
The code above captures the serialized data in a variable again called $serializedArray. Notice that the name of the hidden input inside serialize.php is placed inside a server $_REQUEST[] to retrived the data. In the line after that the data is unserialized with the unserialize() method call, passing in the $serializedArray variable. The unserialized data is them stored in another variable called $unserializedArray. The $unserializedArrayvariable can now be used as any other array. If you use print_r($unserializedArray), you will notice the results shown below are the same as the original array passed from serialized.php.

Results of print_r($unserializedArray) :

Array ( [key1] => value1 [key2] => value2 [key3] => value3 )

I have put together a quick example which you can download from the link below.

Download Serialize Array Example

Migrating From FLEX 3 to FLEX 4: FlexGlobals.topLevelApplica

Sun Feb 7 04:16:48 2010

Today I cam across an interesting problem while working with the new Flex 4 SDK. I kept getting the following error.

Warning: 'application' has been deprecated since 4.0.  
Please use 'FlexGlobals.topLevelApplication'.

Naturally, I had no idea what this meant until I did a little research. Apparently, an application runs in its own ApplicationDomain which in turn has it's own topLevelApplication. Thus, you have to set the correct reference to the constructor of said top level application in order to get rid of the warning.

Replace this...
var mxmlApp:Application = Application(Application.application);
with this...
var mxmlApp:Object = FlexGlobals.topLevelApplication;
...and the sun will shine once more.

Easy ActionScript Chain Events

Fri Feb 5 15:19:45 2010

Ok, so this week I have been playing around with events and building all kinds of useless applications... and all while trying to further my education in the Flex Framework and Papervision 3D, which is all going ever so slowly. However, something interesting came from all my futility when I created a class that would pass multiple EventListeners together in a single sentence, giving you something that resembles the functionality of jQuery, albeit a lot less advanced. Allow me to explain...

FIrst of all, this class requires instantiation. Therefore, you will need the following import statement and the call for instantiation.

import Bind;
private var bind:Bind = new Bind();

Ok, so now that we have our Bind class ready, next we need something to test it on. Let's make a quick button.

var btn:MovieClip = new MovieClip();, 0xffffff, .5);;,0,100,30, 10);;
btn.mouseChildren = false;

var btnTxt:TextField = new TextField();
btnTxt.text = "Button";
var format:TextFormat = new TextFormat("Courier", 16, 0x333333);
btnTxt.autoSize = TextFieldAutoSize.LEFT;
btnTxt.x = btn.width/2-btnTxt.width/2;
btnTxt.y = btn.height/2-btnTxt.height/2;
btn.x = btn.y = 10;

Nothing special so far. Basically, all this code does is makes a slightly rounded rectangle and puts some text in it with the label 'Button'. We also set a TextFormat to set the style of the text and move the entire button 10px from top and left of the screen, just so we can see it properly.

Now, if we call the following code, the button will come to life.

bind.bind(btn,{over:overHandler, out:outHandler, click:clickHanlder});

private function overHandler(event:MouseEvent):void{
   //do something

private function outHandler(event:MouseEvent):void{
   //do something

private function clickHandler(event:MouseEvent):void{
   // do something

Ordinarily you would write this...
btn.addEventListener(MouseEvent.CLICK, clickHandler);
btn.addEventListener(MouseEvent.MOUSE_OVER, overHandler);
btn.addEventListener(MouseEvent.MOUSE_OUT, outHandler);
instead of this...
bind.bind(btn,{over:overHandler, out:outHandler, click:clickHanlder});

Quick example

The following example simply shows that in one line of code, you can add a remove multiple listeners from an object. Get Adobe Flash player

As you may see, the bind method allows you to string together Events and MouseEvents in one single sentence in the form of an object. Other parameters include "down" (MOUSE_DOWN"), "up" (MOUSE_UP), "move" (MOUSE_MOVE), "doubleClick (DOUBLE_CLICK), added (ADDED_TO_STAGE), enterFrame (ENTER_FRAME).

In addition to the bind method. there is an unbind method. If bind works the same as addEventListener, then unbind would be it's removeEventListener. In fact, not too surprising is the fact that both methods call add/removeEventListener.

I will try to update this class if I feel it is worth continuing, in which I case will write the version alongside the download below. It is currently version 1.0. If that is a different number to the one shown on the download link, then you will know I have updated it. On the other hand, I may never update it. In either case, I hope you enjoy it. I really don't expect you to use it in the place of addEventListener, but it should be good educational material.

Anyway, that's all for now, so get downloading it and see what you think.

Download (Version 1.0) Class here

Update to Clock Class

Tue Jan 26 08:57:45 2010

Get Adobe Flash player

This is just to let you know that I have updated the DigitalClock class that I posted a little while back. The class is now called simply New functions include clockAnalogue() and clockDigital(). Just take a look below to see how to use them.

import Clock;

var clockAnalogue:Clock = new Clock();
var clockDigital:Clock = new Clock();

clockAnalogue.tickAnalogue(hourhand, minuteHand, secondHand, true);
clockDigital.tickDigital(textField, textFormat, true);

In the above code, we first import the Clock class and make two instances of it. One called clockAnalogue and the other clockDigital. These names can be anything you like.

Next we call the tickAnalogue function on the clockAnalogue instance. On the instance clockDigital, we call the tickDigital method. tickAnalogue and tickDigital tell the clock class whether it will be an Analogue or Digital style clock.

tickAnalogue takes four parameters, the first 3 are mandatory MovieClips and the last parameter is optional. The first paremeter represents the hour hand, the second the minute hand, and the third represents the seconds Hand. You can draw these just in code or create them in Flash, and then just pass them in.
The fourth and final parementer is just a Boolean. Setting it to true gives you GMT time. false gives you local time.

The tickDigital method takes 3 paremeters. The last of which is a Boolean and sets GMT or local time in the same way that it does in the tickAnalogue method. The first parameter takes the TextField that will display the time. The second takes a TextFormat to style the time.

..and that's it folks. Again, I hope you find this useful.

Download the Class here

Most recent posts

  1. Getting around Apple's silly rules for iOS 10
  2. Localising App Names for iOS and Android
  3. Today - Powerful To-Do App Now Available on iOS & Android
  4. New app 'Gem Plinko' Released on iOS
  5. Spooktacular Creeps For iOS & Android

Search site:

Apps by

Click the app icons to see more info