Custom Components

Flex like Flash and any other object-oriented language lets you extend objects to create your own custom objects. Flex is a little different than most in that many of the available objects are display objects so your creation can not only be used but it can be seen and interacted with.

On the old Mamma's Hands website the links on the left while they looked like <ul> list items with their fancy bullets they were really just text links with a bullet image placed before them. With Flash you are somewhat confined to a set number of components to use on your site, these components are a lot more full-featured than anything available to the html developer but you have to be a little bit more methodical in your development. In order to make the links the same as they were on the old site I decided to create a custom component that just took the name of the page listed and handled the rest of the formatting for me.

So I initially created an mxml object but then discovered this is really best used for static objects, or predefined components that you will throw in when needed, not components needing a lot of flexibility. So an actionscript 3 class that extended the hbox container was the basis for my little experiement. First I imported the other objects I would be using namely the LinkButton component and the Image component only to find out that flex will add that for you automatically as I added those kinds of objects to the class. Then I added the bullet image, by creating the image component and then setting the source of the image and adding the image as the first item of the hbox. Then to add the actual link I created a LinkButton object, set the label equal to the label I ask for as the class is created, set a couple of style attributes and then add it to the hbox. To wrap up I add some additional style directives to the hbox, I could instead set the styleName to something in particular and set the style properties in a css file. After adding the components and setting the style the object is finished and ready to be added. The code of the class is below, and below that is the code showing how to add this custom component onto my application.

NavLink.as
package mh
{
import mx.containers.HBox;
import mx.controls.LinkButton;
import mx.controls.Image;

public class NavLink extends HBox
{
public function NavLink(label:String):void{
var i:Image = new Image();
i.source = 'old/images/bullet.gif';
this.addChild(i);
var b:LinkButton = new LinkButton();
b.height = 18;
b.width = 172;
b.label = label;
this.addChild(b);
this.setStyle("verticalAlign","middle");
this.setStyle("horizontalGap","0");
this.height = 18;
this.width = 210;
}
}
}

Code to use NavLink in application
import mh.NavLink;
private function init():void{
this.linkBox.addChildAt(new NavLink("Our Begingings"),1);
this.linkBox.addChildAt(new NavLink("Our Board"),2);
this.linkBox.addChildAt(new NavLink("House of Hope"),4);
this.linkBox.addChildAt(new NavLink("Phone Home Program"),5);
this.linkBox.addChildAt(new NavLink("Read Stories"),7);
this.linkBox.addChildAt(new NavLink("Submit a Story"),8);
this.linkBox.addChildAt(new NavLink("Volunteer"),10);
this.linkBox.addChildAt(new NavLink("Contribute"),11);
this.linkBox.addChildAt(new NavLink("Photo Gallery"),13);
this.linkBox.addChildAt(new NavLink("Audio/Video Clips"),14);
this.linkBox.addChildAt(new NavLink("Our Newsletter"),16);
this.linkBox.addChildAt(new NavLink("Upcoming Events"),17);
}