In my Seach Flex app I’m asking the Flickr API for data based on my search terms and the number of photos that I want to see. The data that comes back is returned to my event handler, via the ReseltEvent, where I can use it to create links to photos that are displayed. I’m binding that data to an ArrayCollection - named photos. Simple enough.

I have a line of code like this:

photos = event.result.rsp.photos.photo;

my photos:ArrayCollection is being set equal to the repeating element of the returned data - event.result.rsp.photos.photo.

If I ask for 3 photos to be returned then I could do something like this:

That would produce output like this:

photo ID: 431933355
photo ID: 431931375
photo ID: 431854221

But what happens if I ask for just one photo to be returned? It would be nice if I could access that data like this:

trace("photo ID: " + photos[0].id);

But I can’t. Actually, I wouldn’t even get that far because the line above where I made my photos:ArrayCollection equal to the ResultEvent would have produced an error: TypeError: Error #1009: Cannot access a property or method of a null object reference.

Here’s the big surprise - sarcasm - an ArrayCollection can’t be set equal to something that isn’t Arrayish.

When I came upon this error it was pretty easy for me to spot because I’ve run into this before with my PXP2 class for ActionScript 2 which is a lot like the ArrayCollection. Of course when I ran into the problem the first time it took hours for me to figure out what the frak was wrong. Such is coding.

The solution is pretty simple. Here’s how I fixed it in the Seach Flickr app:

In the first if-case I’m dealing with the issue of not getting anything back. Like if you search for “iidneidntineidte” and nothing comes back.

The second if-case handles the more likely case of getting an Array back and the else handles what happens if there is just one photo returned.

So if you’re working with ArrayCollections you better make sure that you’re always getting an array of objects from where ever. Otherwise you’ll get those nasty error popups.

As an aside: this happened to me on the Zune.net media player. I set everything up using my PXP2 class to handle lots of videos and photos. Then when the production crew got it they broke it the very first day because I never tested the thing with just one photo or video. Really, the way this thing was designed it looked like there would always be lots of content. Whooops.

Lesson learned: always test with zero, one and many.

I vote that we make the Flex Search Flickr application a sort of right of passage for developers new to Flex. It was Sho Kuwamoto himself who started the whole thing with his video tutorial back in the Flex 2 alpha days. In fact, that was the first Flex app I ever saw. Thanks Sho.

Unfortunately enough changed between when he recorded the video in Flex 2.0 alpha and the final Flex 2.0 that it broke his wonderful example. Still, it’s worth watching the video because the general code flow still applies. It’s just the actual code specifics that needs a bit of tweaking.

You can see my Flex Flickr app here and the view source works from the right-click or you can download everything here. You will need to get your own API_KEY from Flickr to use my example.

Since the Search Flickr app requires using data binding, states, the ArrayCollection, HTTPService, events, ResultEvent and ItemRendering I, polyGeek, do hereby decree that all who successfully create and understand their own Search Flickr application may thereafter refer to themselves as novice Flex developers, a grade up from newbie.

I’m not sure what application will qualify for graduating from novice to experienced Flex developer. I haven’t gotten there yet. :-)

I’m a big fan of coding on black. That’s using a black background and bright colors for the text. Unfortunately I’ve had nothing but trouble setting this up in Eclipse. Lucky for me there was a session at 360Flex called Flex Builder Secrets where I learned a great deal about how to use the hidden features in Eclipse and got the scuttle bug on how to change those pesky colors.

Here’s the rub: you can’t change the text colors inside of Eclipse. You have to go into an XML file that’s buried in a .jar file in your installation folder, under some peat moss at the bottom of a deep ravine in the heart of Borneo. Okay, that last part is hyperbole.

Before we get started editing the colors we need to change the background color of the code window. You would think that the background color would be controlled in the same place as the text colors, but, sadly, you would be wrong.

The image below shows you where to change the background color and while we’re at it you can change the font if you wish. The preferences are under: Window -> Preferences… Uncheck the System Default checkbox and select the color that you would like to use.

Now to edit the color coding. Find the \plugins\ subfolder in your installation folder. For me it’s: C:\Program Files\eclipse\plugins. Now there are a bunch of subfolders there. You’re looking for the com.adobe.flexbuilder.editors.common_2.0.155577 - that number at the end is the build number and may be different than mine.

