Dialog Wireframe Toolbox

Ribbon

Design > Diagram > Toolbox : > Specify 'Wireframing - Dialog' in the 'Find Toolbox Item' dialog

Keyboard Shortcuts

Alt+5 : > Specify 'Wireframing - Dialog' in the 'Find Toolbox Item' dialog

Other

You can display or hide the Diagram Toolbox by clicking on the or icons at the left-hand end of the Caption Bar at the top of the Diagram View.

Dialog

Generates an element that represents a dialog outline, with a title (the element name). This has several components that you can expose and define in the element 'Properties' dialog, some using the Tagged Values on the 'Wireframing' tab of the 'General' page, and some using the 'Wireframe' page of the dialog.

Tagged Values:

• Close Button - defaults to True to show a 'close dialog' icon in the top right corner of the dialog; click on the drop-down arrow and select False to omit the icon
• Maximize Button - defaults to False to omit a 'maximize dialog' icon from the top right corner of the dialog; click on the drop-down arrow and select True to show the icon
• Minimize Button - defaults to False to omit a 'minimize dialog' icon from the top right corner of the dialog; click on the drop-down arrow and select True to show the icon
• ScrollbarH - defaults to '<none>' to omit a horizontal scrollbar on the dialog; click on the drop-down arrow and select 'Bottom' or 'Top' to show a scrollbar in the corresponding position
• ScrollbarV - defaults to '<none>' to omit a vertical scrollbar on the dialog; click on the drop-down arrow and select 'Left' or 'Right' to show a scrollbar in the corresponding position
• StatusBar - define the display of the Status Bar using the 'Wireframe' page
• User Icon - type in the name of an icon exactly as listed in the Image Manager, to display that icon in the top left corner of the dialog before the dialog (element) name

Wireframe Page:

Displayed by default when you double-click on the element. Use the options to modify the Status Bar at the bottom of the dialog.

Click on the element name.

• Zoombar - defaults to True to depict a zoom bar at the right hand end of the Status Bar; click on the drop-down arrow and select False to omit the zoom bar
• Resize Handle - defaults to True to depict a resize icon (triangle of dots) in the bottom right corner of the Status Bar; click on the drop-down arrow and select False to omit the icon

Click on 'Label' - this defines the first segment of the progress bar at the left hand end of the Status Bar.

• Name - if necessary, overtype the text with another name for the progress bar; this text is not displayed but the field cannot be blank
• Text - if necessary, overtype the default text with different text to display next to the progress bar
• Type - defaults to 'Text' to display the string contained in the 'Text' field; if necessary, click on the drop-down arrow and select:
       -  Filled Progress Bar - to replace the text with a part-filled
          rectangle (to depict a section of Progress Bar with a portion of
          processing complete), or
       -  Block Progress Bar - to replace the text with rectangle containing
          blocks (to depict a section of Progress Bar with processing in
          action)

Click on 'Progressbar' - this defines a second segment of the progress bar. The properties are the same as for the first segment (above) except that there is no default 'Text' and the 'Type' defaults to 'Filled'.

If you want to add another segment to the progress bar, click on the element name, click on the Add button and provide a name for this segment. Provide values for the 'Text' and 'Type' properties as above.

If you want to remove segments from the progress bar, click on the segment name and click on the Remove button. If you remove all segments and the 'Zoom Bar' and 'Resize Handle', the status bar itself is removed.

You can change the sequence of segments by clicking on a segment name and on the buttons.

Client Area

Generates a frame element that represents the client area of the device.

Tagged Values:

• BorderStyle - click on the drop-down arrow and select to render the border as a 'Solid' line or a 'Dashed' line, or to have no border at all ('None')
• ScrollbarH - click on the drop-down arrow and select to place a horizontal scrollbar at the 'Top' or 'Bottom' of the client area, or to have no horizontal scrollbar ('<none>')
• ScrollbarV - click on the drop-down arrow and select to place a vertical scrollbar on the 'Left' or 'Right' of the client area, or to have no vertical scrollbar ('<none>')

Button

Generates an element that represents a simple button with the element name as the button text.

Tagged Values:

• State - click on the drop-down arrow and select a status for the button:
       -  Normal - simple rectangle, for normal display where the button
          is just available
       -  Focused - a highlighted inner border, indicating, for example,
          that the button is the default selection
       -  Selected - filled rectangle, indicating that the button is
          selected
       -  Disabled - pale text and border, indicating that the button is
          not available

Check Box

Generates a labeled checkbox element, the label text being the name of the element.

Tagged Values:

• State - click on the drop-down arrow and select the state to depict - 'Checked' (tick icon) or 'Unchecked' (box outline)

Radio Button

Generates a labeled radio button element, the label text being the name of the element.

Tagged Values:

• State - click on the drop-down arrow and select the state to depict - 'Selected' (filled) or 'Unselected' (outline)

Combo Box

Generates an element representing a drop-down combo box.

Tagged Values:

• DropDownState - click on the drop-down arrow and select 'Open' to depict the combo box in use, displaying all values, or 'Closed' to depict the combo box with a single selected value
• Items - click on the drop-down arrow and select the item to depict as currently selected in the combo box and, if the list of items is expanded, highlighted in the list
  You can change the text of the items, and add or remove items in the list, by editing the 'Values:' list in the Tagged Value notes

Label

Generates a Label text element, on which the label text is the name of the element.

Tagged Values:

• Align Text - click on the drop-down arrow and select to align the text to the left, center or right of the element frame
• Multiline - click on the drop-down arrow and select True to allow the text to wrap around onto more than one line (automatically increasing the element depth), or False to only show the text that fits on one line within the current element width

List

Generates a List box element.

Tagged Values:

• Items - click on the drop-down arrow and select the item to show highlighted in the list
  You can add, remove and rename items by editing the 'Values:' list in the Tagged Values Notes

• ListType - click on the drop-down arrow and select to display the list as 'Simple', 'Numbered' or 'Bulleted'

Table

Generates a Table element with labeled columns, rows and cells.

Double-click on the table to display the element 'Properties' dialog at the 'Wireframe' page, which provides the facilities for editing the table (adding, renaming and deleting columns and rows, changing the column width and editing the cell text) through context menu options and buttons. Note that the editor does not provide a true image of the table's appearance on the screen.

Tagged Values:

• Draw Lines - click on the drop-down arrow and select True to display horizontal and vertical lines between the table cells, or False to hide the lines
• Highlight Headers - click on the drop-down arrow and select True to highlight the header of each column, or False to leave the table columns a uniform color

Image

Generates a place holder to indicate where an image will be placed on the phone or tablet.

You can display an actual image by assigning an alternative image to the element.

Checkbox List

Generates an element depicting a checklist where each item has a checkbox on the left hand side.

Double-click on the table to display the element 'Properties' dialog at the 'Wireframe' page, which you use to maintain this element.

For each 'Checkbox' item, complete these fields:

• Name - type the name or text of the item
• Checked - click on the drop-down arrow and select True to show a ticked checkbox against the item, or False to show a cleared checkbox

To add another item to the list, click on the element name and on the Add button, then provide a name for the item.

To remove an item from the list, click on the item and on the Remove button.

You can change the sequence of items by clicking on an item name and on the buttons.

Format Bar

Generates a simple element representing a text formatting bar.

If you want to represent a toolbar containing icons you have defined, use the 'Toolbar' icon.

List View

Generates an element representing a horizontal, rectangular or vertical list of text items (depending on the size of the element) with or without associated images above them.

Double-click on the table to display the element 'Properties' dialog at the 'Wireframe' page, which you can use to add, remove or change the items and their icons. For each item, complete these fields:

• Name - type the name or text of the item; this field cannot be left blank
• Image - type the name of the image, or click on the drop-down arrow and select the name, as listed in the Image Manager
• Selected - click on the drop-down arrow and select True to highlight the name of the item, or False to omit any highlight; more than one item can be highlighted at once

To add another item to the list, click on the element name and on the Add button, then provide a name for the item.

To remove an item from the list, click on the item and on the Remove button.

You can change the sequence of items by clicking on an item name and on the buttons.

If you reduce the size of the element so that not all items can be shown, a scroll bar automatically displays on the right edge of the element:

Status Bar

Generates a status bar element identical to the automatically-generated status bar on the 'Dialog' element (above), except that you can position this element independently of the dialog, as required.

Toolbar

Generates an element to represent a toolbar of icons, already set up with some standard toolbar icons.

Double-click on the element to display the 'Wireframe' page of the 'Properties' dialog, which you can use to add, remove or change the items and their icons. For each item, complete these fields:

• Name - type the name or text of the item; this field cannot be left blank
• Image - type the name of the icon image, or click on the drop-down arrow and select the name, as listed in the Image Manager

To add another item to the list, click on the element name and on the Add button, then provide a name for the item. You can add one or more items called 'Separator' to the list, which display as a |, to partition groups of related icons in the toolbar. If you add an image to this item, the image is overridden by the |.

To remove an item from the list, click on the item and on the Remove button.

You can change the sequence of items by clicking on an item name and on the buttons.

Audio Player

Generates a simple element to indicate an audio player control.

Calendar

Generates an element representing a basic calendar, showing today's date derived from the system date.

Tagged Values:

• Date - either:
       -  Overtype the date displayed in this field or
       -  Click on the drop-down arrow to display an active calendar
           page and select the date on that; click on the Today button
           to reset the date to the system date

