CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML...

17
CIS 275—Web App Dev I XML

Transcript of CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML...

Page 1: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

CIS 275—Web App Dev I

XML

Page 2: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

2

Introduction to XML XML stands for ________________________. HTML was designed to display data. XML was designed to _________ data. With XML, you define your own _______. Sample XML document:

<?xml version="1.0" encoding="ISO-8859-1"?> <note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

Page 3: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

3

How can XML be Used?

With XML, data can be stored separately from the ______ code.

With XML, data are stored in plain _____ format.

With XML, data can be exchanged between ____________ systems.

Important languages like _____ are written in XML.

XML is important for _____ applications.

Page 4: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

4

XML Document Structure

Sample XML document:<?xml version="1.0" encoding="ISO-8859-1"?> <note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note> The XML document above consists of

an XML ___________ One ______ element Four _______ elements

Page 5: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

5

XML Syntax

All XML elements must have a _________ tag. XML tags are ______ sensitive. XML elements must be properly nested.<b><i>This text is bold and italic</i></b>

All XML documents must have a ______ element.

Attribute values must be _________.

<note date="12/11/2002"> Comments in XML look like this:<!-- This is a comment -->

Page 6: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

6

XML Elements XML documents are _________. New elements can

be added without crashing an existing application. XML elements have ____________ (there are parent,

child, and sibling elements). Elements have content

Some have only element content (e.g., the root element)

Some have simple (_____) content <title>My First XML</title>

Some have mixed content (element and simple) Some have no content

<prod id="33-657" media="paper"></prod> Elements may have ___________

Page 7: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

7

Element Content

<?xml version="1.0" encoding="ISO-8859-1"?>

<book> <title>My First XML</title> <prod id="33-657"

media="paper"></prod><chapter>Introduction to XML <para>What is HTML</para> <para>What is XML</para> </chapter> <chapter>XML Syntax <para>Elements must have a

closing tag</para><para>Elements must be properly

nested</para></chapter> </book>

In this example, <book> has _________ content, because it contains other elements.

<chapter> has _______ content because it contains both text and other elements.

<para> has ________ content (or text content) because it contains only text.

<prod> has _______ content, because it carries no information.

Page 8: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

8

XML Attributes

Element attributes are not part of the data, but contain information about the data.<file type="gif">computer.gif</file>

You should try to avoid using attributes, especially if the information feels like basic data.

One good use of attributes is for _____________.<messages>

<note id="p501">

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note> …

Page 9: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

9

XML Validation A “well formed” XML document has correct _______. A “valid” XML document is both well formed and

conforms to a DTD (__________ Type Definition).<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE note SYSTEM "InternalNote.dtd">

A DTD defines document structure and legal ______. An XML _________ is the W3C alternative to DTD. Invalid XML documents will not execute properly. See http://www.w3.org/XML/Schema.html for details. XML validators:

http://www.w3schools.com/dom/dom_validate.asp

Page 10: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

10

Internal DOCTYPE Declaration

<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE note [

<!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)>

]> <note>

<to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend</body>

</note>

#PCDATA means “_______ character data.”

Page 11: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

11

External DOCTYPE Declaration

XML (note.xml)<?xml version="1.0"?> <!DOCTYPE note SYSTEM

"note.dtd"> <note>

<to>Tove</to> <from>Jani</from> <heading>Reminder</heading>

<body>Don't forget me this weekend</body>

</note>

DTD (note.dtd)<!ELEMENT note

(to,from,heading,body)>

<!ELEMENT to (#PCDATA)>

<!ELEMENT from (#PCDATA)>

<!ELEMENT heading (#PCDATA)>

<!ELEMENT body (#PCDATA)>

Page 12: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

12

Why use a DTD?

With DTD, your XML files can carry a description of its own _________ with it.

With a DTD, independent groups of people can agree to use a common DTD for ___________ data.

Your application can use a _________ DTD to verify that the data you receive from the outside world is valid.

You can also use a DTD to _______ your own data.

Page 13: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

13

Viewing XML Files An XML document can be viewed in IE 5.0+

by typing the URL or double-clicking the icon. Look at this XML file: note.xml. Invalid XML files will not display:

note_error.xml. Other Examples

An XML CD catalog An XML plant catalog A Simple Food Menu

Page 14: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

14

Displaying XML with CSS You can view an XML with the help of a CSS,

but this is not the future of XML. Take a look at this pure XML file:

The CD Catalog Then look at this style sheet: The CSS file Finally, view

the CD Catalog formatted with the CSS file You can write a web page using XML, but this

is not recommended: A homepage written in XML.

______ (HTML defined as XML) is recommended for creating web pages.

Page 15: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

15

Displaying XML with XSL XSL (__________ Style Language) is the

preferred style sheet language of XML. XSL is far more sophisticated than CSS. If you have Netscape 6 or IE 5 or higher you

can view the XML file and the XSL style sheet. View the result in IE 6 View the result in IE 5

Page 16: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

16

XML Embedded in HTML The unofficial ______ tag is used to embed XML

data within HTML.<xml id="note">

<note>

<to>Tove</to>

<from>Jani</from>

<heading>Reminder</heading>

<body>Don't forget me this weekend!</body>

</note>

</xml>

You can embed a separate XML file.<xml id="note" src="note.xml"> </xml>

<xml>

Page 17: CIS 275—Web App Dev I XML. 2 Introduction to XMLXML XML stands for ________________________. HTML was designed to display data. XML was designed to _________.

17

Data Binding Example of binding a data island to an HTML

element (in the following case, _______):<html> <body> <xml id="cdcat" src="cd_catalog.xml"></xml> <table border="1" datasrc="#cdcat"> <tr> <td><span datafld="ARTIST"></span></td> <td><span datafld="TITLE"></span></td> </tr> </table> </body> </html>

Here is the result. Here is the external XML file.

<table>