CSE-5324: SOFTWARE ENGINEERING: ANALYSIS, DESIGN AND TESTING

TOOL HANDOUT DOCUMENT

Tool Topic:

MICROSOFT VISIO 2010

Tool Presented To: Dr. Christoph Csallner & the class of CSE 5324, Spring 2012

Tool Presented On:

02/29/2012

Tool Presented By: NAIEEM KHAN UTA Student ID# 1000740518

This document contains the step-by-step details on how to use the tool. The screenshots of the explained topics are provided in the presentation slides.

Features of this document: UML design: Use Case Diagram UML static structure (Domain Model and Design Class Diagram) Sequence Diagram Database model design: Conceptual Design (Entity Relationship Diagram) Logical Design (Relational Schema) Android user interface prototype design Easiest way to get Microsoft Visio 2010: Go to http: //msdn01.e-academy.com/uta_cseng (MSDN website for UTA) Log-In with your mavs email address and password, Search for Visio, download a copy Unzip, run the Setup file and Install After installation Register your copy with the Key provided by MSDN

Use Case Diagram: 1. On the File menu, point to New, point to Software and Database, and then click UML 2.2 Template (Visio 2010). 2. On the left, in the Shapes tab left-click on More Shapes, scroll down to Software, select UML Use Case from the pull down menu. Then in the left all the items related to Use Case appear. Alternately, left-click on More Shapes scroll down to Software, select UMP Use Case from the above stencils list (which are previously downloaded in your my shapes folder). Note: There are two units, Metric and US. You can choose either one. The workspace displays 'Use Case' as a watermark. An icon representing the diagram is added to the tree view. 3. Drag the System Boundary shape onto the drawing page. System Boundary shape Indicate a system boundary in a use case diagram 1. In a use case diagram , drag a System Boundary shape onto the drawing page.

2. Double-click the shape, and then type a new name for the system or press the DELETE key to delete the existing name. Click outside the shape on the drawing page. 3. To resize the system boundary, select the shape, and then drag a selection handle. 4. Drag Use Case shapes from the Use Case stencil and place them inside the system boundary, and then drag Actor shapes to the outside of the system boundary. Use Case shape Actor shape 5. Use Communicates shapes to indicate relationships between use cases and actors. Communicates shape Indicate a relationship between an actor and a use case 1. In a use case diagram, drag a Communicates shape onto the drawing page. 2. Glue one endpoint of the Communicates shape to a connection point on an Actor shape. Glue the other endpoint to a connection point on a Use Case shape. 3. If you want to add an arrow to indicate the flow of information, do the following: Double-click the Communicates shape, then, under Association, click the end you want to edit, and then click Properties. In the Association End category, check IsNavigable, click OK, then click OK again. Right-click the Communicates shape and click Shape Display Options. Under End options, select End navigability, and then click OK. 1. Use Uses and Extends shapes to indicate the relationships between use cases. Indicate a uses relationship between two use cases 1. In a use case diagram, drag a Uses relationship shape onto the drawing page. 2. Glue the Uses endpoint without an arrowhead to a connection point on the Use Case shape that uses the behavior of the other use case. 3. Glue the Uses endpoint (with an arrowhead) to a connection point on the use case being used. 4. Double-click the Uses shape to open the UML Generalization Properties dialog box. Add property values, and then click OK. Indicate an extends relationship between two use cases 1. In a use case diagram, drag an Extends shape onto the drawing page. 2. Glue the Extends endpoint without an arrowhead to a connection point on the use case providing the extension. 3. Glue the Extends endpoint with an arrowhead to a connection point on the base use case. 4. Double-click the Extends shape to open the UML Generalization Properties dialog box. Add the property values, and then click OK.

2. Double-click any shape (except the System Boundary shape) to open its UML Properties dialog box where you can add a name, attributes, operations, and other property values. 3. Save the diagram. Use Case Example:

1. Defining the system boundary determines what is considered external or internal to the system. 2. An actor represents a role played by an outside object. One object may play several roles and, therefore, is represented by several actors. 3. A communicates relationship illustrates the participation of the actor in the use case. 4. A use case is a set of events that occurs when an actor uses a system to complete a process. Normally, a use case is a relatively large process, not an individual step or transaction. UML Static Structure (Domain Model & Design Class Diagram): In the domain model we do not show the attribute types, the methods or functions and we only show the classes related to the domain perspective. In design class diagram, we display the attribute types, the methods or functions and also additional classes related to the programming perspective. Domain Model: In order to disable the attribute types, methods or functions: 1. Select the class. 2. Right click on it and the unselect the attribute type from the UML Shape Display Options dialog box to disable the attribute types.

