TECHNOLOGIE SIECI WEB

(1)

TECHNOLOGIE SIECI WEB

Prowadzący: dr inż. Jan Prokop, e-mail: [email protected], Politechnika Rzeszowska, Wydział Elektrotechniki i Informatyki

LABORATORIUM

ĆWICZENIE nr 5

Temat: Podstawy języka XML



Wyświetlanie pliku XML w przeglądarce

b

booookk..xxmmll

<book>

<author name>Jan Nowak</author name> <title>Podstawy języka XML</title> <.price>76.30 PLN</.price>

</book> <book>

<author name>Piotr Kowal</author name> <title>Język XSL</title> <.price>143.60 PLN</.price> </book> </catalog> L Liinnkkii:: h httttpp::////wwwwww..ww33..oorrgg//XXMMLL// http://www.w3.org/TR/REC-xml/ h httttpp::////wwwwww..ww33..oorrgg//SSttyyllee//XXSSLL// h httttpp::////wwwwww..ww33..oorrgg//XXMMLL//SScchheemmaa h httttpp::////wwwwww..xxmmll..ccoomm// Narzędzia do języka XML: http://www.xmlspy.com/ http://www.w3c.org/Amaya

Wyświetlić dokument book.xml w przeglądarce (bez zmiany deklaracji dokumentu, np. <?xml version="1.0"

encoding="ISO-8859-2"?>)

Zastosować edytor XML Notepad do edycji pliku XML. Zastosować encje ogólne (wewnątrz elementu) według tabeli:

< <

> >

& &

" " ' '

Wprowadzić sekcję danych w pliku XML (wewnątrz elementu)

<![CDATA[

Wpisywanie dowolnych znaków, np.: < > !

% & " '

]]>

W WpprroowwaaddzziiććddoopplliikkuuXXMMLLnnaazzwwyy z znnaacczznniikkóóww::

<

n

a

m

e

%

>

<

f

i

r

s

t

n

a

m

e

>

<

1

1 n

n

a

m

e

>

<.name>



_{Zastosowanie kaskadowych arkuszy stylów}

Przykład 1. Wyświetlić plik

color.xml

z arkuszem

stylów

color.css

color.xml color.css

<?xml version="1.0"?>

