Walkthrough: Designing Application Systems by Using a Top-Down Approach
This walkthrough guides you through designing an application system by using a top-down approach.
In this walkthrough, you will complete the following tasks:
Create a new system design solution.
Represent and expose behavior for the system definition as a Web service.
Define an operation for the new Web service.
Add two new systems as members to a system definition.
Rename the new systems.
Add a Web service to a member of the system definition.
Connect the two systems in the system definition.
Delegate the system definition's behavior to a member.
Continue designing the members of the system definition.
Implement the underlying application definitions.
Create a new system design solution
You will begin designing a system by using a top-down approach. You will perform this task by creating a new system design solution. By default, this solution contains a blank system diagram and application diagram. The system diagram displays a blank system definition. The application diagram will display the definitions of any applications that you add as members to the system definition.
To create a new system design solution
On the File menu, point to New, and click Project.
The New Project dialog box appears.
In the New Project dialog box, click Distributed Systems under Project Types.
Under Templates, click System Design.
Name the solution StoreFrontSystem.
Enter a location to save that solution.
Visual Studio creates the solution. System Designer opens and displays a system diagram. Application Designer opens the application diagram in the background.
You will now represent and expose the behavior of the system definition as a Web service.
Represent and expose behavior for the system definition as a Web service
You will define and expose behavior for the system definition as a Web service. You will perform this task by adding a .NET Web Service provider endpoint to the system definition. This action also lets you connect this system to members in other system definitions.
To add a Web service to a system definition
Click StoreFrontSystem on the system diagram.
On the Diagram menu, point to Add, then Endpoint, and click .NETWebServiceEndpoint.
A .NET Web Service provider endpoint named WebService1 appears on StoreFrontSystem.
Click WebService1 on StoreFrontSystem.
On the View menu, click Properties Window.
The Properties window appears.
In the Properties window, use the Name property to name the endpoint CatalogService.
Note
When you add an endpoint to a system definition, that endpoint also appears on any uses of that definition in other system definitions. If you delete an endpoint from a system definition, you will delete it from all uses of that definition in other system definitions.
You will now define a Web service operation and its parameters for CatalogService.
Define an operation for the new Web service
You will define an operation for the CatalogService Web service by using the Web Service Details window. Operations describe the method names, parameters, and other operation-related information for a Web service.
Note
By default, Visual Studio sets the language for a Web service endpoint on a system definition to Visual Basic. You will choose the actual implementation language for this endpoint when you delegate the endpoint's behavior to an application.
To add an operation to a Web service endpoint
Click the CatalogService endpoint on StoreFrontSystem.
On the Diagram menu, click Define Operations.
The Web Service Details window appears.
In the Web Service Details window, click <add operation>, add an operation named GetCatalog, and press TAB.
In the Type box, type Catalog and press ENTER.
Note
Catalog is a custom type that you can define after you delegate the endpoint to an ASP.NET Web application and implement that application.
Expand the operation node, click <add parameter>, add a parameter named CatalogName, and press TAB.
In the Type box, type String, and press TAB.
Note
Visual Studio displays a list of available types when you begin typing in the Type box.
In the Modifier box, select ByVal, and press ENTER.
You will now add new members to StoreFrontSystem.
Add two new systems as members to a system definition
You will add two new systems as members to the StoreFrontSystem system definition. Visual Studio adds a new system diagram (.sd) file to your solution for each new system you add to a system definition. Each system diagram contains the definition of each new system.
To add new systems to a system definition
Click StoreFrontSystem on the system diagram.
On the Diagram menu, point to Add, then System, and click Blank System.
A new system named System1 appears as a member inside StoreFrontSystem. A new system diagram (.sd) file appears in your solution and opens in the background.
Add a second blank system named System2.
You will now rename these new members.
Rename the new systems
You will rename the two new systems and their underlying definitions.
To rename new members
Click System1 inside StoreFrontSystem.
On the Diagram menu, click Rename.
The Rename dialog box appears.
In the Rename dialog box, select the Rename Definition check box (if it is not selected).
In the Member Name box, name the member OrderSystem and click OK.
The member and its definition display the new name.
Note
Visual Studio will not update the names of the diagram files that contain the underlying definitions.
Rename System2 as CatalogSystem.
You will now represent and expose the behavior of a member as a Web service.
Add a Web service to a member of the system definition
You will represent and expose behavior for a member of StoreFrontSystem as a Web service. You will perform this task by adding a .NET Web Service provider endpoint to that new member. This action also lets you connect that member to other members in StoreFrontSystem.
To add a Web service to a member
Click the OrderSystem system.
On the Diagram menu, point to Add, and click .NETWebServiceEndpoint.
A .NET Web Service provider endpoint named WebService1 appears on OrderSystem and its underlying definition.
Click WebService1 on OrderSystem.
In the Properties window, use the Name property to name the endpoint OrderService.
Note
When you add an endpoint to a member, that endpoint also appears on the member's underlying definition. The endpoint also appears on any uses of that definition in other system definitions. Once you add an endpoint to a member, you cannot remove it directly from that member. To remove an endpoint from a member, you must delete it from the member's definition. This action also removes the endpoint from all uses of that definition. This requirement emphasizes how this change to a member's definition affects the uses of that definition in other system definitions.
You will now define communication pathways between the members of StoreFrontSystem.
Connect the two systems in the system definition
You will define the communication pathways used between the members of a system definition at deployment. You will perform this task by connecting the two systems in StoreFrontSystem. This connection will describe a provider and consumer relationship between these two systems.
To connect the members of a system definition
Click the OrderService endpoint on OrderSystem.
On the Diagram menu, click Connect.
The Create Connection dialog box appears.
Under Connect to, select CatalogSystem from the Member list, and click OK.
A connection appears between OrderSystem and CatalogSystem. A Web service consumer endpoint also appears on CatalogSystem and is connected to OrderService. This consumer endpoint also appears on the underlying definition of CatalogSystem.
You will now delegate the behavior of the StoreFrontSystem system definition to one of its members.
Delegate the system definition's behavior to a member
You will choose the member that will provide the system definition's behavior at deployment. You will perform this task by delegating the behavior of the system definition to one of its members. Specifically, you will delegate the behavior of the CatalogService Web service to CatalogSystem. This action replaces the Web service endpoint on the system definition with a proxy endpoint. The Web service endpoint reappears on the member. Both endpoints will connect to each other.
Note
The Web service endpoint also appears on the underlying definition of CatalogSystem because that endpoint becomes part of that member's definition.
To delegate a system definition's behavior to a member
Click CatalogService on StoreFrontSystem.
On the Diagram menu, click Delegate.
The Delegate Behavior to System Member dialog box appears.
Under Delegate to, select CatalogSystem from the Member list, and click OK.
CatalogService now appears on CatalogSystem. A proxy endpoint appears in the previous location of CatalogService and has the same name. This proxy endpoint connects to CatalogService and exposes its behavior outside the system.
Continue designing the members of the system definition
You will continue designing the members of StoreFrontSystem. You will perform this task by adding ASP.NET Web applications to the definitions of CatalogSystem and OrderSystem. These applications will provide behavior for those system definitions. You will then delegate the behavior of those system definitions to those applications.
To continue designing members of a system definition
Click CatalogSystem on the system diagram.
On the Diagram menu, click Open in System Designer.
The system diagram that contains the definition of CatalogSystem opens.
On the Diagram menu, point to Add, then Application, and click ASP.NETWebService.
A new ASP.NET Web application named WebApplication1 appears inside CatalogSystem. Visual Studio also adds the definition for this application to the application diagram in your solution.
Delete the WebService1 endpoint.
Name the application CatalogManager.
Click CatalogService on CatalogSystem, and then click Delegate on the Diagram menu.
The Delegate Behavior to System Member dialog box appears.
Under Delegate to, select CatalogManager, and click OK.
CatalogService now appears on CatalogManager. You will later implement the definition of CatalogManager to continue defining the behavior of CatalogService in code.
Click the consumer endpoint on CatalogSystem.
Delegate the consumer endpoint to CatalogManager.
CatalogManager can now communicate outside of CatalogSystem.
Click the StoreFrontSystem.sd document tab to view the system diagram for StoreFrontSystem.
Repeat steps 1-3 for OrderSystem and name the application OrderManager.
Delegate the OrderService endpoint to OrderManager.
Click the StoreFrontSystem.sd document tab to view the system diagram for StoreFrontSystem.
The CatalogManager application in CatalogSystem now communicates with the OrderManager application in OrderSystem through the proxy endpoints on each system. In addition, CatalogManager provides behavior for StoreFrontSystem through the proxy endpoint on that system.
Implement underlying application definitions
You will continue defining the behavior of CatalogSystem and OrderSystem. You can perform this task by first connecting the underlying definitions of CatalogSystem and OrderSystem and then implementing them. When you implement application definitions, Visual Studio generates projects in your solution so that you can continue defining their behavior in code.
Note
You must connect application definitions before you implement them. This enables Visual Studio to correctly generate any needed Web service client proxy classes.
To connect and implement application definitions
Click the StoreFrontSystem.ad document tab to view the application diagram.
Application Designer displays the application diagram, which contains the application definitions for CatalogManager and OrderManager.
Connect the consumer endpoint on CatalogManager to the OrderService endpoint on OrderManager.
Note
Visual Studio does not connect application definitions when you connect their uses in system definitions. Connections on the application diagram represent communication pathways in the development environment, while connections on system diagrams represent communication pathways in the deployment environment.
In the Properties window, set the Template property for CatalogManager and OrderManager to ASP.NET Web Application.
On the Diagram menu, point to Implementation, and click Implement All Applications.
Visual Studio generates the corresponding projects in your solution so that you can continue defining CatalogManager and OrderManager in code.