programmieren:ms

Inhaltsverzeichnis

Microsoft Gadgets
Beispiel

Microsoft Gadgets

Microsoft Gadgets selbst programmieren

Wenn man die Minianwendungen (Gadgets) auf dem Desktop 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.

Für Windows 10 Benutzer: Windows10 bietet standard mäßig leider keine Gadgets mehr an. Man kann diese aber wieder aktivieren indem man sich das kostenlose Tool 8GadGetPack installiert: https://8gadgetpack.net/

Um Gadgets erstellen zu können braucht man nur etwas HTML, CSS, JS Kenntnisse. Man erstellt minimal zwei Dateien. Eine als Manifest bezeichnete XML Datei und eine HTML Datei für das was angezeigt werden soll. Evlt. noch eine für die Einstellungen (wird aber am Anfang nicht benötigt)

Die XML-Manifest-Datei

Beispiel: gadget.xml

gadget.xml

<?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; 2020</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=“index.html“ />
<permissions>full</permissions>
<platform minPlatformVersion=“0.3″ />
</host>
</hosts>
</gadget>

Das entscheidende Element ist die src-Angabe <base type=“HTML“ apiVersion=“1.0.0″ src=“index.html“ />, welche die HTML-Datei des Gadgets bezeichnet. Alles andere ist aber für das Funktionieren des Gadgets nicht unbedingt erforderlich.

Eigenschaften für die

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

Original Beschreibung von Microsoft:
https://docs.microsoft.com/en-us/previous-versions/windows/desktop/sidebar/-sidebar-entry

Die Gadget-Datei

Die Gadget-Datei ist im einfachsten Fall eine HTML-Datei mit dem Inhalt was angezeigt werden soll. Sie können 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.

index.html

<html> 
  <head> 
    <title>Mein GadGet</title>
 
    <script>
       // Größe des Fensters    
       window.onload = function()
       {
         document.body.style.height = '117px';
         document.body.style.width = '146px';
         document.body.style.margin = '0px';
         System.Gadget.settingsUI = "Settings.htm";
       }
    </script>
 
    <script>
    // aktualisiert die HTML Seite nach x Sekunden
       setTimeout(function() { document.location.reload(); } , 360000);
    </script>
 
</head> 
 
<body>
<!-- alles ab hier wird auch angezeigt -->
<div>Das ist mein Text</div>
</body> 
 
</html>

Was wir hier noch mit angegeben haben ist die Datei für die Einstellungen <System.Gadget.settingsUI = „Settings.htm“;>
Die Settings Datei kann auch einfach nur einen Infotext haben.

Settings.htm

<html>
 
<head>
<title>Settings</title>
<script>
window.onload = function()
{
     document.body.style.height = '120px';
     document.body.style.width = '220px';
}
</script>
</head>
 
<body>
Das ist mein erstes GadGet
</body>
 
</html>

Gadget erstellen

Haben Sie alle Dateien erstellt können Sie das Gadget erstellen:

Kopieren 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. Markieren Sie alle Dateien und klicken Sie dann mit der rechten Maustaste auf die Auswahl. Wählen Sie im Kontextmenü den Befehl Senden An/ZIP-komprimierten Ordner.

Windows 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.

Bestä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 bearbeiten

Gadgets können nach dem Installieren noch bearbeitet und verändert werden. Windows speichert installierte Gadgets unter C:\Users\<Benutzername>\AppData\Local\Microsoft\Windows Sidebar\Gadgets. Sie können die Dateien dort beliebig bearbeiten. Die Änderungen wirken sich sofort aus, so dass Sie auf erneutes Installieren verzichten können. Allerdings müss das Gadget ggf. aus der Seitenleiste entfernen und wieder neu hinzufügen, damit die Veränderungen auch sichtbar werden oder sie intergrieren folgendes JS zum Aktualiseren der Seite.

 <script>
    // aktualisiert die HTML Seite nach x Sekunden
       setTimeout(function() { document.location.reload(); } , 360000);
    </script>

Beispiel

gadget.xml

<?xml version="1.0" encoding="utf-8" ?>
    <gadget>
    <name>Link-Anzeige</name>
    <namespace>windowspage.windows</namespace>
    <version>1.0.0.0</version>
    <author name="Windowspage">
        <info url="www.windowspage.de" />
    </author>
    <copyright>&#169; 2007</copyright>
    <description>Zeigt einen Link in der Windows-Sidebar an.</description>
    <hosts>
        <host name="sidebar">
           <base type="HTML" apiVersion="1.0.0" src="LinkLabel.html" />
           <permissions>Full</permissions>       
           <platform minPlatformVersion="1.0" />
        </host>
    </hosts>
</gadget>

Linklabel.html

<html>
  <head>
    <title>Link-Anzeige</title>
    <style>
        body { margin: 0; width: 130px; height: 65px; position: absolute; }
        #gadgetLink { width: 130px; top: 24px; text-align: center; font-family: Tahoma; font-size: 10pt; position: absolute; }
        #background { width: 130px; height: 65px; position: absolute; z-index: -1; background-repeat: no-repeat; }
    </style>
    <script>
        var defaultLink = "www.windowspage.de";
        var variableLink = "www.windowspage.de";
        <!-- Show settings check mark-->
        System.Gadget.settingsUI = "settings.html";
        System.Gadget.onSettingsClosed = settingsClosed;
        function setContentText()
        {
            if (!variableLink)
            {
                variableLink = defaultLink;
            }
            var envLink = "<a href=http://\""+variableLink+"\" target=\"_blank\">"+variableLink+"</a>";
            gadgetLink.innerHTML = envLink;
        }
        function settingsClosed(event)
        {
            if (event.closeAction == event.Action.commit)
                {
                    variableLink = System.Gadget.Settings.read("variableLink");
                    setContentText();
                }
        }
    </script>
  </head>
  <body onload="setContentText();">
    <div id="gadgetLink"></div>
    <g:background/>
  </body>
</html>

settings.html

<html>
    <head>
    <style>
        body { width: 500px; height: 75px; }
    </style>
    <script>
        System.Gadget.onSettingsClosing = settingsClosing;
        function loadSettings()
        {
            var currentSetting = System.Gadget.Settings.read("variableLink");
            if (currentSetting != "")
            {
                envVarLink.innerText = currentSetting;
            }
        }
        function settingsClosing(event)
        {
            if (event.closeAction == event.Action.commit)
            {
                variableLink = envVarLink.value;
                System.Gadget.Settings.write("variableLink", variableLink);
            }
        }
    </script>
    </head>
    <body onload="loadSettings()">
    <label for="envVar">URL (ohne http://):</label><br />
    <input type="text" name="envVarLink" id="envVarLink" size="40" />
    </body>
</html>