Alain Hufkens {Rich Interactive Applications Developer}

3Jun/090

Flex 4: Create a simple Unit Test in Flash Builder

One of the new features of Flash Builder is the support for FlexUnit (the Unit testing framework for Flex applications). You could use FlexUnit in the past, but as from Flash Builder it's a piece of cake to create Test classes for your own code. You just need to follow these simple steps.

NOTE: This demo needs the latest beta version of Flash Builder. Be aware that this is still a beta version and the following could still change in future versions of Flash Builder.

Before we start we need to create a new Flex Project. After creating your project you need to create a class with some functionality that we can use in this example. The typical classes to unit test are classes that have a public interface and have a complicated implementation. When you change something inside the class implementation, the public methods still works as expected. But for the sake of simplicity we will create a very simple class with some simple behaviour.

package net.hufkens
{
  /**
   * Class that does something.
   *
   * @author alain
   *
   */

  public class MyObject
  {
    /**
     * The constructor
     */
 
    public function MyObject()
    {
    }
   
    /**
     * Returns the numeric vallue five
     * @return 5
     */
 
    public function giveMeFive():int
    {
      return 5;
    }
   
    /**
     * Returns the letter A
     * @return "A"
     */
 
    public function sayA():String
    {
      return "B";
    }
   
    /**
     * Returns always true
     * @return true
     */
 
    public function alwaysTrue():Boolean
    {
      return true;
    }
  }
}

Alright, now we have a Class that we can test. To create a new Unit Test you select New > TestCase Class and the following window should appear:

New Test Case Class

Enter the Name of the TestCase Class (in this case: MyTestClass), select the Class to test (in this case: MyObject) and select Finish. Flash Builder now generates several items. First a new folder name flexUnitTests is generated. Also a new mxml file named flexUnitCompilerApplication.mxml is generated. This file is necessary because the Unit Tests need a swf application that can be started and the tests can be executed. The last and most important file that's been generated is the TestCase itself. The only thing you now need to do is implement the actual test methods. In the following code example the test methods are implemented:

package flexUnitTests
{
  import flexunit.framework.Assert;
  import flexunit.framework.TestCase;
 
  import net.hufkens.MyObject;

  public class MyTestClass extends TestCase
  {
    // Reference declaration for class to test
    private var classToTestRef : net.hufkens.MyObject;
   
    public function MyTestClass(methodName:String=null)
    {
      super(methodName);
    }
   
    //This method will be called before every test function
    override public function setUp():void
    {
      super.setUp();
      classToTestRef = new MyObject();
    }
   
    //This method will be called after every test function
    override public function tearDown():void
    {
      super.tearDown();
    }
   
    public function testGiveMeFive():void
    {
      Assert.assertEquals(classToTestRef.giveMeFive(), 5);
    }
   
    public function testSayA():void
    {
      Assert.assertEquals(classToTestRef.sayA(), "A");
    }
   
    public function testIsTrue():void
    {
      Assert.assertTrue(classToTestRef.alwaysTrue());
    }

  }
}

If we now right-click the project and select Execute FlexUnit Tests we get the following message:

FlexUnit warning message

It says we need to create a Test Suite, otherwise Flash Builder can't execute the tests. To create a new Test Suite you select New > TestSuite Class and the following window should appear:

New TestSuite Class

Now select Execute FlexUnit Tests again and your Test are executed. As you can see, one of the tests has failed. A quick view in the source of sayA() method reveals the problem. Fix the problem and all the tests should succeed now.

Unit Test Results

That's all there is to it. Flash Builder makes it a lot easier to create Unit Tests for your libraries and components. This is a good thing, so you should definitely check it out.

Filed under: flex No Comments
1Jun/090

Flex 4: DataGroup and ItemRenderers

fbbuilderToday the beta's of Flash Catalyst and Flash Builder became available for download on Adobe Labs. This means that we can now start to play with the new Flex 4 SDK. There has been some controversy lateley about the pro's and cons of Flex namespaces. I was in the pro camp as you can see in this post I made some time ago. But enough about this discussion ;)

If you want to have more information about the new Flex 4 SDK and what has changed you can go to the following articles:

For my first blog post about Flex 4 I want to show you one of the new components, and that's the spark.components.DataGroup component. Why? Because I have been using the old mx.core.Repeater a lot and there is no repeater in the new spark components.

