photo credit: jasoneppink

I’ve been working on a project recently that involves a desktop AIR application running (mostly) offline with a local SQLite database. Occasionally the app will synch collected data remotely with a central server that will have an administrative and reporting web front end. Various parts of the AIR application involve filling out a series of multi-choice questions. Considering that the data will be used by two different systems, and anticipating that questions and answers may want to be updated from the admin portal, it seems a good choice to make things as dynamic as possible based on data from the db. It’s not a difficult problem to solve, and I’ve done it a time or two before, but since it’s fresh in my head and the code is in front of me, I’m going to use a couple blog posts to document the strategy.  The SQL presented is pseudo code and will not actually execute.

Part 1 is getting the database structure in place.

The first two tables are lookup tables used to catorgorize our questions and answers.

questionTypes (
pid integer pk,
name text
)

answerTypes (
pid integer pk,
name text
)

QuestionTypes may hold names of groups of questions,  like ‘Screen1′, ‘Screen2′.
AnswerTypes will hold names of groups of answers. Some entries in my tables are ‘Difficulty’,  ’Frequency, ‘Yes/No’.

Now we can define our main Questions and Answers tables.
questions (
pid integer pk,
questionTypeId integer fk,
answerTypeId integer fk,
sequence int,
text text,
active int
)

answers (
pid integer pk,
answerTypeId integer fk,
sequence int,
text text,
active int
)

Records in the multiChoiceQuestions table hold a relation to a questionType and a answerType. Every question presented together should get the same questionType and the answerType will indicate which groups of answers should be associated with this question. Text is the question text itself and sequence is the order.

Records in the multiChoiceAnswers table hold a reference to answerType. So for the  answerType ‘Difficulty’, text for records in this table may be ‘Easy’, ‘Sorta Easy’, ‘Sorta Hard’, ‘Hard’, ‘Impossible’.

At this point we have an easy way to do CRUD on questions, answers, question grouping and answer grouping by just making db updates.

The active flag becomes important when we start to look at the response tables.

responses (
pid integer pk,
sessionId int fk,
questionId int fk,
)

responseAnswers (
pid integer pk,
responseId int fk,
answerId int fk
)

We have our main response table which holds a reference to a questionId and sessionId. SessionId  would have references to the user / time/ whatever, and we also  have a join table between responses and answers. This facilitates having more than one answer for a question.

We can now associate an answer or set of answers with a specific question for a single user at a particular point in time. Our main goal is accomplished from a schema standpoint.

Back to the active flag for a moment. If a question or answer gets updated or removed, we don’t want to directly update the current row or else previous responses will hold a reference to a question or answer that was different in the past when the user actually answered it. A new record will be created with a new id, and the old question/answer will be set to inactive. This insures that when reporting on results, we will see what the user actually saw at the time they answered.

The next part will show code examples of how i keep this data structured in memory, Flex components used to dynamically display the question and events to keep everything in synch.

Share/Bookmark

You have a great application on your hands but you can’t load it up as a part of your brand-spanking-new application because they are not the same version.

Do you rewrite the old stuff? Or you downgrade the version of the app you are currently building? Both are very painful, and all you need to do to avoid the pain is to make the apps talk and coexist. This is a standard problem of any enterprise system, especially the ones with a long lifespan.

Flex framework addresses this problem with the Marshall Plan or at least it’s supposed to. Here at Pathfinder, when we were tasked with a complex multi-versioned  enterprise system that had just such a problem. We gave Marshall Plan a try and in our experience we never got it to work entirely as intended. But we came up with a solution.

Background

To clue you in on the details, here we are, developing a Flex 4.1 SDK application so happy to use the new architecture that Adobe engineers came up with when we heard from our client that one (of many) of the modules needs to stay in version 3.5 because the framework it is using hasn’t been updated to Flex 4. ¡Ay, caramba!

Going from Modules to Sub Applications

We know that we can’t have Modules in a different version so we switched our logic to use Sub Applications instead. It is convinient to rely on ModuleManager to handle multiple instances of multiple Modules. We already had an Interface implemented for communication with Modules and the same one would be used for Sub Applications. These Modules also had a purpose of existing as independent apps so we scratched their wrappers, made them into apps and problem solved. We understood that sub apps are loaded into a different sandbox and that it will have consequences but we felt comfortable that we can work that out – priority was for the apps to “talk”.

Loading Sub Applications

We made sure that we went through document about loading sub applications before we began. This is a document that you can not do without when attempting to go multi-version.

First problem we encountered is that we were directed to do the following:

When compiling each of these types of applications, you should include the MarshallingSupport class into the main application and sub-applications. You do this with the includes compiler argument, as the following example shows:

