Flex Coding Guidelines

Flex Coding Guidelines

I found this great document about flex coding guidelines that one company uses. It is perfect and very much like Java coding conventions.

http://blog.dclick.com.br/2007/02/13/adobe_flex_coding_guidelines_english/

Most of this stuff should be enforced by the compiler (in my opinion) in every language. I know it's strict, but it makes everything so much easier to read and work with. I advise that this become a standard in every company writing in Flex no matter how big or small.


ASDoc Guidelines

If you haven't heard about ASDoc yet, it's a lot like JavaDoc which produces a nice web API reference for all classes and methods. This document describes how to properly write ASDoc comments in your classes.

http://flexed.wordpress.com/2007/01/05/action-script-comment-guidelines/

This site may also be helpful. It mentions tags that I didn't see in Adobe's documentation (such as author) -- but maybe I missed that one. I haven't tried it yet.

http://unleashing.wordpress.com/2007/01/05/action-script-comment-guidelines/


Using ASDoc

The method I have used is to write a batch file (or shell script) that executes the asdoc.exe file from the bin folder with my command line arguments.

Default location in Windows is:
C:\Program Files\Adobe\Flex Builder 2 Plug-in\Flex SDK 2\bin\asdoc.exe

More information on command line arguments and ASDoc usage:

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=asdoc_127_9.html

http://labs.adobe.com/wiki/index.php/ASDoc:Using_ASDoc


Flex ActionScript Editor (free)

I haven't written anything using this tool but I have downloaded and installed it. I was very impressed. Could be a good tool if you were writing a bunch of ActionScript classes and didn't like only seeing 4 or so tabs in Flex Builder.

http://www.flashdevelop.org/community/viewtopic.php?t=1001

Flex Resources

Introduction

I have compiled a list of very useful sites for finding out more information on hard-to-find topics. A lot of them are on Adobe's live docs site. These do not talk about ASDoc or coding conventions (coming soon).


Documentation References
a general reference

http://www.adobe.com/support/documentation/en/flex/


Live Docs Lessons
good for getting started

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000064.html


Assorted Links from Adobe
find some information here

http://www.adobe.com/devnet/flex/?tab:quickstart=1


Flex Meta Data Tags Listing
before you write too many classes

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=metadata_141_11.html
http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=asdoc_127_3.html#189665


Coordinates
a must-know when working with mouse and component coordinates

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000624.html


Data Providers
mainly for drop-down lists

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000499.html


Looping
very useful with arrays

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001831.html


Using Query String Parameters and Flash Vars
for integrating with browsers and ActiveX

http://livedocs.adobe.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001006.html


Loading Style Sheets at Runtime
runtime CSS for Flex

http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=styles_069_26.html


Assorted Free and Pay Flex Components
slightly useful, not a large list

http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=15&loc=en_us


Adobe Labs Flex
talking about upcoming Flex 3

http://labs.adobe.com/technologies/flex/

Flex 2 - Flash for Programmers

Flex 2 Discovered

Wow. Moving from Flash CS2 to CS3 (with ActionScript 3.0), I was surprised and excited. Now after trying Flex 2 for the first time, I'm amazed. Finally it makes sense to develop in Flash. Since I have completely switched to Flex 2 development, I will no longer post about Flash development. If you have Flash questions, I will still answer them to the best of my ability.


Why Flex is Better for Me

• I'm not an animator, I'm a programmer.
• Flex has named "States" while Flash has "frames" and "keyframes" (I know, they can be named).
• I don't consider applications/screens/UI components as MovieClips.

There are lots of other small reasons for me to choose Flex over Flash. The main one is the development environment. Assuming you've shelled out the $ for Flex 2 Builder, you are now working in Eclipse (yes, that's right -- Flash in a real programming IDE). If you haven't spent all that money and simply have a command line compiler, I'm sure you're still using a good programming IDE. This makes a big difference.


How do you get Started?

If you're looking to write a Web 2.0 application, a nice looking desktop application, a rich Internet component, or a fancy UI component, you've started in the right direction. Finding good programming information can be a little harder than usual in the Flash/Flex world.

ActionScript 3.0 and MXML are your languages. MXML compiles down to AS3 but allows Flex Builder to display components in the editor. Mixing both is ok so don't worry too much if you are doing the right thing.

