Wireframes with Data Model

This guide will take you through how to attach models to various user interface (UI) elements and how to utilize data from other diagrams in your wireframe designs.

With Software Ideas Modeler, creating wireframes that are dynamically linked to data models is an efficient way to maintain consistency across your UI and data structure. The ability to bind UI components like Combo Boxes, List Boxes, and Field Lists to elements from diagrams like UML or ERD ensures that your wireframes remain connected to the underlying system design, making updates and modifications more streamlined.

Supported UI Elements for Data Binding

Currently, the following UI elements in Software Ideas Modeler support attaching a data model:

• Checked List Box
• Combo Box
• Field List
• List Box
• Thumbnail View

These elements are ideal for representing structured data in your wireframe, allowing you to create interactive lists, combo boxes, or visual representations that are backed by underlying models.

Elements Supporting Enumerated Lists

For UI elements like the Checked List Box, Combo Box, List Box, and Thumbnail View, you can attach an element representing a list of items as a source. Some common data model elements that you can use include:

• UML Enumeration – Useful for defining a set of named values.
• UML Package with Nested Elements – Can hold various items grouped under a single package.
• ERD Entity with Defined Data Rows – Great for attaching real data from an entity's attributes and rows.

By linking these data model elements, your UI elements will dynamically display the corresponding data. For instance, a Combo Box could show the enumerated items from a UML Enumeration, allowing users to choose from a predefined set of options.

Attaching Data Models to UI Elements

There are multiple ways to bind data models to the supported wireframe elements:

• Drag & Drop from the Project Tree
• You can drag an element (such as a UML Enumeration or ERD entity) from the Project Tree and drop it onto the appropriate UI element in your wireframe diagram. This method is straightforward and intuitive, allowing you to visually link data to UI components.
• Using the Properties Sidebar or Dialog
• If you prefer to assign a data model through properties, select the UI element in the wireframe and open the Properties sidebar or dialog. Locate the Model Reference box. You can either:
• Directly enter the reference.
• Click the Ellipsis (…) button next to the Model combo box, which will open a dialog showing the project tree. From there, you can browse and select the appropriate data model element.

Data model binding to various wireframing elements using drag and drop

Binding Data Models to the Field List

The Field List element in the wireframe diagram supports binding to a UML Class. When a UML Class is assigned to the Field List, the fields in the list will automatically be generated based on the attributes of that class. For example:

• Boolean attributes are rendered as Check Boxes.
• Numeric attributes are represented by Numeric Up-Down Boxes.
• String attributes are shown as Text Boxes.
• Date attributes are shown as Date Pickers.

This powerful feature allows you to create forms or input fields that are directly linked to your data model, ensuring that changes in the underlying class structure are reflected in the user interface.

Steps to Attach a Data Model to a Field List

• Drag & Drop Method:
• Navigate to the UML Class in the Project Tree and drag it to the Field List in the wireframe diagram.
• The attributes of the class will automatically map to appropriate UI controls.
• Using the Properties Dialog:
• Select the Field List element in the diagram.
• Open the Properties sidebar or dialog.
• In the Model Reference box, choose the desired UML Class either by browsing or selecting it from the Ellipsis (…) dialog.