3.10Use of the CRUD Booster

3.10.1 Requirements

  • To install or update the Magicdraw plugin, including the CRUD generation wizard (same installation as for other wizards)
  • To copy the paramxhtml profile in the “C:\Repositories\bluage\profiles” file
  • To create a new MagicDraw project or use an existing one
  • To check that the paramxhtml profile is imported in the project

MagicDraw is now correctly set up for the new wizard to work.

There are however some more requirements related to the MagicDraw model that we are currently creating or editing.

The following information applies only to the entities we want to crud generate.

The « identifier » stereotype is required for one of the attribute of the entities to be crud generated.

The added MagicDraw profile contains 3 stereotypes:

  • listkey, defines the attribute of an entity displayed in the selects referring to this entity
  • listvalue, defines the attribute of an entity used as identifier in the selects referring to this entity
  • PK_CRUDGEN, applies to the packages containing the services and the activity diagrams created by the crud generation

« listkey » and « listvalue » stereotypes must be applied to the entities to be generated when using a different attribute of the identifier. The identifier is used by default. Therefore, “listvalue” is mostly not used.

3.10.1.1 Running of the MagicDraw Wizard

The first step of a crud generation consists in using a MagicDraw wizard that, for the selected entities, will generate the corresponding crud services (such as create, update, delete, findAll and findByID), as well as the activity diagrams calling these services.

There will all be created in two « PK_CRUDGEN » packaged stereotypes. The first one will be located in the « PK_SERVICE »packaged stereotype and the second one in the « PK_WEB » one.

The « COMPONENT » diagram is also generated, it will allow to insert afterwards a menu on all generated pages, allowing the browsing between the different entities.

output_html_m5c02c1c7.png

The wizard is composed of 3 main parts:

- « Entities »: all entities are displayed in here. It is from here that you select the ones you want to crud generate. Many controls happen here, the entities must be stereotyped as described in the « Requirements ».

If an entity does not qualify but is ticked, the « Next » and « Finish » buttons will be greyed out.

- « Target package »: you indicate here the name of both packages to be « PK_CRUDGEN » stereotyped (they have the same name). If they already exist, the field is autopopulated and unalterable. These packages are potentially in a complex arborescence: for example, if you capture in « Target package » demo::v1::crud, the corresponding package will be created in « PK_SERVICE » and « PK_WEB ».

- « Update mode »: the way the field is updated. There are two options, they will affect the generated activity diagrams.

  • « Form update », it corresponds to an update of the « form », the option is displayed once you access the details of an entity (during a findByID call service)
  • « Table update », it corresponds to an update of an « editable table », the data displayed in the table can be directlyupdated

Once the execution of the wizard is over, the generated model has to be exported to a Bluage project.

3.10.1.2 Generation of the setup mockup

Once the crud model generated with the MagicDraw wizard and exported in a Bluage project, the next step consists in generating a xhtml mockup directly set up from the recovered data of the model.

We use a specific workflow named « crud.workflow » that calls to 3 BSP.

  • com.netfective.bluage.bsp.xhtml
  • com.netfective.bluage.bsp.xhtml2xml
  • com.netfective.bluage.bsp.XMLExtractor

output_html_m74e07c99.png

This workflow is added to the Bluage project if the user ticks the corresponding box in the wizard of a Bluage project creation.

Once the generation is over, the xhtml mockup is created and located in the “mockup” file by default or in the output folder set up in the crud workflow.

output_html_6151ce8e.png

Please note that the generated pages are located in sub-packages corresponding to the type of the page (« add » to add an element, « list » to list all elements, etc.)

At this level of the crud generation, two things have happened. First, the initial model has been improved with the generation of the services and the activity diagrams by the MagicDraw wizard. Secondly, the generation workflow of set up mockups has created the set up xhtml pages with the Bluage tags.

The only thing left to be done is to launch the normal Bluage generation in order to deploy afterwards the generated application.

3.10.2 Advanced functions

3.10.2.1 Use of the validators

In order to manage the keyed and displayed data at best in the generated pages, the following validators are integrated:

  • RequiredFieldValidator
  • RegularExpressionValidator
  • FormatValidator
  • LengthValidator

Their integration in the XHTML mockup depends entirely on the data of the model.

RequiredFieldValidator :

This validator is generated when an attribute of an entity is « identifier » or « required » stereotyped.

RegularExpressionValidator :

This validator is generated when an attribute of an entity has a numeric type.

FormatValidator :

This validator is generated when an attribute of an entity is a « date », « time », or « datetime » type. It is generated in both capture and display forms.

LengthValidator :

