Diagrams, forms and Model Injection
◂ Prev Next ▸
Diagrams
Central to the World Modeler paradigm is the ability to represent models visually in diagrams. This is intended to help various audiences, both technical and less so, be able to quickly understand the logic behind a quantitative model. An example of a model diagram, as rendered in the World Modeler Authoring Tool (in this case, a credit rating model) is shown below.


A basic credit rating model diagram in World Modeler (click to enlarge)

Apart from providing clarity, model diagrams play another key role in the World Modeler platform, namely, that they can be used to lay out web forms. This is an important capability as it allows the model to define not only the quantitative and relational elements, but also how those factors are represented in a user interface. Therefore, presentation-layer software (e.g. a set of web pages) does not need to hard-code the display of World Modeler elements, but can discover this at run-time by querying the UI metadata stored in the model. This eliminates large amounts of software development that must be done to update the affected applications whenever the model changes. A typical form layout, showing the capture of metadata (top), and the display of the form in an RFM application (bottom) are shown below.


Capturing form layout metadata in a World Modeler diagram (top) and the rendered form (bottom)(click to enlarge)

Just as the model elements themselves are managed in a hierarchical structure, Diagrams and the symbols they contain are also fully-fledged members of that structure. Every diagram has a name, just as every other model element, and is the child of a Package. Diagrams do not participate in model calculations, but are accessible using the same techniques as any other model element (see Accessing Model Metadata)

Model Injection
The ability to store user-interface metadata with each model element opens up new possibilities for how model-dependent applications can be architected. Traditionally, when a model is changed or a new model created, the applications that depend on the model are changed by re-coding them. This is because there is no capability for "run-time discovery" of the information the applications need to display user controls for the model elements. As a result, this information is typically hard-coded into each application that interacts with models. Not surprisingly then, even a simple model change can trigger an enormous amount of downstream work.

However, World Modeler provides an architectural solution that virtually eliminates the need for downstream application re-engineering when a model change is made. Rather, it allows applications to "delegate" the responsibility for constructing user-interface controls representing model elements to World Modeler. When an application needs to represent model elements in a user interface panel, it calls a World Modeler service. This service returns the HTML code necessary to display the appropriate controls, labels, etc. associated with each requested model element. Any changes made to the model will be reflected in the HTML returned by World Modeler with no action being required on the application side. We call this technique Model Injection.

Since Model Injection creates user-interface controls at run-time, the UI generated by World Modeler is always in synch with the underlying model. Note that the content returned by Model Injection does not only include the display code itself, but event handlers in Javascript and pre-wired server messaging via AJAX calls that take care of most user interactions with the panel.

Simple Model Injection Example
As a simple example of model injection, we begin with a basically empty HTML page. There is one a <div> element on the page that contains no content, and whose ID is set to "ModelInjectionHere". That is:

An Example of Model Injection

Suppose we wish to fill the empty space in the <div> with a UI panel that is represented by the "Simple Form" diagrams (see right). The panel has three fields, "Name", "Age", and "Address", arranged vertically and labelled wtih field name. To set the content of the <div> to this panel, we add the following javascript to the <head> section of the HTML file:

<script type="text/javascript" src="WMControls.js"></script>

<script type="text/javascript">
  WM.loadPanel(".Simple Form", "ModelInjectionHere");
</script>

The WM.loadPanel javascript function, defined in the file WMControls.js, creates a request that is sent to the Web Services API containing the name of the Diagram that is to be rendered (note that in the example above, the name of the diagram is actually preceded by a "dot" character. The significance of this will be covered in the next topic). In response to the request sent by loadPanel(), the server will return an the string that defines the contents of the diagram, rendered as HTML. The result of this for our example, above, is shown below.

Simple form produced by model injection from the simple model shown above, right

This rendering of the diagram is unformatted and unstyled. Extensive styling (through style sheets) and formatting capabilities (via the model metadata) exist, along with a wide variety of input controls to represent each Attribute in the diagram. In addition, using ModelInjection via loadPanel() automatically wires each of the fields created into World Modeler's execution engine, making updates to the value of one field automatically propagate to all dependenty fields, automatically initializing fields depending on their settings in the model, and much more.

A more thorough discussion of Model Injection will be provided in a later section.

◂ Prev Next ▸