Now, onto why I’m posting today, along the way I found some annoying things about how FlexBuilder played with the SDK.  For instance, the .flexLibProperties file that is hidden in your FB project, is not the right format to be taken in as a parameter to “compc” ( the library compiler, which seems to require a list of class names to include ), so I wrote a quick Python script to convert that file into a config file that is readable by compc.  Here is how to include it in your Ant script:

<target name="setupClassList">
    <exec executable="python" failonerror="yes">
        <arg line="${helperDir}/classFileConverter.py ${lib_root_dir}/.flexLibProperties classes.xml"/>
    </exec>
</target>


 

It takes in two parameters so you can manipulate the output location of the new file.
Another odd part is that the application descriptor for an AIR project doesn’t get correctly populated.  FB itself fills in the <content> tag for you when it goes to compile.  If you look in your source directory the application descriptor has this string, “[This value will be overwritten by Flex Builder in the output app.xml]” instead of the name of the SWF.  One more little python script:

<exec executable="python" failonerror="yes">
    <arg line="${helperDir}/appDescrFix.py ../bin-debug/${app_descriptor}"/>
</exec>

Of course, I am going to give you the scripts!  Here are the links:
.flexLibProperties Converter
Application Descriptor Fixer

If someone knows a much easier way to do this just using the command line tools and/or Ant, I’d love to hear it!

Let’s start off with one of the simpler examples just to get the hang of it.  Use SAPLink and install this function group and generate a web service from the one function in it.  Now, lets write some Flex code to call this.

Import Statements

A few people have asked me to add the import statements to this.  For reference if you go to the object that has the error, move your cursor to the end of the word hold control and press space the import will be added for you automatically, welcome to the wonderful world of a good IDE.  But the following in a <mx:Script> block between the <mx:Application> tags.

import mx.rpc.AbstractOperation;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.soap.LoadEvent;
import mx.rpc.soap.WebService;

Simplest Example

Step 1 – Get your WSDL

1 private function callWebService():void{
2     fooService = new WebService();
3     fooService.wsdl = "http://localhost/sap/bc/srt/rfc/sap/Z_TEST_CHANGING_PARAM?sap-client=300&wsdl=1.1";
4     fooService.addEventListener(LoadEvent.LOAD, loadListener);
5     fooService.addEventListener(ResultEvent.RESULT, resultTrigger);
6     fooService.addEventListener(FaultEvent.FAULT,fault);
7     fooService.loadWSDL();
8 }

Line by Line:

1. Declare a function that will start the whole process
2. Create a WebService object, this should be global or at least visible to the other methods ( you’ll need it later )
3. Point the WS to the location of the WSDL
4. Add an EventListener for when the Loading of the WSDL is complete
5. Add an EventListener for the results coming back from the call
6. Add an EventListener for any errors that occur
7. Tell the WS to load the WSDL

Step 2 – Set Some Parameters

1 private function loadListener(event:LoadEvent):void{
2     var op:AbstractOperation = fooService.getOperation("Z_DOUBLE_ROWS");
3     var input:Object = new Object();
4     input.TEST = new Array();
5     input.TEST.push("foo");
6     input.TEST.push("bar");
7     op.arguments = input;
8     op.send();
9 }

Line by Line:

1. Declare a function who handles the event you subscribed to in the Step 1 line 4.
2. Get the Operation from the WSDL file.  This is one of those “standard” ways of doing things.  If you look at your WSDL file you will see that it could have more then one operation in it, this gets the particular operation you want to call.
3. Create a dynamic object that will hold the inbound parameters to your WS.  In this case the parameter TEST is a table of strings.
4. Here we create what Flex builder thinks is how to hold  a table, an Array.
5. Then we push each “row” of the table into the array again, in this case it’s just one string at a time.
6. See Line 5
7. We then map the input object to the arguments of the WS.
8. Send our request including all the input data to the server

Step 3 – Look at the Output

1 private function resultTrigger(event:ResultEvent):void{
2     var item:String;
3     for each(item in event.result){
4         trace(item);
5     }
6 }

Line by Line

1. Define a function to handle the event from section 1 line 5
2. Declare on object to hold each result
3. Loop at each item in the result list, which happen to be strings.
4. Print them out to the debug console

I will talk about more advanced parsing of the result set later on.

Inbound Table Parameter

First, get your WSDL, in this case I will be using the FM BAPI_FLIGHT_GETLIST from the SFLIGHTS example we are all so fond of.  You should run this FM a few times to make sure you have data on the ABAP side, I will be passing in a date range to this FM so, you might want to find two dates that return some data for you. ( I named my WebService “Z_GET_FLIGHT_LIST” )

