Skapa widgets till mobilen

Widgets är små program - byggda med webbteknik istället för i "tyngre" utvecklingsmiljöer som C++ eller J2ME. Widgets finns under många namn i många olika operativsystem - Dashboard Widgets på Mac, Gadgets i Windows Vista, Yahoo Widgets och Adobe Air hör till de populäraste varianterna.

Från och med 3rd Edition Feature Pack 1 och framåt finns Widgets också för S60. En S60-widget använder sig av mobilens webbläsare för att visa sitt innehåll, men det märker man aldrig som användare. Att installera en widget på mobilen fungerar på ungefär samma sätt som med java- och symbianprogram - till exempel genom att man skickar installationsfilen till mobilen med bluetooth.

När installationen är klar visas widgeten som en ikon i mobilens menysystem och när man startar en widget är det svårt att se att den är skapad på ett enklare sätt än andra program och funktioner i mobilen. Widget-tekniken på S60 kallas Web Runtime, förkortat WRT.

De vanligaste användningsområdena för en widget är att hämta information från en internettjänst eller att göra en enkel beräkning i mobilen. Det kan vara enhetsomvandlare, väderprognoser, mejl, nyheter eller börskurser. Det finns flera fördelar med att använda en widget istället för att surfa in på internettjänstens sajt i mobilens webbläsare.

Ikonen gör det enkelt att hitta tjänsten i mobilens menyer och man slipper bläddra bland alla bokmärken. Det går också fint att baka in all grafik som återanvänds i widgetfilen istället för att det måste laddas över mobilnätet varje gång. Genom att bara skicka den data som är uppdaterad blir en widget lite snabbare än en webbsida och det krävs inte lika mycket dataöverföring.

För att snabbt komma igång med widgets underlättar det att ha lite koll på webbutveckling, men det man behöver känna till är inte så omfattande att det behöver utgöra ett hinder även om man är ny på området. Ett bra första steg är att ladda ned några olika widgets från Nokias utvecklarsajt och titta på hur de är uppbyggda. Det är lätt att "plocka isär" en widget - själva distributionsfilen är egentligen en helt vanlig ZIP-fil, så för att komma åt de olika beståndsdelarna behöver man bara byta ändelsen till .zip och extrahera innehållet.

Modifiera färdig kod

All kod är lagrad i klartext, så man kan snabbt och enkelt modifiera en färdig widget för ett eget användsningsområde, paketera den och ladda upp den till mobilen. Det är så exemplet i den här skolan är tillverkat.

I zip-filen finns en mapp som i sin tur innehåller widgetens alla delar. Den första filen man behöver känna till heter info.plist. Den talar om för mobilen vad widgeten heter och vilken fil som ska öppnas för att starta den. Info.plist-filen kallas också för manifest och är uppbyggd enligt xml-standard. Filen i vår exempelwidget, ett litet program som omvandlar värden mellan två olika temperaturskalor, ser ut så här.

Mellan string-taggarna finns de olika inställningarna som man kan anpassa. Texten "Temperaturomvanling" är den text som syns nedanför ikonen i mobilens menyer. Sedan följer en identifierare som ska vara unik för varje widget, ett versionsnummer och slutligen namnet på den html-fil som widgetens är uppbyggd kring.

I mappen finns också filen icon.png. Ikonen är viktig - det är den symbol som identifierar din Widget i mobilens menyer. Filformatet måste vara PNG och Nokia rekommenderar måtten 88 x 88 pixel. Det finns mängder av ikoner och grafiska element i png-format tillgängliga gratis på internet som passar bra att använda i widgets. En bra och omfattande uppsättning gratisikoner finns på en.wikipedia.org/wiki/Nuvola. När du hittat en ikon som representerar din widget på ett bra sätt - spara den med namnet icon.png i mappen.

Html-filen innehåller layout för widgeten och länkar till stillmallar och javascript-kod. Vår html-fil finns här.

Innanför head-taggarna finns länkarna till stilmallen temp.css och till javascriptfilen temp.js. Sedan följer ett helt vanligt html-formulär som låter användaren mata in ett temperaturvärde som sedan ska omvandlas från Fahrenheit till Celsius. Det finns två stycken p>Javascriptfilen innehåller programkoden som får sakerna att "hända". Koden finns här.

Javascriptfilen anropas när html-filen laddas och det som händer först är att funktionen createMenu, alltså den kod som står mellan måsvingeparenteserna efter function createMenu(), körs. Här används speciella javascriptkommandon, anpassade för mobiler, som talar om hur menyerna ska se ut och vilken typ av navigering som ska användas - till exempel att markörpilen ska vara synlig.

Beräkningen

När det är klart väntar widgeten på att användaren ska trycka på "Beräkna"-knappen. När det sker körs funktionen calculate. Raden tempF = document.getElementById("tempF").value hämtar värdet från html-formuläret. Identifieraren tempF matchar textrutan med samma id i formuläret. Sedan sker själva omräkningen och widgeten tilldelar en liten text och bild beroende på vilket intervall temperaturen ligger inom - till exempel en röd ikon och texten "Varmt" om temperaturen är 20 grader eller högre.

Slutligen körs funktionen showResult. Här byts de tomma p- och img-taggarna i html-filen ut mot resultatet av beräkningen. Widgeten lägger också till ett menyalternativ "Back" för att användaren ska kunna hoppa tillbaka till ursprungsläget.

När du tillverkat en widget och vill testa den i mobilen behöver du bara paketera filerna i en zip-fil. Börja med att lägga alla filer i en mapp med samma namn som html-filen. Skapa sedan zip-filen och lägg i hela mappen. I Windows högerklickar man och väljer "Nytt" och "Komprimerad mapp". Sedan behöver man bara dra mappen till zip-filen. För att mobilen ska hantera zip-filen som en widget byter man ut ändelsen från zip till wgz.

När mobilen tar emot wgz-filen och du godkänt installationen dyker widgeten upp som ett vanligt program i menysystemet.

Ladda ner en zip-fil med samtliga filer som ingår i exemplet.