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.
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.
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.
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.
I have posted a very simple demo app that shows how this all fits together.
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.
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)
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.
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.
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 ."
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:
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.
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.
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?
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
Following my friend Jason The Saj’s good suggestion, I’ve installed the WPTouch plugin, so those of you who use the iPhone or iPod touch should now have a better experience here. Unfortunately, I don’t have either, so I can’t test it.
That being the case, I will enlist your aid: please let me know how it looks to you, and give me whatever feedback you think might be helpful. Feel free to either add your comments to this post or contact me directly.