I launched Eclipse, created a new Flex project and got a shiny new application started. I then found myself staring at the clean grey page with no idea of where to start – call it programmer’s block. Okay, time to regroup. In the past, with larger code based development projects (Java, .Net, etc.) I would have fallen back to the design document and started with either the main data structure/function, or some of the well defined supporting classes. Really building with AIR is no different. The only change is that instead of a data structure, the project is user/task focused.
If I look back at the application structural diagram it gives me a place to start:
The central object that the user interacts with is the Fly Pattern – seems as good a place to start as any.
If I look at a typical fly pattern it consists of some simple elements (the image, fly name, tier name, notes) and some more complex elements (recipe, instructions) that can repeat. To me this means that the pattern class has a couple of support classes that contain repeating elements. Now we’re getting somewhere.
I created a new MXML Component to hold the pattern and called it patternDetails. I dropped on some objects to hold the simple elements – an mx:Image for the main picture, a mx:Text for the fly name and another mx:Text for the tier’s name. I didn’t mess around with layout and design too much – I wanted to get all of the elements together before I worried about aesthetics. Not that aesthetics aren’t important, they are one of the keys to usability, but there is no use buying wallpaper until you know how big the room is.
Next I created two other MXML Components – one for the recipe data and one for the instructions. Both of these have elements that repeat and are quite similar in function, although they are very different in presentation. First the recipe: this consists of a list of elements consisting of parts, materials and notes. The number of elements in the list is not fixed as one pattern may have three items and another may have forty. I needed a MXML object that was capable of holding such a list.
In previous projects I have used the DataGrid in its various forms. Its a useful item that can be bound directly to a data source and has a lot of built in functionality (such as sort). Its really useful for lists of data items. I tried it, but it just didn’t look right, it was a bit too rigid in its layout. I started to look for an alternative when I came across the mx:Repeater. Repeater also can be bound to a data source, but you specify all of the item layout yourself. It doesn’t have the built in functionality, but it does have a lot of freedom in its layout – perfect.
Since I have to consider layout soon, I would like to see how the screens look with “real” data and image. I picked a fly pattern called a Stimulator as a typical example, but how to get the data into the application? Eventually this will be done by reading the information from a database, but this requires developing the database structure, supporting data structure and supporting classes. It will have to be done eventually, but for right now I just want to see something quickly. I could go the other route and just hard code everything from images to text, but that doesn’t verify the functionality of the application – it means that I would need to rebuild everything when I built the functional code.
What I needed was a happy medium – something that I could put together quickly with out a lot of support classes, but still could be easily transitioned into functional code. Objects such as Repeater can use a dataProvider attribute to specify their data source. The dataProvider can be an array of Objects and can come from any data source. In the long run the source will be the database, but right now I can create a local array and use it to test the Repeater. So I created a temporary folder for the images and set up an ArrayCollection to hold the data locally. For example, the following is the temporary array setup for the recipe component:
One other thing to note about the Repeater. A consequence of complete freedom of look and feel is that you no longer have some of the basic functionality that you would expect. For example when I first created the Repeater, connected the dataProvider and populated it with some text elements it repeated everything on the same line. It did not lay new elements after the previous one. What I wanted was something akin to the repeating subform functionality provided Acrobat. I eventually found that wrapping the entire Repeater in a VBox did the layout as the VBox ensures that elements get placed one after the other.
So, now I have a rough fly pattern view with real (sort of) data. I can now start making it look nice. Here’s what it looked like before the beautification effort:
For those interested in seeing the early source code I’ve posted it in zip format here.