Flex, Flash, and HTTP Status Codes

This question comes from a *nix sysadmin (and all-around good guy):

“Jim, do you have a way to make flex handle a richer set of HTTP status codes in a portable way? Without that, I’m hesitant to recommend it for REST deployments.”

This is certainly a reasonable concern. The fact that Adobe still has not addressed this issue after all these years seems truly odd. To get an idea of the amount of trouble this causes, go to the Flex Bug and Issue Tracker at http://bugs.adobe.com/jira/secure/QuickSearch.jspa , type “http status code” in the Quick Search box (upper right corner) and see how many results you get.

Having said that, let us now look at what to do about it. First, note that it is not really a Flex issue per se. Remember, Flex is simply a framework (or tool kit or set of libraries or whatever you like to call it) for building Flash applications, so a Flex application is nothing but a type of Flash application. Therefore, Flex applications necessarily suffer from any weaknesses in the Flash VM. And this particular issue, as I understand it, is a weakness in the Flash runtime.

Knowing where the problem lies is half the battle. Since the problem under consideration lies in the Flash Player, we know that we can’t fix it with Flex code, and so we need to work around it some other way.

[Update: James Ward points out in his comments below that, strictly speaking, this issue has its roots in the way the browsers treat their plugins, which is not always very nice. However, from the Flash/Flex developer's perspective, it makes no practical difference: We still can't fix the problem with ActionScript, and the kind of workarounds discussed here are required whether the problem is in the plugin or in the browsers' plugin API. And even it the problem is in the browsers' plugin API, the end result is a limitation in Flash.]

One approach is to catch your errors with the server-side code and output messages that can be read by any client. Depending on the server technology and the developers working with it, this can be a very easy and effective approach to the problem. With ColdFusion, for example, you can do something as simple as this:

<cftry>
  <!---
    Do whatever processing you
    need to do here, such as a
    <cfquery>
             --->
  <cfoutput>
    <result>
        <error>
            <code>0</code>
        </error>
        <!-- Define the XML
             output here --->
    </result>
  </cfoutput>
  <cfcatch>
    <cfoutput>
        <result>
          <error>
            <code>1</code>
            <message>#cfcatch.Message#</message>
            <type>#cfcatch.Type#</type>
          </error>
      </result>
    </cfoutput>
  </cfcatch>
</cftry>

You can do similar things with Alfresco web scripts, JSP, ASP, PHP, etc. This approach will handle the majority of server-side errors in a way that any UI client could work with. However, it does not cover every scenario, and it may not address the portability aspect of the question that we started with. Besides, you simply do not have this option in every situation (for example, when attaching a Flex UI to an existing application). So we need to go a bit further.

One practice I recommend is writing simple HTML forms to invoke the services. These forms are bare-bones, with no styling and very little attention given to layout; they are purely for functionality. I do this regardless of whether I am writing the server code myself or I am just building the UI to someone else’s code. (Side point: One of the many things I like about Rails is that it builds this scaffolding for you.)

These HTML forms are used in two ways. First, use them to test the server code before running it from the Flash/Flex application. If the application doesn’t work correctly this way, then you know it won’t work from your Flash GUI. Once everything appears to be working from the HTML forms, you are ready to start running the application using the Flash GUI.

Now, if you get an error that Flash is not able to handle, you have an easy way to debug it. Simply enter the same data in your HTML form that was entered in the Flash GUI, submit the form, and see what the error message is. In the vast majority of cases, this will point you to the cause of the error, and hence the solution.

It is true that this requires some extra work on the part of the Flash/Flex developer. And this is really where the answer lies: in the developer.

Every technology has limitations. I will go further, and say that every technology has serious limitations. Even if you go down to something as simple as the hammer, and you think about it a little, you will see that it has serious limitations. This does not prevent us from working with the technology. Rather, if we see a benefit in the technology, we learn to work with it in spite of its limitations.

Having worked with this particular technology since the days of Flash 4, I am very pleased with the progress that Macromedia and Adobe have made, and rarely find reason to complain. However, I do realize that some of the remaining limitations can be frustrating - especially to people who are new to Flash, and find there are things which are very simple in other technologies that are not so simple in Flash. What to do about these things? Again, it comes down to the developer.

