Widget howto Eine kleine Einführung in die Widget-Erstellung 1. Ein paar grundsätzliche Anmerkungen
1.1 Was sind Widgets?
Im Grunde sind Widgets nur Verzeichnisse mit einigen darin befindlichen Dateien. Zu »Widgets« (oder »Bundles«, wie Apple diese Strukturen auch nennt) werden die Verzeichnisse durch die Dateiendung ».wdgt«. Danach ist der Inhalt nicht mehr per Doppelklick erreichbar sondern nur über »Paketinhalt anzeigen« im Kontextmenü (das funktioniert übrigens auch bei den meisten OSX-Programmen. Allerdings sollte man es tunlichst vermeiden, dort irgend etwas zu verändern, wenn man nicht genau weiß, was man tut).
1.2 Welche Kenntnisse benötige ich?Widgets könnte man als Mini-Webseiten ansehen. Somit genügen bereits Kenntnisse in Html und Javascript. Nicht zwingend notwendig, aber nützlich sind auch Cascading Style Sheets (CSS), da über Letztere das Aussehen der Widgets noch wesentlich freier gestaltet werden kann.
Wer sich damit nicht auskennt, dem sei folgende Internetseite empfohlen, die in aller Ausführlichkeit sowohl Html und Javascript als auch einige andere Internet-Themen behandelt (das Werk gibt es dort auch als Download):
1.3 Welche Programme benötige ich?Theoretisch würde bereits das von OSX mitgelieferte TextEdit genügen, da Html, Javascript und CSS als reine Klartextformate abgespeichert werden. Allerdings ist das Arbeiten mit speziellen Texteditoren um einiges angenehmer. Eine kleine Auswahl wären: SubEthaEdit (shareware) Taco Html Edit (freeware) Nvu (freeware) - Allerdings in der jetzigen Version (1.0) noch nicht wirklich empfehlenswert skEdit (shareware) bbEdit (shareware) Darüber hinaus gibt es auch noch professionelle (und teure!) Webdesign-Programme, z.B. Dreamweaver, GoLive oder WebDesign. Aber die sind nicht direkt zur Widget-Erstellung gedacht, sondern für »richtige« Webseiten und benötigen aufgrund des Funktionsumfangs einige Einarbeitungszeit. Des weiteren wird ein Grafikprogramm benötigt, z.B.: GraphicConverter - shareware; eher unintuitiv zu bedienen Photoshop - professionelle Fotobearbeitung, sehr umfangreich und komplex in der Bedienung Fireworks - Eher auf Webgrafik abgestimmt; nicht ganz so umfangreich wie Photoshop aber (meiner Ansicht nach) auch einfacher in der Bedienung Fireworks scheint mir für den »gemeinen Widget-Programmierer« ;-) gut geeignet. Es bietet mehr als genug Funktionen und ist (wie Photoshop) als zeitlich begrenzte Demoversion verfügbar. Auch gibt es für die beiden genannten Programme einige Schritt-für-Schritt-Anleitungen im Internet. GraphicConverter hat den Vorteil, dass man es praktisch unbegrenzt kostenlos nutzen kann. 2. Das »Hello World«-WidgetIn diesem Tutorial werden wir ein sehr einfaches Widget erstellen, das lediglich den Text »Hello world!« ausgibt (wer sich über diesen Text wundert: Der wird traditionell in nahezu allen Programmier-Einführungen im ersten Programm ausgegeben. Und wer wäre ich, dass ich mich über solche Traditionen hinwegsetzte... :-)
Somit ist der der geneigte Leser jetzt dazu aufgerufen, ein Verzeichnis mit dem Namen »helloWorld« auf dem Schreibtisch zu erstellen (oder wo immer das Widget in der Entwicklungsphase abgelegt werden soll). Jetzt benötigen wir folgende Dateien (die allesamt in unserem »helloWorld«-Verzeichnis abgelegt werden) als absolute Grundvoraussetzung für ein funktionsfähiges Widget:
- Info.plist
- Default.png
- Icon.png
- Eine html-Datei
2.1 Info.plistDer Name »plist« steht für »Property-list«. Die meisten Programme benutzen unter OSX solche Dateien, um Voreinstellungen bzw. bestimmte Standardwerte zu speichern (zu finden beispielsweise unter »/Library/Preferences«; aber auch hier gilt: nur veränden wenn man weiß was man tut...)
Genaugenommen handelt es sich bei einer plist-Datei um eine XML-Datei, näheres zu diesem Format findet sich im oben genannten SelfHTML. Wichtig für uns ist nur, dass eine plist-Datei eine Art Eigenschaftsliste ist. »key« beschreibt dabei den Namen, unter dem Dashboard eine bestimmte Eigenschaft erkennt. Diesen werden dann zum Beispiel per »string«, »boolean« oder »number« bestimmte Werte zugewiesen. Diese etwas abstrakte Beschreibung wird klarer, wenn wir uns unsere konkret verwendete plist-Datei ansehen:
<?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>
<key>CFBundleDisplayName</key>
<string>helloWorld</string>
<key>CFBundleIdentifier</key>
<string>com.IhrName.widget.helloWorld</string>
<key>CFBundleName</key>
<string>helloWorld</string>
<key>CFBundleVersion</key>
<string>0.1</string>
<key>MainHTML</key>
<string>helloWorld.html</string>
</dict>
</plist>
Und hier eine kurze Erläuterung der verwendeten Eigenschaften, die wie bereits erwähnt absolut notwendig sind, damit das Widget überhaupt richtig funktioniert:
- CFBundleDisplayName - Diese Bezeichnung wird unter anderem in der Dashboard-Leiste angezeigt
- CFBundleIdentifier - Eine »umgekehrte« domain-angabe, inklusive Widgetname. Diese Bezeichnung dient zur Identifizierung des Widgets. So könnten theoretisch zwei Widgets gleichen Namens, aber von verschiedenen Autoren unterschieden werden. Deshalb ersetzen wir »IhrName« durch unseren eigenen Namen. Diese Bezeichnung gewinnt auch dann an Bedeutung, wenn der User selbst Voreinstellungen verändern kann. Der diesbezügliche Dateiname ist dann nämlich der CFBundleIdentifier-string.
- CFBundleName - Dieser Name muss lt. Apple mit dem Namen des Widget-Ordners übereinstimmen
- CFBundleVersion - Die Widget-Versionsnummer die keiner besonderen Formatierung bedarf
- MainHTML - Der Name der von uns verwendeten Html-Datei
Soweit, so gut. Wir speichern nun also diese Datei als »Info.plist« in unserem »helloWorld«-Verzeichnis.
Übrigens: Wenn man die Apple-Developertools installiert, bekommt man auch ein Programm namens "Property List Editor". Damit können die plist-Dateien etwas komfortabler editiert werden.
2.2 Default.png
Die Grafik dient als Hintergrund für das Widget und gibt (sofern keine anderen Einstellungen vorhanden sind) die Größe des Widgets vor. Wer möchte, kann selbst eine Grafik erstellen (ein Rechteck, beispielsweise 150 x 50 pixel, reicht völlig) oder aber hier herunterladen.
2.3 Icon.png
Der Name gibt bereits einen Hinweis. Die Grafik wird in der Dashboard-Leiste sowie im Dashboard-Manager angezeigt, ähnlich wie Icons auf dem Desktop. Apple schlägt als Größe 75 x 75 Pixel vor. Und hier gibt es eine solche Grafik als Download.
2.4 Die Html-Datei
Der »Behälter« für die eigentlichen Inhalte des Widgets. In unserem Fall heisst die Datei »helloWorld.html«. Wichtig: Dieser Name muß mit dem »MainHTML«-key in der »Info.plist« übereinstimmen, sonst findet Dashboard sie nicht!
Und so sieht der Inhalt unserer Html-Datei aus:
<!-- Copyright: www.tiger-widgets.de -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body background='Default.png'>
<p>
<center>hello world!
</p>
</body>
</html>
Diese Datei sollte man nun ebenfalls im »helloWorld«-Ordner speichern (Dateiname, wie oben erwähnt »helloWorld.html«).
3. Abschluß
Nachdem nun alle notwendigen Dateien vorhanden sind kann der Ordner von »helloWorld« in »helloWorld.wdgt« umbenannt werden. OSX fragt zur Sicherheit noch einmal nach, da hierdurch die Eigenschaften des Ordners verändert werden. Danach sollte das Verzeichnis das Widget-Standardicon haben. Nach einem Doppelklick darauf und einer weiteren Sicherheitsabfrage sollte das Widget nun in der Dashboard-Leiste bzw. im Widget-Manager verfügbar sein. Außerdem wird das Widget bei der Installation verschoben, normalerweise in den Ordner »Benutzername/Library/Widgets/«. Alle darin befindlichen Widgets können über den Apple-eigenen Widget-Manager ganz einfach gelöscht werden können. Es gibt noch einen zweiten Ordner (»/Libary/Widgets/«), hier liegen die Apple-eigenen Widgets. Diese können nur »manuell« gelöscht werden, es genügt aber theoretisch schon, diese einfach aus den entsprechenden Ordnern irgendwo anders hinzulegen, damit die Widgets spätestens beim nächsten Start nicht mehr unter Dashboard erscheinen.
Hier gibt es das Widget als Download, falls es bei jemandem nicht funktionieren sollte.
Herzlichen Glückwunsch, das erste Widget ist fertig! :-)
[ Zurück ]
® Stephan Huebner für www.Tiger-Widgets.de
Publiziert am: Donnerstag, 26. Mai 2005 (10084 mal gelesen)
Copyright © by Mac-Widgets
|
