Les 10: XML basics

1. Les 10: XML basics

2. Inhoud • Herhaling essentiële theorie • Algemeen • XML - opbouw • Well - formedness • Datastructuur • XML binnen xHTML • Linking • Css • Data island

3. xHTML vs. XML (herh) • xHTML • een markup taal , die de XML principes toepast. • wel met statische (= niet uitbreidbare) markups • met als resultaat een betere scheiding tussen : Inhoud Grafische opmaak Structuur Wat XML meer biedt dan xHTML : XML = eigen DTD of XSD XML = eigen tags XML= CSS of XSL

4. XML (herh) tools • XML editeren kan in diverse editors :- je favoriete texteditor (textpad, notepad …)- valideren :XMLspy , dreamweaver ,.NET - specifieke document editors (firma SoftQuad met Xmetal , firma Arbor Text met Epic ,…) • Elke editor gebruikt een specifiek karakterset (vb:Westeuropees, Russisch). Men spreekt van een encodeer-systeem. • XML is (wereld)universeel is en werkt met een wereldwijd encodeer-systeem : unicode

5. XML (herh) aanmaak • XML kan beginnen met een processing instructie – die bv. verwijst naar het gebruikte encodeersysteem. • Vervolgens moet één rootnode komen, gevolgd door meerdere geneste nodes met elementen of attributen, die samen eenWELL-FORMED document moeten vormen. • Om deze well-formed documenten te lezen of te behandelen is een xml-engine nodig : een XML-PARSER. • Deze parser kan het xml document VALIDEREN : IE5 = bevat een niet validerende parser SUN = bevat een validating parser.

6. Instructies voor de applicatie of de parser (enige) root node XML-document (herh) voorbeeld Maak collecties voor eenvoud van data retrieval. => Een boomstructuur , die bestaat uit verschillendenodes . Die nodes bevatten elementen, attributen , commentaar, tekst , instructies …