The best solution to the HTTP status code issue, and other such issues, is to use Flash/Flex developers who have the experience and/or tenacity to make the technology work in spite of its limitations. In the hands of such people, Flash can work wonders, and the non-Flash team members do not feel particularly burdened by the fact that Flash is being used for the UI.

On the other hand, if you are building large, complex applications with inexperienced Flash developers, then your entire team is going to feel the pain. But that is the same with every technology you use in your development and deployment. If you have  inexperienced DBAs, Java developers, Alfresco developers, or sysadmins, everyone suffers.

Twenty-five years ago, when I bought my first 22-oz Estwing , I found it to be unwieldy and tiring. It was much harder to swing than my old 16-oz hammer, and the guys I worked with got some laughs (and some frustration) watching me make my blunders with it. However, I had seen how effective it could be in the hand of an experienced carpenter. So, even though it caused me a lot of pain - to the point of losing a fingernail - I kept using it, and eventually found it to be indispensable. And, in the end, I was much more of an asset to the crew than I had been previously. It is a great tool.

Flash and Flex are great tools, too.


PureMVC vs. Cairngorm revisited

It has been a year since I wrote my first PureMVC vs. Cairngorm post, and in that time I have had the opportunity to build more applications in both frameworks for some pretty diverse organizations. Studying the official Adobe training materials for Cairngorm has also brought some points that I had not previously considered. Perhaps most importantly, I have benefited from conversations with coders on several different development teams regarding the strengths and weaknesses of each framework. All of this experience and interaction has brought additional insight and some modification of the original opinions. That being the case, it seems to be time to post a revised comparison.

First, let me reiterate that I still like both Cairngorm and PureMVC, and that the two frameworks share a number of strengths. Once your development team has conquered the learning curve, either framework will provide the following benefits:

  • Help build complex applications faster
  • Support team development
  • Support code reuse
  • Support maintainability and extensibility

Either framework will help you build modular, loosely-coupled applications using consistent methodologies that are founded on the well-known MVC pattern. However, there are also some significant differences in the frameworks.

One key difference is that PureMVC is not tied to Flex or even ActionScript. The advantage of this that PureMVC can be used for other languages, and in fact has been ported to eleven different languages to date. The disadvantage of this is that PureMVC does not leverage native Flex features; for example, rather than using Flex binding or the native Flex event delegation model, PureMVC uses its own publish/subscribe notification system.

On the other hand, Cairngorm relies too much on Flex binding, and does not provide another way of notifying the view when a relevant event has occurred in the controller or when the model has been updated. For this reason, many experienced Cairngorm developers dispatch Cairngorm events from Commands and listen for these events in the view components - something which Adobe’s training material explicitly discourages.

Another issue with Cairngorm is that it encourages the proliferation of small classes containing boilerplate code (i.e. events and commands). While developers have found various ways around this, most of these workarounds are - again - expressly discouraged by the Cairngorm documentation and training materials.

It might be argued that the framework can’t be blamed for the fact that people misuse it. On the other hand, it could also be argued that if even experienced, senior-level developers find it too onerous to manage without making some illicit modifications, then perhaps the framework has some room for improvement.

There is one issue that I had with Cairngorm when I wrote the original post which I no longer consider to be significant: the monolithic ModelLocator. It seems that my concerns about creating multiple model locators based on business meaning were unnecessary. I have learned that this can be quite successful, even in team development contexts.

Once again, I have outlined the differences in a matrix using the AdvancedDataGrid component.

[UPDATE: I have corrected/revised the content of the matrix after receiving Cliff Hall's helpful comments below. If you have already viewed the matrix, you may need to clear your browser's cache to see the changes. ]

[UPDATE 2: Please note that there are several points listed in the matrix that are not mentioned either in this post or in the comments below. So it is worth your while to take a look at the matrix!]

