Case Study 1 - Modeling user interface for the Report Wizard dialog
This case study provides step-by-step instructions for modeling the Report Wizard dialog. If you are already familiar with this case study, please review Case Study 2 - Slider Example, or Case Study 3 - User Interface Prototyping Example
Step #1. Create a new Project
- Choose New Project from the File menu.
- Name it Report Wizard.
Step #2. Create a new Diagram
- Click Create Diagram and select User Interface Diagram.
- Name the new diagram Report Wizard.
Step #3. Create Container components
- Click the Frame button under the Containers toolbar and drag-drop it on the diagram pane. A Frame component is created.
- Name the Frame component by doing one of the following:
- Click the Frame shape on the diagram pane and type Report Wizard
- Open the Frame's Specification window.
- Double-click the Frame shape on diagram pane.
- In the opened specification window, type Report Wizard in the Title field.
- Clear the check box properties Maximize and Minimize in the Frame's Specification window.
- Define an Icon for the Frame symbol:
- In the Frame's Specification window, select the Custom option in the Icon property. The Open dialog box opens.
- Open <MagicDraw installation>\plugins\com.nomagic.magicdraw.uimodeling. Select the nomagic.png image as the frame icon.
- Under the Containers toolbar, drag and drop two Group Box elements in the Frame symbol. Under the Other toolbar, drag and drop one Separator element in the Frame symbol.
- Place one Group Box into the other Group Box. Double-click on the larger Group Box and ensure Titled is set to true. In the Title field type Select Template.
- Open the specification window of the smaller Group Box and clear the check box property Titled.
- Arrange everything appropriately.
Report Wizard Frame with two Group Boxes and one Separator
Step #4. Create a Tree
- Create a new Tree component:
- Under the Other toolbar, drag and drop the Tree element onto the Select Template Group Box.
- Delete old nodes from the Tree component.
- Create new nodes in the Tree component.
- In the Containment tree, right-click on the Tree to invoke its shortcut menu and choose Create Element > Node.
- Create five new Nodes in this way and name them as shown below.
- Add Leaves to Nodes.
- You can add a Leaf by right-clicking on a Node in the containment tree and then choosing Create Element > Leaf.
- Add at least one Leaf to every Node to indicate that the nodes have internal elements.
The Report Wizard Window with Added Tree
Step #5. Add Buttons
- Create predefined text buttons.
- Under the Buttons toolbar, expand the OK Button group.
- Right-click the Back button to expand the text buttons group. Create Back, Next and Cancel buttons. Guide yourself according to the figure below.
- Create regular buttons.
- Under the Buttons toolbar, drag and drop the Button symbol onto the diagram pane inside the Frame, next to the Select Template Group Box.
- Select the created button in the diagram pane and type in New.
- Create the remaining buttons by repeating steps 2.a and 2.b. Refer to the figure below.
- Double-click on the other buttons to invoke their specification window, excluding the Next >, Cancel, New and Import buttons. Clear the check box Inactive to true.
- It should look like the figure shown below.
Sample of the Report Wizard window
Step #6. Using the Report Wizard window
This User Interface model could now be exported as an image. The steps to do this are as follows:
- Select Save As Image from the File menu.
- In the Save As Image dialog, select Active Diagram.
- In Image File define the location where the image should be placed.
- Select Joint Photographic Experts Group (.jpg) (or any format you would like) in Image Format and then click Save.