Step 1 – Get Your WSDL

This is the same exact thing you did before, just with a different WSDL.

Step 2 – Set some Parameters

There is a strange behavior with ABAP WebServices where if you have a table that is both Input and Output you must pass it as part request to get it filled.  You’ll see in a second:

1 private function loadListener(event:LoadEvent):void{
2     var op:AbstractOperation = fooService.getOperation("BAPI_FLIGHT_GETLIST");
3     var input:Object = new Object();
4     input.FLIGHT_LIST = new Array();
5     input.RETURN = new Array();
6     op.arguments = input;
7     op.send();
8 }

Line by Line

1. Define a function that handles the event
2. Get the right operation
3. Dynamic input object
4. You have to pass blank parameters to the WS so that the Web Application Server will fill them
5. See line 4
6. Same as last time
7. Same here

Set Table Parameters

1     var dateRangeRow:Object = new Object();
2     input.DATE_RANGE = new Array();
3     dateRangeRow.SIGN = "I";
4     dateRangeRow.OPTION = "EQ";
5     dateRangeRow.LOW = "2002-12-20";
6     dateRangeRow.HIGH = "";
7     input.DATE_RANGE.push(dateRangeRow);

Line by Line ( add this between lines 5 and 6 from the prior example )

1. Create a new dynamic object that holds a Row of the DATE_RANGE table
2. Create an array called DATE_RANGE which will map to the DATE_RANGE input parameter
3. Set each field dynamically
4. More fields
5. More fields
6. More fields ( don’t need to pass this one because it’s blank )
7. Push this row into the array

Step 3 – Look at the Output

1 private function resultTrigger(event:ResultEvent):void{
2     var row:Object;
3     for each (row in event.result.FLIGHT_LIST){
4         trace(row.AIRLINE + " " + row.CITYFROM);
5     }
6 }

Line by Line

1. Function, again.
2. Use a place holder dynamic object
3. Loop at the table called FLIGHT_LIST ( looks like ABAP doesn’t it? )
4. Print to the console the fields you want ( looks like ABAP doesn’t it? )

Disclaimer: There are a number of ways to call WebServices in Flex, I believe this is the most complete and “standard” way to call them, if not someone please point me to Adobe docs that show the most correct way.

Looks pretty normal till you wait for the last line to scroll by:

Don’t know what the deal is with Zuckerman’s Mom but, hey if you need that bug fixed in the SDK just send a pie over.

UPDATE 11/02:

Deepa Subramaniam from the Flex SDK team was kind enough to shed some light on this for me:

Banana Cream Pie is a favorite treat of the FlexBuilder folks. Us SDK’ers are more partial to Peanut Brittle….
sugar = our friend.

So it turns out if you have a Flex Builder issue, Banana Cream Pie, if it’s a SDK problem Peanut Brittle c/o Deepa.

ODE2Paper

ODE2Paper is the main visualization and physics library I wrote that underpins the Majority Desk application.  It binds the Open Dynamics Engine (ODE for short), which is the underlying physics system to Papervision3d (PV3D for short), the 3d rendering system.  The foundation of this interaction is actually very simple: every time Flex fires an ENTER_FRAME event I issue a refresh command over a socket that is connected to the physics server.  The physics server is a python application that uses pyODE to wrap the ODE libraries.  The physics server “parses” the refresh command,

<refresh/>

iterates across all the objects in its world producing a new XML document with the position and transformation matrices of all the existing objects and sends that XML back to Flex. 

<world>
    <o1 x="0.0" y ="0.0" z="0.0" r0="0.0" r1="0.0" r2="0.0" r3="0.0" r4="0.0" r5="0.0" r6="0.0" r7="0.0" r8="0.0"/>
    <o2 x="10.0" y ="15.0" z="10.0" r0="0.0" r1="0.0" r2="0.0" r3="0.0" r4="0.0" r5="0.0" r6="0.0" r7="0.0" r8="0.0"/>
<collisions/>
</world>

When this data transfer is complete on the Flex side, I move all the objects in the PV3d scene and then call the camera render.  Simple right?

A Wii bit of background