In the old days of Flex 3 you could use the Repeater class when you needed a very specific view for customizing a list of data. It would look something like this:

<mx:VBox>
    <mx:Repeater id="myRepeater">
        <mx:dataProvider>
            <local:Person firstName="Alain" lastName="Hufkens"/>
            <local:Person firstName="Hugh" lastName="Hefner"/>
            <local:Person firstName="Jimi" lastName="Hendrix"/>
        </mx:dataProvider>
        <mx:HBox>
            <mx:Label text="{myRepeater.currentItem.firstName}"/>
            <mx:Label text="{myRepeater.currentItem.lastName}"/>
        </mx:HBox>
    </mx:Repeater>
</mx:VBox>

This example here is pretty simple, but it gives you a list that displays the persons showing the first and last name. You could extend this with the person's photo or address.

With the new DataGroup component you need a different approach and you need to work with ItemRenderers, something that already existed in the Flex 3 SDK. The next code snippets show you how to do this:

The first example uses the spark.skins.default.DefaultItemRenderer that can be used for very simple lists. By default the list outputs the toString() of an Object or in this example shows the String from the DataProvider.

<s:DataGroup itemRenderer="spark.skins.default.DefaultItemRenderer">
    <s:layout>
        <s:VerticalLayout gap="1" />
    </s:layout>
    <s:dataProvider>
        <s:ArrayCollection>
            <fx:String>Frog</fx:String>
            <fx:String>Cat</fx:String>
            <fx:String>Mouse</fx:String>
        </s:ArrayCollection>
    </s:dataProvider>
</s:DataGroup>

The next example uses the spark.skins.default.DefaultComplexItemRenderer. This ItemRenderer renders different Graphical and complex components. You can have a Component like a Button, DropDownList, ... next to a graphical object like a Rect, Ellipse, ... next to each other.

<fx:Declarations>
    <s:SolidColor id="fillColor" color="#fff000"/>
</fx:Declarations>

<s:DataGroup itemRenderer="spark.skins.default.DefaultComplexItemRenderer">
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <s:dataProvider>
        <s:ArrayCollection>
            <s:Button label="Button" />
            <s:Rect fill="{fillColor}" width="20" height="20"/>
            <s:Ellipse fill="{fillColor}" width="20" height="20"/>
            <s:DropDownList />
        </s:ArrayCollection>
    </s:dataProvider>
</s:DataGroup>

That's all pretty cool but it's not what I needed. I just needed something that can present my Person object. So in this case we need to create a Custom ItemRenderer. This is a very easy thing to do and the end result is a lot better then the Repeater solution.

<s:DataGroup itemRenderer="PersonItemRenderer">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <s:dataProvider>
        <s:ArrayCollection>
            <local:Person firstName="Alain" lastName="Hufkens"/>
            <local:Person firstName="Hugh" lastName="Hefner"/>
            <local:Person firstName="Jimi" lastName="Hendrix"/>
        </s:ArrayCollection>
    </s:dataProvider>
</s:DataGroup>

And this is the code for the PersonItemRenderer:

<s:ItemRenderer
 xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/halo">
 
  <fx:Declarations>
  <s:SolidColor id="normalColor" color="#000000"/>
  <s:SolidColor id="hoveredColor" color="#FF0000"/>
  </fx:Declarations>
 
  <s:states>
    <s:State name="normal"/>
    <s:State name="hovered"/>
  </s:states>
 
  <s:layout>
    <s:HorizontalLayout/>
  </s:layout>
 
  <s:Ellipse fill="{normalColor}" fill.hovered="{hoveredColor}"
      width="10" height="10" />
  <s:SimpleText text="{data.firstName} {data.lastName}"
      color.hovered="#FF0000"/>
 
</s:ItemRenderer>

You can see the demo (including source) here.

Filed under: flex No Comments
14Feb/090

Fx prefix will go away

fx-gumboYesterday Adobe decided to remove the Fx prefix from the new Flex 4 (aka Gumbo) components. The debate was whether components in the next version of Flex should all start with the letters “Fx” or use namespaces to resolve possible conflicts with legacy components like Button, Panel and ScrollBar. After playing around with the new Flex components, it felt a little strange to use for example a FxButton for the new stuff because in the end it just a button. In other language has been be solved using namespaces so why not keep it clean and use a specific namespace for one architecture and another one for the new.

