First we’ll set up the data and datagrid.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->

 </fx:Declarations>
 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;

 [Bindable]
 private var initDG:ArrayCollection = new ArrayCollection([
				{ID:1, datePosted:"03/15/2009"},
				{ID:2, datePosted:"02/18/2009"}
 ]);

 ]]>
 </fx:Script>

 <mx:DataGrid dataProvider="{initDG}" id="dg0" x="0" y="0" width="100%" height="100%">
 <mx:columns>
 <mx:DataGridColumn headerText="ID" dataField="ID" width="25" />
 <mx:DataGridColumn headerText="Date" dataField="datePosted" />
 </mx:columns>
 </mx:DataGrid>
</s:Application>

Now lets add the date formatter. Add the date formatter component and identify the resulting format you’re looking for. Next we add a function that uses that date formatter.
Finally we’ll add a call to our function from the datagrid column using labelFunction

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
 <mx:DateFormatter id="dateFormatter" formatString="MMMM D, YYYY" />

 </fx:Declarations>
 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;

 [Bindable]
 private var initDG:ArrayCollection = new ArrayCollection([
				{ID:1, datePosted:"03/15/2009"},
				{ID:2, datePosted:"02/18/2009"}
 ]);

 private function dateFormat(item:Object, eventGridColumn:DataGridColumn):String
 {
 return dateFormatter.format(item.datePosted);
 }

 ]]>
 </fx:Script>

 <mx:DataGrid dataProvider="{initDG}" id="dg0" x="0" y="0" width="100%" height="100%">
 <mx:columns>
 <mx:DataGridColumn headerText="ID" dataField="ID" width="25" />
 <mx:DataGridColumn headerText="Date" dataField="datePosted" labelFunction="dateFormat"/>
 </mx:columns>
 </mx:DataGrid>
</s:Application>

To add the sorting we’ll add a sorting method and call it from our datagrid column using sortCompareFunction

Here is the Completed Code

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<mx:DateFormatter id="dateFormatter" formatString="MMMM D, YYYY" />

	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.utils.ObjectUtil;

			[Bindable]
			private var initDG:ArrayCollection = new ArrayCollection([
				{ID:1, datePosted:"03/15/2009"},
				{ID:2, datePosted:"02/18/2009"}
			]);

			private function dateFormat(item:Object, eventGridColumn:DataGridColumn):String
			{
				return dateFormatter.format(item.datePosted);
			}
			private function date_sortCompareFunc(itemA:Object, itemB:Object):int {
				/* Date.parse() returns an int, but
				ObjectUtil.dateCompare() expects two
				Date objects, so convert String to
				int to Date. */
				var dateA:Date = new Date(Date.parse(itemA.date));
				var dateB:Date = new Date(Date.parse(itemB.date));
				return ObjectUtil.dateCompare(dateA, dateB);
			}

		]]>
	</fx:Script>

	<mx:DataGrid dataProvider="{initDG}" id="dg0" x="0" y="0" width="100%" height="100%">
		<mx:columns>
			<mx:DataGridColumn headerText="ID" dataField="ID" width="25" />
			<mx:DataGridColumn headerText="Date" dataField="datePosted" sortCompareFunction="date_sortCompareFunc"
							   labelFunction="dateFormat"/>
			</mx:columns>
		</mx:DataGrid>
</s:Application>

Many tutorials use “Hello World” as a sample application to teach. Interestingly most of these examples also use this mixed mode.

Look at a simple example

public function sayHello():String
{
	var returnVariable:String="";

	var name:String="Bob";

	returnVariable= "Hello " + name;

	return returnVariable;
}

This is really a simple top down procedural approach. So what is Object Oriented programming then. First let’s find out what an object is

What is an Object

You deal with objects every day in the real world. Your coffee mug is an object, your mouse is an object, heck you’re even an object. What does this have to do with programming? When we think in OO for our development we need to think in the same way we do in the real world, about objects. Lets take a few items from the real world and use them in OO programming. First look at your coffee mug. It has some data points or attributes about it such as color, capacity, temperature, available space etc. Some of those elements are fixed and shouldn’t be changed such as color and capacity. There are other attributes that can change such as available space.