Now I’m in the subfolder: C:\Program Files\eclipse\plugins\com.adobe.flexbuilder.editors.common_2.0.155577. In there you should see a file named common.jar. Before going any further you’ll want to make a backup of that file. I created a backup folder in the \plugins\ folder so that I wouldn’t be duplicating the .jar file inside itself. You’ll see how this works in a moment.

Inside the .jar file is the colors.xml file. A .jar file is really the same thing as a .zip file so if you’re on Windows you can just change the extension and then unzip it. It will create two more subfolders: com, META-INF. To find the XML file we’re looking for drill down to: com -> adobe -> flexbuilder -> editors -> common -> color. You should now see the Colors.xml file in the midst of a bunch of .class files. You can change the text color, and set the italics and/or bold properties. If any certain node doesn’t have the italic or bold attribute then it defaults to false. You can simply add the attribute and make it true to turn it on.

If you want something like this you can download my colors.xml file.

All that’s left to do is update the .jar file with the changes you made to the Colors.xml file. If you know how to do that then you’re set but this is the part that really fraked with me. Here’s how I ended up doing it.

1. Create a new zip file in the \plugins\ folder, one folder under where you found the common.jar file.
2. Now drag the \com\adobe\flexbuilder\editors\common\color folder into the zip file.
3. *Drag your zip file up into the \com\adobe\flexbuilder\editors\common\color folder.
4. Rename your zip file to common.jar.
5. Restart Eclipse or FlexBuilder.
   

*This sounds sort of messed up I know but the path in the .jar/.zip file must be \com\adobe… I couldn’t get the path right without doing it this convoluted way. Hey, whatever works. If you get an error while starting Eclipse/FlexBuilder then you probably messed up the paths and you’ll need your backup file.

Good luck and may you enjoy coding on black, or whatever color you enjoy.

I’m not keeping track but I would reckon that I have crashed FireFox over 50 times today. I’m playing around with the Twitter API and every time I run Flex in debugger mode it goes WA-Wa-wa and crashes. (It doesn’t really make that sound but you get my meaning.) Fortunately FireFox hangs in there long enough for me to get the data view that I need.

I only have problems when the application that I’m debugging is calling a remote service. Unfortunately that would be almost every application I work on. Oh well.

I made a wonderful discovery tonight with the Flex debugger. When looking at variables in the debugging perspective you can right-click and select copy. I didn’t expect it to work but it did. It’s sort of like getting the data from an object via .toString() but from the Debugger. Give it a try.

At 360Flex there was a lot of talk about Adobe’s Apollo program. We found out that to create Apollo apps you’ll use Flex 3. That was great news since I was going to update anyway. Adobe kept hinting that the Apollo beta would be out soon. “How soon?” we would ask. “Very soon,” they would say. So everyone’s taking it for granted that it will be released to Labs during the Apollo Camp in San Francisco on March 16th. What many people wanted to know is what will Apollo’s final name be. Adobe reminded us developers at every opportunity that the name Apollo is just a code name for the project and not the final name. Many in the community have suggested that it would be nice to keep the name as it is.

I would like to lend some support to that proposition. First, it doesn’t conflict with any other products out there. Of course there was NASA’s Apollo program. So named because Apollo is the Greek god of archery and his arrows never miss the mark. An important attribute when you’re aiming for the moon.

More importantly is the trivial fact that the Greek god Apollo is one of the few gods that the Romans didn’t rename in their pantheon. Most people know that Zeus is Jupiter, Aphrodite is Venus, Hephaestus is Vulcan and so on. But Apollo kept his name. He bridged the two cultures as one god.

Similarly Adobe’s Apollo bridges operating systems - Windows, Mac, Linux. Another of its major features is the ease with which it bridges the online and offline world. And perhaps most importantly, it bridges the environments between application development and web development.

Apollo was also the leader of the muses, which any designer will appreciate, and developers should go for that matter. He was a prophetic deity which speaks to Adobe’s foresight in creating this product in the first place. He also had a huge cult following and I’m sure Adobe is hoping for the same thing.

To be fair, I should also mention that he was the bringer of plague but hey, no god is perfect.

I can say from experience, having worked at Xbox during the production of the Zune player, sometimes people wish they had stuck with the code name.

So Adobe, why mess with success? You’re not going to come up with a better name than Apollo. The best you can hope for is to break even and you likely won’t do that good.

