XML (viikko 2)

XML (viikko 2)

[html/xml/robotit.xml]

[html/xml/robotit.css]

[html/xml/robotit.xsl]

[html/xml/robotit-taulukossa.xsl]

[html/xml/robotit.xml]

On XML-dokumentti robotit.xml:

<?xml version="1.0"?>

<robotit>

        <robotti>

                <nimi>Mega Man</nimi>

                <syntymä>1987</syntymä>

                <paino yksikkö="kg">200</paino>

                <linkki uri="http://en.wikipedia.org/wiki/Mega_Man" />

        </robotti>

        <robotti>

                <nimi>Megatron</nimi>

                <syntymä>1984</syntymä>

                <paino yksikkö="tonni">8.6</paino>

                <linkki uri="http://en.wikipedia.org/wiki/Megatron_(Transformers)" />

        </robotti>

</robotit>

Tallenna hakemistoon …/dime/xml/ ja avaa selaimessa. Pitäisi näkyä dokumentin rakennepuu.

Lisää robotit.xml:ään tyylitiedosto-prosessointikäsky:

<?xml-stylesheet type="text/css" href="robotit.css"?>

Anna robotit.css:n olla vielä tyhjä. Katso selaimessa: nyt rakennepuun sijaan pitäisi näkyä kaikki elementtien sisällä oleva teksti samassa kasassa (näyttää pahalta).

[html/xml/robotit.css]

Oletuksena kaikkien xml-elementtien kappaletyyli on inline, eli juokseva teksti.

Lisää robotti-elementeille CSS-tyyli, joka vaihtaa ne tekstikappaleiksi (block), eli niin että kukin robotti on renderöity omalle rivilleen ja niiden välissä marginaalia. Ks. http://www.w3.org/Style/styling-XML

Lisäksi muita CSS-muotoiluja: robotin nimi lihavoituna

On ihan oikein (ja selainyhteensopivaa) tehdä internet-sivuja XML-tiedostoina, mutta se on hyvin rajoittunutta. Yleensä XML:ää käytetäänkin käyttäjälle näkymättöminä väliformaatteina, joita www-palvelin lähettää AJAX-kutsujen kautta selaimelle, joka prosessoi saamansa XML-datan JavaScriptillä.

[html/xml/robotit.xsl]

XML-tiedoston tyylittely CSS-tyylein on hyvin rajattua: linkki-elementin URI-attribuutissa olevaa HTTP-linkkiä ei saa mitenkään näkyviin, ja robotit.xml on semanttiselta merkitykseltään taulukko, mutta tätäkään ei voi css-tyylein tuoda esiin.  Tehkäämme XSL-muunnos dokumentille, jossa selain generoi (X)HTML:llä dokumentin pohjalta.

HUOM: XSL-muunnos toimii mm. Chromessa vain jos dokumentti ladataan HTTP-protokollalla! (http://stackoverflow.com/questions/2981524/how-can-i-make-xslt-work-in-chrome) -- eli joko käynnistä Chrome tietoturvaa alentavalla vivulla tai laita dokumentti esim. laitoksen www-palvelimelle.

Tee ulkopuolinen XSL-tyylitiedosto, joka muuttaa robotit.xml:n (X)HTML-muotoon siten, että robotit ovat listattu ul-listassa.  Wikipedian XSLT-artikkelissa on esimerkki tälläisestä muunnoksesta: muuta esimerkin match-kohdat vastaamaan dokumenttiasi.  Tässä ohje tulkintaan:

Käytä family-namen ja namen sijaan dokumentin nimi ja syntymäaikaa.

Linkitä XSL-muunnos dokumenttiin seuraavasti:

<?xml-stylesheet href="robotit.xsl" type="text/xsl" ?>

Testaa selaimessa. Selaimet osaavat tehdä XSL-muunnokset lennossa.

[html/xml/robotit-taulukossa.xsl]

Tee sellainen XSL-muunnostiedosto, jossa listan sijasta robotit ovat taulukossa:

nimi

syntymäaika

Mega Man

1987

Megatron

1984