- Defining an XML Structure
- Extending the UIComponent
- Tying It Together
- Getting More Depth
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Extending the UIComponent
Creating a component starts with the creation of a class that extends the UIComponent.
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;
}
}
}