coexist

Looking back on a recently completed project is a good way to catalog the things you’ve just learned in the process. Seeing a project not only as a destination but as a journey is a good way to grow as a designer as well as a developer.

This series of blog posts will be a sharing of the things that I’ve learned on projects here at coexist concentrating mostly on Flex and Flash development.

Schottenstein Zox & Dunn Co., LPA
Giving Thanks

1. Code completion and hinting is a must have for efficiency

So after spending years programming my flash development projects in Dreamweaver and the Flash IDE I finally made the jump to Flex Builder and the Flex Builder IDE. I instantly became more efficient!

Making the jump has convinced me that smart code completion and code hinting are must haves in developing large OOP driven applications. Now that I’ve gotten a taste im positive that I will never go back to the days of coding blindly. I would say that the biggest gain is the ability of Flex to recognize public functions and variables within class files that I’ve created. Not having to constantly open a class I’ve created and check to see what I’ve named a public function or variable has been the biggest gain in efficiency for me.

2. Flex skinning can be difficult and at sometimes downright frustrating

This was our first “full” Flex project, so it was the first time that we really had to tackle skinning Flex components to a specific design.

Flex skinning in itself is a combination of CSS and external assets. The exact styleNames that you’ll need in creating the CSS file are not well documented and sometimes hard to find. That being said, I stumbled upon this explorer that Adobe put out, where you can manipulate styles via flex controls and it will spit out the CSS that you’ll need for each component. Check it out at here.

Once you catch the drift of what the CSS attributes are actually doing, skinning becomes much more bearable and actually kind of fun. Plus he end result will feel more like a custom application than a Flex application.

There are also a couple of Flex skinning extensions for the Adobe Creative Suite that make it easy to create and implement unique and custom components skins. You can read about these extensions here.

3. If your using States within a Flex Module or Component watch out for assigning 100% to a TextArea’s width

Within the SZD Giving Thanks piece there is a custom component that displays 1 of 3 different cards. And within each card there are three distinct States. (1) The default state which shows just the card and a title in a smaller scale. (2) The active state which scales the card and adds info about it. And (3) the selected state which shows the card by itself and to the left of the display area.

Originally I had the width of all of the text fields in this component set to 100% and was getting some very noticeable “jumps” and “shifting” during transitions. Even though the individual TextAreas were displaying correctly, they would ever so slightly shift which would cause the entire components width to shift. After playing around with this a bit I found that if I set the TextArea’s width to a static integer the “jumping” and “shifting” subsided.

So that’s it for now. I hope that some of these insights help you in your future projects. For further reading on some of the topics I discussed and other things that I’ve learned during the course of this project check these links out:

http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html#
http://scalenine.com/
http://www.adobe.com/devnet/flex/quickstart/embedding_assets/#EmbeddingFonts
http://www.infoq.com/news/2008/04/top-10-flex-mistakes
http://www.flashmagazine.com/Tutorials/detail/setting_up_subversion_with_adobe_flex_3/
http://www.adobe.com/products/flex/features/flex_builder/