The Flex SDK team has decided and is going for the multiple namespace solution. Read more about this in this topic: "Kittens saved, Fx prefix will go away". The cool thing is that when the topic came up for debate Adobe asked the community for input in this forum post. So now that's out of the way I can't wait using Flex 4.

Filed under: flex No Comments
3Sep/080

Flex 4 Gumbo: Hello World :)

Yesterday I downloaded an installed the latest stable build of Flex 4 “Gumbo”. After configuring and installing Flash Player 10, I was able to create my first Flex 4 app. It is only a Hello World kind of application but it shows you the new FXG format for graphics.

When you wanted to add some shape in a Flex project you always needed to go back to Flash and create objects that can be used in Flex. With the FXG you can  now declare shapes using XML. The specification documentation says the following:

FXG 1.0 describes an XML-based graphics interchange format for the Flash Platform. FXG contains high-level graphical and text primitives that can be used to create, group, transform and visually modify basic vector and bitmap shapes.

One of the basic concepts of FXG are graphical objects. FXG provides a general Path element that is used to create a bunch of graphical objects like Ellipses and Rectangles. There are three other concepts and you can read more about it here. For now I’ll stick to playing with the new graphical objects.

FXG supports shapes like Rectangle, Ellipse, Path and these shapes can be filled or stroked. This small example shows a Rectangle with a Stroke and a Fill:

<Rect width="200" height="200">
   <fill>
      <SolidColor color="#FF0000" />
   </fill>
   <stroke>
      <SolidColorStroke weight="10" color="#0000FF" alpha="0.5" />
   </stroke>
</Rect>

This is actually what Silverlight can already do right now with XAML, and why there already exists a tool like Expression Blend. When Flex 4 will be released the integration with design tools (like Thermo) will be a lot easier, at least thats what they are aiming for.

To conclude here is my first go at "Gumbo". It is an ugly smiley, so don't shoot me because I am just a developer and not a designer.

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009"
            xmlns:mx="library:adobe/flex/halo"    
            xmlns:gumbo="library:adobe/flex/gumbo">
   
    <gumbo:Group>
        <gumbo:content>      
            <gumbo:Ellipse width="200" height="200">
                <gumbo:fill>
                    <mx:SolidColor color="#FFFF00" />              
                </gumbo:fill>
                <gumbo:stroke>
                    <mx:Stroke color="#000000" weight="2"/>  
                </gumbo:stroke>
            </gumbo:Ellipse>          
            <gumbo:Ellipse x="50" y="50" width="25" height="25">
                <gumbo:fill>
                    <mx:SolidColor color="#000000" />              
                </gumbo:fill>            
            </gumbo:Ellipse>          
            <gumbo:Ellipse x="125" y="50" width="25" height="25">
                <gumbo:fill>
                    <mx:SolidColor color="#000000" />              
                </gumbo:fill>            
            </gumbo:Ellipse>          
            <mx:Path left="50" top="125" data="Q 50 50 100 0">  
                <mx:stroke>
                    <mx:SolidColorStroke color="#000000" weight="5"/>
                </mx:stroke>          
            </mx:Path>
        </gumbo:content>
    </gumbo:Group>  
</Application>

Click here to see the smiley (you will need to have the Flash Player 10 installed to see it).

Filed under: air, flex No Comments
2Sep/080

Upgrading to Flex 3.1

A couple of weeks ago Adobe release a new version of Flex (version 3.1). The new version contains several bug fixes, but also official support for Adobe AIR 1.1 which was also released a some time ago. Upgrading your Flex SDK is not very hard, you just need to download the zip file that contains the new SDK and configure Flexbuilder so that you can start using it. While writing this I am also downloading the Flex4 Gumbo release, and I am looking forward to check it out.

Just follow these steps to install a new SDK in your Flexbuilder:

  • Download the new SDK: version 3.1
  • Unzip the downloaded file.
  • Open Flexbuilder and go to Window > Preferences > Flex > Installed Flex SDKs
  • Click "Add..." and point the SDK location to the directory where you extracted the zipfile.
  • And now select version 3.1 as your default SDK.
  • That's it.
Filed under: air, flex No Comments