-includes=mx.managers.systemClasses.MarshallingSupport

We discovered that inserting this compiler argument in an app prior to version 4 reliably returns the following error:

Unable to resolve a class for include: mx.managers.systemClasses:MarshallingSupport

That puts our sub application out of the game. We said, well let’s go ahead anyway, maybe they meant just the main app and not the sub too and we proceeded. Reason for such a bold decision is that we didn’t have any other option.

Even with that snag, loading a different version sub application turned out easy as pie thanks to SWFLoader in Flex 4 and its “loadForCompatibility” property. It worked on the first try.

Here is an example in AS3 (Flex 4.1 app):

private function loadSubApp():void
{
    //swfLoader is declared outside
    swfLoader = new SWFLoader();
    swfLoader.name = "mySubApp";
    //subAppContainer is a Canvas declared in MXML
    subAppContainer.addChildAt(swfLoader,0);
    swfLoader.trustContent = true;
    swfLoader.loadForCompatibility = true;
    //setting source triggers loading
    swfLoader.source = "subApplication.swf";
    swfLoader.addEventListener(Event.INIT, swfLoaded);
}

Problem of accessing Sub Application

This is where all the trouble resides. We loaded the sub app into the main app and now we wanted to make a call to our interface method. We looked at the example from  loading sub applications document on page 24 and found it misleading. Who the heck is “SubApp2″ and how will my main app know of that class or any dynamically loaded app anyway?

We also kept seeing this line of code around the net and in the examples:

(contentLoader.content as SystemManager).application

That’s how we’re supposed to access the sub app once it is CREATION_COMPLETED. We tried this with various combination of versions that gave different errors and we tried to cast it to SystemManager in various ways. We always got two possible results: null and an error of type “SystemManager can’t convert to SystemManager”. We understood that there might be a thousand reasons for this happening, starting with our MarshallingSupport include issue but we also understood that the darn thing loaded – we could see it in the display.

In the end we concluded that we are not Adobe engineers and we shouldn’t give that problem any more time. If it doesn’t work like it’s documented, we should not spend clients money figuring it out.

Access solution

We came up with our home brewed solution that is working very well. Solution is based on the fact that the sub application does load and exists in memory – therefore it must be accessible.

We decided to try out the good old vanilla approach which involves accessing properties of an typed object as if it was a plain Object. This is generally a bad practice and defeats the purpose of Object Oriented Programing but can sometimes come in quite handy. This is one of such rare instances.

To continue from the code example above, we listened to the Event.INIT just so we could add FlexEvent.APPLICATION_COMPLETE listener once the SWF is loaded:

private function swfLoaded(e:Event):void
{
    swfLoader.removeEventListener(Event.INIT, swfLoaded);
    swfLoader.content.addEventListener(FlexEvent.APPLICATION_COMPLETE, subAppCreationCompleteHandler );
}

Once that happens we can acces our sub applications method using vanilla approach:

private function subAppCreationCompleteHandler(e:Event):void
{
    swfLoader.content.removeEventListener(FlexEvent.APPLICATION_COMPLETE, subAppCreationCompleteHandler );
    //subApplication is declared outside
    subApplication = e.currentTarget as Object;
    //Flex apps have an "application" object that represent the application instance
    if( subApplication.hasOwnProperty("application") )
    {
        if (subApplication.application.hasOwnProperty("methodWeWantToCall") )
        {
            var f:Function = subApplication.application.methodWeWantToCall;
            //Yes, we have to know upfront what are the parameters of the function
            //but that is why we have the interface for
            f( true );
        }
        else
        {
            Alert.show("Sub App doesn't have 'methodWeWantToCall'");
        }
    }
    else
    {
        Alert.show("Loaded Sub App is not a Flex App");
    }
}

Method Parameter Gotcha

We have typed parameters that we were passing to the interface method  into a custom value object back when we were working with Modules and packaged it in a SWC that everybody involved in the system was using.

After trying to pass the same custom VO to the sub app we started getting errors of the kind: “MyValueObject can’t convert to MyValueObject…”. We remembered that we read somewhere that we can only pass primitive objects to sub apps and we converted our VO to an XML that luckily is a primitive object in AS3. We also put the XML schema in the comments of our SWC to make sure there is little ambiguity. To add to that, you can find in documentation that any event dispatched by sub application can’t be casted but has to be retyped as well. Optionally you can access its parameters vanilla style too.

Home Brewed Cheat Sheet (main app: 4.1, sub app: 3.2+)