3. To disable the methods or functions uncheck Operations on the suppress category of UML Shape Display Options dialog box. Design of UML static structure (Domain Model): 1. On the File menu, point to New, point to Software and Databases, and then double-click UML Model Diagram. 2. In the tree view, select the UML static structure diagram, all the items related to static structure will be displayed under the tab. 3. Drag class or object shapes onto the drawing page to represent the classes or objects you want to include in your class static structure diagram or conceptual model. Work with classes and objects in UML static structure diagrams: Add an interface to a class, component, or other element 1. In a static structure, component, or deployment diagram, drag the lollipop Interface shape (represented by a line and circle) onto the drawing page. 2. Glue the endpoint without the circle to a connection point on the class component, or other element. 3. Double-click the Interface shape to add a name, operations, and other property values. You can also represent an interface with a rectangular Interface shape that resembles a class. Use this shape when you want to display a list of the interface operations. To change the type of shape that appears for an interface, right-click the Interface shape and click Show as Class-like Interface or Show as Lollipop Interface. Indicate a realizes relationship between a class and an interface or other element 1. In a static structure diagram, right-click any class shape (Class, Parameterized Class, Utility or MetaClass), click Shape Display Options, and then, under General Options, select Realization Link. 2. Glue the control handle for the realization link on a class shape to a connection point on the interface, class, or other element. Add receptions to a classifier 1. Double-click the shape representing the classifier you want to add receptions to, and then click the Receptions category. 2. Click New to add a new reception. 3. Click the Reception category. Type a name for the reception in the Reception column. In the Signal column, choose the signal to which the classifier, prepared by the reception, reacts, and then choose the other property values you want. A signal element must exist in the model for it to be available in the Signal list.

4. In the Exceptions category, choose the exceptions, if any, which can be generated by the reception. An exception element must exist in the model for it to be available in the Signal list. 5. Add any constraints or tagged values you want, and then click OK until you close the shape's UML Properties dialog box. Add template parameters to a class 1. Double-click the shape (Parameterized Class, Class, Utility, Metaclass, or Bound Element) representing the element that you want to add parameters to, and then click Template Parameters. 2. Click New to add a new parameter. 3. In the Template parameters list: To edit an existing parameter, type a new name in the Template Parameter column. To edit the type, click a Type field, click the arrow, and then select the type from the list. To add documentation, type in the Documentation box. 4. Click OK to accept the changes and close the UML Class Properties dialog box. You can make any class a parameterized class by adding parameters to a class shape. To hide parameters on any class shape, right-click the shape, click Shape Display Options and then, under Suppress, select Template Parameters. Bind template parameters to a class 1. Drag a Bound Element shape from the UML Static Structure stencil onto the drawing page near the Parameterized Class shape with parameters you want to bind. 2. Drag a Binding shape onto the drawing page and glue the endpoint without an arrowhead to a connection point on the bound element. 3. Glue the Binding endpoint with an arrowhead to a connection point on the Parameterized Class shape. 4. Double-click the Binding shape, and then click Bound Arguments. 5. Under Bound Arguments, select a parameter to which you want to bind a type (if the parameter has no type specified) or select a value (if the parameter has a type specified). Click Properties, choose the type or type the value you want, and then click OK. 6. Click OK to close the UML Binding Properties dialog box. Attributes and operations associated with the parameterized class are passed to the bound element. Unbound parameters (with no specified type) that you have assigned to the class as attribute types or operation return types, are replaced in the bound element by the types you specified in step 5 above. Create an object as an instance of a class 1. In a static structure diagram, drag a Class shape onto the drawing page to represent the class you want the object to be an instance of.

2. Optional Double-click the Class shape to open the UML Class Properties dialog box. Click Attributes, and then click New to add attributes to the class. Click OK, and then click OK again. 3. Drag an Object shape onto the drawing page, and then double-click the shape. 4. In the UML Object Properties dialog box, click Object and type a name for the object. Under Class, select the class you want the object to be an instance of. 5. Click Attribute Values and select the attribute you want to add an instance value to, and then click Properties. Type a value for the attribute. 6. Click Attribute Link, add any other property values you want, and then click OK. 7. Repeat steps 5 and 6 for all the attributes you want to add instance values to, and then click OK. Delete template parameters from a class 1. Double-click the shape (Parameterized Class, Class, Utility, Metaclass, or Bound Element) representing the element with parameters you want to delete, and then click Template Parameters. 2. Select the template parameter you want to delete, click Delete, and then click OK. Edit template parameters for a class 1. Double-click the shape (Parameterized Class, Class, Utility, Metaclass, or Bound Element) representing the element with the parameters you want to edit, and then click Template Parameters. 2. In the Template parameters list, for each parameter you want to edit, click a Type field. Then, click the arrow and select a type from the list. You can assign parameters with no type specified to attributes as types or to operations as return types. 3. In the Template parameters list, for each parameter that you want to edit, type a new name. 4. In the Documentation box, type the documentation you want. 5. Click New to add another parameter (and follow steps 3 through 5), or click OK to close the UML Class Properties dialog box. Hide the attribute and operations sections of a class 1. Right-click the Class shape, and then click Shape Display Options. 2. In the UML Shape Display Options dialog box, under Suppress, select Attributes to hide the attributes section, and then select Operations to hide the operations section. To show the attributes and operations sections again, right-click the shape, click Shape Display Options, and then clear Attributes and Operations. Indicate that classes in a package may be referenced 1. In a package diagram, drag a Dependency shape onto the drawing page. 2. Glue the Dependency endpoint without an arrowhead to a connection point on the package that will reference the classes in another package.

