Architect, Engineer, Tech Enthusiast - Hasan Otuome » AS3

Getting Some …rest

Hasan Otuome — Thu, 08 May 2008 17:54:34 +0000

Thought I’d blog about this since I haven’t seen this posted before and it comes up from time to time. With AS3, we got access to a new function parameter, the …rest parameter, which allows us to pass in a dynamic list of parameters for usage by our functions. Here’s an example:

// Method in SomeClass
public function someMethod(...rest):void
{
    for (var i:uint=0; i < rest.length; i++)
    {
        trace(rest[i]);
    }
}

That will trace out each …rest parameter that you pass to the method call like so:

// Usage from SomeOtherClass
var sc:SomeClass = new SomeClass();
      sc.someMethod(arg1, arg2, arg3, arg4);

This allows a lot of flexibility because those arguments can be simple (String, Number, etc) or complex (Array, Object, etc). But, what if someMethod() is part of SWC library that you may or may not have access to and you want to capture those …rest arguments and pass them to SWC class?

Well, the easiest way that I’ve found is to use the built-in arguments object in your local code and then pass that to the SWC class that’s expecting the …rest array. Here’s what I mean:

// Usage from LocalClass
public function someMethod(arg1:String, arguments:Object=null):void
{
    var sc:SomeClass = new SomeClass();
          sc.someMethod(arguments);
}

This way you can expose LocalClass.someMethod(), accept the concrete parameters that it expects and pass on the dynamic parameters that SomeClass.someMethod() expects.

Buffer

Flex 2 and Flash 9 SWFs

Hasan Otuome — Wed, 08 Nov 2006 08:00:00 +0000

A question popped up on flexcoders recently about whether these two could play together and here’s my response. Yes, it’s possible using SWFLoader. The 9 SWF will be accessible/programmable through the content property of the loader. Here’s a very basic example:

Flex
=======

import flash.events.Event;
 
private function initSWF( event:Event ):void
{
    loadedSWF.content.addEventListener( "clicked", clickHandler );
}
 
public function clickHandler( event:Event ):void
{
    var button:String = loadedSWF.content[ "clickedButton" ];
    //do something with the returned data
}

So, the above code can go in a < mx:Script >< /mx:Script > block or in an external ActionScript file that’s the source property of your script block, < mx:Script source="external.as" />. First, we import the Event class so we can listen for and dispatch events. Next comes initSWF(). This method is the event handler for the SWFLoader’s complete event. If that was confusing, it’s the function that get’s called when the complete event fires. So, what we’re doing with this method is adding an event listener to the Flash 9 SWF that we load. And, when the loaded SWF fires the “clicked” event we want to handle that with clickHandler(), which right now is just holding a reference to the name of the button clicked. To get the ball rolling, simply make initSWF() the value of the complete property of your SWFLoader component, < mx:SWFLoader id="loadedSWF" complete="initSWF(event)" source="pathToSWF" />.

Flash
=======

import flash.events.*;
 
var clickedButton:String = "";
 
someButton.addEventListener( MouseEvent.CLICK, clickHandler );
 
function clickHandler( event:Event ):void
{
    clickedButton = event.target.name;
    dispatchEvent( new Event("clicked") );
}

OK, on the Flash side we do our import first of course. Next, we instantiate our clickedButton variable as an empty string (just to keep from being null/undefined). Now, we add an event listener to the someButton instance on the main timeline. This syntax is a much cleaner way of dealing with events IMO because everybody (you, your team, the compiler) knows exactly what you’re trying to do. Here we want to listen for the CLICK event which is a static member of the MouseEvent Class. When we hear the event clickHandler() once again jumps into action. Inside this click handler we do (2) things. First, we set the value of our clickedButton variable to the instance name of the button that was clicked. Then finally, we want to dispatch our custom “clicked” event which, in turn, kicks things in motion on the Flex side.

Again, this is a simple illustration of some of the things you can do using Flex/Flash together. No LocalConnections just pure AS3 conversations. Enjoy…

Buffer

StringUtils Class

Hasan Otuome — Thu, 05 Oct 2006 08:00:00 +0000

Came up with this idea after perusing proto.layer51.com. It’s basically a sub-class of String and the 1st method is a reduction method that let’s you feed in a string, a limit and a “there’s more” indicator. Anyways, here’s the code:

class org.thesourcecode.utils.StringUtils extends String
{
	public var theString:String;
 
	public function StringUtils( string:String )
	{
		super();
		theString = string;
	}
 
	public function reduce( stringLength:Number, trimIndicator:String="..." ):String
	{
		var trimmedString:Array = [];
		if (theString.length < = stringLength)
		{
			//just return the string if it's within the "limit"
			return theString;
		}
 
		var words:Array = theString.split(" ");
 		var numWords:Number = words.length;
		var ol:Number = 0;
		var cWord:String;
		var w:Number;
 
 		for (w=0; w<numWords; ++w)
		{
		   cWord=words[w];
		   var cwl=cWord.length;
 		   //check each words length before adding it the output string
		   if ((ol+cwl)<=stringLength)
		   {
		      trimmedString.push( cWord );
		      ol+=cwl+1;
		   }
		   else break;
		}
		return trimmedString.join(" ")+trimIndicator;
        }
}

