html, xhtml, and css chapter 12 creating and using xml documents
Post on 11-Jan-2016
230 Views
Preview:
TRANSCRIPT
HTML, XHTML, and CSS
Chapter 12
Creating and UsingXML Documents
Chapter 12: Creating and Using XML Documents 2
Chapter Objectives
• Describe how XML differs from HTML• Describe an XML document instance, and rules
for creating a well-formed and valid XML document
• Define the purpose of the processing instruction, the document prolog, and the document instance
• Describe an XML Schema Definition (XSD) language file
Chapter 12: Creating and Using XML Documents 3
Chapter Objectives
• Create and bind an XSL style sheet file to an XML document
• Discuss the uses of an XML data island• Discuss the built-in table element methods for
displaying an XML document in a table• Create a JavaScript user-defined function to
search an XML document
Chapter 12: Creating and Using XML Documents 4
Starting Notepad++ and Creating a New XML Document
• Start Notepad++, and, if necessary, maximize the Notepad++ window. If the Word wrap feature is not enabled, enable it
• With the USB drive plugged into your computer, click File on the menu bar, and then click Save As on the File menu
• If necessary, navigate to the Chapter12\ChapterFiles folder on your storage device
• Type chapter12-1classic_books.xsd in the File name text box
• Click the Save button in the Save As dialog box to save the Schema Definition file
Chapter 12: Creating and Using XML Documents 5
Starting Notepad++ and Creating a New XML Document
Chapter 12: Creating and Using XML Documents 6
Entering the Code for the Prolog, Root, Annotation, and Documentation Elements
• Click line 1• Enter the XML code shown in Table 12–11 to
create the beginning of the XML Schema Definition with the prolog, root, annotation, and documentation elements
Chapter 12: Creating and Using XML Documents 7
Entering the Code for the Prolog, Root, Annotation, and Documentation Elements
Entering Code for the <classic_books> Element
• Click line 10 and press the ENTER key once to place the insertion point on a blank line 11
• Enter the XML code shown in Table 12–12 to add the classic_books element tags
• Press the ENTER key twice after line 17
Chapter 12: Creating and Using XML Documents 8
Entering Code for the <classic_books> Element
Chapter 12: Creating and Using XML Documents 9
Entering Code for the <complexType> Element
• If necessary, click line 19• Enter the XML code shown in Table 12–14 to
enter the <complexType> element to define the group elements
• Press the ENTER key twice after line 21 and position the insertion point at the beginning of line 23
Chapter 12: Creating and Using XML Documents 10
Entering Code for the <complexType> Element
Chapter 12: Creating and Using XML Documents 11
Chapter 12: Creating and Using XML Documents 12
Entering Code for the Child Group Elements
• If necessary, click line 23• Enter the XML code shown in Table 12–15 to
enter the <group> element to define the childElements, pressing the ENTER key once after line 32
Chapter 12: Creating and Using XML Documents 13
Entering Code for the Child Group Elements
Chapter 12: Creating and Using XML Documents 14
To Save and Validating the XML Schema Definition File
• With the USB drive plugged into your computer, click the Save icon on the Notepad++ toolbar to re-save the chapter12-1classic_ books.xsd file
• Close the chapter12- 1classic_books.xsd file, but don’t close Notepad++
• Start your browser and type www.w3.org/2001/03/webdata/xsv in the Address box and press the ENTER key
• Scroll down to find the section that begins with “Use this form only if you are behind a firewall or have a schema to check which is not accessible via the Web”
Chapter 12: Creating and Using XML Documents 15
To Save and Validating the XML Schema Definition File
• Click the Browse button and navigate to your USB drive
• Double-click the chapter12-1classic_books.xsd file to select the XML Schema definition file for the validation Web page
• Click the Show warnings and Keep Going check boxes, but not the Check as complete schema check box
• Click the Upload and Get Results button. A valid XML Schema Definition will have no error messages
Chapter 12: Creating and Using XML Documents 16
To Save and Validating the XML Schema Definition File
Creating a New XML Document and Entering the Prolog Code
• If necessary, activate the Notepad++ window• Click File on the menu bar, then click New to
create a new Notepad++ document• With the USB drive plugged into your computer,
click File on the menu bar, and then click Save As on the File menu
• If necessary, navigate to the Chapter12\ChapterFiles folder on UDISK (G:)
Chapter 12: Creating and Using XML Documents 17
Creating a New XML Document and Entering the Prolog Code
• Type chapter12-1classics.xml in the File name text box
• Click the Save button in the Save As dialog box• If necessary, click line 1• Enter the XML code shown in Table 12–17 to
create the prolog and press the ENTER key twice
Chapter 12: Creating and Using XML Documents 18
Creating a New XML Document and Entering the Prolog Code
Chapter 12: Creating and Using XML Documents 19
Starting Entering a Document Instance in an XML Document
• If necessary, click line 4• Enter the XML code shown in Table 12–19 to
create the root and first document instance. Press the ENTER key after line 13
Chapter 12: Creating and Using XML Documents 20
Starting Entering a Document Instance in an XML Document
Chapter 12: Creating and Using XML Documents 21
Finishing Entering a Document Instance in an XML Document
• If necessary, click line 14, indented as shown in Figure 12–15
• Enter the XML code shown in Table 12–20 with the error on line 29 to finish creating the document instance and do not press the ENTER key
Chapter 12: Creating and Using XML Documents 22
Finishing Entering a Document Instance in an XML Document
Chapter 12: Creating and Using XML Documents 23
Saving and Testing an XML Document in a Browser
• With a USB drive plugged into your computer, click the Save Icon on the Notepad++ toolbar to save the completed chapter12-1classics.xml document
• Start your browser. If necessary, click the Maximize button
• Click the Address bar• Type g:\Chapter12\ChapterFiles\chapter12-1classics.xml and then press the ENTER key to display the completed document
Chapter 12: Creating and Using XML Documents 24
Saving and Testing an XML Document in a Browser
Chapter 12: Creating and Using XML Documents 25
Chapter 12: Creating and Using XML Documents 26
Correcting a Tag Error and Retesting the XML Document
• Click the Notepad++ button on the taskbar
• Click line 29
• Delete the uppercase </BOOK> tag
• Type </book> as the new tag in place of the deleted tag to correct the closing book tag
• Click the Save icon on the Notepad++ toolbar to save the corrected file
• Activate the browser
Correcting a Tag Error and Retesting the XML Document
• Click the Refresh button on the browser toolbar to display the corrected page
• If necessary, click the security bar under the tabs, and then click Allow Blocked Content on the shortcut menu
• If necessary, click Yes in the Security Warning dialog box
• Click the minus sign in front of the second <book> tag to collapse the individual instance in the list
• Click the plus sign in front of the second <book> tag to expand that instance
Chapter 12: Creating and Using XML Documents 27
Chapter 12: Creating and Using XML Documents 28
Correcting a Tag Error and Retesting the XML Document
Chapter 12: Creating and Using XML Documents 29
Validating XML and XSD Files
• If necessary, activate your browser• Click the Address bar• Type tools.decisionsoft.com/schemaValidate/index.jsp and then press the ENTER key to load the Web page
• Click the Browse button next to the XML Schema text box• Navigate to your storage device and locate the XML
Schema Definition file, chapter12-1classic_books.xsd• Click the Open button on the Choose File to Upload
dialog box
Chapter 12: Creating and Using XML Documents 30
Validating XML and XSD Files
• Click the Browse button next to the XML Instance text box
• Navigate to your storage device and locate the XML document instance file, chapter12-1classics.xml
• Click the Open button on the Choose File to Upload dialog box
• Click the Validate button on the XML Schema Validator to upload the files
• When the Web page indicates the XML instance and XML schema are present, click the Click here link to see the results
Chapter 12: Creating and Using XML Documents 31
Validating XML and XSD Files
Chapter 12: Creating and Using XML Documents 32
Opening an XML Document and Saving It with a New Name
• Click the Notepad++ button on the status bar to activate the Notepad++ window
• With the USB drive plugged into your computer, click File on the menu bar, and then click Open on the File menu
• If necessary, navigate to the Chapter12\ChapterFiles folder on the USB drive. Click All types (*,*) in the Save as type: drop-down list
• Double-click chapter12-1classic_more.xml in the list of files
Chapter 12: Creating and Using XML Documents 33
Opening an XML Document and Saving It with a New Name
• Click File on the menu bar, and then click Save As on the File menu
• If necessary, navigate to the Chapter12\ChapterFiles folder on UDISK (G:)
• Type chapter12-1classic_books.xml in the File name text box
• Click the Save button in the Save As dialog box
Chapter 12: Creating and Using XML Documents 34
Starting Creating an XSL Style Sheet
• If necessary, activate the Notepad++ window
• Click File on the menu bar, and then New to start a new Notepad++ document
• With your USB drive plugged into your computer, click File on the menu bar, and then click Save As
• If necessary, navigate to the Chapter12\ ChapterFiles folder on UDISK (G:)
• Type chapter12-1author_solution.xsl in the File name text box
• Click the Save button in the Save As dialog box to save the chapter12-1author_solution.xsl style sheet
• Enter the code shown in Table 12–23 to start the XSL style sheet, and then press the ENTER key once after line 3
Chapter 12: Creating and Using XML Documents 35
Starting Creating an XSL Style Sheet
Chapter 12: Creating and Using XML Documents 36
Entering HTML Code to Display the Banner and Text Title in a Web Page
• Click line 4• Enter the code shown in Table 12–24 to enter the
HTML tags to center the banner and format the title text. Press the ENTER key after line 8
Chapter 12: Creating and Using XML Documents 37
Entering HTML Code to Display the Banner and Text Title in a Web Page
Adding XSL Style Sheet Tags
• If necessary, click line 9• Enter the code shown in Table 12–28, indenting
as shown, to complete the XSL style sheet
Chapter 12: Creating and Using XML Documents 38
Adding XSL Style Sheet Tags
Chapter 12: Creating and Using XML Documents 39
Saving an XSL Style Sheet
• With your USB drive plugged into your computer, click the Save icon on the Notepad++ toolbar to re-save the XSL style sheet chapter12-1author_solution.xsl
Chapter 12: Creating and Using XML Documents 40
Chapter 12: Creating and Using XML Documents 41
Linking an XSL Style Sheet to an XML Document
• Click the chapter12- 1classic_books.xml tab in Notepad++
• Click at the beginning of line 3, then press the ENTER key once
• On line 4, type <?xml-stylesheet type="text/xsl" href=”chapter12-1author_solution.xsl”?> to enter the code to link the XSL style sheet to the XML document, then press the ENTER key once
Chapter 12: Creating and Using XML Documents 42
Linking an XSL Style Sheet to an XML Document
Chapter 12: Creating and Using XML Documents 43
Saving and Testing an XML Document Formatted Using an XSL Style Sheet
• With the USB drive plugged into your computer, click the Save icon on the Notepad++ toolbar to save the chapter12- 1classic_books.xml file
• Activate the browser• Click the Address bar• Type g:\Chapter12\ ChapterFiles\chapter12-1classic_books.xml, and then press the ENTER key to display the XML document formatted by the XSL style sheet in author order
Chapter 12: Creating and Using XML Documents 44
Saving and Testing an XML Document Formatted Using an XSL Style Sheet
Chapter 12: Creating and Using XML Documents 45
Closing the XML and XSL Files in Notepad++
• With the Notepad++ window active, right-click the chapter12-1classic_books.xml file tab, and click Close on the shortcut menu
• Right-click the chapter12-1classics.xml file tab and click Close on the shortcut menu
• Right-click the chapter12-1author_solution.xsl file tab, and click Close on the shortcut menu
Chapter 12: Creating and Using XML Documents 46
Creating an HTML Document to Display XML Data in a Table
• Activate the open Notepad++ window• With a USB drive plugged into your computer,
open the file chapter12-1table.html from the Chapter12\ChapterFiles folder
• Click File on the menu bar, and then click Save As
• Type chapter12-1tablesolution.html in the File name text box
• Click the Save button in the Save As dialog box to save the file with a new name
Chapter 12: Creating and Using XML Documents 47
Creating an HTML Document to Display XML Data in a Table
Chapter 12: Creating and Using XML Documents 48
Entering Code to Link an XML Document with an HTML Web Page
• With the chapter12- 1tablesolution.html Notepad++ window active, click line 6
• Type <xml id=“dsoBooks” src=“chapter12-1 classic_titles.xml”></xml> to link the XML document to the HTML Web page. Do not press the ENTER key
Chapter 12: Creating and Using XML Documents 49
Entering Code to Link an XML Document with an HTML Web Page
Entering Code to Add Navigation Buttons
• Click line 15• Enter the code shown
in Table 12–32 on the previous page and press the ENTER key twice after line 18
Chapter 12: Creating and Using XML Documents 50
Entering <table> Table Header and Row Tags
• If necessary, click line 20• Enter the code shown in Table 12–33 to create
the table header and press the ENTER key once after line 29
Chapter 12: Creating and Using XML Documents 51
Entering <table> Table Header and Row Tags
Chapter 12: Creating and Using XML Documents 52
Entering <tr> Tags and Attribute Values to Bind XML Elements to a Table
• If necessary, click line 30
• Enter the code shown in Table 12–34 to bind the XML elements to the table rows. Do not press the ENTER key
Chapter 12: Creating and Using XML Documents 53
Chapter 12: Creating and Using XML Documents 54
Saving the HTML File and Testing the Web Page• With the USB drive plugged into your computer, click the Save
icon on the Notepad++ toolbar
• Activate your browser. If necessary, maximize the window
• Click the Address bar
• Type g:\Chapter12\ChapterFiles\chapter12 1tablesolution.html and then press the ENTER key so the Web page is displayed in the browser
• If necessary, click the security bar under the tabs, click Allow Blocked Content, then click Yes in the Security Warning dialog box
• Click the Next Page button
• Click the First Page button and then click the Last Page button to scroll through the table
Chapter 12: Creating and Using XML Documents 55
Saving the HTML File and Testing the Web Page
Chapter 12: Creating and Using XML Documents 56
Opening an HTML Document and Saving It with a New Name
• If necessary, click the Notepad++ button on the taskbar to activate the Notepad++ window
• Close the chapter12-1tablesolution.html document window
• With the USB drive plugged into your computer, open chapter12-1fi ndauthor.html, from the Chapter12\ChapterFiles folder
• Save the file as chapter12-findauthorsolution.html
Chapter 12: Creating and Using XML Documents 57
Entering Code to Bind an XML Document with an HTML Web Page
• With the chapter12findauthorsolution.html Notepad++ window active, click line 6
• Type <xmlid=“dsoBooks”src=“chapter12-1classic_titles.xml”></xml>, but do not press the ENTER key, to bind the XML document with the HTML code
Chapter 12: Creating and Using XML Documents 58
Entering Code to Bind an XML Document with an HTML Web Page
Chapter 12: Creating and Using XML Documents 59
Entering Code for the <input> and <button> Elements
• Click line 27• Enter the code in Table 12–35 on the previous
page. Do not press the ENTER key after line 29
Chapter 12: Creating and Using XML Documents 60
Entering Code for the <input> and <button> Elements
Chapter 12: Creating and Using XML Documents 61
Entering an HTML <div> Tag Container
• Click line 34• Type <divid=“SearchResult”style=“marginleft:10%”> and press the ENTER key
• On line 35, type </div> and do not press the ENTER key
Chapter 12: Creating and Using XML Documents 62
Entering an HTML <div> Tag Container
Entering Code for the findAuthor() User-Defined Function
• Click line 10• Enter the code shown in Table 12–36 on the
previous page and then press the ENTER key after line 17 to enter the findAuthor() user-defined function
Chapter 12: Creating and Using XML Documents 63
Entering Code to Search the Recordset Values and Build the Output String
• If necessary, click line 18
• Enter the code shown in Table 12–37 to search the recordset values and build the output string. Press the ENTER key after line 30
Chapter 12: Creating and Using XML Documents 64
Chapter 12: Creating and Using XML Documents 65
Entering Code to Complete the findAuthor() Function
• If necessary, click line 31• Enter the code shown in Table 12–38 to complete the
findAuthor() function and then press the ENTER key twice at line 35
Entering Code for the keyPressed() Function
• If necessary, click line 37• Enter the code shown in Table 12–39 to create
the keyPressed() function. Press the ENTER key twice after Line 40
Chapter 12: Creating and Using XML Documents 66
Entering Code for the clearField() Function
• If necessary, click line 42• Enter the code shown in Table 12–40 on the
previous page to create the clearField() function. Do not press the ENTER key after line 49
Chapter 12: Creating and Using XML Documents 67
Entering Code for the clearField() Function
Chapter 12: Creating and Using XML Documents 68
Chapter 12: Creating and Using XML Documents 69
Saving and Testing the HTML Document in the Browser• With your USB drive plugged into your computer, click the Save
icon on the Notepad++ toolbar• Click the browser button on the taskbar to activate the browser• Click the Address bar. Type g:\Chapter12\ChapterFiles\
chapter12-1findauthorsolution.html, and then press the ENTER key so the Web page is displayed in the browser
• If necessary, click the security bar under the tabs, click Allow Blocked Content, then click Yes in the Security Warning dialog box
• Enter the data values in the Author’s Name column in Table 12–41 in the input text box, and then click the Search button to test this Web page
Chapter 12: Creating and Using XML Documents 70
Saving and Testing the HTML Document in the Browser
Chapter 12: Creating and Using XML Documents 71
Verifying the Links on the Classic Books Home Page
• Click the Address bar• Type g:\Chapter12\ChapterFiles\chapter12-1homesolution.html, and then press the ENTER key to display the Web page in the browser
• Click the Books in Author Order image hot spot link• After viewing the Web page, click the Back button on the
browser toolbar to return to the Classic Books Web home page
• Click the Books in Title Order image hot spot link
Chapter 12: Creating and Using XML Documents 72
Verifying the Links on the Classic Books Home Page
• After viewing the Web page, click the Back button on the browser toolbar or click the Home link to return to the Classic Books Web page
• Click the Find Books image link• Type dickens in the search text field, and then
click Search to search for books written by Charles Dickens
Chapter 12: Creating and Using XML Documents 73
Verifying the Links on the Classic Books Home Page
Chapter 12: Creating and Using XML Documents 74
Quitting Notepad++ and the Browser
• Notepad++, click the File menu, then Close All• Click the Close button on the Notepad++ title bar• Click the Close button on the browser title bar. If
necessary, click the Close all tabs button
Chapter 12: Creating and Using XML Documents 75
Chapter Summary
• Describe how XML differs from HTML• Describe an XML document instance, and rules
for creating a well-formed and valid XML document
• Define the purpose of the processing instruction, the document prolog, and the document instance
• Describe an XML Schema Defi nition (XSD) language file
Chapter 12: Creating and Using XML Documents 76
Chapter Summary
• Create and bind an XSL style sheet file to an XML document
• Discuss the uses of an XML data island• Discuss the built-in table element methods for
displaying an XML document in a table• Create a JavaScript user-defined function to
search an XML document
HTML, XHTML, and CSS
Chapter 12 Complete
Creating and UsingXML Documents
top related