3. Glue the Dependency endpoint with an arrowhead to a connection point on the package that contains the target classes that will be referenced. 4. Double-click the Dependency shape to open the UML Dependency Properties dialog box. 5. Under Name, type a name for the dependency. Under Stereotype, choose Import, and then click OK. Connecting packages with an <<import>> dependency only indicates that classes can be referenced. You still need to set the appropriate visibility for the target classes. Show the implementation of a type by an implementation class 1. In a static structure diagram, drag a Class shape onto the drawing page. Double-click the shape. 2. In the UML Class Properties dialog box, click Class and type a name for the class. Under Stereotype, choose Type, and then click OK. 3. Drag a second Class shape onto the drawing page. Double-click the shape. 4. In the UML Class Properties dialog box, click Class and type a name for the class. Under Stereotype, choose Implementation Class, and then click OK. 5. Right-click the implementation class and click Shape Display Options. In the UML Shape Display Options dialog box, under General Options, select Realization Link, and then click OK. 6. Drag the control handle on the implementation class shape to create a connector representing a realizes relationship. 7. Glue the endpoint on the realization connector arrowhead to a connection point on the Class shape representing the type. Design of UML Static Structure (Domain Model continued): 4. Double-click each shape to open its UML Properties dialog box, where you can add attributes, operations, and other properties. 5. Right-click each class or object shape, and then click Shape Display Options to select which properties to display on the shape and which compartments of the shape to suppress (such as attributes, operations, and template parameters). 6. Indicate relationships between the classes and objects using Association, Link, Dependency, Generalization, or Composition shapes. Work with associations in UML static structure diagrams Add adornments to association ends 1. In a static structure diagram, double-click a Binary Association, Association Class, or N-ary Association shape. 2. Under Association Ends, select the end to which you want to add adornments, and then click Properties. You can directly edit commonly used property settings in the Association Ends list by clicking a field, and then typing or selecting a value.

3. Click Association End, and type or choose the end name, multiplicity, navigability, aggregation and other options you want, and then click OK. 4. Repeat steps 2 and 3 for each association end that you want to edit. 5. Type or choose the properties options you want in the Association category and other categories, and then click OK. Add qualifiers to an association 1. Double-click the Binary Association, Association Class, N-ary Association, or N-ary Association Class shape you want to add a qualifier to. 2. Under Association Ends, select the association end you want to add a qualifier to, and then click Properties. 3. Click Qualifier Attributes, click New, and then click Properties. 4. Type or choose values for the qualifier properties you want. 5. Continue to click OK until the UML Properties dialog box closes. A small rectangle is added to the association end with the qualifier. Indicate a composition relationship between classes 1. Drag a Composition shape from UML Static Structure onto the drawing page near the classes you want to relate. 2. Glue the endpoint near the diamond to a connection point on the class the other element is a component of. Glue the endpoint without a diamond to a connection point on the class that is a component. 3. Double-click the Composition shape to add a name and other adornments to the association ends. 4. Click OK. You can also indicate composition by adding adornments to the association ends of a Binary Association, Association Class, or N-ary Association shape. Double-click the shape. Select the end to which you want to add a composition diamond, and then click Properties. Click Association End and under Aggregation choose Composite. Click OK, and then click OK again. Indicate an association between three or more classes 1. Drag an N-ary Association shape from UML Static Structure onto the drawing page near the classes you want to relate. 2. Double-click the N-ary Association shape to open its UML Properties dialog box. Under End Count, set the number of association ends you want, type or choose the other property values you want, and then click OK. 3. Glue the endpoints on the association ends to connection points on the classes you want to relate.

