Gadgets selbstgemacht: Eigene Minianwendungen für den Windows-Desktop erstellen (Workshop)

WindowsWenn man die Minianwendungen (Gadgets) auf dem Desktop von Vista oder Windows 7 betrachtet, könnte man meinen, dass sich dahinter eine recht komplexe Technologie verbirgt. Tatsächlich aber ist es gar nicht so schwer, eigene Gadgets zu erstellen. Dieser Workshop vermittelt die erforderlich Vorgehensweise.



Im Grunde genommen handelt es sich bei Windows-Minianwendungen um kleine Webseiten mit dynamischen Elementen. Wenn Sie solche Seiten gestalten können, können Sie auch eigene Gadgets erstellen. Dazu benötigen Sie zwei Dateien: eine als Manifest bezeichnete XML-Datei, und eine HTML-Datei für den eigentlichen Inhalt. Auch wenn einige Grundkenntnisse im Aufbau von HTML-Seiten sicher hilfreich sind, muss man gar nicht unbedingt selbst programmieren. Im folgenden einfachen Beispiel „entführen“ wir die Suchfunktion einer Verlags-Website in ein kleines Gadget für den Seitenbereich.

Die XML-Manifest-Datei

Für jedes Gadget benötigen Sie eine XML-Datei als allgemeine Beschreibung. Daraus erfährt die Seitenleiste bei der Installation des Gadgets, wie dieses heißt, was es tut, woher es kommt usw. Zum Erstellen eines solchen Manifests müssen Sie nicht viel von XML verstehen. Sie können einfach eine Vorlage verwenden und mit den für Ihr Gadget zutreffenden Daten ausfüllen. So in etwa sollte die XML-Datei aussehen:

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Gadget-Name</name>
<namespace>Urheber</namespace>
<version>1.0.0.0</version>
<author name=“Urhebername“>
<info url=“http://ihre-website.de“ text=“Besuchen Sie uns“ /><logo src=“logo.png“ />
</author>
<copyright>&#0169; 2008</copyright>
<description>Kurze Gadget-Beschreibung</description>
<icons>
<icon width=“64″ height=“64″ src=“icon.png“ />
</icons>
<hosts>
<host name=“sidebar“>
<base type=“HTML“ apiVersion=“1.0.0″ src=“datei.html“ />
<permissions>full</permissions>
<platform minPlatformVersion=“0.3″ />
</host>
</hosts>
</gadget>

Dieser Code führt einfach eine Reihe von Eigenschaften auf, die das Gadget hat. Die folgende Tabelle erklärt die wichtigsten Eigenschaften. Das entscheidende Element ist allerdings die src-Angabe, welche die HTML-Datei mit dem Inhalt des Gadgets bezeichnet. Alles andere macht es professionell und schöner, ist aber für das Funktionieren des Gadgets nicht unbedingt erforderlich.

Code-Element Bedeutung
name Bezeichnung des Gadgets, frei wählbar
version Versionsnummer des Gadgets, ebenfalls frei wählbar
author Name des Entwickler bzw. des Unternehmens.
info url Webadresse von Entwickler/Unternehmen
info text Beliebiger Text für den Verweis auf die Website (s. o.)
logo src Verweis auf ein Logobilddatei des Unternehmens, falls vorhanden, sonst weglassen
copyright Urheberrechtshinweis nach Bedarf
description Kurze Beschreibung des Gadgets
icon src Verweis auf eine Bilddatei mit einem Symbol des Gadgets, soweit vorhanden, sonst weglassen
base src Verweis auf die HTML-Datei mit dem Inhalt des Gadgets

Wie in der Tabelle beschrieben, sind nicht alle Elemente unbedingt erforderlich. Wenn z. B. keine Bilder für Logos oder Symbole vorliegen, lassen Sie diese Passagen einfach weg. Die Seitenleiste verzichtet dann auf Logos bzw. verwendet Standardsymbole.

intloesch03„Gekonnt nach Aufgaben und Anwenderwünschen strukturiert, führt sie das Buch schnell zum Ziel und erspart umständliches Suchen im umfangreichen Inhaltsverzeichnis und Index. […]beim Anwender dürften kaum Fragen und Wünsche offen bleiben. […]Insgesamt ein gelungenes Buch – und eine Reminiszenz an vergangene Zeiten, als eine Dokumentation dieses Umfangs und dieser Qualität noch zum Lieferumfang eines Betriebssystems gehörte.“
c‘t 14/2010, S. 192

Die Gadget-Datei

