MockupUI Reference Manual

Common UI widgets

  • Window: Window widget with control buttons and a menu bar.

  • Menu : Menu widget to use with menu bars or as pop-ups.

  • Group : Grouping frame with a title.

  • Tab: Stack of tabbed panes.

  • Button: Standard command button.

  • Checkbox: Check box with a text label.

  • Radio: Radio button with a text label.

  • Slider: Horizontal slider.

  • Label: Static text on single or multiple lines.

  • Hyperlink: Hyperlink widget.

  • Field: One-line text editor.

  • Spinbox: Spin box widget.

  • Combobox: Drop down list.

  • List: List of selectable items.

  • Tool box: Column of collapsible items.

  • Text area: Rich text editor with custom font, size, color and alignment.

  • Dial: Rounded range control similar to a potentiometer.

  • Progress bar: Horizontal progress bar.

  • Calendar: Calendar widget.

Window

Window widget with control buttons and a menu bar.

Properties:
  • Title: Sets the title of the window.

  • Background color: Selects the background color of the window.

  • Menu bar: Sets the menu items of the window's menu bar, one menu item per line of text.

MockupUI - Window widget

Menu

Menu widget to use with menu bars or as pop-ups.

Properties:
  • Items: Sets the items of the menu, one item per line. You can use one of the following prefixes to customize menu items:

* Highlights the item

+ Adds a check box to the menu item

MockupUI - Window widget

Example:

Menu Item 1
*Menu Item 2
+Menu Item 3
Menu Item 4

Group

Grouping frame with a title.

Properties:
  • Title: Sets the title of the group box.

MockupUI - Window widget

Tab

Stack of tabbed panes.

Properties:
  • Tabs: Sets the list of tabs, one tab per line. Accepted prefixes:

* Selects the current tab.

MockupUI - Tab widget

Example:

Tab 1
Tab 2
*Tab 3
Tab 4

Button

Standard command button.

Properties:
  • Text: Sets the text of the button.

MockupUI - Button widget

Checkbox

Check box with a text label.

Properties:
  • Label: Sets the label of the checkbox.

  • Checked: Ticks or unticks the checkbox.

MockupUI - Checkbox widget

Radio

Radio button with a text label.

Properties:
  • Label: Sets the label of the radio button.

  • Checked: Ticks or unticks the radio button.

MockupUI - Radio button widget

Slider

Horizontal slider widget.

Properties:
  • Value: Sets the position of the slider as a percent (0-100%).

MockupUI - Slider widget

Label

Static text on single or multiple lines.

Properties:
  • Text: Sets the label's text.

MockupUI - Label widget

Hyperlink

Hyperlink widget.

Properties:
  • Text: Sets the text of the hyperlink.

MockupUI - Hyperlink widget

Field

One-line text editor.

Properties:
  • Text: Sets the text of the text field.

MockupUI - Field widget

Spin box

Spin box widget.

Properties:
  • Value: Sets the value of the spin box.

MockupUI - Spinbox widget

Combo box

Drop down list.

Properties:
  • Values: Sets the items of the combobox, one value per line. Accepted prefixes:

* Selects the item

MockupUI - Combo box widget

List

List of selectable items.

Items

Items can be text lines, comboboxes, checkboxes, hyperlinks and buttons or a mix of them. Use the Items parameter to set the items in the list, one line of text per item.

The items can be customized individually by prefixing lines with one of the following characters:

  • * Selected: Highlights the item by adding a different color background.

  • # Disabled: Renders the item or column as greyed.

  • & Hyperlink: Renders the item or the column as an underlined hyperlink.

  • ^ Combobox: Adds a combobox widget to the cell or column.

  • - Checkbox unticked: Adds an unticked checkbox and a label.

  • + Checkbox ticked: Adds a ticked checkbox and a label.

  • [text] Button: Adds a button with a text caption.

MockupUI - List widget

Example:

*Selected item
^Combobox item
+checkbox item
#&Disabled hyperlink item
[Button item]

Tool box

Column of collapsible items.

Items

Use the Items parameter to set the tabs and tool items in the tool box, one line of text per item. To expand a tab add a * character to the begining of the text. Insert a space character at the beginning of the line to create a tool item.

Tool items can be customized individually by using the following prefixes:

  • * Selected: Highlights the item by adding a different color background.

  • # Disabled: Renders the item or column as greyed.

  • & Hyperlink: Renders the item or the column as an underlined hyperlink.

  • ^ Combobox: Adds a combobox widget to the cell or column.

  • - Checkbox unticked: Adds an unticked checkbox and a label.

  • + Checkbox ticked: Adds a ticked checkbox and a label.

  • [text] Button: Adds a button with a text caption.

MockupUI - Tool box widget

Example:

Tab 1
*Tab 2
 Text item
 #Disabled item
 *Selected item
 &Hyperlink item
 +Checkbox item
 -Checkbox item
Tab 3

Text area

Rich text editor with custom font, size, color and alignment.

Properties:
  • Text: Sets the text of the widget.

MockupUI - Text area widget

Dial

Rounded range control similar to a potentiometer.

Properties:
  • Value: Sets the position of the dial as a percent (0-100%).

MockupUI - Dial widget

Progress bar

Horizontal progress bar.

Properties:
  • Value: Sets the completed position of the progress bar as a percent (0-100%).

MockupUI - Progress bar widget

Calendar

Calendar widget. You can select the day in the calendar in the Widget properties panel.

MockupUI - Calendar widget