Previous Next
agilian_user_guide Chapter 8 - User Interface Designer

Chapter 8 - User Interface Designer


Apart from facilitating visual modeling, Agilian also facilitate screen mock up in early requirement capturing stage. With Agilian cutting edge visual modeling technology, you can save a lot of time from writing tedious code to make a user interface for confirming requirements.
In this chapter, you will learn:

Creating User Interface Diagram

Similar to other diagrams, user interface diagram can be created using different ways:
Here, creation of it using toolbar is used as an example.
To create a new user interface diagram, select New User Interface from toolbar.
 
 Figure 8.1 - Select New User Interface

The diagram is created.
Figure 8.2 - New User Interface Diagram

Creating Component

You can create component by drag and drop, select and click and with size.
To create by drag and drop:
1. Drag the component you want to add from the toolbar.
Figure 8.3 - Drag the component

2. Then drop the component on the diagram pane.
Figure 8.4 - Drop on diagram pane

To create by select and click:
1. Select the component you want to add in the toolbar.
Figure 8.5 - Select component

2. Click on the diagram pane. The component is created.
Figure 8.6 - Component created

To create by defining an initial size:
1. Select the component you want to add in the toolbar.
Figure 8.7 - Select component

2. Drag a specific boundary before releasing the mouse to define the component's initial size.
Figure 8.8 - Define an initial size

3. The component with specific size is created.
Figure 8.9 - Component created

Change Component Properties

You can set the properties of user interface by opening the specification of the component. Then, you can go into the UI tab to update all user interface properties.
Here, the configuration of the user interface properties of list and label are used as examples.
To set the properties of a label:
1. Right click on the label and select Open Specification... from the popup menu.
Figure 8.10 - Select Open Specification

2. Then, select UI tab.

 Figure 8.11 - Select UI tab

3. User interface properties can be configured.
 Figure 8.12 - UI properties of label

4. You can edit the Caption and Mnemonic.
Figure 8.13 - Edit user interface properties

5. The label has been edited.
Figure 8.14 - Label edited

To set the user interface of a list:
1. Right click on a list and select Open Specification... from the popup menu.
Figure 8.15 - Open Specification

2. Select UI tab.
Figure 8.16 - Select UI tab

3. The UI properties you can edit is shown.
Figure 8.17 - UI properties of List

4. You can edit the Values and Selected value of the user interface. You can also decide the properties of Horizontal Scroll Bar and Vertical Scroll Bar.
Figure 8.18 - Edit UI properties

5. List has been edited.
Figure 8.19 - List edited

Annotating Component

You may want to add annotation to specific UI Component as instruction. In Agilian, you can use the Note resource to achieve it.
Here, adding annotation to a button is used as an example.
When your mouse moves pass a button, you can see the Note resource.

Figure 8.20 - Note resource

Drag the Note resource to a place on diagram pane where you want the note to be created on.
Figure 8.21 - Drag the Note resource

When you release the mouse, you can type in annotation in the note.
Figure 8.22 - Type in annotation

Annotation has been added.
Figure 8.23 - Annotation added

Linking Components

Similar to other diagrams, user interface diagram allows you to create connector to connect two components. This can be achieved by using Resource Centric.
Here, connecting a button and a panel is used as an example.
1. Mouse over a button, you will see the Centric Resource for Generic Connector.
Figure 8.24 - Select Centric Resource for Generic Connector

2. Drag the resource to the component you want to connect to.
Figure 8.25 - Drag the resource

3. Release the mouse and connector is created. You may also edit the name of connector.
Figure 8.26 - Edit the name of connector

Switching Orientation by Resource-centric Interface

Sometimes, you may want to switch the orientation of certain component. In Agilian, you can use the Switch Orientation Resource to do so.
When your mouse move over some components like scollbar, you can see the Switch Orientation Resource.
Figure 8.27 - Switch Orientation Resource

By selecting the resource, the orientation of component has been switched.
Figure 8.28 - Orientation switched


Auto Detect Orientation

Agilian can detect the orientation of a component when you create it with specific size.
For example, you may drag vertically to create a slider
Figure 8.29 - Drag vertically

The slider created is in vertical orientation.
Figure 8.30 - Component with vertical orientaton

Previous Next
Visual Paradigm International Limited
Website: www.visual-paradigm.com
E-mail: support@visual-paradigm.com