Generating a web based user interface from a UML model implementing the MVC pattern means mapping the pattern to code which the web browser can interpret.
UML GUI to HTML
To understand the generated HTML code it is essential to know which part of the code resembles which modeled user interface component.
The code in the above screenshot describes the structure and grouping of the HelloWorld UI example application. It is important to know that depending on the layout type that was chosen, the HTML code will differ. The above example uses the flow layout. In case of the usage of the grid layout, the corresponding HTML elements will be nested into table cells.
| Line | UML Model Element | Description |
|---|---|---|
27 |
| The HelloWorldPanel <<Panel>> element is generated to a <form> HTML tag holding all the UI elements within a group (Line 27-43). The form attribute id holds the name which was given to the UML <<Panel>> object within MagicDraw. The form-attribute class holds the name of the CSS class definition which describes the look and feel of the element. Please refer to the UI Widgets chapter for more detailed information. |
28-29 |
| The <<GroupBox>> UML element is generated into a <fieldset> HTML tag. The fieldset attribute name GroupBox1 is a generic name due to the fact that the UML element was not named when modeled. In case of customized scripts needing to access the fieldset using a specific name, the UML element needs to be given a name according to the specifications. The class attribute references the CSS class definitions which define the look and feel of the Group Box. |
31 |
| The Hello World UML <<Label>> is translated into a <span> HTML tag. For the controller JavaScript to be able to access this element and do the text change the <span> tag has an id attribute. |
35 |
| The UML element <<TextField>> is generated as a HTML <input> tag. The attributes name and id have a generically generated name. The default text a text is translated as placeholder attribute. |
39 |
| The UML element <<Button>> is generated to a HTML <button> tag. The id attribute holds the defined name changeTextButton. The <<Button>> property Text holds the Change Text button label. |
44 |
| The <<Frame>> UML container used for the modal dialog is generated to a <form> tag. The behaviour as a modal dialog is steered by the CSS class ui-dialog defined within the <form> tag. The id attribute is given the name specified within the <<Frame>> properties as well as the dialogs title Confirmation. |
46 |
| see description of lines 28-29 |
51-52 |
| see description of line 39 |
Extensibility of CSS and JavaScript
The HTML application file hold all references to libraries, frameworks, configuration and style sheets within the <head> section. Next to the standard libraries which should not be edited, there are files which can be amended to extend functionality and design of the xUML UI application.
Extensibility of the Controller
The <<UI>> controller can be extended with custom JavaScript functions which enable to enrich the functionality xUML UI application. The custom JavaScript functions have full access to <<UI>> controllers context e.g. accessing defined global variables, other JavaScript functions or even accessing an external system using AJAX requests. Due to the fact that xUML UI applications are based on jQuery, all the features of this powerful library can be used.
The JavaScript operation name is defined by assigning the wanted name to a default operation. The normal class operation will be generated as a JavaScript function by assigning the <<UIJavaScript>> stereotype.
The JavaScript code itself can be edited either using the specification dialog of the operation element or by using the JavaScript Editor. The editor is accessed via right-clicking on the operation element and choosing the JavaScript Editor (Shift-Enter). The JavaScript Editor does support syntax highlighting but does not support code completion.
The actual JavaScript is set within the operations Script property field. The JavaScript function name can be changed through editing the Name properties field.
The generated JavaScript function will look like this:
controller.sumJQuery = function() {
alert('The sum is: '+ (parseInt($("#numberOne").val()) +
parseInt($("#numberTwo").val())));
}
Retrieving Data
There are different ways to get data from the user interface or the JavaScript application (Controller) itself.
Using jQuery
This simple snippet will use jQuery to find the element numberOne and retrieve its value. This snippet can be used directly within the <<UIJavaScript>> operation without modelling further elements.
var val = $("#numberOne").val();
jQuery offers a wide range of functions to handle data within E2E UI applications. For a detailed documentation including tutorials and examples on jQuery visit their documentation on http://docs.jquery.com/Main_Page.
Another way of course is to access the values using standard JavaScript functionality to access the DOM structure.
var val = document.getElementsById("numberOne");
or
var val = document.getElementsByName("numberOne");
Using Bound Controller Variables
Custom global variables defined within the <<UI>> controller can of course be bound to user interface elements. The values are automatically available to the global variables as soon as data is written into the text fields. The binding is done between the <<UI>> class and the user interface elements.
To be able to access these global variables the pointer this is used:
var sum = parseInt(this.numberOne)+ parseInt(this.numberTwo);
JavaScript Attribute Types
In this example the JavaScript attributes do not have a specific type defined. In this case, the compiler will choose the type string for them. As a result of this, the variable need to be parsed in JavaScript using parsing functions like parseInt(). If the attributes get a type declared, the parsing via JavaScript is not needed anymore because the compiler will do this automatically according to the binding information, e.g. an attribute x of base type string, holding a numerical value, is bound to a integer based attribute. In this case the parseInt() function will automatically called within the application.
Creating custom JavaScript functions
It is common to create custom utility functions with input parameters for repeated usage. These functions are not available by default in JavaScript e.g. financial calculations. There are two ways of being able to implement these custom functions. Either code them in a custom JavaScript file and then import it into the model or create them within the <<UI>> controller.
Figure: Custom JavaScript Function
The input parameters value1 and value2 do not have any special type definition applied. The parameters are accessed from within the JavaScript code by using the names of the parameters. The generated code can be found in the <controller name>.custom.js file and looks as follows:
controller.multiply = function(value1, value2) {
return value1 * value2;
}
Events
In some cases it is essential to work with events. As xUML UI is using jQuery as its main UI library, the jQuery Event is implemented and can be used. Having event data can be a great help when different events use the same event handler and it needs to be distinguished between e.g. the event type.
The following event parameters are implemented in the xUML UI:
| Property | Description |
|---|---|
target | Element identifier for which the event was triggered for. |
data | The actual value in case any was passed with the event. |
type | The type of event, e.g. click even from a button element. This is more than useful when reusing one event handler for many different events |
timestamp | A timestamp. |
Overview
Content Tools