1 / 40

Les 10: XML basics

Les 10: XML basics. Inhoud. Herhaling essentiële theorie Algemeen XML - opbouw Well - formedness Datastructuur XML binnen xHTML Linking Css Data island. xHTML vs. XML (herh). xHTML een markup taal , die de XML principes toepast. wel met statische (= niet uitbreidbare) markups

leif
Download Presentation

Les 10: XML basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related