Let look at a procedural example

public function showMug():String
{
	var returnVariable:String="";

	var mugColor:String="White";
	var mugCapacity:String="14oz";
	var mugContents:String="";
	var mugTempurature:String="";
	var mugAvailableSpace:String="";

	//Fill mug with coffee
	mugContents = "12oz Coffee";
	mugTemperature = "Hot";
	mugAvailableSpace = "0";

	// Check out our mug
	returnVariable=returnVariable + "Color: " + mugColor + "\n";
	returnVariable=returnVariable + "Capacity: " + mugCapacity + "\n";
	returnVariable=returnVariable + "Contents: " + mugContents + "\n";
	returnVariable=returnVariable + "Temperature: " + mugTempurature + "\n";
	returnVariable=returnVariable + "Available Space: " + mugAvailableSpace + "\n";

	return returnVariable;
}

Pretty straight forward. There are a few challenges though. How do you ensure I can’t put in more than the capacity. What’s to keep line of code from changing the temperature, color, or capacity. And finally  how do you deal with more than one mug. Yes you can code for a lot of these issues procedurally but the code gets complex and really you can’t enforce the rules you put in place since the objects are global.  Object Oriented programming allows you to do this.

In an OO model we would have a mug, or multiple mugs, each with its own current status. Once we got our mug, nothing would be able to change the color or capacity. While the temperature may change over time, this should be determined by the mug not some other code. For example I have a thermal mug which keeps my coffee hot for 2 hours. But I also have a regular ceramic mug that only keeps it warm for 20 minutes. The mug really determines how the temperature changes.

So lets make a mug

This mug and all objects really is just an isolated bit of code that can be reused. There are some rules for Objects but we won’t worry about them now.

package
{
	public class Mug
	{
		// define the various attributes but don't set them
		// Mark them private so they can't be updated by anyone but this mug
		private var _mugColor:String="White";
		private var _mugCapacity:String="14oz";
		private var _mugContents:String="";
		private var _mugTempurature:String="";
		private var _mugAvailableSpace:String="";

		// create an initialization function or constructor
		// that will be used to setup some attribute data
		public function Mug(color:String, capacity:String)
		{
			_mugColor=color;
			_mugCapacity=capacity;
			_mugTempurature="HOT!";
		}

		//enable the contents to be set
		public function set mugContents(value:String):void
		{
			_mugContents = value;
		}

		// enable everyone to see what our attributes are
		public function get mugColor():String
		{
			return _mugColor;
		}

		public function get mugCapacity():String
		{
			return _mugCapacity;
		}

		public function get mugContents():String
		{
			return _mugContents;
		}

		public function get mugTempurature():String
		{
			return _mugTempurature;
		}

		public function get mugAvailableSpace():String
		{
			return _mugAvailableSpace;
		}

	}
}

Now lets use it

public function showMug():String
{
	var returnVariable:String="";

	var mug1:Mug=new Mug("White","14oz");

	//Fill mug with coffee
	mug1.mugContents = "Coffee";

	// Check out our mug
	returnVariable=returnVariable + "Color: " +  mug1.mugColor + "\n";
	returnVariable=returnVariable + "Capacity: " + mug1.mugCapacity + "\n";
	returnVariable=returnVariable + "Contents: " + mug1.mugContents + "\n";
	returnVariable=returnVariable + "Temperature: " + mug1.mugTempurature + "\n";
	returnVariable=returnVariable + "Available Space: " + mug1.mugAvailableSpace + "\n";

	return returnVariable;
}

At first it appears we just added some structure to our code and split this into two files. If you look closer you’ll see that we can’t change the color or capacity after we get our mug.

Lets make this into a coffee shop and use lots of mugs.

public function showMug():String
{
	var returnVariable:String="";

	var mug1:Mug=new Mug("White","14oz");

	//Fill mug with coffee
	mug1.mugContents = "Coffee";

	var mug2:Mug = new Mug("Silver", "8oz");
	mug1.setContents("Tea");

	var mug31:Mug = new Mug("Red", "6oz");
	mug1.setContents("Chai");

	var mug4:Mug = new Mug("Blue", "12oz");
	mug1.setContents("Hot Chocolate");

	var mug5:Mug = new Mug("Black", "10oz");
	mug1.setContents("Milk")

	outputMug(mug1);
	outputMug(mug2);
	outputMug(mug3);
	outputMug(mug4);
	outputMug(mug5);

	return returnVariable;
}

