The World Wide Web According to …

During the development of the latest Flex 2 application I came upon nice and powerful ActionScript function. It’s the describeType function. What does it do? It returns an XML object that describes all the instance properties of the supplied parameter. You can pass in any ActionScript value, type, object instances, primitive types, and class objects. So, here a little example:

You can view the example and source here.

Note: Until I figure out how to style my code segments within WordPress (they strip many of my styles out) I will present each code segment without line numbers. Sorry.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute" width="100%" height="100%"
	pageTitle="describeType Function Demo">

I think by now you know the pupose of the code segment above.

	<mx:Script>
		<![CDATA[
			import flash.utils.describeType;
			import flash.events.Event;

We start our script tag by importing two classes. The flash.utils.describeType class gives us access to the descibeType function. The flash.events.Event class allows us to pass and inspect the event object created when the user clicks on the dataGrid row.

                        [Bindable]
			public var myProperties:XMLList;

Next we declare a XMLList type variable that will be used to hold the XML returned from the call to describeType.

			public function getMyProperties(event:MouseEvent):void {
				myProperties = describeType(imgPhoto)..accessor;
			}

OK, here we go. We define a function that will be called when the user clicks on the image. This function passes a reference to the image to the describeType function. Because the describeType function returns an XML object we then use E4X syntax to access the accessor nodes. Those nodes are then stored as a XMLList in the myProperties variable.

			public function getPropertyValue(event:Event):void {
				var myAccessType:String = event.target.selectedItem.@access;
				var myPropertyName:String = event.target.selectedItem.@name;

				if(myAccessType != "writeonly") {
					if (imgPhoto[myPropertyName] != null) {
						taValue.text = imgPhoto[myPropertyName].toString();
					} else {
						taValue.text = "null";
					}
				} else {
					taValue.text = "Sorry, this property has writeonly rights";
				}
			}
		]]>
	</mx:Script>

Now this function defines what happens when the user clicks on a dataGrid row. We inspect the selectedItem in the event object to get the value of the access and name attributes. We then check to see if the value of myAccessType does not equal “writeonly”. Then we check to see if the properties value is not null. We do this by accessing the selected Property Name as an array element in the imgPhoto class. The variable myPropertyName will be evaluated for its value. So if everything so far is true, then we get the property’s value and convert it to a string and pass it into out TextArea. We then account for the possibility of a null value and then a property with “writeonly’ access rights.

	<mx:HBox width="100%" height="100%" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
		<mx:Panel id="myPanel" width="50%" title="My Properties"
			paddingTop="5" paddingRight="5" paddingBottom="5" paddingLeft="5" horizontalAlign="center">

			<mx:Label text="1) Click on the photo to see what it is." fontWeight="bold"/>

			<mx:Image id="imgPhoto" source="18J_11.jpg"
				width="120" height="136" toolTip="What am I?"
				click="getMyProperties(event)"/>

			<mx:Label text="2) Click on a property to see its value." fontWeight="bold"/>

			<mx:DataGrid id="dgProperties" dataProvider="{myProperties}" width="100%" change="getPropertyValue(event)">
				<mx:columns>
					<mx:DataGridColumn headerText="Property Name" dataField="@name"/>
					<mx:DataGridColumn headerText="Access Rights" dataField="@access"/>
					<mx:DataGridColumn headerText="Data Type" dataField="@type"/>
				</mx:columns>
			</mx:DataGrid>

			<mx:Label text="Property Value:"/>

			<mx:TextArea id="taValue" width="100%" height="50"/>

		</mx:Panel>
	</mx:HBox>
</mx:Application>

OK. Here is our interface. I won’t go into much detail about this code segment. The part I want to concentrate on is the dataGrid. We define a dataGrid cotaining three columns. The first column, Property Name, displays the name of the property by accessing the “name” attribute within the current XML node. The second column displays the property’s Access Rights. The third column displays the property’s Data Type. As you can see, the dataProvider is bound to the myProvider XMLList declared and populated earlier. When the dataGrid’s selection has changed we call our getPropertyValue function.

So there it is. The describeType function returns an XML object containing a wealth of information. You can visit the Adobe Flex 2 Language Reference to get more details.

Question: “How do I dynamically add tabs to my TabNavigator?”

Solution: The TabNavigator (and many other controls) support the addChild and addChildTo methods which, allow you to add child controls and components.

Take a look at the sample code segments I’ve posted here:

(more…)