- You don’t need -includes=mx.managers.systemClasses.MarshallingSupport anywhere.
- Use loadForCompatibility and trustContent properties of SWFLoader.
- Make sure to listen to FlexEvent.CREATION_COMPLETE event on the sub app that you can only attach once the SWF has finished loading.
- Using hasOwnProperty method, check if application is available on your sub app and then check is your method available in the application.
- Create a new Function and pass it the reference to the sub apps method.
- Fire at will.

Conclusion

Creating a multi-versioned application was an exhausting experience. We were also very mad at Adobe at times for advertising multi-versioned apps while having a disarray in documentation. Body of knowledge for this topic is huge and variability of results is aggravating.

In the end the system works and we are satisfied with it’s stability. We are not crazy about vanilla access of objects or passing of primitives but we feel our assumptions are stable and we have enough error checks. Having said that and with bad feelings behind us, we are grateful to Adobe and Alex Harui for making multi-versioning even remotely possible. I can only imagine the multitude of considerations they had to make to make this an option. The philosophy behind their solution is a good study of the problem of managing evolving systems.

Share/Bookmark

photo credit: Amateugrapher

We recently finished a first release of a data visualization application. The application was written in Flex and needed to draw curves with up to 250,000 points total between them. To do this in less than a half a second took quite a bit of optimization, to the point where we could have written a 3D real-time video game with our rendering code.

I was curious to see what the performance would be on other browsers with HTML5 Canvas. I put together a simple GWT program to run each browser through it’s paces. The target on the Macbook Pro I was using: 400 milliseconds, which is what the Flex app could do for 250,000 points. The results?

• Opera 10.53 – 160 milliseconds.
• Safari 5.0 – 180 milliseconds.
• Firefox 3.6.4 – 180 milliseconds.
• Chrome 5.0 – 200 milliseconds.
• iPad – 2500 milliseconds.
• IE ? – Blech. Don’t ask. Minutes. It likely has something to do with the GWT implementation.

For a long time if you suggested using web technologies for complex graphical operations, you would have been laughed out of the room. When the tools and libraries catch up to Flex/Flash, however, these days nobody will be chuckling at HTML5.

Share/Bookmark

Do you know every detail in the Flex framework by heart? Do you also know all the other libraries that you use by heart? Well I don’t and I often have to reference some online resource while developing.

For instance, I always have Action Script Language Reference, Wikipedia, some library API site(s), Gmail and a dozen other ones open + the debug version of the app at hand.

So what used to happen when you but a breakpoint in Flex Builder with all these tabs? They would be unavailable and any process happening inside of them could not be relied on. Since not all code runs well on first attempt, if the app crashed while testing ( think 3D, data intensive apps, etc.) the browser and all the tabs went down with it.

My solution so far was to use Firefox as a development browser and Safari ( since I’m Mac based ) as a browser for references and everything else. For crashing resolution, Firefox has a nice “Restore” option but it’s not fun waiting for 15 tabs to reload.

So Google Chrome recently came out for Mac. It didn’t impress me on Vista so I didn’t care much. I guess I was in between of curious and bored so I decided to give it a spin.

What a pleasant surprise to see every tab running in a different process. My workflow feels so much better now that I’m not afraid that a bad line of code is going to take down my whole browser.

I’ve heard that IE8 also runs tabs as different processes but I’m not crazy about returning to development on Windows. I did try out Chrome on Windows 7 as a result of the Mac test and all the issues I’ve seen the first time around have been addressed. Kudos to Chrome development team.

Let’s not forget to mention all the features that are missing on Google Chrome for Mac, primarily the lack of Bookmark Management, but Google Bookmarks or any online bookmarking service will do for now.

I can not wait to see more development being done on Google Chrome for Mac and it getting out of beta. I will not uninstall Firefox anytime soon but as a Flex developer I give Google Chrome for Mac high scores for beta.

Share/Bookmark

[SWF]http://www.pathf.com/sites/pfd/flash/zeitlupe/Zeitlupe.swf, 500, 475, dataLocation=http://www.pathf.com/sites/pfd/flash/zeitlupe/[/SWF]

We’ve been building a lot of mapping/GIS data visualization applications over the last few months, mostly using flex with various back end services (ArcGIS, google and yahoo maps, open source mapping frameworks.) One of the more fun little projects was putting together this flex widget for displaying maps and graphical data together on a timeline. It’s meant to be distributable so that anyone with a blog can display it. We put it together using presidential election data and national debt, not because we thought the correlation was particularly significant, but because the data was available going back a long time. The widget is pretty flexible; it can go against a local data source or a web service, and we can easily modify it to show different kinds of data. We’ll be coming out with a few more of these over the next few months, hopefully with some more 3D maps, drill down on geographic level, as well as more charting and other visualizations. If you’d like to use this one, or have ideas for other data sets and visualizations you’d like to see, let us know.