private function outputMug(mug:Mug):String {
	var returnVariable:String="";

	returnVariable=returnVariable + "Color: " +  mug1.mugColor + "\n";
	returnVariable=returnVariable + "Capacity: " + mug1.mugCapacity + "\n";
	returnVariable=returnVariable + "Contents: " + mug1.mugContents + "\n";
	returnVariable=returnVariable + "Temperature: " + mug1.mugTempurature + "\n";
	returnVariable=returnVariable + "Available Space: " + mug1.mugAvailableSpace + "\n";

	return returnVariable;
}

Not much extra code and lost of reuse.

This has been a very brief intro to Object oriented programming. There is a lot more to OO, but taking these first steps will reduce the amount of code you need to write as well as increasing the quality of your application.

Read Kelly Brown’s article on Unit Testing with FlexUnit

The datagrid fires off an event when the user is done editing. Setting up a handler for  DataGridEvent.ITEM_EDIT_END can be done right on the MXML or in ActionScript. The MXML version is very straight forward.

<mx:DataGrid
id=”dg”
dataProvider="{dgCollection}"
itemEditEnd="endHandler(event)"
editable="true">

The problem here is that this fires before the datagrid updates the data provider with the edits. In this case the endHandler function only has access to the original values.

As Paul Robertson notes in his article on this the DataGrid registers its own handler for this event. When adding event handlers you can optionally add a priority, and in this case the DataGrid handler is –50 in priority and our endHandler is using the default 0. Which means our function fires before the datagrid’s function.

In order to gain access to the updated results on the dataprovider we need to register our handler AFTER the datagrid updates the provider. To do this we need to switch over and user the ActionScript moethod of handler registration instead of the MXML style.

We register our handler in ActionScript with a priority less than –50

dg.addEventListener(
DataGridEvent.ITEM_EDIT_END,
endHandler,
false,
-100);

Now when endHandler fires it will be accessing the updated values

Here is the complete code

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"
creationComplete="creationCompleteHandler(event);">
<fx:Declarations>
<mx:RemoteObject id="ro" destination="DGSource" result="resultAllEvents" />
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;
import mx.events.DataGridEvent;
[Bindable]
private var dgCollection:ArrayCollection;
private function creationCompleteHandler(event:FlexEvent):void
{
dg.addEventListener(DataGridEvent.ITEM_EDIT_END, endHandler,false,-100);
}
private function resultAllEvents(evt:ResultEvent):void
{
var e:ArrayCollection = evt.result as ArrayCollection;
dgCollection=e;
}
public function endHandler(event:DataGridEvent):void
{
ro.saveOrUpdateEvent(dg.selectedItem);
}

]]>
</fx:Script>
<mx:Button x="168" y="10" label="Get Events" width="343" click="ro.getOperation('findAll').send();" height="21"/>
<mx:DataGrid
dataProvider="{dgCollection}"
id="dg" editable="true"
>
<mx:columns>
<mx:DataGridColumn headerText="Date" dataField="date"/>
<mx:DataGridColumn headerText="Title" dataField="title"/>
</mx:columns>
</mx:DataGrid>
</s:Application>

So what exactly do we mean when we talk about source control, or version control systems? Basically a source control system provides a central place to store your code and a mechanism to track revisions of that code.

Source Control

One common reason people start using a source control system is when more than one developer needs to access the code. There used to be a time when our live production system served as the central repository for accessing code. Jim had a task to update a webpage so, he would connect directly to the server and make a change to the file in the live environment. Bob may have a change to make and then go do the same thing. What about quality, what if there was a mistake or a file was accidentally deleted. To avoid this Developers may keep code in another location other than the live site. For individual developers this is typically on their computer. For multiple developers, this central spot may be a shared network drive. With that risk averted what else could go wrong?

