MvdB

Hoisting, the strangest ActionScript/Flex “feature” I’ve ever seen (at the moment of writing). Probably you’ve never heard of hoisting. I was hinted to this feature when I had two variables with the same name in one function. Flex was warning about this, but I didn’t really understand why.

Check the following example:

private function existsInSources(searchFor:String):Boolean {
	if(searchFor.length > 10) {
		for each(var valueObj:Object in longStringsCollection) {
			if(valueObj.key == searchFor) {
				return true;
			}
		}
	} else {
		for each(var valueObj:Object in shortStringsCollection) {
			if(valueObj.key == searchFor) {
				return true;
			}
		}
	}
	return false;
}

By default Flex will give the following warning at the second declaration of valueObj, line 9:

3596: Duplicate variable definition.

Coming from other program languages this will (should) strike you as odd behaviour. Both variables ‘valueObj’ exist in their own scope… right?
Not in ActionScript, ActionScript has “Hoisting”.
From adobe.com:

An interesting implication of the lack of block-level scope is that you can read or write to a variable before it is declared, as long as it is declared before the function ends. This is because of a technique called hoisting, which means that the compiler moves all variable declarations to the top of the function.

So basically, the code from the example is transformed to:

private function existsInSources(searchFor:String):Boolean {
	var valueObj:Object;
	var valueObj:Object;
	if(searchFor.length > 10) {
		for each(valueObj in longStringsCollection) {
			if(valueObj.key == searchFor) {
				return true;
			}
		}
	} else {
		for each(valueObj in shortStringsCollection) {
			if(valueObj.key == searchFor) {
				return true;
			}
		}
	}
	return false;
}

“It just shows a warning and doesn’t have any impact on that beautiful piece of code you wrote there, so who gives a ….”.

The problem lies in the fact that this “feature” also means you can refer to objects before they are even initialized.

if(myString.length > 20) {
	trace('Length is over 20!');
} else {
	trace('Length is 20 or smaller');
}
var myString:String = "Hello world!";

Result: a runtime error.

Cannot access a property or method of a null object reference.

Flex compiles (yes, this code compiles fine…) this to:

var myString:String;
if(myString.length > 10) {
	trace('Length is over 10!');
} else {
	trace('Length is 10 or smaller');
}
myString = "Hello world!";

Pay attention to your variable scope, especially when using Flex/ActionScript.

While googling for a guide to install soapUI in Ubuntu I found nothing useful. Could it be that installing soapUI in Ubuntu is too easy to describe? It turns out to be really easy, but just for the sake of other people googling this short guide.

soapUI is the leading tool for Web Service Testing. With more than 950 000 downloads, it’s the most used tool for SOA testing in the world.

Start by browsing to the sourceforge site of soapUI. Download the file with extension ‘.sh’.

Download Linux installation file

Open the properties of the downloaded file and select ‘allow executing file as program’ in tab ‘Permissions’.

File properties

Double-click the file to run the set-up. Select “Run”.

Run set-up

From now on it’s just a regular installation-wizard.

soapUI is now installed and ready to use.

soapUI running

Let’s try if invoking a web service works. Create a new soapUI project, be sure to select “Create sample requests for all operations”.

New project

Generated project

Enter ‘GOOG’ as stock symbol and press the green ‘play button’.

Web service request

Web service response

In the current version of Flex (3) it’s not possible to set width and height using CSS. The application I’m working on has a lot of screens containing a lot of TextInput fields. I want to be able to control the width and height of these text fields using CSS.

Sean Christmann has a nice solution for this. He uses HBox, I’ll use TextInput as an example:

package com.yourpackage {

	import mx.controls.TextInput;
	import mx.styles.StyleManager;

	public class ExtTextInput extends TextInput {

		public function ExtTextInput():void {
			super();
			// Default styleName for this component
			this.styleName = "extTextInput";
		}

		/**
		 * This method makes styles "width", "height", "percentWidth", "percentHeight", "x", "y" and "visible"
		 * valid from css.
		 */
		override public function styleChanged(styleProp:String):void{
			super.styleChanged(styleProp);
			if(!styleProp || styleProp == "styleName"){
				//if runtime css swap or direct change of stylename
				var classSelector:Object = StyleManager.getStyleDeclaration("." + styleName);
				if(classSelector != null){
					applyProperties(classSelector, ["width", "height", "percentWidth", "percentHeight", "x", "y", "visible"]);
				}
			}
		}

		private function applyProperties(styleObj:Object, arr:Array):void{
			for each (var item:String in arr){
				var prop:Object = styleObj.getStyle(item);
				if(prop != null) this[item] = prop;
			}
		}

	}
}

As the implementation extends the standard TextInput it will behave just like the standard TextInput. Databinding, runtime style changes… it all works.

The code sets a default styleName for the component, the style could look like this:

.extTextInput {
	percentWidth: 100;
	height: 18;
}

Of course you can set a different styleName while declaring the component in your application.