I am working on a little AIR application that stores data both locally (SQLlite) and on a web service (PHP/MySQL) that I’m building in parallel. When the app starts, it requests initial data to populate a pair of DataGrids in the AIR app. I’m sending a URLRequest against a URLLoader with simple params and getting back XML. I am then looping through the items in the returned XML and adding them to an ArrayColletion that acts as the data provider for each DataGrid in the UI.

To bridge the data, I’m storing each item in a value object, so it is easier to reference the item’s properties when viewing and modifying data chosen (and moved around) in the DataGrid. I’m using a nifty trick which seems to be working great for mapping the XML child’s value right to the value object property. Take a look and see if this works for you:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

private function resultHandler(e:Event):void
{
	var resultXML:XML = XML(e.target.data);
	var items:ArrayCollection = new ArrayCollection();
	var item:itemVO;
	// Convert XML to ArrayCollection
	for each(var itemXML:XML in resultXML.item){
		item = new itemsVO();
		for each (var itemProp:XML in itemXML.children()) {
			//Use XML node name to reference matching property in value object				
			item[itemProp.name()] = itemProp;
		}
		items.addItem(item);
	}		
}

Of course, this only works if you create properties in your value object that match the xml nodes you are returned (or that are being returned) from the web service’s XML.

I’m working on my demo code and presentations for several events this fall. Here is a little preview:

This past weekend while driving around, I was reminded that you can’t easily escape work. Over a 24 hour period, I encountered the following two Adobe/Flash scenes from behind the wheel – both indication that Adobe and Flash Platform are on the up and up:

Apparently, someone has done very well for themselves designing intro animations and coding ActionScript 1.0. Congrats to this 500 series driver, f8-ing their way to the ultimate driving machine.

And while I had heard of a new, mega Adobe office in Waltham, MA, seeing this giant building was a complete surprise. The parking structure seems bigger than the office, but “The Future Home of Adobe” just outside of a Boston is a great sign of growth for the company set to tap on the huge innovation of Boston students. Ironically, this building sits across highway 128/95 from where Microsoft ‘used to be’.

* Author’s note: I’ve been writing pretty intensely on my blog of late, so I wanted to lighten things up a bit today. I’m not usually one to snap photos of work-related stuff from the road. This was fun and I’m going to try and do it more.

I woke up in Flash Professional today and realized that developing with Flex so much the past few years has finally changed the way I code Flash Platform apps. For better or worse, working with the RIA framework known as Flex has changed my approach, practice and sense of virtual space as I develop applications.

I’d say that over my 10+ year career coding Flash Platform apps, experiences, intros and animations, I’ve still spent more aggregate time in the Flash IDE environment. On stage, presenting at conferences, I have proclaimed that I am a Flash Platform switch hitter, comfortable in building apps from both sides of the Flash Platform plate. Yet the phase of my career where I’ve really grown as a developer, mostly when I was migrating from AS to AS2, and subsequently from AS2 to AS3, has been spent working with Flex.

As recently as 4 years ago (I know, that’s like 14 in technology years), I was approaching applications much differently. I’d start with layout, color, interaction, transitions, sound and all the other “cool” and “flashy” elements that made rich internet applications rich — before they were actually rich. Code came last, if at all. And there was a time where many of the projects I worked on had minimal code because working with timelines and stage-created symbols came so naturally to me.

Now, I’m completely reversed. Flipped around. A new kind of developer. My approach starts with framework, structure and logic. I think about what classes I’ll need, what approach I’ll take (MVC? Frameworks?), and what 3rd party libraries or components I need to include. And when the app is finally coded, I look at the skeleton of an interface my UI control/component-dependent approach has given me and pray there’s a good designer waiting (or even a simple, snap-in theme waiting for me on scalenine.com).

So now, back in Flash Pro for a bit, I am totally ignoring the stage. I’m avoiding doing much in the software all together, other than dragging some staple UI controls from the components panel to my Library. I jump into FlashDevelop or FlashBuilder (which I still call FlexBuilder) and write ActionScript there. When I’m ready to see my work, I say a prayer and compile, confident it will work well, but hoping it will look decent enough.