What if Jim had a lot of changes to implement. Some core functionality needed to be changed and it couldn’t be done at one time. Typically Jim would grab a copy and keep it locally until it was finished then post it. Here’s the rub, after Jim takes the copy but before he puts it back, Bob goes on the server and makes a change. Later Jim posts his changes and overwrites Bob’s code. Geez thanks Jim.

Here’s where we start to see features of a source control system come in. In this case if they were using source control, when Jim tries to put his changes in, the system would alert him that other changes had been made since he pulled his copy.

Source Versioning

So what about this versioning concept, why do I care? Have you ever used undo on your computer? You know you make a mistake, hit ctrl+z and revert back to what you had before? Here’s a question, how do you revert back to something you had yesterday or last week. If you had something versioning your files you could do just that.

Say you’re doing a website and are making some wording updates to a promotion. You post the changes and a few weeks later your client tells you there’s a law suit over that change. Apparently a customer claimed the original promotion said one thing but the company say it was something else. How do you go back and see what really was on the site? Version control.

Another scenario, you have a functional application that your client is using in production. Now you have another customer who wants to use it too. You decide to update the application to accommodate more than one client. After a few weeks of tinkering you still can’t get things the way you want. It’s functional and in your central repository but not quite right. Your client comes back and wants a change to the app in production tomorrow. Your repository copy has the new changes in it, if you make the change now it will have your unfinished changes in it. With a version control system you can pull a snapshot of the code from before you started your changes and update it without affecting your in progress changes.

Getting started using a source version control system

There are a variety of free and fee based solutions. Some of the big names like ClearCase and Preforce sometimes show up in the big companies but the free solutions like CVS and SVN are more popular. CVS has been around for ages and had a huge following. SVN, also known as Subversion, started as an effort to fix some of the challenges that were in CVS. These days SVN is very widely used and is pretty much the standard.

Lets take a look at SVN. Most systems have a server component and a client component. The server piece is where your code is stored and the client is an interface for you to access that code. SVN is no different. You can go out and grab the server components then go get a client too. You don’t need to do this at this point though. For this example and for simple setups, the Subversion client TortoiseSVN has everything you need. So go ahead, down load and install it.

Once installed create a directory to act as your central repository. In this case I’ll create one at c:\repo. Navigate into that directory and right click. In the context menu choose TortoiseSVN -> Create repository here. Just like that you have a functional source control system.

Lets start using our new system. Before we do I need to clarify one thing. We just created a setup that mimics a server configuration. While this example is setup locally, it could ba on a server somewhere. The next step explains how you access that content and keep a useable copy locally.

We’re ready now to use our SVN instance. Find a place on your computer where you’ll be doing your work, maybe c:\workspace. Navigate into that directory and right click. In the context menu choose SVN Chekout. This will pop up a window asking you where your repository is and how you want to get the contents.

For the URL type in file:/// followed by the path to where you create the SVN repository earlier. This is not the working directory, rather the location of the repository. Since we installed this locally it will be something like file:///C:/repo but if this were on a server it could be http://someserver.com/repo

In this scenario we’re starting with the repository and pull the contents into our workspace. If you already had files in a workspace you could start there and push them into the repository with the import option on the context menu.

Using Your New Source Control System

Now that we have things setup lets try it out. Create a text file in your workspace called MyFile.txt. Add some content in it. Save and close. Depending on your version and setup the icon may differ but you’ll see a marker on your file like a question mark. This is telling you that this file is not in the repository or under source control. Since it is a new file we need to get it in there. Right click on a white space and choose

svn commit. The following popup will show you all files   that have been updated locally and are not in sync with the repository. you should notice that our file is listed, but is not checked. Since this is a new file we need to select it and have the SVN client add it to our repository. Make sure our file is checked and hit ok.  The confirmation screen will show that everything has been added and updated.

Now go back and make a change to that file again, Save it and take a look at the new icon.

This exclamation point tells us that this file, which is under version control, is out of sync with the repository. Again right click and commit changes.

Now all is good and we get a Green check mark.

So there you have it. The bare bones basics of getting going with a source control system.

In future posts we’ll be using source control systems in our examples which will give you more context how this fits into a development process. Even with this basic setup you’ll be able to point your IDE to this local repository and follow along. Don’t just use it for our examples though, you can keep versions of any file this way. Version your wedding list, or Photoshop files. Whatever it is, revision control systems provide a lot of value.

