You have successfully installed UML4AS - UML for ActionScript and Flex, and you are using it for the first time. You are in the right place.

1. Creating a New UML4AS Model File

For this tutorial, please create (or open an existing) ActionScript/Flex project. For example, MyFirstUML4ASProject that already has a source directory (src) and a MXML file (MyFirstUML4ASProject.mxml).

Create a new folder (right click on the project, New/Folder) and name it model. Create a new model file inside:

• right click on the model folder, New/Other/Flower Modeling Platform/UML4AS File;
• first step of the wizard: select the file name (i.e. model);
• 2nd step: select an already existent directory that holds AS source files. E.g. select src from the current project. You can select directories from other projects as well, and you can also add them after the file is created (by right clicking on the Root entry of your file, Create ActionScript Element/SrcDirPackage).

   

  

2. Project Explorer, Automatic Synchronization

The contents of an UML4AS model file can be viewed in the Project Explorer view. If this view is not already available on your system, enable it from Window/Show View/Other/General/Project Explorer. Once enabled, drag it over the existing Navigator view.

The Project Explorer view displays the content of the workspace just like the Navigator view. However please notice that  the model.uml4as file has a + sign next to it in the Project Explorer view (that was not in the Navigator). Clicking on it, opens the file and displays its contents. But before doing that, adjust some global settings (from Window/Preferences/Flower Modeling Platform):

• Enable automatic synchronization -> true. With this setting on, the model/code synchronization is performed automatically when a resource is saved in the workspace (source file and/or model file); otherwise it should be invoked manually, by right clicking on the SrcDir and selecting Synchronize.
• Flat package presentation -> true. With this setting on, the packages will be shown in a flat way (like in java) rather than a tree style presentation. (Note: as of UML4AS 1.0.0.M0, this setting is by default true).

When you open the model file, the synchronization is performed and you can see the model contents:

The root entry contains the following elements:

• The src SrcDir (or longer, Source Directory Package). This is a special package that maps to a source directory on the file system. The path is relative to the current project. You can have several SrcDirs in a model file, and they can belong to other projects in the workspace as well (e.g. ../otherProject/src).
• ActionScriptUnknownTypes is another special package. UML4AS - UML for ActionScript and Flex puts here any type references that it finds during synchronization but cannot be resolved to a known implementation (e.g. primitive types, classes from the Flex framework or from swc libraries).

3. Adding and Modifying Source Files

Add some source files in the project. For example:

• com.uml4as.example.MyInterface with some methods
• com.uml4as.example.MyClass with some attributes and methods

Please notice that when adding elements (packages, files) or saving files, the model structure is updated (because you turned on the automatic synchronization).

4. Working with Diagrams

The model can be modified in two ways: from the model tree (by right clicking) or from diagrams. Of course, the main idea behind UML4AS - UML for ActionScript and Flex is to use diagrams. Right click on the Root package, Create Element/Package. Right click on it/Rename (or press F2) to change the name (e.g. Diagams). Right click on it, Create Diagram/Class Diagram. Double click and it opens.

Select some classes/interfaces from the model tree and drag them on the diagram (e.g. MyClass, MyInterface, MyFirstUML4ASProject).

Now you can play with the diagram. For example,

• add a Realization between MyClass and MyInterface (using the Interface Realization tool from the toolbar),
• add an Unidirectional Association between MyFirstUML4ASProject MXML class and MyClass class
• hide uninteresting labels from the association (use CTRL + click for multiple selection)
• rename the association attribute (by selecting + click or pressing F2) from attribute1 to myClass

5. ActionScript and Analysis Elements, SrcDirs

There are 2 types of model elements:

• analysis elements (e.g. packages, classes, operations, etc.). They cannot be synchronized with code; they are generic elements, meant to be used while doing a high level analysis of the system, when discussing general principles, etc. They can be created from the "Create Element" context menu, or from the diagram
• language specific elements (in our case, ActionScript). They can be created from the tree (using the "Create ActionScript Element" context menu) or from the diagram as well. These elements map to ActionScript constructs.
  • they have a slightly different icon with an "A" letter in the upper/right corner of the element icon,
  • they can be synchronized with the code IF they are contained in a SrcDir (directly or indirectly). In this case they have synchronization markers (upper left corner of the element icon),
  • if they are not contained in a SrcDir, they cannot be synchronized. Synchronizable AS Elements shouldn't be mixed with non-synchronizable ones

6. Adding New Types on the Diagram

There are 2 ways of doing this. The first one is by adding the element from the model tree and dragging it on the diagram. For example, add a MyClass1 class (by right clicking on the com.uml4as.example ActionScript package) and drag it on the diagram.

The other way of achieving this is to create the class from the diagram and move it (in the model tree) inside an ActionScript package. For example create the MyClass2 on the diagram. You will notice that it has been created in the same package as the diagram. As you want it to be synchronized with the code, you need to move it inside an ActionScript package, e.g. com.uml4as.example.

Save the model file and observe the changes on the file system.

7. Model Properties View, Documentation View

The Model Properties view displays available properties for the selected model element (in diagram or model tree). To enable this view, go to Window/Show View/Flower Modeling Platform/Model Properties.

The Documentation view displays the documentation for the selected model element. To enable it, go to Window/Show View/Flower Modeling Platform/Documentation.

As of UML4AS 1.0.0.M0, the Flower Modeling Perspective already contains the above views.

8. Next Steps

This tutorial has shown some basic usage principles. The next article in this Alpha documentation series will explain some other features more in detail.

Meanwhile please explore the UML4AS - UML for ActionScript and Flex product. If you find problems or if you would like a particular feature or if you just want to talk about it, we would be glad to discuss on the forum.

Thank you for reading and using UML4AS - UML for ActionScript and Flex.