Posted November 16, 2009
The goal of this tutorial is to demonstrate how simple it is to generate Flex applications with M2Flex. The sample application that will be built is a JavaEE application that manage customers and employees. A set of frameworks are implemented in this application such as Cairngorm, BlazeDS, Spring, Hibernate...
This tutorial is split into several parts:
When you want to create an application in M2Flex, you need first to create a project with M2Flex nature using the wizard. The project contains a default transformation workflow: "m2flex.workflow", which you can edit in your workbench for the generation default configuration.
M2Flex projects contain also directories for UML model and UI mock-ups. Export the designed diagrams within MagicDraw UML modeling tool into the "model" directory. The user interfaces are designed and bound to the model using Adobe Flex Builder. These UIs are used to generate the server side implementation and the client communication channel including the data binding (Cairngorm and BlazeDS implementation). M2Flex generates and build then the final flash application.
You can use other Flex editors to create and bind the user interfaces (mxml files) and then add these files to the M2Flex generation project. M2Flex core engine can validate and transform these UIs to generate, on the Adobe Flex SDK, a client based flash application.
In this tutorial we will use MagicDraw UML 16.6 modeling tool to design the business functionalities of the target demo application. We will also use Adobe Flex Builder 3 to design and bind data to the created model. Then, we will generate the demo application source code using M2Flex.
MagicDraw product is bundled with M2Flex and automatically installed by the installation program, including project creation templates, specific wizards and validators.
M2Flex product is based on Eclipse and provides a set of Eclipse plug-ins to generate the application source code. Thus, M2Flex and Adobe Flex Builder can be used in the same workbench to achieve a generation project. By changing the Eclipse perspectives, user can have access to each product features (tools, views and editors). M2Flex generated Web project is configured with Flex project nature. If you are new to Eclipse and want to learn more, please see the Eclipse "Getting Started" resources.
This tutorial is not intended to demonstrate all the M2Flex and Adobe Flex builder full features. However, it showcases off the use of these products and basic configuration used to generate the demo application. More information, tutorials, user guides and trial download of Adobe Flex Builder are available at: http://www.adobe.com/products/flex/.
M2Flex free 30-day trial is available with the installation guide at: http://www.model2code.com.
You will also need to install a database server (among the following list: Oracle 9i or 10g, MSSQL Server 2000 or 2005, PostgreSQL, DB2-UDB or MySQL). In this tutorial, we used PostgreSQL database (http://www.postgresql.org/download/). You will need to create a new database and user before starting this tutorial. You will also need a deployment server; Tomcat server is used in this tutorial (http://tomcat.apache.org/).
We will start with showing you how to set up the generation project. We will provide an overview of M2Flex and Adobe Flex Builder, how they can be used together and then build a demo application to have the Flex client talks to database-back-end application.
We will start with launching M2Flex environment and creating the M2Flex project. The typical sequence is as follows:
Here we are creating a new M2Flex project named "DemoApp" that contains a mockup folder, model folder and a transformation workflow used to generate the application source code.
Let's remind that in Flex 3, you write code in MXML and ActionScript files and compile them into a SWF file, which runs in the Flash player. This SWF is referenced by an HTML file, so that when you load the HTML file, it plays the Flash movie (prompting the user to download Flash 9 if it’s not present). The SWF contained in the web page can interact with the server it was sent from. The server side implementation, the communication channel setup and implementation, the compilation and packaging are done automatically by M2Flex.
For the demo application, we will provide the MXML files that we can find in the resources section, and create the UML model from scratch to generate the projects source code.
Bellow a screen cast demonstrating how to set up the generation project in more details (click on the image to launch the flash screencast)
Now, we will create the UML model that manages the authentication (Login/Logout features) in the demo application.
To get started, follow the instructions bellow:
Bellow a screen cast demonstrating a step-by-step UML model creation, from the MagicDraw project setup to the model export (click on the image to launch the flash screencast)
When you finish the UML model creation, export the designed diagrams to "EMF UML (V2.x) XMI" format using MagicDraw from: "File > Export To" menu. Then, select the model directory created on the previous section to copy the extracted files.
To create the Flex application user interfaces you can use the Adobe Flex Builder product. This Eclipse-based product provides tools and editors to create MXML files with a design view. Switch to the "Flex Development Perspective" to edit MXML and ActionScript files.
To customize the Flex user interfaces, you need to add Flex components and ActionScript that handles the user events. Bellow a sample code from the demo application "Login" user interface.
M2Flex can generate MXML blank files to customize by adding Flex components. These files can be generated as designed in the model's activity diagram. To do so, you need to configure the transformation workflow:
Now, we will generate and execute the demo application from the model that you can find in the resources section, copy and extract this file into M2Flex project "model" folder. Copy and extract also the mockup file in the project "mock-up" folder.
To be sure that the created model is correct, you can validate the model exported from MagicDraw. In the M2Flex perspective, right click the UML exported file on the "model" folder, then select "M2Flex Model Validation". The "Problems" view will display all the validation errors messages and their locations (paths) on the model.
The M2Flex project is now completely configured to generate the application source code. Run the generation process by executing the transformation workflow. To do so, right click the: "m2flex.workflow" and select: "Run as > M2Flex Launch Generation". This will execute the source code generation process. You can follow this process execution on the "console" until the final compilation and packaging of the application. The final result must be displayed in the "console" as: "BUILD SUCCESSFUL". Otherwise, you need to validate the project inputs (model or Flex MXML files).
You can now start the Flex application by deploying the Web project on the server instance, and point your browser to: http://localhost:8080/DemoApp-web/DemoApp.html.
Bellow a screen cast demonstrating the source code generation process and the demo application execution. A quick highlight tour of the generated source code is also shown (click on the image to launch the flash screencast).
|- UML model to be edited with the MagicDraw modeling tool||DemoApp_01.mdzip|
|- UML model exported in EMF UML (v2.x) XM (extract and copy the content on the generation project "model" folder)||DemoApp_01.zip|
|- UI mock-up (MXML files) (extract and copy the content on the generation project "mockup" folder)||DemoApp_Mockup_01.zip|
|- Database initialization data script (insert script)||SqlInsertScript_01.zip|
Now, we will add new functionalities for the demo application. We will create the UML model that manages the customers.
At this point, we create a UML model for the authentication features and we will add the customers' features. We will start by adding the class entities diagram to the existing model, and then create the activities and services to manage customers. Open the created UML model in the MagicDraw UML modeling tool and create the diagrams as follows:
Application services are created in the UML model in the "Services" package and defined as UML interfaces. Each service is annotated with a stereotype to specify its execution. These stereotypes are available from the UML profile: (Create, Update, Delete, CreateAll, UpdateAll, DeleteAll, FindById, FindByProperties, FindAll). To customize the services execution, you can model in an activity process diagram the step-by-step execution workflow. In this diagram, you can add a decision or condition nodes, expansion region to iterate on a list of Business Objects...
In this demo application, we will add advanced services illustrating the process diagram design, hql_operation description and specific Java source code integration:
Bellow is a screen cast demonstrating a step-by-step operation to add the demo application new features (customer management) (click on the image to launch the flash screencast)
To generate and execute the application source code, follow the "Source code generation" section on this tutorial part 1.
|- UML model to be edited with the MagicDraw modeling tool||DemoApp_02.mdzip|
|- UML model exported in EMF UML (v2.x) XM (extract and copy the content on the generation project "model" folder)||DemoApp_02.zip|
|- UI mock-up (MXML files) (extract and copy the content on the generation project "mockup" folder)||DemoApp_Mockup_02.zip|
M2Flex Getting Started Tutorials was posted November 16, 2009.