Välkommen! Internetprogrammering III

En presentation över ämnet: "Välkommen! Internetprogrammering III"— Presentationens avskrift:

1 Välkommen! Internetprogrammering III
Klicka på länken I3 och logga in som vanligt

2 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

3 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)

4 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

5 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?

6 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 alla vardagar 4 veckor framåt Tenta = lätt om man gjort uppgifterna

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

8 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 

9 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

10 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

11 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

12 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

13 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

14 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

15 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]

16 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]

17 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]

18 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]

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

20 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! 

21 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]

22 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

23 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

24 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! 

25 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 

26 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

27 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>

28 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

29 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>

30 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

31 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>

32 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;

33 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

34 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 

35 DHTML – komponenter XHTML
WC3 HTML :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]

36 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

37 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, <meta name="generator" content="Notepad”/> <meta name="robots" content="nofollow”/> Exempel på XHTML 

38 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=" 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)

39 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>

40 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>

41 DHTML – komponenter XHTML – exempel 4
<a href=" </p> <img src=”exempel4.gif" alt="En bild"/>

42 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>

43 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/>

44 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 

45 DHTML – komponenter XHTML – W3C validering

46 DHTML – komponenter XHTML – W3C validering

47 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

48 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 

49 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

50 DHTML – komponenter CSS – W3C validering

51 DHTML – komponenter CSS – W3C validering

52 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

53 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

54 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;

55 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 { … }

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

57 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

58 DHTML – komponenter DOM
JavaScript Browser/dokument DOM CSS

59 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

60 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!

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

62 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

63 DHTML – komponenter DOM – Mozilla development roadmap

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

65 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

66 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("!")');

67 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>

68 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;

69 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>

70 DHTML – exempel 9 (forts) W3C DOM – access , händelse och CSS .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);

71 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)

72 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!

73 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

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

75 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>

76 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 

77 XML Ett exempel XML deklaration root element element data
<?xml version="1.0"?> < s> < no="1"> <subject>Ett e-brev</subject> <body>Hej Pierre!</body> </ > < no="2"> <body>Hola Pierre!</body> </ s> root element element data

78 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; ”  "

79 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: ]]>

80 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”?>

81 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”

82 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

83 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

84 XML Hur ser det ut i en browser?
<?xml version="1.0"?> < s> < no="1"> <subject>Ett e-brev</subject> <body>Hej Pierre!</body> </ > < no="2"> <cc></cc> <body>Hola Pierre!</body> </ s>

85 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

86 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

87 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

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

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

90 XML Validitet – dokument typ deklaration
Man kan: Lägga DTD-definitionen direkt i dokumentet Referera till en lokal fil: <!DOCTYPE s SYSTEM "exempel11.dtd"> Referera till en publikt definierad (ofta använd): <!DOCTYPE s PUBLIC ”

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

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

93 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 

94 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

95 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

96 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

97 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

98 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

99 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)

100 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

101 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 

102 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

103 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

104 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 

105 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)

106 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

107 XML - komponenter XSL – exempel 12
<?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="exempel12.xsl"?> < s> < no="1"> <subject>Ett e-brev</subject> <body>Hej Pierre!</body> </ > < no="2"> <body>Hola Pierre!</body> </ s> Referens till stylesheet

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

109 XML - komponenter XSL – exempel 12 (forts)
Här är template <xsl:template match=" "> <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

110 XML - komponenter XSL – exempel 12 (forts)

111 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 

112 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

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