Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Visual Basic Lab: Data and XML Tools in Visual Studio 7 System Requirement: This lab also requires Beta2 of SQL Server 2000 to be installed. If working on a PDC lab machine, this will already be installed on the machine. This Lab focuses on a new set of tools and designers for working with Data and XML in Visual Studio 7. The first set of exercises demonstrates how to rapidly create client/server and multi-tier Windows and Web data applications using Web Services, databinding, and the new ADO+ data platform. The second set of exercises shows how to create and edit XML Data and XSD Schemas using the new XML Designer. This Lab is essential for anyone interested in building XML-enabled, distributed data applications using the new .NET platform. Estimated time to complete this lab: <75> minutes. Objectives After completing this lab, you will be able to: Create a Web Service with a method than can be called by client applications over the web via http that returns database records streamed as XML. Build data-bound Web Forms and Win Forms using ADO+ platform. Create XSD schemas and XML data documents using the XML Designer. Exercises The following exercises will allow you to become familiar with the concepts and techniques covered in this lab: Exercise 1: Build a Data Web Service This exercise covers building a middle-tier Web Service with a web method that returns relational data from a SQL database. The method can be called over the web via http by any remote client application. The Web Service uses ADO+ DataSet and DataSetCommand to load the data from the database and stream it back to the caller as XML. Exercise 2: Build a Data-Bound Web Form This exercise builds a Web Form that displays data from a table in a SQL database. The Web Form uses ADO+ DataSetCommand to load the data from the database into a typed ADO+ DataSet. The data is displayed on the web page using the Web Forms DataGrid control that is bound to the DataSet. Exercise 3: Build a Data-Bound Win Form This exercise builds a Win Form that displays data from a table in a SQL database. The form uses ADO+ DataSetCommand to load the data from the database into a typed ADO+ DataSet. The exercise uses the Data Form Wizard to create the controls that are bound to the DataSet. VB Lab: VB Data Exercise 4: Creating XSD Schemas and XML Data in the XML Designer This exercise demonstrates various features of the new XML Designer. It covers browsing and editing XML data, inferring an XSD schema for an XML document instance, and editing the schema using the Schema Designer. Exercise 5: Creating and Using an XSD Purchase Order Schema This exercise demonstrates visually creating XSD schemas using the XML Designer. The exercise covers creating elements, attributes, simpleTypes, and complexTypes. It also shows how schemas can be used to facilitate creating XML document instances, enabling features such as statement completion and validation in the XML Designer. 2 VB Lab: VB Data Exercise 1: Building a Data Web Service 1) Open Visual Studio and create a new Visual Basic Web Service project. Do this by selecting the New->Project from the File menu. Name the project "WebService1", and use the location http://localhost. This will create a new Web Service application. After the project is created, the default Web Service component in your project will open in the Component Designer. 2) Open the Server Explorer by selecting the Server Explorer command from the View menu. Right click on the Data Connection node and select the Add Connection command. In the new connection dialog, specify "localhost" (without quotes) as the SQL Server, "sa" as the user name, and leave the password blank. Select the "Northwind" database, and click OK. Visual Studio is now connected to the database. You can expand the connection in Server Explorer to the see tables, columns, views, stored procedures, and other objects in the database. 3) Open the Toolbox by selecting the Toolbox command from the View menu, and click the Data tab of the Toolbox. This tab contains various ADO+ data components and other data tools. Drag an ADODatasetCommand onto the Component Designer surface. 4) Right-click the connection and select "Configure DataSetCommand". This will launch the Configuration Wizard. 5) On the Choose Your Connection pane of the wizard, select the connection to the Northwind database you created and click the Next button. 6) On the "Choose a Query Type", leave the default option, "Use SQL Statement", selected and click the Next button. 7) On the Generate SQL Statements pane, click the SQL Builder button to launch the SQL Query Builder. Double-click the "Customers" table and close the Add Table dialog. In the Customers table, check the following columns: CustomerId, CompanyName, ContactName, and ContactTitle. The columns are added to the column grid just beneath the Table pane. In the column grid, enter "?" as the criterion for the CustomerId. Click the OK button. Your SQL command should be "SELECT CustomerId, CompanyName, ContactName, ContactTitle FROM Customers WHERE (CustomerId = ?)." If not, correct the query by typing it into the query textbox. 8) Click the Finish button. ADODataSetCommand1 is now configured, and an ADOConnection component is added to the component. 9) Now drag a second ADODataSetCommand onto the Component and launch the Configuration Wizard by right clicking on it and selecting the "Configure DataSetCommand". 10) On the Choose Your Connection pane, again use the Northwind database connection and click the Next button. 11) On the Choose Your Query, leave the default option, "Use SQL Statements", selected and click the Next button. 12) On the Generate SQL Statements pane, click the SQL Builder button to launch the SQL Query Builder. Double-click the "Orders" table and close the Add Table dialog. In the Orders table, check the following columns: OrderId, CustomerId, EmployeeId, and OrderDate. The columns are added to the column grid just 3 VB Lab: VB Data beneath the Table pane. In the column grid, enter "?" as the criterion for the CustomerId. Click the OK button. Your SQL command should be "SELECT OrderId, CustomerId, EmployeeId, OrderDate FROM Orders WHERE (CustomerId=?)." If not, correct the query by typing it into the query textbox. 13) Click the Finish button. 14) Next, you will specify a parent/child relationship between Customers and Orders tables in the two ADODataSetCommands. On the Component Designer, rightclick on ADODataSetCommand1 and select the "Relation…" command. This launches the Relationship Editor. 15) By default, the Relationship Editor specifies "CustomersOrders" as the name of the new relationship, the "Customers" table as the parent table, the "Orders" table as the child table, and "CustomerId" as the primary and foreign keys. Accept these default settings and click the OK button. You have now established a relationship between the tables in your ADODataSetCommand. 16) Select the Component Designer surface (make sure none of the components on the surface are selected). Go to the Properties Window and set the GenerateDataSet property to True. This will generate a typed ADO+ DataSet class containing a Customers and Orders table with a parent/child relationship between them. The DataSet class serves as an in memory relational cache for the Customer and Orders data. The ADODataSetCommands you configured will load data from the SQL Server database into this typed DataSet. 17) Right click on the Component Designer and select the "View Code" command. 18) Scroll to the end of the code. Just before the "End Class" statement, add the following function: Public Function <WebMethod()> GetMeData(p As String) as DataSet1 Dim ds As New DataSet1 Me.FillDataSet(ds, p) return ds End Function 19) This function instances the typed DataSet class that was generated. It then passes this DataSet to a FillDataSet method generated by the ADODataSetCommands. This method loads the records from the Customers and Orders tables in the SQL database into the corresponding tables in the typed DataSet. The value of the "p" parameter determines the value of the criteria in the parameterized queries; only records with CustomerId equal to the specified parameter value will be loaded. 20) Finally, by specifying the "<WebMethod()>" attribute, the compiler will make this method callable over the web via http. 21) Build your solution by selecting the Build Solution command from the Build menu. 22) Right-click on the WebService1.asmx file in the Project Explorer and select the View In Browser command. The Web Service will dynamically generate a web page that allows you to test your web methods. 4 VB Lab: VB Data 23) Test the Web Service from the web page by entering a valid CustomerId value (e.g., "ALFKI", "CHOPS", "DUMON", "GREAL") in the parameter text box and clicking the Invoke button. The selected customer and the orders for that customer are streamed back to the browser as XML. 5 VB Lab: VB Data Exercise 2: Build a Data-Bound Web Form Open Visual Studio and create a new Visual Basic Web Application project. 1) Select New->Project from the File menu. 2) On the New Project Dialog, select Visual Basic Projects and select the Web Application icon. 3) Name the project "WebApplication1", and use the location http://localhost. This will create a new Web Application. After the project is created, the default Web Form in your project will open in the Web Form Designer. Create a new Data Connection 4) Open the Server Explorer by selecting the Server Explorer command from the View menu. 5) Right click on the Data Connection node and select "Add Connection". In the new connection dialog, specify "localhost" (without quotes) as the SQL Server, "sa" as the user name, and leave the password blank. Select the "pubs" database, and click OK. Visual Studio is now connected to the database. 6) You can expand the connection in Server Explorer to the see tables, columns, views, stored procedures, and other objects in the database. Add the Data Components to a Web Page 7) Open the Toolbox by selecting the Toolbox command from the View menu, and click the Data tab of the Toolbox. This tab contains various ADO+ data components and other data tools. Drag an ADODatasetCommand onto the Web Form Designer surface. 8) Right-click the connection and select "Configure DataSetCommand". This will launch the Configuration Wizard. 9) On the Choose Your Connection pane of the wizard, select the connection to the Pubs database you created and click the Next button. 10) On the Choose Your Query, leave the default option, "Use SQL Statements", selected and click the Next button. 11) On the Generate SQL Statements pane, click the SQL Builder button to launch the SQL Query Builder. Double-click the "Authors" table and close the Add Table dialog. In the Authors, check the * column to select all columns. Click the OK button. Your SQL command should be "SELECT Authors.* FROM Authors". If not, correct the query by typing it into the query textbox. 12) Click the Finish button. ADODataSetCommand1 is now configured, and an ADOConnection component is added to the component. 13) Select the Web Forms Designer surface (make sure none of the components on the surface are selected). Go to the Properties Window and set the form’s GenerateDataSet property to True. This will generate a typed ADO+ DataSet class containing an Authors table. The DataSet class serves as an in memory cache for the Authors data. The ADODataSetCommand you configured will load data from the SQL Server database into this typed DataSet. 6 VB Lab: VB Data 14) Now drag a DataView component from the Data tab of the Toolbox onto the Web Form. Select the DataView, go to the Properties Window, and set the DataView’s Table property to DataSet1.Authors from the dropdown list. The DataView component provides functionality useful for data-binding Web Form controls to tables in the DataSet, such as sorting, searching, and filtering. Configure the DataGrid Control 15) Go back to the Toolbox and click on the Web Forms tab. This tab contains various controls that can be used on a Web Form. Drag a DataGrid control from the Toolbox onto the Web Form. 16) Select the DataGrid and go to the Properties Window. Set the DataGrid's DataSource property to DataView1 (this is the DataView you just added). This binds the Web Forms grid to the DataView1, which in turn reflects data from the Authors table in DataSet1. 17) Right click on the Web Form and select the View Web Form Code command. 18) Find the Page_Load event in the code window. Add the following lines of code to the beginning of the event (not inside the If clause): Me.FillDataSet(Me.DataSet11) DataGrid1.DataBind() The first line of code passes the Web Form’s instance of the generated typed DataSet to the FillDataSet method generated by the ADODataSetCommands. The FillDataSet method, in turn, uses the ADODataSetCommand that you configured to load records from the Authors table in the SQL Server database into the corresponding Authors table in the typed DataSet. The second line of code instructs DataGrid1 to bind to its DataSource. Build and Run the Solution 19) Build the Solution by selecting the Build Solution command from the Build menu. 20) Press the Ctrl + F5 keys to run the Solution. The Web Form opens in the browser and displays the Authors table in the grid. 7 VB Lab: VB Data Exercise 3: Build a Data-Bound Win Form 1) Open Visual Studio and create a new Visual Basic Windows Application project. Do this by selecting the New->Project from the File menu. On the New Project Dialog, select Visual Basic Projects and select the Windows Application icon. Name the project "WinApplication1", and use the default location. This will create a new Windows Application. After the project is created, the default Win Form in your project will open in the Win Form Designer. 2) Open the Server Explorer by selecting the Server Explorer command from the View menu. Right click on the Data Connection node and select the Add New Connection command. In the new connection dialog, specify "localhost" (without quotes) as the SQL Server, "sa" as the user name, and leave the password blank. Select the "Northwind" database and click OK. Visual Studio is now connected to the database. You can expand the connection in Server Explorer to the see tables, columns, views, stored procedures, and other objects in the database. 3) Open the Toolbox by selecting the Toolbox command from the View menu, and click the Data tab of the Toolbox. This tab contains various ADO+ data components and other data tools. Drag an ADODatasetCommand onto the Win Form. Notice that the ADODataSetCommand is added to the component area of the workspace. 4) Right-click on the new ADODataSetCommand and select Configure DataSetCommand. 5) On the Choose Your Connection pane of the wizard, select the connection to the Northwind database you created and click the Next button. 6) On the Choose Your Query, leave the default option, "Use SQL Statements", selected and click the Next button. 7) On the Generate SQL Statements pane, click the SQL Builder button to launch the SQL Query Builder. Double-click the "Customers" table and close the Add Table dialog. In Customers, check the * column to select all columns. Click the OK button. 8) Your SQL command should be "SELECT Customers.* FROM Customers". If not, correct the query by typing it into the query textbox. 9) Click the Finish button. ADODataSetCommand1 is now configured, and an ADOConnection component is added to the component. 10) Select the Win Form. Go to the Properties Window and set the form’s GenerateDataSet property to True (the machine will pause while it builds a dataset). This will generate a typed ADO+ DataSet class containing a Customers table. The DataSet class serves as an in memory cache for the Customers data. The ADODataSetCommands you configured will load data from the SQL Server database into this typed DataSet. 11) Go back to the Toolbox and drag a DataFormWizard to the form. The DataForm Wizard will launch and you will see a welcome screen. 12) On the Choose the typed DataSet page, select DataSet1 from the drop-down box. This is the typed DataSet that was just created. You can see from the available tables list that the DataSet is holding data from the Customers table. Click Next to continue. 13) The next page allows you to choose methods to load and update your DataSet. Leave the two checkboxes at their default settings. Select the only item in the 8 VB Lab: VB Data two drop-down boxes. (Bug: Please note that the drop-downs display incorrect text in the PDC Build of Visual Studio). Click the Next button to continue. 14) The following page allows you to choose the fields to display on your form. Select all of the columns contained in the table by clicking the Select All button, then click the Next button. 15) The final page of the wizard allows you to choose how you want the data columns you have selected to be displayed. For this exercise, leave the default settings a single record view with buttons to add, delete, cancel, and navigate records. Click the Finish button to allow the wizard to generate your form and code. 16) Now you will add the code to load the DataSet. Double-click the Load button to go to that button’s event handler method. Add the following line to the method: Me.FillDataSet(Me.DataSet11) 17) Build and run your project by pressing Ctrl+F5. The form created by the wizard will appear. Press the Load button to load the DataSet with the entries in the Northwind Customers database. The first record will appear. (Bug: In the PDC Build of Visual Studio, when pressing Load or Add, you may see an Unhandled Exception in the application – please press Continue, and the program does continue to work). 18) The DataSet that the form is displaying is held in memory. That means that you can make multiple changes to it in memory cache and then later decide if you would like to commit them as a batch. To show this, delete an entry by navigating to it and pressing the Delete button. The record is deleted from the DataSet and can no longer be seen. However, the changes have not been sent to the database itself. Press the Load button to re-load the data from the database. The deleted record now appears again. 19) You can also add a new record to the database. Press the Add button to begin editing. Fill in the fields on the form with information. This time, though, you will persist the data to the database. Do so by pressing the Update button. Press the Load button to re-load your data from the database. You can navigate to find your record, which shows it has been added to the database. 9 VB Lab: VB Data Exercise 4: Creating XSD Schemas and XML Data in the XML Designer 1) Open Visual Studio and create a new Visual Basic Windows Application project. Do this by selecting the New->Project from the File menu. On the New Project Dialog, select Visual Basic Projects and select the Windows Application icon. Name the project "WindowsApplication1", and use the default location. After the project is created, the default Windows Form in your project will open in the Form Designer. 2) Add an existing XML File to the project by choosing the Add Existing command from the Project menu. Add the file d:\VBPDC\xmldata\customers.xml. Once you have added customers.xml to the project, open it by double-clicking it in the Project Explorer. The file opens in the XML Designer. 3) Browse the XML. It contains a list of customers, which in turn have lists of orders, which have lists of order details. 4) Now click on the Data tab of the XML Designer (located at the bottom of the designer). This tab provides a graphical view of the XML Data. 5) In the listbox to the left, select customers. All of the customers in the XML data are then shown in the grid. Next select orders in the list box to see all the orders, and orderdetails to see all the orderdetails. 6) Select the customers table in the list box. In the grid, click the plus sign to expand the first customer. This shows a hyperlink called Relation2. Click on the hyperlink. All orders for that customer are displayed in the grid. Now click on the plus sign to expand the first order, and then click on the resultant hyperlink. All orderdetails for the first order are displayed in the grid. Navigate back to the customers table by clicking the back arrow on top of the grid. 7) In the grid, change the ContactName of the first customer to "Bill Gates". Click off of the row then go back to the XML source view. Note that the name has in fact been changed. Go back to the Data view by clicking the Data tab. 8) In the Data menu, select the Create Schema command. The XML Designer will analyze the structure of the XML data and infer an XSD schema that specifies that structure (XSD is the new W3C standard eXtensible Schema Definition language). The schema file, "customersSchema1.xsd" is automatically added to the project. 9) Go back to the XML source view by clicking the XML tab. Select the XML document and go to the Properties Window. Set the targetSchema property to "http://tempuri.org/customersSchema1.xsd". This declares that the schema that was just created defines the namespace of the customers.xml document. 10) Given that document has a schema, the XML designer can now provide statement completion and validation. In source view, add a new Customer to the XML by typing "<" just above the first customers tag. Statement completion presents a list of valid subelements. 11) Add attribute "foo=1" to your new customers tag. The XML Designer flags this as an error by showing a red squiggly underline. Move your mouse over 10 VB Lab: VB Data the red squiggly to see an error message tooltip. Remove the foo attribute and the new customers tag and save the xml file. 11 VB Lab: VB Data Exercise 5: Creating and Using an XSD Purchase Order Schema 1) Open Visual Studio and create a new Visual Basic Windows Application project. Do this by selecting the New->Project from the File menu. On the New Project Dialog, select Visual Basic Projects and select the Windows Application icon. Name the project "WindowsApplication1", and use the default location. After the project is created, the default Windows Form in your project will open in the Form Designer. 2) Add a new XML Schema to the project by choosing the Add New Item command from the Project menu and selecting the XML Schema icon in the Add New Item dialog box. Name the schema "PurchaseOrder.xsd". 3) If not already open, open "PurchaseOrder.xsd" by double-clicking the file in the Project Explorer. This opens the schema in the XML Designer’s schema design view. 4) Open the Toolbox and click on the XML tab. This tab contains various XSD components that can be dragged to the designer in order to build a schema. (XSD is the W3C standard eXtensible Schema Definition language.) 5) The purchase order will have a billTo and shipTo address, so first we’ll create a new complexType that defines the structure for an address. Drag a complexType object from the Toolbox to the XML Designer and change its name from "complexType1" to "addressType". 6) Add an attribute to addressType by clicking the first cell of the first row and selected "attribute" from the drop-down list. Change the name of the attribute from "Attribute1" to "Name" and leave its type as "string". 7) Go to the next row in the grid and add another attribute to the complexType. Name the attribute "Street" and leave its type as "string". 8) Add a third attribute named "City" of type "string", a fourth attribute named "State" of type string, and a fifth attribute named "Zip" of type integer. 9) Now consider the datatype of the State attribute. Although string is a perfectly reasonable choice, state codes are strings with length of exactly 2 characters. To address this fact, we will create a new simpleType for state codes that captures the constraint that they must be 2 and only 2 characters. Drag a simpleType object from the Toolbox the schema designer and change its name from "simpleType1" to "stateCode". 10) In the dropdown just to the right of the name edit box, select the base type of stateCode to be "string". 11) In the first column of first row of the grid, specify the length facet by typing "length". In the next column, type "2". The schema now has a user-defined data type called "stateCode" for strings of length 2. 12) Now, return to the addressType box and change the type of the "state" attribute to be "stateCode" (stateCode will be at the top of the list). 13) Now that our data types are defined, let’s define the purchase order. Drag an "Element" from the Toolbox to the design surface, and change its name from "Element1" to "purchaseOrder". 12 VB Lab: VB Data 14) Add an element to purchaseOrder by clicking the first cell of the first row and selecting "El -- element" from the drop-down list. Name the element "shipTo" and change its type from string to "addressType". Note that the address element is expanded to beneath the purchaseOrder element to show its attributes. 15) Add a second XML element to purchaseOrder named "billTo" and change its type from string to "addressType". This element is also expanded. 16) Add a third element to purchaseOrder named "Item". Change its type from string to New Anonymous Type. The Items element is expanded beneath the purchaseOrder element so that you can add elements and attributes to it. 17) In Item’s element box, add an element named "Quantity" and set its type integer. Add a second element named "Price" and set its type to decimal. 18) Save the schema. 19) Next we will create an XML instance document of purchaseOrder schema. Add a new XML File to the project by choosing the Add New Item command from the Project menu and selecting the XML File icon in the Add New Item dialog box. Name the file "PurchaseOrder.xml". 20) If the file is not already open, open "PurchaseOrder.xml" by double-clicking the file in the Project Explorer. This opens the document in the XML Designer"s source view. Select the XML document and go to the Properties Window. Select the XML document and set the targetSchema property to "http://www.tempuri.org/purchaseOrder.xsd". This declares that the schema we just created defines the namespace of the purchaseOrder.xml document. It also inserts the root <purchaseOrder> tag into the document. (Known Bug in PDC Build of Visual Studio: There will be a compile error "Element ‘purchaseOrder may not be nested within element ‘XML’). 21) Add a <billTo> tag to the purchaseOrder by typing "<" between the open and close tags of the purchaseOrder and selecting billTo from the statement completion list and pressing the Space bar. The "<billTo" tag is added and a second statement completion list shows the valid attributes for the <billTo> tag. Using the XML editor’s statement completion features, finish creating a purchaseOrder. Your purchase order may look something like this example: <?xml version="1.0" encoding="utf-8" ?> <purchaseOrder xmlns="http://tempuri.org/XMLSchema1.xsd"> <billTo Name="Burt Bacharach" City="Juneau" State="AK" Street="1 Close To You Way" Zip="55555"></billTo> <ShipTo Name="John Doe" City="Anywhere" Street="867 Write Street" Zip="53099"></ShipTo> <Item> <Price>6.37</Price> <Quantity>4</Quantity> </Item> </purchaseOrder> 22) Save the schema. 13 State="FL"