Like the saying goes, “If it ain’t broke. Don’t fix it.”

It’s hard to single out one speaker above all the rest because there were many that were top notch. Plus, I obviously didn’t see everyone speak. That being said here’s my award.

If you have a world of respect for Ted Patrick then you don’t have enough. The man knows his stuff and he presents himself professionally at all times. His presentations are well thought out and polished. My guess is that he’s probably done more presenting than all the other speakers at 360Flex combined, or close to it. Plus, he got grilled during the AS3 Performance Tuning session and never missed a beat. He answered nearly every question put to him but when he didn’t know the answer he didn’t beat around the bush. He just said, “I’m not sure” and offered a suggestion on how to find the answer. You have to respect that.

Then there’s Ely Greenfield. Apart from landing the better than a Lego Vagina award he was a superb speaker. His presentation on Making Components was full of very technical information but he distilled it down into an understandable form. He knew his material and how long it would take to get through his presentation. I’m sure everyone left with a much deeper understanding for making their own components.

So, I’m going to have to give them co-awards for their excellent work. Next conference the first round is on me guys.

Honorable mention goes to Deepa Subramaniam for her Flex Framework session. Very nice work. She’s young and I think in the next few years she’ll really be challenging Ted and Ely for best speaker status. So keep your eyes on this up-and-comer. :-)

There were lots of wow moments during the conference. But the best of the best of the best doesn’t go to any of the Apollo demos, or the new features in Flex 3. It doesn’t go to the Flash 9 IDE. And it doesn’t go to anything mentioned during the keynote. Nope, the better than a Lego Vagina award goes to Ely Greenfields Flip book component.

The first version that he showed us was rather plain in appearance but showed off how you could embed components and video in a page. Impressive indeed. It’s the stuff that makes Flex geeks all warm and fuzzy. He got a big round of applause for his amazing work. But then he showed us another view where the pages were partially transparent medical images that were layered on top of each other. Are you kidding me? Are you frakking kidding me?

My alarm is set for noon each day to remind me to kneel down on the floor, face generally in the direction of San Jose - the Adobe headquarters - and bow. Amazing work Ely.

The following is a brain dump of my notes from 360Flex. I’ll have more to say on some of these topics in later posts.

Things I found out about Apollo

I asked Robert Mike Downey if there would be any way to send/receive data through the attached USB devices with Apollo 1.0. He said “no” but it’s on the plate for the update. Hopefully that will come when they support Linux.

The things we will be able to do with Files is going to be amazing. Yes, you know we’ll be able to open files from the file system. Yeah. But that’s just the start. Apollo supports the byteArray type. We’ll be able to open any file. And read it bit-by-bit if you want. Why would you want to. Well, the example that they showed in the ByteArray 101 session was to open up an MP3 file, parse through the ID3 tags and pull out the string that represents the Album art and send that to the Load class to be displayed.

If you’re a Flash developer like me who gradually learned to program as the Flash player evolved then that might sound like a pretty complex bit of code. I can tell you that it really isn’t that hard. The byteArray is just like any other array that might have a length of 100,000,000. But hey, it isn’t like you have to read that array yourself. Essentially all you have to do is start reading the byteArray from the beginning while looking for certain markers - you find those markers from reading the specks on the filetype you loaded. Once you find a marker you look to read some meta-data encoded there. If that meta data tells you that what follows is going to be album art then grab the bytes until the next meta-data block starts. Otherwise skip to the next meta-data block and read again. It’s that easy. When you have bytes you can simply send it to a loader. It doesn’t know the difference between bits that came from a server or your byteArry. Ta’da, you have a picture. You can apply this technique to any filetype that you have the specks for.

Flex 3 IS Apollo. The new and improved Flex Builder, or plugin for Eclipse, will be your Apollo IDE. They are one and the same. Look for them late this summer.

Here’s a few other upgrades to the Flex IDE that is slated for Flex 3. Note: they stated over and over that this is all subject to change.

• Refactor - you have a method or property name that you don’t like? Change it, everywhere, across all project files with one command. Sweet.
• Integrated Profiler: look at what your code is doing inside the Flash player. Very handy.

Flex Details

I was a little confused about the way the components are created for display. If you dig around you can find files in the FlexBuilder program folder that are FLA/SWFs full of symbols that make up the Flex components. You’ll see things like scrollbars, button fills, borders, everything.