Indicate an association between two classes 1. Drag a Binary Association or Association Class shape from UML Static Structure onto the drawing page near the classes you want to relate. 2. Glue the endpoints on the association shape to connection points on the class shapes. 3. Double-click the Association shape to open its UML Properties dialog box, and then type or choose the property values you want. 4. Click OK. Indicate an association that has class properties 1. In a static structure diagram, drag an Association Class or N-ary Association Class shape onto the drawing page. 2. Glue the endpoints on the association ends to connection points on two or more class shapes. 3. Double-click the Association Class shape, and in the UML Association Class Properties dialog box type a name for the association class. 4. Click Association Ends, and select the end to which you want to add adornments, and then click Properties. 5. Click Association End, and type or choose the end name, multiplicity, navigability, aggregation and other options you want, and then click OK. 6. Repeat steps 4 and 5 until you've added adornments to all the ends, and then click OK. Set the number of ends on an n-ary association or association class 1. In a static structure diagram, double-click the N-ary Association or N-ary Association Class shape with ends you want to set. 2. Click Association Class, and under End Count, choose the number of ends you want, and then click OK. Work with dependencies in UML static structure diagrams: Bind template parameters to classes 1. Drag a Bound Element shape from UML Static Structure onto the drawing page near the Parameterized Class shape with parameters you want to bind. 2. Drag a Binding shape onto the drawing page and glue the endpoint without an arrowhead to a connection point on the bound element. 3. Glue the Binding endpoint with an arrowhead to a connection point on the Parameterized Class shape. 4. Double-click the Binding shape, and then click Bound Arguments. 5. Under Bound Arguments, select a parameter to which you want to bind a type (if the parameter has no type specified) or select a value (if the parameter has a type specified). Click Properties, choose the type or type the value you want, and then click OK. 6. Click OK to close the UML Binding Properties dialog box.

Attributes and operations associated with the parameterized class are passed to the bound element. Unbound parameters (with no specified type) that you have assigned to the class as attribute types or operation return types, are replaced in the bound element by the types you specified in step 5 above. Indicate a dependency relationship between UML elements 1. Drag a Dependency shape from UML Static Structure, UML Deployment, or UML Component onto the drawing page and place it near the elements you want to relate. 2. Glue the endpoint with an arrowhead to a connection point on the element the other element depends on. Glue the endpoint without an arrowhead to a connection point on the element that depends on the other element. 3. Double-click the dependency to add a name, stereotype, and other properties. If you want to indicate a trace, refinement, usage, or binding dependency, you can use the Trace, Refinement, Usage, or Binding shapes from the UML Static Structure stencil. Indicate that classes in a package may be referenced 1. In a package diagram, drag a Dependency shape onto the drawing page. 2. Glue the Dependency endpoint without an arrowhead to a connection point on the package that will reference the classes in another package. 3. Glue the Dependency endpoint with an arrowhead to a connection point on the package that contains the target classes that will be referenced. 4. Double-click the Dependency shape to open the UML Dependency Properties dialog box. 5. Under Name, type a name for the dependency. Under Stereotype, choose Import, and then click OK. Connecting packages with an <<import>> dependency only indicates that classes can be referenced. You still need to set the appropriate visibility for the target classes. Work with generalizations in UML static structure diagrams: Add a discriminator label to a generalization 1. In a static structure diagram, double-click the Generalization shape you want to add a discriminator to. 2. In the UML Generalization Properties dialog box, for Discriminator, type the name of the discriminator you want, and then click OK. Indicate a generalization relationship between UML elements 1. Drag a Generalization shape from the UML Static Structure stencil onto the drawing page near the classes or packages you want to relate. 2. Glue the endpoint near the arrowhead to a connection point on the more general element. Glue the endpoint without the arrowhead to a connection point on the more specific element.

3. Double-click the Generalization shape. In the UML Generalization Properties dialog box, add a name, stereotype, discriminator, and other property values, and then click OK. To indicate a generalization for an association, use the Association Class shape rather than the Binary Association shape. Work with links in UML static structure diagrams: Indicate a link between three or more objects 1. Drag an N-ary Link shape from the UML Static Structure stencil onto the drawing page near the objects you want to relate. 2. Double-click the N-ary Link shape to open its UML Properties dialog box. Under LinkEnd Count, set the number of link ends you want. Type or choose the other property values you want, and then click OK. 3. Glue the endpoints on the link ends to connection points on the objects you want to relate. Indicate a link between two objects 1. Drag a Link shape from the UML Static Structure stencil onto the drawing page near the objects you want to relate. 2. Glue the endpoints on the link to connection points on the objects. 3. Double-click the Link shape to open the UML Link Properties dialog box, and then type or choose the property values you want. 4. Click OK. Design of UML Static Structure (Domain Model continued): 7. Double-click each relationship shape (Association, Link, Dependency, Generalization, or Composition) to open its UML Properties dialog box, where you can add association end adornments and other properties. Design Class Diagram: In design class diagram, we display the attribute types, the methods or functions and also additional classes related to the programming perspective. In order to display the attribute types, methods or functions: 1. Select the class. 2. Right click on it and the unselect the attribute type from the UML Shape Display Options dialog box to enable the attribute types. 3. To enable the methods or functions click on Operations on the suppress category of UML Shape Display Options dialog box.

