Custom (spark) item renderer and component

For whatever reason, you want to extend UIComponent (or any of the subclasses) or ItemRenderer, you can do it in either ActionScript or MXML.

In ActionScript, you do it like this:

//class definition. The file name is "MyItemRenderer.as"
public class MyItemRenderer extends ItemRender {//stuff here...}

In MXML, you do it like this:

<?xml version="1.0" encoding="utf-8"?>
<!--The base class is the top tag. The file name is  "MyItemRenderer.mxml"-->
<mapping:BaseMarker xmlns:fx="http://ns.adobe.com/mxml/2009" ...>...</mapping:BaseMarker>

Flex automatically generates an ActionScript class of the same name as your .mxml file name when you compile.

If you extend your ItemRenderer or UIComponent subclass using MXML, you can do the same things as you extend them using ActionScript, such as assign a property, or override a protected or public member. It’s often obvious how you override the methods, as these happen in the <s:Script> block(s). It took me a while to get used to the fact that I can simply assign properties (public var in ActionScript) right on the top tag (where you declare the base class/tag).

Below is an example: The idea was to use a base marker used for a map and then have different flavors of markers; but in the real project, I decided I would rather use different itemRenderers instead of subclassing the base one, as the latter seems more convenient for the scope of the project.

<!–base marker: BaseMarker.mxml–>

<?xml version=”1.0″ encoding=”utf-8″?>
<s:ItemRenderer xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
autoDrawBackground=”true”>
<fx:Script>
<![CDATA[
import com.mh.mapdispatch.model.Location;
[Bindable]
public var iconSource:Class;
[Bindable]
public var labelText:String = “”;
[Bindable]
public var displayLabel:Boolean = false;
[Bindable]
public var labelColor:uint = uint(“0x000000”);
[Bindable]
public var labelBorderColor:uint = uint(“0x000000”);
[Bindable]
public var labelBackgroundColor:uint = uint(“0xffffff”);

private var _latitude:Number;

[Binable]
public function get latitude():Number
{
return _latitude;
}
public function set latitude(value:Number):void
{
_latitude = y = value;
}

private var _longitude:Number;
[Binable]
public function get longitude():Number
{
return _longitude;
}
public function set longitude(value:Number):void
{
_longitude = x = value;
}

]]>
</fx:Script>
<!– Flex data binding will not able to detect assignments to latitude/longitude
<fx:Binding source=”latitude” destination=”y” twoWay=”true”/>
<fx:Binding source=”longitude” destination=”x” twoWay=”true”/>
–>
<s:VGroup>
<mx:Image id=”markerIcon” source=”{iconSource}”/>
<s:BorderContainer id=”labelBorder”
visible=”{displayLabel}”
includeInLayout=”{displayLabel}”
borderColor=”{labelBorderColor}”
backgroundColor=”{labelBackgroundColor}”>
<s:Label id=”markerLabel”
text=”{labelText}”
color=”{labelColor}”/>
</s:BorderContainer>
</s:VGroup>
</s:ItemRenderer>

<!–subclass itemrenderer: CameraMarker.mxml–>

<?xml version=”1.0″ encoding=”utf-8″?>
<mapping:BaseMarker xmlns:fx=”http://ns.adobe.com/mxml/2009&#8243;
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
xmlns:mapping=”com.mh.mapdispatch.infrastructure.mapping.*”
autoDrawBackground=”true”
displayLabel=”true”
labelText = “{data.location}”
latitude = “{data.location.latitude}”
longitude =”{ data.location.longitude}”>
<fx:Script>
<![CDATA[
override public function set latitude(value:Number):void
{//do stuff here…}
]]>
</fx:Script>
</mapping:BaseMarker>

This one is pretty interesting, in terms of how to use MXML to create itemRenderers.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: