HennWeb

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
===== Microsoft Gadgets =====
==== Microsoft Gadgets selbst programmieren ====
<WRAP center round tip 60%>
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. 
</WRAP>

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\\
<code java 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>
</code>

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|

<WRAP center round info 99%>
Original Beschreibung von Microsoft:\\
https://docs.microsoft.com/en-us/previous-versions/windows/desktop/sidebar/-sidebar-entry
</WRAP>

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

<code html 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> 
</code>

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.

<code html 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>
</code>


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

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



===== Beispiel =====

<code xml 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>
</code>

<code html 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>

</code>

<code 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>
</code>