1. Get a copy of Flex 2 Builder. Even the 30 day trial is fully featured. I strongly advise this over the compiler-only free version.
   
2. Read tutorials, get books, read through Adobe's online documentation.
3. Of course, check back here for new information.

Your Project

Write components for anything graphical. Even if you aren't going to re-use this component, having it wrapped up nicely keeps your code away from the main application's code.

Use ASDoc everywhere. If you're a Java fan or have used other document generation products, ASDoc will be familiar. Use it, use it properly, and use it heavily.

Write classes and code correctly. Don't write garbage and follow a common format.

UI components should: be able to re-size/reposition based on the window size, have styles, and use events.

Experienced developers can work with interfacing with web services, class hierarchies, and advanced code while junior developers can easily work with user interfaces, UI backing code, and small components.


Concepts

You are forced into using good practices by not allowing direct database access (both a design decision and a natural limitation I'm sure).

Meta data tags (like annotations in Java) are used to extend certain concepts.

After the function keyword, you may place "get" and "set" keywords to mark this function as a getter or setter. This allows simple get/set methods to act like public properties and reduce documentation. Don't forget not to name your variable the same as the method (it is common to place an underscore at the front of the private variable if it is accessed by get/set methods).

The override keyword (placed before the access type "public" etc.) is used to say "I am overriding a super class method." Meaning if it was spelled incorrectly, the compiler will give an error.

If you are familiar with Java, this will help when trying to learn ActionScript 3.0:

http://flexblog.faratasystems.com/?p=115


Coming up...

I hope to post a lot of helpful links to things that developers want and need when working in Flash. Check back often for new links, tutorials, and reviews to help you get ahead.

Flash for Developers

Are you a software developer new to Flash? I will be writing many mini tutorials which will help you overcome your frustrations and turn you into a Flash coding professional.

Introducing Flash CS3

Just a lead-in about the improvements in Flash CS3 (Flash 9): ActionScript 3.0 is simply amazing compared to the previous versions. It is no longer a headache especially now that the compiler reports errors to you and allows you to click on the line that contains the error. I know this is normal for every other language but ActionScript 2.0 was lacking this crucial feature.

Getting Started

So where does a developer start? First, you will want to check out Adobe's video tutorials located here:

http://www.adobe.com/designcenter/video_workshop/

These tutorials will help you get used to the editor and the development environment. The interface will appear very odd at first but remember this was developed for 2D animation.

I Want to Write Code!

If you have a strong programming background, you want to start writing classes, libraries, and find the ins and outs about the language. This can be a challenge at first.

The easiest way to start is by creating a new "Flash File ActionScript 3.0" with a layer called "actions" (this is a standard and should be the only layer containing ActionScript).

Tip: Double click the layer to rename it

From the Window menu, select Actions (or Press F9 on your keyboard) to bring up the actions tab. By default, this will appear in the middle of the screen. Simply drag and drop the tab down to where you see the Parameters tab.

I added the Align tab to beside the Swatches tab, the Components tab near the Library tab, and the Movie Explorer tab to the bottom-right hand side on it's own. I found these to be of critical importance.

Click on the Actions tab and you will be able to start typing ActionScript 3.0 code. But wait! You don't have any components on the screen. Use the Text Tool (the "T" on the left-hand side) and place a text element on the stage. Type Hello in the text area then click the Properties tab. From the dropdown menu, select "Dynamic Text" instead of "Static Text" and type in "textbox_txt" where you see "" (appending _txt is a standard in the Flash world).

Now you have a text area that can be referenced in ActionScript using the following code:

textbox_txt.text = "Hello World!";

Once you type that on the Actions tab, click on Test Movie from the Control menu.

Tip: Hit Ctrl+Enter to test a movie at any time

You should see "Hello World!" in the text area on screen. Wow!... not that impressive, I know.

In the Future

In the next tutorial, I will discuss creating classes in packages (and how to make them work), Document Classes (main), and some of the features of the language that are really helpful.

Brand New

You got here early! My first blog site is now up and running. I know blogs are supposed to have content... I'm working on that next.

For now, please see Ryan's site for some good Java content:

http://www.ryandelaplante.com/

My focus will be on technical gems and ideas. There will be content on Flash CS3 (ActionScript 3.0) for programmers and open (free) web development resources.