This post is not intended to be the last word on the subject; rather, it is just a small contribution to the ongoing discussion. In fact, as I write this post, I am in the process of building my first significant application using Universal Mind’s Cairngorm extensions, which appear to address several of the framework’s weaknesses. I will let you know my impressions when I have completed the application. Meanwhile, if this post helps someone to make an informed decision as to which framework to use (or not) then I will be really tickled.


Putting a Flex Face on Alfresco, Part 3

In the second Flex/Alfresco webinar, we showed the Flex side of how to get content from an Alfresco repository and display it in Flex. In this video, we show you the Alfresco side - how to create and deploy a custom JavaScript web script. You can watch the video and download the Alfresco source code here. As with Part 2, you can watch the video directly on YouTube, but you can only get the code on the Rothbury site.

Enjoy!


Bubble chart with labels

In January I had the opportunity to visit the Queen City to provide some Flex training to a great team of developers under the queen’s crown, and to spend time with some dear friends as well. They (the developers, not the friends) had a requirement to produce bubble charts that had labels inside the bubbles. It occurred to me that other people could probably use this feature, too, so I decided to polish it up a bit and make it available. The result is two classes, LabeledBubbleRenderer and LabeledBubbleSeries.

To implement the functionality, simply create a BubbleChart, and then put a LabeledBubbleSeries tag where you would normally put your BubbleSeries. You should never need to explicitly reference the LabeledBubbleRenderer, because the LabeledBubbleSeries class uses it as the default renderer.

<mx:BubbleChart> <mx:series> <rd:LabeledBubbleSeries /> </mx:series> </mx:BubbleChart>

The primary departure from the standard BubbleSeries class is that the LabeledBubbleSeries has a fourth data field: In addition to xField, yField, and radiusField, there is also a labelField property. As the name suggests, this is the name of the field that stores the string that should be displayed in each bubble’s label.

<mx:BubbleChart> <mx:series> <rd:LabeledBubbleSeries labelField="name" xField="leads" yField="sales" radiusField="commission" /> </mx:series> </mx:BubbleChart>

Secondarily, there are also a couple of additional styles, which control the location of the text within the bubble. These values, of course, are passed on to the LabeledBubbleRenderer instances which draw the circles and display the text.

<mx:BubbleChart> <mx:series> <rd:LabeledBubbleSeries textAlign="center" textVAlign="middle" /> </mx:series> </mx:BubbleChart>

I have posted a very simple demo app that shows how this all fits together.

Demo screen shot

If you look at the code, you will see a rather tight coupling between the two classes. I did not view this as undesirable because I could not think of a reason why you would want to use one without the other. However, the code is free for you to modify as needed. If you do make a significant modification that you think might benefit others, please let me know, as I would like to integrate it.

Finally, a disclaimer: As you have probably already noticed, this code is not independent of Adobe’s Data Visualization components. So if you don’t have those, this won’t do you much good. But if you do have them, then you may find this to be a useful little enhancement. Enjoy!

This being the 17th of March, allow me to close with this wish: Erin Go Bragh.


Putting a Flex Face on Alfresco, Part 2

In my first Flex/Alfresco webinar, I showed how you can log in to Alfresco from a Flex UI using Alfresco’s Flex SDK. That was nice, of course, but it was also sort of a tease: it left folks wanting to see the next step. Well, it took a while, but I finally recorded a new screencast that shows how to get content from an Alfresco repository and display it in Flex. You can watch the video and download the Flex source code here. You can also see the video directly on YouTube, but you can only get the code on the Rothbury site. Please let me know if you have any questions, suggestions, frustrations, cogitations, meditations, salutations, etc.

Stay tuned for Part 3, where I plan to show how I created the custom Alfresco web script.

(UPDATED LINKS ON 1/3/2011)


Cairngorm Diagram Explorer update

I was delivering Cairngorm training to a client’s development team, and the team lead mentioned that the old Cairngorm Diagram Explorer really helped him get a feel for how the various moving parts of Cairngorm work together. After browsing through it, everyone on the team agreed that it was a great tool, but that since it was out-of-date (based on Cairngorm 2.0/Flex 2) it could be confusing to new developers. So I decided to bring it up to Cairngorm 2.2/Flex 3, following the best practices outlined in the Cairngorm training materials.

