/* ExampleSnippets.

txt
**
** Example code snippets for XML Essential Training
*/
----------------------------------------------------------
CHAPTER 4: WORKING WITH XML
--- First XML File
<FirstTag>
This is our first XML file
<!-- This is a comment in the file -->
</FirstTag>
--- XML and CSS
<?xml-stylesheet type="text/css" href="FirstXMLFile.css"?>
FirstTag
{
display : block;
font-family : Arial;
font-size : large;
color : Blue;
}
--- Styling Tags with CSS
<?xml-stylesheet type="text/css" href="businesscard.css"?>
Name {
color: #0D3427;
font-weight: bold;
font-size: 140%;
display: block;
margin-bottom: 3%;
}
phone {
font-size: 90%;
color: #523819;
font-size: 90%;
display: block;
}
email {
color: #0D3427;
font-size: 90%;
font-weight: bold;
display: block;
margin-top: 3%;
}
--- Advanced XML with CSS
<?xml-stylesheet type="text/css" href="businesscard_CSS2.css"?>
Name {
color: #0D3427;
font-weight: bold;
font-size: 140%;
 display: block;
margin-bottom: 3%;
}
email {
color: #0D3427;
font-size: 90%;
font-weight: bold;
display: block;
margin-top: 3%;
}
email:before {content: "e-mail: "}
phone {
font-size: 90%;
color: #523819;
font-size: 90%;
display: block;
}
phone:before {content: attr(type) ": "}
phone[primary]:after {content: " (" attr(primary) ")"}

CHAPTER 5: USING THE DOM

--- Discovering DOM Content
function displayBusinessCardData() {
var xmldata1 = document.getElementById("xmldata1");
var bizCard = xmldata1.getElementsByTagName("BusinessCard")[0];
var name = "Name: " + bizCard.getElementsByTagName("Name")[0].firstChild
.data;
var phone1Label = bizCard.getElementsByTagName("phone")[0].getAttribute(
"type") + ": ";
var phone1 = phone1Label + bizCard.getElementsByTagName("phone")[0].firs
tChild.data;
var phone2Label = bizCard.getElementsByTagName("phone")[1].getAttribute(
"type") + ": ";
var phone2 = phone2Label + bizCard.getElementsByTagName("phone")[1].firs
tChild.data;
var phone3Label = bizCard.getElementsByTagName("phone")[2].getAttribute(
"type") + ": ";
var phone3 = phone3Label + bizCard.getElementsByTagName("phone")[2].firs
tChild.data;
var email = "email: " + bizCard.getElementsByTagName("email")[0].firstCh
ild.data;
alert("BusinessCard Data: \n\n" + name + "\n" + phone1 + "\n" + phone2 +
"\n" + phone3 + "\n" + email);
}

--- Extracting and Manipulating Data