Back in the day, I would have known quite well what my app would look like before I coded it. That’s far from reality now. So is this the way I really want to be building apps? Has it made me a more seasoned and valuable developer? Probably, but it really depends on the project at hand. Has this improved performance, size, efficiency, scalability of my apps? Again, it really depends on the project at hand.

So, in conclusion, this doesn’t really matter in the grand scheme. As technology, the industry and demands have evolved, so have I. And don’t get me wrong. If you’re still perfectly comfortable and successful working in Flash Pro, that’s just as good. Developers like me need you now more than ever.

At one point I was going. At one point I was speaking. Unfortunately, for me, I’m unable to do either this year. For the first time since the original 360Flex, I won’t be attending the event next week in Indy. And it just sucks for me.

This event is the best, in my opinion, for all levels of Flex developers. You simply don’t have direct and personal access to so many talented presenters and session as you do with 360Flex. It’s the lowest cost event, by far, and the organizers, Tom and John, work very hard to keep it humble and simple.

They’ve done a great job profiling the speakers and sessions this year. Here’s a link to the schedule, and you’ll see some amazing names and topics being featured.

My boy Wes Leonardo, from Ribbit, will be presenting some cool AIR stuff. Also, if I were going, I would not miss Joe Johnston’s FLEXperience session, all about UX in Flex!

I’ll miss hanging with everyone, but I’m sure it’ll be an awesome event.
And if you’re not going, and CAN go, you owe it to me to go to http://360flex.eventbrite.com/ NOW and register.

Have a great time and good luck with what I’m sure will be another incredible event for the community!

I’m working on a Ribbit Directory demo app and started exploring data binding with E4X. Basically, I created a php service, anchored with a simple MySQL database, that serves up XML to the Flex app. I feel a little late to the game with E4X, but who cares. It rocks! I’ve meddled so much with looping through XML, loading it into a Bindable Array and mapping that Array as a dataProvider — I figured it was time to explore a more optimal way.

I’ll be releasing the entire app over on http://labs.ribbit.com when it’s done, but here’s some basic code snippets to help you explore this amazing feature of Flex.

Loading the XML from the php service is pretty standard. I’m passing a variable in the URLRequest to support some simple search/filtering…

140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162

private function loadDirectoryXML(search:Boolean):void
{
	var loader:URLLoader = new URLLoader();
	var request:URLRequest = new URLRequest(directoryDataURL);
	loader.dataFormat = URLLoaderDataFormat.TEXT;
	if (search) {
		request.method = URLRequestMethod.GET;
		var variables:URLVariables = new URLVariables();
		variables.entryClass = entryClassSearch.selectedLabel;
		request.data = variables;
	}				
	loader.addEventListener( Event.COMPLETE, handleComplete );
	loader.load(request);				
}
 
private function handleComplete( event:Event ):void
{
	try {
		directoryXML = new XML ( event.target.data );
	} catch ( e:TypeError ) {
		//
	}
}

That directoryXML is a Bindable XML object. Setting that as the dataProvider for a Repeater (inside a Tile layout container) will do the magic.

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<mx:Tile x="10" y="30" width="95%" height="90%" id="directoryDisplay" >
	<mx:Repeater id="myRepeater" dataProvider="{directoryXML..entry}">
		<mx:Canvas width="150">
			<mx:VBox width="100%">
				<mx:Image height="150" width="150" scaleContent="true" source="{myRepeater.currentItem.photo}"/>
				<mx:Text width="150" text="{myRepeater.currentItem.entryName}, {myRepeater.currentItem.entryClass}" />	
				<mx:HBox width="100%" horizontalAlign="center">
					<mx:Button label="Call" click="ribbitDial(event)" data="{myRepeater.currentItem.dialNumber}" 
						visible="{myRepeater.currentItem.dialNumber.toString().length >= 10}" enabled="{loggedIn}" />										
					<mx:Button label="SMS" click="ribbitSMS(event)" data="{myRepeater.currentItem.smsNumber}" 
						visible="{myRepeater.currentItem.smsNumber.toString().length >= 10}" enabled="{loggedIn}" />						
				</mx:HBox>
			</mx:VBox>			
		</mx:Canvas>
	</mx:Repeater>
