Flex Development Process (getting started)
I am a designer and I love web-design, but I’m lucky enough to get some opportunities to do development also. I’ve dabbled a little in Javascript, PHP, and ASP web development. I’ve been exposed to a pretty decent amount of ActionScript programming through various Flash projects over the years. My only programming classes were 2 semesters of 100 level Java my freshman year of college, 4 years ago.
I’m telling you all of this so you know where I’m coming from, and why perhaps my workflow is shaped the way it is. This is simply what seems to be working for me, there are certainly better ways to do anything.
I am only on my 3rd Flex 2 Rich Internet Application (RIA) now, so I’m a newb, but here’s my process.
First things first, Design! Yes, get some of the homepage design pinned down, first. Colors, shapes, textures, size of the page, target audience, simplicity of interaction. These are the things to consider before starting a Flex project. Flex is a very visual environment, I think it’s important to mock up the entire application in photoshop before starting anything else. The client gets a chance to see their final product first, they can give their approval for the look and feel and give very insightful feedback on the functionality of the application if they get to see the app right off the bat.
So after a couple design revisions (or just one) you should have a PSD that looks like a flex application. I keep Flex open when I’m doing the design comp to check on what controls are available and what they look like.
After design is approved, start working on your data, this time I created an Entity Relationship Diagram to get a good feel for how the database was going to be structured, and ultimately what data objects I’ll need to be working with in my Flex app. Bring a developer in on this for their knowledge of normalizing databases, etc if you can. The client got to see this diagram also and again we refined the structure of the application in important ways based on their feedback.
OK, next is to get started in Flex Builder. If the crappy Eclipse IDE will launch and run, good for you! You Win! Seriously though, the next step is to layout the interface in Flex, put all the controls, canvases, accordions, and tile lists you will need in place. Export graphics from the PSD to embed as skins for the various UI controls. Test the interface with no code to make sure the basic functionality of the UI components is all there first. I do as much as possible in an external style sheet for my Flex App now, very handy to keep the MXML file somewhat clean. Also, create any custom component that you know you will need (custom item renderer’s etc.).
Next, once the interface in your Flex app looks just like the photoshop mockup minus the data, start setting up your data. I use XML for all the data input, the developers create ASP pages to generate XML files from the database. But first I need to create a flat XML file locally that matches up the Entity Relationship Diagram that I created earlier. Fill in all the data from an imaginary data set, create the images you might need to refer to, make up a full featured XML data structure to keep locally.
Now I create an external .as file to store all of the code for my project, I know theres some stuff you can do with custom classes and true OOP but I just put it all together in one big actionscript document per mxml file. I import any components that I’m pretty sure I’ll need, set up a couple local objects to store my current data. Create the HTTPService objects for getting my XML data into the application. And start creating empty functions. Set arguments and return types if you know them, most of mine have one or no arguments and return type :void. Create a function for all of the buttons in your UI, create a function that is reusable if you can. public function deleteItem(itemID:string):void {} is usually better than creating 50 of these: public function deleteMySpecificItem():void {}.
I don’t worry about actually writing the code into the functions yet, I just create a bunch of empty functions and put one or two lines of comments into the function to describe what I will do there.
Now it’s time to make your data go into the correct places of the interface. Make the data show up where it’s supposed to and how it’s supposed to.
Then worry about functionality and writing the code that allows you to move the data around inside the application and interact with the UI elements.
Finally creat all the HTTPService request to write the data back out to server side scripts that will update the database.
Those last two steps take the longest and are the most tedious. But seeing it all come together is so awesome. Testing, bug squashing, and more testing is not very fun either, but still very satisfying when done.
So, I just thought I would share how I’ve been doing my Flex development. I don’t know who will read this, but I hope it can help someone who is just getting started.