MXNA Reader built with CFForms

We made a Reader for MXNA in ColdFusion using only Flash Forms. But wait, it's not only an MXNA Reader, you can also read Full As A Goog :)

You can jump to see the application or continue reading the details. (A screen shot in case your screen resolution is less than 1024x768)

This application is an example of how you can consume Web Services via ColdFusion and show the data in a cfform via Flash Remoting. But as always, the beauty is in the details:

The Application Flow

There is a central panel (the green one) that has a DataGrid. When the application loads, this grid gets populated with the most recent post from MXNA. This data arrives from the server as normal, like any other flash form in a single query. When an item is selected in the grid, a preview of the post is shown in the bottom panel.

There are also six orange panels placed on both sides of the Entries panel that allows you to choose what data you want to retrieve from the server (by category, by last searches, favorites, etc). Again, those panels are populated like a regular cfform (no remoting so far). But when you make a selection in any of those panels, a remoting call is made and the data received populates the grid with the entries.

Search and Filters

The search is very simple. You can search for any keyword in the MXNA database, choosing to get the results sorted by date or relevance. The call requesting the data is made via remoting.

In addition, you can manipulate the records locally, filtering the results. The filter is performed on the client, and allows you to filter the currents post in the grid by a keyword or phase. It has the possibility to filter the grid matching or ignoring the case. It also allows searching in the title, content or both. If you are wondering why we have the "Apply Filter" button if the filter is executed as we type, the answer it that it facilitates reapplying the same filter without retyping the keyword when new data comes from the server.

Pageable records

This is a small feature but it's worth mentioning. Because MXNA and Full as a Goog return a maximum of 50 records on each request, we needed to implement a navigation to go through all the records (we actually just copied the way MXNA shows the pages). But the question was how to implement a navigation that changes dynamically depending on that data that arrives. We opted to use an old feature from flash (asfunction) that uses a link to call a function in an html field. We made something like this:

var page = 3; '+ page+'

Loading records animation

We wanted to show the user that something was loading when they requested data, so we thought that the best way was to show a little animation. We just hide and show the animation with a binding when the data arrives.

Opening the hidden panel

I think this is my favorite feature and I believe that we got it right. Sometimes it's difficult to show everything in one screen and we end up opening popups for each new thing that the user needs to work on. In that way, the content gets behind the popup. We could also use tabs, and the content would get on another tab making it difficult to view everything at the same time. A fluid layout could be a solution and that's what we did. Technically, what we do is to use set interval and resize a navigatorTab using some bindings.

Languages

Because MXNA is aggregating multiple blogs from different languages, we provide a list of languages to choose from. You can select as many as you want if you don't select anything we provide the default (English). Technically, this list is a repeater inside a cfformgroup type tile. When you make a selection, a call is made via remoting to a CFC and your preference gets stored in a cookie.

Preferences

In this panel we provide the ability to add, remove and sort the columns that appear in the main panel. For example, you can remove all and start adding them in your preferred order. Then, you can resize the columns by dragging from their header borders. The only missing feature is that we don't store these settings (maybe next version). To make this feature, we use the method addColumn() and removeColumnAt in the grid.

Note:There is a bug in the grid component that makes it lose the data from some columns. Just refresh the grid if that happens.

Feedback

This panel is just to hear from you, so tell us what you think, what's your impression, etc.

We use remoting to send the message to the server and it will send us an email. If you have technical questions or something that may help others, please write that in the comments at the bottom of this post because we can follow up better the conversation, an others may jump to a make a more interesting debate.

Favorites

I also like this one a lot. This panel has the purpose of storing you favorite feeds in your local computer. And it’s easy to use, just drag and drop from the main panel to the favorites panel. Then, when you select one favorite, all posts from that feed will be shown. You can also remove them with the bottom button if you don't like it. I want to thanks Philippe Maegerman for the idea of implementing drag a drop in the cfforms, ( thanks pin :) ).

Technically, the drag and drop uses some listeners that are registered to hear a drag event. The process to store the data works using shareObject (flash feature). It's a way to store persisting data into the client, similar to a cookie, with the difference that there is no interaction with the server. Everything it’s stored on the local machine and all the process is made by flash.

In the future, I would like to add a new feature that will allow you to import and export the favorite list to facilitate the migration from one computer to another.

Look and Feel

We use CSS to skin the application. We have two color tones, green and orange, to differentiate between the main panel and the others. Because not all the styles are inherited, we have a cfsavecontent variable where we define the styles for the buttons, panels etc. This allows us to reuse the style and make all the changes in one place only.

Database and Web Services

There is not database. It makes heavy use of the MXNA and Full as a Goog web services. It utilizes most methods offered and MXNA has played nicely with our components for the most part. We did run into some problems when the case of the column names of the returned query were not consistent and we could not feed Flash the recordset directly. For speed, we cache the infrequently changing data such as category names and feeds.

Advantages

Fast Fast Fast. Yes the cfform is a RAD (Rapid Application Development). If you need to do the same thing in flash or other technology, you will need to spend a lot more time. In Flash, there is no layout manager, and you need understand how movieclips and other things work.

CFForms and Flex, on the other hand, have a lot of things already built in that will help you during development. I remember making some RIAs in the past with flash and I know that takes loooooonger.

Restrictions

Yes, there are some, and the 32k limit is the major one. We needed to do optimizations to fit all the features in those 32k (like creating _global functions to reuse). But as you see, you can still do a lot with those 32k and you’ll reach that only if your form is big.

Requirements

Minimum screen resolution: 1024x768 and Flash 7

What’s next

I think the next step is to move the whole application to Flex. Why? Because I want to add more features to it and I already reached the limit in the cfform. Flex will give us the freedom and ability to create classes, custom components and make everything more OO. I have been working in flex lately, and the tags are very similar to cfform. In that way, I think the migration won't be that hard.

Lastly

What is your favorite feature? I already told you mine :)

PS: For mike Mike and Cantrell, I would like to have two more services, a search that would allow me to search for a specific phrase like "Flash Remoting", and a "most recent" service where I can pass an array with only the feeds that I want.

MXNA Reader
Download the source

Update:We made some modifications to the Share Object. If someone created some favorites those are gone now, sorry for that :(. Now we are saving your favorites in a better place so in the future you won't lose them again.