Windows Gedžeti iz kućne laboratorije

Kao podrška 10. jubilarnoj Sinergiji, Superteza će se naći u ulozi saradnika ovog prestižnog tehnološkog događaja u regionu. U cilju pripreme za predstojeća takmičenja (u izradi gadžeta i akceleratora), nastavljamo sa serijom korisnih tutorijala. Ovom prilikom, upoznaćemo sa sa idejom i metodama izrade, (na ovim prostorima) nepravedno zapostavljenih gedžeta (gadgets). Izraz gedžet srećemo i kao zajedničko ime za tehnološke spravice, savremene igračke za sve generacije. Stoga, u prenosnom smislu, gedžeti i jesu programčići koji izgledom i idejom podsećaju na ove zabavne spravice. Ako vam se sviđa da na radnoj površini (desktop) pratite vremensku prognozu, kursne liste ili stanje procesora, definitivno ste spremni za čitanje ovog bestseller tutorijala. Jer nakon toga, bićete dovoljno obučeni da ove simpatične programe pravite sami, u kućnoj radinosti. Jedina vaša investicija ogleda se u izdvajanju vremena za čitanje, a kasnije i pripremu prvog, sopstvenog gedžeta.

Malo o gedžetima

Windows gedžeti su jednostavni programi bazirani na tehnologiji XML, HTML i CSS, uz podršku za skript jezike, koje omogućavaju korišćenje funkcionalnosti i informacija dobijenih od lokalnih aplikacija ili web servisa. Podršku za gedžete uvela je Windows Vista u vidu platforme za prikaz i razvoj gedžeta – Windows Sidebar.

Ovu platformu nasledio je i Windows 7, sa nekoliko poboljšanja i uz potpunu kompatibilnost za gedžete razvijane za Windows Vista. Jedna od novina je potpuno ukidanje posrednka, poznatog kao Sidebar, što znači da gedžeti u Windowsu 7 nisu fizički vezani za Sidebar (čita se sajdbar), već svoju punu funkcionalnost i vizuelne mogućnosti prikazuju na bilo kom delu radne površine. Novine postoje i u manipulaciji gedžetima. Galerija gedžeta je unapređena, dodate su komande za uključivanje/isključivanje prikaza gedžeta – poput ikonica na radnoj površini.

Osim novina u korišćenju gedžeta, Windows 7 uveo je neke olakšice i kreatorima gedžeta (tj. čitaocima ovog tutorijala ). Dodat je ključ u Windows Registry (listu ključnih podešavanja Windowsa i instaliranih programa), koji omogućuje prikaz grešaka u skriptama za vreme izvršavanja, što omogućava kreatorima gedžeta da svoje funkcionalnosti debaguju (tako se zove proces otklanjanja grešaka tokom izvršavanja linije po linije koda).

Za kreatore gedžeta bitno je napomenuti da u Windowsu 7 sve gedžete izvršava i održava proces sidebar.exe. Windows Vista je dodavao po jedan proces ovog tipa za svaki gedžet, dok je Windows 7 automatizovao pokretanje i zaustavljanje jedinstvenog procesa, pa se proces pokreće u momentu kada korisnik doda prvi gedžet na radnu površinu, a zaustavlja se kada skloni poslednji.

Kako početi?

Potrebno je uvek na umu imati svrhu gedžeta – to su jednostavni programi koji služe da korisniku predstave ograničen skup informacija, koje obezbeđuju posredstvom drugih aplikacija, kontrola, web servisa ili web sajtova. Osnova svih gedžeta je HTML strana, tako da će dobar izgled gedžeta obezbeđivati transparentne (providne) slike i CSS stilovi.

Gedžet se distribuira kao datoteka (file) sa ekstenzijom “.gadget”, koja je zapravo zip arhiva, koja sadrži osnovne datoteke – kolekciju HTML, XML, MS Jscript, JavaScript, CSS datoteka… Obavezna datoteka je manifest, koji mora nositi ime gadget.xml. U okviru ove XML datoteke nalaze se svi potrebni podaci o gedžetu – ime, verzija, autor, itd.

Primer gadget.xml:

<?xml version=’1.0′ encoding=’utf-8′ ?>

<gadget>

<name>Sinergija 10 Odbrojavanje</name>

<description>Zvanični Gedžet Microsoft Sinergije 10</description>

<icons>

<icon height=’48′ width=’48′ src=’icon.png’ />

</icons>

<version>1.0.0</version>

