Tonight I will be doing a session on Integrating Flex with Facebook at the Denver RIA Developer’s Group meeting. I’ve been working almost exclusively with Flex and Facebook for about the last 6 months, and am excited to share what I’ve learned. Check back here for slides/screencast. For now, here’s a link to a Google Bookmarks list with links for reference, tools, and tutorials.

[UPDATE] Aside from some technical difficulties with the projector, the session went well. Thanks to everyone that came out! Here are links to the demo files that I presented last night. The first project contains 4 MXML applications that demonstrate the various ways to authenticate with Facebook from Flex and the second project demonstrates using Facebook Connect, which is the preferred method for Flex-Facebook apps that are hosted outside of Facebook.

I don’t normally consider myself to be a pain-in-the-ass customer, but over the past week I’ve been one to RadTech and they’ve gone out of their way to be more than accommodating. I can’t let this great experience go unblogged.

So, here’s the deal: I recently ordered a new MacBook Pro for personal use and wanted to deck it out with a few accessories. Most importantly I knew I was going to have to do something about the super glossy screen; videos and photographs look amazing on it, but it’s not ideal for writing code. I ordered a couple of things from various shops through Amazon, and then ordered RadTech’s ClearCal anti-glare screen protector. I researched all of the available anti-glare options and ultimately decided on the RadTech product because it’s the cheapest and I think they’re onto something with not making the film the size of the screen plus bezel – it’s a little forgiving if you don’t get it stuck on perfectly straight.

The product was on backorder for just a couple of days, and in that time I changed and added to my order twice before it shipped. Both times I just sent an email reply to my order confirmation and got a quick response from someone on their end with a new total. Once the product was in stock, I received it very quickly and it came well packaged. There was some miscommunication about one of the items I added (which I accept partial blame for because I didn’t provide the product number, just a description), so when my box of goodies arrived one of the items wasn’t what I wanted. I emailed RadTech again and they quickly resolved the issue by immediately shipping me the correct product – free of charge.

I waited until I had plenty of time and patience before even attempting to install the ClearCal and was delighted when I got it on straight (more-or-less), and without air bubbles or trapped dust particles. I wasn’t disappointed with the product at all until I turned on my computer and noticed slight rainbow sheen when looking through the anti-glare film at light colored backgrounds. It’s not that noticeable, but the more I saw it, the more it bugged me. The film also slightly distorts the super crisp text that I was seeing before installing it. Bummer. I thought I’d try to live with it, but then ended up surfing the web on a friend’s glossy MBP and realized how much better it looks. I used some strong tape and peeled it off last night and am trying to decide whether to live with the glare or drop $200 for the TechRestore “MatteBook” conversion which actually removes the glass and replaces the glossy LCD with a practically identical non-glossy version.

The return policy on RadTech.com clearly states that protective films can only be exchanged for the same product, and only if they’re defective. This makes perfect sense to me. It’s not like I can send it back and they can ship it off to someone else even though it says it can be washed and reapplied several times. Figuring I was out $20 and had nothing to lose, I shot a message to RadTech on Twitter to ask if they might make an exception to their return policy. Today I received a public reply saying they were looking into it and then a direct message asking if I preferred my money back or a store credit. Wow! I responded that I’d gladly accept a store credit since there are plenty of little things there I’ve thought of ordering. They wrote back and told me to create a $20 order (give or take a couple of bucks) and they’d ship it to me for free.

This is one of the best customer experiences I’ve ever had, especially with an online shop. It’s like Zappos for Mac stuff

I want to note that the ClearCal film is not a bad product, and while I don’t have first hand experience with the other products (by Power Support and Moshi), I suspect they’d have the same “flaw.” I’ve actually read a review of the Power Support film and it describes the same rainbow effect that I saw, especially when looking at the stark white Google homepage. For some applications, the slight distortion wouldn’t matter, but I couldn’t live with it.

Yesterday, I encountered bug where a TextInput would no longer correctly receive focus if its text property was programatically set. I checked bugs.adobe.com for the issue, but couldn’t find anything about it. As a final check before reporting a bug I decided to try a nightly build to see if the bug had been indirectly fixed.

I downloaded the 06/27/09 buid (8344) from here and followed these instructions (look about halfway down the page) to have multiple SDKs installed with Flash Builder, which hasn’t changed from Flex Builder 3. Everything seemed to go smoothly except that when I created a new project and specified the nightly build SDK, Flash Builder threw the dreaded cryptic internal build error. I tried cleaning about a dozen times. I tried setting the permissions on the new SDK folder to match the original 4.0.0 SDK. I even tried redownloading the SDK zip thinking that maybe Safari screwed it up while automatically unzipping it. Nothing I tried worked.

