Tag: component

An update to this post can be found here

This was my first “bang my head against the wall for a really long time” Flex error. Here’s a simplified version of what I was doing wrong. I had a created a custom component which contained another Flex component.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Button id="button"/>
</mx:Canvas>

Then in my application I was using it as follows:

var myComp:MyComp = new MyComp();
myComp.button.label = "Button Label";
addChild( myComp );

The problem here has to do with what’s called the “component instantiation life cycle”. The basic issue is that when I was setting the label for the button it hadn’t yet been created. In the rest of the post I’ll cover three ways to fix this.

Solution 1 (don’t actually do this, just showing what’s possible)

The easiest way to fix this is to just add the component to the stage before setting the label.

var myComp:MyComp = new MyComp();
addChild( myComp );
myComp.button.label = "Button Label";

As you can see we’ve simply swapped lines 2 and 3. This is definitely not best practice. While it does work it means that you need to display your component before making any changes to it. This will be pretty inefficient as it will require the Flash player to update the component a second time.

Solution 2 (this one’s pretty good)

A better way to do this would be to add a variable to the custom component which stores the label. Then when the component is added to the stage it sets the button’s label to the value set. Here’s what it would look like

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">

	<mx:Script>
		<![CDATA[
			
			private var _buttonLabel:String;
			
			private function init():void
			{
				button.label = _buttonLabel;
			}
			
			public function set buttonLabel( value:String ):void
			{
				_buttonLabel = value;
			}
					
		]]>
	</mx:Script>
	
	
	<mx:Button id="button"/>
</mx:Canvas>

One thing worth pointing out is we’re using the initialize event rather than the creationComplete event. Setting the label for the button will cause the Flash player to recalculate the size of the button. If we used the creationComplete event it will have already measured the button. This means we’ll be forcing the player to measure it again.

To use this component we’d change the code slightly to use the new buttonLabel parameter:

var myComp:MyComp = new MyComp();
myComp.buttonLabel = "Button Label";
addChild( myComp );

Solution 3 (the real way to do it)

The catch with the 2nd solution is it only enables you to set the button label before you add the component to the stage. We could work around that by checking if the button already exists when setting the value for buttonLabel but we’re going to skip past that change and just implement it the real way.

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

	<mx:Script>
		<![CDATA[
			
			private var _buttonLabel:String;
			private var _buttonLabelChanged:Boolean;
			
			public function set buttonLabel( value:String ):void
			{
				_buttonLabel = value;
				_buttonLabelChanged = true;
				
				invalidateProperties();
				invalidateSize();
			}
			
			override protected function commitProperties():void
			{
				super.commitProperties();
				
				if (_buttonLabelChanged)
				{
					button.label = _buttonLabel;
					_buttonLabelChanged = false;
				}
			}
					
		]]>
	</mx:Script>

	<mx:Button id="button"/>
</mx:Canvas>

By overriding the commitProperties function we enable the component to be far more efficient. The code which changes the button label will execute much quicker that the change will be displayed on screen. Using this approach even if we change the label many times, the Flash player will only recalculate the component once.

The purpose of the post was to show you how to resolve the “null object” error. While discussing this problem we’ve gotten in to the area of creating custom components but we’ve really just skimmed the surface. There are a ton of great tutorials online covering this topic in great depth. If you’d like to learn more a quick google search should find you everything you ever wanted to know (and probably more).

Best,
Hillel