For now happy versioning.

So here you are, don’t want to buy Flex Builder but you do want to learn flex. Sure there is a 30day trial but what will you do after that?

There are a few tools available that allow you to code in ActionScript / Flex for free. One of the popular ones is FlashDevelop is a free IDE for developing apps for the Flash Platform. FlashDevelop is a basic IDE that provides code insight, project management, and integrated compilation. There are a few steps to install,such as pointing to the Flex3 SDK and the location of your Flash Player, but that’s it.

Create a new project, write some code and you’re good to go. Flex development with no strings attached.

Check out FlashDevelop, it’s a great tool for Flex development.

It sounds nice, but it may not be the best solution. Flash Builder seems to be a bit buggy when you choose this option. As of this posting it seems to incorrectly set the web context for the destination call when making the actual AMF call. More specifically it seems to use the “WebContent” value instead of “WebContext”. The result is that the calls are made to http://localhost:8080/WebContent/messagebroker/amf instead of http://localhost:8080/MyProject/messagebroker/amf. While this may be a bug in the beta version of Flash Builder there are other reasons not to trust this to your IDE.

When you set this up automatically, the config files are put into your WEB-INF/flex directory for you. When you edit these files, Flash Builder prompts you asking you if you really want to do this since they are generated files. Typically you would just hit yes and update the files. Here’s the rub. If you go under the project properties and change the server configuration the IDE may delete those files from the directory. In FlashBuilder if you remove the BlazeDS support after a project has been set up it removes the config files. Why would you do this if you were writing a BlazeDS app? Well maybe someone (me) was trying to fix the destination issue I previously mentioned by changing the WebContext setting. This setting happens to be locked down in an automated setup.

Finally when your application gets all growed up and wants to move out, you’ll probably want to move the build process to a command line utility. At this point you’ll have to know about the libraries, config files and compiler options anyway. So why wait, just set it up on your own to begin with.   FlashBuilder isn’t really doing that much anyway.

Set it up yourself

So where to begin. Lets talk briefly about the three main styles of setup that you’ll come across online. First is what we already mentioned, having Flash Builder setup things for you in a combined Flex J2EE project. The second way many sites discuss is creating a project for flex and pointing it to an existing server that’s running BlazeDS.  This is a more prevalent option and highlights the separation of concerns that actually exists in any final solution. The third method is to manually create a combined Flex J2EE project. This third option is more ideal for smaller projects.

Lets look at setting up Flash Builder with BlazeDS manually. Go ahead and create a new flash project. Select J2EE for server technology, but DON’T select use remote object access. I have WTP installed so I have Flash Builder create my web app for me by selecting Create combined J2EE/Flex project using WTP.

Finish the set up as usual. Now you’ll need that BlazeDS war everyone talks about. If you don’t have it yet go get it from the Adobe Release Builds page. You can just grab the Binary Distribution. The Turnkey version just includes a lot of stuff we don’t need right now.

Once you get the War we’ll need to import it into our project. Go to File –> Import then select Archive file under General. Locate the directory where you put the blazeds.war and switch the file type to *.* then select the war.

Now we don’t need everything in this war, sure you can import it all but lets keep things clean.

Deselect the META-INF, classes and src directories. Also you’ll need to change the import into folder field from <project> to <project>/WebContent.

Hit Finish and say yes to overwriting web.xml. See that wasn’t so bad and you just did most of what FlashBuilder did, simply by importing that war yourself.

There is one other thing we need to do before we’re done. The web.xml tells Java where to find the configuration files but we need to let flex know also. It’s pretty easy, just follow my lead.

Open up the project properties and head to flex compiler. See that field additional compiler arguments?  We’re going to update it.

We want to add a compiler option pointing to the configuration files. You can use either a path that’s in the classpath  or a physical location on your drive. We’ll use the latter. Update the Additional compiler arguments to include the following –services “C:\dev\MyProject\WebContent\WEB-INF\flex\services-config.xml” where dev is your workspace directory and MyProject is your project name. 

Hit OK  and you’re done.

