XML 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.

Præsentationer af emnet: "XML 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."— Præsentationens transcript:

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 Tina Hansen Mor til Per, Peter kone, Faster til Jane og Mathias, Tante til Tom og Mads Kvinde 38 år 167 cm 50

4 Peter Jensen Far til Per, Tinas mand, Farbror til Tom og Mads, Onkel til Jane og Mathias Mand 37 år 175 cm 74 kg.

5

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 : Dvs. XML dokumentet starter med følgende: osv.

12

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.

14

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: 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 Islanden 3. 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 : 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 Udsnit af mit stamtræ ……. Udsnit af mit stamtræ <

19 Tabellens overskrifter Fornavn Efternavn Id Køn Alder Højde Vægt Beskrivelse

20 Tabellens krop

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

22

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 –for et select element er det value egenskaben i de option elementer der er indeholdt i select boksen – Sosu-Assistent –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 Fornavn Efternavn Id Køn Alder Højde Vægt Jobtitle Beskrivelse

26 Tabellens krop Sosu-Assistent Web-programmør

27

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/