MagicDraw offers a selection of basic and also complex widgets and user interface objects which cover most of any screen design needs. As a matter of fact, not all MagicDraw UI elements can be used for designing screens that work with xUML service UIs.

As a reference the following catalog will describe and at the same time indicate that they can be used.

Supported UI Elements

Oops, it seems that you need to place a table or a macro generating a table within the Table Filter macro.

The table is being loaded. Please wait for a bit ...

TypeNameElementDescription
Container


Panel

The Panel container () is the most basic container and is the base for any screen modeling.

Frame

The Frame container () is used for modal dialogs and screens that open within the same browser window (e.g. detail view or table records). A Frame has by default a close button in the window title bar. It is important to know, that despite of the creating a web application, the Frame container does not represent the HTML frames.

Tabbed Pane

The Tabbed Pane container () is an ideal way to consolidate multiple screens on little space.
Refer to Tabs for more information.

Group Box

The Group Box container () is ideal for grouping UI elements into different groups belonging together.

UI Element










Label
The Label element () is for placing static text on a Panel container.
Text Field

The Text Field element () is used to give the user the possibility to input text to the application.

  • If a text field is bound to a data attribute having a UI Date type, it a Date Chooser is available automatically.
  • A text field can be extended by an autocompletion widget as described on Autocomplete.
  • A text field can be made required by setting the multiplicity:
    • required: multiplicity undefined or 1
    • not required: multiplicity 0..1
Password Field
The Password Field element () is a Text Field with the difference, that the input is not shown in plain text but each character is replaced and hidden with the * symbol.
Checkbox

The Checkbox element () is used to indicate a on or off state.
Refer to Checkbox for more information.

Radio Button

The Radio Button element () is used in a similar way as the Check Box element but with the difference, that only one option within a group of options can be selected.

Refer to Radio Button Group for more information.

Combo Box

The Combo Box element () allows to select one option of a list that opens up when clicking with the cursor onto the element.
Refer to Combo Box for more information.

With some additional changes to the tagged values the Combo Box element can change to a Multiselect List. How to implement this is described in the following chapters.
Refer to Multi-select Lists for more information.

Table
The Table element () is used to render data within a table grid.
Tree
The Tree element () can be used to display hierarchical trees like folder structures or catalog indices.
List
The List element () enables to select one or more options from a list.
Separator
The Separator element () can be used to visually separate one area of a screen with another one.
Button
The Button element () is used to submit an action by the application user e.g. send a form or open a dialog window.
File Selector

The File Selector, used for selecting files to bind them to an file upload form consists of a normal button element () element with the open icon applied to it. The open icon is specified in the buttons specifications. The file selector will be displayed as follows:

Unsupported UI Elements

NameElementRemark
Slider  ()

Progress Bar ()

Menu Bar ()


Scroll Bar ()


Scrollbars are added automatically to the container elements if necessary.
Spinner ()

Toolbar ()

Close Toolbar button ()

On this Page:
Related Pages:

Usage of the UI Widgets:

  • No labels