Designing Form Layouts in UML using SilverModel

In this article, you will learn how to use UML to design form layouts

So why would you want to design a form layout in UML?

  • Saves you a lot of development time
  • The layout can be used with multiple clients. e.g Mobile, Web
  • No need to worry about layout code e.g Html and CSS
  • The layout code is automatically generated for you!
  • The automatically generated code will save you days to weeks of manual development!

What you can capture in a few minutes within UML model, the code generators can then create the code for the forms in seconds.  It could easily take you a day or two to write that code manually. This is a power of UML modeling and code generation, in a nutshell, do in minutes what would take days. The productivity gains are huge!

Also at the same time, the code generators are creating the code for the form to communicate over JSON and REST, updating the database etc. Spend your time on designing what you want the form to capture and have SilverModel do the rest of the work for you.

Capturing the Metadata Form

Firstly let’s look at the model for the form, then we will turn that model into a web form.

As you can see the model defines the attributes for the User form and a parent-child relationship with Task’s

So now let’s look at how we would capture the metadata for the following form design and assign it to the above model.

With this example, we can see there are a number of metadata elements that we would need to capture.

Firstly we need to capture the tabs along the top. Then we need to capture the row and the column that the different fields will appear in. So from this example, we can see that it is possible to capture a complex form layout in UML.

So the metadata that we need to collect to enable form design is as follows

For the “Class” we need

  • Tab Order (string)   e.g. User Details then Task History

and for the “Attributes” we need

  • Tab (string)
  • Row (integer)
  • Column (integer)
  • Visibility (boolean)

Just by capturing this Metadata we can create a complex form layout during code generation. We can use this metadata to produce code for web clients, mobile devices, etc.

Now we have defined what metadata we need to capture, we now need to add these to a code generator.

This is what the metadata looks like when it’s been added to the stereotypes of a code generator.

From this picture, we can see that TabOrder has been added. Also from the properties, we can set the Properties Group it will appear in and the type of data we will need to collect as well as a default value(if required)

Then once the code generator is assigned to a model, the following stereotypes will appear in the properties for an attribute. In this case, the “FirstName” attribute has the following values set.

So we can see the “FirstName” attribute is assigned to the column 1 and row 0. Also the tab name it appears under is set to “User Details” and the attribute is visible.

Other metadata you could collect if requred.

  • Font Size
  • Font
  • Font Style e.g. Bold
  • Colour
  • Data Validation
  • Etc

I have left out the styling metadata out of the sample since that is often set by a layout framework (e.g Bootstrap or Material) and is set globally for an application. Nevertheless, this can be captured if you require it.

Responsive Layout

The code that has been generated is also Responsive, so if you are using a tablet or mobile device the form will change the layout automatically to best suit the device.

Here is an example of the above layout on a mobile phone.

 

Using the form layouts with your Models

The stereotypes for the Form Design Metadata are defined in the “Form Design Metadata” Code Generator in the “Shared” Folder. Just assign this code generator to your models to get started. It is in the Shared Folder since multiple code generators will be able to use this metadata.

To generate a layout for Angular use the “AngularJS4Material” Code Generator. The latest version is available on Github.

I will be updating the mobile generator soon to use this layout metadata as well.

The Todo sample has been updated to use the above code generators and form layouts.

Example showing the “Form Design Metadata” Code Generator assigned to the “Todo” model.

Any questions, please ask in the comments below.