Setting this up manually is a good practice and will make things easier later when we migrate to Maven and Ant. Stay Tuned!!!!

Main points we’ll cover

• Build the Java Class
• Expose the Class with Blaze on the server
• Configure Flex to find the Blaze service
• Build the Flex components to make the call

Build the Java Class

In your IDE switch to the Java view and create a new Java class. We’ll call it HelloFlex. Create a private variable called message. Set an initial value for this variable in the constructor. Finally create a getter method that returns the message string.

package com.grant;

public class HelloFlex {
private String message;
public HelloFlex(){
message="HI Flex. this is Java. How are you?";
}
public String getMessage(){
return message;
}
}

Expose the class with BlazeDS on the server

Under your web-inf directory you’ll fine a subdirectory called flex. Within there you’ll see the main config files blaze uses to set up the services. services-config.xml is the main file and has statements to include the others. For this example we’re creating a simple remoting service, so go ahead and open up the remoting-config.xml. Here’s where we’ll set up the configuration for our reomting service.

Blaze calls exposed services destinations. In this remoting-config.xml we’ll set up a destination that points to our HelloFlex class.

Under the default-channels create a new destination as follows.

    <?xml version="1.0" encoding="UTF-8"?>
    <service id="remoting-service"
    class="flex.messaging.services.RemotingService">

    <adapters>
    <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
    </adapters>

    <default-channels>
    <channel ref="my-amf"/>
    </default-channels>

    <destination id="helloflex">
    <properties>
    <source>com.grant.HelloFlex</source>
    </properties>
    <adapter ref="java-object" />
    <channels>
    <channel ref="my-amf" />
    </channels>
    </destination>
    </service>

Configure Flex to find the BlazeDS Service

Depending how you set up your workspace that set may already be done for you. In order for flex to know what channels and destinations are available, our application needs to know where these config files are. In Java, these files are in the class path and are included in the build process. In Flex we need to explicitly tell the compiler where these files are.

Right click on the project and choose properties. Under flex compiler you’ll see a textbox for additional compiler arguments. To configure the file location you’ll need an argument here called services which points to the location of your xml files.

You have two options now.

1) If the folder is part of your flex build path you can make a relative reference to the file using the –services=<file> format as follows. Notice the web-inf directory is not included in the definition. In this the folder containing the flex subfolder is on my build path.

2) If the folder is NOT on your build path you can point to the file location. This is the default method that FlashBuilder implements. We’ll use it for this example, however I suggest you move to a relative location style as soon as you can.

For an explicit file system location the flex option is slightly different. Here we use the –services “<file Location>” format. On my drive the option reads

–services "C:\FlashBuilder\dev\MyProject\WebContent\WEB-INF\flex\services-config.xml"

Build the Flex components to make the call

Now we can get back to our flex components and make the actual call. First flip back over to your Flex Perspective and open your main mxml file.

First we’ll define the service:

<mx:RemoteObject id="myService"  destination="helloflex" />

The id is the name you’ll reference this service elswhere in your flex app. The destination of helloflex needs to match the destination name you entered in your remoting-config.xml

Next we’ll move to some visual components. First lets add a panel to hold our controls.

<s:Panel width="100%" height="100%">
   <s:layout>
      <s:VerticalLayout/>
   </s:layout>
</s:Panel>

And add a text box to display some results

    <s:Panel width="100%" height="100%">
       <s:layout>
          <s:VerticalLayout/>
       </s:layout>

    <mx:TextArea id="result_text"/>

    </s:Panel>

Now we’ll add a button on the page to use the service

    <s:Panel width="100%" height="100%">
     <s:layout>
     <s:VerticalLayout/>
     </s:layout>

    <mx:TextArea id="result_text"/>
     <mx:Button label="Call Java" click="myService.getOperation('getMessage').send();"/>

    </s:Panel>

This is a direct use of the RemoteObject myService. This is not a best practice. Typically you would have a function managing your calls and the button would utilize that function. For simplicity sake I’ve included the direct call for this demonstration. In this example you’ll notice we use the getOperation function and pass in the java method name we want to call.

If you were to run this now you would see no results. We have yet to define what happens when the service gets called. Lets do that now.

