Post on 21-Jan-2016
description
1
Webtechnologie 1 laboWebtechnologie 1 labo
Dieter RoobrouckDieter Roobrouck
Kristel BalcaenKristel Balcaen
Claudia EeckhoutClaudia Eeckhout
Koen De WeggheleireKoen De Weggheleire
Frederik DuchiFrederik Duchi
An DeraedtAn Deraedt
Les 10: XML basicsLes 10: XML basics
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
2
Inhoud Herhaling essentiële theorie
Algemeen
XML - opbouw Well - formedness Datastructuur
XML binnen xHTML Linking Css Data island
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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 :
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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.
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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 …
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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
Er bestaan een aantal voorgedefinieerde attributen met speciale betekenis: vb xmlns = xml-nnamesspace.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)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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 karakters.(@)- bevat alleen letters, cijfers,punten ,_ of- (geen spaties) - kan niet beginnen met XML in elke vorm (Xml,XML…)
WEL
<Naam><Vnaam><Naam_ID>
NIET
-Boek, 42BoekPara$, E=mc²XmlData, vnaam@naam
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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<Naam> <Voornaam> …. </Voornaam></Naam>
NIET<Naam> <Voornaam> …. </Naam></Voornaam>
NIET:<img src=“test.gif”>
WEL: <img src=“test.gif”/>of<img src=“test.gif”></img>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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
<wijn jaar="1988">…
NIET
<wijn jaar=1998 > …
WEL
<!-- … commentaar … --><![CDATA[ … commentaar … ]]>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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 "' wordt '
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
12
Algemeen
Bij het openen van een XML – document in IE kan je volgende waarschuwing krijgen:
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
13
Algemeen
Dit kan worden uitgeschakeld via:Extra Internet – optiesTabblad AdvancedOnderdeel security
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
15
XML opbouw – Well-formedness
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
16
XML opbouw – Well-formedness
5) Sla het bestand op als mediatheek.xml
6) Valideer het bestand7) Verklaar de foutboodschappen en
corrigeer alle fouten ( plaats commentaar in de file )
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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!)
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
19
XML opbouw – Datastructuur
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
21
XML opbouw – Datastructuur
XML kan aangemaakt worden vanuit verschillende office programma’s
XML tekstformaat Import / exportArchivering
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
24
Toepassingen: weergave van XML binnen xHTML
De aangemaakte xml bestanden weergeven in xHTML via:LinkingCssDataIslands
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
25
XML binnen xHTML ( weergave )
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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.htmhoofding: frmHoofding.htm inhoudframe: frmInhoud.htm
Maak een extern css bestand aan die de opmaakt verzorgt voor alle *.htm documenten
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
27
XML binnen xHTML ( linking )
Het attribuut target zal nooit een Strict Valid document geven.
Oplossing Scripting ( zie WT2 )
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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:nonecategorie {display:none;}
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
30
XML binnen xHTML ( css: display )
Verschil tussen Visibility en DisplayDisplay: het element wordt niet
getoond, en er wordt geen ruimte op het scherm voorzien
Display: block Display: none
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
31
XML binnen xHTML ( css: visibility )
Verschil tussen Visibility en DisplayVisibility: het element wordt niet
getoond, maar er wordt wel ruimte op het scherm voorzien
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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> )
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
33
XML (herh) weergave via een xml-eiland
http://www.w3schools.com/xml/tryit.asp?filename=cd_catalog_island_thead
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 !!!
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
35
XML binnen xHTML ( data island )
Resultaat met het object element
<object data="categories.xml" width=“300" height=“300" type="text/xml" ></object>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
36
XML binnen xHTML ( data island )
Resultaat met een dataisland
<xml id ="xmleiland" src="categorie.xml"></xml>
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
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
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
38
Extra oefening
Voorbeeld van het XML document
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
39
Extra oefening
We sorteren gegevens van werknemers per afdeling:De naam ( moet in het vet )De functieHun privé telefoon ( niet tonen )Hun intern telefoonnummerHun e-mailadres
Gebruik 1 XML document en 1 css document
Web
techn
olo
gie L
abo
1W
ebtech
no
log
ie Lab
o 1
40
Einde les 10