Download Visual Basic Lab: Data and XML Tools in Visual Studio 7

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"