</mx:Tile>

You can see there is some wacky stuff I needed to do with the buttons. A bit of trial and error here to get the right solution. Basically, I had trouble broadcasting any of the E4X data from the click handler. So, I use the data property to attach that “dialNumber” string and then pull it inside the click method handler off the event.target property. Also, I didn’t want the buttons to show up unless the directory listing had a dialNumber populated, so you’ll can see an inline conditional there.

Like most projects, I’m benefiting from good references to help me establish some basic syntax. At my side are the ActionScript 3 and Flex 3 cookbooks from O’Reilly. Love those books and the authors are swell too.

So keep an eye out for the full code sample coming soon in the Ribbit Labs.

Lastly, if you’re wondering why my code excerpts show the actionscript lines numbered higher than my mxml lines, it’s because I like to code with my MXML ON TOP!

  

It was a sunny winter day in Mountain View, CA. The season actually felt like early autumn to my New England-conditioned senses. Lee Brimelow showed up at the Ribbit offices, via an open invitation lingering almost 8 months, to do a video interview with us on Ribbit’s API for Flash and Flex. Lee ran some b-roll of the office, of me shooting my Nerf rocket launcher and others working. Lee interviewed me, through his massive fish eye lens, and what was recorded ended up being the very first interview for his now acclaimed, mind-blowingly good, yet currently stagnant video magazine “FlasherMag“.

At the end of the interview I asked Lee a question about tapping into the Flash microphone object for some demos and upcoming conference presentations I was planning. I casually expected the usual WINK it’s not published, but you can actually do this… /WINK response I’ve grown accustom to from Adobe higher ups and similar prestigious talents in the industry.

Lee’s response shocked me. “It can’t be done. Flash doesn’t allow it.” OK. Why? What? How do I get it done? Lee suggested going the route of one Mr. Andre Michelle, who after engaging the community with “makesomenoise“, not only got his wish, but further propelled Flash Player 10 to a new stratosphere of imagination and creativity.

It took me about 3 months to act on Lee’s advice. Somewhere between SXSW and MIX, I found the time, with the help of yeoman Brendan Lee, to launch getMicrophone.com. The site is dedicated to coding with the microphone and all its interactive-inducing glory, in Flash Player. The site has a blog where we’ve been profiling some cool examples of developers using microphone access for what I call “Advanced Microphone Interactivity”. We’ve also linked to several major Microphone coding resources, like LiveDocs and other bloggers’ fantastic work and research.

The key post thus far has been our opening of Adobe Flash Player Bug #1766, requesting that the Microphone object in Flash be opened.

I love irony, and so I relish in the fact that the site launched during day 1 of Microsoft MIX 2009 — the very same day Scott Guthrie (or as the .net developer contingent chant, “the Gu”) announced that the #1 requested feature of Silverlight, Microphone/Webcam access, would not be available until at least Silverlight 4.

Join us in exploiting one of the great, unique features that Flash Player’s been giving to us since Player 6.
getMicrophone.com today!

Internally, much of the company has been chanting “we are going beyond Flash and Flex”, but I don’t think the word ‘beyond’ is right to say. Maybe ‘to the side’. Definitely not ‘over’. Probably not ‘in a tangent’. However I can get myself to say it, Ribbit is about to offer the global developer community the ability to code our communications platform into their applications in more ways than just Flash and Flex. And this is a very good thing…

Since launching the initial SWC (now called our Flex SDK) back in August of 2007, the platform has enjoyed an incredible run as the leading provider of telephony, voice, messaging and user management services to developers. Our community of over 11,000 developers has built some amazing apps, many of which are hot contenders for our $100K Killer App Challenge, which culminates this week!

The RESTful API release is really an evolution for the platform as a whole. Unlike Flash Platform, developers will now be able to code machine to machine, schedule calls, perform advanced user management, create user tokens and so much more. The real gem presented in the RESTful API approach is that deploying this as a core platform API gives us the means to tightly wrap almost any other programming language (in demand) around it.

