Välkommen! Internetprogrammering III http://www.dsv.su.se/~pierre/ Klicka på länken I3 och logga in som vanligt

The Big Picture  http://cgi.dsv.su.se/~pierre/i/ server-sidan klient-sidan IP0/Java IP1/Sockets IP2/CGI INS/Säkerhet IP3/DHTML MINT/Media

Innehåll: HTTP-klient-sidan Dynamisk-HTML (DHTML) det vill säga: Strukturerat innehåll (text, bild, ljud, film med mera) med XHTML 1.0 Strict Stil med Cascading Style Sheets (CSS) Funktion med JavaScript och Dokument Object Model (DOM) XML, X-Path, XSL [utvecklingen rasar fram] WML (frivilligt) SVG (frivilligt) ActiveX och DirectX (frivilligt)

Kursen renoverad (trots att den gick bra)! Följer standarder Kursen renoverad (trots att den gick bra)! Då: IE5 beroende Nu: W3C, EcmaScript-262 baserad Varför? Standarder viktiga på klient-sidan NN6 har kommit, läget var hopplöst tidigare med (dåliga) NN4

Kurslitteratur Dynamic HTML in Action Web Technology (andra utgåvan) av Pardi Behandlar IE5+ DOM, inte W3C DOM (finns inga bra böcker än) Från 1999 Databindning och XSL?

Don’t teach me, let me learn! Undervisningsform: digitalslöjd. All fokus på praktiska uppgifter Betyget sätts på gesällprovet = fritt valt avslutande arbete, tävling: bästa gesäll vinner pris Distanskurs, handledning via e-post 10-16 alla vardagar 4 veckor framåt Tenta = lätt om man gjort uppgifterna

Tentan Anmälan via Daisy: DSV/NT-konto av lotta@dsv.su.se DSV/Unix-konto av lotta@dsv.su.se DSV/Daisy-konto av kenlars@dsv.su.se Två ordinarie med en veckas mellanrum (?) och man kan bara anmäla sig till en av dessa

Varför då lyssna på Pierre? (Don’t teach me, let me learn!!!) Startmotor, komplexiteten är annorlunda på IP3 jämfört med IP0-2: (Minst) 4 olika paradigmer som ska användas enligt standarder (som finns och utvecklas) Därför 2 (?) föreläsningar som är både: Top-down generella Problemorienterade med korta kod-exempel Alla ska förstå!, sista timmen för frågor 

DHTML = Dynamic HyperText Markup Language HTML = HyperText Markup Language CSS = Cascading Style Sheets JavaScript finns i många olika versioner DOM = Document Object Model XHTML = eXtensible Hypetext Markup Language Xforms [ej klar] SVG = Scalable Vector Graphics WML = Wireless Markup Language XML = eXtensible Markup Language DTD = Document Type Definition Schemas = DTD fast med XML som språk XSL = eXtensible Stylesheet Language XSLT = eXtensible Stylesheet Language Transformations Xpath = XML PATH language Xlink, Xpointer, Xinclude, Xbase [ej klara] SAX = Simple Api for Xml

Arbeta hemma Win32, verktyg: Editor, exempelvis Notepad Browser, någon av: IE5.5 NN6 Mozilla senaste XML-parser med senaste XSLT-funktionerna Microsoft Weft 3 Windows On-Demand Producer 7 Windows Media Player 7

Arbeta hemma Linux, verktyg: Finns troligtvis verktyg för Linux (?) Uppgiften med XML kan då lösas med exempelvis ett Java-äpple för XML/XSLT Mejla gärna och berätta

Uppgifterna För samtliga uppgifter gäller: All HTML ska vara W3C-validerad XHTML 1.0 Strict. I XHTML-filen får ingen CSS- eller JavaScript-kod finnas All CSS ska vara W3C-validerad och finnas på en separat fil All JavaScript ska följa EcmaScript-262 och finnas på en separat fil och ingen HTML-kod eller CSS-kod finnas i JavaScript koden

