Les 10: XML basics

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


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


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

<![CDATA[ … commentaar … ]]>

Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

11


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


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

16


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


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 of . 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


Web

techn

olo

gie L

abo

1W

ebtech

no

log

ie Lab

o 1

20


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


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

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


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


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

Les 10: XML basics

Documents

Transcript of Les 10: XML basics