You can click here to view the Explorer and interact with it, or click here to download the zip that includes the Explorer and the Flex application on which it is based.

Let me know if you run into any issues or if you see room for improvement.


Flex and Alfresco on The Flex Show

I’m on The Flex Show this week, talking a bit about Flex/Alfresco integration. Jeff and John were great, and I think I managed to get some useful information across in spite of the fact that I was recovering from the flu when we recorded it (back in December). There are a couple of items that need improving/correcting, but listen to the show first, then come back here for the clarifications.

OK, here we go. For one thing, I have learned since doing the show that in addition to Alfresco, there are other open-source Enterprise Content Management Systems (ECM’s) out there. (When we did the show I knew about projects like Drupal and Joomla, which are great, but they are Web CMS, not enterprise systems.) In any case, Alfresco is the one embedded in LCDS, so it’s going to be the one that has the most potential to impact us as Flex developers.

Another thing I realized in listening to the recording is that I did not do a very good job of describing the Flex/Alfresco implementation that we did for the large hospitality corporation. The application is really a lot cooler than I made it sound. On the Alfresco side, the repository has models and custom content types that map to the corporation’s specific needs. On the Flex side, VOs map directly to these custom content types. The UI presents these as custom item renderers/item editors, with each renderer/editor being specific to a content type. The screens then group these custom renderers/editors based on business logic, not content type. For example, if the user does a search on “Pets”, the application will respond by displaying a list of content items that relate to pets, regardless of the content type of the individual items. It was a bit of a challenge to display renderers/editors for all of these disparate content types in a consistent and user-friendly way, but I think we succeeded.

The application also had alerts to prompt users to appropriate action. For example, many content types had specified periods of time that they were considered to be valid, after which they became “stale”. This period of time varies between content types, and can be configured in the administrative interface. On the Flex side, items that are soon to become stale are highlighted so as to draw the users’ attention to them.

But perhaps the best thing about the application is how it allows different groups of users to interact with the content as a team. For example, the groups that are responsible for entering the content are dispersed around the globe, whereas the groups responsible for reviewing and approving the content are located in the corporate offices. These reviewers/approvers do not have rights to edit the content; they merely review it, and if it needs modification, they return it to the responsible party with notes as to what needs revising. They can also assign tasks to the entities responsible for entering and updating the content.

I could go on with this, but hopefully you are getting the idea that there are a lot of things that you can do when you have an ECM on the backend and Flex on the client.


Malformed XML can generate a security sandbox violation

I’m in the process of developing a new Flex 3 RIA, and the server code is not yet written, so I’m using static XML files to provide data while I build out the UI functionality. The XML files are stored on my development machine in a subdirectory of the folder that holds the main SWF. It’s all a very standard setup, and I was successfully loading two files from the same subdirectory, so I was very surprised this morning when I got a security sandbox error:

Error #2070: Security sandbox violation: caller  cannot access Stage owned by .

As implied by the reference to “Stage owned by”, this error is supposed to occur when you are loading a SWF from an unauthorized domain. I did some quick searching on Google, and everything I looked at had to do with loading a SWF. The stack trace did not clarify the issue either:

[RPC Fault faultString="Error #2070: Security sandbox violation:caller  cannot access Stage owned by ." faultCode="Client.CouldNotDecode" faultDetail="null"] at mx.rpc.http::HTTPService/http://www.adobe.com/ 2006/flex/mx/internal::processResult() [E:\dev \3.0.x\frameworks\projects\rpc\src\mx\rpc\http \HTTPService.as:842] at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/ mx/internal::resultHandler() [E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\ AbstractInvoker.as:186] at mx.rpc::Responder/result()[E:\dev\3.0.x\frameworks\ projects\rpc\src\mx\rpc\Responder.as:41] at mx.rpc::AsyncRequest/acknowledge() [E:\dev\3.0.x\frameworks\projects\rpc\src\mx\rpc\ AsyncRequest.as:74] at DirectHTTPMessageResponder/completeHandler() [E:\dev\3.0.x\frameworks\projects\rpc\src\mx\ messaging\channels\DirectHTTPChannel.as:381] at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at flash.net::URLLoader/onComplete()

