Artikel top billede

(Foto: Computerworld)

Widgets og gadgets - helt fra start

Enkel kode og indpakning er alt, hvad man behøver for at lave stærke mikroapplikationer til både Vista og OS X.

Af Redaktionen, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Mac OS X lancerede widgets via Dashboard, der bugner af webkompatible miniapplikationer, som bliver kørt af HTML, XML, JavaScript og CSS. Med Microsoft Vista kom der gadgets, der er nogle helt andre mikroapplikationer, som består af tilsvarende webmateriale.

Det bør derfor ikke overraske nogen, at widgets og gadgets næsten er sammenfaldende begreber. De består af de samme elementer: En html-fil, der indeholder script- og layoutdata, og en XML-fil til konfigurationsindstillinger.

Man kan endda bruge de samme komponenter til at lave begge dele. Lad os se på det, der får widgets og gadgets til at virke. Vi skal lave en simpel plat og krone-applikation, hvorefter vi med de samme data får den til at virke på begge platforme.

En indlejret definition

1) Vi begynder med at lave noget genbrugeligt sideindhold til en mikro-applikation. Vi har brugt Coda på Mac’en – det er en billig editor, der kan fås på www.panic.com/coda – men man kan bruge enhver tekstbehandler eller HTML-editor.

Koden bør tilpasse sig XHTML 1.0-specifikationerne. Begynde derfor med at indlejre den relevante XHTML 1.0-doctypedefinition øverst på siden før den indledende ”<head>”-tag:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

Tilføj HTML-materiale

2) Nu skal vi føje indhold til vores widget. Det kan være hvad som helst, der kan lægges på en webside. I dette eksempel tilføjer vi et simpelt link og styler vores widget med noget CSS:

<head>
<title>Coin Toss</title>
<style>Body{margin: 0; width:200px; height: 200px;}</style>
</head>
<body>
<a href=”tails.html”><img src=”heads.png”></a>
</body>
</html>

Gem filen som ”heads.html” og opret så et nyt dokument ved navn ”tails.html”. Det bør være det samme som før, bortset fra at hyperlinket peger på heads.html:

<a href=”heads.html”><img src=”tails.png”></a>

Du kan hente billederne ”heads.png” og ”tails.png online på www.mrtwain.com/pcp/widgetexample.zip.

Lav en OS X-widget

3) Nu skal vi bruge dette materiale til at lave en simpel widget til OS X. Hvis du ikke har adgang til en Mac– og hvis du ikke har lyst til at omkonfigurere din pc til en Hackintosh – skal du gå videre til trin syv.

Vores første opgave består i at lave en ”Info.plist”-fil. Det er nemmest at bruge den Property List Editor, der er installeret sammen med OS X’ udviklingsværktøjer. Du burde kunne finde den under ”Developer | Applications | Utilities”.

Hvis du skriver kode manuelt, skal filen begynde med en XML-deklaration, der specificerer, at filen er en property list for vores widget. Filen begynder så med en ”<dict>”-tag:

<?xml version=”1.0” encoding=”UTF-8”?>
<!DOCTYPE plist PUBLIC “-//Apple
Computer//DTD PLIST 1.0//EN” “http://www.apple.com/DTDs/PropertyList-1.0.dtd”>
<plist version=”1.0”>
<dict>

Vælg indstillinger

4 Nu er tiden kommet til noget grundlæggende XML-kode. Man specificerer et property-navn med tag’en ”<key>”. På den næste linje følger der en streng eller et heltal, der definerer denne property. I vores enkle widget bruger vi kun de properties, der er absolut nødvendige:

<key>CFBundleDisplayName
</key>
<string>Coin Toss</string>
<key>CFBundleIdentifier</key>
<string>com.apple.widget.cointoss</string>
<key>CFBundleName</key>
<string>Coin Toss</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
Udpeg en HTML-fil

5) De første nøgler i det foregående trin definerede et unik datanavn for vores widget, navnet på widget-bundlen og det navn, der bliver vist, når den bliver startet. Koden nedenfor definerer versionsnummeret for vores widget og fortæller bundlen, hvilken HTML-fil, der skal startes. Gem filen som ”Infor.plist” i din Widget-mappe, når det er gjort:

<key>CFBundleVersion</key>
<string>1.0</string>
<key>CloseBoxInsetX</key>
<integer>14</integer>
<key>CloseBoxInsetY</key>
<integer>16</integer>
<key>MainHTML</key>
<string>heads.html</string>
</dict>
</plist>

Vores widget skal pakkes ind

6) Opret en ny mappe og kald den ”cointoss.wdgt”. [Ctrl]+klik på det nye ikon og vælg ”Show Package Content” Der bliver nu åbnet et vindue som en normal mappe.