The Wiimote is a blue tooth transmitter, it reports its position and state to the blue tooth receiver on the client computer.  It determines its position by “looking” through the IR port on the front of the Wiimote at the poorly named sensor bar.  The sensor bar in reality has no sensors in it — it has two IR emitters that allow the Wiimote to triangulate its X and Y position in space.  The Wiimote also has an accelerometer on board that allows it to measure movement in the X, Y, Z planes (pitch, yaw, and roll).  This page has a mountain of technical detail about the Wiimote.

WiiFlash

The information from the Wiimote is sent to the WiiFlash server.  WiiFlash removes all the complexity out of using Wiimotes to control any Flash application.  The API is pretty complete and we found it to be fairly stable.  This is the section Eddie dealt with most so, I can’t talk too intelligently about it except to say that we use the WiiFlash AS3 API to access all the position and button state information from the Wiimote.  The API handles all the calls through a local connection that streams the information from the projects WiiFlash Server, which for now only runs on windows, sorry Mac faithful. 

This pretty much rounds out the subsystems that lie underneath the application.  This doesn’t really explain how the thing works so, I will walk you through how the Wiihands move around the screen to hopefully give you a better idea of what is going on.

Moving Wiihands

The most common thing we do in Majority Desk is move our Wiihands to interact with the world.  To allow interactions with the state of the physical world maintained by the physics server we have a set of commands in ODE2Paper.  The ones that matter for the Wiihands are createSphere, setObjPos, createJoint and breakJoint.  These methods serve as proxy for the real commands flying over to the physics server.  The rationale for this is again the main underlying concept that the physics server knows where the objects are and PV3d simply renders them.  So all the interactions are really taking place on the physics server.  The Wiihands are represented in the physics system as sphere because they are in reality just a cool texture wrapped on a sphere in PV3d.

So as a Wiimote moves we get its position and call a setObjPos method in ODE2Paper library which moves the object in the physics server.  Again the physics server leads and PV3d simply renders a view of the world.

Grabbing stuff

If you got the chance during Hacker Night or our Meet the Jammers session to mess with Majority Desk you may remember that if you hold the trigger and bump into something with your Wiihands you can grab it.  Letting go of the trigger will release the object and let it float around again.  This is achieved using the collisions XML node that I didn’t talk about earlier.  If you look back at the XML doc that the physics server creates to represent the world you will see an empty node there for collisions.  ODE2Paper notifies our Flex application that two bodies are about to collide via this XML node.  This allows us to detect that the Wiihand is touching something and then build a joint, using the ODE2Paper method createJoint.  A joint is a type of attachment between two bodies in ODE, we use simple static joints but a whole slew of different joints types are supported by ODE.  This is why the widget seems to follow a Wiihand around as it moves.  The great thing is this affect is achieved by just calling setObjPos on the Wiihand, which is the normal behavior described previously.   To release the object we simply call breakJoint and the physics server breaks the joint allow the attached object to move fluidly again.

If you want a run down of links and a good video that shows Majority Desk in action, check out Eddie’s blog post about it.

It seems that most people fall in the latter category.  I’ve already spoke to a number SDNers from all different industries who see how they can use this type of interface in a broad range of applications.  A airplane manufacturer navigating large engineering drawings to business people visualizing data sets in 3d to see patterns.  This was the reaction we were hoping to create in the community a true sense of innovation and possibility.  It’s also been a blast watching people mess around with the interface.

Here are some great photos from hacker night with Mark Finnern and Marilyn Pratt messing around with Majority Desk.

Big thanks to Coté at Redmonk for getting this video up so quickly!

For those of you at TechEd you can drop by the clubhouse at 5 to “get your Wiihands on” MajorityDesk.

Also we will be talking about the architecture and the OSS we used at this evening’s hacker night.

Thanks to a great tip from Matt Chotin, from Adobe, in the comments of my previous post I take a massive step forward in the UI department.  Again, the Open Source gods ( is this open source? ) work their magic to give me an even more useful component:  SpringGraph from another Adobe Engineer ( seeing a pattern are we ) named Mark Shepard.  He hasn’t blogged in some time, so I’m not sure he is still doing stuff with Adobe/Flex or blogging but, his component totally rules and fits my needs pretty closely.  Here is the original SpringGraph Demo and the Roamer Demo which is like the SpringGraph just with nodes hidden or collapsed ( which may be the final component I use ).  Well onto, what I’m trying to do:

Shiny New Object

First things first, time to see what makes the SpringGraph tick.  Given my limited knowledge of all things Flash, I had to piece together how the main body of his MXML file even worked. 

<fc:SpringGraph id="s" backgroundColor="#ffffff"
    lineColor="#333388" left="0" right="0" top="0"
                    bottom="0"
                    itemRenderer="AmazonItemView"
                    repulsionFactor="{rep.value}"
    >
