Flash Components - Articles - From Flash to Flex: Creating ActionScript Components for Flex

categories component_categories

top authors featured authors

see more

newsletter

Subscribe to our newsletter:

Go To

Articles list

Posted by : khadlock on 12/28/2007

Do you want to develop applications more quickly, write cleaner code, and use external sources as the data that drives your applications? Kris Hadlock explains how to create an ActionScript component for Flex by using XML as a data source to offer reusability in your Flex applications. The Flash to Flex series has covered the basic creation of a Flex project and making a move to ActionScript 3 (AS3). In this article we will take a deeper look at class creation in Flex and learn how to develop a reusable component for displaying and rotating headlines in any Flex application. The source code for the example in this article can be downloaded here.

Defining an XML Structure

When creating an XML-driven component, the first logical step is to define the XML structure that it will request so we can understand how to parse it. In this example, we will create a component that rotates between multiple headlines and displays them as hyperlinks that we define the URLs for. Listing 1 shows an example of the XML structure that we will use in the component.

Listing 1: XML structure for headlines

<b>

<headlines>

<headline action="http://www.studiosedition.com">

<!--[CDATA[Visit Studio Sedition]]-->

</headline>

<headline action="http://www.studiosedition.com/articles">

<!--[CDATA[View all of my articles]]-->

</headline>

</headlines>

</b>

The structure has the capability to add multiple headlines as CDATA to enable HTML rendering, and each headline has an action attribute that points to a URL. Now that we have our XML structure, let's start creating our component.

Extending the UIComponent

Creating a component starts with the creation of a class that extends the UIComponent.
NOTE: "If you aren' t sure how to create a class in AS3, refer to the last article in the Flash to Flex series, "From Flash to Flex: Moving to ActionScript 3."
The name of the class that we will create is Headline. The Headline constructor will take a filename for the XML file and a delay for the time between rotating to each headline. When the Headline is initiated, the delay is set to a class property for later retrieval, and the filename is requested via the URLRequest object. Once the request object is created, a URLLoader is instantiated, the request is loaded, and the completion of the request is listened for. After the complete event is fired, the onResponse method is called, and the headlines are parsed. To use the headlines in a later method, a headline array is created with the headline text as hyperlinks that point to the action attribute from the XML file. With an array of headlines, the rotation cycle can begin. A method named cycle will handle the rotation in this class and it will initiate with the first index in the headlines array. The cycle method first checks to see whether an existing headline textfield exists - if one does, it is removed. Then a new textfield for the current headline is created by using a custom method called createTextField, which sets the x, y, width, height, and formatting; and adds the textfield. After a textfield is created, the current headline is added to it as HTML, and the setTimeout method is set to the delay that was passed to the constructor. The next index is passed to display the next headline in the array, unless the last headline has been reached - in this case, the index is set back to 0. Take a look at Listing 2 to see the entire Headline class.

Listing 2: Completed Headline class

  package com.studiosedition.view

{

   import flash.events.Event;

   import flash.net.URLLoader;

   import flash.net.URLRequest;

   import flash.text.TextField;

   import flash.text.TextFormat;

   import mx.core.UIComponent;

   import flash.utils.*;

     public class Headline extends UIComponent

   {  

     private var headlines:Array = new Array();

     private var currentTextField:TextField;

     private var delay:Number;

     private var __cycleTimeout:uint;

    

       public function Headline(filename:String, delay:Number):void

       {

          this.delay = delay;

          var request:URLRequest = new URLRequest(filename);

          var loader:URLLoader = new URLLoader();

          loader.load(request);

          loader.addEventListener(Event.COMPLETE, onResponse);

       }



       private function onResponse(event:Event):void

       {

        var loader:URLLoader = event.target as URLLoader;

  

        var _xml:XML = new XML(loader.data);

       var _headlines:XMLList = _xml.child('headline');

       for(var i:int=0; i<_headlines.length(); i++)

       {

          this.headlines.push('<a href="'+ _headlines[i].attribute("action") +'" target="_blank">'+ _headlines[i].text() +'</a>');

       }

       this.cycle(0);

       }



       private function cycle(index:Number):void

       {

          if(this.currentTextField != null) removeChild(this.currentTextField);

          this.currentTextField = this.createTextField(0, 0, 200, 100);

          this.currentTextField.htmlText = this.headlines[index];



          if(index == (this.headlines.length-1)) index = 0;

          else index++;



          if(this.__cycleTimeout != 0) clearTimeout(this.__cycleTimeout);

          this.__cycleTimeout = setTimeout(cycle, (this.delay*1000), index);

      }



       private function createTextField(x:Number, y:Number, width:Number, height:Number):TextField

       {

       var format:TextFormat = new TextFormat();

       format.font = "Arial";

       format.color = 0x333333;

       format.size = 21;

       format.underline = true;

       

       var txtField:TextField = new TextField();

       txtField.x = x; txtField.y = y;

       txtField.width = width; txtField.height = height;

       txtField.autoSize = "left";

       txtField.defaultTextFormat = format;

       

       addChild(txtField);

       return txtField;

     }



   }

 }

Tying It Together

With the XML structure and component created, all that needs to be done is to tie it together in the MXML file. Listing 3 shows how this is done by adding a new Headline when the creationComplete event of the document is fired.

Listing 3: Tying it all together
<mx:application creationcomplete="addHeadline();" backgroundcolor="#ffffff" layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:script>  </mx:script> </mx:application>

Getting More Depth

To get more depth on the subject, I recommend looking into the classes that were imported into the Headline class and the methods that they contain. It might seem like an obvious answer, but a lot can be learned by simply studying the API of a programming language.