The easy-install extension can be downloaded here.
Documentation can be found here.

Buffer

Get to Know Your Sanitation Worker!!

Hasan Otuome — Tue, 26 Sep 2006 21:48:35 +0000

If you plan on doing any serious AS3 development for Flash or Flex, make sure you become intimate with the Garbage Collector (GC). In previous Flash Player versions, the GC worked silently and intuitively behind the scenes. With AS3 though, you have to put more thought into resource management. The genius that he is, Grant Skinner has a series of cool articles that will get you up to speed on the GC.

Buffer

Flex :: Custom ComboBox Part 2

Hasan Otuome — Wed, 23 Aug 2006 08:00:00 +0000

Last time we looked @ creating a custom ComboBox that could be reused for displaying states/countries. This time will wrap up by looking @ how that ComboBox can be used as an itemRenderer in a DataGrid. Since DataGrids use TextInputs as their default renderers when the grid is editable, we have to tell the grid we want to use our ComboBox for a particular column or columns. So, here’s an example of an editable grid that’s making use of the custom component:

 
      x="10" y="40" 
      width="769" height="145" 
      id="dgGigs" 
      dataProvider="{dp}" 
      editable="true" 
      itemEditEnd="editedGig(event)"
      >
  >
	 headerText="Gig ID" dataField="gid" width="50" editable="false"/>
	 headerText="Date" dataField="date"/>
	 headerText="Event" dataField="event" width="200"/>
	 headerText="Venue" dataField="venue" width="180"/>
	 headerText="City" dataField="city" width="100"/>
	 headerText="State" dataField="state" width="65" itemEditor="components.StatesCombo"/>
	 headerText="Time" dataField="gtime" width="65"/>
  >
>

Here we tell the grid that for the state column we want to use our custom ComboBox as the itemEditor for that column. In other words, use a TextField for static display of the data, but once a user clicks the cell to edit it use StatesCombo. Now, to wrap up we’ll look briefly @ the actual editing process. Check out itemEditEnd in the code above. Think of it as an Event Listener that says when the user is finished making an edit to the grid call the editedGig() method and pass the edit event as an argument. So, here’s the ActionScript to process those edits:

//gig variables
public var gigsDate:String;
public var gigsName:String;
public var gigsLoc:String;
public var gigsCity:String;
public var gigsState:String;
public var gigsTime:String;
 
//gig itemEditor
private function editedGig( event: DataGridEvent ):void
{
	var gigID:Number = dgGigs.editedItemRenderer.data.gid;
	switch (event.dataField)
	{
		case "date":
			//code for this case
			break;
		case "event":
			//code for this case
			break;
		case "venue":
			//code for this case
			break;
		case "city":
			//code for this case
			break;
		case "state":
			dgGigs.editedItemRenderer.data.state = components.StatesCombo( event.currentTarget.itemEditorInstance ).selectedItem.data;
			gigsDate = dgGigs.editedItemRenderer.data.date;
			gigsName = dgGigs.editedItemRenderer.data.event;
			gigsLoc = dgGigs.editedItemRenderer.data.venue;
			gigsCity = dgGigs.editedItemRenderer.data.city;
			gigsState = dgGigs.editedItemRenderer.data.state;
			gigsTime = dgGigs.editedItemRenderer.data.gtime;
			updateData( 'client.manager.updateGig',[gigID,gigsDate,gigsName,gigsLoc,gigsCity,gigsState,gigsTime] );
			break;
		case "gtime":
			//code for this case
			break;
	}
}

The key line here is

dgGigs.editedItemRenderer.data.state = components.StatesCombo( event.currentTarget.itemEditorInstance ).selectedItem.data

We must first set the itemRenderer for the state column equal to the list item the user selected with our component. Then, we assign the itemRenderer value to the gigsState variable and pass the data to our grid updating mechanism so that we can see the changes reflected. I’m just kinda scratchin’ the surface to keep it as simple and easy to understand as possible. You can check out the LiveDocs for more detailed info on renderers. If you missed it, you can catch part 1 here.

Buffer

Flex :: AMFPHP Login

Hasan Otuome — Mon, 10 Jul 2006 08:00:00 +0000

The subject pops up a lot about reusable Flex components. Here’s one to handle multi-user logins via AMFPHP / MySQL:

