MockupUI Reference Manual

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.

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

Example:

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

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.

Example:

@open97
#@arrow_back
@arrow_forward

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

&Hyperlink

Grouping frame with a title.

• Title: Sets the title of the group box.

Stack of tabbed panes.

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

* Selects the current tab.

Example:

Tab 1
Tab 2
*Tab 3
Tab 4

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.

Example:

@ok3:Button

Check box with a text label.

• Label: Sets the label of the checkbox.

• Checked: Ticks or unticks the checkbox.

Radio button with a text label.

• Label: Sets the label of the radio button.

• Checked: Ticks or unticks the radio button.

Horizontal slider widget.

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

Static text on single or multiple lines.

• Text: Sets the label's text.

Hyperlink widget.

• Text: Sets the text of the hyperlink.

One-line text editor.

• Text: Sets the text of the text field.

Spin box widget.

• Value: Sets the value of the spin box.

Drop down list.

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

* Selects the item

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.

Example:

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

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.

Example:

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

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

• Text: Sets the text of the widget.

Rounded range control similar to a potentiometer.

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

Horizontal progress bar.

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

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