Die eigentliche Gadget-Datei ist im einfachsten Fall eine HTML-Datei mit dem Inhalt des Gadgets, also dem, was das Gadget in der Seitenleiste anzeigen soll. Dieser Inhalt wird in der Seitenleiste in einem kleinen, aber vollwertigen  Browserfenster dargestellt. Sie können also beliebige Elemente verwenden, mit denen sich auch regulären Webseiten gestalten lassen, einschließlich JavaScript, Stylesheets und sonstigen dynamischen Komponenten. Prinzipiell muss die Gadget-Datei auch keine HTML-Datei sein, sondern es kann sich dabei z. B. auch um eine dynamische JavaScript-Datei handeln. Der Phantasie sind da keine Grenzen gesetzt.

Gadgets selbstgemacht 1/6Für unser Beispiel basteln wir ein kleines Suchgadget, das uns eine Online-Suche direkt auf den Bildschirm holt. Da es schon genug fertige Gadgets für Google, Yahoo, Wikipedia und Co. gibt, machen wir mal etwas Exotischeres. Dazu rufen wir einfach eine Webseite auf, deren Suchfunktion wir als Gadget haben möchten, und kopieren uns den HTML-Code für das Suchformular dort heraus. Das geht ganz einfach, indem wir uns im Internet Explorer mit Ansicht/Quelle den HTML-Code der Seite anzeigen lassen und dort das Suchformular lokalisieren. Den Code speichern wir in einer eigenen HTML-Datei mit einem beliebigen Namen. Wichtig ist nur, dass genau dieser Name in der Manifestdatei bei src angegeben ist.

Hinweis: Webcode kopieren

Ganz so einfach ist es mit dem Kopieren von HTML-Code aus dem Web nicht immer. Im Allgemeinen muss man diesen ein wenig anpassen, damit er reibungslos funktioniert. So sollten Sie zumindest die Webadressen in den angegebenen Links kontrollieren und ggf. vervollständigen, da hier meist nicht die komplette Adresse angegeben ist. Eventuell verwendet der Code auch eine Style-Definition, die weiter oben in der Datei festgelegt wurde. Testen Sie die erstellte HTML-Datei einfach lokal im Webbrowser. Wenn sie dort korrekt angezeigt wird, sollte sie auch als Gadget auf dem Desktop funktionieren. Davon abgesehen ist das hier beschriebene Kopieren für eigene, private Zwecke akzeptabel. Wollen Sie Gadgets an andere weitergeben oder gar veröffentlichen, sollten diese selbstverständlich aus der eigenen Feder stammen.

Das Gadget zusammenstellen

Haben Sie Manifest und Gadget-Datei sowie ggf. weitere Symbole und Bilder erstellt, können Sie das Gadget zusammenbasteln:

  1. Gadgets selbstgemacht 2/6Kopieren Sie alle zum Gadget gehörenden Dateien in einen beliebigen Ordner. Hierin sollten sich zumindest zwei Dateien befinden: eine XML- und eine HTML-Datei. Die Bezeichnungen der Dateien sind dabei belanglos.
  2. Markieren Sie alle Dateien und klicken Sie dann mit der rechten Maustaste auf die Auswahl.
  3. Wählen Sie im Kontextmenü den Befehl Senden An/ZIP-komprimierten Ordner.
  4. Gadgets selbstgemacht 3/6Windows komprimiert die Dateien dann in eine ZIP-Datei und schlägt Ihnen einen Namen dafür vor. Übernehmen Sie diesen nicht, sondern verwenden Sie stattdessen einen Namen Ihrer Wahl mit der Erweiterung .gadget.
  5. Gadgets selbstgemacht 4/6Bestätigen Sie den Hinweis, dass die Datei durch die andere Erweiterung möglicherweise unbrauchbar wird, mit Ja. Selbstverständlich wird die Datei nicht unbrauchbar, sondern es wird eine Datei vom Typ Windows-Minianwendung.

Installierte Gadgets aktivieren