</fc:SpringGraph>

It took me a few minutes to understand the beauty of the itemRenderer system built into Flex.  If you check out the other source objects in Mark’s project you will notice AmazonItem.as and AmazonItemView.as.  Think of this as a mini MVC subsystem.  With a collection of AmazonItem-s being the model, the SpringGraph control being the controller and the AmazonItemView obviously being the view.   This is made clearer when you add the following AS3 snippet to the mix

private var items: Graph;
public function addItem(id: String, name: String,
               linkTo: AmazonItem): AmazonItem {
    var newItem: AmazonItem =
               new AmazonItem(id, name);
    items.add(newItem);
    if(linkTo != null)
        items.link(newItem, linkTo);
    s.dataProvider = items;
    return newItem;
}

What is happening here?  Well as you call the addItem function an instance of the model, AmazonItem is created and added to collection.  This collection is then bound to the dataProvider of the SpringGraph.  When SpringGraph is drawn on the stage it loops at this dataProvider and instantiates a view object named itemRenderer for each item in the dataProvider.  So this allows you to completely change what the SpringGrid is rendering on your behalf — pretty cool, huh?

My “Model”

Now that I think I understand how that component works I need a place to store some data about a Twitter user.  Normally, you could just create a basic class and use that but, in the case of this component it seems you need to subclass the delivered Item class.  Once again, no big deal.  Created a new class called TwitterPerson.  That class has a few attributes:

public class TwitterPerson extends Item
{
    [Bindable]public var screenName:String;
    [Bindable]public var name:String;
    [Bindable]public var profile_image:String;

These will store the data returned from the API, I’ve named the attributes nearly the same as the API to make it easier to follow.  The attributes are bindable so that as I fill in the information the “view” will update automatically.  The constructor is uber-simple:

public function TwitterPerson(xml:XML){
    screenName = xml.screen_name;
    name = xml.name;
    profile_image = xml.profile_image_url;
}

To make it as easy as possible to construct the TwitterPerson I just pass in an XML node and map the parameters myself.  If you check out the API you will see that the two services I use “statuses/friends/” and  ”users/show/” return different data but have the same information about each person with the same attribute names ( thanks for the consistency Twitter guys! ).

My “View”

The other piece I need to construct is the view that the SpringGraph will call to render the data stored in the model.  For right now all I want to do is put the picture of the person being rendered up there and give a tool tip for their name.  Flex makes something like this so easy it’s barely worth mentioning but for completeness:

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Image source="{data.profile_image}"
        scaleX="1" scaleY="1"
        toolTip="{data.name}"/>
</mx:VBox>

Two Heads are better then one but One’s a start

Back in the main MXML of our application things have changed a bit:

<mx:HTTPService id="myInfoService"
    url="http://twitter.com/users/show/dan_mcweeney.xml"
    resultFormat="e4x"
    result="onMyInfoServiceResult(event)"
    fault="onMyInfoServiceFailed(event)"
/>

<fc:SpringGraph id="springLayout"
    backgroundColor="#ffffff" lineColor="#333388" left="0"
    right="0" top="0" bottom="0"
    itemRenderer="TwitterPersonView"
    repulsionFactor=".80" canDragNodes="false"
/>

You can see how nice and clean the SpringGraph is to use it was basically a one for one swap of other component.  Another change here is method used to fetch the data.  As you will see in the next section I leave it up to the Model class itself to determine how their friends are, hopefully this will be a good decision architecturally, so the start of the application is to just call the send method of the myInfoService HTTPService.  The result event is then triggered and that’s where everything gets stuck back together again.

At this point if you are following along, which I’m fairly certain no one is, you should get one head floating in the middle of a big white background, yay!  Although the astute observer will notice that I snuck a new method into that last snippet of code: “person.getFriends()”. 

Model^2 Math.pow(Model,2)

As I mentioned eariler I have now moved the getting of friends into the Model.  I did this to hopefully make it easier for some ideas I have in the long run but also to see how to make a HTTPService entirely in AS.  All this method does is ask the Twitter API to for the user’s list of friends:

 1 public function getFriends():void{
 2     var friendsService:HTTPService = new HTTPService();
 3     var friends:Array = new Array();
 4     friendsService.url =
 5        "http://twitter.com/statuses/friends/"  +
 6        screenName + ".xml";
 7     friendsService.resultFormat = "e4x";
 8     friendsService.addEventListener(FaultEvent.FAULT,
 9         friendsFault);
10     friendsService.addEventListener("result",
11         friendsResult);
12     friendsService.send();
13 }

The only remaining mystery is what happens in the friendsResult method which gets bound to the “result” event on line 10-11. 

private function friendsResult(result:ResultEvent):void{
    var friendsArray:Array = new Array();
    for each (var userEntry:XML in result.result.user){
        friendsArray.push(new TwitterPerson(userEntry));
    }
    sevenDegress_2(Application.application).
          onAddFriends(this, friendsArray);
}

When the friends HTTPService returns it has a list of all the user’s friends and their current status.  The method just pushes these newly minted TwitterPerson(s) into an array and then calls another mysterious method from the application that contains it.  I don’t know if this is the best way to do this or not — seems like a bad case of statically linking these two objects but it seemed like the easiest way at the time.  This line of code gets the root Application object’s attribute called application and invokes a method on it.  For this to work at compile time though you need to cast that application attribute over to to the specific type of your application hence that funky, sevenDegrees_2 thing you see there.  The source code to that one extra method is also pretty straightforward thanks once again to Mark’s Graph class:

public function onAddFriends(node:TwitterPerson,
        friendsList:Array):void{
    for each (var person:TwitterPerson in friendsList){
        people.add(person);
        people.link(person, node);
    }
}

When the friends HTTPService gets a result it passes it back up to the application which in turn modifies the data provider by adding the new nodes ( via the add() method ) and then linking them to each other ( via the link() method ).  This should now produce the pretty little Poof ball like below:

Hatchet Attack

This control is actually a little too useful for my needs, I don’t really want anyone to be able to drag folks around once they have been placed on the screen so, I have to delve into Mark’s control and get rid of that functionality.  This turned out to be a fairly straightforward:

 1 private function mouseDownEvent
 2        (event: MouseEvent):void  {
 3     var now: int = getTimer();
 4     if((now - lastMouseDownTime) < 300) {
 5         // it's a double-click
 6         var node: GraphNode = _dataProvider.findNode(
 7                 UIComponent(event.currentTarget));
 8         if(node != null) {
 9             dragEnd(event);
10             if(Object(node.view).
11                 hasOwnProperty("doubleClick"))
12             Object(node.view).doubleClick(event);
13         }
14         return;
15     }
16     lastMouseDownTime = now;
17     if (_canDragNodes)
18         dragBegin(event);
19     event.stopImmediatePropagation();
20 }

Beyond the addition of line 17, the only other thing I needed to add was one parameter _canDragNodes ( and its’ getter and setter methods ).  Although it is truly tons of fun to drag the seed member of the graph around and watch all their Twitter Friends fly after them — it’s not really useful.

If you want to see it running live, meaning you really think I’m a liar, here is a link to the Current Version of 7DegreesOfTwitter.

I also have wanted to build a Twitter ( hanger-on ) application that shows you your web friends and their friends and their friends and so on — think 6 Degrees of Kevin Bacon but, for Twitter.  I’ve thought about the visualizations for this and feel that Flex/Flash is the only way to go, which I luckily no nothing about!  So, tonight is the first episode of stuff I wish I knew about Flex while building 7DegreesOfTwitter.

I will only be working on this at night and on the weekends so, progress will be slow and sometimes painful.  I may even try and post nightly “builds” somewhere so people can see what I’m up to help give me pointers where required.

A Plan

Here is what i think the visualization should look like ( yes this was done in MS Paint, hopefully I am a better programmer then artist ):

Basically, you should see all your friends circled around your portrait then as you click on a friend it will shift the view so that your friend is now the focus on the screen, and you can move along your web of friends exploring other people’s connection.  Obviously, this whole visualization is rife with opportunity.  Adding some cool like the Mac doc magnify feature would be pretty cool, or even maybe have the whole thing look like a horizon instead of a flat web of people.

First Day 

First thing to do is get two chunks of data out of Twitter using the Twitter API.  The first bit is your list of friends:

    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            public var myInfo:XML;
            public var friends:XML;
            private function onFriendsResult(result:ResultEvent):void{
                friends = XML(result.result);
            }
            private function onFriendsFault(result:FaultEvent):void{
                var error:XML;
                error = XML(result.fault);
            }

        ]]>

    </mx:Script>

    <mx:HTTPService id="friendsService"
        url="http://twitter.com/statuses/friends/dan_mcweeney.xml"
        resultFormat="e4x"
        result="onFriendsResult(event)"
        fault="onFriendsFault(event)"/>