This validator is generated when an attribute of an entity is « @column.length » stereotyped and the corresponding tagged value is filled in.

In order to integrate at best these validators, 3 values have been added in the « crud.workflow » at the level of the BSP com.netfective.bluage.bsp.xhtml:

  • « date_pattern » corresponds to the format of the date. If this property is not filled in, the default one will be applied.
  • « time_pattern » corresponds to the format of the time. If this property is not filled in, the default one will be applied.
  • « timezone » corresponds to the time zone. If this property is not filled in, the default one will be applied.

3.10.2.2 Browsing

In order to browse between the generated crud pages, a stereotyped « COMPONENT_VIEW » diagram is generated according to the entities selected in the MagicDraw wizard.

This diagram allows then the transformation BSP to generate a page that will be used for all other pages like a menu.

Please note that for the time being, this diagram is always generated when executing the MagicDraw wizard, however if the user deletes it, there will be no impact on the generation of the HTML afterwards; i.e. during the generation of the pages, we will not try to integrate a component that does not exist.

An important thing to know is that the generated component is directly included in the main form, this is why it will be inserted at the same place in the generated pages.

3.10.2.3 Design by default and project integration

The generated XHTML mockup includes an established design by default that integrates the CSS style, the images and the Javascript.

It is however possible to integrate in the mockup the project style guide. We use an ANT task that copies and pastes the form of the generated page in the position specified in the target template.

We use an ANT plugin: xmltask.

In the « crud.workflow » workflow, at the level of the com.netfective.bluage.bsp.XMLExtractor BSP, it is possible to set up the following property:

  • « projectIntegration » : it defines the integration of the customized style guide. The « true » value launches the application of the style defined in the template as well as the refining of the html pages.

Refining of the generated pages.

It is possible to set up the workflow in the com.netfective.bluage.bsp.XMLExtractor BSP to refine the rendering of the pages. The steps of the setup are as follows:

output_html_m56d269ee.png

Creation of a group of the same name as the generated screen.

output_html_1615236f.png

Adding of a property named « removeProperties » including the attributes of the entity to be deleted in the generated mockup.

output_html_m52ba6112.png

Adding of a property named « renameProperties » including the attributes of the entity to be named in the generated mockup.

Notes:

The refining of the pages only works if the « projectIntegration » property is « true ».

The « removeProperties » property contains the enumeration of the entity’s attributes to delete in the rendering, separated by a comma (,).

The « renameProperties » property contains the enumeration of the entity’s attributes to modify in the rendering, separated by a comma (,), each attribute is associated to a new name that will be applied to it. The couple is presented as follows : <NOM_PROPRIETE>:<NOUVEAU_NOM_PROPRIETE>

Implementation of a customized guide thanks to a template:

In the com.netfective.bluage.bsp.XMLExtractor BSP, 

  • « CSS_FOLDER »: it defines the name of the customized style folder that is present in the « specific » folder. This folder is used as the source to copy the style information (CSS, Javascript, images) in the corresponding mockup.
    • Example of a setup:

output_html_f46e081.png

Setup of the « CSS_FOLDER » property

output_html_m7e36262e.png

Automatic copy of the style information in the « mockup » folder of the BluAge project.

  • « mockup_template_file »: it defines the path of the template folder.
    • Example :

output_html_93f760b.png

Setup of the « mockup_template_file »property.

output_html_5b78b807.png

The template folder.

  • « insertionTag » : it defines the tag in which the generated XHTML code will be copied.
    • Example :

output_html_m17817389.png

Setup of the « insertionTag » property.

Note:

The HTML template must follow a specific structure in order to integrate the

pages.

output_html_mc57bcef.png

Example of template

The template is a HTML page including a « div » tag with an « id » corresponding to the « insertionTag » defined in the workflow. The insertion is done inside the tagged div.

Formatting of the generated templates:

The design of the HTML pages is always generated the same way. The arborescence of the tags is always the same one.

The different tags contain « id » or « class » attributes defined in a recurrent way. The user can change the attributes of the tag.

In the com.netfective.bluage.bsp.xhtml BPS, add the properties whose name is the « class » or « id » name to be changed, suffixed by « _class ».

output_html_m240e133b.png

Example of different possible setups.

output_html_190f89be.png

Example of setup allowing defining the « rd_band_01_l1 » CSS style into « rd_kb ».

output_html_m4c908d1e.png

Example of set allowing defining the logo of the generated application.

Navigation

Reference Guide

User Guide

Search

 
BLU AGE is a registered trademark of NETFECTIVE TECHNOLOGY S.A. - Trademarks are property of their respective owners
Do not copy or divulge without written permission