- Home » Tutorials » CRUD Booster »
Online Tutorial - CRUD Booster
Design and generate Spring applications using Crud Booster
Posted November 16, 2009
I. Overview
The goal of this tutorial is to demonstrate the ease of generating a CRUD application (create/read/update/delete) using the CRUD Booster. The demo application that we will build is a JavaEE application that manages customers, missions and temps. The final application implements Spring, Struts and Hibernate frameworks.
This tutorial is split into several parts:
- UML model initial setup: UML notations specifically used for the CRUD Booster.
- UML model generation: UML diagrams for CRUD operations will be automatically generated by the CRUD Booster.
- HTML mockup generation: Process of generating the application’s HTML pages.
- Application generation and execution: Using M2Spring, the final J2EE application is generated and ready to deploy.
- Resources: Source and target resources including UML models, generation projects (workspace to import in M2Spring).
When you want to create a CRUD application in M2Spring using CRUD Booster, you need first to create an M2Spring project using the appropriate wizard, where you can check an option to enable automatic CRUD generation. The project will contain, as usual, the default transformation workflow: "m2spring.workflow", used to generate the final application, and it will also contain another workflow, named "crud.workflow", which will enable you to generate your mockup.
You will be able to generate a mockup, in the "mockup" directory, using your model, which is as usual in the "model" directory. The model itself can also be generated: with only the usual M2Spring classes diagram (entity diagram and business object diagram), you will be able to generate all the CRUD services and activity diagrams using a simple wizard included in your M2Spring Magic Draw.
You can also customize your final application in many ways, using various workflow options, your own set of CSS tags, or even your own project templates for HTML pages.
II. Getting started
In this tutorial we will use MagicDraw UML 16.5 modeling tool to design the business entities of the target demo application. We will then use M2Spring to automatically generate the HTML mockup, and then generate the demo application’s source code.
MagicDraw product is bundled with M2Spring and automatically installed by the installation program, including project creation templates, specific wizards and validators.
M2Spring product is based on Eclipse and provides a set of Eclipse plug-ins to generate the application’s source code. This tutorial is not intended to demonstrate all the M2Spring full features, but the use of the CRUD Booster tool inside Magic Draw and M2Spring. It showcases the use of the specific CRUD Booster features and the basic configuration used to generate the demo application.
M2Spring free trial is available with the installation guide here.
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: in this tutorial we used Tomcat server (http://tomcat.apache.org/)
III. Tutorial part1: Create and generate a demo application using CRUD Booster
A. UML model initial setup
Now, we will create a UML model to manage clients, missions and temps, using a simple entity diagram. To get started, follow the instructions below:
1. Launch the MagicDraw UML modeling tool from the start menu.
2. Open the source UML diagram included in this tutorial, by using the "Open project" menu. For now, in this project, there is no service or activity,
only a root package in each part, named applicationdemo.
3. Verify that you have all the necessary profiles. The CrudBooster uses a new profile, named paramxhtml. If it is not present, add it from the
menu File > Use Module, and check the profile.
4. Now that the profile is added, you can use it. This profile contains a useful stereotype named <<listkey>>. When there is a link between two
entities, it allows to define which column of the linked entity will be the key. Use it to annotate the model, double-clicking on the desired column,
entering in "Applied stereotype", opening the list of stereotypes and choosing <<listkey>>:
- For the MissionState entity, you can naturally choose the column "name".
- For the Mission entity, choose the column "label".
- For the Customer entity, choose the column "name".
- For the Temp entity, choose the "last name", even if it may not be the best choice.
- For the Address entity, there is no good choice. Thus, do not set anything. If the <<listkey>> is not set, the entity identifier will be used.
The result should be as displayed below:
Figure 1: UML annotated entities
B. UML model generation
Now that you have successfully improved the model, you can use the CrudBooster itself. Enter the Bluage menu, and choose "Crud pages creation wizard".
In the new displayed window, there is the entity list. You can choose to use the CrudBooster for all the entities, or a sublist. You may check or uncheck one at a time, or press "Select/Unselect all".
Then choose the destination package. What is typed here will be used as a subpackage of the <<PK_SERVICES>> and the <<PK_WEB>> packages. There already is a package named applicationdemo in each, so you can use a specific subpackage of this package for the Crud pages. As hinted in the window, the subpackages separator is :: thus type applicationdemo::crud. The services will be created in a subpackage applicationdemo::crud in <<PK_SERVICE>>, the activities in a subpackage applicationdemo::crud in <<PK_WEB>>.
"Form update" is used to have pages that will update data as a form, "Table update" allows to modify the data inline in an editable table. For now, leave "Form update".
Clicking "Next" shows the summary of what will be done, then click "Finish".
Figure 2: Magic Draw CrudBooster wizard
You can now notice that numerous activity diagrams were created. In the packages structure, the "crud" subpackage was created for both services and activities. All the necessary services were created, and all the activity diagrams corresponding to the pages you want:
- Update diagrams
- List diagrams
- Details diagram
- Add (create) diagrams
- A menu diagram, that will be used to have a menu in each page, linking to all the list pages.
- A simple home diagram, as an entry point.
C. HTML mockup generation
The next step is in M2Spring. First, launch M2Spring and specify a workspace. Create a new M2Spring project using the wizard form: "File > New > M2Spring project". After having entered the project name and clicked next, you have a screen with a single checkbox named "Enabled Crud Screen generation". Check it. Then resume your project creation.
Figure 3: M2Spring project creation Wizard: CrudBooster
By checking this checkbox, you ask the wizard to create a further workflow named "crud.workflow", in addition to the usual "m2spring.workflow" one.
Once the project is created, you must, as usual, fill the "model" folder by exporting your Magic Draw project in "EMF UML (V2.x) XMI", but you need not fill the "mockup" folder. Instead, simply run the crud.workflow as an M2Spring application. The mockup folder will be automatically filled with pages corresponding to the activity diagrams in your model, with a default style.
D. Application generation and execution
You can now generate your M2Spring application as usual, and enjoy!
Bellow a screen cast demonstrating how to create and generate the demo application in more details (click on the image to launch the flash screencast)
E. Tool tip and quick highlight
When you generate the diagrams in Magic Draw, you can choose one or several entities. The generation packages will be automatically annotated with the stereotype <<CRUD>>. If you use again the wizard, for example to generate new entities, the annotated package will be automatically set as the destination package and not updatable.
--------------------------------------------------------------------------------
If you first check an entity, run the wizard, and then come back to check another one, the previously created objects for the first entity will be kept. If you check again the same entity, the previous work will be overwritten. The wizard does no delete previous work, but can overwrite it if asked.
--------------------------------------------------------------------------------
You can have at the same time diagrams generated thanks to the wizard, and other diagrams, provided they are in different packages. When generating the HTML pages in M2Spring, only the diagrams in the <<CRUD>> annotated package will be processed.
F. Tutorial part 1 resources
| - UML model to be edited with the MagicDraw modeling tool (class diagram) | ApplicationDemo-source.mdzip |
| - UML model to be edited with the MagicDraw modeling tool (generated model) | ApplicationDemo-target.mdzip |
IV. Tutorial part 2: Customize the generated application
A. Customize the workflow
The application generated with CrudBooster may be customized in many ways. Many properties may be added to the com.netfective.bluage.bsp.xhtml BSP in order to do so. For example, let's say you want to customize the application title, subtitle, and copyright information. Follow the instructions:
1. Open the crud.workflow, and reach the "com.netfective.bluage.bsp.xhtml" BSP.
2. Right-click the BSP, and select New Child > Property
3. In the properties tab, type "title" as the property name, and your custom title as the value.
4. Repeat the operation for properties names "subtitle" and "copyright"
5. Generate the mockup, then generate the application and run it.
6. At runtime you can see the difference.
B. CSS customization
The same way, you can also customize the appearance (CSS). For example, if you have custom CSS classes you want to use in the application, you can add them in the default CSS (or even replace the file). The HTML code must be generated accordingly, and it can be achieved by setting new options in the BSP. As a simple example, let's say we have a CSS class that decorates the labels with underline and overline.
Figure 4: Example of custom CSS
The default CSS class used for labels is rd_wlab.
Open again the crud.workflow and the com.netfective.bluage.bsp.xhtml BSP. Add a property named rd_wlab_class and set it to your new class. After mockup generation, you see that the new class has been used in the HTML pages. You must now add the class to the CSS file, generate the application, and you will see the new style applied at runtime. This way you can even customize all the classes used and use a completely custom CSS document.
C. Mockup template file
A further means to customize the generated application is to provide a HTML template. To use this template, you must edit the com.netfective.bluage.bsp.XMLExtractor.
- projectIntegration must be set to true.
- mockup_template_file must contain the path to your template
- You can enter relative path by using the variable MODEL_PATH which represents the "model" folder.
- It is recommended to put the file in the "specific" folder, or a subfolder. In this case the property will start by MODEL_PATH/../specific
- insertionTag must contain a special id that will be used to annotate a div in the template.
Let's assume you use an insertionTag named "insert_here". In that case, you must put in your template a line like this :
<div id="insert_here"/>
This way, the generated pages won't be created with the default layout, but instead will be merged in the template, with all the body content inserted inside the special div tag. Thus, you can have your own file header, your own scripts, possible use of several CSS documents, and so on...
By combining the use of a mockup template file and the customizations of the com.netfective.bluage.bsp.xhtml BSP, you can get an application with a completely custom appearance.
D. Tool tip and quick highlight
The main properties that can be set are title, subtitle, copyright, as well as logo and alt_logo (the alt text of the logo).
--------------------------------------------------------------------------------
You can also customize the pictos used for the buttons in the lists with the properties: btn_delete, btn_details, btn_edit, btn_update, btn_cancel. The images used for not updatable checkboxes can be customized with properties img_true and img_false
--------------------------------------------------------------------------------
CSS Classes may be added to customize the different kinds of input fields: textfield_class for text fields, date_textfield_class for date fields, checkbox_class for checkboxes, and select_class for combo boxes.
rd_tableform_class may be used to customize the tables used for alignment in the form pages (update, create and details), and rd_tabledata_class may be set for the tables used in the list pages.
Many other CSS classes may be customized, to manage the various divs. The property names are the default class name followed by "_class". For example, to change the class used for the main content div, which is by default "rd_content", use a property "rd_content_class".
--------------------------------------------------------------------------------
The <Bluage:Table> specific tags may also be customized, using properties like: table_showpagination, table_rowsdisplayed, or CSS options such as table_headerstyleclass or table_selectedrowstyleclass. You can see the different <Bluage:Table> options in your documentation. The related Crud Booster properties are the same name, previewed by "table_".
--------------------------------------------------------------------------------
Pay attention to the properties you create in the BSP: a created property with no value is considered as a property with an empty string. That's why these properties are not created by default. Only create the properties you need.
M2Spring Getting Started Tutorials was posted November 16, 2009.