Uppgifterna För samtliga uppgifter gäller: All DOM ska vara antingen: W3C DOM Level1/2, bäst, fungerar i både IE5+ och NN6+, endast NN6+ har stöd för händelsehantering enligt W3C-DOM Level 2 IE4+ DOM (enligt kursboken) eftersom det inte finns någon bra lärobok inom W3C DOM än Designen på det grafiska användargränssnittet är fri men försök göra det snyggt

Uppgifterna Några uppgifter är frivilliga Samarbete?: Icke-standard Fördjupning, desto fler av dessa man gör, desto större sannolikhet för VG Samarbete?: Alla uppgifter utom gesällprovet: 1-2 personer Gesällprovet: ensam (för att kunna sätta VG) Exempel  använd IE5 pga kryptering

Uppgifterna DOM 1a. Läsa och skriva egenskaper [mycket lätt] 1b. Fånga händelser [mycket lätt] 1c. Anropa metoder [mycket lätt]

Uppgifterna Stil 2a. Statisk [lätt] 2b. Dynamisk [lätt] 2c. Filter [lätt, frivillig pga MS] 2d. Övergångar element [lätt, frivillig pga MS] 2e. Övergångar sidor [lätt, frivillig pga MS] 2f. Nerladdningsbara fonter [lätt]

Uppgifterna Innehåll 3a. Användarstyrd textförändring 1 [lätt] 3b. Användarstyrd textförändring 2 [medel] 3c. Programstyrd textförändring [medel] 3d. Användarstyrd bildförändring [lätt] 3e. Programstyrd bildförändring [lätt] 3f. Formulärhantering [medel] 3g. Grafik med text [svår, frivillig]

Uppgifterna Positionering 4a. Programstyrd av bild [medel] 4b. Användarstyrd av bild [medel] 4c. Programstyrd av text [medel] 4d. Användarstyrd av text [medel] 4e. Lager [medel]

Uppgifterna Multimedia 5a. Ljud [medel] 5b. Film [medel] 5c. DirectAnimation [mycket svår, frivillig pga MS]

Uppgifterna Java Varför Java, det finns ju äpplen på IP1?  6. Kopplingar [medel] Varför Java, det finns ju äpplen på IP1?  Koppling från JavaScript till Java: XML, kryptering, grafik mm  Remote scripting! 

Uppgifterna XML 7a. Välutformad [mycket lätt] 7b. Valid [mycket lätt] 7c. Accessa data [medel] 7d. Accessa data dynamiskt [svår] 7e. Stil med CSS [lätt] 7f. Stil med XSL [svår]

Uppgifterna Gesällprovet, krav: Gesällprovet ska baseras på de tekniker som kursen bygger på Gesällprovet ska vara bra både till både form och funktion Gesällprovet ska beskrivas generellt på en separat HTML-sida

Uppgifterna Gesällprovet, exempel: SVG = XML-baserad standard för vektorgrafik WML är XML-baserad standard för Internet på mobiltelefoner XML Script är ett skriptspråk för XML Grafikdemo med rörlig grafik uppbyggd av 1*1 pixel stora bilder Spel

DHTML - intro Strukturerad data – HTML, XHTML, XML Stil/design – CSS, XSL Funktion/dynamik – JavaScript Funktion/dynamik – DOM Alla 4 är olika paradigmer, olika stil och man kan kombinera dessa på många olika sätt Se upp för kaos! 

DHTML - intro Vi ska isolera varje av de 4 delarna och arbeta mycket strikt När man väl lärt sig denna teknik blir det enormt mycket lättare att utveckla Författare, designers, programmerare kan arbeta mer isolerat Tre exempel direkt: sämst, dålig, bäst 

DHTML – 3 exempel Gör ett DHTML-program: En knapp, svart bakgrund, vit text När man klickar på knappen: Knappen röd bakgrund Dialogruta visas Knappen svart bakgrund

