On this Page:

Sample Model:

<MagicDraw installation folder>\samples\diagrams\User InterfaceModeling\UI Modeling Samples.mdzip.

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

1. Choose New Project from the File menu.
2. Name it Report Wizard.

Step #2. Create a new Diagram

1. Click Create Diagram and select User Interface Diagram.
2. Name the new diagram Report Wizard.

Step #3. Create Container components

1. Click the Frame button under the Containers toolbar and drag-drop it on the diagram pane. A Frame component is created.
2. 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.
   1. • Double-click the Frame shape on diagram pane.
      • In the opened specification window, type Report Wizard in the Title field.
3. Clear the check box properties Maximize and Minimize in the Frame's Specification window.
4. Define an Icon for the Frame symbol:
   1. In the Frame's Specification window, select the Custom option in the Icon property. The Open dialog box opens.
   2. Open <MagicDraw installation>\plugins\com.nomagic.magicdraw.uimodeling. Select the nomagic.png image as the frame icon.
5. 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.
   1. 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.
   2. Open the specification window of the smaller Group Box and clear the check box property Titled.
   3. Arrange everything appropriately. 

Report Wizard Frame with two Group Boxes and one Separator

Step #4. Create a Tree

1. Create a new Tree component:
   1. Under the Other toolbar, drag and drop the Tree element onto the Select Template Group Box.
2. Delete old nodes from the Tree component.
3. Create new nodes in the Tree component.
   1. In the Containment tree, right-click on the Tree to invoke its shortcut menu and choose Create Element > Node.
   2. Create five new Nodes in this way and name them as shown below.
4. Add Leaves to Nodes.
   1. You can add a Leaf by right-clicking on a Node in the containment tree and then choosing Create Element > Leaf.
   2. 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

1. Create predefined text buttons.
   1. Under the Buttons toolbar, expand the OK Button group.
   2. Right-click the Back button to expand the text buttons group. Create Back, Next and Cancel buttons. Guide yourself according to the figure below.
2. Create regular buttons.
   1. Under the Buttons toolbar, drag and drop the Button symbol onto the diagram pane inside the Frame, next to the Select Template Group Box.
   2. Select the created button in the diagram pane and type in New.
   3. Create the remaining buttons by repeating steps 2.a and 2.b. Refer to the figure below.
3. 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.
4. 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:

1. Select Save As Image from the File menu.
2. In the Save As Image dialog, select Active Diagram.
3. In Image File define the location where the image should be placed.
4. Select Joint Photographic Experts Group (.jpg) (or any format you would like) in Image Format and then click Save.

Case Study 2 - Slider Example

This case study contains step-by-step instructions for creating a User Interface model with Sliders. It also shows how to customize the symbol properties of User Interface components. However, it does not explain how to create a new project and a new diagram. Please refer to "Case Study 1 - Modeling user interface for the Report Wizard dialog" for those instructions. If you are already familiar with these case studies, please review Case Study 3 - User Interface Prototyping Example

Step #1 Create a Frame, Labels and Sliders

1. Create a new Frame.
   1. Under the Containers toolbar, click the Frame button.
   2. Drop it on the diagram pane.
   3. Click on your newly created frame and title Symbol Properties Customization.
2. Add a new Label to the Frame.
   1. Under the Tools toolbar, click the Label button. Place the label onto the frame.
   2. Click on the label until you can edit the name and type in Fill Color.
   3. Create the remaining two labels and name them Text Color and Font Name.
3. Add Sliders to the Frame.
   1. Under the Other toolbar, click the Slider button. Place the slider onto the frame.
   2. Double-click on the Slider to invoke its specification window.
   3. In the opened window, set the Spacing property value to 50.
   4. Set the Knob Position property value to 0 in order to move the knob to the left position.
   5. In the Slider's specification window, select the Values property and click the + symbol to the right of the field. A Values dialog window opens. If there are values already defined in the window, click the - symbol to delete them. 
   6. To add new values, click the + symbol to the right of the window and then type 0 Red. 0 Red must be written in a specific way. First, type in 0 and press Enter. Type Red on the next line. Rename the other two given values to 50 Blue and 100 White using the same procedure.
   7. Draw two more sliders and repeat steps 3a - 3f until your frame looks like the one shown in the figure below.

 Symbol Properties Customization Frame with Added Labels and Sliders

Step #2 Add Text Fields

1. Create Text Fields.
   1. Under the Text toolbar. click the Text Field button. Drop it onto the frame. 
   2. Name the text field Red Background.
   3. Repeat the previous two steps for the remaining two text fields, as shown in the figure below.

Added Text Fields to the Frame

Step #3 Edit Symbol Properties for the Text Fields

1. Edit Symbol Properties for the first text field.
   1. Select the first text field on the Frame shape.
   2. Right-click on it and select Symbol Properties from its shortcut menu.
   3. Check off the Use Fill Color property and change the Fill Color property value to red. Change the fill color by clicking the ... to the right of the field, and in the Color dialog, click RGB and type in FF0000 in the Color Code field.
2. Edit Symbol Properties for the remaining fields.
   1. Follow steps 1a - 1b for the next steps.
   2. For the second text field, select yellow in Text Color.
   3. For the third one, select the font name Tahoma in Font, as shown in the figure below 

Finalized Slider Example

Case Study 3 - User Interface Prototyping Example

This case study demonstrates how to connect several user interface models and create a browsable report. The models should represent a test application with a Login Dialog, a Test Browser and a test with several questions. Here are step-by-step instructions on how to add hyperlinks and create browsable reports. If you are already familiar with this case study, please review Case Study 2 - Slider Example, or Case Study 1 - Modeling user interface for the Report Wizard dialog

Step #1 Create first Model

1. Create a new Package for the model.

2. Create a model similar to the one shown below.

First Model of Prototyping Example - Login Dialog

Step #2 Create second Model

1. Create another new Package for this model.

2. Create a model similar to the one depicted below.

Second Model of Prototyping Example - Test Browser

Step #3 Create remaining Models

1. Create a separate Package for each model.

2. You can build models similar to the ones shown in the detailed samples mentioned in the beginning of this chapter, or create your own in a similar manner.

Step #4 Add Hyperlinks

1. Add a hyperlink.

   1. Open the model with the Login Dialog.

   2. Select the OK button.

   3. Click on the smart manipulator Hyperlinks/Go To and select Add Hyperlink in the popup menu.

   4. In the Edit Hyperlink dialog, select Element/Symbol and click the "..." button. Browse to the Package Test Browser, select the User Interface diagram in it and confirm two times with OK - a diagram symbol will appear next to the OK button. Double clicking on the OK button will lead to the other diagram.

2. Now connect all the buttons in the other diagrams with hyperlinks. The diagram symbol appears next to a component with a hyperlink.

Step #5 Create a browsable Report

1. Create a new report.

   1. Select Report Wizard from the Tools menu.

   2. Expand the Default Template in the tree and select Web Publisher 2.0.

   3. Confirm three times by clicking Next until the dialog appears allowing you to add data to the report. Add all Packages that contain the created diagrams and click Next.

   4. Give the Report file a name to the output file. Clear the check box Display in viewer after generating report. 

   5. Click Generate. The report is built and shown in your default browser.

Related References:

• UML diagrams
• Extension diagram