Oma teema! -4-

Tapahtunut edellisissä osissa: Perus internetsivu muokattiin soveltuvaksi blogger blogialustalle. Tämän jälkeen tutustuttiin bloggerissa <div> elementit korvaavan <b:section> elementin toimintaan. Viimeisimmässä kirjoituksessa hyökkäsimme hieman syvemmälle blogin lähdekoodin sisuksiin ja otimme käsittelyyn <b:widget> elementin ja siihen käypät atribuutit. Nyt jatketaan siitä mihin edellisessä osassa jäätiin. 

Voihan Widget

Kuten jo tiedetään b:section elementti käyttäytyy kuten div elementti perus html kielessä. Sama toimintaperiaate jatkuu myös b:widget elementissä. Tämä tarkoittaa sitä että CSS määrittelyt toimivat myös tässä elementti osassa. Sen lisäksi b:widget elementti toimii myös "säiliönä" tiedolle aivan kuten div elementti perus internetsivuissa tai b:section elementti bloggerissa. Nyt lähdemmekin lähemmin tutustumaan siihen mitä nämä b:widget elementit sisältävät ja samalla opimme hieman lisää siitä miten bloggeriin näitä kyseisiä widgettejä luodaan. 

Widgettien tarkoituksena oli siis "hakea" tieto jostain ja esittää se asetusten mukaisesti halutussa muodossa. Tämä tiedon haku tulee kuitenkin määrittää itse b:widget elementin sisällä. Eli meidän tulee kertoa lähdekoodin avulla mitä tietoa* haetaan. (*esim blogikirjoitukset tai vaikkapa koko blogin otsikko).

Edellisen osan pelottava 'avattu' header widgetti sisälsi kaiken sen tiedon jonka blogger alusta tarvitsee jotta asetuksissa määritetty otsikkotieto näkyy oikealla paikallaan halutussa muodossa. Tietenkään header widgetissä ei lähdekoodin puolella määritelty otsikon asetuksia, vaan siinä ehtolauseiden avulla käskettiin bloggeria vertaamaan otsikko asetuksiin ja tuottamaan oikean näköinen otsikko. 

Tästä lähdekoodi hirvityksestä voidaan kuitenkin oppia jotain widgettien toiminnasta. Lähdetään siis liikkeelle notepad++:n puolelta. Avaa uusi tyhjä sivu auki notepad++:n ja kopioi ja liitä tämä header osan 'avattu' lähdekoodi siihen.

Tämän jälkeen tallenna tiedosto haluamallasi nimellä. (Muista valita tiedostomuodoksi eXtensible markup language)

Include everything

Jokainen widget koostuu vähintään yhdestä osasta, joita kutsutaan nimellä includable <b:includable>. Tämä includable toimii määritteenä tiedolle jota widgetissä näytetään.

Jokainen includable määritelmä vaatii uniikin id:n (huom: yllä oleva b:includable 'main' on aina pakollinen jokaisessa widgetissä). Header osamme sisältää yhteensä kolme includable määritettä. Includable main määrityksen lisäksi löytyvät vielä includable: title ja includable: description. 

Header widgetissä ensimmäinen <b:includable id:'main'> toimii säiliönä ehtolauseille jotka vertaamalla asetuksissa määritettyyn otsikkotyyppiin lopulta saavat aikaan halutun lopputuloksen. Ellei bloggerin otsikko -osassa olisi tarvetta ehtolauseille blogin otsikolle riittäisivät määrityksiksi pelkästään <includable id:'title'> (määritys näyttää blogin otsikko) ja <includable id:'description'> (määritys näyttää blogin kuvaus). (Tässä kappaleessa on pieni tahallinen asiavirhe, mikä se on?)

<b:includable>On määritelmä joka voitaisiin suomentaa myös 'sisällytettävä'. Sisällytettävä on siinä mielessä kuvaava sanamuoto sillä includable elementin sisälle tuleva määritys on muotoa <b:include>, joka voidaan suomentaa sisällytä.

Tarkastellaan hieman alinta includable määritystä blogin header widgetissä.

Tässä includable elementissä määritetään näytettäväksi, kuten jo id:stä voi huomata, blogin kuvaus (engl. description), joka näkyy blogissa jos se asetuksista on laitettu näkyväksi. Kuten jo yllä sanoin jokaisen <b:includable> elementin sisäisen tiedon määrittää <b:include> ja tämä tieto on muotoa <data:datannimi />. (<data:DatanNimi /> on sisin elementti koko bloggerin sisällössä.)

Koko komeus
Nyt alkaa olla aika pienen kertauksen ennekuin päämme lopullisesti räjähtää tästä kaikesta. Eli tältä näyttää bloggerin lähdekoodin perus rakenne että saadaan näkyviin yhden vaivaisen widgetin sisältö:

<b:section>
     <b:widget>
        <b:includable>
            <b:include>
               <data:datannimi />
            </b:include>
       </b:includable>
     </b:widget>
</b:section>

Tästä koko komeudesta puuttuvat tietenkin kaikki atribuutit joita on jo käsitelty ja haettavan datan tiedot. Tätä mahdollista "dataa" blogger tarjoaakin yli oman tarpeen. Tässä muutama esimerkki:

Datan-nimi	Käyttö
title (*)	Blogin otsikko
homepageUrl (*)	Etusivun osoite
pageType (*)	Sivun tyyppi
pageTitle (*)	Tämänhetkisen sivun otsikko
url (*)	Tämänhetkisen sivun osoite
dateHeader	Kirjoituksen päivämäärä
comments	Tämänhetkisen kirjoituksen kommmentit
feedLinks	Syötteiden linkit
olderPageUrl	Vanhemman kirj. osoite (linkit)
newerPageTitle	Uudemman kirjoituksen otsikko (linkit)

(*) merkityt ovat globaaleja data nimiä joita voidaan käyttää missä tahansa blogin osassa minkä tahansa widget tyypin (header, html, blog jne.) kanssa. Jokaisella widget tyypillä on vielä omia data tietojaan ja yhteensä näitä erilaisia data tietueita taitaa olla noin satakunta eli aivan varmasti riittävästi.

Loppusanat

Nyt kun tiedämme jo aika paljon blogger blogin rakenteesta on aika luoda jotain uutta omaan blogiimme. Eli luodaan sinne ikioma widget! Tämä kuitenkin tapahtukoon vasta seuraavassa osassa ettei kirjoitusten tietomäärä ylitä ns. järkeenkäypää rajaa. Jos sinulla on kysyttävää mistä tahansa tämän artikkelin kohdasta tai haluat arvata mikä asiavirhe tämän kirjoituksen kappaleesta löytyy jätä kommenttia!