DHTML – exempel 1 Sämst: in-line <head> <title>Exempel 1</title> </head> <body> <h1>Det här är exempel 1</h1> <input type="button" value="tryck mig" style="color: white; background: black" onmousedown= "this.style.background='red'; window.alert('Du klarade det!'); this.style.background='black'" ></input> </body> </html>

DHTML – exempel 1 Sämst: in-line – varför sämst? Data, stil, funktion Allt ligger inline blandat, rörigt Ingen återanvändning av någon del Svårt att förändra stora dokument Stil sätts i JavaScript Alla ” och ’  Fungerar inte bra i XHTML

DHTML – exempel 2 Dålig: in-doc <head> <title>Exempel 2</title> <style> .is {color: white; background: black} </style> <script for="i" event="onmousedown()"> this.style.background='red'; window.alert('Du klarade det!'); this.style.background='black'; </script> </head> <body> <h1>Det här är exempel 2</h1> <input type="button" value="tryck mig" id="i" class="is"> </input> </body> </html>

DHTML – exempel 2 Dålig: in-doc – varför dåligt? Data, stil, funktion Allt ligger inte lika blandat men fortfarande lite rörigt Ingen återanvändning mellan dokument Svårt att förändra stora siter Stil sätts i JavaScript Fungerar inte bra i XHTML

DHTML – exempel 3 Bäst: out-doc (separata filer) link etablerar länkar till externa dokument, rel = relationship mellan elementet och länkat dokumentet Filen exempel3.html: <html> <head> <title>Exempel 3</title> <link href="exempel3.css" rel="stylesheet" type="text/css"/> </head> <body> <h1>Det här är exempel 3</h1> <input type="button" value="tryck mig" id="i" class="isUp"> </input> <script type="text/javascript" src="exempel3.js"></script> </body> </html>