Vælg alle filerne i din Widget-mappe og træk og slip dem til mappen ”cointoss.wdgt”, mens du holder Alt nede. Nu bliver de kopieret til den nye widget.

Der er også et billede ved navn ”default.png” i vores eksempel-bundle, og det skal også med. Det bliver indlæst, mens vores widget starter.

Afprøv den nylavede widget ved at dobbeltklikke på dens ikon, så den bliver installeret på dit Dashboard. Nu starter Dashboard, og du bør kunne finde din widget et sted i midten. Du kan flytte den rundt og klikke på den og dermed skifte mellem de to sider, den rummer.

Søger du en nemmere måde at lave widgets på? Så hent de seneste Xcode-udviklingsværktøjer fra Apple. Her finder du Dashcode, der er et gratis WYSIWIG-miljø.

Lav en Vista-gadget

7) At lave gadgets til Windows Vista ligner uhyggeligt meget den måde, hvorpå man laver Mac-widgets. Du skal bruge to komponenter, en manifestfil i XML-format (ved navn ”gadget.xml”) og en HTML-fil. Den førstnævnte indeholder indstillingerne for vores gadget, mens den sidstnævnte er layoutet til vores gadget.

De færdige filer bliver lagt i en mappe med efternavnet ”.gadget” og derefter føjet til dit sidepanel. Nu kan vi tage HTML-koden fra trin et og to – i filerne heads.html og tails.html – som vi brugte til vores widget, og genbruge den til vores gadget. Du skal også lægge billedfilerne der.

Lav manifestfilen

8 Windows Vistas manifestfil er kun en smule anderledes end Macs ”plist”. Her er et minimalt manifest til den HTML, vi har lavet:

<?xml version=”1.0” encoding=”utf-8” ?>
<gadget>
<name>Coin Toss</name>
<namespace>PC Plus</namespace>
<version>1.0.0.0</version>
<author name=”redaktionen”>
<info url=”www.altomdata.dk” />
</author>
<copyright>© 2009</copyright>
<description>Coin Toss</
description>
<hosts>
<host name=”Sidebar”>
<base type=”HTML” apiVersion=”1.0.0” src=”heads.html”/>
<platform minPlatformVersion=”1.0” />
<permissions>Full</permissions>
</host>
</hosts>
</gadget>

Installer din gadget

9) Når du skal føje den nye gadget til dit sidepanel, skal du gå til startmenuen og skrive ”Kør” for at fremkalde Windows’ kommandolinjeboks. Skriv: ‘%userprofile%%AppDataLocalMicrosoftWindows Sidebargadgets”. Dermed åbnes den lokale Gadget-mappe i Windows Stifinder.

Højreklik i Stifinder for at oprette en ny mappe og kald den ”cointoss.gadget”. Træk filerne gadget.xml, heads.html, tails.html, heads.png og tails.png til denne mappe. Sørg for, at alle vinduer er lukket, og gå så til Vistas sidepanel. Højreklik på det og vælg ”Tilføj gadgets”. Nu skulle vores gadget ligge blandt de andre.

Ressourcer

Apples Dashboard-dokumentation er ret omfattende. Den omfatter en komplet programmerings- og referenceguide til fremstilling af widgets, der interagerer med OS X. Find den på www.tinyurl.com/b9ujzy. Mac OS X’ Dashboard har også et blomstrende fanmiljø. Få gode råd om fremstilling af Dashboard-widgets og find en række gratis widgets, der kan downloades på www.dashboard.com.

Vordende Vista-gadgetmagere kan få flere oplysninger på www.tinyurl.com/b4xf9h.

Importer gadgets

Amnesty Generator omdanner eksisterende Google- og OS x-widgets til Windows Vista-gadgets til sidepanelet. Man kan sågar lave gadgets ud fra YouTube-videoer og indlejret Flash-materiale. Man skal ikke kode noget, og værktøjet er gratis på www.amnestywidgets.com/GeneratorWin.

Sådan skal du gøre...

Afprøv løbende dine widgets

Man kan afprøve OS X-widgets, mens man udvikler dem, ved hjælp af Safari. Men så mister man den funktionalitet, som Dashboards sandkasse giver. Man kan imidlertid lave ændringer i færdig-bundlede widgets, der kører.

Når man vil se ændringerne, genstarter man simpelthen sin widget. Find pakkefilen i ”Library | Widgets” og højreklik på den widget, du vil redigere.

Vælg ”Show Package Contents” og åbn så den fil, du vil redigere. Når du er færdig, gemmer du filen og trykker [Command]+[R] for at genindlæse den valgte widget.

[themepacific_accordion]
[themepacific_accordion_section title="Fakta"]

Det skal du bruge...

[/themepacific_accordion_section]
[/themepacific_accordion]