Adobe’s on vacation this week, so I didn’t get any response from my contacts there, and no one here at effectiveui has encountered the issue. RJ Owen was gracious enough to let me try installing the nightly on his machine, where I got a different and less cryptic error similar to the error Ed Syrett reported here. To work around this I copied the netmon.swc from the original 4.0 SDK that installed with Flash Builder and everything worked okay. In Ed’s post he pointed out that you can disable network monitoring which would have been a better solution since I’m not using that feature at the moment.

Back on my own machine, nearly out of ideas, I created a new Flash Builder workspace and added the nightly build SDK. This time when I created a new project I got the netmon error, but not the IBE. This time around I suppressed the netmon error by unchecking “Enable network monitoring” on the projects compiler options and everything worked fine. As it turns out, the TextInput focus error has been fixed, which more or less makes this hassle worth while. The only remaining problem is that any projects that are using the original 4.0.0 SDK in the new workspace seem to get the IBE if you clean them. RJ says he was able to resolve this by restarting Flash Builder and cleaning the projects again.

Take aways:

You might want to create a new Flash Builder workspace if you’re messing with the nightly builds.

Adobe’s working pretty diligently to address the issues they’re finding internally and that we’re submitting to them.

There are two ways to share data between a Flex 4 Spark component and its skin: you can either pull the data from the component into the skin or you can push the data to the skin from the component. It’s a subtle difference, but the latter approach is recommended because it does not rely on data binding, and it promotes encapsulation.

A while back I shared an example of using Flex 4 to create a text input that supports displaying a prompt when it is not focused and no text has been entered. In that example the skin pulled the value of the promptText property from the hostComponent and applied it to a SimpleText component with the id “promptView”. The logic for whether or not the promptView was visible was based on the current state of the skin (focused or normal) and whether or not the hostComponent's text property was an empty string. This is fine, sort of, but since a good component should be easy to skin, it would be better if the person creating the skin didn’t have to set the label on the promptView or replicate the logic to hide/show it. Because components are aware of the data type of each skin part, it is possible to push data into the skin from the component and encapsulate more of the logic.

I was getting a little tripped up there trying to explain that, but hopefully looking at the two examples side by side will make it more clear.

Example 1 is basically the same as the example created in my earlier post, but cleaned up a little. In this example the skin pulls data from the component.

Example 2 pushes the data from the component into the skin. You’ll see there’s a bit of added complexity in the component now, but the skin is much simpler. I believe this is a better approach and allows developers to use the skin in their own applications much easier.

Both examples have view source enabled, and you can grab also grab the source at github.

I wish I was writing this post to tell the world that by some miracle someone has come up with a universal solution to the dit-ditta-dit-ditta-dit-ditta-bzzzzzzzzzzzzzz-BZZZZZZZZZZZZZZZ that you hear when you get your cell phone too close to your speakers. Alas, I’m writing this post only to share a possible one-off solution that might also work for you.

I have this Sony clock radio that has a built in dock connector to play music from your iPod/iPhone. It came with a little remote that you can use to navigate the iPod interface, which actually works surprisingly well with the iPhone. But, even with all these features, I only use it to charge my iPhone at night because if I actually turn it on I get GSM death sound. Sony has since released a new version of it that says it’s iPhone compatible, but I’m not sure if that means they shielded the speakers from this interference or if they tweaked something to suppress the warning that pops up on the iPhone that says it’s not compatible.

However, last night was the first time I connected the 3GS to the dock connector. I had it connected to the wi-fi network, so I figured I’d go ahead and listen to some music while I fell asleep. It occurred to me this morning that I heard less interference that I normally do, even when I’m connected to wi-fi, so I conducted a little test. First, I turned wi-fi off. There was no immediate interference like there would have been when turning off the wi-fi on the 2G. Next I disabled 3G and the interference started. Does this mean 3G doesn’t make that god-awful racket that we’ve all come to hate? That’d be pretty awesome! As a final step I left the phone docked, turned off wi-fi and left 3G on and had Angela call me. There was still no interference!

Has anyone else had this experience? It seems too good to be true.

Also, I’m sorry for letting the mp3 automatically start when you load this page. This could be new rick rolling.

Thanks to Secret Design Shop for the audio clip. If you’d like, you can get the mp3 from here and use it as your ringtone. You sick bastard.

Next Monday, RJ Owen and I will be doing a Flex 4 Deep Dive which will cover some of the UI goodness in the new framework. We’re going to discuss additions/changes to the UIComponent life-cycle in Flex 4, creating and skinning custom Spark components, and integrating Flash Builder and Catalyst.

