User Interface Modeling

On this Page:

This section presents basic information about User Interface Modeling in a modeling tool.

Modifying a table

As the following figure shows, the newly created table has two columns and two rows already added to the table. Each row contains a number of cells equal to the number of columns. 

Structure of newly created table

To modify the contents of the table, you can do the following: 

• Change the titles of the existing columns. 
• Add a new column. 
• Change the order of the columns. 
• Add a new row. 
• Change the order of the rows. 
• Add cell values.

To add a new column to a table 

1. Right-click the table in the Containment tree. From the shortcut menu, select Create  Element > Column. A new column is added to the table.
2. Type the title for the new column. With the new column, a new cell is added to each row of the table.

To change the order of the columns in a table

1. Right-click a column of the table in the Containment tree. From the shortcut menu, select Element Numbering. The Element Numbering dialog opens.
2. In the list on the right side of the dialog, select all columns and click Create. To select all columns, click the first column in the list and then hold down the Shift key when selecting the last one.
   
3. All the columns become numbered.
   
4. Change the order of columns in the table by changing their positions in the list (see the following figure). The Element Numbering feature is to order the selected items.
   • To move a column to the left, select the column and click the Decrease button.
   • To move a column to the right, select the column and click the Increase button.

Moving column "Team" to left

To add a row to a table

1. Right-click the table in the Containment tree. From the shortcut menu, select Create Element > Row. A new row is added to the table.
2. Type the title for the new row.

To change the order of the rows in a table

1. Right-click a row of the table in the Containment tree. From the shortcut menu, select Element Numbering. The Element Numbering dialog opens.
2. In the list on the right side of the dialog, select all rows and click Create.
   • To select all rows, click the first row in the list and then hold down the Shift key when selecting the last one. All the rows become numbered. 
3. Change the order of rows in the table by changing their positions in the list.
   • To move a row up, select the row and click the Decrease button. 
   • To move a row down, select the row and click the Increase button.

To change a cell value

1. Select the cell of the table row in the Containment tree. 
2. Change the cell value in one of the following ways:
   • Press the F2 key. Type a new value. 
   • Click the cell value again and wait while it becomes editable. Type a new value. Press Enter when you are done. 
   • Right-click the cell to open the Specification window of the cell. Type a new value in the cell of the Text property value. 

Modifying a tree

You can add as many nodes and leaves to a tree as you need. You can also change the order of the elements in the tree.

To add a node or a leaf to a tree or to another node

1. Right-click the tree or a node in the Containment tree. From the shortcut menu, select Create Element > Node or Leaf.
2. Type a name for the new node or leaf.

To change the order of the elements in a tree

At a time, you can rearrange the order only of the same parent- node leaves and/or nodes.

1. Right-click a leaf or a node of the tree. From the shortcut menu select ElementNumbering. The Element Numbering dialog opens.
2. In the list on the right side of the dialog, select all leaves and/or nodes, and then click Create.
   • To select all leaves and/or nodes, click the first leaf or node in the list and then hold down the Shift key when selecting the last leaf or node in the list.
3. All the leaves and/or nodes become numbered.
4. Change the order of leaves and/or nodes in the tree by changing their positions in the list appropriately.
   • To move a leaf or a node/leaf up, select the row and click the Decrease button. 
   • To move a leaf or a node/leaf down, select the row and click the Increase button.

Nesting

You can move and arrange User Interface Modeling elements since they nest each other, and create deep structured User Interface models. However, not all elements have the nesting ability: only Container elements can nest other elements. All frames nest in each other. As a result, if you were to move the element with title Frame 1, all other elements would stay in position within this element. 

Example of a deep structure that was created using containers

Reusability

If you have created a complex model and need to use it again, you do not have to create a new one. All you need to do is select the elements, copy them and paste them into the same diagram or in any other diagram. You can also reuse a single element by copying and pasting it or by dragging it from the Browser onto the diagram pane. 

Specifying elements

You can modify UI modeling elements by editing their properties in the following three ways: 

• Via the Specification window. 
• Via the shortcut menu. 
• On a diagram pane.

To edit properties via the Specification window

1. Select an element on the diagram.
2. Right-click on it and select Specification on the shortcut menu.
3. Edit one of the properties to modify the element.

Specification dialog box of the Slider element

The so-called boolean properties that have only two values can also be edited via the shortcut menu. 

To edit properties via the shortcut menu

1. Select an element on the diagram.
2. Right-click it. The shortcut menu will appear and the editable properties will be displayed at the bottom.
3. Select the property you want to change. 

Shortcut menu of the Slider element with boolean properties

For the elements that own a text or a title (such as a button or a frame), it is also possible to edit the appropriate properties straight on a diagram.

To edit the element properties on a diagram

1. Select an element on the diagram.
2. Click the selected element.
3. Type a text on the element (see the following figure).
4. Press ENTER. The text you have typed will appear on the element and in the Text/Title property of the element as well.

Editing title of element

Icon usage

Some elements are capable of owning an icon. User Interface Modeling provides a number of frequently-used icons, such as cut, delete, undo/redo, etc. Of course, it is also possible to use images from your computer as icons.

To add an icon

1. Select an element that can own an icon, such as a button.
2. Right-click the element and select Specification in the shortcut menu. 
3. In the Icon list, select the icon you want to appear on the element.
   • If you want to use an image from your computer as an icon, click custom. 

Using symbol properties

User Interface Modeling also allows you to modify User Interface elements via symbol properties.

To edit an element via symbol properties

1. Select an element on the diagram.
2. Right-click and select Symbol Properties on the shortcut menu.
3. Change one of the properties listed in the table below. For example, if you want to set the same background color to more than one UI modeling element, you can select all these elements in the diagram and then change the required property for all of them in the same way.

The following table lists the supported symbol properties:

User interface prototyping

User Interface Modeling allows you to create browsable reports. You can create a hyperlink from the UI model element to the report. Once a report of these models has been created, click on any element in the report. You will then be directed to the other diagram. When you click OK in the upper left-hand frame you will be directed to the next frame. After clicking OK in that frame, you can get to a couple of frames from which you can step forward and backward as you want, as they are all linked to one another.

Case Studies for User Interface Modeling provides an example of how this feature works and explains how to add hyperlinks and create browsable reports.

Example of User Interface Models and their Workflow

Related References:

• UML diagrams
• Extension diagram

• Why is prototyping so important?
• Working with User Interface Modeling diagrams
• User Interface Modeling
• Case Studies for User Interface Modeling