CIS Users web server - XMLix.cs.uoregon.edu/~michaelh/notes/xml/ch17-FIT-281/ch17... · 2011. 7. 17. · Getting started 2. Creating the first entry (April 26) 3. Thinking about the

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley

XML

HTML: Everyone can do some things.

-> Not extensible

XML: Someone can do everything.

-> Extensible, but technical

WWW: 1991. Tim Berners-Lee (HTTP)

XML 1.0: 1998.


XML

XML is a suite of technologies:

• DTD• Schema• XSL

• XSLT• XSL-FO (& CSS)

• XPATH• XLINK, XPointer (links & images)

The biggest obstacle to serving XML documents: No browser support fo XLink & XPointer -> XSLT (transform XML to HTML for display)


A Case Study in Database Organization

The iDiary Database

lawrence snyder

c h a p t e r 17



Ch. 17 Fluency 4/e

Chapter Organization

1. iDiary overview: personal diary, not a blog Structure the information with XML -> physical database

XSLT: transform to html to display in browser -> logical view

2. XML intro: construct a small Travels database

3. Construct iDiary db

Copyright © 2011 Pearson Education, Inc. Publishing as Pearson Addison-Wesley16-2

XML db vs. RDBMS

• Regular (-> RDBMS) Versus Irregular Data– The iDiary will be an irregular data

collection (-> XML)• Record things we find interesting in our daily

lives– Text, photos, URLs, animations, poems, videos, etc.

– Use XML to specify metadata• The database will be an XML tree• Use the Identity, Affinity, and Collection rules

– Organize the database by date• The iDiary added to each day


