__ __ __
.-----.--.--.----.| |.--.--.--| |.-----.--| | .-----.----.-----.
| -__|_ _| __|| || | | _ || -__| _ |__| _ | _| _ |
|_____|__.__|____||__||_____|_____||_____|_____|__|_____|__| |___ |
by daemonx - member of excluded-team |_____|
19th september 2006 - 1.0
Vorraussetzung: HTML, JavaScript und CSS
[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.
[0x02]
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
Welcome to our World !!!
daemonx - excluded.org
-EOF-