However, none of that stuff gets used unless you tell your application to use it. My understanding is that those files are there if you want to create a new skin for Flex and embed it. I haven’t done any skinning myself yet so I’m not certain. What I do know is that the standard components that you see in Flex are all created at runtime with the graphicsAPI. None of those symbols are used. And when you use styles/css to skin your Flex app you are affecting how the graphicsAPI draws. It’s that simple. Those symbols don’t get used unless you embed them but that’s a different story.

When you think of it that makes a lot of since because you wouldn’t be able to change the corner size of a symbol once it is drawn. Not without some wacky transformations going on. But it’s simple to do if you’re creating everything programatically.

Deepa Subramaniam - software engineer for the Flex SDK - reminded us that if there is something about the Flex API that we don’t like then just hack it. (Okay, she didn’t say it exactly like that.) All the source code is right there for us to have our way with.

When you use binding expressions in Flex you are essentially using watch(). It’s that simple.

Very important tip: if you need to update the display on startup then use the initialize() event on the Application tag. Reason being is that if you wait until after the rendering has all been calculated to layout the display and then do something like use creationComplete() to change something then the layout engine has to go back and do a lot of work over again to make sure the display is correct. That’s going to waste a lot of cycles right as your app is starting and make the user wait longer than necessary.

Random notes and thoughts

There is only one difference between Jesse Warden and a madman. Jesse isn’t mad. :-) I didn’t get a chance to talk to him but I attended his session on Flex and Flash together. Wow. That guy runs in the fast lane.

The grid layout container is the most cycles expensive of all the layout containers. If you don’t need the grid then use something else.

If you are moving a component around with an animation and you want it to run more smoothly then try this: on Effect.start make any of the small elements visible=false. That way the layout manager doesn’t account for them. Then when the animation is over call Effect.end and make your elements visible=true. In many cases the user won’t notice that something disappeared during the animation and you get better performance out because there are less objects to display.

A Flex application is a 2 frame FLA. The first frame is the loading process and when all is loaded it goes to frame 2. That’s where the application is initiated.

If you are thinking about building any applications that require a mapping service then you probably think that Google and Yahoo are your only options. Not quite. Take a look at ESRI. They have a lot of basic stuff for free and their paid service will knock your socks off. Even if you don’t use their mapping service you should definitely check out their framework. Great stuff.
If you want to do some computations when the Flash player is idling then you could try a few different approaches.

• You could listen for mouseMovement and when it isn’t moving then start a timer. When that timer reaches an interval you feel is sufficient then you can assume the user is reading something and not interacting with the application. That’s a good time to start doing computationally complex code and then stop again when the user moves the mouse.
• Another approach would be to listen for the updateComplete event. That’s called when the Flash player has finished updating the display for that onEnterFrame event. Hopefully there will be a few milliseconds for you to run some code until the onEnterFrame fires and the player starts working on the display again.
• You can also use callLater() which queues a function to be called later. Look it up in the help to get more.

In discussions with various developers at they suggested that using the Flex plugin for Eclipse is the best option because you can update Eclipse apart from Flex. Plus it’s easier to use other plugins for Eclipse. However, it’s a slightly more complicated process for setting up the plugin version over the Flex Builder version. I’m going to switch over myself probably this weekend.

A few cool Flex Builder/Eclipse shortcuts that I found out about:

• ctrl + shift + P : Move to the matching brace
• ctrl + T : list all types
• ctrl : hold down the ctrl button and mouse over an identifier and it turns into a link to the class.
• ctrl + O : Open the outline panel inline
• ctrl + D : ASdoc comments

You can change the color coding for Eclipse but not in the application. You have to go through an XML file located in a JAR file, bla, bla, bla. At least it’s possible and I know where to look for it. I’ve looked all over the web for info on doing that and never found anything. When I get my code colors changed I’ll post the full instructions on it.

Checklist for Flex360 conference:

• Flights - check
• Hotel Room - check
• Laptop - check.
• Know where I’m going Monday morning - vague idea.

So here’s a satView of the area - dear gods I hope this is right. Can anyone point to which building we’re going to for the conference? (Hint, Hint Tom/John?)

If I’m right I’ll be able to walk 0.5 miles from the Fairfield Inn/Marriott just on the other side of the freeway. If I’m wrong Ryan is going to pound me. :-)