<author name=’Microsoft Sinergija 10′>

<info url=’www.mssinergija.net’ />

<logo src=’logo.png’ />

</author>

<copyright>© Microsoft Sinergija.</copyright>

<hosts>

<host name=’desktop’>

<base type=’HTML’ apiVersion = ’1.0.0′ src=’sinergija.html’ />

<permissions>FULL</permissions>

<platform minPlatformVersion=’1.0′ />

</host>

</hosts>

</gadget>

Podaci u manifest datoteci omogućavaju operativnom sistemu da za gedžet prikažu thumbnail ikonicu, ime i web sajt autora. Takođe, u ovoj datoteci potrebno je navesti platformu koja će prikazivati gedžet (desktop), kao i putanju do izvorne HTML datoteke gedžeta (sinergija.html).

Sledi slika sa prikazom nekih od elemenata koje pokriva manifest datoteka:

Struktura datoteka jednog gedžeta je jednostavna. Pored manifesta, potrebno je da postoji i osnovna datoteka gedžeta –html strana koja će služiti kao podloga za sadržaje gedžeta. Sve slike mogu stajati u direktorijumu Images, u korenu (root folder – glavnoj fascikli) gedžeta, a svi drugi relevantni fajlovi trebalo bi da stoje u fascikli (folder) en-US. Intuitivno možete primetiti da je ova fascikla specifična za jezik operativnog sistema.

Odbrojavanje do Sinergije 10

Kao primer gedžeta, razvićemo aplikaciju koja odbrojava dane do početka ovogodišnje Sinergije 10, a vi je možete prepraviti i koristiti za odbrojavanje dana do penzije, odlaska na odmor, dolaska prinove ili puštanja prve linije metroa . U suštini, gedžet će izgledati poput odbrojavanja na portalu Sinergije. Da bismo ovo izveli, potrebne su nam dve transparentne png slike, linkovi ka slikama sa portala Sinergije i prosečno poznavanje jezika Javascript.

Za početak, napravićemo fasciklu (folder) na radnoj površini i nazvati je Sinergija10.Gadget. Potom  ćemo napraviti još dve unutrašnje fascikle i nazvati ih en-US i Images.

Unutar fascikle en-US potrebne su nam sledeće datoteke: gadget.xml, sinergija.html i odbrojavanje.js. O manifestu smo već dovoljno rekli, kao i o osnovnoj html datoteci. Datoteka odbrojavanje.js služiće nam da unutar nje objedinimo svu logiku gedžeta.

Počećemo od datoteke sinergija.html. Napravićemo osnovnu html deklaraciju:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Sinegija 10 Odbrojavanje</title>

</head>

<body>

</body>

</html>

Unutar <head> elementa, definisaćemo stilove dokumenta:

<style>

body {

width:218px;

height:423px;

font-family: verdana, arial, helvetica, sans-serif;

font-size:12px;

line-height:130%;

}

#preostali_dani {

width:150px;

height:32px;

color:white;

background-image:url(“http://www.mssinergija.net/sr/sinergija10/Vesti/PublishingImages/timer_img/ctdwn_bck.jpg”);

background-repeat:no-repeat;

margin-top:5px;

padding-bottom:5px;

}

#preostali_dani #tekst {

float:left;

padding-left:4px;

padding-top:6px;

}

#preostali_dani #broj {

float:right;

padding-right:4px;

padding-top:6px;

}

</style>

Lako se može primetiti da je <body> element svojstvima ograničen na širinu od 218 i visinu od 423 piksela. Ovo će eksplicitno definisati dimenzije gedžeta kada bude prikazan na radnoj površini. Ostala svojstva u dokumentu odnose se na font, veličinu slova i razdaljinu između redova. Ostali definisani stilovi poslužiće za element gedžeta u okviru kojeg će biti prikazan broj preostalih dana do Sinergije 10.

Pošto ćemo svu logiku gedžeta objediniti unutar datoteke odbrojavanje.js, potrebno je kod ovog javascript dokumenta, koji ćemo kasnije ispisati, uključiti u okviru <head> elementa. Ovo ćemo izvesti sledećom linijom koda:

<script language="javascript" src="odbrojavanje.js"></script>

Sada možemo preći na popunjavanje <body> elementa gedžeta. Prvo što je potrebno definisati jeste pozadina gedžeta. Naša pripremljena transparentna png pozadina smeštena je u fasikli (folder) Images:

Pozadina gedžeta može biti definisana bojom ili slikom, što je svojstveno CSS stilovima. Međutim, korišćenje CSS stilova za pozadinu neće obezbediti transparentnost slike, već će gedžet izgledati kao pravougaonik sa osnovnom – belom pozadinom, na kojoj se nalazi transparenta slika koju ste pripremili kao pozadinu vašeg gedžeta. Da bismo obezbedili pravu transparentnu pozadinu, potrebno je da iskoristimo oznaku (tag) svojstvenu gedžetima (<g>) i njen mod – background:

<g:background id="background" src="../Images/pozadina.png" style="position:absolute;top:0;left:0;z-index:-999;no=repeat;" />

Da bi ceo sadržaj gedžeta bio centriran, obuhvatićemo ga zasebnim <div> elementom širine 200 piksela. Da bi sam element bio centriran, udaljićemo ga od desne ivice gedžeta tačno 9 piksela.

<div align="center" style="width:200px; padding-right:9px;">

<!—Ovde će biti ceo sadržaj gedžeta -->

</div>

Kao što se može videti na slici gedžeta, u samom vrhu nalazi se naslov Sinergija 10 i ispod njega datum trajanja ovogodišnje Sinergije. Odmah ispod prikazan je broj preostalih dana, odbrojavanje do Sinergije, naziv trenutnog promotivnog perioda i cena u okviru njega, kao i slika koja to ilustruje. Čitav sadržaj odbrojavanja biće rezultat skripte odbrojavanje.js, koju je potrebno eksplicitno pozvati. Nakon toga, potrebno je staviti sliku trenutnog favorita sa glasanja za logo Sinergije:

<div align="center" style="width:200px; padding-right:9px;">

<b>Sinergija 10</b><br />

<b>15.11/ - 19.11.</b><br />

<script language="javascript">odbrojavanje();</script>

<img src="../Images/logo.png" />

<div>

Sliku logo.png stavićemo u fasciklu Images:

Za prikaz odbrojavanja, promo perioda i odgovarajućih elemenata eksplicitno pozivamo metodu odbrojavanje():

function odbrojavanje() {

// određujemo trenutni datum

var danas,godina,mesec,dan;

danas = new Date();

godina = danas.getYear();

mesec = danas.getMonth();

dan = danas.getDate();

// zbog nekih Internet pregledača

if (godina < 1000) godina += 1900;

// pravimo string reprezentacije datuma, koje možemo porediti

var datum_danas = meseci[mesec] + ” ” + dan+ “, ” + godina;

var datum_sinergija = “Nov 15, 2010″;

// određujemo razliku u danima

var razlika = (Math.round(

(Date.parse(datum_sinergija)-Date.parse(datum_danas)) /     (24*60*60*1000))*1);

// ispitujemo razliku

if (razlika == 0) { // današnji datum je datum početka Sinergije

document.write(“<h1>Sinergija počinje DANAS!</h1>”);

//… ovo nećemo obraditi

}

else if (razlika < 0) { // današnji datum je nakon početka Sinergije

document.write(“<h1>Sinergija je prošla ili je u toku!</h1>”);

//… ovo nećemo obraditi

}

else { // ostalo je neko vreme do početka Sinergije

// parsiramo razliku u string

var dani = razlika.toString();

// prikazujemo odbrojavanje i period

prikaziPreostaleDane(dani);

prikaziURL();

// ubacujemo element za otkucavanje

document.write(“<div id=’otkucavanje’></div>”);

document.write(“<hr />”);

prikaziPeriodICenu(danas);

document.write(“<hr />”);

otkucavaj();

}

}

Da bi ova funkcija pravilno radila, potrebno je prethodno definisati:

var meseci = new Array(“Jan”,”Feb”,”Mar”,”Apr”,”May”,”Jun”,”Jul”,”Aug”,”Sep”,”Oct”,”Nov”,”Dec”);

Funkcija zadužena za prikaz preostalih dana do Sinergije:

function prikaziPreostaleDane(dani) {

document.write(“<div align=’center’>”);

document.write(“<div id=’preostali_dani’>”);

// prikazujemo slova

document.write(“<div id=’tekst’>Preostalo dana:</div>”);

// prikazujemo brojeve

document.write(“<div id=’broj’>”);

var src = “http://www.mssinergija.net/sr/sinergija10/Vesti/PublishingImages/timer_img/c”;

for (i=0; i<dani.length; i++) {

document.write(“<img src=’” + (src + dani.charAt(i)) + “.gif’>”);

}

document.write(“</div>”);

document.write(“</div></div>”);

}