7. - Instructies starten met <? Of [!- De xml declaratie bovenaan met versie aanduiding is niet verplicht maar wordt wel best gebruikt.- Instructies kunnen verwijzen naar interne verwerkingen of externe files Data in attributen commentaar entiteiten (afkortingen) Er bestaan een aantal voorgedefinieerde attributen met speciale betekenis: vb xmlns= xml-namespace.De namespace verwijst naar het gebied waarbinnen de elementen gedefinieerd zijn. Zo ontstaat geen verwarring ( of collision) tussen de pih mediatheek- en je eigen mediatheek-elementen met een zelfde naam. XML-document (herh) onderdelen

8. XML-document (herh) afspraken • Het document MOET (mag) slechts 1 ROOT bevatten. • Benaming van elementen.- is case sensitive (hoofdletter gevoelig).- moet starten met letter of underscore (_).- mag niet beginnen met cijfers, speciale karakters.(@)- bevat alleen letters, cijfers,punten ,_ of- (geen spaties) - kan niet beginnen met XML in elke vorm (Xml,XML…) NIET -Boek, 42BoekPara$, E=mc²XmlData, vnaam@naam WEL <Naam><Vnaam><Naam_ID>

9. XML-document (herh) afspraken • Het document MOET WELL-FORMED zijn. Indien niet genereert de parser een foutboodschap : - correct nesten van element tags. - correct afsluiten van lege elementen. WEL<Naam> <Voornaam> …. </Voornaam></Naam> NIET<Naam> <Voornaam> …. </Naam></Voornaam> WEL: <img src=“test.gif”/>of<img src=“test.gif”></img> NIET: <img src=“test.gif”>

10. XML-document (herh) afspraken • Attributen komen tussen quotes (liefst dubbele). Sommige parsers zetten de dubbele om naar enkele. • Commentaren worden niet verwerkt door de parser en kunnen op 2 manieren letterlijk worden weergegeven . Noot :Parsed Character data noemt men PCDATA. WEL <wijn jaar="1988">… NIET <wijn jaar=1998 > … WEL <!-- … commentaar … --><![CDATA[ … commentaar … ]]>

11. XML-document (herh) afspraken • XML maakt gebruik van de 2 byte unicode met het in de declaratie vermeld codeersysteem. Volgende 5 losse markup tekens moeten altijd worden opgevoerd als entiteiten :< wordt &#60; > wordt &#62; & wordt &#38;" wordt &#34;' wordt &#39;

12. Algemeen • Bij het openen van een XML – document in IE kan je volgende waarschuwing krijgen:

13. Algemeen • Dit kan worden uitgeschakeld via: • Extra  Internet – opties • Tabblad Advanced • Onderdeel security

14. XML opbouw – Well-formedness • Maak een nieuwe site aan in Dreamweaver: XmlBasics • Gebruik deze site voor alle oefeningen in dit labo. • Maak een nieuw xml – bestand aan met Dreamweaver • Copy/paste de tekst uit het bestand mediatheek.txt

15. XML opbouw – Well-formedness

16. XML opbouw – Well-formedness • Sla het bestand op als mediatheek.xml • Valideer het bestand • Verklaar de foutboodschappen en corrigeer alle fouten ( plaats commentaar in de file )

17. XML opbouw – Well-formedness Test volgende zaken uit: • Voeg commentaar toe op de eerste lijn. • Vervang de laatste tag <titel></titel> door <TITEL></TITEL>. Resultaat? • Plaats de naam van een uitvoerder tussen <i></i> of <b></b>. Resultaat?(cf. HTML tags: identiek? verklaar!)

18. XML opbouw – Datastructuur • Maak een nieuw bestand categories.xml aan • Maak een collectie van categorieën aan • Maak daarbinnen een element <categorie> met een attribuut id • Maak daarbinnen de elementen nummer, korte beschrijving en lange beschrijving aan • Maak een 5-tal categorieën aan

19. XML opbouw – Datastructuur

20. XML opbouw – Datastructuur • Kopieer categories.xml binnen mediatheek.xml • Zorg nog steeds voor de Well-formedness • Gebruik element collecties om overzicht te behouden

21. XML opbouw – Datastructuur • XML kan aangemaakt worden vanuit verschillende office programma’s • XML  tekstformaat • Import / export • Archivering

22. XML opbouw – Datastructuur • Open het bestand leden.xls • Gebruik Opslaan als… om het document als XML -document op te slaan als een XML werkblad • Bekijk het aangemaakte XML document • Processing instructie • Element aanmaak • Boomstructuur / Well-formedness • Namespaces

23. XML (herh) hoe weergeven? • Embedded in xHTML (href, <object>). • Via CSS. • Via databinding (XML island) • Via specifieke client add-ons (downloads vb:svg) • Via parsing in het DOM model. (MSXML , .NET…) • Via XSL(T) • Via XML-HTTP objecten. • Via specifieke objecten in OO-talen. (XMLreader(s)) => sommige methodieken voor latere semesters

24. Toepassingen: weergave van XML binnen xHTML • De aangemaakte xml bestanden weergeven in xHTML via: • Linking • Css • DataIslands

25. XML binnen xHTML ( weergave )

26. XML binnen xHTML ( weergave ) • Maak met Dreamweaver volgende frameset aan: • 2 Kolommen ( 20%, 80% ) • In de 2de kolom 2 rijen ( 15%,85%) linkerframe: frmMenu.htm • hoofding: frmHoofding.htm • inhoudframe: frmInhoud.htm • Maak een extern css bestand aan die de opmaakt verzorgt voor alle *.htm documenten

27. XML binnen xHTML ( linking ) • Het attribuut target zal nooit een Strict Valid document geven. • Oplossing  Scripting ( zie WT2 )

28. XML binnen xHTML ( linking ) • Plaats in het menu een link naar het bestand mediatheek.xml met als target de inhoudsframe • Test dit uit

29. XML binnen xHTML ( css ) • Visualiseren of verbergen van een deel van de XML file • Extra processing instructie in de xml file: • <?xml-stylesheet type="text/css" href="mediatheek.css"?> • Gebruik display:block of display:none • categorie {display:none;}

30. XML binnen xHTML ( css: display ) • Verschil tussen Visibility en Display • Display: het element wordt niet getoond, en er wordt geen ruimte op het scherm voorzien Display: block Display: none

31. XML binnen xHTML ( css: visibility ) • Verschil tussen Visibility en Display • Visibility: het element wordt niet getoond, maar er wordt wel ruimte op het scherm voorzien

32. XML binnen xHTML ( css ) • Maak een kopie van mediatheek.xml ( mediatheek_css.xml ) en voeg de 2de processing instructie toe (zie slide 29) • Voeg ook <i> en <b> tags toe • Maak een link in frmMenu.htm en test dit uit • Maak een nieuw ccs bestand aan waarin je categories, categorie en commentaar niet weergeeft • Geef ook de nodige opmaak aan de andere elementen ( <i> en <b> )

33. XML (herh) weergave via eenxml-eiland Parsed data binnen een xml-eiland IE5+ only !!! Opladen van een xml-eiland : Opladen van de xhtml controls :via de attributen datasrc , datafld.Dit noemt men DATABINDING . http://www.w3schools.com/xml/tryit.asp?filename=cd_catalog_island_thead

34. XML binnen xHTML ( data island ) • Enkel in IE5+ ( oudere browsers gebruiken het <object> element) • Met het <object> element is er geen manipulatie mogelijk enkel visualisatie • Via een XML data island worden gegevens verbonden met een Xhtml control (div, span, table, input,…) • Nog niet goedgekeurd door W3C ( later omzeilen via scripting) http://www.w3schools.com/xml/xml_data_island.asp

35. XML binnen xHTML ( data island ) • Resultaat met het object element <object data="categories.xml" width=“300" height=“300" type="text/xml" ></object>

36. XML binnen xHTML ( data island ) • Resultaat met een dataisland <xml id ="xmleiland" src="categorie.xml"></xml>

37. XML binnen xHTML ( data island ) • Pas deze methodiek toe op categories.xml Gebruik daarbij volgend element <xml id ="xmleiland" src="categories.xml"/> • Opm: werkt enkel in een table als het XML bestand een perfect tabel structuur heeft <td><span id="spnBeschrijving" datafld="nummer" ></span></td> • Roep deze pagina op vanuit het menu in het linkerframe

38. Extra oefening Voorbeeld van het XML document

39. Extra oefening • We sorteren gegevens van werknemers per afdeling: • De naam ( moet in het vet ) • De functie • Hun privé telefoon ( niet tonen ) • Hun intern telefoonnummer • Hun e-mailadres • Gebruik 1 XML document en 1 css document

40. Einde les 10