{"id":1553,"date":"2009-11-17T11:36:00","date_gmt":"2009-11-17T11:36:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/odatateam\/2009\/11\/17\/introducing-the-microsoft-open-data-protocol-visualizer-ctp1\/"},"modified":"2009-11-17T11:36:00","modified_gmt":"2009-11-17T11:36:00","slug":"introducing-the-microsoft-open-data-protocol-visualizer-ctp1","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/odata\/introducing-the-microsoft-open-data-protocol-visualizer-ctp1\/","title":{"rendered":"Introducing the Microsoft Open Data Protocol Visualizer (CTP1)"},"content":{"rendered":"

1. Introduction<\/H3>\n

The Open Data Protocol Visualizer for Visual Studio CTP1 (\u201cthe visualizer\u201d) is a extension that provides a read-only visualization of the types, properties, associations, and other objects in the Entity Data Model (EDM)<\/A> returned from an Open Data Protocol\u2019s metadata endpoint<\/A> (this document assumes basic familiarity with the EDM).<\/P>\n

For instructions on how to create a data service, see here<\/A>.<\/P>\n

This blog post uses a slightly modified version of a model reverse-engineered from part of the Northwind database<\/A>. For general purposes, the AdventureWorks sample database<\/A>, or any other database you choose, will work as well.<\/P>\n

2. Walkthrough<\/H3>\n

The modifications made to the Northwind model were done in order to demonstrate additional features of the visualizer. Specifically:<\/P>\n

1.<\/STRONG> The address fields in various types in the model have been replaced by the usage of a Complex Type<\/A> called \u201cAddress\u201d.
2.<\/STRONG> A subtype of Product called \u201cDiscontinuedProduct\u201d has been added.
    a.<\/STRONG> The \u201cDiscontinued\u201d property has been removed from Product.
    b.<\/STRONG> Product is mapped to the Products table with condition Discontinued=false
    c.<\/STRONG> DiscontinuedProduct is mapped to the Products table with condition Discontinued=true
3.<\/STRONG> Two function imports<\/A> have been added to the model for the \u201cEmployee_Sales_by_Country\u201d and \u201cSales_by_Year\u201d stored procedures.
4.<\/STRONG> For each stored procedure, a complex type has been created to hold its results, and a method added to the data context to enable it.<\/P>\n

The XML for this model is available for download here<\/STRONG><\/A>.<\/P>\n

2.1 Install<\/H4>\n

Launch the \u201cExtension Manager\u201d from the Visual Studio \u201cTools\u201d menu. The visualizer is available from the online gallery, and you can find it quickly by entering \u201cOpen Data Protocol\u201d into the search field:<\/P>\n

\"image\"<\/A> <\/B><\/P>\n

The visualizer is available for download from the Visual Studio Gallery here:<\/P>\n

http:\/\/visualstudiogallery.msdn.microsoft.com\/en-us\/f4ac856a-796e-4d78-9a3d-0120d8137722<\/A><\/P>\n

2.2 Setup<\/H4>\n

To get up and running:<\/P>\n

1.<\/STRONG> Create a solution containing a web application project and a console application.<\/P>\n

2.<\/STRONG> Add a new, blank ADO.NET Entity Data Model to the web application.<\/P>\n

3.<\/STRONG> Close the model.<\/P>\n

4.<\/STRONG> Right-click the model file, select \u201cOpen With\u201d and in the list, select \u201cXML Editor\u201d.<\/P>\n

5.<\/STRONG> Paste the contents of the Modified Northwind Model<\/A> into it.<\/P>\n

6.<\/STRONG> Save and close the model file.<\/P>\n

7.<\/STRONG> If you do not have it already set up, add the Northwind.MDF database to the web application\u2019s App_Data folder. <\/P>\n

8.<\/STRONG> Double-click the model file to open it with the designer.<\/P>\n

9.<\/STRONG> Right click on the designer surface and select \u201cUpdate Model from Database\u201d.<\/P>\n

10.<\/STRONG> Select the connection to Northwind.MDF, which will be automatically created for you when the MDF file is added to App_Data. If you are using your own database, you may need to create a new connection to it.<\/P>\n

11.<\/STRONG> Proceed through the update wizard, accepting all the defaults, adding no new objects. This process will set up the database connection for you in web.config. It should look like this:<\/P>\n

<<\/SPAN>add<\/SPAN> <\/SPAN>name<\/SPAN>=<\/SPAN>“NORTHWNDEntities<\/SPAN>“ <\/SPAN>connectionString<\/SPAN>=<\/SPAN>“metadata=res:\/\/*\/Model1.csdl|res:\/\/*\/Model1.ssdl|res:\/\/*\/Model1.msl;provider=System.Data.SqlClient;provider connection string=<\/SPAN>&quot;<\/SPAN>Data Source=.\\SQLEXPRESS;AttachDbFilename=|DataDirectory|\\NORTHWND.MDF;Integrated Security=True;User Instance=True;MultipleActiveResultSets=True<\/SPAN>&quot;<\/SPAN>“ <\/SPAN>providerName<\/SPAN>=<\/SPAN>“System.Data.EntityClient<\/SPAN>“ \/> <\/P><\/SPAN><\/SPAN>\n

12.<\/STRONG> Add a new WCF Data Service (in Beta2 this will show up as ADO.NET Data Service) and configure it as shown below. Note the additional web methods and the exposure of all entity sets and all service operations using the \u201c*\u201d string. This lack of security means that this is not a data service that you would want to expose publicly.<\/P>\n

using<\/SPAN> System;
<\/SPAN>using<\/SPAN> System.Collections.Generic;
<\/SPAN>using<\/SPAN> System.Data.Objects;
<\/SPAN>using<\/SPAN> System.Data.Services;
<\/SPAN>using<\/SPAN> System.Data.Services.Common;
<\/SPAN>using<\/SPAN> System.Linq;
<\/SPAN>using<\/SPAN> System.ServiceModel.Web;
<\/SPAN>using<\/SPAN> System.Web;<\/SPAN> <\/P><\/SPAN>\n

namespace<\/SPAN> NorthwindServices
<\/SPAN>{
<\/SPAN>    <\/SPAN>public<\/SPAN> class<\/SPAN> NorthwindService<\/SPAN> : DataService<\/SPAN><NORTHWNDEntities<\/SPAN>>
<\/SPAN>    <\/SPAN>{
<\/SPAN>        <\/SPAN>\/\/ This method is called only once to initialize service-wide policies.
<\/SPAN><\/SPAN>        <\/SPAN>public<\/SPAN> static<\/SPAN> void<\/SPAN> InitializeService(DataServiceConfiguration<\/SPAN> config)
<\/SPAN>        <\/SPAN>{
<\/SPAN>            <\/SPAN>config.SetEntitySetAccessRule(“*”<\/SPAN>, EntitySetRights<\/SPAN>.AllRead);
<\/SPAN>            <\/SPAN>config.SetServiceOperationAccessRule(“*”<\/SPAN>, ServiceOperationRights<\/SPAN>.All);
<\/SPAN>            <\/SPAN>config.DataServiceBehavior.MaxProtocolVersion = DataServiceProtocolVersion<\/SPAN>.V2;
<\/SPAN>        <\/SPAN>} <\/P><\/SPAN>\n

        <\/SPAN>[WebGet<\/SPAN>]
<\/SPAN>        <\/SPAN>public<\/SPAN> ObjectResult<\/SPAN><Employee_Sales_by_Country_Result<\/SPAN>> GetEmployeeSalesByCountry(DateTime<\/SPAN> start, DateTime<\/SPAN> end)
<\/SPAN>        <\/SPAN>{
<\/SPAN>            <\/SPAN>NORTHWNDEntities<\/SPAN> entities = new<\/SPAN> NORTHWNDEntities<\/SPAN>();
<\/SPAN>            <\/SPAN>return<\/SPAN> entities.Employee_Sales_by_Country(start, end);
<\/SPAN>        <\/SPAN>} <\/P><\/SPAN>\n

        <\/SPAN>[WebGet<\/SPAN>]
<\/SPAN>        <\/SPAN>public<\/SPAN> ObjectResult<\/SPAN><Sales_by_Year_Result<\/SPAN>> GetSalesByYear(DateTime<\/SPAN> start, DateTime<\/SPAN> end)
<\/SPAN>        <\/SPAN>{
<\/SPAN>            <\/SPAN>NORTHWNDEntities<\/SPAN> entities = new<\/SPAN> NORTHWNDEntities<\/SPAN>();
<\/SPAN>            <\/SPAN>return<\/SPAN> entities.Sales_by_Year(start, end);
<\/SPAN>        <\/SPAN>}
<\/SPAN>    <\/SPAN>}
<\/SPAN>} <\/P><\/SPAN>\n

13.<\/STRONG> Right click on the service and select \u201cView in Browser\u201d.<\/P>\n

14.<\/STRONG> Copy the URL shown in the browser, it should look like this: http:\/\/localhost:11968\/NorthwindService.svc<\/I><\/P>\n

15.<\/STRONG> In the console application project add a new service reference.<\/P>\n

16.<\/STRONG> Paste the URL into the \u201cAddress\u201d field. Change the \u201cNamespace\u201d to \u201cNorthwindServiceReference\u201d, as shown below.<\/P>\n

\"image\"<\/A> <\/P>\n

17.<\/STRONG> Click OK.<\/P>\n

2.3 Visualizing the Model<\/H4>\n

The visualizer consists of two main components: The diagram<\/B>, which can show all, or part of the model, as a two-dimensional graph, and the model browser<\/B>, which is a Visual Studio tool window that presents the complete contents of the model as a hierarchical tree. We begin by examining the structure and capabilities of the diagram.<\/P>\n

2.4 Launching the Visualizer<\/H4>\n

Once installed, the visualizer is launched by right-clicking any Service Reference that supports the Open Data Protocol<\/A> and selecting \u201cView in Diagram\u201d:<\/P>\n

\"image\"<\/A> <\/P>\n

This will bring up the overview screen in a new document window. This screen provides a number of quick links for rapidly creating a diagram:<\/P>\n

\"image\"<\/A> <\/P>\n\n\n\n\n\n\n\n\n\n
\n

Link<\/STRONG> \n

 <\/P><\/SPAN><\/TD>\n

\n

Behavior <\/STRONG>\n

 <\/P><\/SPAN><\/TD><\/TR>\n

\n

Data services model browser \n

 <\/P><\/SPAN><\/TD>\n

\n

Will make the model browser tool window visible. \n

 <\/P><\/SPAN><\/TD><\/TR>\n

\n

Add all namespaces \n

 <\/P><\/SPAN><\/TD>\n

\n

Adds all entity types and complex types, and by extension, all associations, to the model. \n

 <\/P><\/SPAN><\/TD><\/TR>\n

\n

Add all entity types \n

 <\/P><\/SPAN><\/TD>\n

\n

Will add all entity types, and any associations between them, to the diagram. \n

 <\/P><\/SPAN><\/TD><\/TR>\n

\n

Add all hubs \n

 <\/P><\/SPAN><\/TD>\n

\n

Will add the entity types whose number of associations is in the top 25% in the model to the diagram. This is intended to provide a useful starting point in making sense of models by adding only the most highly connected types. \n

 <\/P><\/SPAN><\/TD><\/TR>\n

\n

Add all complex types \n

 <\/P><\/SPAN><\/TD>\n

\n

Will add all complex types to the diagram. \n

 <\/P><\/SPAN><\/TD><\/TR>\n

\n

Add all associations \n

 <\/P><\/SPAN><\/TD>\n

\n

Adds all associations and their entity types to the diagram. \n

 <\/P><\/SPAN><\/TD><\/TR><\/TBODY><\/TABLE>\n

2.5 Working with a Diagram<\/H4>\n

1.<\/STRONG> Selecting \u201cadd all hubs\u201d will result in the following diagram:<\/P>\n

\"image\"<\/A> <\/P>\n

2.<\/STRONG> Deselect any selected objects (by clicking anywhere on the canvas) and right-click the \u201cEmployee\u201d shape to bring up this context menu:<\/P>\n

\"image\"<\/A> <\/P>\n

Select \u201cAdd Related Entities\u201d.<\/P>\n

3.<\/STRONG> Click on Employees again and select \u201cAdd Related Complex Types\u201d.<\/P>\n

4.<\/STRONG> Switch to the left-to-right view (Alt+Right Arrow.)
The diagram now shows all entity types related to Employee as well any complex types used by it:<\/P>\n

\"image\"<\/A> <\/P>\n

5.<\/STRONG> Multi-select Order and Product and select \u201cAdd Related Entities\u201d. At this point, most of the model will be visible in the diagram. Note that all newly added objects are now selected. This is intended to accomplish two goals: Allow easy iterative addition of related types to a model, and also make it easy to distinguish newly added types from previously added types.<\/P>\n

2.5.1 Visualizing Relationships<\/H5>\n

1.<\/STRONG> We can further simplify the rendering of the model by changing the way shapes are rendered. Right click anywhere in the diagram and unmark the \u201cExpanded Shapes\u201d checkbox command. This will hide all properties, making it easier to focus on relationships between types:<\/P>\n

\"image\"<\/A> <\/P>\n

2.<\/STRONG> Selecting an association will highlight the navigation properties that navigate it. For example, after expanding the shapes to show properties again, we select the association between Employee and Territory and see that navigation properties Employee.Territories and Territory. Employees, which traverse this association, become highlighted:<\/P>\n

\"image\"<\/A> <\/P>\n

3 Using the Model Browser<\/H3>\n

The Model Browser provides an unfiltered view of the model. Its root contains a schema node for each namespace in a model, and a node the EntityContainer.<\/P>\n

\"image\"<\/A> <\/P>\n

To show the model browser, go to the \u201cView\u201d menu item in Visual Studio and select \u201cData Services Model Browser\u201d. You can also right-click in the visualizer and select \u201cShow In Model Browser\u201d, which will bring the model browser into view and select the object under the mouse.<\/P>\n

3.1 Schema Nodes<\/H4>\n

Schema nodes show the entity types, complex types, and associations in a schema.<\/P>\n

To add a type to the diagram, expand the Entity Types node and drag and drop it onto the diagram. You can also right-click the type and click on \u201cSelect in Diagram,\u201d or double-click it. This will add the type to the diagram if it is not present, select it, and scroll the diagram to make the type shape visible.<\/P>\n

These same actions also work for complex types and associations. In the latter case, adding an association to the diagram will add both of the association\u2019s ends\u2019 entity types as well.<\/P>\n

\n

1.<\/STRONG> Clear the diagram by selecting all objects using Ctrl+A and removing them using the Delete key. <\/P>\n

2.<\/STRONG> Double-click the \u201cEmployee\u201d entity type.<\/P>\n

3.<\/STRONG> Drag and drop \u201cOrder\u201d onto the diagram. Note that the location of the drop does not matter, as the layout in the diagram is always automatic.<\/P>\n

4.<\/STRONG> Right-click the \u201cAddress\u201d complex type and click on \u201cSelect In Diagram\u201d. Finally, double-click on the \u201cFK_Orders_Shippers\u201d association. With a left to right layout, your diagram should look like this:<\/P><\/BLOCKQUOTE>\n

\"image\"<\/A> <\/P>\n

Note that the addition of the foreign key added the \u201cShipper\u201d type and selected both it and \u201cOrder\u201d, which make up both sides of the association, and also selected the two navigation properties, \u201cOrder.Shipper\u201d and \u201cShipper.Orders\u201d, which traverse this association.<\/P>\n

3.1.1 Properties<\/H5>\n

While the diagram surface does not yet allow selection of properties, the model browser does. Expand the Entity Types node, and within it, expand the \u201cCategory\u201d type. Right-click \u201cCategoryID\u201d and select \u201cView Generated Code\u201d to see the code generated for this property. Close the code, right-click \u201cCategoryID\u201d and select \u201cProperties\u201d to view the property sheet for it.<\/P>\n

3.2 EntityContainer Nodes<\/H4>\n

Expand the Entity Sets node and right-click on \u201cCategories\u201d. Selecting \u201cView Generated Code\u201d will take you to the dataServiceQuery<Category> that was generated from this entity set. Next, select \u201cGo to Entity Type\u201d, which should select the \u201cCategory\u201d type. Finally, select \u201cView in Browser\u201d which will bring up the browser and point it at http:\/\/[your server]\/NorthwindDataService.svc\/Categories. Note that selecting \u201cView In Browser\u201d on entity types, for example on \u201cCategory\u201d, will bring up the same URL, as all such queries must reference a type\u2019s entity set.<\/P>\n

3.3 The Search Bar<\/H4>\n

At the top of the model browser is the search bar. Collapse down the model browser to its root node and click the search box labeled \u201cType here to search\u201d. In the search box, type \u201ccat\u201d and hit enter or click on the icon. The search will cover all objects in the entity container and schema nodes, down to individual properties or association ends. The model browser will show the search results bar, expand all nodes with matches and highlight those matches, and provide tick marks on the scroll bar:<\/P>\n

\"image\"<\/A> <\/P>\n

Click the up\/down arrows to the right of the \u201cItems matching\u2026\u201d message to move forward and back through results. You can also click on tick marks, which will scroll the corresponding match into view and select it. When you are done, click the button at the right of the search results bar to clear out the search. You can perform this search again any time by selecting the search from the search box\u2019s drop-down search history:<\/P>\n

4. Conclusion<\/H3>\n

This walkthrough does not touch on some additional capabilities of the visualization tool, such as the ability to display data services-specific metadata. We will cover these capabilities, and others, when we release the next update to this tool.<\/P>\n

We hope you will find this tool useful and look forward to your feedback.<\/P>\n

Noam Ben-Ami & Fabian Winternitz
<\/STRONG>Microsoft<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"

1. Introduction The Open Data Protocol Visualizer for Visual Studio CTP1 (\u201cthe visualizer\u201d) is a extension that provides a read-only visualization of the types, properties, associations, and other objects in the Entity Data Model (EDM) returned from an Open Data Protocol\u2019s metadata endpoint (this document assumes basic familiarity with the EDM). For instructions on how to create […]<\/p>\n","protected":false},"author":512,"featured_media":3253,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[6,24,48],"class_list":["post-1553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-odata","tag-ado-net-data-services","tag-data-services-futures","tag-odata"],"acf":[],"blog_post_summary":"

1. Introduction The Open Data Protocol Visualizer for Visual Studio CTP1 (\u201cthe visualizer\u201d) is a extension that provides a read-only visualization of the types, properties, associations, and other objects in the Entity Data Model (EDM) returned from an Open Data Protocol\u2019s metadata endpoint (this document assumes basic familiarity with the EDM). For instructions on how to create […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts\/1553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/users\/512"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/comments?post=1553"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/posts\/1553\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/media\/3253"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/media?parent=1553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/categories?post=1553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/odata\/wp-json\/wp\/v2\/tags?post=1553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}