Not too long ago, someone asked me for some tips and tricks to write good components in AS3. Not that I’m the best coder or the most structured person, but when you’ve build some components, you’ll find that you’ll run in the same problems over and over again. Most of the problems you can avoid by starting to write down what your component actually should do. So you first can close flex builder .

For who is this tutorial? Well, I assume you’ve done some coding in AS3, so I won’t explain if-statements and for-loops. Anyone should be able to follow this tutorial, since there won’t be very exotic code in the examples.

Lets start!

Ok, lets begin! The first thing to do is decide what kind of component you are going to build. I reckon you’ve allready thought of this, because you decided to build a component. Most of the times a component is created in a larger project. You have a piece of code which is used over and over again. Then you decide that it should be more generic, so you can use it in other projects and voila… a component is born.

In this example, I’m gonna build a watermarked textbox (you know, like the search field in firefox, next to the address bar). To decide what it must be able to do, you simply write down how the user should use your component, like:

When the textbox is empty, a text (the watermark) is shown in the textbox as a hint what the textbox is for. When the focus moves to the textbox, the watermark disappears and the user can input text. The watermark will show up again when the focus changes to another component, but only when the textbox is empty.

And thats it, in a couple of sentences, I’ve described the working of my component. Of course, the more features a component has, the larger the description gets. It’s important that you don’t get technical at this stage, think as a user. By describing your component, you’ll be able to see where possible problems could appear, and you even can use some UML to create flow and classdiagrams.

Once you’ve described every aspect of your component, you’re ready for the next step, which is…

Setting up the flex project

Open up flex builder, and create a new Flex Library project. Name it after your component and click finish. A flex library generates an swc, which will hold your component. In the flex library, create the folders which hold your component. In my example, the component will be in nl/flexperiments/components/text/

I choose not to include the component name in the package name, because I now have the option to create more components in this folder. That way, the project can become some sort of component library.

Be sure to include the package in the library build path, otherwise, it won’t create an SWC. (Project -> properties -> flex library build path)

Now, create a normal flex project. This will be your test project which hosts the component. Just name it something like [component name]_example or _test. Add the library project to the flex build path of this component. I choose to add the project instead of the SWC so you have access to your code from within the example project.

Conclusion

That’s it for now. You now have a paper telling what your component is going to do and you’ve set up the basics in flex.

I’ll be posting the next part soon, so keep an eye on my rss feed. In the meantime, check your bookshelf if you have the following books, which are a must have for any (actionscript) developer:

• Don’t Make Me Think: A Common Sense Approach to Web Usability – Steve Krug (ISBN: 978-0321344755)
• Advanced ActionScript 3 with Design Patterns – Joey Lott, Danny Patterson (ISBN: 978-0321426567)

For suggestions and questions, you know where to post them