Introduction
description
Transcript of Introduction
1
Introduction
Extensible Markup Language (XML)– Uses tags to describe the structure of a
document– Simplifies the process of sharing
information– Extensible Stylesheet Language (XSL)– XML is a subset of Standard Generalized
Markup Language
4
Introduction
Documents must be well-formed– Must adhere to the basic syntax rules for
XML and contain at least one root element
A parser is an XML processor that verifies the document follows the syntax rules for a well-formed document and converts the document into a tree of elements
6
Creating a Well-Formed XML DocumentProlog
– Contains declaration and processing instruction statements
Document instance– Contains the main content or elements of the
XML documentProcessing instruction
– One or more instructions passed to the application using the XML document
XML declaration– Processing instruction statement identifying the
version of XML used in the document
8
Creating a Well-Formed XML DocumentDocument type declaration
– A processing instruction that tells the processor where to locate the Document Type Definition
Document Type Definition (DTD)– Defines the elements and attributes in an XML
documentValidity of XML documentsInstance
– Occurrence of XML elementsRoot element
– The main element in an XML document
14
Creating the Document Instance in an XML DocumentGeneric Identifier (GI)
– The name that a developer provides for the tagsNamespace
– A unique identifier or prefix used to identify tags that have the same name
Relation– A collection of data
Schema– States the relation name and follows with a list of
attributes or fields in parentheses
17
Linking a Cascading Style Sheet to Format an XML DocumentMakes XML easier to readStart a new Notepad documentClick line 1Enter the code shown on the following
slide
20
Formatting and Manipulating an XML Document Using an XSL Style SheetExtensible Stylesheet LanguageBinding XML documents to HTML Web
pages
21
Formatting and Manipulating an XML Document Using an XSL Style SheetTransforming an XML document
– The XSL style sheet tells the browser or parser to output the XML document in a completely different form, such as HTML
SourceResult tree
22
Creating an XSL Style SheetStylesheet element
– Establishes a namespace, so the remaining elements can use names that will not be confused with other elements
23
Creating an XSL Style SheetTemplate
– An instruction that identifies which elements in a document should be transformed, and how they should be transformed
26
Adding XML Tags to a Template Element in an XSL Style SheetClick line 4Enter the code shown on the following
slide
29
Adding XML Tags to a Template Element in an XSL Style Sheetfor-each element
– Makes each element of the XML document display in the table
30
Adding XML Tags to a Template Element in an XSL Style Sheetvalue-of element
– Defines the display for each element within the PHONELIST
33
Saving an XSL Style SheetWith your HTML Data Disk in drive A,
click File on the menu bar and then click Save As. Type xslalphaclublist.xsl in the File name text box. Save to the Project 11 folder on your HTML Data Disk
35
Linking an XSL Style Sheetto an XML DocumentActivate the Notepad window
containing the XML document, clublist.xml
Click line 3Type <?xml-stylesheet type=“text/xsl” href=“xslalphaclublist.xsl”?> but do not press the ENTER key
37
Saving and Testing an XML Document Formatted Using an XSL Style SheetWith your HTML Data Disk in drive A, click
File on the menu bar and then click Save As. Type clublist-xsl.xml in the File name text box. Save to the Project 11 folder on your HTML Data Disk
Activate the browserClick the Address bar. Type a:\Project 11\clublist-xsl.xml and then press the ENTER key
39
Closing the Notepad Window Containing the XSL Style SheetActivate the Notepad window
containing the XSL style sheet, xslalphaclublist.xsl
Click the Close button on the Notepad title bar
40
Using Paging to Display XML Data in a TableData binding
– Mapping the XML elements to a data format that preserves the hierarchy of the data and allows the data to be manipulated using different methods
42
Using Paging to Display XML Data in a TableData island
– A set of data elements separate from the main HTML Web page
Data Source Object (dso)Recordset
– A collection of data records and their fields
44
Creating an HTML Document to Display XML Data in a TableActivate the Notepad Window
containing the XML document, clublist-xsl.xml
With the HTML Data Disk in drive A, open the file, clubsponsor.htm
Save this file to the Project 11 Folder on your Data Disk with the name, clubsponsor-table.htm
46
Entering Code to Bind an XML Document with an HTML Web PageWith the clubsponsor-table.htm
Notepad window active, click line 6Type <XML ID=“dsoClub” SRC=“clublist.xml”></XML> but do not press the ENTER key
49
Entering Code to Add Navigation ButtonsClick line 12Enter the following code:
51
Start Entering Code to Bind XML Elements to a TableClick line 16Enter the following code
53
Finish Entering Code to Bind XML Elements to an HTML TableClick line 24Enter the following code:
55
Saving the HTML File on the Data DiskWith your HTML Data Disk in drive A,
click File on the menu bar and then click Save
56
Testing the HTML Web PageActivate your browser. If necessary,
maximize the windowClick the Address bar. Type a:\Project
11\clubsponsor-table.htm and then press the ENTER key
Click the Next Page button. Click the First Page button and then click the Last Page button
58
Using JavaScript to Search an XML Document and Display Results on a Web Page
59
Creating an HTML Document to Search an XML Document and Display ResultsIf necessary, click the Notepad button on the
taskbar to activate the Notepad windowWith the HTML Data Disk in drive A, open
the file, findclub.htmClick File on the menu bar and then click
Save As. Type findclubsponsor.htm in the File name text box. Save to the Project 11 folder on your HTML Data Disk
60
Entering Code to Link an XML Document with an HTML Web PageWith the findclubsponsor.htm Notepad
window active, click line 6Type <XML ID=“dsoclublist” SRC=“clublist.xml”></XML> but do not press the ENTER key
62
Entering Code to Add the <INPUT> and <BUTTON> ElementsClick line 11Type <INPUT TYPE=“TEXT” ID=“SearchText” SIZE=“20”> <BUTTON ONCLICK=‘FindClub()’>Search</BUTTON> but do not press the ENTER key
64
Entering the <DIV> ElementClick line 14Type <DIV ID=SearchResults></DIV> but do not press the ENTER key
66
The JavaScript User-Defined Function, FindClub()Converts the SearchText text box input
value into uppercase charactersValidates that the input value is not blank or
emptyMoves to the first record in the XML
documentCompares each element in the XML
document with the text box value until a match is found
Constructs an output text string with search results
67
Entering Code to Start the FindClub() User-Defined FunctionClick line 15Type <SCRIPT LANGUAGE=“JavaScript”> and then press the ENTER key
Type <!-- Hide from old browsers and then press the ENTER key
Press the SPACEBAR four times to indent the function name. Type function FindClub() { and then press the ENTER key
69
Entering Code to Start the FindClub() User-Defined FunctiontoUpperCase() method
70
Entering the Conversion and Validation Statements in the FindClub() User-Defined FunctionClick line 18Enter the following code:
72
Entering Code to Complete the FindClub() User-Defined FunctionClick line 23Enter the code shown on the following
slide
75
Saving and Testing the HTML Document in the BrowserWith your HTML Data Disk in drive A, click
File on the menu bar and then click SaveClick the browser button on the taskbar to
activate the browserClick the Address bar. Type a:\Project 11\findclubsponsor.htm and then press the ENTER key
Enter the club name, spanish, and then click the Search button
Repeat the previous step using the test data on the following slide
78
Verifying the Links in the Main Student Services Clubs Web PageClick the Address bar. Type a:\Project
11\club-index.htm and then press the ENTER key
Click the Browser alphabetic list link. After the Student Clubs List by Club Name Web page displays, click the Back button on the browser toolbar to return to the main Student Services Clubs Web page
79
Verifying the Links in the Main Student Services Clubs Web PageClick the Search by club name link.
After the Find a Club Sponsor Web page displays, click the Back button on the browser toolbar to return to the main Student Services Clubs Web page
Click the Browse sponsor link
81
Closing Notepad and Your BrowserClick the Close button on the browser
title barClick the Close button on the Notepad
window title bar
82
Summary
Describe an XML documentState the W3C design goals for
creating XML tagsName 10 real-world uses for XMLState the syntax rules for a well-formed
and valid XML documentState the rules for creating a generic
identifier (GI)
83
Summary
Define document prolog and document instance
Describe the purpose of processing instructions
Describe the purpose of Document Type Definitions (DTD)
Bind a CSS file to an XML documentDescribe the purpose of XSL style
sheets
84
SummaryBind an XSL style sheet to an XML
documentDescribe the XSL template, for-each, order-
by, and value-of elementsBind an XML document to an HTML Web
pageDiscuss the build-in table element methodsCreate a JavaScript user-defined function to
search an XML documentDefine recordset and describe how the EOF
property is used
HTMLComprehensive Concepts and TechniquesSecond Edition
Project 11 Complete