10 Pieni datalähtöinen sovellusesimerkki XSL mahdollistaa erilaisten XML:ää tukevien välineiden hyödyntämisen osana omia sovelluksia. Julkaisutoiminnan näkökulmasta mielenkiintoisia (ja opiskelun kannalta havainnollisia) ovat tekstiä formatoivien sovellusten ohella myös datalähtöiset (graafiset) sovellukset. 196
10.1 Välisoitto Datalähtöiset sovellukset tarjoavat houkuttelevan tavan myös ns. mashuppien tekemiseen Luvassa on kuitenkin myös haasteita (onko tieto luotettavaa? luettavissa? mitä tehtäisiin? mitä saa tehdä? tietoturva? evoluutio?) Ongelmakenttään pureutuu esim. ns. Semanttinen Web - teknologiaperhe ("avaa datasi kohderyhmällesi semanttisloogisen kuvailun keinoin"); tähän aihepiiriin palataan jatkokurssilla 197
10.2 Sovellusesimerkki: esitysgrafiikkaa Halutaan tuottaa piirakkakuvioita, pylväsdiagrammeja yms. esitysgrafiikkaa Esimerkeissä tarkastellaan music-tietoja kappaleiden pituuksilla täydennettynä <music>... <tracks> <track len="3m59s">down to the waterline</track> <track len="5m22s">water of love</track> <track len="3m19s">setting me up</track> <track len="4m09s">six blade knife</track>... Miten toteutettaisiin ts. mikä on mahdollista, mitä osataan ja mikä taloudellista/ järkevää? (Seuraavassa tarkastellaan vain eräitä vaihtoehtoja) 198
10.3 Toteutusvaihtoehtoja Halutaan esittää albumin kappaletieto graafisesti esim. piirakkadiagrammina Kokeillaan eri toteutusvaihtoehtoja 1. Piirretään kaavio käsin 2. Kuvataan tieto toimistosovellukseen CSV-muodossa ja formatoidaan kuvaksi 3. Toteutetaan kuva sopivalla ohjelmakirjastolla (nyt minimalistinen Perl) 4. Kuvataan tieto suoraan sopivaan vektorigrafiikkaformaattiin (nyt minimalistinen SVG) Kuhunkin vaihtoehtoon liittyy hyviä ja huonoja puolia tarkastelemme näitä seuraavaksi 199
10.4 Sovellusesimerkin toteutustapa #1: kuva käsityönä Poimitaan data käsin, valitaan sopiva työkalu ja piirretään "Hyvää": - kuvan ulkoasu on täysin päätettävissä, kaikki suunnittelijan/ piirtäjän/työkalun osaaminen/luovuus/ominaisuudet hyödynnettävissä - formaatti periaatteessa vapaasti valittavissa (ohjelmatuen rajoissa) - sopii myös mekaanisesti tuotetun kuvan jälkikäsittelyyn (leikkaa/liimaa) "Huonoa": - pahimmillaan hyvin hidasta/kallista, toistettavuus huono - piirtäminen virhealtista ja vaikeaa, lipsahduksia sattuu Huom. Jos kyse on kuitenkin kertaluonteisesta tehtävästä ja esitettävää dataa on "vähän", tämä voi kuitenkin olla järkevin ratkaisu (!) Jos työkalu sopiva, käsin piirretty kuva voidaan melko helposti tuoda mekaanisen jatkokäsittelyn piiriin (mediaobjektina); vrt. OpenOffice & XML 200
10.5 Sovellusesimerkin toteutustapa #2: toimistosovellus Kuvataan tieto esim. toimistosovelluksen taulukkolaskentaohjelmaan Tarkastellaan seuraavaksi helppouden/yleisyyden vuoksi CSV-formaattia Esim. MS Excel hyväksyy seuraavat tiedot 3,9833333333333334; Down to the waterline 5,366666666666666; Water of love 3,3166666666666664; Setting me up 4,15; Six blade knife 2,95; Southbound again 5,566666666666666; Sultans of swing 6,233333333333333; In the gallery 4,7; Wild west end 4,9; Lions Toteutus: m2csv.xsl Jatkokäsittely on helppoa ja monipuolista!...mutta käsityötä music.xml XSLT-pros. data.csv MS Excel... m2csv.xsl 201
10.6 Toteutustapa #3: ohjelmoitu sovellus Ohjelmallinen käsittely on perusedellytys käsityön poistamiselle (mutta molemmissa lähtökohdissa on omat hyvät ja huonot puolensa) Yleiskäyttöisiä grafiikkakirjastoja erilaisten kuvioiden piirtelyyn on kehitetty useille eri sovelluskehittimille ja ohjelmointikielille (ja helppo tehdä lisää...) Tarkastellaan seuraavassa Perl-kielistä toteutusta moduuliin Gd::Graph nojautuen (ks. http://search.cpan.org/) Perl on hyvä, monipuolinen ja hyvin tiivis ohjelmointikieli joka jättää osaavan ohjelmoijan päätettäväksi suuren osan esim. ohjelmointityyliin liittyvistä asioista... Toteutus: pie.pl data.csv Perl-tulkki out.png... pie.pl 202
10.7 Tiiviihkö Perl-ohjelma... use GD::Graph::pie; # Simppeli CSV-parseri: open(in, "data.csv"); while ($line = <IN>) { chomp($line); @arr = split(";", $line); $arr[0] =~ s/,/\./; # korvataan pilkku pisteellä $data[0][$i] = $arr[1]; $data[1][$i++] = $arr[0]+0; # type-cast luvuksi ;) } close IN; # Kuvan teko: my $g = new GD::Graph::pie(300,300); $g->set(start_angle=>90, '3d'=>0); $g->plot(\@data); # Kuvan tulostus PNG-formaatissa: open(out, ">out.png"); binmode(out); print OUT $g->gd->png; close OUT; 203
10.8 Toteutustapa #4: natiivi XML-sovellus Kun XML:stä puhutaan, "luonteva" vaihtoehto on tietenkin rakentaa graafinen sovellus XML-perheen SVG-tekstiformaattiin nojautuen (ks. seuraava SVG-esittely ) Esimerkkiä on nyt hieman yksinkertaistettu jottei SVG:stä tulisi kovin monimutkaista - pylväitä piirakan sijaan (...jottei juuri laskutoimituksia [max!]; helppo toteuttaa 1- vaiheisena muunnoksena) - skaalaus kiinteä (mutta osa kuvapinnasta saattaa jäädä [aluksi] esitettävän näytön ulkopuolelle) Toteutus: m2svg-v2.xsl music.xml XSLT-pros. out.svg m2svg.xsl 204
10.9 Taustaa: Scalable Vector Graphics (SVG) hyvin lyhyesti SVG on XHTML:n tavoin modularisoitu XML-tekstiformaatti (1.0, 1.1, Basic, Tiny) joka tarjoaa keinon määritellä vektorigraafisia ja koostettuja kuvia Perusidea lyhyesti - svg-elementti määrittelee ikkunan (viewport) piirtopinnalle (canvas) - piirtopinnalle asemoidaan tekstistä, viivoista, viivoista koostuvista kuvioista ja rasterikuvista erilaisia objekteja (tasoittain ryhmiteltynä) - tekstillä, viivoilla ja kuvioilla on runsaasti erilaisia attribuutteja (vrt. style) - tekstiä, viivoja, yms. voidaan muuntaa geometrisesti ja piirtää suhteessa toisiin objekteihin - kuvioista voidaan määritellä myös esim. maskeja ja filttereitä (viittausrakenteina) ja kuvioit voivat sisältää myös animaatioita 205
10.10 Esimerkkejä SVG-grafiikasta (1/2) 206
10.11 Esimerkkejä SVG-grafiikasta (2/2) 207
10.12 SVG-dokumentin rakenne SVG-dokumentti on kuten XHTMLdokumentti, mutta XHTML-sanaston ja hypertekstin yms. sijaan puhuu SVG-sanaston avulla vektorigrafiikasta <?xml version="1.0" encoding="iso-8859-1" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg width="12cm" height="4cm" viewbox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="600" cy="200" rx="550" ry="175" fill="yellow" stroke="blue" stroke-width="20"/> <rect x="1" y="1" width="1198" height="398" fill="none" stroke="blue" stroke-width="2" /> <polygon fill="red" stroke="blue" stroke-width="10" points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /> <text x="470" y="240" font-size="70">tekstiä</text> </svg> 208
10.13 Välivaiheita sisältävä prosessointi Koska XSLT (1) ei osaa muuntaa tulospuita, toteutuksissa päädytään usein 2-vaiheiseen prosessointiin "yhden" muunnosaskeleen sisällä - hankalat tietorakenteen "avataan tai normalisoidaan" -...tuloksena käsittelyputkia Käytännössä XML-sovellusohjelmoinnin helppous mahdollistaa kriittisten välivaiheiden toteuttamisen myös lausekielisenä...xslt 2 (vrt. xslt-esim/xslt2-music-site) music.xml XSLT-pros. tmp.xml XSLT-pros. tmp.svg m2tmp.xsl tmp2svg.xsl 209
10.14 Putkilinjaston idea Putkilinjastossa (pipeline) prosessointi jaetaan erityyppisiin käsittelyaskeliin (step), esim. - lukija - muunnin (yhdistäjä, filtteri, ehto, ) - tulostaja Putkilinjasto voi tehdä "mitä tahansa"; keskeinen rajoite on silmukoiden kieltäminen (ts. putki ei saisi edes epäsuoraan lukea omaa tulostettaan) Askel voi koostua aliputkilinjastosta jne. XML-putkissa askeleissa liikkuva tieto on tietenkin (pääosin) XML-muotoista, Tekniikoita: Cocoon, Ant, XProc, ' ' -operaattori, ; ks. esim. http://www.w3.org/tr/xproc/ (Kuva: W3C 2007) 210
10.15 Huomautuksia (1/2) Toteutustapa #4 mahdollistaa toteutustavan #3 ohjelmoimisen esim. XSLT-prosessin muodossa (vrt. kaaviokuva ohessa) music.xml Käytännössä tämä tarkoittaa sitä että XSLTtekniikan avulla toteutettuja prosesseja voi abstrahoida "kapseloimalla" usein toistuvia tehtäviä "aliohjelmien" tavoin - so. määritellään dokumenttityyppi graphdata johon kerätään esitysgrafiikkaan liittyvä data määrämuotoisena ja toteutetaan vastaava (yleiskäyttöinen) XSLT-sovellus MakePie tms. Kätevää! (Vai onko?) XSLT-pros. graph-data.xml MakePie (XSLTpros. + g2p.xsl) out.svg...? m2gd.xsl pieconfig.xml 211
10.16 Huomautuksia (2/2) Periaatteessa kelpo toimistosovellus tai kuvankäsittelyohjelma voi osata lukea XML:ää sellaisenaankin (..jolle SVG on eräs grafiikkaformaatti) Käytännössä ei kuitenkaan ole taattua, että eri ohjelmien XML-formaatit... 1. noudattavat jotain standardia tekstiformaattia (esim. SVG), 2. on kelvollisesti dokumentoitu (julkisesti), tai 3. ovat pysyviä. Myös XSL-muunnosten rajat tulevat käytännössä melko nopeasti vastaan - ohjelmoinnin kömpelyytenä ja/tai - esim. funktioiden puutteena (XSLT1 ja max(x), XSLT2 ja sin(x)?) "oikea" XML-sovellusten ohjelmointi (prosessoriohjelmointi), - (muista kuitenkin miten helppoa on esim. muunnos XML CSV...) 212