• Highlight Date - click on the drop-down arrow and select True to highlight the set date on the calendar icon, or False to omit the highlight

Header

Generates an element representing a title or header text on a dialog. The text itself is the element name.

The element can reflect one of a range of header levels, each with a different font style. You specify which level of header to display using the 'HeaderType' Tagged Value within the element.

Double-click on the element to display the 'Wireframe' page of the 'Properties' dialog, which you can use to add, remove or change the header levels and styles. For each item, complete these fields:

• Name - type the name of the header level; this field cannot be left blank
• Color - click on the drop-down arrow and select the appropriate color from the palette
• Font Size - type in the font size, or click on the drop-down arrow and select the type size from the list
• Font Family - click on the drop-down arrow and select the font type from the list
• Font Style - click on the drop-down arrow and select the style from the list; select blank for no applied style
• Text Align - click on the drop-down arrow and select to align the text left, right or centered
• Text Decoration - click on the drop-down arrow and select whether to show an underline or a line-through, or neither (blank)

To add another heading level to the list, click on the element name and on the Add button, then provide a name for the level.

To remove a level from the list, click on the item and on the Remove button.

You can change the sequence of heading levels by clicking on a level name and on the buttons.

Tagged Values:

• HeaderType - click on the drop-down arrow and select the heading level to display

Hyperlink

Generates an element representing a hyperlink in one of three states: 'Link', 'Visited' and 'Hover' (mouse-over). The Hyperlink text is the element name.

Double-click on the element to display the 'Wireframe' page of the 'Properties' dialog, which you can use to add, remove or change the hyperlink states. For each state, complete these fields:

• Name - type the name of the state; this field cannot be left blank
• Color - click on the drop-down arrow and select the appropriate color from the palette
• Font Size - type in the font size, or click on the drop-down arrow and select the type size from the list
• Font Family - click on the drop-down arrow and select the font type from the list
• Font Style - click on the drop-down arrow and select the style from the list; select blank for no applied style
• Text Align - click on the drop-down arrow and select to align the text left, right or centered
• Text Decoration - click on the drop-down arrow and select whether to show an underline or a line-through, or neither (blank)

To add another hyperlink state to the list, click on the element name and on the Add button, then provide a name for the state.

To remove a state from the list, click on the item and on the Remove button.

You can change the sequence of states by clicking on a state name and on the buttons.

Tagged Values:

• State - click on the drop-down arrow and select the state to represent on the diagram

Menu Bar

Generates an element representing a standard menu bar at the top of the screen, initially with three options ('File', 'Edit' and 'View') with the 'File' option expanded into a sub-menu.

Double-click on the element to display the 'Wireframe' page of the 'Properties' dialog, which you can use to add, remove or change the menu options in the top level, sub-menu and - if you prefer - further sub levels.

For each menu option - at any level - complete these fields:

• 'Name' - type in the name for this menu item
• 'Expanded' - click on the drop-down arrow and select True to show the sub-menu for this option (if it has one), or False to hide the sub-menu
• 'Highlighted' - click on the drop-down arrow and select True to highlight this option in the menu, or False to leave it un-highlighted; if 'Expanded' is set to True, the option is automatically highlighted

To add a menu sub-option at any level, click on the parent option name and on the Add button, then provide a name for the sub-option. You can add one or more items called 'Separator' to the list, which displays as a horizontal line across the list, to partition groups of related options in the menu.

To remove an option from the list, click on the item and on the Remove button.

You can change the sequence of options by clicking on an option name and on the buttons.

To move an option between two levels of menu, click on the option name and on the buttons.

Paragraph

Generates a text element with no border, but that can contain multi-line text with basic HTML formatting.

Tagged Values:

• Align Text - click on the drop-down arrow and select to align the text to the left, center or right of the element frame
• Text - click on the button to edit the 'Tagged Value Note' screen, on which you can create the text to depict on the diagram; this can use HTML formatting tags such as <b> </b> for bold or <u>  </u> for underlined - not all HTML formatting is supported

Progress Bar

Generates a status bar element representing the progress of a process.

Tagged Values:

• Fill Percentage - defaults to 30% complete; type the percentage completion to depict (the amount the Progress Bar is filled)
• Fill Style - click on the drop-down arrow and select:
       -  'Filled' to represent the percentage completion as a
          solid bar, or
       -  'Block' to represent the percentage completion as a
          series of blocks or vertical bars (similar to the Windows XP
          theme)

Rating Control

Generates an element depicting a star-rating band. The element always shows five stars, and the number of filled stars indicates the rating.

Tagged Values:

• Rating - click on the drop-down arrow and select the number of stars to show filled (the rating)