I suspected something was wrong with the XML file, since the UI was successfully loading other files from the same directory. I opened the file in XML Spy, which immediately displayed a message to the effect that the XML was not well-formed. And sure enough, I had missed something. Here is what the XML looked like:

<page> <name>page1</name> <type>pagetype</type> <previewUrl>previewUrl</previewUrl> <path>page/path1</path> <promoTypes> </promoType>typeOne</promoType> </promoType>typeN</promoType> </promoTypes> </page>

You will probably see the error right away, but to my embarrassment I didn’t. How did the error creep in? Well, I had copied the sample XML from the design document (which I did not write) and pasted it into an XML file so that I’d have something to pull in for development purposes, and evidently I did not check it over very carefully. (If you don’t see the error, look closely at the promoType tags, and you’ll see that the opening tags have closing slashes.)

I fixed the XML, the error vanished, and I was able to resume forward progress. Clearly, the error message displayed by the debug player was not only non-helpful, it was actually misleading.

I thought I’d post this here in case anyone else runs into a similar problem. It may save you a few minutes of wonderment.


CheckBoxGroup 2.0 (Beta)

About 15 months ago I released the initial version of CheckBoxGroup, and I was very happy to see that a number of people found it useful. However, like most developers, I can’t stay happy with my creations for very long; I always seem to think of things that I could do to extend and/or improve them. So it is with the CheckBoxGroup: although it was a decent and useful control as it was, I really wanted to make it better. (If you’re not familiar with what the CheckBoxGroup does, take a quick look at the original post.)

The primary issue that I wanted to address was that it could not be implemented in MXML; the only way to instantiate it was in ActionScript. This was not ideal, especially considering that there are many developers who prefer to work as much as possible in MXML. So the biggest change for version 2 is that it can be instantiated with an MXML tag.

Of course, in order for a class to be instantiated in MXML it must be a subclass of UIComponent. The Adobe engineers got around this with RadioButtonGroup, as I understand it, by tweaking the compiler so that it made an exception for that particular control. I am not interested in messing with the compiler, so I made CheckBoxGroup a subclass of UIComponent. This may be unfortunate, since it’s not a visible control, but I do not think it is a major issue. First, I don’t foresee any application having so many instances of the control that the additional resources used will be significant. Second, I set visible and includeInLayout to false so that it doesn’t interfere with the appearance of the UI.

In the process of making it MXML-ready, I also created some public properties and methods that make the control more dynamic and flexible. For example, you can now specify the master, subordinate, and other/none-of-the-above checkboxes at any time after instantiation. Of course, you can still pass them to the constructor as you did in version one; this version is fully backward-compatible.

Another new property that I think is very useful is selectedItems. As you would expect, it holds an array of the checkboxes in the group that are selected.

Two useful new methods are addSubordinate() and removeSubordinate(). Just like the names sound, these allow you to add and remove individual subordinate checkboxes at any time.

One caveat: Unlike version 1, this new version has not yet been implemented in a production application. So exercise due diligence. And please - let me know if you find any bugs or have any suggestions for improvement.

Click here or on the image above to see a small sample application that demonstrates how the CheckBoxGroup works. You can right-click on the application or click here to view and download the source code.

The demo application shows three different implementation styles, one ActionScript and two MXML. As far as I can see, which one you choose is purely a matter of personal taste. The demo has a fourth screen that lets you see how the CheckBoxGroup instance behaves as you add and remove individual CheckBoxes.

Enjoy - and again, contact me with any feedback.


Just like old times

I haven’t done one of these in years.

My employer’s website needed some sprucing up, so he asked me to put together a simple promotional animation for the home page. It had been a long time since I designed one of these, but I did it, and you can see it at rothburysoftware.com.

Surprisingly, it was fun - so much fun, in fact, that I’m thinking about making one for my own site. So, what do you think? What sort of elements would be appropriate in a Flash animation on a Flex developer’s site?

Credits:
I did not create the icons used in the animation, so let me give credit where credit is due.

Similarly, I did not create the Camaro graphic used on this post. I got it from cemagraphics