Create a script block to hold our action script and add a simple method that puts the response of our service in our textbox.

<fx:Script>
 <![CDATA[
 import mx.rpc.events.ResultEvent;
 import mx.rpc.events.FaultEvent;
 private function resultHandler(evt:ResultEvent):void
 {
 result_text.text = evt.message.body.toString();
 }
 ]]>
 </fx:Script>

To use this function we’ll go back to the service and add a handler to manage all responses.

<fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
 <!-- DEFINE REMOTE SERVICES WE'LL USE -->
 <mx:RemoteObject
 id="myService"
 destination="helloflex"
 result="resultHandler(event)" /> </fx:Declarations>

Your completed code should look like this

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768">
     <fx:Declarations>
     <!-- Place non-visual elements (e.g., services, value objects) here -->
     <!-- DEFINE REMOTE SERVICES WE'LL USE -->
     <mx:RemoteObject
     id="myService"
     destination="helloflex"
     result="resultHandler(event)" />
     </fx:Declarations>
     <fx:Script>
     <![CDATA[
     import mx.rpc.events.ResultEvent;
     import mx.rpc.events.FaultEvent;
     private function resultHandler(evt:ResultEvent):void
     {
     result_text.text = evt.message.body.toString();
     }
     ]]>
     </fx:Script>
     <s:Panel width="100%" height="100%">
     <s:layout>
     <s:VerticalLayout/>
     </s:layout>
     <mx:TextArea id="result_text"/>
     <mx:Button label="Call Java" click="myService.getOperation('getMessage').send();"/>
     </s:Panel>

    </s:Application>

That’s it! Run the application and pat yourself on the back. Congratulations! Your first end to end Flex-Java app.

BlazeDS utilizes AMF to provide direct links between client and server objects. AMF provides access to objects through a binary protocol and eliminates the need to add additional tags that identify the object structure. It also reduces the work in flex to get the data back into a usable flex object.

Lets start working through an example by getting our workspace setup.

Initial Setup

Flex and Java both need to know about BlazeDS and where to look for the libraries and configuration files. FlashBuilder lends a hand with this by automating some of the process.

First things first, you’ll need to have FlashBuilder installed. The beta version can be downloaded at http://labs.adobe.com/technologies/flashbuilder4/.  Also check to make sure you have the WTP extensions installed in eclipse so you can automate creating the web application structure.

Finally for this IDE example we’re going to download the BlazeDS war from adobe at: http://opensource.adobe.com/wiki/display/blazeds/Release+Builds Just download the binary version, we don’t need the full turnkey for this. Once you have it downloaded, extract it to your drive, you should see the blazeds.war when you’re done.

In FlashBuilder create a new Flash project. Select J2EE Application server type. Select Remote object access with BlazeDS and the type. Select create combined Java/Flex using WTP. Click next.

On the next page, for the BlazeDS WAR file, point to the location where you extracted the files from Adobe. The system will pull all the jar files and configs from this war and add them to your project. Click finish.

You’ll notice that FlashBuilder loaded all the Jars and Config files as well as setting up the web.xml.

The web.xml tells java where to find the config files that BlazeDS needs. Remembering that Flex and Java are compiled separately and both need to know where configuration files are, lets find out where the IDE tells Flex about the config files.

Looking under the project properties under flex compiler you’ll see a compiler option is added for services.

NOTE: Without this compiler option Flex would not be able to find the BlazeDS services. When setting up blazeDS manually this flag will needed to be added by hand.

Java vs Flex: In Java the config files are loaded at run time. To change a value in the property file you simply need to restart the server to make it take effect. In Flex however this is a compile time include which means any changes to the files will need to be rebuilt into the application. Just a little note that may save you some headaches later.

That’s is for the setup.

Next time we’ll look at the code needed to use BlazeDS. Stay tuned.

If you ever have issues with Adobe Air App preferences look for the cache files on your drive. Mine were at C:\Documents and Settings\[user]\Application Data\TweetDeckFast.[guid] and C:\Documents and Settings\[guid]\Application Data\Adobe\AIR\ELS\TweetDeckFast.[guid]

Deleting these files fixed my problems and allowed for a clean reinstall.