Visual Paradigm's User Interface Designer is extremely easy to use, with screen mock up tools that only need drag and drop actions to create components.
Now, the User Interface Designer is enhanced to support Tree and Table mock up, which enables you to construct the Tree and Table parts of your Graphical User Interface.
| Creating a Tree |
|
| 1. |
Select Tree from the diagram toolbar, and click on where the Tree should appear. For example, a Frame. |
|
 |
|
| 2. |
An empty Tree is created. In order to fill in the Tree, open its specification dialog box. Right-click on the Tree and select Open Specification from the popup menu. |
|
 |
|
| 3. |
Switch the the UI tab. |
|
 |
|
| 4. |
The middle of the dialog box shows the Preview of the Tree. Nodes can be added by pressing the buttons appear above the Preview or by right-clicking on the Preview and selecting the appropriate menu, like this: |
|
 |
|
| 5. |
To add a child node, right-click on the parent one and select Add Child Node... from the popup menu. |
|
 |
|
| 6. |
To assign an icon for a node, select the node(s) and switch to the Node Icons tab. |
|
 |
|
| 7. |
Select the icon file for the node(s). There are three types of icon. The first one is for leaf node. The second one is for collapsed non-leaf node. The third one is for expanded non-leaf node. |
|
 |
|
| 8. |
Press OK to confirm the changes and go back to the diagram. |
|
 |
|
| Creating a Table |
|
| 1. |
Select Table from the diagram toolbar, and click on where the Table should appear. For example, a Frame. |
|
 |
|
| 2. |
An empty Table is created. In order to fill in the Table, open its specification dialog box. Right-click on the Table and select Open Specification from the popup menu. |
|
 |
|
| 3. |
Switch the the UI tab. |
|
 |
|
| 4. |
The middle of the dialog box shows the Preview of the Table. Rows and columns can be added by pressing the buttons appear above the Preview or by right-clicking on the Preview and selecting the appropriate menu, like this: |
|
 |
|
| 5. |
To create another column, right-click on the adjacent one and select Insert Column to Left/Right... from the popup menu. |
|
 |
|
| 6. |
To add a row, right-click on the Table Preview and select Insert Row Above/Below... from the popup menu. |
|
 |
|
| 7. |
Fill in the Row content. |
|
 |
|
| 8. |
To insert a row above or below an existing one, right-click on a row and select Insert Row Above/Below... from the popup menu. |
|
 |
|
| 9. |
Adjust the column widths. Since the ratio of table between the diagram and the preview is different, you may need to adjust the ratio several times to produce a desired one. |
|
 |
|
| 10. |
Press OK to confirm the changes and go back to the diagram. |
|
 |
|