There’s lots of cool stuff going on at Flash Camp, so you should check it out! We’re on from 4 to 5. I hope to see you there.

I’ve heard some complaints that Flex 4 is much more verbose for doing what was simple in 3. One example is adding an icon to a button. Thoughts on that?

At first, I misunderstood him and thought he was saying he had heard it was more difficult to add a second icon to a button with Flex 4 than Flex 3, which it’s not. I replied to him directly with an example of just how easy it is, and also sent him here to show him the cool button Juan built. Turns out, what he was saying is that it’s sorta a pain in the ass to add even the first icon, which it is compared to Flex 3 where the Button has built in support for an icon.

Consider the buttons in the image below. They have the same background an mouse over/down treatments, but different icons. Straight out of the Flex box, you’d have to create two different skins to have these two buttons with different icons (I think.)

To work around this I created a simple extension of the Spark Button and gave it an icon property. In the extension I defined an iconElement as a skin part, which, when added is passed the value of the icon property. Now you can create two instances of the same button with the same skin and specify a different icon for each one.

This would have been really easy it I hadn’t run into this SDK bug. Fortunately, after copying the mxmlc.jar into my $FLEX_HOME/lib directory and cleaning the project, it worked as expected.

Tonight I built a component that I’m sure most of us have built a half-dozen times before – a text input that displays a prompt inside of the component when no text has been entered and the component is not focused. The difference this time is that I built it as a Flex 4 Spark component, and I have to say I am pretty delighted by how simple it was.

Here are the basic steps I followed:

Extended spark.components.TextInput to add promptText property and focused state

Copied spark.skins.default.TextInputSkin as a new skin and added a SimpleText component (promptView) to display the promptText

Used a binding function to dynamically set the visibility of the promptView

Once it was working properly, it was super easy to add a fade in/out when the prompt is shown and hidden.

A while back I built a suite of text input components that provide type-ahead functionality, suggestions, an inline button to clear the text, etc. I’m looking forward to building those as Spark components, possibly with a couple of different skins.

Thanks to the Flex team for making an awesome new Flex and to Andy Hulstkamp for some great Flex 4 examples.

Goal

Add an item to an ArrayCollection when changing states.

Challenge

The AddChild override only works to add visual children to other DisplayObjects, which leaves you with the option to use a SetProperty override to completely replace the source of the ArrayCollection — or you could listen for the enter event on the state and write some ActionScript to manipulate the ArrayCollection.

I’d like something a little more expressive; Something like this:

Why?

Consider an application with a MenuBar at the top that lists certain options based on the user’s role/permissions. Since the menu is data-driven, you could create a “manager” state and insert addition options into the menu. And, since states can extend other states, you could base a “regional-manager” state on the “manager” state and add even more options. A RemoveItem override would allow you to base a “assistant-to-the-regional-manager” state on “regional manager” and remove a few things.

Also, once you understand how to create custom overrides, you can do all sorts of things with states that you couldn’t do out of the box. In my case, I wanted the ability to add layer to a data-driven graphic component, so I wrote an AddLayer override.

The Solution

Create an ActionScript class that implements the mx.states.IOverride interface which enforces that you specify how to initialize, apply and remove the override. For adding an item to an ArrayCollection, it’s pretty simple. In apply(), you determine which index the item should be placed at and use ArrayCollection’s addItemAt(item:Object, index:int). Then, in the remove() method you use removeItemAt(item:Object, index:int).

After a whole bunch of digging around under the hood of the mx.rpc.XMLDecoder class, I finally pinpointed the line that is causing it to incorrectly decode elements that do not have sub-elements. Basically, when it gets to an element that it considers to have simple content (meaning just a string value between the tags), it immediately returns that string value and moves on to the next node. So, in the case of an empty node (like the one below), which has no inner value but only attributes, XMLDecoder would never even try to parse the attributes.

The solution was to check if the inner value evaluated to an empty string, and if it does, continue on as though it were actually a complex node, which will then parse the attributes.

Patch for Flex Bug #SDK-17271

I’ve created an example that decodes some simple xml data against a simple schema. By checking the “Patch” box, you can see that fix returns a object graph with the correct properties for the CarVO. This example would also be a good starting point if you’re interested in learning how to decode xml into strongly-typed objects. With the exception of this bug, the XMLDecoder class seems pretty solid, and it’s really handy if you want to parse something, like, say an MXML file.

Note: You could try pasting in your schema and data, but it’s not likely to work since you have to register class types with their qualified names in the schema. I’m still working out a way to do this dynamically from the schema.