UML Static Structure (Design Class Diagram) Example:

1. To add attributes, operations, and other properties to class shapes, double-click a shape to open the UML Class Properties dialog box. 2. Double-click an association to add adornments, such as multiplicity and navigability. 3. In addition to the name and type shown here, attributes can also include visibility, an initial value, and specify whether the scope is class or instance. 4. Define the parameters of an operation fully in a diagram when you want to communicate detailed programming specifications.

UML Sequence Diagram: 1. On the File menu, point to New, point to Software and Databases, and then click UML Model Diagram. 2. In the Shapes tab, select UML Sequence from the menu. Then in the left all the items related to Sequence Diagram will appear. Select any item you want to include the sequence diagram. The workspace displays 'Sequence' as a watermark. An icon representing the diagram is added to the tree view. 3. For each object involved in the interaction the sequence diagram represents, drag an Object Lifeline shape onto the drawing page. Adjust the lengths of the lifelines to correspond to the lengths of the objects' lives in the interaction, and add destruction markers to lifelines for objects that are destroyed. Object Lifeline shape Indicate that an object in a sequence diagram is destroyed 1. In a sequence diagram, drag an Object Lifeline shape onto the drawing page to represent an object that is destroyed during the interaction the sequence diagram represents. 2. Right-click the Object Lifeline shape, click Shape Display Options, and then select Destruction marker. Note: To apply this change only to the selected shape, clear the option Apply to the same selected UML shapes in the current drawing window page in the UML Shape Display Options dialog box. A black X appears at the end of the object's lifeline. 4. Double-click an Object Lifeline shape. In the UML Classifier Role Properties dialog box, click ClassifierRole. Do one of the following: 1. Under Classifier, choose the classifier the object represents, and then click OK. 2. Click New to create a new classifier in the system. The appearance of the object icon may change to reflect the classifier you chose. 5. To indicate when an object is performing an action, drag an Activation shape onto the object's lifeline. Glue the endpoints of the Activation shape to connection points on the Object Lifeline shape. Adjust the length of the activation rectangle to correspond to the object's period of activity.

continued on the next page

