I have recently started using Enterprise Architect (EA) for creating UML diagrams for Actionscript and Flex projects. This is an outstanding product that is reducing my development time and helping me to create self documenting code following AsDoc formatting rules. If you have never created a UML diagram or used UML software, the concept can seem a little overwhelming but let me assure you, your time spent learning how to do so will be time very well spent.
In it's simplest form UML software allows a person to visually layout and architect a project before ever doing any actual coding. You can create your classes, document the properties and functions you intend to use, organize them and relate them (for either implementing or extending). At this point you are probably wondering why you would want to do that when you could just fire up your IDE of choice and start coding. Before I started using Enterprise Architect I only had one really good reason, it makes you think through the solution and plan before you start coding, so you can attack the project with a well defined plan. Now I have another reason, that I think is just as important as the first, EA can generate all your UML'd classes in either AS2 or AS3 in ASDoc friendly format. All your stub code is generated in seconds, perfectly formatted and compilable. This is an absolutely huge time and effort saver. By using UML you can create a well structured plan for your project and using the code generation in EA allows you to export all that planning effort into perfectly formatted Actionscript. I have created a sample project to demonstrate just how nicely this solution works and hopefully show why you may want to consider this approach for your projects. I will walk you through how to create a simple UML diagram in EA, how to export the diagram into AS3 files, and how to run the AS3 code through ASDoc to create project documentation.
You can download all my source files for this sample here.
Download the trial version of Enterprise Architect. Once you have it installed a few adustments need to be made. First, select the 'Tools/Options' menu and click the 'Source Code Engineering' node, set the 'Default Language for Code Generation' to 'Actionscript'. Click on the 'Actionscript' node and set the 'Default Version' to whichever AS version you are working in. Second, the templates that generate the AS code need some tweaks (just a few minor things that EA appears to have missed). You have two options, import the template updates I created or do it manually. To import my adjustements, download this file, unzip it, in EA, open the 'Tools' menu and select the 'Import Reference Data' item. Browse to the 'actionscript_code_templates.xml' file, select and open it, select the 'Actionscript_Code_Template' and click 'Import'. To do it manualy open the 'Settings' menu and select the 'Code Generation Templates' item and then make these two changes.
%ImportSection%\n %ClassNotes% %ClassDeclaration% %ClassBody%This puts the import statements after the package declaration but before the class declaration in the as files.
%PI=" "%and change it to this
%opStatic == "T" ? "static"%
%if genOptActionscriptVersion=="3.0" and opTag:"namespace"!=""%
%opTag:"namespace"%
%else%
%CONVERT_SCOPE(opScope)%
%endIf%
%PI=" "%This ensures that functions in Interfaces can not be declared Public, Private etc, which will throw a compiler error.
%opStatic == "T" ? "static"%
%if genOptActionscriptVersion=="3.0" and opTag:"namespace"!=""%
%opTag:"namespace"%
%elseIf elemType=="Interface"%
%else%
%CONVERT_SCOPE(opScope)%
%endIf%
Open EA and create a new project. In the project browser you can setup your package structure. For this sample I will keep it really simple and add a few packages 'com.dgrigg.vo', 'com.dgrigg.view'. The next step is creating the diagram. You can drag Class and Interface (to name a few) elements onto the diagram to begin creating your class structure. As you add new elements, you are prompted to enter the class properties. Enter information in the 'Notes' field to explain what the class is for. A few things to note when you are creating elements.
When you are all done your diagram it will look something like this.
In the Project Browser right click on the 'com' folder, or whatever you root package folder is, and select 'Code Engineering/Generate Source Code'. Set the path you want to export to, check the 'Include all Child Packages' options, and click the 'Generate' button. Below is a sample of a generated AS file, straight from EA with no editing.
/////////////////////////////////////////////////////////// // ProductList.as // Macromedia ActionScript Implementation of the Class ProductList // Generated by Enterprise Architect // Created on: 14-Sep-2006 5:08:46 PM // Original author: Derrick Grigg /////////////////////////////////////////////////////////// package com.dgrigg.view { import com.dgrigg.vo.ProductVO; import flash.text.TextField; import mx.controls.DataGrid; import flash.events.Event; import com.dgrigg.vo.ProductVO; import com.dgrigg.view.IView; /** * Displays a DataGrid of products, lets the user select and view a product. * * @see com.dgrigg.vo.ProductVO * @author Derrick Grigg * @version 1.0 * @updated 14-Sep-2006 7:38:22 PM */ public class ProductList implements IView { /** * displays the list of products */ private var products_dg: DataGrid; /** * display the selected product's name */ private var name_txt: TextField; /** * display the selected products' description */ private var description_txt: TextField; /** * display the selected product's sku */ private var sku_txt: TextField; /** * Constructor */ public function ProductList() { } /** * add a product to the displayed product list * * @param product product to add to the product list */ public function addProduct(product:ProductVO): Boolean { return true; } public function getSelectedProduct(): ProductVO { return new ProductVO(); } /** * handle the event that is triggered when a user selected a row in the data grid * * @param event event dispatched from DataGrid */ public function handleSelectedProduct(event:Event): void { } }//end ProductList }
Download and install the ASDoc tool from Adobe. I have created a little bat file I use with ASDoc just to make is easier to recreate the files whenever I need to without having to remember my settings, you can download it here. Run ASDoc to create your files. Click here to see the final ASDocs files.
If you develop Actionscript projects of any size and/or complexity, and you need some documentation done along the way, the steps I have outlined above are any excellent way to quickly generate both the stub code you need to begin your development and some project documentation, which as we all know is a hassle to create but invaluable to have. Enjoy
-------------------------------------------------------------------
拜此文所赐,我也可以舒服的在EA中用UML来设计软件结构(改天和大家分享),进而直接生成代码了,不过,藉于EA的代码编辑器实在过于简单,个人的见议还是代码在FLEX中写,而框架、软件的设计在EA中进行。
Enterprise Architect可以在这里下载到:
http://www.topven.com/bbs/ShowPost.asp?ThreadID=181