Extensible Markup Language XML

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

2
Introduction
3
Introduction
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

5
Introduction
6
Creating a Well-Formed XML Document

• Prolog
• Contains declaration and processing instruction
  statements
• Document instance
• Contains the main content or elements of the XML
  document
• Processing 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

7
(No Transcript)
8
Creating a Well-Formed XML Document

• Document 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
  document
• Validity of XML documents
• Instance
• Occurrence of XML elements
• Root element
• The main element in an XML document

9
Document Type Definition (DTD)
10
Creating the Prolog in an XML Document
11
Creating the Prolog in an XML Document
12
(No Transcript)
13
Creating the Document Instance in an XML Document
14
Creating the Document Instance in an XML Document

• Generic Identifier (GI)
• The name that a developer provides for the tags
• Namespace
• 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

15
(No Transcript)
16
(No Transcript)
17
Linking a Cascading Style Sheet to Format an XML
Document

• Makes XML easier to read
• Start a new Notepad document
• Click line 1
• Enter the code shown on the following slide

18
(No Transcript)
19
(No Transcript)
20
Formatting and Manipulating an XML Document Using
an XSL Style Sheet

• Extensible Stylesheet Language
• Binding XML documents to HTML Web pages

21
Formatting and Manipulating an XML Document Using
an XSL Style Sheet

• Transforming 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
• Source
• Result tree

22
Creating an XSL Style Sheet

• Stylesheet element
• Establishes a namespace, so the remaining
  elements can use names that will not be confused
  with other elements

23
Creating an XSL Style Sheet

• Template
• An instruction that identifies which elements in
  a document should be transformed, and how they
  should be transformed

24
(No Transcript)
25
(No Transcript)
26
Adding XML Tags to a Template Element in an XSL
Style Sheet

• Click line 4
• Enter the code shown on the following slide

27
(No Transcript)
28
(No Transcript)
29
Adding XML Tags to a Template Element in an XSL
Style Sheet

• for-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 Sheet

• value-of element
• Defines the display for each element within the
  PHONELIST

31
(No Transcript)
32
(No Transcript)
33
Saving an XSL Style Sheet

• With 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

34
Linking an XSL Style Sheet to an XML Document
35
Linking an XSL Style Sheetto an XML Document

• Activate the Notepad window containing the XML
  document, clublist.xml
• Click line 3
• Type lt?xml-stylesheet typetext/xsl
  hrefxslalphaclublist.xsl?gt but do not press
  the ENTER key

36
(No Transcript)
37
Saving and Testing an XML Document Formatted
Using an XSL Style Sheet

• With 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 browser
• Click the Address bar. Type a\Project
  11\clublist-xsl.xml and then press the ENTER key

38
(No Transcript)
39
Closing the Notepad Window Containing the XSL
Style Sheet

• Activate 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 Table

• Data 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

41
(No Transcript)
42
Using Paging to Display XML Data in a Table

• Data 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

43
Using Paging to Display XML Data in a Table
44
Creating an HTML Document to Display XML Data in
a Table

• Activate 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

45
(No Transcript)
46
Entering Code to Bind an XML Document with an
HTML Web Page

• With the clubsponsor-table.htm Notepad window
  active, click line 6
• Type ltXML IDdsoClub SRCclublist.xmlgtlt/XMLgt
  but do not press the ENTER key

47
(No Transcript)
48
Entering Code to Add Navigation Buttons
49
Entering Code to Add Navigation Buttons

• Click line 12
• Enter the following code

50
(No Transcript)
51
Start Entering Code to Bind XML Elements to a
Table

• Click line 16
• Enter the following code

52
(No Transcript)
53
Finish Entering Code to Bind XML Elements to an
HTML Table

• Click line 24
• Enter the following code

54
(No Transcript)
55
Saving the HTML File on the Data Disk

• With your HTML Data Disk in drive A, click File
  on the menu bar and then click Save

56
Testing the HTML Web Page

• Activate your browser. If necessary, maximize
  the window
• Click 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

57
(No Transcript)
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 Results

• If necessary, click the Notepad button on the
  taskbar to activate the Notepad window
• With the HTML Data Disk in drive A, open the
  file, findclub.htm
• Click 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 Page

• With the findclubsponsor.htm Notepad window
  active, click line 6
• Type ltXML IDdsoclublist SRCclublist.xmlgtlt/XM
  Lgt but do not press the ENTER key

61
(No Transcript)
62
Entering Code to Add the ltINPUTgt and ltBUTTONgt
Elements

• Click line 11
• Type ltINPUT TYPETEXT IDSearchText
  SIZE20gtnbspltBUTTON ONCLICKFindClub()gtSearch
  lt/BUTTONgt but do not press the ENTER key

63
(No Transcript)
64
Entering the ltDIVgt Element

• Click line 14
• Type ltDIV IDSearchResultsgtlt/DIVgt but do not
  press the ENTER key

65
(No Transcript)
66
The JavaScript User-Defined Function, FindClub()

• Converts the SearchText text box input value into
  uppercase characters
• Validates that the input value is not blank or
  empty
• Moves to the first record in the XML document
• Compares 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 Function

• Click line 15
• Type ltSCRIPT LANGUAGEJavaScriptgt and then
  press the ENTER key
• Type lt!-- 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

68
(No Transcript)
69
Entering Code to Start the FindClub()
User-Defined Function

• toUpperCase() method

70
Entering the Conversion and Validation Statements
in the FindClub() User-Defined Function

• Click line 18
• Enter the following code

71
(No Transcript)
72
Entering Code to Complete the FindClub()
User-Defined Function

• Click line 23
• Enter the code shown on the following slide

73
(No Transcript)
74
(No Transcript)
75
Saving and Testing the HTML Document in the
Browser

• With your HTML Data Disk in drive A, click File
  on the menu bar and then click Save
• Click the browser button on the taskbar to
  activate the browser
• Click 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

76
(No Transcript)
77
(No Transcript)
78
Verifying the Links in the Main Student Services
Clubs Web Page

• Click 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 Page

• Click 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

80
(No Transcript)
81
Closing Notepad and Your Browser

• Click the Close button on the browser title bar
• Click the Close button on the Notepad window
  title bar

82
Summary

• Describe an XML document
• State the W3C design goals for creating XML tags
• Name 10 real-world uses for XML
• State the syntax rules for a well-formed and
  valid XML document
• State 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 document
• Describe the purpose of XSL style sheets

84
Summary

• Bind an XSL style sheet to an XML document
• Describe the XSL template, for-each, order-by,
  and value-of elements
• Bind an XML document to an HTML Web page
• Discuss the build-in table element methods
• Create a JavaScript user-defined function to
  search an XML document
• Define recordset and describe how the EOF
  property is used

85
What You Should Know
86
Project 11 Complete