How to wrap your actionscript class/application and add it to flex application

Posted on October 21, 2009, 10:33 pm, by Van Nhu.

Sometimes ago I started to learn actionscript 3 and the go was to code for the game nought and crosses with a simple AI. To save time I used Flex componnents to create button and other containers. I was running on problem to add my application to flex application. Flex refused to add my objects as child in Flex application and the solution was adding my objects in an UIComponent object and added this object to flex application. Bellow is another way to code and is completely equivalent to what mensioned above.

The procedure is simple. You create a “container” class by extending Flex UIComponent. Bellow is the container class for my nought and crosses. I guess that you are familar with the code. You don’t need to pay much attention to create-method. However, newGame, playBack and addStatusListener are worth to notice. And you can find the reason on the next paragraph.

package vnmedia.games.nac
{
	import mx.controls.Text;
	import mx.core.UIComponent;
 
	import vnmedia.games.nac.ai.AiComm;
	import vnmedia.games.nac.ai.BaseAi;
 
	import vnmedia.games.nac.core.CoreComm;
	import vnmedia.games.nac.core.Game;
	import vnmedia.games.nac.gui.Client;
	import vnmedia.games.nac.gui.GuiComm;
 
	public class FlexNac extends UIComponent {
		private var client:Client;
		private var game:Game;
		private var status:Text;
 
		public function FlexNac() {
			// create client, game and other necessary
			this.create();
			try {
				this.addChild(this.client);
				// start an new game
				this.game.newGame(1);	
			} catch(e:Error) {
				trace(e);
			}
		}
 
		public function newGame():void {
			this.game.newGame(1);
		}
 
		public function playBack():void {
			this.client.playBack();
		}
 
		public function addStatusListener(t:Text):void {
			this.client.addStatusListener(t);
		}
 
		private function create():void {
			var aiCoreComm:CoreComm = new CoreComm;
			var guiCoreComm:CoreComm = new CoreComm;
			var aiComm:AiComm = AiComm.getInstance();
			var guiComm:GuiComm = GuiComm.getInstance();
			var Ai:BaseAi = new BaseAi();
			aiComm.attach(Ai);
 
			aiCoreComm.setClientComm(aiComm);
			guiCoreComm.setClientComm(guiComm);
 
			guiComm.setCoreComm(guiCoreComm);
			aiComm.setCoreComm(aiCoreComm);
 
			this.client = new Client(24);
			guiComm.attachClient(this.client);
 
			this.game = new Game('X');
			this.game.aiCoreComm = aiCoreComm;
			this.game.guiCoreComm = guiCoreComm;
			// 
			aiCoreComm.attachGame(game);
			guiCoreComm.attachGame(game);
			this.client.addStatusListener(status);
		}
	}
}

Now you know how to create a “container” class for your application. The next step is to include it in a Flex application. There are two way to add it to Flex application. You can use mx:Script and code with actionscript style (see) or just do as simple mxml example bellow where I use Flex standard box components and button component.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
   xmlns:vn="vnmedia.games.nac.*" layout="absolute">
  	<mx:Style source="beige.css"></mx:Style>
  	<mx:VBox styleName="firstVBox">
  		<mx:HBox styleName="menuHbox">
  			<mx:Button id="newGameButton" 
  			    click="nac.newGame();" 
  			    label="New game"></mx:Button>
			<mx:Button id="playback" 
			    click="nac.playBack();" 
			    label="Playback"></mx:Button>
  		</mx:HBox>
  		<mx:HBox x="10">
  			<vn:FlexNac id="nac"></vn:FlexNac>
  		</mx:HBox>
  	</mx:VBox>
	<mx:VBox styleName="secondVBox">
		<mx:HBox styleName="statusHBox">
  			<mx:Button label="Status"></mx:Button>
  			<mx:Text id="stat" styleName="status" 
  			    text="You: 0 Computer: 0" 
  			    creationComplete="nac.addStatusListener(stat);">
  			  </mx:Text>
  		</mx:HBox>
	</mx:VBox>
</mx:Application>

Now when you finished reading the code you should notice that I added my nought and crosses with a tag

<vn:FlexNac id="nac"></vn:FlexNac>

What hapened was that I created my own namespace vn. You can find it as an attribute in mx:Application element. You should get a picture how to create your own component for Flex application by now, right?! and of course if you have a reason :-p

Now we go back to those 3 methods mensioned in the beginning. I just created those public methods so I could access from Flex application, no more no less. Another way is that I could make “game” and “client” accessible. One last thing for those whom do not use mxml. The attribute id refers to the created object and you can see it in the beginning where I used in click event

<mx:Button id="newGameButton" 
  	click="nac.newGame();" 
  	label="New game"></mx:Button>
...

And finally the result


Tags: , , , , ,
Posted under: Actionscript
«
»