XML 2

1. XML 2

2. Formatering af XML data med CSS • Når man arbejder med XML og CSS er fremgangsmåden den samme som i forbindelse med HTML og CSS.

3. XML fil stamtrae <?xml version="1.0" encoding="iso-8859-1"?> <stamtrae> <familemedlem id="001" familiegren="hansen"> <fornavn>Tina</fornavn> <efternavn>Hansen</efternavn> <roller> <rolle>Mor til Per, </rolle> <rolle>Peter kone, </rolle> <rolle>Faster til Jane og Mathias, </rolle> <rolle>Tante til Tom og Mads</rolle> </roller> <koen>Kvinde</koen> <alder>38 år</alder> <hoejde>167 cm</hoejde> <vaegt>50</vaegt> </familemedlem>

4. <familemedlem id="002" familiegren="jensen"> <fornavn>Peter</fornavn> <efternavn>Jensen</efternavn> <roller> <rolle>Far til Per, </rolle> <rolle>Tinas mand, </rolle> <rolle>Farbror til Tom og Mads, </rolle> <rolle>Onkel til Jane og Mathias</rolle> </roller> <koen>Mand</koen> <alder>37 år</alder> <hoejde>175 cm</hoejde> <vaegt>74 kg.</vaegt> </familemedlem> </stamtrae>

6. Eksempel stylesheet Stamtrae { background-color: rgb(78,77,75); display: block; } familemedlem { font-family:verdana, arial; }