Essentially, you are going to see Ribbit offered to developers in languages like PHP, Javascript, Obj C, .Net, AS2 (for Flash lite development), Java, and pretty much whatever the community wants. The true potential for reaching the global community is unlimited and the wide array of language offerings means Ribbit apps can be built on almost any platform out there. And the RESTful API is going to go literally right under our Flash and Flex offerings, since those APIs can now leverage a much tighter data delivery protocol.

So, what does this mean for a lead evangelist (me, me) who wakes up and goes to bed dreaming of Flash Platform Apps? Well… if the Ribbit Platform was a chest of toys, I certainly have a much wider variety of things to learn, play with and show off to others! It also means I have access to another side of a web technology I still (sincerely) regard as the most innovative I’ve ever seen, touched or heard!

This news will officially come out from Ribbit while we’re at SxSw. There will be a special site launched (url to be announced soon) where developers can even go ‘vote’ on which language they want to see Ribbit release the most! And as for evangelism, I make my first non-Flash conference appearance in a week. It’ll be in Las Vegas. Sounds like MAX, ‘cept not spelled the same way.

So earlier today I posted a community challenge on the Ribbit blog. The idea was to throw some interesting use cases at the community and see what everyone can come up with. Ribbit is such a simple yet interactive service, there are a lot of different ways to apply various fundamentals of Flash Platform development.

Basically, on Thursdays (not sure if it’ll be weekly or every few weeks), I’ll come up with a challenge that involves some ActionScript, Flash or Flex skills and combines them with some simple Ribbit API skills.

The first community challenge posted today is called “How you gonna call?” and asks for a solution to address microphone and general audio issues we’ve experienced with Flash Player on Macbooks. Basically, if you can figure out how to detect the operating system and audio ‘capabilities’ of Flash Player, you could easily win this community challenge.

I think it’s pretty fun… and while the prize package isn’t exactly of the magnitude of, say, our $100,000 Killer App Challenge, it’s pretty good considering you may only need about 10 minutes to win this challenge.

So check it out and I hope it’s fun for you!

http://developer.ribbit.com/blog/?p=167

A lot of Flex developers resort to Flex ’states’ when adding interactivity and transitions to their applications. I built the sample below to show a colleague that using Flex ‘effects’ are some times easier and involve less code than ’states’. This simple example (very beginner) shows how you could build a slide out menu bar without the use of states, which I consider a bit difficult to maintain and skin. The code is available for you just below the working sample.

Click the button on the yellow panel to see it slide out like a shelf.

You can cut and paste this code into your FlexBuilder project and test it out. Feel free to use this in any project or app you are working on.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Script>
		<![CDATA[
 
			[Bindable]
			private var bPanelStartX:Number = 0;
			private var bPanelEndX:Number = 0;
 
			//set position values for back panel
			private function init():void
			{
				bPanelStartX = frontPanel.x - 25;
				bPanelEndX = frontPanel.x - 100;				
			}
 
			public function movePanel():void
			{
				//set target of move transition
				panelMover.target = backPanel;				
				//determine direction of panel based on position
				if (backPanel.x == bPanelStartX) {
					panelMover.xFrom = bPanelStartX;
					panelMover.xTo = bPanelEndX;
				} else {
					panelMover.xFrom = bPanelEndX;
					panelMover.xTo = bPanelStartX;					
				}
				//play transition
				panelMover.play();				
			}
 
		]]>
	</mx:Script>
 
	<mx:Canvas id="backPanel" width="250" height="250" x="{bPanelStartX}" verticalCenter="0" backgroundColor="#FFFF00" backgroundAlpha="1.0">
		<mx:Button click="movePanel()" x="0" verticalCenter="0" width="25"/>
	</mx:Canvas>
 
	<mx:Canvas id="frontPanel" width="250" height="250" horizontalCenter="0" verticalCenter="0" backgroundColor="#FF0000" backgroundAlpha="1.0">
	</mx:Canvas>
 
	<mx:Move id="panelMover" />	
</mx:Application>

If you know or a more simple way to do this, please feel free to post it on your blog and comment the URL here. If you’ve got other examples of using transitions without states, feel free to post those as well.