< ?xml version="1.0" encoding="utf-8"?>
"http://www.adobe.com/2006/mxml" xmlns="*" width="355" height="213">
	>>
		< ![CDATA[
			import flash.net.Responder;
 
			public var gateway:RemotingConnection;
 
			public function checkLogin( service:String, params:Array ):void
			{
				gateway = new RemotingConnection( "http://yourwebserver.com/flashservices/gateway.php" );
				gateway.call( service,new Responder(onResult,onFault),params );
			}
 
			public function onResult( result:Array ):void
			{
				if (result[0]!="VALID")
				{
					lResponse.text = result[ 1 ];
				} 
				else 
				{
					lResponse.text = result[ 1 ];
					parentDocument.currentState='Main';
				}
			}
 
			public function onFault( fault:String ):void
			{
				lResponse.text = "Service Error: "+fault;
			}
 
			private function checkInput():void
			{
				if (tUser.text == "" || tPass.text == "")
				{
					lResponse.text = "Please complete all fields";
				} 
				else 
				{
					lResponse.text = "Logging in...";
					checkLogin( "login.Verify.validate",[tUser.text,tPass.text] );
				}
			}
		]]>
	>
	"200" layout="absolute" title="Admin Login" left="0" right="5" bottom="13">
		"33" y="45" text="Username:"/>
		"33" y="85" text="Password:"/>
		"178" y="118" label="Login" id="bLogin" tabIndex="3" click="checkInput()"/>
		"113" y="83" id="tPass" tabIndex="2" displayAsPassword="true"/>
		"113" y="43" id="tUser" tabIndex="1"/>
		"113" y="10" id="lResponse"/>
	>

And here’s the AMFPHP service that the component connects to:

< ?php
class Verify 
{	
	function Verify()
	{
		$this->methodTable = array(
			"validate" => array(
				"access" => "remote",
				"description" => "Return the login results"
			)
		);
	}
 
	function validate( $nfo )
	{
		$dbc = mysql_connect( "localhost","username","password" );
		mysql_select_db( "yourdatabase" );
 
		$user = $nfo[ 0 ];
		$pass = $nfo[ 1 ];
 
		$query = "SELECT DISTINCT * FROM admin WHERE aname = '$user' AND acode = '$pass'";
		$rs = mysql_query( $query );
 
		$var = mysql_fetch_assoc( $rs );
		$u = $var[ "aname" ];
		$p = $var[ "acode" ];
 
		if ($pass != $p)
		{
			$response[0] = "INVALID";
			$response[1] = "Invalid username and/or password";
		} 
		else
		{
			$response[0] = "VALID";
			$response[1] = "Welcome $u";
		}
		return $response;
	}
 
}
?>

Download a ZIP with all the necessary files here.

Buffer

The Joy of E4X!

Hasan Otuome — Mon, 03 Jul 2006 14:40:00 +0000

Prior to AS3, working with XML was a drag. The semantics of manipulating an XML object definitely left much to be desired. Well, AS3 changed all that by bringing us E4X. If you don’t already know, E4X stands for ECMAScript for XML and it introduces some new functionality that makes working with XML a lot easier.
Here’s an example working with some inline XML:

//create a new XML object
var company:XML = 
	<employees>
		<employee id="1"><name>Johnname><dept>ITdept>employee>
		<employee id="2"><name>Susanname><dept>Marketingdept>employee>
   employees>;

Pretty simple right? Next, let’s create a function for some reusable code to help illustrate:

//create a printer function since we'll be reusing this routine
function echo()
{
	//print the data to the output panel
	for each (var e in company.employee)
	{
		trace( "Employee: "+e.name+" works in the "+e.dept+" Dept." );
	}
}
 
//print the results
echo();

We’re just using a for..each loop to iterate through our XML and give us the info we want. The important thing to note is that we can just use the node names. No more ambiguous firstChild, nextSibling, lastChild, etc.
Let’s add a new employee…

//to add a new employee
company.employee += <employee id="3"><name>Carlname>employee>;
 
//print the results
echo();

Now, say we wanted to search the XML for that specific employee and assign them to a department. Here’s one way that could work:

//assign Carl to a department
company.employee.(@id==3).dept = "Research";
 
//print the results
echo();

Here we used what’s called a filter predicate (a/k/a – the condition to match) and it’s just like the WHERE clause in a SQL statement…“SELECT employee FROM company WHERE id = 3″. So, we’re grabbing the employee element(node) from the company XML tree where the employee attribute, id (@id) is equal to 3.
Now that we’re cooking, what about external XML? Well, that’s no biggie. It’s only slightly different than it was in AS2. To do it, we’ll need to use (2) new AS3 classes: URLLoader and URLRequest. URLRequest replaces getURL() and you can think of URLLoader like MovieClipLoader which allows us to monitor loading and do stuff in response to it. Ok, so with that in mind:

var company:XML;
var loader:URLLoader = new URLLoader();
var request:URLRequest = new URLRequest( "company.xml" );
 
loader.load( request );
loader.addEventListener( Event.COMPLETE, onComplete );
 
function onComplete( event:Event ):void
{
   var loader:URLLoader = URLLoader( event.target );
   company = new XML( loader.data );
   trace( company.toXMLString() );
}

And we’re just scratching the surface of what E4X has to offer. That alone is worth the price of admission to the world of AS3…

Buffer