Tài liệu Module 5: Embedding XML Data in HTML pptx

Contents Overview 1 Using Data in Web Browsers 2 Data Binding 10 Manipulating the Data Source 24 Lab 5: Embedding XML Data in HTML 37 Review 47 Module 5: Embedding XML Data in HTML Information in this document is subject to change without notice. The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted. Complying with all applicable copyright laws is the responsibility of the user. No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Microsoft Corporation. If, however, your only means of access is electronic, permission to print one copy is hereby granted. Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.  2000 Microsoft Corporation. All rights reserved. Microsoft, ActiveX, MSDN, PowerPoint, Visual C++, and Windows are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries. The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted. Other product and company names mentioned herein may be the trademarks of their respective owners. Program Manager: Steve Merrill Instructional Designers: Sangeeta Nair (NIIT), Vijayalakshmi Narayanaswamy (NIIT) Subject Matter Experts: Andy Olsen (QA Training), Andy Longshaw (Content Masters) Content Lead: Janet Robinson Graphic Artist: Scott Serna (Creative Assets) Media Management: David Mahlmann Media Production: Dean Connolly (Art Source), Timothy Demmon (:timebomb Media) Editing Manager: Jennifer Linn Editor: Dennis Rae (Wasser) Production Manager: Miracle Davis Print Coordinator: Marlene Lambert (Online Training Solutions, Inc) Build Manager: Julie Challenger Build Coordinator: Jenny Boe Test Lead: Eric Myers Manufacturing Manager: John Williams Group Product Manager: Steve Elston Module 5: Embedding XML Data in HTML iii Instructor Notes This module deals with XML data islands. The module describes the benefits of embedding XML data in an HTML page, and then outlines how the XML data island is exposed as an ADO recordset. The module then describes how to use data binding so that the contents of the XML data island can be displayed in data-consuming HTML elements. The module describes both tabular binding (where the entire contents of the recordset are displayed at the same time in a table) and current-record data binding (where only the current record in the recordset is displayed). Some students may already be familiar with the concept of data binding in Dynamic HTML, but be aware that this might be an entirely new concept for other students. The module also describes how to write script to access an XML data island via its exposed ADO recordset. This allows more flexibility in how you access the data, but obviously requires more coding. After completing this module, students will be able to: ! Describe the nature of a data island. ! Describe how to use Data Source Objects (DSO) to display XML data islands in an HTML page. ! Create an XML data island in an HTML file. ! Bind XML data to HTML elements. Materials and Preparation This section provides you with the required materials and preparation tasks that you need to teach this module. Required Materials To teach this module, you need the following materials: ! Microsoft PowerPoint ® file 1905a_05.ppt ! Module 5, “Embedding XML Data in HTML” ! Lab 5, “Embedding XML Data in HTML” Preparation Tasks To prepare for this module, you should: ! Read all of the materials for this module. ! Complete the labs. Due to the length of the answers to the labs for this course, we were unable to include them in the Delivery Guide. Please see Appendix A or the Student CD for the lab answers. ! Review the documentation on http://msdn.microsoft.com/xml concerning the use of the Java Data Source Object in Microsoft Internet Explorer 4, for background information. Presentation: 120 Minutes Lab: 60 Minutes iv Module 5: Embedding XML Data in HTML Module Strategy Use the following strategies to present this module: ! Using Data in Web Browsers The first part of this module describes various ways in which recordset data can be delivered from a Web server to a browser, for example, Remote Data Objects (RDO). Concentrate on XML issues, for instance, what an XML data island is and why you would use one. Internet Explorer 4 supports XML data islands through use of a Java applet. It is worthwhile to mention this briefly because some students might still be using Internet Explorer 4, but impress on students that the Internet Explorer 5 DSO is written in Microsoft Visual C++ ® and is faster and recommended. The Internet Explorer 5 notation for an XML data island uses the <XML> tag. A common misconception is that <XML> is an XML tag, but it isn’t — it is a special HTML tag that introduces an XML data island. ! Data Binding Data binding is not unique to XML, so some students might already be familiar with the idea. For others, take time to explain the concept of data- consuming HTML elements first, before describing how it works with XML. Data binding is a simple way of displaying XML data in HTML elements. It works best if the XML data is symmetric (that is, each element has the same number and arrangement of child elements). Emphasize that data binding is not well suited for irregular XML data. Explain that the problem stems from the inability to elegantly represent irregular XML data in a recordset. (Recordsets are inherently regular and rectangular in shape.) Take time to explain the repeated elements example (multiple <author> elements per <book>). The $Text notation is the generic way of accessing the text in an element (and all its child elements). Some students are also baffled by the issue of attributes in an XML data island. Be prepared to spend some time on this issue. ! Manipulating the Data Source The key point in this section is that an XML data island is exposed as an ADO recordset. After you accept this basic premise, you can effectively ignore the fact that the data came from an XML data island, and simply treat it as an ADO recordset. However, there are certain ADO properties, methods, and events that are not available because the XML DSO uses the ADO Simple provider. For example, you cannot use the ADO sort capabilities. The way to achieve sorting is to associate a style sheet with the XML data island and sort the data by using this style sheet. ! Lab 5: Embedding XML Data in HTML This is a fairly straightforward lab in which students create an ASP page to deliver an HTML page (with an enclosed XML data island) to the browser. The XML data island contains details about a single book. An HTML table is bound to the XML data island in order to display the data in tabular format. The issue of repeating elements must be addressed because a book can potentially have many authors. Module 5: Embedding XML Data in HTML 1 # ## # Overview ! Using Data in Web Browsers ! Data Binding ! Manipulating the Data Source ! Lab 5: Embedding XML Data in HTML ! Review This module uses Microsoft ® Internet Explorer as an XML processor. It refers to the W3C XML recommendation released on 10 February 1998. Internet Explorer version 4.0 introduced support for client-side Data Source Objects (DSO), which allow data binding between HTML elements and any XML content embedded in a page. Internet Explorer version 5.0 has a built-in DSO component that handles the process seamlessly.After completing this module, you will be able to: ! Describe the nature of a data island. ! Describe how to use Data Source Objects to display XML data islands in an HTML page. ! Create an XML data island in an HTML file. ! Bind XML data to HTML elements. Slide Objective To provide an overview of the module topics and objectives. Lead-in In this module, you will create XML data islands inside an HTML document. You will then bind the XML content to HTML elements by using DSO and the dynamic data-binding capabilities of Internet Explorer. Note 2 Module 5: Embedding XML Data in HTML # ## # Using Data in Web Browsers ! Delivering Data from the Web Server ! Using Client-Side Data Source Objects (DSO) ! Presentation vs. Data ! Internet Explorer 4.0 Approach: Using a Java Applet ! Internet Explorer 5.0 Approach: Using Data Islands ! Embedding vs. Referencing an XML DSO In this section, you will learn about some of the methods used for data access on the Web. You will also learn how XML, Data Source Objects, and DHTML data binding simplify data access and presentation on the Web. Slide Objective To introduce the concept of data access and data-aware Web pages. Lead-in Data access is now an integral part of Web sites and their services. It is the foundation on which e- commerce is built. Module 5: Embedding XML Data in HTML 3 Delivering Data from the Web Server ! Getting data down to browsers Database CGI, Perl, ASP, VBScript, JavaScript Web server HTML Browser Many Web sites include data content that is extracted from databases or data files. Extracting this data is essential for Web developers, especially in the case of e-commerce sites, where data is mainly stored in databases. The typical method of extracting data is to have a script, which runs on the Web server, that runs an SQL query against the database and then reformats the resulting data into HTML for display in a browser. Therefore, getting data from a database and presenting it to the client involves the following steps: reading data from the database by using ActiveX ® Data Objects (ADO), converting the data into an appropriate HTML format, and sending the HTML data to the browser. Slide Objective To provide an overview of how data is presently accessed over the Web. Lead-in Most Web applications manipulate some form of data that is located in a database. This data must be displayed to the user in the HTML format. 4 Module 5: Embedding XML Data in HTML Reading data from the database by using ADO The following code is an example of how to read records from the database by using ADO in an ASP page: <% 'Create the component instance Dim cnBooks Set cnBooks = Server.CreateObject("ADODB.Connection") 'Open the connection cnBooks.Open "Provider=SQLOLEDB;" & _ "Data Source=ServerName;" & _ "Initial Catalog=LitWareBooks;" & _ "User Id=MyUserName;" & _ "Password=MyPassword;" %> 'Prepare an SQL SELECT statement to execute Dim sqlQuery sqlQuery = "SELECT Name FROM Customers" 'get the list of customers from the connection object Dim rsCustomerList Set rsCustomerList = cnBooks.Execute(sqlQuery) %> Formatting records into HTML The following code is an example of how to format records into an HTML table: <!-- Populate a table with the results --> <TABLE COLSPAN=8 CELLPADDING=5 BORDER=0> <TR> <TD ALIGN=CENTER> <FONT STYLE="ARIAL" SIZE=2>Name</FONT> </TD> </TR> <!-- Process rows in result set --> <% Do While Not rsCustomerList.EOF %> <TR> <TD ALIGN=LEFT> <FONT STYLE="ARIAL" SIZE=2> <%= rsCustomerList("Name").Value %> </FONT> </TD> </TR> <% rsCustomerList.MoveNext %> <% Loop %> </TABLE> Module 5: Embedding XML Data in HTML 5 Using Client-Side Data Source Objects (DSO) ! New COM components in IIS 3.0 & Internet Explorer 4.0 ! Send data via HTTP or DCOM HTTP/DCOM DSO Database ADO CGI, Perl, ASP, VBScript, JavaScript Web server HTML Browser ADO Microsoft’s ActiveX Data Objects (ADO) technology provides excellent data access from a Web browser. New COM components in Internet Explorer 4.0 The concept of the Data Source Object (DSO) was introduced in Internet Explorer 4.0. In the Internet Explorer 4.0 version, DSO simply supplied data to a Web page by using ActiveX components that ran on both the Web server and the client browser. These ActiveX components took the output of the SQL query (which may be an ADO Recordset object) and packaged it so that it could be transported to the Web browser by using HTTP. Send data via HTTP or DCOM The ActiveX components on the browser can then re-create the ADO Recordset object and allow client-side scripting to manipulate the recordset directly. Some simple display and update operations can even be done without writing any client-side script at all. This is achieved through HTML data- binding extensions that allow the rows and fields of the recordset to be displayed in HTML elements. The data, which populates the table rows, must be displayed in HTML elements that support data binding, such as SPAN or DIV elements. Slide Objective To discuss some of the preferred Microsoft technologies used for data access over the Web. Lead-in Microsoft’s ADO technology provides excellent data access from a Web browser. The associated Data Source Object mechanism provides the basis for XML data- binding support. 6 Module 5: Embedding XML Data in HTML Presentation vs. Data HTML ! HTML intermingles data with its presentation ! XML separates data from its presentation ! Extensions to existing DSO techniques allow embedding of XML within HTML XML CGI, Perl, ASP, VBScript, JavaScript Web serverBrowser XML Database Multitier systems depend on many sound principles, one of which is the separation of services. For the purpose of scalability, deployment, and scope, multitier systems keep business rules, data, and presentation logic as independent as possible. In HTML, data in tables and form elements intermingles with the style and other presentation details. This makes it difficult to manage intelligent searching and other tasks that require pure data. Because XML is raw data, it has the advantage of displaying its structure to the Web browser without including source or presentation information. Internet Explorer 5.0 provides an extension to the previous DSO techniques. Internet Explorer 5.0 provides all of the features of DSO that were in Internet Explorer 4.0, such as data binding through collaborating ActiveX objects on the client and Web server. The additional feature is the support for embedded XML documents called data islands. Internet Explorer 4.0 provides a similar feature that uses a Java applet. Both Java applets and data islands allow the client browser to manipulate data without making calls back to the Web server. The important difference between the two techniques, however, is that in the data-island technique the client receives XML data that has some structure and semantics, rather than plain HTML that only contains the presentation information. Slide Objective To provide an overview of how XML uses DSO to separate presentation and data. Lead-in The multitier system encourages the division of process and the isolation of business practices. XML can help separate data from presentation, both of which currently are intermingled in the GUI. [...]... contains XML content by using the XML tag as shown in the following sample code: < /XML> The SRC attribute specifies the required XML file 9 10 Module 5: Embedding XML Data in HTML # Data Binding Slide Objective To introduce the concept of client-side data binding Lead -in When an XML data island appears in an HTML page, the HTML page can access and manipulate the XML data. .. element in the island This is known as data binding For more information on data binding, search for “Binding the XML Data Source Object to Data in the MSDN™ online library at http://msdn.microsoft.com/library Module 5: Embedding XML Data in HTML 11 Mapping XML Data to an ADO Recordset Slide Objective To explain how the XML data in a data island is treated as an ADO recordset Lead -in The XML data within... data in numerous ways ! Mapping XML Data to an ADO Recordset ! Binding Data Islands to DHTML Elements ! Demonstration: Binding HTML Elements to XML Data ! Displaying Data in HTML Tables ! Accessing Repeating Elements ! Accessing XML Attributes ! Practice: Binding HTML Elements to XML Data Data access from the client is very important on a Web site With XML data islands, the server can deliver the XML data. .. Lead -in Data islands can be loaded explicitly (from an external file) or implicitly (inline) ! An XML data island can be embedded in an HTML document < ?xml version="1.0"?> < ?xml version="1.0"?> … … < /XML> < /XML> ! Or referenced from the HTML document < /XML> < /XML> An XML data island... specified in two different ways: explicitly, by embedding the XML directly in the HTML document, and implicitly, by referencing an XML document from the HTML document Embedding an XML data island You can embed XML tags directly in an HTML document by using the and < /XML> tags as shown in the following code: < ?xml version="1.0"?> someXML … < /XML> Referencing an XML data island... < ?xml version="1.0"?> … < /XML> There is nothing to prevent you from including more than one data island in a page As long as each data island has a unique ID, the data can be referenced, and each DSO will be independent Module 5: Embedding XML Data in HTML Embedding vs Referencing an XML DSO Slide Objective To introduce the data island syntax Lead -in. .. taken when binding elements In this practice, you will create an HTML file that displays data in an XML data island by using DSO data binding ! Display an XML data island in an HTML table 1 Create a new file named binding.htm in the folder \InetPub\WWWRoot\1905\Practices, and then add the HTML and BODY tags as follows: < /HTML> 2 In the BODY of the binding.htm file, add a data island... structure of the data, for example, that the data is made of rows, with each row containing the same number of fields 12 Module 5: Embedding XML Data in HTML Binding Data Islands to DHTML Elements Slide Objective To introduce the various extensions to HTML elements that are used to support data binding ! Set DSO-specific attributes on HTML elements $ Internet Explorer 4 allowed data binding through RDS... Module 5: Embedding XML Data in HTML The result displayed should look like the following 23 24 Module 5: Embedding XML Data in HTML # Manipulating the Data Source Slide Objective To introduce... the XML data located in the Books .xml file Books .xml is already located in the folder \InetPub\WWWRoot\1905\Practices < /XML> Module 5: Embedding XML Data in HTML 21 3 Create a TABLE template to display the title and price fields of the XML data Title Price data binding for title data . Using Data in Web Browsers 2 Data Binding 10 Manipulating the Data Source 24 Lab 5: Embedding XML Data in HTML 37 Review 47 Module 5: Embedding XML Data. Module 5: Embedding XML Data in HTML 1 # ## # Overview ! Using Data in Web Browsers ! Data Binding ! Manipulating the Data Source ! Lab 5: Embedding XML