Activation shape Indicate transition times on a sequence diagram 1. In the tree view, double-click the icon representing the sequence diagram to which you want to add transition times. The drawing page with the sequence diagram appears. 2. On the toolbar, select the Text tool . 3. On the drawing page, click where you want to add the name of the message instance, which represents the time the message is sent, and then type the name. Usually, the name appears in the left margin of the diagram aligned with the message to which it applies. The name can be a simple letter, such as a or b. 4. On the toolbar, select the Pointer tool . 5. Drag a Constraint shape onto the drawing page near the message name. Double-click the shape, and under Body, type any constraint information relevant to the message time (for example, b - a < 1 sec). Click OK. If the delivery of a message is not instantaneous, slant the message line and name the time the message is received with the same letter as the time the message is sent, but add a prime (for example, a for the time sent and a' for the time received).

A sequence diagram with named times for when messages are sent and received. Show conditionality on a sequence diagram object 1. In a sequence diagram, drag a Lifeline shape onto the drawing page near the object lifeline on which you want to show conditionality. 2. Glue the endpoints of the Lifeline shape to connection points on the Object Lifeline shape. To extend the conditional lifeline, drag a control handle on the Lifeline shape. 3. Double-click the Lifeline shape to open its UML Properties dialog box where you can add a name and other property values to the lifeline.

You can also glue the endpoints of a Lifeline shape to connection points on an Activation shape associated with an object lifeline. 2. Use Message shapes to indicate communication between the objects. Message shapes Indicate a message between objects on a sequence diagram 1. In a sequence diagram, drag a Message shape onto the drawing page. The message shape you choose depends upon the kind of message you want to send (regular, asynchronous, procedure call, or return). 2. Glue the message endpoint without the arrowhead to a connection point on the lifeline of the object sending the message. 3. Glue the message endpoint with the arrowhead to a connection point on the lifeline of the object receiving the message. 4. Double-click the message and then type or choose the message name, stereotype, sequence expression, and flow kind. 5. For a flat message or procedure call, choose the operation you want the message to generate. If the operation doesn't exist, click New to create it. For an asynchronous message, choose the signal you want the message to generate. If no reception for the signal exists on the classifier that the object lifeline receiving the message is based on, click New to create the reception. To indicate a message from an object to itself, glue the two endpoints on an arc-shaped Message shape to two connection points on the same object lifeline. 3. Double-click any shape to open its UML Properties dialog box, where you can add a name and other property values. 4. Save the diagram.

continued on the next page

Sequence Diagram Example:

The vertical dimension in a sequence diagram represents time, with time proceeding down the page. The horizontal dimension represents different actors or objects. 1. Objects are represented as object lifelines, that is, in terms of their existence at a particular time. Adjust line length to indicate an object's creation or destruction. 2. Arrows represent messages between objects. An object can also send a message to itself. 3. Add an activation (also called a focus of control) to a lifeline to indicate the time period during which an object is performing an action. 4. A return message is shown as a dashed line.

Conceptual and Logical Design of Database: With the Database Model Diagram template, you can create a new model or reverse engineer an existing database into a model by using either the relational or object relational modeling concepts. Use the Entity Relationship stencil to model databases that are based on the SQL92 and earlier standards. Use the Object Relational stencil, which has additional shapes for working with types, to model databases that are based on SQL99 and later standards. This article describes how you can create a database model and what you can do with the model after you create it. Can't find the database model features? Not every edition of Microsoft Visio has the database model feature. If you cannot find the features described in the procedures in this article, most likely you have an edition of Visio that does not include them.

Microsoft Visio Standard does not include the Database Model Diagram template. Microsoft Visio Professional and Premium editions support the reverse engineering features for the Database Model Diagram template (that is, using an existing database to create a model in Visio), but it does not support forward engineering (that is, using a Visio database model to generate SQL code).

Microsoft Visio has removed the traditional Entity Relationship Diagram symbols which are used for conceptual design; the database model diagram is the logical design which we are more familiar as the Relational Schema Diagram. In order to design the conceptual diagram which is our old Entity Relationship Diagram, we need to download proper stencil. Conceptual Design (Entity Relationship Diagram ERD): The conceptual design has been removed from Visio 2010, in order to do that, you need to download the proper stencil from the internet and place them in you desired folder in the designs. The downloaded stencil here is named as ERD Stencil Mini. 1. On the File click Software and Database, and then double-click Database Model Diagram. 2. On the left, in the Shapes the tree view, left-click on More Shapes, scroll down to Software and Database, select ERD Stencil Mini from the down menu. Then in the left all the items related to ERD will appear. Design of Entity Relationship Diagram: 1. 2. 3. 4. From the ERD stencil mini, drag an Entity shape onto the drawing. Double-click the shape to open the Database Properties window. Type a name for the entity. Drag attributes (oval shaped) connect them properly. Click on them and write names. multivalued and derived attributes are also available. 5. Drag another entity and type names. 6. Drag the diamond shaped relationship symbol and join the two or more entities. Weak relation is also available. 7. The joining can be done by the appropriate cardinality ratio joiners from the stencil menu like 1 to 1, 1 to many and many to many.

Logical Design (Relational Schema): The logical design is named as Entity Relationship Diagram in Visio 2010, which is basically the relational schema. 1. To start your database model diagram, do one of the following: Create a new model diagram from scratch

If you don't have an existing database that you want to use as a starting place, you can start with a blank Database Model and add your own tables and relationships. 1. 2. 3. 4. Click the File tab. Click New, click Software and Database, and then double-click Database Model Diagram. On the Database tab, in the Manage group, click Display Options. In the Database Document Options dialog box, select the symbol set that you want to use and other table and relationship options, and then click OK.

Use an existing database as a starting point If you have a database that you want to model so that you can understand it better or use it as a starting place for a new model, you can use the Reverse Engineer Wizard to extract the schema, or structure, of the database and build a new model. Before you start the wizard:

If you are reverse engineering a Microsoft Excel workbook, before you start the wizard you need to open the workbook and name the group (or range) of cells that contains the column headings. If you want to use more than one worksheet, just name the group of column cells in each worksheet. These ranges are treated like tables in the wizard. For more information about how to name a range of cells, see the topic in your Excel help titled Define named cell references or ranges. For best results, set your default driver to the target database that you want to reverse engineer before you run the Reverse Engineer Wizard. This step ensures that the wizard maps the native data types correctly and that all the code that is extracted by the wizard is correctly displayed in the Code window. Click the File tab. Click New, click Software and Database, and then double-click Database Model Diagram. On the Database tab, in the Model group, click Reverse Engineer. On the first screen of the Reverse Engineer Wizard, do the following: 1. Select the database driver for your database management system (DBMS). If you have not already associated the Visio database driver with a particular ODBC data source, click Setup. Note: If you are reverse engineering an Excel worksheet, choose the ODBC Generic Driver. 2. Select the data source of the database that you are updating. If you have not already created a data source for the existing database, click New to do so now. When you create a new source, its name is added to the Data Sources list. 3. When you are satisfied with your settings, click Next.

1. 2. 3. 4.

5. Follow the instructions in any driver-specific dialog boxes.

For example, in the Connect Data Source dialog box, type the user name and password, and then click OK. Note: If you use the ODBC Generic Driver, you may receive an error message that indicates that the reverse engineered information may be incomplete. In most cases, this is not a problem just click OK and continue with the wizard. 6. Select the check boxes for the type of information that you want to extract, and then click Next. Note: Some items may be unavailable (appear grayed out) because not all database management systems support all the kinds of elements that the wizard can extract. 7. Select the check boxes for the tables (and views, if any) that you want to extract, or click Select All to extract them all, and then click Next. Note: If you are reverse engineering an Excel worksheet and don't see anything in this list, it is likely that you need to name the range of cells that contains the column headings in your worksheet. 8. If you selected the Stored Procedures check box, select the procedures that you want to extract, or click Select All to extract them all, and then click Next. 9. Select whether you want the reverse engineered items to be added automatically to the current page. Note: You can choose to have the wizard automatically create the drawing, in addition to listing the reverse engineered items in the Tables and Views window. If you decide not to have the drawing created automatically, you can drag the items from the Tables and Views window onto your drawing page to manually assemble the database model. 10. Review your selections to verify that you are extracting the information that you want, and then click Finish. The wizard extracts the selected information and displays notes about the extraction process in the Output window. Import and refine an existing model If you have an existing VisioModeler or PLATINUM ERwin model, you may be able to import it to create a Visio database model diagram. This ability is limited to only VisioModeler 2.0 or later dictionary model (.imd) files and PLATINUM ERwin 2.6, 3.0, and 3.52 .erx files. 1. 2. 3. 4. Click the File tab. Click New, click Software and Database, and then double-click Database Model Diagram. On the Database tab, in the Model group, click Import, and then click the model type. Type the path and file name for the model that you want to import, or click the Browse button to locate the model file, and then click Open.

5. In the Import dialog box, click OK. Visio imports the file and displays its progress in the Output window. The imported tables are displayed in the Tables and Views window. 6. In the Tables and Views window, select the tables that you want to model, and then drag them onto the drawing page.

Design of Relational Schema Diagram: 1. After you create a database model diagram, the work of refining the diagram begins. You can add and customize tables and views, create relationships, and customize columns and data types. Tables Use the Entity shape to create a table in your diagram. 1. From either the Entity Relationship or Object Relational stencil, drag an Entity shape onto the drawing. 2. Double-click the shape to open the Database Properties window. 3. Under Categories, click Definition and type a name for the table. 4. Under Categories, click Columns, type a name, and choose a data type. 5. Select the Req'd check box for columns that can't have null values. 6. Select the PK (primary key) check box for columns that uniquely identify each row in the database table. 7. Under Categories, click Indexes, Triggers, Check, or Extended to create these optional elements. Columns Use the Database Properties window to add or change properties for columns, including data types and primary keys. Double-click the table in your diagram. In the Database Properties window, under Categories, click Columns. Click in the first empty Physical Name cell, and type a name. To change the data type for a column, click the column's Data Type field, and then select a data type from the list or type it into the list. For example, you can type decimal(8,2) or char(30). 5. To prevent null values, select the Req'd check box. 6. To specify that the column is a primary key, select the PK check box. 7. To see more column properties in addition to those that appear when you click the Columns category, select the column and then click Edit. 1. 2. 3. 4.

Relationships Relationships use primary and foreign keys to allow databases to match a row in one table with a row in a related table. You can show those relationships in your diagram. In addition, you can set their cardinality (for example, one-to-many) and use either Crow's feet, Relational, or IDEF1X notation to show the cardinality. You can't show many-to-many relationships with any of these notations in the Database Model Diagram template. 1. Create a relationship between tables: 1. Make sure that both tables are visible in the diagram. If you reverse engineered the model from an existing database, you may need to drag one or both from the Tables and Views window onto the drawing page. 2. Double-click the table that you want for the primary key side of the relationship. 3. In the Database Properties window, under Categories, click Columns. 4. In the grid, click the column that you want to use to uniquely identify each row in the table, and select the PK check box to set it as the primary key. 5. From the Object Relational or Entity Relationship stencil, drag a Relationship shape and drop it onto a blank space on the page. 6. Connect the higher end to the table with the parent table. 7. Connect the other end to the child table. If the second table doesn't already contain a column with the same name as the primary key, the modeler adds it to the second table as a foreign key. Note: If relationship lines disappear, on the Database tab, in the Manage group, click Display Options. On the Relationships tab, under Show, select the Relationships check box. 1. Set the relationship's cardinality: 1. Double-click the relationship. 2. In the Database Properties window, under Categories, click Miscellaneous. 3. Under Cardinality, choose the cardinality that best fits the relationship. For one-tomany relationships, the best choice is either Zero or more or One or more. For one-toone relationships, the best choice is either Zero or one or Exactly one.

Design of Relational Schema Diagram (continued): 2. To make other refinements to your diagram (such as creating indexes, check clauses, and triggers) you can do the following: Create indexes Indexes improve the performance, or speed, of your database when you run a query. 1. Open the database model diagram.

2. Double-click the table to which you want to add an index, and in the Database Properties window, in the Categories list, click Indexes. 3. Click New. 4. In the Create Index dialog box, type a name for the index, and then click OK. 5. In the Index Type list, select an option to create a unique or non-unique index. 6. In the Available Columns list, select the name of each column that you want to include in this index, and then click Add >. 7. In the Indexed Columns list, select the Asc check box to create an index that has an ascending sort order, or clear the check box to create an index that has a descending sort order. The database model diagram is updated. Create views You can think of a view as a saved query. Views are particularly handy if you need to repeatedly access the same information from multiple tables, or if you want to expose the data to users without letting them change the actual tables. From the Entity Relationship or Object Relational stencil, drag a View shape onto the drawing page. Set extended properties for tables and views Depending on your database management system (DBMS), you may be able to set extended properties for tables or views to determine where they are stored. Double-click the table or view whose extended properties you want to set, and in the Database Properties window, in the Categories list, click Extended. Create check clauses Use check clauses to ensure that the data that is entered into a column is within a particular range of values. For example, you can create a check clause that requires the data in a column called "Age" to be over 65. 1. Double-click the table to open the Database Properties window. 2. Under Categories, click Columns and then click the column that you want to add a check clause to. 3. Click Edit. 4. On the Check tab of the Column Properties dialog box, enter the constraints that you want. The check clause is added to the Code window under Local code.

Create stored procedures and user-defined functions Use stored procedures and user-defined functions to create packets of code that you can reuse to perform the same actions repeatedly. The major difference between the two is that a userdefined function returns a value, whereas the stored procedure executes code without returning a value. 1. On the Database tab, in the Show/Hide group, select the Code check box to open the Code window. 2. Click Global Code and then click New. 3. On the Properties tab of the Code Editor, click the kind of code that you want to create, and type a name for the code. 4. On the Body tab, type the code and then click OK. Create triggers Triggers cause SQL code that you specify in the trigger to run when a particular event occurs in the database. 1. 2. 3. 4. Double-click the table to open the Database Properties window. Under Categories, click Triggers, and then click Add. On the Properties tab, type a name for the trigger. On the Body tab, type the code and then click OK.

The trigger is added to the Code window under Local code.

Android User Interface Prototype Design: In order to design android user interface prototype in Visio one needs to download a stencil from the following link: Free Stencil for Android UI Prototype: http://www.artfulbits.com/Android/Stencil.aspx After downloading it place it inside the design shapes folder, which is inside the my documents folder.

Instead of images/icons for the buttons the design uses Wingdings font symbols. These fit very nicely for prototyping. There is an added special stencil with Android icons for easier style and feel creation. 1. On the File menu, point to New, point to Software and Databases, and then click Wireframe Diagram. 2. In the Shapes tree view, left-click on More Shapes, scroll up to Android User Interface, select the desired android stencil for the menu, like for example Stencil_Android_Icons Then in the left all the items related to android prototype design will appear. Select any item you want to include the design. 3. Drag all you desired items, and design the way you wish. 4. To edit complex controls, like: image buttons, context menus, tab controls use double click.

5. Calibri is a default font for Android UI, but Arial & Arial Narrow fonts also make weather on several screens. 6. Frames sizes are in inches, but they are accurate - DPI metric has been used for transforming inches to pixels. 7. The designers of the stencil do not want to make elements 100% the same as Android has. Two reasons: Do not allow producing fake screens for community - the prototypes must be recognizable between others. Note, this is just prototyping. The prototype will not be the same as the final UI screen

Android User Interface Prototype Example:

References A beginner's guide to Visio 2010 - Visio - Office.com. n.d. 28 February 2012 <http://office.microsoft.com/en-us/visio-help/a-beginner-s-guide-to-visio-2010HA010357067.aspx?CTT=1>. Artfulbits. n.d. 28 February 2012 <http://www.artfulbits.com/products/free/aiprototyping.aspx>. Support - Office.com. n.d. 28 February 2012 <http://office.microsoft.com/en-us/support/?CTT=97#>.