Vista Gadgets personalisieren

von S. Müller | Veröffentlicht am 25.10.2007 | Letzte Änderung am 17.09.2008. Rubriken: Gadgets, Software, Vista, Widgets, Windows | Es gibt keine Kommentare

Im zweiten Teil über Vista Gadgets erläutern wir, wie sich die winzigen Windows Anwendungen durch den Nutzer personalisieren lassen. Diese Möglichkeit verleiht den Gadgets uneingeschränkte Flexibilität und Dynamik.

Versteckte Optionen
Auf Wunsch des Entwicklers ist Windows Sidebar in der Lage für eigenentwickelte Gadgets eine Einstellungsseite einzublenden. Diese Seite ist nur dann sinnvoll und notwenig, wenn das Gadget auf eine Eingabe durch den Anwender angewiesen ist und erst dann mit der Ausführung der eigentlichen Arbeit beginnen kann. Exemplarisch kann es eine Abfrage der Zugangsdaten für ein Hintergrund-Login oder Eingabe bzw. Auswahl bestimmter Kriterien sein.

Doch wie kommt der Benutzer an diese Einstellungen heran? Verfügt ein Gadget über frei wählbare Optionen, wird bei Mausbewegungen im Bereich der Applikation ein Icon in Form eines Schraubenschlüssels sichtbar. Fester Klick darauf öffnet die eigentliche Einstellungsseite mit einprogrammierten Auswahlmöglichkeiten.

Screenshot

Gadget erweitern
Als erstes gilt, dem Gadget mitzuteilen, dass Einstellungen an der Oberfläche der Anwendung durch den Nutzer vorgenommen werden können. Dafür wird die Gadget-Datei (in unserem Fall ist es index.html) um zwei Zeilen im JavaScript-Bereich erweitert, wobei die erste obligatorisch ist. So sieht nun die modifizierte Startseite aus:

 <html>
  <head>
    <style type="text/css">
      body, .front {
        width: 125px;
        height: 150px;
        padding: 0;
        margin: 0;
        border: 0;
      }
      .panel {
        top: 10px;
        left: 10px;
        width: 105px;
        height: 100px;
        position: absolute;
      }
    </style>

      <script type="text/javascript">
      System.Gadget.settingsUI = 'settings.html';
      System.Gadget.onSettingsClosed = update;

            function update() {
        var body = document.getElementsByTagName('div')[0];
        var text = document.createTextNode('Aktualisiert');

              body.appendChild(text);
      }
    </script>
  </head>

      <body>
    <g:background src="default.png" class="front" />

      <div class="panel">
      Beispieltext
    </div>
  </body>
</html>

System.Gadget.settingsUI
Die erste Zeile JavaScript verrät den Ort der Einstellungsseite – so wird auch gleichzeitig signalisiert, dass Einstellungen durch den Nutzer erwünscht sind (dort befinden sich alle Input- und Select-Felder für gewünschte Optionen). Wir nennen die Datei settings.html, erzeugen diese zunächst als leeres HTML-Dokument und legen diese im gleichen Verzeichnis wie auch index.html ab.

Screenshot

System.Gadget.onSettingsClosed
Der zweite optionale Befehl onSettingsClosed legt eine JavaScript-Funktion fest, die nach dem Schließen der Einstellungen aufgerufen werden soll. Diese kann zum Beispiel das Neuladen des Inhalts oder einfaches „OK“ als positives Feedback des Speicherprozesses beinhalten.

Zur Präsentation des Effektes wurde im obigen Code eine JavaScript-Funktion namens update erzeugt, die nach dem Ausmachen des Fensters einen String mit dem Inhalt Aktualisiert ins Gadget schreibt. Selbstverständlich kann die Rückmeldung auch anders aussehen oder absolut abweichend realisiert sein.

Testen der Erweiterung
Nach dem Speichern der Änderungen am Gadget starten wir dieses in der Sidebar. Nun hat der Nutzer die Möglichkeit, den Dialog mit Optionen zu öffnen. In unserem Testfall gibt es nicht viele Optionen zum Verstellen, dafür aber vom System generierte Buttons zum Schließen der Einstellungsseite. Im Abschluss erscheint der in JavaScript eingebundene Hinweis als Bestätigung der Aktion.

Einstellungen als Benutzerdialog
Die Oberfläche rückt nach hinten, das Popup mit Optionen übernimmt die Hauptrolle. (tm)

Screenshot
Feedback der Aktion im Gadget. Einstellungen übernommen, Bestätigung ausgegeben