__           __           __                     
  .-----.--.--.----.|  |.--.--.--|  |.-----.--|  |  .-----.----.-----.
  |  -__|_   _|  __||  ||  |  |  _  ||  -__|  _  |__|  _  |   _|  _  |
  |_____|__.__|____||__||_____|_____||_____|_____|__|_____|__| |___  |
   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-