7. Stylesheet forts. overskrift { background-color: #FFBC54; display: block; font-family: verdana, arial; font-size: 25px; font-weight: bolder; padding: 5px; padding-left: 10px; margin-bottom:25px; text-align:center; border:solid 2px rgb(190,202,200); } fornavn { background-color: #FFBC54; color: white; display: block; font-family: verdana, arial; font-size: 18px; font-weight: bolder; padding: 5px; padding-left: 10px; margin-bottom:5px; border:solid 1px rgb(190,202,200); }

8. Stylesheet forts. efternavn { background-color: #CC7002; color: white; display: block; font-family: verdana, arial; font-size: 18px; font-weight: bolder; padding: 5px; padding-left: 10px; border:solid 1px rgb(190,202,200); } roller, koen, hoejde, vaegt, alder { font-size:12px; display: block; font-family: verdana, arial; margin-left: 60px; color:rgb(190,202,200); }

9. Stylesheet forts. rolle { display: inline; font-family: verdana, arial; position:relative; }

10. Display • Der anvendes en bestemt CSS egenskab der hedder Display. • Display egenskaben er i dette tilfælde ansvarlig for at vise XML elementerne:overskrift, fornavn, efternavn, roller, koen, hoejde, vaegt og alder med værdien Block.Block har to egenskaber:1. Block tvinger elementer til at starte under hinanden.2. Block viser et element i hele skærmbredden.Elementet rolle bliver erklæret med en display egenskab med værdien inline.Som viser alle rolle elementerne på en linje, uanset hvor mange rolle elementer der er knyttet til et familemedlem.

11. Stylesheet i et XML dokument • Når man skal hente et stylesheet i et XML dokument skal man bruge følgende element :<?xml-stylesheet type="text/css" href=”navnPaastyle.css"?> Dvs. XML dokumentet starter med følgende: <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/css" href=”navnPaastyle.css"?> <stamtrae> <familemedlem id="001" familiegren="hansen"> osv.

13. Data Islands og XML • Man kan lave en masse ting med XML og CSS • Der er begrænsninger f.eks: • Ikke undlade at lave formatering for et element fordi det så vil blive vist som en XML tag i browseren • Man kan ikke bestemme hvilke elementer der skal vises og hvilke der ikke skal vises.

15. Data Islands • Med en Data Islands kan man indlæse et helt XML dokument som en ø af XML data på klienten (i browseren) • Derefter laves en binding imellem XML data og nogle bestemte HTML elementer (tags).Det giver nogle fordele præsentations mæssigt men man kan også lave nogle ret smarte redigerings moduler.

16. Data Island i et HTML dokument • Man laver en Data Island i et HTML dokument med et XML element der ser sådan her ud:<xml id="hentdata" src="visfamilie.xml"></xml>Elementet fortæller browseren at den skal gøre 3 ting:1. Indlæse en ø af XML data (Data Island)2. Bruge et id som henvisning til Data Islanden3. Læse XML data fra filen visfamilie.xml

17. Data Island i en tabel • I de fleste tilfælde vil man opbygge en side som indeholder en Data Island i en tabel, for at kunne bruge Data Islanden skal tabellen have et par attributter :<table border="0" datasrc="#hentdata" datapagesize="4">Attributten datasrc="#hentdata" referere til id'et der indeholder Data Islanden.Attributten datapagesize="4" fortæller hvor mange elementer der skal vises ad gangen.

18. HTML med Data Island kode <html> <head> <title>Udsnit af mit stamtræ</title> <style type="text/css"> ……. </style> </head> <body> <h2>Udsnit af mit stamtræ</h2> < <xml id="hentdata" src="visfamilie.xml"></xml> <input type="button" onClick="naeste.previousPage();" value="Tilb"> <input type="button" onClick="naeste.nextPage();" value="Frem"> <table border="0" id="naeste" datasrc="#hentdata" datapagesize="4">

19. Tabellens overskrifter <thead> <tr bgcolor="#FFBC54" cellpadding="1"> <th>Fornavn</th> <th>Efternavn</th> <th>Id</th> <th>Køn</th> <th>Alder</th> <th>Højde</th> <th>Vægt</th> <th>Beskrivelse</th> </tr> </thead>

20. Tabellens krop <tbody> <tr valign="top" bgcolor="#bfbfbf"> <td><span datafld="fornavn"></span></td> <td><span datafld="efternavn"></span></td> <td><span datafld="id"></span></td> <td><span datafld="koen"></span></td> <td><span datafld="alder"></span></td> <td><span datafld="hoejde"></span></td> <td><span datafld="vaegt"></span></td> <td><span datafld="beskrivelse"></span></td> </tr> </tbody> </table> </body> </html>

21. Xml data bliver bundet til <span> elementerne med attributten datafld. • Med en Data Island bestemmer man selv hvilke XML elementer der skal med i visningen.

23. Redigering med Data Island og formular elementer. • Man kan redigere en XML nodes tekstværdi i en browser.Man binder XML data til nogle af HTML's form elementer. • Den egenskab man binder er : • value for input/ textarea elementer <td><input datafld="fornavn"></td> <textarea datafld="beskrivelse" rows="2" cols="18" ></textarea> • for et select element er det value egenskaben i de option elementer der er indeholdt i select boksen <select datafld="job-titel"> • <option value="Sosu-Assistent">Sosu-Assistent</option> • for input elementer af typen radio/checkbox er det egenskaben checked.

24. Redigering med Data Island og formular elementer. • De ændringer man laver vil blive husket selvom at man skifter til visning af 4 nye familiemedlemmer. • 1. Det er kun Data Islanden der bliver opdateret.2. De ændringer man laver bliver IKKE gemt i den XML fil man læser data fra.Hvis man vil gemme de ændringer man laver, kan det gøres med f.eks et ASP script, som først indlæser den opdaterede XML og laver en ny XML fil ved hjælp af ASP komponenten FileSystemObject.

25. Tabellens overskrift <thead> <tr bgcolor="#FFBC54" cellpadding="1"> <th>Fornavn</th> <th>Efternavn</th> <th>Id</th> <th>Køn</th> <th>Alder</th> <th>Højde</th> <th>Vægt</th> <th>Jobtitle</th> <th>Beskrivelse</th> </tr> </thead>

26. Tabellens krop <tbody> <tr valign="top" bgcolor="#bfbfbf"> <td><input datafld="fornavn"></td> <td><input datafld="efternavn"></td> <td><input datafld="id"></td> <td><input datafld="koen"></td> <td><input datafld="alder"></td> <td><input datafld="hoejde"></td> <td><input datafld="vaegt"></td> <td> <select datafld="job-titel"> <option value="Sosu-Assistent">Sosu-Assistent</option> <option value="Web-programmør">Web-programmør</option> </select> </td> <td> <textarea datafld="beskrivelse" rows="2" cols="18" ></textarea> </td> </tr> </tbody>

28. Anvendelse af Data Islands • På serveren laves et database udtræk og sender data til et script, der på grundlag af data udtrækket laver en xml fil og sender hele filen til klienten i form af en Data Island. • Klienten kan få præsenteret og redigerer i dataene og til sidst kan de redigerede xml data sendes tilbage til serveren hvor et script så indsætter data i databasen igen.

29. Kilder Eksemplerne er hentet på http://www.udvikleren.dk/XML/Index.aspx Forslag til simple XML editorer: XRay 2 XML editor http://www.architag.com/xray/ XMLEditPro v2 http://www.daveswebsite.com/software/xmleditpro.2.0/