Book a Demo
Prev Next

Webpage Wireframe Toolbox

The 'Webpage Wireframe' Diagram Toolbox pages provide the templates for modeling the schematics, blueprints or framework of a website, defining how the web pages work. You can see and build on an example of how to model the webpage interface by dragging the 'Webpage Pattern' icon onto a diagram.  Then, using the Toolbox, you can drag Element-types on to your diagram to add any key user-interface features.

Example Webpage wireframe diagram created in Sparx Systems Enterprise Architect

Access

On the Diagram Toolbox, click on Search to display the 'Find Toolbox Item' dialog and specify 'Wireframing' or 'Webpage'.

Ribbon

Design > Diagram > Toolbox

Keyboard Shortcuts

Ctrl+Shift+3

Toolbox

Element Features

Image

Detail

See also

ComboBox

Combobox, List, Progress/Navigation bar and Tab Control all provide lists of values.

To extend a list:

  • Open the Properties Dialog (Double-click or Shift+Enter)
  • Select the Wireframing tab
  • Select the Tagged Value
  • Click on the  Edit search.  icon
  • and then add, edit or remove items from the 'Values' list.
 Properties Dialog

Calendar Element

The Calendar element, when created, defaults to the current day and continues to update each day unless you set a value in the element's Date Tagged Value. If set, the date remains static until it is reset to 'Today' in the Tagged Value.

Paragraph

In the Paragraph element you can:

  • Set text alignment in the 'Align Text' Property
  • Edit the text in using the [...] option in the 'Text' Property (which is of type <memo>). The text can be use basic HTML text formatting, as for other formatted notes in elements.

Navigation Control

Navigation Control defines a menu with, if required, multiple levels of sub-menu options. You can add and remove options at any level using the 'Wireframe' tab of the 'Properties' dialog. Each option, at any level, has these properties:

  • 'Name': Set the text of the menu option
  • 'Expanded': Indicate if the option will display its sub options (if any); expanded items are always highlighted, regardless of the setting of 'Highlighted'
  • 'Highlighted': Draw the item with a different colored background

Progress/Navigation Control

Progress Navigation Control provides a visual progression through pages.

To extend a list:

  • Open the Properties Dialog (double-click or shift+enter)
  • Select the Wireframing tab
  • Select the Steps Tagged Value
  • Click on the  Edit search.  icon
  • and then add, edit or remove items from the 'Steps' list.

Hyperlink

Hyperlink and Header elements are both also defined on the 'Wireframe' tab, and have a number of style properties that you set using simple drop-down lists:

  • Color
  • Font Size
  • Font Family
  • Font Style
  • Text Align
  • Text Decoration

Learn more

Prev Next