Thinking About a Personal Database (cont'd)

• Physical Versus Logical

– physical database: XML tree

– logical database: HTML view

– Use XSL to retrieve data for display• XSL converts the data to HTML• XSL acts like an RBDMS SQL query


The iDiary sample shows that the database will be a long and diverse list of daily entries: science news, book reviews, embedded videos, poetry, pictures, other topics


Preliminary Exercise: Travels DB

• A warm-up to work out the iDiary design• The XML Definition

– Entries in the database will be a list of countries– Each will have a name and a tour that contains

a list of sights, along with that country's flag<country>

<name flag=“file.gif”> Country name </name>

<tour> <sight> sight name </sight>

... <sight> sight name </sight>

</tour> </country>


• XML declaration:<?xml version=“1.0” encoding=“ISO-8859-1”?>

It defines the XML version (1.0) and the encoding used (ISO-8859-1 = Latin-1/West European character set).

• Make a root tag of <travels>• XML database saved is a file named travels.xml

• Direct Check of XML: Open travels.xml

– active display of XML tree

– open (+) and close (-) tags– but no presentation/style




Active display of XML tree:

tags illustrate Affinity & Collection Rules

• Affinity Rule: Group related data in a pair of tags -> properties of the same entity (eg) country element

• Collection Rule: Group several instances in a pair of tags -> all instances have same type (eg) travels element



Attributes: Use for metadata, not content

Attributes vs. Elements

•Data: store in an element

•Metadata: store in an attribute

<fact source=’wikipedia’> Josh Gibson is the only person in the history of baseball to hit a ball out of Yankee Stadium </fact>

Metadata: Information about data


Differentiating between data & metadata:

Q: Would you want to see this information?A: Yes => data; No => MetadataWhen in doubt => store in an element

Test: If all tags are removed from the document, the data should still be present.

XML Elements vs. Attributes: http://www.w3schools.com/dtd/dtd_el_vs_attr.asp

Metadata: Information about data


Displaying the Travels with XSL

• Connecting XML with Style– Style information tells the browser how to

display a markup language like XML– Style information comes from a companion

file with the file extension .xsl– Put in the XML file a line which tells the

browser where to find the style information <?xml-stylesheet type="text/xsl" href="TravelSS.xsl"?>



Displaying the Travels with XSL (cont'd)

• The Idea of XSL– The .xsl file contains a series of rules

(templates) on how to format (using XHTML) the information enclosed in XML tags in the database


• XSL Templates– XSL is really just XML with one template for

each XML tag, with XHTML for how to display the XML tag

<xsl:template match="XML tag name"> … </xsl:template>




• Creating the Travelogue Display– Each XML tag has a stylistic role to play in the

overall creation of the Web page



• The <travels> tag template <xsl:template match=“travels”>

<html><head><title>Travelogue</title>

<meta http-equiv=“Content-type”

content=“text/html;charset=ISO-8859-1”/>

<style type=“text/css”>

body{background-color:black;color:white;

font-family:helvetica}

</style></head>

<body><h2>Places I’ve Traveled</h2>

<table>

<xsl:apply-templates/>

</table></body></html>

</xsl:template>

Start of HTML page

End of HTML page

Process tag content



• The Apply Operation <xsl:apply-templates/>

– This tag means "now process whatever is inside this XML tag"

<xsl:template match="tour"> <td> <xsl:apply-templates/> </td> </xsl:template>



• Tag Attributes– Use curly braces to put information in paired quotes– @flag refers to the value of the flag attribute of the <name> tag

<xsl:template match="name">

<td style=“text-align:center”>

<xsl:apply-templates/> <br />

<img src="{@flag}” alt=“Country Flag” />

</td>

</xsl:template>

e.g. src=“{@flag}” becomes src=“fr-flag.gif”



• Summary of XSL– Browser opens the .xml file, finds a style

specification, opens the .xsl file, and begins to process the XML tree

– The process:• match a template

• do what needs to be done before processing the enclosed information (generate XHTML into the output)

• process the enclosed information

• do what needs to be done after processing the enclosed information (generate more XHTML)

• consider that tag processed



The iDiary Database

An Incremental approach1. Getting started2. Creating the first entry (April 26)3. Thinking about the nature of things4. Developing tags and templates5. Critiquing and evaluating the results


Getting Started

• Creating the XML Database (iDiary.xml)– Decide on root Collection tag (<idiary>) and

Affinity tags to enclose daily info (<entry>)

<?xml version=“1.0” encoding=“ISO-8859-1”?><idiary> <entry> This is the first entry </entry> <entry> This is the second entry </entry></idiary>


Getting Started

• Creating the XSL Stylesheet (iDiarySS.sxl)– Must recognize the two tags – <idiary> contains the setup for the Web page

(title, heading, italicized comment at the start of the page), table containing all the entries

– <entry> produces a row for the table:<xsl:template match=“entry”> <tr><td> <xsl:apply-templates/> </td></tr></xsl:template>



Creating the First Entry (April 26)

• Date Tagging– Let date be atomic, pick a date format, and surround with <date> tags (the easy way)

• Revising an <entry> – <mit> tagging most interesting thing that day

– Add XSL templates in iDiary.xsl for each new XML tag

• Critiquing the Design– Vertically align the date– Modify the color and font



Thinking About the Nature of Things

• Recognizing the Need for Specific Tags– Different kinds of data need different tags

• Link will have a URL specifying it• Image will have a source file, dimensions• Text will be written into the file• Video will have a URL, player dimensions

– Each will require different handling, different formatting


• Choosing Specific Tags<fact> normal text<title> centered text, larger font<link> anchor text, URL as attribute<pic> file name, width, height attributes<remark> left justified text, as caption<poem> groups poem component tags<ytvideo> URL for YouTube video embedding

• <mit> tag becomes more of an Affinity tag– Still a sister to the <date> tag, still identifies the

most interesting thing, style role continues

Thinking About the Nature of Things


Developing Tags and Templates

• The Fact Tag– Enclosed by the <mit> tag

• The Title Tag– Announces the most interesting thing entry

• The Link Tag– Specifies a Web link href="{@url}"

• The Picture Tag– Stand-alone tag; no need for <xsl:apply-templates/>– All information expressed as tag attributes


Developing Tags and Templates (cont'd)

• The Remark Tag– Captions and labels

• The Poetry Tags– Title, author, and lines of poetry – assign tags to

each

• The Video Tag– Display a player as an embedded object

(YouTube)– Stand-alone tag like the picture tag

• A Check of the Design





Critiquing and Evaluating the Results

• Form of Entries– Add breaks and horizontal line to

separate entries– Compact entries by limiting the width of

the table data

• Remarks On <remark>– New Label tag to bold the information it

encloses


Using the iDiary Daily

• Archiving Photos– Store all photos in a common permanent

folder– Putting the path to images in the XML file

(versus the XSL file) allows us to make references to images stored in different places, including images stored elsewhere on the Internet


Using the iDiary Daily (cont'd)

• Hiding Information– Enclose personal information you do not

want displayed in <personal> tags

– Do not include <xsl:apply-templates/> tag in the XSL template for <personal>

– Information inside the tags will be skipped– Note: Not enclosing information in a tag or

tagging it but not providing a template for the tag will result in the content being displayed


• Entering Data into the Database– Create a "template" for a new entry in the

XML database file– Dummy file names, URLs, widths, etc.– Just copy/paste this "template" and edit

into the specific content for the new entry

Using the iDiary Daily (cont'd)


Summary

• XML databases can record irregular data that relational databases cannot

• An XML database can be directly displayed by opening it in a Web browser

• Adding a stylesheet line to XML and building templates in XSL allows the XML file to be formatted for display by the browser


Summary

• A complex database can be set up incrementally, adding tags and templates one at a time, and checking that they work as planned.

• An XML database can optionally hide some of its information, allowing for selective display of its contents

Documents

CIS Users web server - XMLix.cs.uoregon.edu/~michaelh/notes/xml/ch17-FIT-281/ch17... · 2011. 7. 17. · Getting started 2. Creating the first entry (April 26) 3. Thinking about the