So basically, this is all it takes in Flex to get data from a web service and parse it into an XML document that is easily traversable.  If you don’t know what E4X is neither did I — go read the Wikipedia entry about E4X then have a look at the W3Schools Tutorial on E4X.  Just remember it’s actually a lot easier then you think, no big scary XSLTs here.  The next thing to do was the other piece of data I need, in this case it’s your mug shot associated with your Twitter account:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="friendsService.send()">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            public var myInfo:XML;
            public var friends:XML;
            private function onFriendsResult(result:ResultEvent):void{
                friends = XML(result.result);
                myInfoService.send();
            }
            private function onFriendsFault(result:FaultEvent):void{
                var error:XML;
                error = XML(result.fault);
            }

            private function onMyInfoServiceResult(result:ResultEvent):void{
                myInfo = XML(result.result);
                myMug.source = myInfo.profile_image_url;
            }
            private function onMyInfoServiceFailed(result:FaultEvent):void{
                var error:XML;
                error = XML(result.fault);
            }
        ]]>

    </mx:Script>
    <mx:HTTPService id="friendsService"
                    url="http://twitter.com/statuses/friends/dan_mcweeney.xml"
                    resultFormat="e4x"
                    result="onFriendsResult(event)"
                    fault="onFriendsFault(event)"/>
    <mx:HTTPService id="myInfoService"
                    url="http://twitter.com/users/show/dan_mcweeney.xml"
                    resultFormat="e4x"
                    result="onMyInfoServiceResult(event)"
                    fault="onMyInfoServiceFailed(event)"/>
    <mx:Image id="myMug" source="" horizontalCenter="0" verticalCenter="0"
                     width="48" height="48"/>

</mx:Application>

Major additions here are a a new HTTPService to grab my information and also a small slight of hand to keep the two asynchronous services at least somewhat in sync.  In the onFriendsResult function I call the next HTTPService.  This is an easy way to create simple dependencies among asynchronous requests.

The Layout

I started tonight to try and write this myself — and I soon realized I was probably in over my head.  I got up to the point where I am able to calculate the correct radius for a circle to easily hold all of the objects and then where their positions should be in radians around the circle.  The thought of having to write this in Flex made me want to jump out a window, so I thought to myself — maybe someone has already done this. Just then the Red Sea was parted and the open source gods smiled upon me.  Circle Layout was created by Sho Kuwamoto, an Adobe Engineer, it does exactly what I want in terms of layout and some other snazzy stuff with drag and drop.  Here is a demo of the Circle Layout for Flex just press the “Change to Circle” button to see what I am talking about.  It’s a pretty impressive bit of code for my needs though I need to get rid of the drag and drop bits but, for right now I will leave all that in.

So here is the the running code for Iteration 1 of the 7DegreesOfTwitter.  If you want the source just right-click the movie and use the “View Source” menu option.  When asked for a username and password just use your Twitter Log-in info.

Current issues:

• Only works for me!
• No clue what will happen when you have lots of friends

Next time?

• Create a hover over for the images to at least show the name
• Come up with a way of Clicking on a person then moving to their “circle”

If you find more issues in the code just post a comment — if I’m doing something totally silly please tell me that too!

Once again big thanks to Sho Kuwamoto for saving me having to do any real programming

It’s an Adobe( formerly Macromedia product ) so creating very attractive user interfaces is so easy, especially when compared to most SAP delivered options. The best comparison I guess for Flex Builder would be WebDynpros as you can quickly throw together a UI and bind data to it. However, unlike WebDynpro the delivered Flex components are extendable and skinnable. Not only that but you can go as far to build your own Flex components and use existing open source libraries of Flex components. So your options are really limitless.

In working with the tool for a few days the ability to “have your cake and eat it too” in Flex is really nice. You have the ability to do most simple tasks via MXML, the Flex version of a UI layout language, but when you need to really affect how the component responds you can sub-class it in AS and do whatever you want to it.

If you plan on working with Flex and SAP, get Flex 3. The webservice handling in Flex 2 was not very good when used with complex types in webservices. I was losing whole outbound parameters — not good. However, after downloading Flex 3 its seems they have fixed all these problems.

Some of the documentation is still a little disorganized. I found it really hard to find examples of the Advanced Datagrid but, I am in a giving mood so here is the direct link to download Advanced DataGrid Examples, thanks to the Yahoo! Flexcoders group for handing that out. I am sure as they move forward they will better integrate their documentation.