Share/Bookmark

The other day, I was trying to get the icon for a button in flex programmatically for a FlexUnit test. The code I was testing set the icon of a button using setStyle('icon', ICON). I attempted the obvious button.getStyle('icon') in the test, but was surprised that this always returned null.

A little bit of digging revealed that the I needed to go through the style declaration for the button. When changing my test to assert on button.styleDeclaration.getStyle('icon'), I was able to successfully access the icon.

I found this a bit non-intuitive, but fortunately it only involved some investigation and minimal code changes.

Share/Bookmark

We just published a case study on a Hedge Fund Analytics application developed in Flex. It’s an extensible Flex based platform for real time analysis of hedge fund performance data, with dynamically updating charts, graphs and sophisticated filters for cumulative performance, return distribution, alpha, beta and correlations, commissions and fees, credit and sector exposure.

The system is designed as a modular platform which can consume data services from multiple sources, and can integrate multiple custom components. Custom components were designed to conform to a standard API. Components expose standard flex component properties and events so that properties and method references could be passed. This allowed individual dashboard applications to be built, fed data and customized at run time. Take a look at a video demo or read the longer case study on the Pathfinder site.

Hedge Fund Analytics

Share/Bookmark

After a long time of searching for the right data visualization framework for Flash Platform, some time ago I’ve put my money on Flare which is based on a Java framework called Prefuse. I have been very happy with it and haven’t looked back until a new framework of same purpose crossed my way – Axiis.

Before anything else said, Axiis is a brand new framework so I have to give it some credit if all the bells and whistles are not there. What intrigued me about it in the first place is that Axiis is heavily relying on Degrafa, a well proven declarative graphics framework that I have a lot of good experience with.

After looking at Axiis examples, here are my first impressions of how it stands against Flare.

Firstly, they are both open source. Needless to say, this goes a long way.

Axiis, unlike Flare, is solely Flex based because of its reliance on Degrafa. Not that I’m crazy about doing data visualization projects in Flash, but it is a good feeling to have options.

Axiis code looks better structured and organized – at a first glance. While it is a little bit tricky to organize Flare code, I have made it a standard to use it in conjuction with PureMVC, (my favorite MVC framework) and that setup makes it much easier to deal with Flare code. Code in Flare examples looked scary at best when I saw it the first time. Axiis code in the examples they provided is mostly neat MXML, but there is only so much of MXML per component that I’m willing to look at. My guess is that combining it with an MVC framework and AS3 would be a nice thing for me to try and see how that workflow looks like.

Flare was not quick to jump into in my experience, but well worth the trouble. Jumping into Axiis with previous knowledge of Degrafa took a really short time. Although there is example code for Flare, I didn’t learn a lot from it because of the very different coding style from what I generally do. I learned most about it from forums, fidgeting with classes and somewhat reading through the source code. Axiis example code is clear as day and a ready source for your first Axiis project.

What rocked my world about Flare to begin with were the layout transitions and how well they performed with larger data sets. I haven’t seen that in Axiis examples. I’m not sure if I should care about transitions that much but I think that it is not to ignore when it comes to interactive data visualizations. Performance testing is the first thing I’m going to pay attention to when it comes to Axiis.

So at the end I will do a prototype in Axiis to see how is it to work with and how well it performs. It definitely seems very promising but I’m not going to drop Flare anytime soon.

What will be hard to top about Flare is that I keep finding new ways to do things with it and new wonderful expressions made possible with its endless flexibility.

Share/Bookmark

photo credit: Paul L. Nettles

We’re starting a software development summer internship in our Chicago office this year. If you’re a college junior, senior or recent graduate who want to learn the agile/OO development ropes while developing really cool products and services and earning $20/hr per hour (you should pay for the privilege, right?), give the internship posting a look here.

Share/Bookmark

We just launched a new rich internet application for Destinationbeer.com, called Beer Hunter.  It was written in Flex and Ruby on Rails and features mapping and 150 beers from around the world.  We think it’s pretty cool, so check it out, and let us know what you think.  One of the things I really like about it is that the design pattern can be applied anywhere you’re filtering products geographically and on attributes.  Coffee? Wine? Jewelry? Chocolate? Travel Books? I particularly like the way the beer list visually sorts when you change a filter and the zoom interactions on the map.

There’s more information in the case study on the Pathfinder web site, Sasha has written a related post on RubyAMF and Flex from the Flex perspective , and Justin has written one on Rails, AMF and Flex from the Rails perspective.

Share/Bookmark