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.

  • Toolbar: Toolbar widget with control buttons.

  • 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.

  • 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.

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

Toolbar

Toolbar widget with control buttons.

Use the Items parameter to set the items in the tool bar, one line of text per item. Items can be text lines, comboboxes, checkboxes, hyperlinks and buttons or a mix of them. To insert a separator add a blank line.

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

  • # Disabled: Renders the item as greyed.

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

  • ^ Combobox: Adds a combobox widget to the toolbar.

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

  • + Checkbox ticked: Adds a ticked checkbox and a label to the toolbar.

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

  • @ Icon: Adds an icon toolbutton to the toolbar. The list of available icons can be found in the Shapes tab of the tool box.

MockupUI - Window widget

Example:

@open97
#@arrow_back
@arrow_forward

@zoom28
@zoom27
-Checkbox
+Checkbox
^Combobox
[Button]

&Hyperlink

Group

Grouping frame with a title.

  • Title: Sets the title of the group box.

MockupUI - Window widget

Tab

Stack of tabbed panes.

  • 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.

  • Text: Sets the text and optionally the icon of the button. The syntax for adding an icon and a text is "@icon:Button text". The list of available icons can be found in the Shapes tab of the tool box.

MockupUI - Button widget

Example:

@ok3:Button

Checkbox

Check box with a text label.

  • Label: Sets the label of the checkbox.

  • Checked: Ticks or unticks the checkbox.

MockupUI - Checkbox widget

Radio

Radio button with a text label.

  • Label: Sets the label of the radio button.

  • Checked: Ticks or unticks the radio button.

MockupUI - Radio button widget

Slider

Horizontal slider widget.

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

MockupUI - Slider widget

Label

Static text on single or multiple lines.

  • Text: Sets the label's text.

MockupUI - Label widget

Hyperlink

Hyperlink widget.

  • Text: Sets the text of the hyperlink.

MockupUI - Hyperlink widget

Field

One-line text editor.

  • Text: Sets the text of the text field.

MockupUI - Field widget

Spin box

Spin box widget.

  • Value: Sets the value of the spin box.

MockupUI - Spinbox widget

Combo box

Drop down list.

  • 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.

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

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.

  • @ Icon: Adds an icon and a text. The syntax for adding an icon and a text is "@icon:Text". The list of available icons can be found in the Shapes tab of the tool box.

MockupUI - List widget

Example:

Text
*Selected
#Disabled
-Checkbox
&Hyperlink
^Combobox
[Button]
@smile:Icon

Tool box

Column of collapsible 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.

  • @ Icon: Adds an icon and a text. The syntax for adding an icon and a text is "@icon:Text". The list of available icons can be found in the Shapes tab of the tool box.

MockupUI - Tool box widget

Example:

*Selected tab
 Text item
 #Disabled item
 *Selected item
 &Hyperlink item
 +Checkbox item
 -Checkbox item
Tab
Tab

Text area

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

  • Text: Sets the text of the widget.

MockupUI - Text area widget

Dial

Rounded range control similar to a potentiometer.

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

MockupUI - Dial widget

Progress bar

Horizontal progress bar.

  • 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