DHTML – exempel 3 Bäst: out-doc (separata filer) Filen exempel3.css: .isUp { color: white; background: black; } .isDown { background: red; Filen exempel3.js: function foo() { window.document.all.i.className = 'isDown'; window.alert('Du klarade det!'); window.document.all.i.className = 'isUp'; window.document.all.i.onmousedown = foo;

DHTML – exempel 3 Bäst: out-doc (separata filer) – varför bäst? Data, stil, funktion Allt ligger inte blandat  ordning Återanvändning mellan dokument Lätt att förändra stora siter Stil sätts inte direkt i JavaScript, man byter klass-namnet Fungerar direkt i XHTML

DHTML - komponenter Redogöra för några viktiga aspekter av: WC3 XHTML 1.0 Strict WC3 CSS Ecma-262 JavaScript IE4+ DOM (+ lite W3C DOM) Alla detaljer kan man slå upp, huvudsaken är att man förstår helheten Kodexempel 

DHTML – komponenter XHTML WC3 HTML 4.0 - 1:a gången W3C före WC3 HTML 4.01 – sista versionen WC3 XHTML 1.0: Transitional – tillåter stil-element  Frameset – för frames  Strict – stil med CSS, den vi använder  W3C XHTML 1.1 – strict, extensibility, modularity [ej klar]

DHTML – komponenter XHTML Välutformad XML (det är XML): Start- och slut-taggar: <title>Hemsidan</title> <br/> Inga överlappande taggar (dvs perfekt nästling): Ej: <x><y>Pierre</x></y> Alla attribut inom ” ”: z=”värde” Alla taggar lowercase

DHTML – komponenter XHTML Kommentarer: <!-- kommentar --> PS. META-taggar: <meta name="keywords" content=”xhtml, html, css”/> <meta name="description" content=”This site deals with Internet programming”/> <meta name="author" content=”Pierre Wijkman, pierre@dsv.su.se”/> <meta name="generator" content="Notepad”/> <meta name="robots" content="nofollow”/> Exempel på XHTML 

DHTML – komponenter XHTML – exempel 4 Deklaration av XML <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Exempel 4</title> </head> <body> <!– här kommer innehållet --> </body> </html> Deklaration av specifik XML (med DTD) Deklaration av namespace)

DHTML – komponenter XHTML – exempel 4 <h1>Rubrik 1</h1> <h2>Rubrik 2</h2> <h3>Rubrik 3</h3> <h4>Rubrik 4</h4> <h5>Rubrik 5</h5> <h6>Rubrik 6</h6>

DHTML – komponenter XHTML – exempel 4 <div>Text A</div> <div> <span>Text B</span> <span>Text C</span> </div> <p> <span>Text D</span> <span>Text E</span> </p>

DHTML – komponenter XHTML – exempel 4 <a href="http://www.dsv.su.se/">Länk-text</a> </p> <img src=”exempel4.gif" alt="En bild"/>

DHTML – komponenter XHTML – exempel 4 <table> <tr> <td>Cell-text A</td> <td>Cell-text B</td> <td>Cell-text C</td> </tr> <td>Cell-text D</td> <td>Cell-text E</td> </table>

DHTML – komponenter XHTML – exempel 4 <ul> <li>Punktlist-text A</li> <li>Punktlist-text B</li> <li>Punktlist-text C</li> </ul> <div><br/></div> <ol> <li>Nummerlist-text A</li> <li>Nummerlist-text B</li> <li>Nummerlist-text C</li> </ol> <hr/>

DHTML – komponenter XHTML DIV och SPAN är container tags, de orsakar ingen formatering och används ofta med CSS: DIV är ett block-element SPAN är ett in-line element, orsakar ingen radbrytning Validering 

DHTML – komponenter XHTML – W3C validering

DHTML – komponenter XHTML – W3C validering

DHTML – komponenter CSS Sen IE3+ (CSS1, CSS-P, CSS2) Cascading? CSS kan defineras av: konstruktör, användare, browser Vilken CSS gäller vi konflikter? Konstruktörens CSS har högst prio Sen användarens CSS Sen browserns CSS Alla dessa CSS smälts samman

DHTML – komponenter CSS Arv? CSS kan definieras för element på olika nivåer och CSS ärvs från förälder-element till barn-element (osv) Vilken CSS gäller vi konflikter? Barns CSS har högst prio (desto mer specifikt element, desto högre prio) Använd relativa mått på exempelvis fonter Exempel 

DHTML – komponenter CSS – exempel 5 <head> <title>Exempel 5</title> <link href="exempel5.css" rel="stylesheet" type="text/css"/> </head> <body> <p class="c1">Text A</p> <p class="c1">Text B</p> <div>Text C</div> <div> <span id="i1">Text D</span> </div> <p id="i2" class="c2">Text B</p> </body> </html> div {letter-spacing: 10px; font-weight: bold} .c1 {color: red} #i1 {letter-spacing: 20px} .c2 {color: red} #i2 {color: green} röd grön

DHTML – komponenter CSS – W3C validering

DHTML – komponenter CSS – W3C validering

DHTML – komponenter JavaScript JavaScript inte Java JavaScript är ett stort riktigt språk  JavaScript lite likt C, Java, Perl (Lisp?) Objektbaserat (inte objektorienterat), baserat på prototyp, ej arv Otypat: var x=5; x=”tjosan”; Case-sensitive

DHTML – komponenter JavaScript JavaScript kommer från Netscape/SUN (NN2+) JScript är MS implementation (IE3+) Standard: EcmaScript-262 (European Computer Manufacturers Association) Inga stora skillnader mellan olika browsrar

DHTML – komponenter JavaScript Kommentarer: // eller /* … */ Variabler: var x = 5; Arrayer: var a = new Array(10); Flerdimensionella arrayer: array av array osv (jobbigt), trick: eftersom man kan ha strängar som index: a2[i + '-' + j] = 7;

DHTML – komponenter JavaScript Loopar: for(var i = 0; i < 5; i++) { … while(i < 10) { … do { … } while (i < 10); Villkor: if(x == 0) { … } else { … } if(x == 0) { … } else if { … }

DHTML – komponenter JavaScript Funktioner: function start() { initMatrix(); showMatrix(); } function square(x) { return x*x;

DHTML – komponenter JavaScript Funktioner (forts) var square = new Function(’x’, ’return x*x;’); var square = function(x) {return x*x } Argument till funktioner sänds som värde (inte pekare) Inget block-scope för variabler

DHTML – komponenter DOM JavaScript Browser/dokument DOM CSS

DHTML – komponenter DOM DOM består av en mängd objekt DOM används för att kunna accessa vissa saker hos browsern och elementen i dokumentet ”API” mot browsern och dokumentet

DHTML – komponenter DOM Här finns mest problem, olika browsrar ej kompatibla: NN2 introducerade JavaScript och en mycket begränsad DOM (skripta bilder) NN3 något bättre IE3’s DOM = NN version 2’s NN4’s DOM  inte bra (DOOM || DUM?) IE version 4’s DOM  mycket bra!

DHTML – komponenter DOM DOM Level 0 = samlingsnamn för alla tidigare vilda försök W3C DOM Level 1 (core + html) 1998-10-01 = enbart access W3C DOM Level 2 (core + views + style + events + traversal + html) 2000-11-13 W3C DOM Level 3 (core + events + content) ej klar = stöder key-events

DHTML – komponenter DOM Vilka browsrar stöder W3C DOM?: Mozilla0.8, bäst, stöder Level 1 och delar av Level 2 (händelsehantering och CSS), identisk rendering/funktion i Linux, Win32, Mac NN6, näst bäst, samma som Mozilla0.6 IE5 och IE5.5, bra, stöder Level 1, snart kommer IE6, olika rendering/funktion i Linux, Win32, Mac

DHTML – komponenter DOM – Mozilla development roadmap

DHTML – exempel Läsa in/skriva till DOM/egenskaper DOM/metoder DOM/händelser (Nästan) alla exempel med IE4+ DOM

DHTML – exempel 6 Accessa två element och införa IP3 och en egenskap <head> <title>Exempel 6</title> </head> <body> <div id="x1"></div> <div id="x2"></div> <script type="text/javascript" src="exempel6.js"></script> </body> </html> JavaScript: window.document.all.x1.innerText = 'IP3'; window.document.all.x2.innerText = window.document.title; DOM del

DHTML – exempel 7 En händelse och en metod <head> <title>Exempel 7</title> </head> <body> <div id="x1">Här kan det hända</div> <script type="text/javascript" src="exempel7.js"></script> </body> </html> JavaScript: window.document.all.x1.onmouseover = new Function('window.alert("!")');

DHTML – exempel 8 En händelse och CSS <head> <title>Exempel 8</title> <link href="exempel8.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="x1" class="out">Här kan det hända</div> <script type="text/javascript" src="exempel8.js"></script> </body> </html>

DHTML – exempel 8 (forts) En händelse och CSS .out {} .over {letter-spacing: 2px; color: red} JavaScript: function changeStyleOut() { window.document.all.x1.className = 'out'; } function changeStyleOver() { window.document.all.x1.className = 'over'; window.document.all.x1.onmouseout = changeStyleOut; window.document.all.x1.onmouseover = changeStyleOver;

DHTML – exempel 9 W3C DOM – access , händelse och CSS http://mozilla <head> <title>Exempel 9</title> <link href="exempel9.css" rel="stylesheet” type="text/css"/> </head> <body> <div id="x1">Här händer det</div> <div id="x2"></div> <div id="x3" class="out">En text</div> <script type="text/javascript" src="exempel9.js"></script> </body> </html>

DHTML – exempel 9 (forts) W3C DOM – access , händelse och CSS http://mozilla.org/docs/dom/technote/tn-dom-table/ .out {} .over {font-weight: bold} var textNode = document.createTextNode(document.title); function myOver() { document.getElementById('x2').appendChild(textNode); document.getElementById('x3').className = 'over'; } function myOut() { document.getElementById('x2').removeChild(textNode); document.getElementById('x3').className = 'out'; document.getElementById('x1').childNodes[0].addEventListener('mouseover', myOver, false); document.getElementById('x1').childNodes[0].addEventListener('mouseout', myOut, false);

XML Intro Med de tekniker vi pratat om fram till nu har vi kunnat separera: DATA för HTML Stil för HTML Funktion för HTML Vi ska nu gå ett steg till och göra denna separation oberoende av tillämpningen (tidigare HTML)

XML Intro Bra bok: XML How to Program av Deitel, Deitel, Nieto, Lin och Sadhu Kursboken lite tunn med XML, speciellt: Validering XSL, XPath, XSLT XML ”tillbehör” utvecklas snabbt!

XML Generellt XML handlar om data! XML handlar om data som är: strukturerad och beskriven (i ett sammanhang/context) XML används för att skapa skräddarsydda markup språk som kan beskriva godtyckliga data på ett strukturerat sätt Matematiska formler, molekulära strukturer, grafik, finansiell data mm

XML Generellt Med XML separerar man på data och hur data ska presenteras (stil + dynamik exempelvis) XML är elegant och lätt! 

XML Mer specifikt XML-deklaration överst Godtyckliga taggar (hur funkar det?) Case-sensitive Exakt ett root-element Inga överlappande taggar (dvs perfekt nästling): Ej: <x><y>Pierre</x></y>

XML Mer specifikt Markup text skriv inom < och > Start- och slut-taggar: <titel>Hemsidan</titel> Tomma element: <bild src=”img.gif”></bild> <bild src=”img.gif”/> Alla attribut inom ” ”: z=”värde” nada 

XML Ett exempel XML deklaration root element element data <?xml version="1.0"?> <emails> <email no="1"> <from>lisa@abc.se</from> <to>pierre@dsv.su.se</to> <subject>Ett e-brev</subject> <body>Hej Pierre!</body> </email> <email no="2"> <from>maria@abc.es</from> <body>Hola Pierre!</body> </emails> root element element data

XML Mera specifika saker Tillåtna tecken: Carriage returns, line feeds och Unicode White space normaliseras: Flera mellanslag  ett mellanslag Kommentarer: <!-- kommentar --> Särbehandling av: <, >, &, ’ och ” <  < >  > &  & ’  &apos; ”  "

XML Mera specifika saker CDATA sektioner: Kan innehålla text med reserverade tecken <exempel> <![[CDATA[ Här kan man skriva godtycklig text, exempelvis: < ]]> </exempel> inte: ]]>

XML Mera specifika saker En process instruktion (PI) ger en applikation extra info: <?xml:stylesheet type=”text/xsl” href=”stil.xsl”?> Mål  xml:stylesheet Värde  type=”text/xsl” href=”stil.xsl Ingen effekt om inte applikation använder dem Kan definiera egna: <?paiwp x=”12”?>

XML Mera specifika saker Namespaces används för att undvika kollisioner mellan taggar: <myroot xmlns = ”urn:unik:text” xmlns:foo = ”urn:ho”> <text>Hej</text> <foo:bild src=”img.gif”/> Här tillhör text det definierade default namespacet ”urn:unik:text”

XML Parsning - välutformning En XML-parser/processor kontrollerar ett dokument map: välutformning, dvs om dokumentet följer generell XML-syntax och/eller validitet, dvs om dokumentet följer en egendefinierad avgränsning (inom XML-syntax) Uppfylls inte detta genereras ett fel

XML Parsning - välutformning Två typer av XML-parsning: DOM-parser bygger upp hela dokumentet i minnet (en trädstruktur) SAX-parser strömmar igenom dokumentet och använder händelser IE5+ och NN6 har en inbyggd XML-parser Finns även fria för C, C++, Java, Perl

XML Hur ser det ut i en browser? <?xml version="1.0"?> <emails> <email no="1"> <from>lisa@abc.se</from> <to>pierre@dsv.su.se</to> <cc>adapt@dsv.su.se</cc> <subject>Ett e-brev</subject> <body>Hej Pierre!</body> </email> <email no="2"> <from>maria@abc.es</from> <cc></cc> <body>Hola Pierre!</body> </emails>

XML Hur ser det ut i en browser? IE5+ visar XML med en egen default-stil NN6 visar XML så här  Vi ska se senare hur man själv stylar XML med CSS eller XSL

XML Validitet För att själv definiera en specifik struktur på XML-dokument så används Document Type Definitions (DTD) Olika ”standarder” för att en XML-struktur ska passa specifika applikationer Exempelvis XHTML, WML, SVG, mm Ett XML-dokument som uppfyller en viss DTD kallas för ett validerat dokument

XML Validitet En DTD specificeras med en annan syntax kallad Extended Backus-Naur Form (EBNF) Ett nyare XML-baserat sätt växer fram: Schemas Det finns XML-parsrar som: Enbart kontrollerar välformighet (snabbare) Både kontrollerar välformighet och validitet

XML Validitet En DTD deklarerar: Element: Attribut: Namn Regler för nästling Tillåtet innehåll Attribut: Namn och existens Typ av data

XML Validitet – ett exempel <?xml version="1.0"?> <!DOCTYPE emails SYSTEM "exempel11.dtd"> <emails> <!-– osv som innan --> </emails> DTD-fil: <!ELEMENT emails (email*)> <!ELEMENT email (from, to, subject, body)> <!ATTLIST email no CDATA #REQUIRED> <!ELEMENT from (#PCDATA)> <!ELEMENT to (#PCDATA)> <!ELEMENT subject (#PCDATA)> <!ELEMENT body (#PCDATA)> Så här ser det ut!

XML Validitet – dokument typ deklaration Man kan: Lägga DTD-definitionen direkt i dokumentet Referera till en lokal fil: <!DOCTYPE emails SYSTEM "exempel11.dtd"> Referera till en publikt definierad (ofta använd): <!DOCTYPE emails PUBLIC ”http://cgi.dsv.su.se/~pierre/i/i3/tutorials/oh/exempel11.dtd">

XML Validitet – element typ deklaration Ett element deklareras: <!ELEMENT emails (email*)> Detta betyder att elementet emails får ha godtyckligt många barn-element email +  minst 1 gång *  0 eller mer gånger ?  0 eller 1 gång

XML Validitet – element typ deklaration (forts) Ett element deklareras: <!ELEMENT email (from, to, subject, body)> Detta betyder att elementet email måste ha: ett barn-element from, ett barn-element to, ett barn-element subject och ett barn-element body i denna ordning

XML Validitet – element typ deklaration (forts) Ett element deklareras: <!ELEMENT a (b, (c | d)*)> Detta betyder att elementet a: måste ha ett barn-element b och ett godtyckligt antal element c eller d Vi har grupperat med ( ) och använt ”eller men inte båda” med | Komplexa deklarationer kan skapas 

XML Validitet – element typ deklaration (forts) Ett element deklareras: <!ELEMENT from (#PCDATA)> Detta betyder att elementet from måste innehålla text PCDATA = Parsed Character DATA

XML Validitet – element typ deklaration (forts) Ett element deklareras: <!ELEMENT br EMPTY> Detta betyder att elementet br inte får innehålla text eller barn-element

XML Validitet – element typ deklaration (forts) Ett element deklareras: <!ELEMENT x (#PCDATA | y)*> Detta betyder att elementet x får innehålla en godtycklig kombination av text eller barn-element y

XML Validitet – element typ deklaration (forts) Ett element deklareras: <!ELEMENT x ANY> Detta betyder att elementet x får innehålla en godtycklig kombination av text eller barn-element Det kan också vara ett tomt element Används ofta under utveckling

XML Validitet – attribut typ deklaration Ett attribut deklareras: <!ELEMENT x EMPTY> <!ATTLIST x y CDATA #REQUIRED> Detta betyder att attributet y till elementet x: Måste finnas Får innehålla text CDATA = CharacterDATA

XML Validitet – attribut typ deklaration Ett attribut deklareras: <!ELEMENT x EMPTY> <!ATTLIST x y CDATA #IMPLIED> Detta betyder att attributet y till elementet x: Får innehålla text Finns det inget så får applikationen använda vilket värde som helst (om något)

XML Validitet – attribut typ deklaration Ett attribut deklareras: <!ELEMENT x EMPTY> <!ATTLIST x y #FIXED ”123”> Detta betyder att attributet y till elementet x: Måste innehålla texten 123

XML Validitet – attribut typ deklaration Man kan även styra attribut typerna (dvs mera val än bara CDATA): Text  CDATA Tokeniserad: ID, IDREF, ENTITY, NMTOKEN Uppräknad Exempel 

XML Validitet – attribut typ deklaration Ett attribut deklareras: <!ELEMENT x EMPTY> <!ATTLIST x y (A | B) ”A”> Detta betyder att attributet y till elementet x: Får innehålla texten A eller B Har defaultvärdet A om inget attribut anges

XML - komponenter DOM/JavaScript I IE5+ finns en inbyggd XML-parser JavaScript kan då hantera XML: var xml = new ActiveXObject('Microsoft.XMLDOM'); xml.async = false; xml.validateOnParse = true; var loadOk = xml.load('7c.xml'); if(loadOk) { window.status = 'Parsningen gick bra!'; } else { window.status = 'Parsningen gick inte bra!'; } Anger att man vill parsa validerande

XML - komponenter CSS Man kan styla ett XML-dokument på samma sätt som i XHTML Referensen skrivs med en PI: <?xml-stylesheet type="text/css" href=”minstil.css"?> Bättre med 

XML - komponenter XSL XSL används för att formatera och styla ett XML-dokument Två delar: XSLT används för att transformera ett XML-dokument till ett annan XML-dokument XSL Formatting Objects används för att transformera ett XML-dokument till ett icke-XML-dokument (ex på binär form)

XML - komponenter XSL XSL är XML XSL är omfattande XSL använder Xpath Vi tittar enbart på XSLT och det som behövs för uppgiften Rekommenderas: fördjupning = gesällprov

XML - komponenter XSL – exempel 12 <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="exempel12.xsl"?> <emails> <email no="1"> <from>lisa@abc.se</from> <to>pierre@dsv.su.se</to> <subject>Ett e-brev</subject> <body>Hej Pierre!</body> </email> <email no="2"> <from>maria@abc.es</from> <body>Hola Pierre!</body> </emails> Referens till stylesheet

XML - komponenter XSL – exempel 12 (forts) <?xml version="1.0"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="emails"> <html> <head> <title>Exempel 12</title> </head> <body> <h1>e-brev</h1> <hr/> <xsl:apply-templates select="email"/> </body> </html> </xsl:template> Det som är innanför detta ersätter emails-noden Här ska vi infoga något som bestäms i template email

XML - komponenter XSL – exempel 12 (forts) Här är template email <xsl:template match="email"> <xsl:for-each select="from"> <div> <span class="tn">From: </span> <span><xsl:value-of select="."/></span> </div> </xsl:for-each> <hr/> </xsl:template> </xsl:stylesheet> Här är väljer vi alla from element Här plockar vi ut värdet

XML - komponenter XSL – exempel 12 (forts)

XML - komponenter XSL Vilka browsrar stöder XSLT?: Mozilla0.9 (när den kommer) IE5 och IE5.5 om man uppdaterar till senaste XML-parsern IE6 (när den kommer) Man kan även transformera XML + XSLT på server-sidan med exempelvis Perl 

XML - komponenter XSL Lösning: kör XSLT-transformationen på http-server-sidan, exempel i Perl: #!/usr/bin/perl use XML::XSLT; my $xmlfile = "7f.xml"; my $xslfile = "7f.xsl"; my $parser = XML::XSLT->new ($xslfile, "FILE"); $parser->transform_document ($xmlfile, "FILE"); $parser->print_result(); Detta kräver modulerna: XML::DOM XML::XSLT

Tack för att Ni har lyssnat! Lycka till!