What did we learn today kinder - Flex!

Well here we go again - nothing like midnightish programming. Today in webdev, we watched an Adobe Flex presentation on Flex Data Services. It had some really promising ideas (webcasts/chat rooms/games potentially). I had not had a chance to dive into Flex development yet so I thought this would be a good opportunity to kill two birds with one stone - learning Flex and integrating Flex with its Data Services.

As with any new language that you learn you have to start with the equivalent "Hello World" app which I did. It simply consisted of:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   <mx:Panel title="My Application" width="200" height="300">
      <mx:Label text="Welcome to Flex!" mouseDownEffect="WipeRight" />
   </mx:Panel>
</mx:Application>

After saving and running the app within the bundled Flex Builder Application it worked! Ok this is super (thanks for asking)! Well I'm in a groove now so I then moved on to "How to pull in an RSS feed with Flex" I followed along with the handy dandy tutorial that came with Flex Builder and it worked perfectly (Good job Macrobe).

Well this looks like a double win for me, time to do some real testing - Data Services. First off I installed the Flex Data Services with the embedded JRUN J2EE server installed (I have ColdFusion MX, but for simplicity I chose to do it with the embedded version. So far so good. I installed it and ran the "Start Integrated Flex Server" icon; allowed it access within ZoneAlarm; hit the web page: http://127.0.0.1:8700/ and viola!! a web page shows up. I tinkered with the sample apps and they are very interesting. In general this gives me a NetMeeting-esque feeling. NM was desinged for sharing a whiteboard, computer space etc with multiple users. This was back in the 90s and now we are accomplishing this with Flash. Java had stuff like this back in the 90s as well with RMI.

[inserting wild tangent here]
My first experience with RMI was with a guy named Harry Baya. Back then in the Computer Center of Hofstra University we held a web page contest every year showcasing new technologies. At the time flash was in version 4 so you can imagine all of the timeline based movies :-) Harry decided to work on a game in Java using RMI (Remote Method Invocation). His game was almost like a Monopoly type board game where different users would control different pawns. Unfortunately the game never really panned out, but he did get the RMI stuff working and multiple users could connect with a java applet to his central server and move pieces around. It was really mind blowing at the time. After that Shockwave came out with their version of an xml socket server which is still used today with many multiplayer games. And now back to the topic at hand - Flex Data Services
[/inserting wild tangent here]

So far so good, I can run the sample applications, but can I build my own? To quote Bob the Builder, "Yes We Can!" (well I only found that out after about a half hour of trying). So here we go:

First off, it helps to RTFM. I started with: Macrobe's Note's example. It seemed like a good place to start.

Here's a little Flex Builder info that I ran into - When you configure your project to use Data Services, it asks you for the WEB-INF/flex root folder. If you are working on the samples web app, you would specify the web root of:

C:\fds2\jrun4\servers\default\samples

And a url of:

http://localhost:8700/samples

Oh one more thing - by default JRUN runs off of port 8700 with this version. Now keep in mind that Flex Builder will create a folder with the project name that you choose. So in the documentation if you want to put this into the "DSLessons" folder as per the instructions, make your project name that.

I went through page by page looking at the code and copying it into my Flex Builder. I built an application called "lesson1" as per the instructions in Flex Builder (if I truly followed the instructions I would have used DSLessons, but you know I'm a bad ass). After that the directions said to add the "destination id" to the data-management-config.xml and had no problems in the sample area (especially since it was already there for me!). After putting all the code into Flex Builder and compiling and opening two browsers, Viola, it worked! Here is my sample code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" creationComplete="initApp();">
   <mx:Script>
   <![CDATA[
   /* IMPORT STATEMENTS */
      import mx.data.DataService;
      import mx.data.events.*;
      import mx.rpc.AsyncToken;
      import mx.rpc.events.*;
      import mx.messaging.events.*;
      import mx.utils.ObjectProxy;
      /* GLOBAL VARS */
      public var noteObj:Object = new Object();
      public var getToken:AsyncToken;
      private var ds:DataService;
      [Bindable]
      public var noteProxy:ObjectProxy;
      
      public function initApp():void {
         ds = new DataService("notes");
         ds.addEventListener(ResultEvent.RESULT, resultHandler);
         ds.autoCommit = false;
         noteObj.noteId = 1;
         noteObj.noteText = "Type your notes here and share them with other clients!";
         getToken = ds.getItem(noteObj, noteObj);
      }
      
      public function resultHandler(event:ResultEvent):void {
         if (event.token == getToken)
            noteProxy = ObjectProxy(event.result);
      }
      
   ]]>
   </mx:Script>
   <mx:Binding source="log.text" destination="noteProxy.noteText"/>
   <mx:TextArea id="log" width="549" height="216" text="{noteProxy.noteText}" x="27" y="24"/>
   <mx:Button x="269" y="265" label="Button" click="ds.commit();"/>   
</mx:Application>

UPDATE 1/6/2007!
Click here for the project files - including mxml