You can only re-size the element horizontally; the vertical dimension adjusts automatically to always depict five uniformly-shaped stars.

Scrollbar - Horizontal

Generates an element representing a horizontal scrollbar.

Scrollbar - Vertical

Generates an element representing a horizontal scrollbar.

Tab Control

Generates an element representing a series of tabs or pages. You can name the tabs and mark them as selected; however, child elements will not 'switch' when changing tabs (that is, setting a different tab as selected will still display the same child items in the tab space).

Tagged Values:

• Tabs - click on the drop-down arrow and click on the tab that is to be highlighted as selected
  You can name the tabs, and add more to the list, by editing the 'Values:' list in the Tagged Value notes

If you reduce the size of the element so that all tabs cannot be shown, a scroll icon () automatically displays in the top right corner of the element.

Text Field

Generates a text element with a pale border, the text being the element name, representing a simple data entry field.

Video Player

Generates an element that represents a video player control.

Date/Time Picker

Generates an element that represents the Microsoft Date/Time Picker.

Tagged Values:

• CustomFormat - type in a custom format for any or all of the day, date, month, year, hour, minute and second components, using these case-sensitive codes (listed in alphabetical order):
       -  d - display the day of the month using either one or two digits
       -  dd - display the day of the month using two digits, digits 1 to 9
          preceded by a 0
       -  ddd - display the day of the week as a three-character
          abbreviation
       -  dddd - display the name of the day in full
       -  h - display the hour using either one or two digits, in 12 hour
          clock format
       -  hh - display the hour using two digits, digits 1 to 9 preceded by
          a 0, in 12 hour clock format
       -  H - display the hour using either one or two digits, in 24 hour
          clock format
       -  HH - display the hour using two digits, digits 1 to 9 preceded by
          a 0, in 24 hour clock format
       -  m - display the minutes using either one or two digits
       -  mm - display the minutes using two digits, digits 1 to 9
          preceded by a 0
       -  M - display the number of the month using either one or
          two digits
       -  MM - display the number of the month using two digits, digits
          1 to 9 preceded by a 0
       -  MMM - display the name of the month as a three-character
          abbreviation
       -  MMMM -display the name of the month in full
       -  s - display the seconds using either one or two digits
       -  ss - display the seconds using two digits, digits 1 to 9
          preceded by a 0
       -  t - identify morning or afternoon with a single character (A for
          AM, P for PM)
       -  tt - identify morning or afternoon with the two-character
          abbreviation AM or PM
       -  y - display the year using a single digit (2001 is displayed as 1)
       -  yy - display the year using two digits (2001 is displayed as 01)
       -  yyyy - display the year in full (for example, 2001)

• Date - overtype the date, or click on the drop-down arrow to display a calendar from which you can select the date to display; defaults to today's date - if you change this to a fixed date and want to return to the current (system) date, click on the Today button
• Format - click on the drop-down arrow and select the code for the format to use to display the date and time:
       -  Long - the full day name, the day date, the full month name,
          the full year (for example: Wednesday, 18 February 2018)
       -  Short - the day of the month in single/double digits, the
          month as a two-digit number, the  year in full (for example:
          18/02/2018)
       -  Time - the hour, minutes and seconds in 12-hour format (for
           example 12:59:34 PM)
       -  Custom - applies the custom format you defined in the
           'CustomFormat' Tagged Value, above

Tree Control

Generates an element representing a hierarchy or tree of nodes, with broken lines connecting sibling nodes and an expansion box (+ or -) next to nodes that have subnodes.

Double-click on the element to display the element 'Properties' dialog at the 'Wireframe' page, which you can use to add, remove or change the tree nodes in the top level, sub-level and - if you prefer - further sub levels.

For each node - at any level - complete these fields:

• Name - type in the name for this node
• Expanded - click on the drop-down arrow and select True to show the subordinate nodes for this node (if it has any), or False to hide the subordinate nodes
• Selected - click on the drop-down arrow and select True to highlight this node, or False to leave it un-highlighted

To add a sub-node at any level, click on the parent node name and on the Add button, then provide a name for the sub-node.

To remove a node from the hierarchy, click on the node name and on the Remove button.

You can change the sequence of nodes by clicking on a node name and on the buttons.

To move a node between two levels of the hierarchy, click on the node name and on the buttons.

You can also directly edit the XML of the element on the 'Wireframe' tab of the Element Properties window.

Groupbox

Generates an element representing a Groupbox, with the name of the element in the top left corner. You can use this element to enclose and group other elements of the dialog.

Dialog

This Pattern generates a small dialog containing three panels with data entry fields and radio buttons, and two buttons, as depicted at the start of this topic. You can use this as an example, or as the basis for a similar dialog design.