XML in 60 Minutes a Day phần 7 docx

exercise is simple and fast, and you won’t have to do a lot of typing. Once you see how it works and that it works, you will actually own a func- tioning example of this kind of data file. You can copy and modify this file to create more of them. 1. Download the file called gemsB_IDI.htm from the Chapter 10 page of the XML in 60 Minutes a Day Web site, as described in this book’s introduction, and put the file in the C:\WWW\SpaceGems directory. The _IDI has been inserted into the filename to remind you that it contains an internal XML data island. 2. Test the gemsB_IDI.htm file in the browser to make sure that it works. There is no link to this particular file yet, so you must enter the filename as part of the URL (don’t forget the underscore between the B and the IDI). In the browser’s locator bar, type: http://localhost/spacegems/gemsB_IDI.htm 3. When the file is displayed, it should look like Figure 10.15. 4. Using HTML-Kit, open the gemsB_IDI.htm file. 5. Using the following steps as a guide, examine the content of the gemsB_IDI.xml file: a. Note that the actual XML data instance is situated between the HTML <head> tags. b. Look closely at the <xml id=”gemdata”> opening and </xml> closing tags. This element type can only be named <xml>. It indi- cates to the browser’s parser that the information between the start and end tags is the data island. If you were to change the element name from <xml> to <xmla>, for example, it would not work. c. The id attribute defined inside the <xml id=”gemdata”> start tag is also mandatory. The value gemdata provides the subsequent data island with a data source reference that will be used later in the file. d. Now examine the HTML <table> element start tag in the following: <table border=”1” width=”100%” summary=”Space Gems Quick List of Details” datasrc=”#gemdata”> e. The datasrc=”#gemdata” attribute binds the data source (specified by the id attribute mentioned in Step c.) to the HTML table. This attribute therefore designates the HTML table as a data consumer. 402 Chapter 10 422541 Ch10.qxd 6/19/03 10:12 AM Page 402 Figure 10.15 Displaying the gemsB_IDI.htm file. f. You must include a pound sign (#) as the first character of the value specified for the datasrc attribute. g. Every table must have table data <td> tags that define the individual cells where data is to be displayed. h. You must define the <div> tag. Refer to the chapter notes for alternatives. The datafld=”name” attribute inside the <div datafld=”name” /> element tag (which is nested within the <td align=”left” > </td> tags) binds the value of name= attribute to that table cell. i. The rest of the code is similar and binds more table cells to respec- tive <gem> elements and the values of their attributes. Beyond that, several regular HTML tags specify display formats for the various elements. Lab 10.2: XHTML File Containing a Reference to an External Data Island With two quick changes, you can morph the internal data island in the first example data file into a reference to an external data source or external data XML Data Binding 403 422541 Ch10.qxd 6/19/03 10:12 AM Page 403 island. After you make the changes to your XHTML file, we’ll provide an already created data file named gemsB.xml as the data source. In a situation where you have a small Web site without a lot of data, you may not need a sophisticated database. Keeping your data inside external XML files like gemsB.xml is sufficient. (Incidentally, it is no coin- cidence that the data in that file is identical to the data found in the internal data island example.) 1. If you do not already have a fully functional gemsB.xml data file, you can download a new copy from the Chapter 10 page of the XML in 60 Minutes a Day Web site. 2. Using HTML-Kit, open the gemsB_IDI.htm file. 3. Before you begin modifying this file, save it as gemsB_EDI.htm to the C:\WWW\SpaceGems directory. The EDI in the filename is intended to remind you that this document will contain the reference to the external data island. 4. Delete all the code nested within the <xml id=”gemdata”> and </xml> tags, including the <xml id=”gemdata”> and </xml> tags themselves. 5. Replace the deleted code with the following new <xml> tag, which contains the reference to the external data island file named gemsB.xml: <xml id=”gemdata” src=”gemsB.xml” /> 6. Check to make sure that this new <xml> tag is situated between the <head> and <title> elements. 7. Replace the word Internal with External inside the <title> tag. 8. Save the modified file. 9. Test the gemsB_EDI.htm file in the browser to make sure that it works. Because there is no link to this particular file yet, you must enter the filename as part of the URL in the browser’s locator bar. (Don’t forget to include the underscore between the B and the EDI in the filename.) http://localhost/SpaceGems/gemsB_EDI.htm When displayed, the file should once again look like Figure 10.15. 10. So that you won’t have to keep entering the filename as part of the URL, modify the existing Quick List of Diamonds hyperlink on the index.html file. To do this: a. Using HTML-Kit, open the index.html file. b. Change the code for the link from. 404 Chapter 10 422541 Ch10.qxd 6/19/03 10:12 AM Page 404 <a href=”gems1.xml”>Quick List of Diamonds</a> to <a href=”gemsB_EDI.htm”>Quick List of Diamonds</a>. 11. Save the file back as index.html. 12. Test the link on the index.html file in the browser to make sure that it works. Type the following into the browser’s locator bar: http://localhost/SpaceGems/ 13. When the index/home page appears, click the Quick List of Diamonds hyperlink. The successful display should look like Figure 10.15. Lab 10.3: JavaScript Using Internet Explorer’s DSO Binding Technology This is a slightly more advanced lab, but we won’t let it get too far beyond you. Whether or not you understand and use JavaScript regu- larly, this lab should interest you and perhaps stimulate your creativity. In it, we show you how to create and bind data, then how to navigate it on your local system, without having to enlist the original Web server to recast and retransmit the data. In a situation where you have a small Web site with little data, you may not need a database at all. Keeping your data inside an external XML file is just fine. This data may even be exported from a larger database, in which the XML file is just a temporary store. Four basic steps make up this JavaScript lab exercise: ■■ Creating the data island ■■ Binding the data fields ■■ Creating a JavaScript navigation mechanism ■■ Testing the catalog.htm Web page Please note that this lab is a Microsoft-specific solution. 1. Download both the catalog.xml and catalogempty.htm files from the Chapter 10 page of the XML in 60 Minutes a Day Web site into the C:\WWW\SpaceGems directory. XML Data Binding 405 422541 Ch10.qxd 6/19/03 10:12 AM Page 405 2. Open the catalogempty.htm file using HTML-Kit. You should see a partial HTML file solution with comments inside it, similar to this code: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” > <head> <title>Space Gems Catalog</title> <! JavaScript start > <! JavaScript end > </head> <body text=”#9999cc”> <! Data island start > <! Data island end > <h2 font-family:Verdana,sans-serif”> Space Gems Catalog </h2> <! HTML table start > <! HTML table end > <! Navigation buttons start > <! Navigation buttons end > </body> </html> 3. Rename the file catalog.htm and save it. 4. Open the catalog.xml file using HTML-Kit. This is the data source for this exercise. Review the document but do not make any changes to it. When you are familiar with the file’s structure and contents, you can close it. 5. Open the catalog.htm file again and create a reference to an external data island inside it by adding the appropriate code between the data island comment lines. When done, the lines should look like this: <! Insert the XML data island > <xml id=”data” src=”catalog.xml”></xml> <! Insert the HTML table code after this line > 6. Note that the value specified for the id attribute—the data source id—is data. 7. Add the following HTML table code to the catalog.htm Web page between the appropriate comment lines: <! HTML table start > <table border=”0” style=”font: 10pt Verdana,sans-serif;” cellpadding=”5”> <tr> <td> <img dataSrc=”#data” dataFld=”image” /> </td> </tr> 406 Chapter 10 422541 Ch10.qxd 6/19/03 10:12 AM Page 406 </table> <table border=”0” style=”font: 10pt Verdana,sans-serif;” cellpadding=”5”> <tr> <td>Name</td> <td> <span style=”background: white; width:150; border: inset; border-width:1” dataSrc=”#data” dataFld=”name”> </span> </td> <td>Carat</td> <td> <span style=”background: white; width:150; border: inset; border-width:1” dataSrc=”#data” dataFld=”carat”> </span> </td> </tr> <tr> <td>Origin </td> <td> <span style=”background: white; width:150; border: inset; border-width:1” dataSrc=”#data” dataFld=”origin”> </span> </td> <td>Shape </td> <td> <span style=”background: white; width:150; border: inset; border-width:1” dataSrc=”#data” dataFld=”shape”> </span> </td> </tr> <tr> <td>Cost $</td> <td> <span style=”background: white; width:150; border: inset; border-width:1” dataSrc=”#data” dataFld=”cost”> </span> </td> </tr> </table> <! HTML table end > XML Data Binding 407 422541 Ch10.qxd 6/19/03 10:12 AM Page 407 8. Anytime you want to see the progress, click the Preview tab within HTML-Kit. Feel free to change the HTML look and feel if you think this file is too ugly for words. 9. Add the following JavaScript code to the catalog.htm Web page between the appropriate comment lines, as indicated: <! JavaScript start > <script language=”JavaScript”> function first(){ data.recordset.moveFirst(); } function previous(){ if(data.recordset.absoluteposition>1) data.recordset.movePrevious(); } function next(){ if(data.recordset.absoluteposition < data.recordset.recordcount) data.recordset.moveNext(); } function last(){ data.recordset.moveLast(); } </script> <! JavaScript end > 10. This code uses some standard predefined JavaScript functions that will navigate the recordset. Here the recordset is defined as the data island, which in our case is everything inside the catalog.xml file. 11. Create the navigation buttons that will invoke the functions defined previously. Add the following code to the catalog.htm file between the appropriate comment lines: <! Navigation buttons start > <hr /> <input type=”button” style=”width:70px” value=”|<” onClick=”first()”> </input> <input type=”button” style=”width:70px” value=”<” onClick=”previous()”> </input> <input type=”button” style=”width:70px” value=”>” onClick=”next()”> </input> <input type=”button” style=”width:70px” value=”>|” onClick=”last()”> </input> <! Navigation buttons end > 408 Chapter 10 422541 Ch10.qxd 6/19/03 10:12 AM Page 408 12. View the file inside HTML-Kit Preview, and save the file. 13. Using Internet Explorer, enter http://localhost/SpaceGems/ catalog.htm into the locator bar. If successful, the display should resemble Figure 10.16. Check the functionality by clicking the navigation buttons. 14. For optional practice, you can add another link to the index.html page, one that will give you instant access to this page. The code is as follows. Just follow the procedure indicated in the earlier exercises. <a href=”catalog.htm”>Space Gems Catalog</a> 15. When you are done, don’t forget to test the new link. Figure 10.16 Space Gems Catalog including JavaScript navigation functions. Summary Several concepts discussed in this chapter serve us well with respect to native XML data and to discussions of other database technologies, especially when they are applied in the Internet world: XML Data Binding 409 422541 Ch10.qxd 6/19/03 10:12 AM Page 409 ■■ More and more individuals and organizations are adopting XML technologies and standards, and native XML databases are expected to play a larger role in the future. However, they are not expected to unseat relational database technology. The challenge will be to increase their interchangeability. ■■ Data binding is the process of mapping and synchronizing data in a data source to designated (usually local) data placeholders. In this chapter, data consumer elements, also called bindable elements, are the placeholders. Data binding also involves moving and synchronizing data from a remote server to a local system and manipulating it on the local system. ■■ The advantages to data binding are reduced network traffic, lighter loading on servers, and more efficient use of local resources. ■■ Data consumer elements bind two types of data: single-valued and tabular. Inserting more than one value at once is called data set binding. ■■ HTML extended attributes, such as datasrc and datafld, allow us to point to data sources and to the data fields within those sources, respectively. ■■ XML data is stored in internal or external data islands. Internal data islands are located within the Web page documents that display and manipulate the data. External data islands are located in separate documents that are referred to by the Web page documents. ■■ XML data retrieval and synchronization are performed by the XML data source object plus the data binding agent or the table repetition agent. XML DSO activation is easier and more automatic since the release of Internet Explorer 5. ■■ The DSO is activated by the data binding agent or the table repetition agent. The DSO retrieves data and assembles it in recordsets in the local browser. ■■ Basic XML recordset navigation can be facilitated quite easily with JavaScript coding in the Web page documents themselves. 410 Chapter 10 422541 Ch10.qxd 6/19/03 10:12 AM Page 410 Review Questions 1. Which of the following is not an aspect of data binding? a. Mapping and synchronizing data b. Interchangeability with relational databases c. Transmitting data from sources to data placeholders d. Local data manipulation e. None of the above 2. Which of the following are data bindable elements? (There may be more than one correct answer.) a. <div> b. <table> c. <span> d. <td> e. All of the above 3. True or false? The <div> element is a grouping element, but the <span> element is only an inline element. 4. True or false? Single valued elements can be used to build tablelike structures. 5. To display data from a data source without worrying about the format of the data, which of the following attributes would you use? a. datasrc=”$text” b. datafld=”$text” c. datasrc=”$table” d. datafld=”table” e. None of the above 6. Which of the following attributes points to an external XML data island? a. datasrc b. datafld c. src d. id e. None of the above XML Data Binding 411 422541 Ch10.qxd 6/19/03 10:12 AM Page 411 [...]... that statement may be easier to understand: The data value for each picture element (usually called a pixel) is stored in a data file Pixels are easily seen on terminal screens (and television screens) by looking at the screen through a magnifying glass They are similar in nature to the combinations of black and white or colored ink dots that are still used to create newspaper and magazine photographs... nothing but VML, bitmap data can also be combined with vector graphics data VML also provides some bitmap transformation attributes These advantages all contribute to faster Web site design and have allowed VML to contribute to geographic information system technologies, where VML’s map-making and drawing strengths can be quickly and easily employed alongside XML- related spatial databases Creating... Bitmaps are found just about everywhere on the Web and on private networks ■ ■ Bitmaps allow us to enhance image details; we can literally modify each pixel in an image using applications that are commonly called paint programs or photo suites But bitmap graphics have several disadvantages, too Among them: ■ ■ They may require a larger amount of RAM on motherboards, video adapter cards, or within printers... representations of the vector images Vector graphics always use one or more algorithms in real time to create a shape and then draw that image on the screen or send it to a printer Vector graphic files create bitstreams that describe their images as display lists that contain a mathematical description of every object in a shape (imagine a jewel being composed of triangles, octagons, and other individual... exist: those using bitmap graphics and those using vector graphics Although VML involves vector graphics, each is discussed in turn Bitmap Graphics A bitmap graphic file (also known as a raster graphic file) is one in which each bit of data in the file corresponds to a specific location on a raster—which is the viewing area of a terminal screen—or to a specific ink dot on a printed page Actually, the converse... element contains a element followed by a element The element also contains a behavior declaration, which is discussed later Namespace Declarations For VML to render properly, we must pay attention to the namespace declarations Two namespace declarations are necessary: a VML namespace and a default namespace for the HTML or XHTML tags Both declarations must appear in the... Chapter 10 7 The standard syntax for specifying data located below the second nesting level resembles which of the following? a cost.retail b cost/retail c cost;retail d cost:retail e cost_retail 8 Which of the following is the proper syntax for an external data island? a b c d e None of the above 9 True or false? The DSO searches a Web page document for bindable elements, then activates the data binding agent or the table repetition agent 10 Which of the following atttributes could tie navigation buttons to JavaScript functions? a input=”value” b function=”value” c recordset=”value” d onClick=”value” e None of the above XML Data Binding Answers... graphic files are searchable for data and attributes ■ ■ Users can interact easily with the created image files using a simple computer system and text editor Vector files are actually text files The disadvantages of vector graphics are as follows: ■ ■ As vector graphics become more sophisticated (possibly containing scores, hundreds, or even thousands of mathematical expressions that define many finer . the internal data island in the first example data file into a reference to an external data source or external data XML Data Binding 403 422541 Ch10.qxd 6/19/03 10:12 AM Page 403 island. After. their interchangeability. ■■ Data binding is the process of mapping and synchronizing data in a data source to designated (usually local) data placeholders. In this chapter, data consumer elements, also. single-valued and tabular. Inserting more than one value at once is called data set binding. ■■ HTML extended attributes, such as datasrc and datafld, allow us to point to data sources and to the data

Định dạng
Số trang	72
Dung lượng	9,53 MB