_ css deactivated
_ javascript deactivated

Online Tutorial - M2Flex with CRUD Booster

Design and generate Flex CRUD application 

Posted March 8, 2010

 

I. Overview

The goal of this tutorial is to demonstrate how simple it is to generate Flex CRUD applications with M2Flex and the CRUD Booster plugin. The sample application that will be built is a JavaEE application that manages 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:

  • UML model creation: UML class diagram use with specific stereotypes from the UML profiles in order to specify the business entities.
  • UI generation process: user interfaces design generated for the flash client, with bound data based on the designed entities class diagram.
  • Source code generation and execution: step-by-step process to generate the Flex application source code.
  • Resources: Source and target resources including UML models, generation projects (workspace to be imported in M2Flex).

When you want to create an application in M2Flex, you need first to create a project with M2Flex nature using dedicated wizard. The project contains two transformation workflows:
        "crud.workflow", to generate the mxml files for the Flex user interfaces.
         "m2flex.workflow", to generate the Java EE application source code,

M2Flex projects contain also directories for UML model and UI mock-ups. You have to export the designed diagrams within MagicDraw UML modeling tool into the "model" directory. The generated user interfaces can be customized with Adobe Flex Builder. These UIs are used to generate the server side implementation and the client’s 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.

 

II. Getting started

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 edit the generated mxml files. 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. We will use the "Crud Page wizard" during this tutorial to automatically generate the UML diagrams.

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 for Adobe Flex Builder are available at: http://www.adobe.com/products/flex/.

M2Flex free 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/).

 

III. Generation project set up

We will start with showing you how to get started and set up the generation project. We will provide an overview of M2Flex, and see how to build a demo application and have the Flex client talk to database-back-end application.

We will start with launching M2Flex environment and creating the M2Flex project. The typical sequence is as follows:

1. Launch the M2Flex product from the start menu: "Programs > M2Flex" and select the M2Flex perspective.
2. Create a new M2Flex project with the wizard form: "File > New > M2Flex project".
3. Set the project name: "CrudDemoApp" and then click "Next".
4. Check the "Enabled CRUD generation" option and then click "Next"
5. Select the database server that you already have in your environment, and put your specific information about the database, username and password. Then, click "Next".
6. Configure the Flex SDK and Java SDK paths as installed in your environment. See the Flex Builder and Java installation directories. And then, click "Finish".

A new M2Flex project named "CrudDemoApp" is created and contains a mock-up folder, a model folder and two transformation workflows used to generate the Flex client files and the application source code.

 

IV. UML model creation

Now, we will create the demo application’s UML model that manages customers and employees' missions.

 Figure 1: Target demo application screenshot

 

A. Class diagram creation

The steps to take are the following:

1. Launch the MagicDraw UML modeling tool from the start menu: "Programs > M2Flex > MagicDraw UML"
2. Create a new project using the wizard from: "File > New Project".
3. Choose "Project from Template" and the M2Flex Template. This template will automatically load the M2Flex UML profiles used to annotate the diagrams and UML elements using stereotypes and tagged values. Set the project name: "CRUDDemoApp" and the project location. Then, click "Ok" to create the project.
4. Now, create the project packages and sub packages with the related stereotypes as shown in "Figure 2" bellow.
5. Then, create the application entities and business objects in a class diagram. From this diagram, M2Flex will automatically generate the persistence implementation in the "Entities" project. See the "Figure 3" for the entities and attributes description. The entities will be annotated with "Entity" stereotype and the attributes types with the M2Flex profile data types. The application’s Business Objects (BO) inherit from the class entities, and will define the business view of the persisted entities including operation constraints.

 Figure 2: UML project packages and sub-packages

 

Figure 3: Demo application entities class diagram

 

B. UML model elements’ generation

Use now the M2Flex wizard integrated to MagicDraw to create the application activity diagrams and execution services:
a. Select the wizard: "M2Flex > Wizards > Crud Pages creation Wizard" to create the activity diagrams that will detail the execution of the demo application case study.
b. Select all the application entities and set the target package to "applicationDemo::crud". The "::" (double colon) is used as sub-package separator. Then click "Finish".

Application services are automatically 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...

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.

 

V. Flex UI generation

M2Flex "crud workflow" generates MXML CRUD execution components for the designed entities. These files are generated as designed in the model’s activity diagrams. To do so, you need to simply launch transformation workflow execution:
 

1. Right click the: "crud.workflow" and select: "Run as > M2Flex Launch Generation".
2. Select all the generation cartridges, and then click "Finish".
3. The mock-up folder on the M2Flex project will contain all the generated mxml files.

To customize 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.

 

VI. Source code generation

Now, we will generate and execute the demo application from created model. If you don't follow the step-by-step creation instructions, you can find the UML model in the resources section, copy and paste this file into M2Flex project "model" folder. Copy and paste 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/CrudDemoApp-web/CrudDemoApp.html.

M2Flex product is not limited to creating CRUD application (services). M2Flex provides a set of stereotypes and tagged values to create complex enterprise applications. This UML profile offers many features to design complex business needs, requirements, logics and rules.  You can specify complex services execution by using the activity process diagram. You can also simply create Web Services from the operations created in the UML model by adding related stereotypes. You can also design a workflow service's execution and generate the BPEL and WSDL implementation...

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).

 

VII. Tool tip and quick highlight

  • M2Flex allows you to generate the application source code and final package (ear, war archives).  In order to execute correctly the various automatic tasks, you should disable all Eclipse validators to avoid conflict and errors. On "window > Preferences" view, select the "validation" preferences and set "Suspend all validators".
  • To automatically create the database structure from the UML model, you have to change the "m2flex.workflow" and select on the BSP "com.netfective.bluage.bsp.j2ee.hibernate.spring" the "Property hibernateHbm2DDLAuto". Set the value of this property to "update". By default, this option value is "none".
  • M2Flex generates all the application’s source code from the project’s inputs, including the UML model and mock-up. The mock-up includes only the MXML and related ActionScript. The modelLocator used in the MXML files, VO (Value Object that contains data to display), controllers... are generated by M2Flex. To customize the MXML files you need to generate first these implementation files (for Cairngorm framework), before binding the data and actions from the ModelLocator in the MXML files.
  • Adobe Flex Builder 3 offers many features for creating and customizing MXML files. Open MXML files from the generated Web projects and click on the "Design" view to customize the UIs, you can add components from the existing palette and modify the tags options from the "Flex Properties" view. The generated Web projects are created with "Flex Project Nature". Click the "Source" view and from an MXML tag select "Ctrl+Space" to have access to the Flex tool tips and auto-completion features. These features are also available for the modelLocator and referenced data.
  • To launch the application execution, you can also select the "Flex development" perspective, right click the generated Web project and select "Run As > Flex Application".

 

VIII. Tutorial resources

UML model to be edited with the MagicDraw modeling tool CrudDemoApp_01.mdzip
UML model exported in EMF UML (v2.x) XM (extract and copy the content on the generation project "model" folder) CrudDemoApp_01.zip
UI mock-up (MXML files) (extract and copy the content on the generation project "mockup" folder) CrudDemoApp_Mockup_01.zip



M2Flex CRUD Booster Getting Started Tutorial was posted March 8, 2010.