[0xff] – Einleitung.
[0x00] – Widgets verstehen.
[0x01] – Woraus besteht ein Widget?
[0x02] – Programmierung eines Widget.
[0x03] – Das Widget erstellen.
[0x04] – Weitere Informationen.
[0xff]
Seit Apples Mac OS X Tiger wurden die Dashboard- Widgets fester Bestandteil des Tiger Desktop’s. Jedoch kaum jemand weiss wie diese Widgets funktionieren und nur die allerwenigsten wie man sich Widgets selber schreiben kann.
Einige Programm Ideen waeren zb.:
+ Stundenplan
+ Terminal
+ netstat
+ fink-list commander
Das sind jetzt natuerlich nur Ideen, denn ich hoffe das durch dieses bisher erste deutschsprachige Tutorial die Widget- Entwicklung schneller voran kommt.
[0x00]
Widgets sind sofort benutzbar sobald das Mac OS X Dashboard aktiv ist und verschwinden wieder sobald das Dashboard inaktiv ist.
Man kann im groben die Widgets in drei Kategorien einordnen:
[a] Accessory Widgets
Sind eigenstaendige Anwendungen die in keiner Abhaengikeit mit dem Internet oder anderen Anwedungen stehen. (Uhren, Planer, Taschenrechner, Notizblaetter)
[b] Application Widgets
Sind Widgets die mit einem anderen Programm gekoppelt sind. Diese Widgets erfuellen meist eine Teilfunktion einer richtigen Anwendung oder dienen der Bedienung einer Anwendung ueber das Dashboard. (iTunes Controller, Address Book Widgets, Mail Widgets)
[c] Information Widgets
Sind Widgets die fuer den Datenaustausch mit dem Internet programmiert sind. Mit ihnen kann man Daten von jedem beliebigen Server abrufen und grafisch verarbeiten. (Weather Info, Flight Status, Stock Prices, Wikipedia)
[0x01]
Um es ganz einfach zu sagen ist ein Widget nichts anderes als eine Website welche nicht im Browser sondern auf dem Dashboard dargestellt wird. Alle Dateien die zu einem Widget gehoeren werden in einem Ordner gesammelt und spaeter dann als Widget fertig “gepresst”. In einem normalen Widget sind meist diese Dateien enthalten:
[a] Main HTML File
Sozusagen die index.html im Widget. In ihr wird das Aussehen des Widgets gespeichert.
[b] Background Image
Das Hintergrundbild des Widgets im PNG Format.
[c] Icon Image
Eine weitere Bild Datei (auch im PNG Format) welches das Widget in der Widgetbar repraesentiert.
[d] Property List File
Die Datei die alle Eigenschaften des gesamten Widgets enthaelt: “Info.plist” Sie identifiziert das ein Widget: Name, Version, Information, Groesse und die optionale Informationen sowie die Main HTML Information sind enthalten.
Der erste Schritt den wir fuer unser Widget machen ist die Main HTML zu schreiben:
<!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">
<head>
<style>
body {
margin: 0;
}
.helloText {
font: 24px "Lucida Grande";
font-weight: bold;
color: white;
position: absolute;
top: 24px;
left: 30px;
}
</style>
</head>
<body background="xcludedlogo.png">
<h1 class="Text">excluded.org!</h1>
</body>
</html>
Es ist natuerlich auch kein Problem die CSS als eigenstaendige Datei importiert. (@import “style.css”wink Weiter gehts mit der Info.plist. Die Bilder koennt ihr euch ja selber erstellen oder wie in diesem Beispiel das Excluded Logo von Homepage benutzen. Die einfachste Moeglichkeit die Info.plist zu erstellen ist wenn ihr den Property List Editor aus /Developer/Applications/Utilities benutzt. Hier eine Uebersicht welche Keys in der Info.plist erscheinen koennen bzw. muessen:
Key – Name – Beschreibung – Notwendig?
——————————————
CFBundleName – Name des Bundles. - JA
CFBundleDisplayName – Alias des Bundles. – JA
CFBundleIdentifier – Internet Domain Style – JA Identifikation.
CFBundleVersion – Version des Widgets. – JA
MainHTML – Name der Main HTML. – JA
Width Pixel – Laenge des Widgets. - NEIN
Height Pixel – Hoehe des Widgets. – NEIN
CloseBoxInsetX – Horizontales Inset der - NEIN
Close Box.
CloseBoxInsetY – Vertikales Inset der Close Box. – NEIN
Plugin Name – des Widget plug-in’s. – NEIN
[0x03]
Ein neues Widget zu erstellen ist extrem einfach und wenig Zeitaufwendig.
1. Neues Verzeichnis erstellen, um alle Dateien zu sammeln. (Wenn alles fertig: FOLDER.wdgt)
2. Definieren der Info.plist
3. Mit dem Lieblings Texteditor die Main HTML erstellen.
4. Die Main HTML in Safari oeffnen und schauen ob alles funktioniert.
Falls ihr gar keine Ideen habt findet ihr unter /Developer/Examples/Dashboard oder im Internet auf http://developer.apple.com/samplecode/A … -date.html Programm Beispiele.
Und nun noch als letztes muss das Widget in die Haende der anderen User und damit das Dashboard das Widget auch findet muss es in den folgenden Verzeichnis lokalisiert werden:
+ /Library/Widgets
+ ~/Library/Widgets
Um richtig in die Widget Programmierung einzusteigen waere es zu empfehlen sich die Xcode 2.2 developer tools zu Installieren. (Findet man auf der Tiger Installations DVD).
[0x04]
Fuer weitere Informationen:
+ http://developer.apple.com/documentatio … index.html
+ http://developer.apple.com/documentatio … index.html
+ http://developer.apple.com/samplecode/A … -date.html
+ http://www.oreilly.com/catalog/jscript4/index.html
+ http://www.oreilly.com/catalog/css2/index.html
+ http://www.oreilly.com/catalog/dhtmlref/index.html
+ http://developer.apple.com/internet/safari/faq.html
Letzte Kommentare