Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 10: XML basics

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

Webtechnologie Labo 1 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 XML = eigen tags XML = CSS of XSL XML = eigen DTD of XSD Wat XML meer biedt dan xHTML :

Webtechnologie Labo 1 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

Webtechnologie Labo 1 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 een WELL-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.

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

Webtechnologie Labo 1 7 XML-document (herh)onderdelen - 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 ns 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. entiteiten (afkortingen)

Webtechnologie Labo 1 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 - bevat alleen letters, cijfers,punten,_ of- (geen spaties) - kan niet beginnen met XML in elke vorm (Xml,XML…) WEL NIET -Boek, 42Boek Para$, E=mc² XmlData,

Webtechnologie Labo 1 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 …. NIET …. NIET: WEL: of

Webtechnologie Labo 1 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 … NIET … WEL

Webtechnologie Labo 1 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 > & wordt & " wordt " 'wordt '

Webtechnologie Labo 1 12 Algemeen Bij het openen van een XML – document in IE kan je volgende waarschuwing krijgen:

Webtechnologie Labo 1 13 Algemeen Dit kan worden uitgeschakeld via: Extra  Internet – opties Tabblad Advanced Onderdeel security

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

Webtechnologie Labo 1 15 XML opbouw – Well-formedness

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

Webtechnologie Labo 1 17 XML opbouw – Well-formedness Test volgende zaken uit: Voeg commentaar toe op de eerste lijn. Vervang de laatste tag door. Resultaat? Plaats de naam van een uitvoerder tussen of. Resultaat? (cf. HTML tags: identiek? verklaar!)

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

Webtechnologie Labo 1 19 XML opbouw – Datastructuur

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

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

Webtechnologie Labo 1 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

Webtechnologie Labo 1 23 XML (herh) hoe weergeven? Embedded in xHTML (href, ). 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

Webtechnologie Labo 1 24 Toepassingen: weergave van XML binnen xHTML De aangemaakte xml bestanden weergeven in xHTML via: Linking Css DataIslands

Webtechnologie Labo 1 25 XML binnen xHTML ( weergave )

Webtechnologie Labo 1 26 XML binnen xHTML ( weergave ) Maak met Dreamweaver volgende frameset aan: 2 Kolommen ( 20%, 80% ) In de 2 de 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

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

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

Webtechnologie Labo 1 29 XML binnen xHTML ( css ) Visualiseren of verbergen van een deel van de XML file Extra processing instructie in de xml file: Gebruik display:block of display:none categorie {display:none;}

Webtechnologie Labo 1 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: blockDisplay: none

Webtechnologie Labo 1 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

Webtechnologie Labo 1 32 XML binnen xHTML ( css ) Maak een kopie van mediatheek.xml ( mediatheek_css.xml ) en voeg de 2 de processing instructie toe (zie slide 29) Voeg ook en 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 ( en )

Webtechnologie Labo 1 33 XML (herh) weergave via een xml-eiland Opladen van een xml-eiland : Opladen van de xhtml controls : via de attributen datasrc, datafld. Dit noemt men DATABINDING. Parsed data binnen een xml-eiland IE5+ only !!!

Webtechnologie Labo 1 34 XML binnen xHTML ( data island ) Enkel in IE5+ ( oudere browsers gebruiken het element) Met het 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)

Webtechnologie Labo 1 35 XML binnen xHTML ( data island ) Resultaat met het object element

Webtechnologie Labo 1 36 XML binnen xHTML ( data island ) Resultaat met een dataisland

Webtechnologie Labo 1 37 XML binnen xHTML ( data island ) Pas deze methodiek toe op categories.xml Gebruik daarbij volgend element Opm: werkt enkel in een table als het XML bestand een perfect tabel structuur heeft Roep deze pagina op vanuit het menu in het linkerframe

Webtechnologie Labo 1 38 Extra oefening Voorbeeld van het XML document

Webtechnologie Labo 1 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 adres Gebruik 1 XML document en 1 css document

Webtechnologie Labo 1 40 Einde les 10