Monday, September 8, 2008

UML & ActionScript 3.0 Code Generation

’m currently architecting an ActionScript 3.0 Framework that will take advantage of OOP principles & a MVC design pattern.

In an attempt to automate as much of the work as possible, I started looking for tools that could generate AS3.0 code from UML diagrams. I found an excellent blog post by Sean Moore, with a listing of several UML diagramming tools with AS3.0 code generation.

I decided to use StarUML, which was mentioned in one of the comments. To enable AS3.0 code generation in StarUML, you will need to download the AS3.zip file & then copy the contents of the AS3.zip file to this directory location C:\Program Files\StarUML\modules\staruml-generator\templates\.

The template.cot file is a JavaScript file that StarUML uses to generate the AS3.0 code. I noticed that the AS3.0 code being generated did not include the package namespace of the parent class or the implemented interfaces, so I modified the template.cot file so that it generates the import statements of the missing namespaces. My colleague also made some revisions to the template.cot file so that it would not include the access control modifiers for the operations created in the interface AS files.

To install the modified template.cot file you can simply overwrite the C:\Program Files\StarUML\modules\staruml-generator\templates\AS3 folder with the contents of this AS3.zip file.

Here are the steps that you’ll need to follow to generate the AS3.0 code once you have the AS3.zip contents installed.

1. When you start StarUML, it will ask you for the approach you wish to use. Leave it as Default Approach and press OK.

2. Once you have created your UML diagrams and want to generate the AS3.0 code, go to the Tools menu and select “StartUML Generator …”.

3. You will be presented with a dialog asking for the template type that StarUML should use for code generation; check the AS3.0 template and click Next.

4. Select the destination directory that StarUML will place the generated AS3.0 code and then press Next.

5. Press the Generate button to begin the code generation.

6. Presto! Code generation complete. Click on Finish and then go to the destination folder that you specified in Step 4 to view your results.

Here is a sample project that I created that you can use as a starting reference point.



post signature