<?xml_stylesheet type="text_css" href="color.css"?> <COLOR> <blue>Niebieski</blue> <purple>Purpurowy</purple> <red>Czerwony</red> <silver>Srebrny</silver> <white>Biały</white> <yellow>Żółty</yellow> </COLOR> COLOR { background-color:#AAAAAA; font-size:30px; font-weight:bold; font-family:arial; text-align:center; } blue {color:blue;} purple {color:purple} red {color:red} silver {color:silver} white {color:white} yellow {color:yellow}

(2)

Przykład 2. Uzupełnić plik

book.xml

o linię:

<?xml_stylesheet type="text/css" href="book.css"?>

Przygotować plik

book.css

i wyświetlić uzupełniony plik

book.xml

w przeglądarce.

b booookk..ccssss

catalog {display:table; width:800px;} book {display:table-row; width:auto;}

author {display:table-cell; text-align:left; width:200px; background-color:olive;} title {display:table-cell; text-align:center; width:300px;background-color:blue;} price {display:table-cell; text-align:right; width:150px; background-color:red;} author, title, price {border:none; padding:1ex;}



Zastosowanie arkuszy stylów XSL

Uzupełnić plik

book.xml

o poniższą linię:

<?xml-stylesheet type="text/xsl" href="simple.xsl"?>

Przygotować plik

simple.xsl

i wyświetlić uzupełniony plik

book.xml

w przeglądarce.

s

siimmppllee..xxssll

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/">

<xsl:for-each select="catalog/book">

<div style="background-color:silver; font-size: 20pt; color:white;

padding:6px"> <xsl:value-of select="title"/> - <span style="font-weight:italic;

font-weight:bold;color:red;"> <xsl:value-of select="price"/></span> </div> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>



Technika wiązania danych

kontrahenci.xml

<?xml version="1.0?> <KONTRAHENCI>

<FIRMA>

<NAZWA> Discovery Sp. z o.o. </NAZWA> <ULICA> ul. Hetmańska 40 </ULICA> <MIASTO> Warszawa </MIASTO>

<FIRMA>

<NAZWA> Auto-Max s.c. </NAZWA> <ULICA>ul. Lwowska 15 </ULICA> <MIASTO> Lublin </MIASTO> <KOD>35-301 </KOD>

(3)

kontrahenci.html <html> <head><title>Kontrahenci</title></head> <body> <xml id="ident" src="kontrahenci.xml"></xml> <h2>Kontrahenci</h2>

<table datasrc="#ident" border="1" cellpadding="5"> <thead> <th>Nazwa firmy</th> <th>Ulica</th> <th>Miasto</th> <th>Kod</th> <th>Telefon</th> </thead> <tr align="center">

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

Zbudować stronę HTML w oparciu o ukrytą tabelę i pobierać dane do tej strony z pliku XML



Użycie parsera przeglądarki oraz DOM

b booookk__ppaarrsseerr..xxmmll <?xml version="1.0"?> <book> <autor>Bruce Eckel</autor> <title>Thinking in JAVA</title>

<publisher>PRENTICE HALL, INC</publisher> <price>50 USD</price> </book> b booookk__ppaarrsseerr..hhttmmll <html> <head> <title>Zastosowanie parsera</title> <script type="text/javascript"> var xmlDoc function loadXML() { if (window.ActiveXObject) {

xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async=false;

xmlDoc.load("book_parser.xml"); getElements()

}

else if (document.implementation &&

document.implementation.createDocument) { xmlDoc= document.implementation.createDocument("","",null); xmlDoc.load("book_parser.xml"); xmlDoc.onload=getElements } else {

alert('Your browser cannot handle this script'); } } function getElements() { document.getElementById("id_autor").innerHTML = xmlDoc.getElementsByTagName("autor")[0].firstChild.nodeValue; document.getElementById("id_title").innerHTML =

(4)

xmlDoc.getElementsByTagName("title")[0].firstChild.nodeValue; document.getElementById("id_publisher").innerHTML = xmlDoc.getElementsByTagName("publisher")[0].firstChild.nodeValue; document.getElementById("id_price").innerHTML = xmlDoc.getElementsByTagName("price")[0].firstChild.nodeValue; } </script> </head> <body onload="loadXML()"> <h1>Book</h1>

<b>Autor:</b> <span id="id_autor"></span><br /> <b>Title:</b> <span id="id_title"></span><br /> <b>Publisher:</b> <span id="id_publisher"></span><br /> <b>Price:</b> <span id="id_price"></span><br /> </body>

</html>



Aplikacje XML - język SVG

(plik SVGDemo.svg)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> rect:hover {fill-opacity:0.9;} circle:hover {fill-opacity:0.9;} ellipse:hover {fill-opacity:0.9;} </style> <g style="fill-opacity:0.7;">

<rect x="110" y="300" width="250" height="250" style="fill:red; stroke:black; stroke-width:5;"/> <circle cx="6.5cm" cy="2cm" r="120" style="fill:green; stroke:black;

stroke-width:0.1cm" transform="translate(-70,150)"/> <ellipse cx="240" cy="100" rx="200" ry="50" style="fill:yellow; stroke:black; stroke-width:0.1cm"/> </g>

</svg>



Aplikacje XML - język VML

(plik VMLDemo.html)

<title>Wektorowy język znaczników VML</title> <style>

v\:* {behavior: url(#default#VML);} </style>

</head> <body>

<td>

<h4>Rysowanie elipsy</h4>

<v:oval style="width:75pt; height:100pt" fillcolor="red" /> </td>

<td>

<h4>Rysowanie prostokąta</h4>

<v:roundrect style="width:125pt; height:100pt" arcsize="0.1" fillcolor="yellow" strokecolor="green" strokeweight="2pt" /> </td>

</tr>

<h4>Wypełnienia tonalne</h4>

<v:rect style="width:100pt; height:100pt" fillcolor="blue" strokecolor="white"> <v:fill method="linear sigma" angle="45"

(5)

type="gradientradial" /> </v:rect>

</td> <td>

<h4>Dodawanie cienia</h4>

<v:oval style="width:100pt; height:100pt" fillcolor="green"> <v:shadow on="true" type="perspective"

origin=".5,.5" matrix="1,-1,0,1,0,-5e-7" /> </v:oval> </td> </tr> </table> </body> </html>



_{Aplikacje XML - język MathML}

_(plik

MathMLDemo.xml

₎

<?xml version="1.0"?> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msqrt> <mn>1</mn> <mo>+</mo> <msqrt> <mn>1</mn> <mo>+</mo> <msqrt> <mn>1</mn> <mo>+</mo> <msqrt> <mn>1</mn> <mo>+</mo> <mi>x</mi> </msqrt> </msqrt> </msqrt> </msqrt> </mrow> </math> MathPlayer:http://www.dessci.com/en/products/mathplayer/download.htm



Obiektowy model dokumentu – XML DOM – cz. 1

Rodzaje węzłów specyfikacji XML DOM (W3C)

Rodzaj węzła Typ węzła Nazwa stałej

Element 1 ELEMENT_NODE Attribute 2 ATTRIBUTE_NODE

Text 3 TEXT_NODE

CDATA section 4 CDATA_SECTION_NODE Entity reference 5 ENTITY_REFERENCE_NODE Entity 6 ENTITY_NODE

Processing instruction 7 PROCESSING_INSTRUCTION_NODE Comment 8 COMMENT_NODE

Document 9 DOCUMENT_NODE Document type 10 DOCUMENT_TYPE_NODE Document fragment 11 DOCUMENT_FRAGMENT_NODE Notation 12 NOTATION_NODE

(6)

 DOM – Wybrane przykłady składni

xmlDoc.getElementsByTagName("book");

var bookNode = xmlDoc.getElementsByTagName("book"); for (var i=0; i < bookNode.length; i++) { … } getElementsByTagName("title").length

childNodes.item(i).nodeName

getElementsByTagName("title")[0].childNodes[0].nodeValue getElementsByTagName("book")[0].attributes.length

var bookNode = xmlDoc.getElementsByTagName("book"); for( i = 0; i < bookNode.length; i++) {

var attlist = bookNode.item(i).attributes; var att = attlist.getNamedItem("id"); document.write(att.value + "<br />")

}

var table = document.createElement('table'); table.setAttribute('cellPadding',10);

table.setAttribute('border',1); table.appendChild(tbody);

if (elements[0].childNodes[j].nodeType != 1) continue;

document.createTextNode(elements[0].childNodes[j].nodeName);

 DOM – Dostęp do elementów przez nazwę

<html> <head> <script type="text/javascript"> var xmlDoc; function loadXML() {...} function getMessage() {

var text1 = xmlDoc.getElementsByTagName("author")[0].childNodes[0].nodeValue; var text2 = xmlDoc.getElementsByTagName("title")[1].childNodes[0].nodeValue; document.getElementById("id1").innerHTML = text1;

document.getElementById("id2").innerHTML = text2; }

</script> </head>

<h1>Dane wybrane z pliku XML</h1>

<b>Autor pierwszej książki: </b><span id = "id1"></span><br /> <b>Tytuł drugiej książki: </b> <span id = "id2"></span><br /> </body>

</html>

 DOM – Dostęp do atrybutów elementu

<title>Atrybut znacznika XML</title>

displayText = "Tytuł książki: "

+ bookNode.lastChild.firstChild.nodeValue + "<br>Numer ISBN : " + attrBook.value displayDIV.innerHTML = displayText </script> </head> <body> <h1>Atrybut znacznika XML</h1> <p> <div id="displayDIV"></div> </body> </html>

(7)

 DOM – Przegląd wszystkich węzłów <html>

<head><title>Dane zawarte w pliku XML</title>

xmlDocumentObject = new ActiveXObject("Microsoft.XMLDOM") xmlDocumentObject.load("list2.xml")

displayDIV.innerHTML = childLoop(xmlDocumentObject, "") function childLoop(currentNode, indentation) {

var typeName var text

switch (currentNode.nodeType) {

case 1: typeName = "Element" ; break case 2: typeName = "Attribute" ; break case 3: typeName = "Text" ; break

case 4: typeName = "CDATA section" ; break case 5: typeName = "Entity reference" ; break case 6: typeName = "Entity" ; break

case 7: typeName = "Processing instruction" ; break case 8: typeName = "Comment" ; break

case 9: typeName = "Document" ; break case 10: typeName = "Document type" ; break case 11: typeName = "Document fragment" ; break case 12: typeName = "Notation"

}

if (currentNode.nodeValue != null) {

text = indentation + "<b>" + typeName + "</b>: " + currentNode.nodeValue

} else {

text = indentation + "<b>" + typeName + "</b>: " + currentNode.nodeName

}

if (currentNode.attributes != null) {

if (currentNode.attributes.length > 0) { for (var loopIndex = 0; loopIndex <

currentNode.attributes.length; loopIndex++) { text += " <b>Attribute</b>: " + currentNode.attributes(loopIndex).nodeName + " = \"" + currentNode.attributes(loopIndex).nodeValue + "\"" } } } text += "<br>" if (currentNode.childNodes.length > 0) { for (var loopIndex = 0; loopIndex <

currentNode.childNodes.length; loopIndex++) { text += childLoop(currentNode.childNodes(loopIndex), indentation + "   &nbsp") } } return text } </script> </head> <body>

<h1>Dane zawarte w pliku XML</h1> <div id="displayDIV"></div>

</body> </html>

TECHNOLOGIE SIECI WEB