Funkcija zadužena za prikaz linka ka Sinergija portalu:

function prikaziURL() {

document.write(“<a href=’http://www.mssinergija.net’>WWW.MSSINERGIJA.NET</a>”);

document.write(“<br />”);

}

Funkcija koja prikazuje promotivni period, cenu i odgovarajuću sliku:

function prikaziPeriodICenu(danas) {

var src = “http://www.mssinergija.net/sr/sinergija10/vesti/PublishingImages/clock_img/”;

if (danas < new Date(“09/15/2010″)) { // u toku je super promo period

document.write(“U toku je <i>Super promo period</i>!<br />Cena kotizacije: <b>22 050 RSD</b>!”);

document.write(“<br />”);

document.write(“<img src=’” + src + “super_promo_sr.png’ />”);

}

else if (danas < new Date(“10/15/2010″)) { // u toku je promo period

document.write(“U toku je <i>Promo period</i>!<br />Cena kotizacije: <b>33 075 RSD</b>!”);

document.write(“<br />”);

document.write(“<img src=’” + src + “promo_sr.png’ />”);

}

else { // prošli su promo periodi

document.write(“Promotivni period je istekao!<br />Cena kotizacije: <b>44 100 RSD</b>!”);

document.write(“<br />”);

document.write(“<img src=’” + src + “final_sr.png’ />”);

}

document.write(“<br />”);

document.write(“<i>* Sve cene su bez PDV.</i>”);

}

Funkcija koja otkucava vreme do početka Sinergije:

function otkucavaj() {

var danas,godina,mesec,dan,sat,minut,sekunda;

danas = new Date();

godina = danas.getYear();

mesec = danas.getMonth();

dan = danas.getDate();

// zbog nekih Internet pregledača

if (godina < 1000) godina += 1900;

sat = danas.getHours();

minut = danas.getMinutes();

sekunda = danas.getSeconds();

var datum_danas = meseci[mesec]+” “+dan+”, “+godina+” “+sat+”:”+minut+”:”+sekunda;

var datum_sinergija = “Nov 15, 2010″;

var razlika = Math.abs(Date.parse(datum_danas) – Date.parse(datum_sinergija));

razlika_dani = Math.floor(razlika/(60*60*1000*24)*1);

razlika_sati = Math.floor((razlika%(60*60*1000*24))/(60*60*1000)*1);

razlika_minuti = Math.floor(((razlika%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);

razlika_sekunde = Math.floor((((razlika%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

// ažuriramo celo odbrojavanje

document.getElementById(“otkucavanje”).innerHTML =

“<b>” + razlika_dani + “</b> dana, <b>” + razlika_sati + “</b> h <b>” +

razlika_minuti + “</b> m <b>” + razlika_sekunde + “</b> s”;

// ako smo prešli u novi dan ažuriramo veliki prikaz broja dana

// uslov podrazumeva da je tajmer u između nulte i pete sekunde početka dana

if(sat == 0 && minut == 0 && sekunda < 5) {

datum_danas = meseci[mesec] + ” ” + dan+ “, ” + godina;

razlika = Math.abs(Date.parse(datum_danas) – Date.parse(datum_sinergija));

var razlika_velika = Math.round(razlika/(60*60*1000*24)*1);

var razlika_prikaz = razlika_velika.toString();

var preostalo = “”;

var src = “http://www.mssinergija.net/sr/sinergija10/Vesti/PublishingImages/timer_img/c”;

for (i=0; i<razlika_prikaz.length; i++) {

preostalo += (“<img src=’” + (src + razlika_prikaz.charAt(i)) + “.gif’>”);

}

document.getElementById(“broj”).innerHTML = preostalo;

}

// podešavamo ponavljanje funkcije za 1 sekund

setTimeout(“otkucavaj()”,1000);

}

Može se primetiti da slučajevi kada je današnji datum dan početka Sinergije ili dan posle početka Sinergije nisu obrađeni.

Još jedan mali detalj i spremni smo da gedžet zapakujemo i distribuiramo. Ukoliko želimo da se u galeriji gedžeta prikaže slika koja nam odgovara, napravićemo transparentnu png sliku koja naš gedžet najbolje opisuje i postaviti je u koreni (root) element gedžeta:

Da podsetimo, postoji nekoliko linija koda u našoj manifest datoteci koje eksplicitno pozivaju da se ova slika učita, odnosno prikaže:

<icons>

<icon height='48' width='48' src='icon.png' />

</icons>

Testiranje

Kada je potrebno da testirate gedžet koji ste razvili, morate njegov sadržaj sinimiti u fasciklu %/programfiles%\Windows Sidebar\Gadgets. Sistem će vam tražiti administratorsku dozolu da vršite bilo kakve promene nad ovom fasciklom:

Kada otvorite galeriju gedžeta koji su instalirani na vašem računaru, novi gedžet će se pojaviti:

Sada ga možete prevući na radnu površinu i uveriti se u njegovu funkcionalnost. Nakon uspešnog testiranja, vaše datoteke možete zapakovati u zip arhivu sa ekstenzijom .gadget i vaš prvi gedžet je spreman za distribuiranje do potencijalnih korisnika.

Gedžet Sinergija 10 odbrojavanje možete skinuti ovde. U bilo kom momentu ga možete raspakovati (potrebno je prvo promeniti ekstenziju .gadget u ekstenziju .rar ili .zip) i pogledati datoteke – slike, izvorni kod i slično. Treba imati na umu da se sadržaji gedžeta koje instalirate na vašem računaru nalaze u lokalnim datotekama – %localappdata%\Microsoft\Windows Sidebar\Gadgets. Fascikla (folder) koju smo koristili za testiranje rezervisana je za originalne Windows gedžete i ne treba je koristiti za bilo koje druge, osim za potrebe testiranja sopstvenih gedžeta.

Kako dalje?

Gedžet koji smo prikazali u ovom tutorijalu je prilično jednostavan. Ukoliko na umu imate aplikacije sa zahtevnijim funkcionalnostima, poput vremenske prognoze, čitanja kursne liste, prikaza RSS sadržaja, kalendara i slično, potrebno je da se povežete na postojeće web servise il ida podignete sopstveni server i da njime pružate odgovarajući web servis za snabdevanje vašeg gedžeta odgovarajućim sadržajima.

S obzirom na nemogućnost cross-domain korišćenja Ajax tehnologije, kada pravite web servise za gedžete, morate imati na umu da ovi servisi moraju kao rezultat da vraćaju JSON objekat (posebno struktuiran niz podataka nalik na XML) ili drugu strukturu koju će vaš gedžet moći da pozove i da iskoristi. Jedno dobro rešenje je i korišćenje dinamičkog učitavanja skripti, za šta možete naći veliki broj tutorijala na globalnoj mreži.

U ovom tutorijalu nije obrađen dobar deo mogućnosti gedžeta. Ovi jednostavni programi nude velike mogućnosti. Jedna od njih je prilagođavanje (customization) koju možete pružiti korisniku vašeg gedžeta. Postoji ugrađena mogućnost dizajniranja dijaloga za podešavanje opcija prikaza, filtriranja sadržaja i slično, koju možete iskoristiti prilikom razvoja vaše aplikacije. Korisniku se može ostaviti mogućnost menjanja dimenzija gedžeta, upravljanja sadržajem, kao i prikazom.

Osnovne informacije o gedžetima, koje su uglavnom pokrivene ovim tutorijalom, možete naći na adresi: http://msdn.microsoft.com/en-us/library/dd370867(VS.85).aspx. Tutorijal na engleskom jeziku pronaći ćete na adresi: http://msdn.microsoft.com/en-us/library/bb456468(VS.85).aspx.

Ukoliko su vam za rad gedžeta potrebne informacije o sistemu kao što je brzina i iskorišćenje procesora, zauzeće memorije, slobodan prostor na fizičkoj memoriji i slično, potrebno je da se oslonite na API koji pruža Windows Sidebar. Nešto više o tome možete saznati u centru za razvojne inženjere pri Windows Gallery (http://gallery.live.com/devcenter.aspx).

Za kraj, uputićemo vas na adresu koja govori o pravilnim konceptima razvoja gedžeta (http://msdn.microsoft.com/en-us/library/dd834142.aspx). Ovde ćete saznati nešto više o tome kako bi vaši gedžeti trebalo da izgledaju, kako da na najbolji način intereaguju sa korisnikom, koncepte dizajna i kompleksnosti.

Podržavamo sve potencijalne učesnike na takmičenju u izradi Windows Gedžeta i IE Akceleratora u organizaciji ovogodišnje Sinergije. Za sve savete, pomoć prilikom izrade gedžeta i tekuća pitanja u vezi uslova takmičenja, možete se obratiti na mail contest@mssinergija.net.