function populateFields() {
var xmldata = document.getElementById("xmldata1");
var bizCard = xmldata.getElementsByTagName("BusinessCard")[0];
var name = bizCard.getElementsByTagName("Name")[0].firstChild.data;
 var phone1Str = bizCard.getElementsByTagName("phone")[0].getAttribute("t
ype") + ": ";
var phone1 = bizCard.getElementsByTagName("phone")[0].firstChild.data;
var phone2Str = bizCard.getElementsByTagName("phone")[1].getAttribute("t
ype") + ": ";
var phone2 = bizCard.getElementsByTagName("phone")[1].firstChild.data;
var phone3Str = bizCard.getElementsByTagName("phone")[2].getAttribute("t
ype") + ": ";
var phone3 = bizCard.getElementsByTagName("phone")[2].firstChild.data;
var email = bizCard.getElementsByTagName("email")[0].firstChild.data;
document.getElementById("Name").innerHTML = name;
document.getElementById("phone1").innerHTML = phone1Str + phone1;
document.getElementById("phone2").innerHTML = phone2Str + phone2;
document.getElementById("phone3").innerHTML = phone3Str + phone3;
document.getElementById("email").innerHTML = "email: " + email;
document.querySelector("#hideEmail").addEventListener("click
", hideEmail);
document.querySelector("#showEmail").addEventListener("click
", showEmail);
}

function hideEmail() {
document.getElementById("email").style.display = 'none';
}
function showEmail() {
document.getElementById("email").style.display = '';
}
window.addEventListener("load", populateFields);
--- Creating New Document Content
// for each business card, loop over its tags an
d create a new <div> to
// each card along with the information for all
the fields
for (var i=0; i < bizCards.length; i++) {
var currentCard = bizCards[i]; // store a re
ference to the current <BusinessCard>
// make a new <div> for the whole card
var newCard = document.createElement("div");
newCard.setAttribute("className","BusinessCa
rd");
newCard.setAttribute("class","BusinessCard")
;
// now create a <div> for the name
var newName = document.createElement("div");
newName.setAttribute("className","Name");
newName.setAttribute("class","Name");
var nameStr = document.createTextNode(curren
tCard.getElementsByTagName("Name")[0].firstChild.data);
newName.appendChild(nameStr);
newCard.appendChild(newName);
// create separate <divs> for the phones
 var phones = currentCard.getElementsByTagNam
e("phone");
var newPhone;
for (var j=0; j < phones.length; j++) {
newPhone = document.createElement("div")
;
newPhone.setAttribute("className","phone");
newPhone.setAttribute("class","phone");
var labelStr = currentCard.getElementsByTagN
ame("phone")[j].getAttribute("type") + ": ";
var phoneStr = document.createTextNode(label
Str + currentCard.getElementsByTagName("phone")[j].firstChild.data);
newPhone.appendChild(phoneStr);
newCard.appendChild(newPhone);
}
// create a <div> for the email
var newEmail = document.createElement("div")
;
newEmail.setAttribute("className","email");
newEmail.setAttribute("class","email");
var emailStr = document.createTextNode("emai
l: " + currentCard.getElementsByTagName("email")[0].firstChild.data);
newEmail.appendChild(emailStr);
newCard.appendChild(newEmail);
// now add the new <div> containing the card info to the
web page
document.getElementsByTagName("body")[0].app
endChild(newCard);
}

CHAPTER 8: XSLT EXAMPLES

--- Simple Transform
<?xml-stylesheet type="text/xsl" href="simpletransform.xslt"?>
<xsl:template match="/JavacoTea">
<html>
<head>
<title>New Herbal Tea Available!</title>
</head>
<body>
<img src="photos/javaco_tea_logo.gif" />
<h1>
</h1>
</body>
</html>
</xsl:template>
<xsl:value-of select="text()"/>
--- XSLT and CSS
<link rel="stylesheet" href="simpletransform.css"/>
--- Repeating Items
<xsl:for-each select="/items/item">
<h1 style="color:#0D3427">
<img style="border:0; margin:0px 10px 0p
x 10px">
<xsl:attribute name="src">
<xsl:value-of select="ph
oto"/>
</xsl:attribute>
</img>
<xsl:value-of select="name"/>
<xsl:text> ... </xsl:text>
<xsl:value-of select="type"/>
</h1>
</xsl:for-each>

--- Conditional Logic

<xsl:if test="@available = 'no'">
<h1 style="color:#8A8A8A">
<img style="border:0; margin-lef
t:10px">
<xsl:attribute name="src
">
<xsl:value-of se
lect="photo"/>
</xsl:attribute>
</img>
<xsl:value-of select="name"/>
<xsl:text> </xsl:text>
<xsl:value-of select="type"/>
</h1>
</xsl:if>
<xsl:if test="@available = 'yes'">
<h1 style="color:#0D3427">
<img style="border:0; margin-left:10px">
<xsl:attribute name="src">
<xsl:value-of se
lect="photo"/>
</xsl:attribute>
</img>
<xsl:value-of select="name"/>
<xsl:text> </xsl:text>
<xsl:value-of select="type"/>
</h1>
</xsl:if>

<xsl:choose>
<xsl:when test="@available = 'no'">
<h1 style="color:#8A8A8A">
<img style="border:0; margin-left:10px">
<xsl:attribute name="src">
<xsl:value-of select="photo"/>
</xsl:attribute>
</img>
<xsl:value-of select="name"/>
<xsl:text> </xsl:text>
 <xsl:value-of select="type"/>
</h1>
</xsl:when>
<xsl:when test="@available = 'soon'">
<h1 style="color:#000077">
<img style="border:0; margin-left:10px">
<xsl:attribute name="src">
<xsl:value-of select="photo"/>
</xsl:attribute>
</img>
<xsl:value-of select="name"/>
<xsl:text> </xsl:text>
<xsl:value-of select="type"/>
</h1>
</xsl:when>
<xsl:otherwise>
<h1 style="color:#0D3427">
<img style="border:0; margin-left:10px">
<xsl:attribute name="src">
<xsl:value-of select="photo"/>
</xsl:attribute>
</img>
<xsl:value-of select="name"/>
<xsl:text> </xsl:text>
<xsl:value-of select="type"/>
</h1>
</xsl:otherwise>
</xsl:choose>

--- Sorting XML Data

<xsl:sort select="@available" order="descending"/>

CHAPTER 9: DOCUMENT TYPE DEFINITIONS

--- Declaring a DTD for BusinessCard
<!ELEMENT BusinessCard (Name, phone+, email?)>
<!ELEMENT Name (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ATTLIST phone type (mobile | fax | work | home) #REQUIRED>
<!ELEMENT email (#PCDATA)>
--- Associating a DTD
<!DOCTYPE BusinessCard SYSTEM "businesscard.dtd">
CHAPTER 10: XML SCHEMA
--- Defining a Schema
<xsd:element name="BusinessCard">
<xsd:complexType>
</xsd:complexType>
</xsd:element>
<xsd:sequence>
</xsd:sequence>
<xsd:element name="Name" type="xsd:string"/>
<xsd:element name="phone" maxOccurs="unbounded">
<xsd:complexType mixed="true">
<xsd:attribute name="type" use="required">
<xsd:simpleType>
<xsd:restriction base="xsd:string">
<xsd:enumeration value="mobile"/>
<xsd:enumeration value="fax"/>
<xsd:enumeration value="work"/>
<xsd:enumeration value="home"/>
</xsd:restriction>
</xsd:simpleType>
</xsd:attribute>
</xsd:complexType>
</xsd:element>
<xsd:element name="email" type="xsd:string" minOccurs="0" />