Haben Sie Ihr Gadget wie vorangehend beschrieben zu einer Windows-Minianwendung zusammengepackt, können Sie es auf jedem Vista- oder Windows 7-PC installieren und nutzen.

  1. Gadgets selbstgemacht 5/6Doppelklicken Sie auf das zusammengestellte Gadget-Paket, also den ZIP-Ordner mit der Endung .gadget.
  2. Gadgets selbstgemacht 6/6Windows bietet Ihnen dann an, die darin enthaltene Minianwendung zu installieren. Klicken Sie dazu auf die Installieren-Schaltfläche. Der Hinweis auf Risiken durch unbekannte Herausgeber ist prinzipiell berechtigt. Aber wenn das Gadget selbst gemacht ist, sollte das in diesem Fall kein Problem sein.
  3. Windows installiert dann das Gadget. Wenn Sie anschließend in der Seitenleiste Minianwendungen hinzufügen wählen, finden Sie Ihr eigenes Gadget in der Auswahl wieder. Klicken Sie unten links auf Details einblenden klicken, dann sehen Sie auch, wo die anderen Angaben aus der Manifestdatei gelandet sind.
  4. Um Ihr Gadget in den Seitenbereich oder aber frei auf dem Bildschirm zu platzieren, gehen Sie wie gewohnt vor. Ziehen Sie das Symbol also einfach in die Seitenleiste oder klicken Sie mit der rechten Maustaste darauf und wählen Sie im Kontextmenü Hinzufügen.

Installierte Gadgets bearbeiten

Gadgets selbstgemacht 7/6Selbstverständlich können Sie installierte Gadgets nachträglich noch bearbeiten und verändern, falls sie nach dem Installieren doch nicht so aussehen oder funktionieren wie geplant. Auch dieses Beispiel-Gadget versprüht ja doch eher einen etwas spröden Charme und könnte sicherlich noch deutlich aufgehübscht werden. Windows speichert installierte Gadgets unter C:\Users\<Benutzername>\AppData\Local\Microsoft\Windows Sidebar\Gadgets. Hier finden Sie nach der Installation auch die Dateien Ihres Gadgets wieder. Im Prinzip können Sie sie dort sogar manuell hinkopieren und sich so das Installieren ersparen. Auf alle Fälle können Sie die Dateien dort beliebig bearbeiten. Die Änderungen wirken sich sofort aus, so dass Sie auf erneutes Installieren verzichten können. Allerdings müssen Sie Ihr Gadget ggf. aus der Seitenleiste entfernen und wieder neu hinzufügen, damit die Veränderungen auch sichtbar werden.


Alle aktuellen [W-inside]-Workshops:


36 Antworten zu “Gadgets selbstgemacht: Eigene Minianwendungen für den Windows-Desktop erstellen (Workshop)”

  1. 123 sagt:

    Wie geht das auf Windows 8.1 ??

  2. Falco4756 sagt:

    Ähh,klitzekleine Frage:Ich habe es zwar geschafft,die Anwendung zu installieren,jedoch ist sie suuuuuuuperwinzig und ich verwendete Google.Woran liegt das?!?

  3. BigM sagt:

    Nicht den Ordner zippen, nur die Dateien, dann funktioniert es.

    \muster\inhalt => Falsch

    \inhalt => Richtig

    Gruß Marco

  4. P4tR sagt:

    Für alle die immernoch das Problem mit den Gadgets haben, die sich nicht installieren (nicht anzeigen) lassen: Einfach den Ordner „EureApp.gadget“ in das Verzeichnis „%userprofile%\appdata\local\microsoft\windows sidebar\gadgets“ kopieren, einen Moment warten, und schon wirds unter den Minianwendungen angezeigt.. War auch schon kurz vorm verzweifeln, aber so hats bei mir funktioniert!

    Hoffe ich konnte helfen..

  5. Kris sagt:

    Hallöchen,

    ich habe mir ein kleines Gadget geschrieben, welches eine Webseite ausgibt. Gibt es eine Möglichkeit, dass sich das Gadget automatisch aktualisiert? ICh habe es bisher so versucht, dass sich die Webseiten (die lokale html wie auch die externe, die per iframe eingebunden ist) per meta tag aktualisieren, aber das hat auch nicht funktioniert :(

  6. JF sagt:

    guckt euch mal auf der Seite : http://robofan.de/SidebarGadget.html das Tutorial an dort ist es super erklärt und ein Beispiel zum download gibt es auch.

  7. Tim sagt:

    bei mir kam auch die Fehlermeldung das es keine gültiges Gadget ist, dass lag daran das ich die XML-Datei zuerst in ANSI gespeichert hatte. Dadurch wurden einige Anführungszeichen in ? Fragezeichen umgewandelt und die Anführungszeichen die noch da waren mussten neu gesetzt werden, sonst funktionierte es nicht.

  8. Kevin sagt:

    Bei mir trat lange Zeit das gleiche Problem auf, wie bei sehr vielen von euch: Ich erstellte eine Minianwendung genau, wie es in der Anleitung beschrieben ist, erstellte daraus eine Zip-Datei, änderte die Dateiendung usw. Doch nach der Installation (Bestätigung der Meldung, ob dem Herausgeber vertraut werden soll) passierte einfach gar nichts, die Minianwendung war nicht installiert worden.

    Nachdem ich dann schon fast aufgegeben habe, kam ich auf die Idee, die ZIP-Datei nicht mit dem Windows-Explorere, sondern mit einem anderen ZIP-Programm (hier WinRar) zu erstellen. Dann hat alles ohne Probleme geklappt und ich konnte die Minianwendung einwandfrei installieren und verwenden.

    Vielleicht hilft das ja auch dem Einen oder Anderen weiter.

    Viele Grüße und viel Spaß beim Erstellen eurer Minianwendungen
    Kevin

  9. Tomas sagt:

    nochmal kontrolliert – UTF8 ist es zwar nicht gewesen (ANSI), Problem bleibt aber das Gleiche

  10. Pepsifan sagt:

    Was man unbedingt beachten muss (wie hier schon einmal erwähnt):
    Die .xml Datei MUSS im Editor (welcher auch immer) UTF-8 codiert abgespeichert werden!

    Das hat bei mir das „Es wurde eine ungültige Minianwendung gefunden“ Problem gelöst…

  11. Tomas sagt:

    Bei mir die gleichen Probleme wie bei Allen anderen – selbst die simpelsten funktionieren nicht – (nach install nichts da).
    Beispielgadgets zeigten gleiches Verhalten. Das Einzige was ich bis jetzt herausfand ist das die Reine Funktion vom UAC abhängt – trifft nur leider nicht für dieses Problem zu, wenn andere Gadgets gehen;-(

  12. Wolfram Gieseke sagt:

    @Stevmo:
    Danke für die Hinweise.

  13. Stevmo sagt:

    hm wird auch kursiv dargestellt also ohne beispiel wechselt die kursiv dargestelten Anführungszeichen in normale dann funktioniert es

  14. Stevmo sagt:

    hm also wer die xml Datei von hier 1 zu 1 kopiert und dan eine meldung bekommt dass sei eine ungültige xml Datei fehler in Zeile x usw
    Bitte alle Anführungszeichen ändern. Beiu mir wurde ” kopiert ist aber falsch das bemängekt Windows richtig ist „

  15. Werner sagt:

    Ich gehe genauso vor wie oben beschrieben.
    MAche aus dem Ordner eine Zip Datei und benenne diese in MyApp.gadget um. Bei einem Doppelklick erscheint zwar eine Meldung „mit Herausgeben unbekannt aber danach passiert nichts.
    Das Gadget wird nicht im User Profil installiert
    Hat jemand einen Rat?
    Versucht unter Win 7 deu 32bit unf Win7 64bit US

  16. Rainer sagt:

    Edit: Ich bin nun – wie, weiß ich nicht genau – soweit gekommen, dass das Gadget nach der Installation auf dem Windows-Desktop erscheint.

    Ich habe es allerdings nicht sofort gesehen, da es verschwindend klein war (ca 5 x 10 Pixel). Folgende Definition der Größe des html-bodys über CSS löste für mich dieses Problem:

    body
    {
    margin: 0;
    width: 130px;
    height: 130px;
    background-color: #000000;
    }

    Das nächste Problem ist, dass unter Windows 7 (64 Bit) scheinbar der Internet Explorer das HTML des Gadgets interpretiert und standardmäßig kein Flash Player Plugin *für 64 Bit* installiert ist. Könnte Ihre nachvollziehen, wenn Ihr Eure HTML-Datei in die 64-Bit-Version des ie zieht.

    Das wiederum löst man, indem man sich das Plugin aus dem „Labs“- Bereich von Adobe besorgt:
    http://labs.adobe.com/downloads/flashplayer10_square.html

    Dann läuft immerhin das Plugin im Gadget.

    Dieses – und das ist das nächste Problem – vermeldet allerdings nach Rechtsklick ins Gadget nur „Film nicht geladen…“.

    Hat jemand eine Lösung?

  17. Rainer sagt:

    Christophers Hinweis hat mir weitergeholfen, da nun zumindest von Windows bei der Installation Fehler in der Manifest-Datei angemahnt wurden, die ich damit Schritt für Schritt korrigieren konnte (hatte die Datei im ANSI-Format abgespeichert, muss aber wohl UTF-8 sein).

    Dennoch scheitert es bei mir an dem Punkt „Wenn Sie anschließend in der Seitenleiste Minianwendungen hinzufügen wählen, finden Sie Ihr eigenes Gadget in der Auswahl wieder.“ Hat jemanf eine Idee?

  18. Chris sagt:

    Habe nach den Anweisungen gearbeitet. Prompt kommt die Fehlermeldung das keine gültige Minianwendung gefunden wurde. Oder so ähnlich. Keine Ahnung wieso.

  19. Nico sagt:

    Für die Größe des Gadgets einfach in der HTML-Datei im Head ein Style-Tag einbauen (oder eine CSS-Datei angeben je nach dem) und folgende werte für das body tag eingeben:

    width:282px;
    height:250px;

    Damit sollte das ganze dann eine ordentliche Größe haben. Einfach bischen damit rumexperimentieren.

  20. Nico sagt:

    ganz wichtig. die datei muss „gadget.xml“ heißen, nicht „manifest.xml“

  21. Wolfram Gieseke sagt:

    @Er:
    -Windows Explorer
    -“Extras/Ordneroptionen“
    -“Ansicht“
    -In der Liste unten „Erweiterung bei bekannten Dateitypen ausblenden“ AUSSCHALTEN
    -“OK“

    Fertig.

  22. Er sagt:

    Wie ändert man das um?

  23. Wolfram Gieseke sagt:

    @Leser:
    Wenn Windows so eingestellt ist, dass es bekannte Namensendungen ausblendet (Standard), dann wird bei dieser Vorgehensweise „irgendwas.gadget.zip“ daraus, also auch wieder eine ZIP-Datei.

  24. Leser sagt:

    Wenn ich auf Senden an / Zip k. Ordner gehe und dann *.gadget eingebe bleibt es eine ZIP Datei

  25. Mitleser sagt:

    mit das wars meine ich, es passiert nicht mehr als dass ich auf installieren klicke, es öffnet sich nichts

  26. Christopher sagt:

    Wichtig! Die Datei muss gadget.xml heißen, sonst geht es nicht.
    Bei mir funktioniert es auch nur, wenn ich im genannten Gadget-Ordner einen Unterordner anlege, der ebenfalls auf .gdaget endet und dort die beiden Dateien hineinkopiere.

  27. Robert sagt:

    bei mir funzt alles –> AUSSER:

    ich hab mit der Grösse des Gadgets ein Problem –> das ist viel zu klein, habe schon
    img src=“icon.gif“ width=“200″ height=“200″
    angegeben, aber es kommt nur ein Minibild ;-(

    weiss wer wo man die Parameter für die Grösse des Gadgets angeben kann ??

    thx Robert

  28. Mitleser sagt:

    mein html code ist exakt der, den wolfram gieseke benutzt hat. meine xml datei ist auch so wie im beispiel. ich klicke auf installieren und das war’s

  29. Wolfram Gieseke sagt:

    Ich habe es gerade nochmal unter Windows 7 mit exakt dem im Artikel verwendeten Beispielcode ausprobiert.
    Das Gadget wird nach Rückfrage installiert und sofort aktiviert. Und es taucht auch in der Liste der Minianwendungen auf.
    Als HTML-Datei habe ich eine ganz simple Datei verwendet. Leider kann man hier in den Kommentaren keine Tags benutzen, da die interpretiert werden.
    Deshalb ausnahmsweise mal mit eckigen Klammern (die müssten natürlich durch spitze ersetzt werden).

    [html]
    [head]
    [title]Test[/title]
    [/head]
    [body]
    Dies ist ein Test.
    [/body]
    [/html]

  30. Johannes sagt:

    Bei mir lässt sich auch nichts installieren, wäre wirklich mal an einer Antwort interressiert. Aber was möglich ist: Ladet euch ein Gadget runter und ändert es anschließend nach euren Vorstellung

  31. Lonestar sagt:

    Ich bekomme bei der Installation zwar die Sicherheitswarnung, dann wird aber nichts installiert.

  32. Jonas sagt:

    Hoppla, das Formular hat wohl gerade meinen xml- und html-Code mitübersetzt…

  33. Jonas sagt:

    Hmm, ich habe schon ein paar Varianten probiert, aber es will sich bei mir trotzdem nicht installieren lassen.
    Hier mal die Variante, die ich z. Z. versuche():

    datei.html:
    hallo

    gadget.xml:

    DemoGadget
    DemoGadget
    1.0.0

    kleiner Test

    full

  34. Wolfram Gieseke sagt:

    @Jonas:
    Nicht verwendete Tags komplett aus der XML-Datei entfernen.

  35. Jonas sagt:

    Irgendetwas muss ich falsch gemacht haben – es wird kein Gadget installiert. Vielleicht könnte man die Beschreibung der xml-Datei konkretisieren. Und was bedeutet „weglassen“? Soll der ganze Tag weggelassen werden oder nur dessen Inhalt?

Hinterlasse eine Antwort