Windows Sidebar Gadget: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
Zeile 32: Zeile 32:
 
  HalloWelt.gadget
 
  HalloWelt.gadget
  
 +
=== Manifest Datei ===
 
In diesen Ordner kommen zunächst zwei simple Textdateien:
 
In diesen Ordner kommen zunächst zwei simple Textdateien:
  
Zeile 47: Zeile 48:
 
     <copyright>2006</copyright>
 
     <copyright>2006</copyright>
 
     <description>My first gadget</description>
 
     <description>My first gadget</description>
 +
    <icons>
 +
  <icon src="preview.gif" />
 +
  </icons>
 
     <hosts>
 
     <hosts>
 
         <host name="sidebar">
 
         <host name="sidebar">
Zeile 58: Zeile 62:
  
  
 +
=== HTML-Datei für das Grundgerüst ===
 
Eine '''HTML-Datei''' (z. B. '''HalloWelt.html'''). Obwohl sie vielleicht nicht so aussehen, aber Gadgets sind nichts anderes als HTML-Dateien: Sie erstellen einfach eine HTML-Datei, fügen die entsprechenden Tags und den Skriptcode ein und haben ein eigenes Gadget.
 
Eine '''HTML-Datei''' (z. B. '''HalloWelt.html'''). Obwohl sie vielleicht nicht so aussehen, aber Gadgets sind nichts anderes als HTML-Dateien: Sie erstellen einfach eine HTML-Datei, fügen die entsprechenden Tags und den Skriptcode ein und haben ein eigenes Gadget.
  
Zeile 77: Zeile 82:
 
</html>
 
</html>
  
 +
</pre>
 +
 +
=== Weitere Dateien ===
 +
Optional können wir ein Bild für die Icon Ansicht einbinden (siehe XML-Datei)
 +
 +
=== Gadget einbinden ===
 +
Das Gadget kann nun in der Sidebar ausgewählt werden. Wenn kein Icon angegeben wurde, nimmt Windows ein Standard Icon.
 +
 +
=== Hintergrund des Gadgets ===
 +
Bis jetzt sieht das Gadget noch nicht besonders schön aus. Mit Hilfe von CSS gibt man dem body Tag einen Hintergrund.
 +
<pre>
 +
 +
                        background: url('Hintergrund.jpg');
 +
                        padding-top: 5px;
 +
 +
</pre>
 +
 +
Mit Hilfe von png Dateien kann man auch Transparenz nutzen. Es ist nicht möglich, eine transparente Region mitten in einem Gadget zu setzen. Es ist auch nicht möglich, teilweise transparente Regionen, wie ein Schatten, auf dem Rand oder mitten in einem Gadget zu haben. Dies führt in vielen Fällen zu einem schlechten Ergebnis.
 +
 +
===Gadget-System APIs===
 +
Die Gadgetplattform liefert ein reiches Objektmodell, das Gadgets mit Windows kommunizieren lässt. Gadgets können Aufgaben wie das Lesen von Dateien und Ordner durchführen, Informationen über Hardware erhalten, und Informationen über Netzwerkanschluss und Windows anzeigen. Im folgenden Beispiel fügen wir eine Zeile dem Code hinzu, der eine Umgebungsvariable anstatt des "Hallo Welt" Text anzeigt. Ich habe die Änderungen unten, zwischen den Kommentaren, hinzugefügt:
 +
 +
'''Änderungen für HalloWelt.html'''
 +
<preY
 +
<html>
 +
<head>
 +
        <title>Hallo Welt!</title>
 +
        <style>
 +
                body {
 +
                        width:130;
 +
                        height:50;
 +
                        background: url('Hintergrund.jpg');
 +
                        padding-top: 5px;
 +
                }
 +
        </style>
 +
 +
<!-- Änderungen am Gadget-Code beginnen hier -->
 +
        <script>
 +
                var variableName = "ProgramFiles";
 +
                function setContentText() {
 +
                        gadgetContent.innerText = System.Environment.getEnvironmentVariable(variableName);
 +
                        }
 +
        </script>
 +
<!-- Änderungen am Gadget-Code beginnen hier -->
 +
</head>
 +
<!-- Changes to <body> tag begin here -->
 +
<body onload="setContentText()">
 +
<!-- Changes to <body> tag end here -->
 +
        <span id="gadgetContent" style="font-family: Tahoma; font-size: 10pt">Hallo Welt</span>
 +
        </body>
 +
        </html>
 +
<!-- End of new lines -->
 
</pre>
 
</pre>

Version vom 23. Oktober 2007, 13:31 Uhr

Links:

http://www.ben-newman.de/gadget/

http://www.microsoft.com/germany/technet/scriptcenter/topics/vista/gadgets-pt1.mspx

Gadgets gibt es für verschiedene Betriebssysteme. Es handelt sich im Prinzip um HTML-Code der mit Skripten angereichert ist, und der sich als kleine Minianwendung auf dem Desktop platzieren läßt.

So funktionieren Gadgets

Jedes Gadget besteht aus HTML-Code und Skriptsprachen. Gadgets haben auch Zugang zu Extrainformationen über sich und Windows, wenn das HTML als Gadget läuft. Dieses erlaubt einem Gadget den Zugriff auf Windows Dateien und Ordner, wie z.B. auf Benutzerbilder oder aber auf Systeminformationen wie z.B. den Status der drahtlosen Verbindung. Das Anzeigen und das Speichern der Gadget-Einstellungen wird ebenfalls erst durch den Einsatz von Skriptsprachen möglich.


So geht es

Im Folgenden basteln wir ein kleines Gadget für die Windows Vista Sidebar.

Unser Gadget soll später im Gadget Ordner unseres Benutzerprofils landen. Den Öffnen wir in der Eingabeaufforderung: 

%userprofile%\appdata\local\microsoft\windows sidebar\gadgets

Wir landen in einem Verzeichnis in der Art: 

C:\Benutzer\DeinBenutzername\AppData\Local\Microsoft\Windows Sidebar\Gadgets

MERKE: Einige Gadgets befinden sich im Programme-Ordner, aber Gadgets fÜr einen spezifischen Benutzer sind in einem versteckten Ordner.

Hinweis: Wenn das Feld Run (Ausführen) nicht da ist kann es in den Eigenschaften der Sidebar (Rechte Maustaste > Eigenschaften) aktiviert werden.

Gadget Ordner erstellen

Gadgets müssen Ordner sein deren Namensenden .gadget ist, damit die Sidebar das Gadget als solches erkennt. Wir erstellen also z.B. einen Ordner mit dem Namen 

HalloWelt.gadget

Manifest Datei

In diesen Ordner kommen zunächst zwei simple Textdateien:

Eine Manifestdatei mit der Bezeichnung gadget.xml. Dieses Manifest enthält alle Einstellungen für das Gadget, einschließlich des Gadgetnamens, des Autors und der Urheberrechtsinformationen sowie Information über die HTML-Seite, aus der das eigentliche Gadget besteht. 

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
    <name>Hallo Welt!</name>
    <namespace>Example.You</namespace>
    <version>1.0</version>
    <author name="Your Name">
        <info url="www.example.com" />
    </author>
    <copyright>2006</copyright>
    <description>My first gadget</description>
    <icons>
		   <icon src="preview.gif" />
	  </icons>
    <hosts>
        <host name="sidebar">
            <base type="HTML" apiVersion="1.0.0" src="HalloWelt.html" />
            <permissions>full</permissions>
            <platform minPlatformVersion="0.3" />
        </host>
    </hosts>
</gadget>


HTML-Datei für das Grundgerüst

Eine HTML-Datei (z. B. HalloWelt.html). Obwohl sie vielleicht nicht so aussehen, aber Gadgets sind nichts anderes als HTML-Dateien: Sie erstellen einfach eine HTML-Datei, fügen die entsprechenden Tags und den Skriptcode ein und haben ein eigenes Gadget. 


<html>
<head>
   <title>Hallo Welt!</title>
   <style>
      body {
         width:130;
         height:50;
      }
   </style>
</head>
<body>
   <span id="gadgetContent" style="font-family: Tahoma; font-size: 10pt;">Hallo Welt!</span>
</body>
</html>

Weitere Dateien

Optional können wir ein Bild für die Icon Ansicht einbinden (siehe XML-Datei)

Gadget einbinden

Das Gadget kann nun in der Sidebar ausgewählt werden. Wenn kein Icon angegeben wurde, nimmt Windows ein Standard Icon.

Hintergrund des Gadgets

Bis jetzt sieht das Gadget noch nicht besonders schön aus. Mit Hilfe von CSS gibt man dem body Tag einen Hintergrund. 


                         background: url('Hintergrund.jpg');
                         padding-top: 5px;

Mit Hilfe von png Dateien kann man auch Transparenz nutzen. Es ist nicht möglich, eine transparente Region mitten in einem Gadget zu setzen. Es ist auch nicht möglich, teilweise transparente Regionen, wie ein Schatten, auf dem Rand oder mitten in einem Gadget zu haben. Dies führt in vielen Fällen zu einem schlechten Ergebnis.

Gadget-System APIs

Die Gadgetplattform liefert ein reiches Objektmodell, das Gadgets mit Windows kommunizieren lässt. Gadgets können Aufgaben wie das Lesen von Dateien und Ordner durchführen, Informationen über Hardware erhalten, und Informationen über Netzwerkanschluss und Windows anzeigen. Im folgenden Beispiel fügen wir eine Zeile dem Code hinzu, der eine Umgebungsvariable anstatt des "Hallo Welt" Text anzeigt. Ich habe die Änderungen unten, zwischen den Kommentaren, hinzugefügt:

Änderungen für HalloWelt.html <preY <html> <head> 

        <title>Hallo Welt!</title>
        <style>
                body {
                        width:130;
                        height:50;
                        background: url('Hintergrund.jpg');
                        padding-top: 5px;
                }
        </style>

        <script>
                var variableName = "ProgramFiles";
                function setContentText() {
                        gadgetContent.innerText = System.Environment.getEnvironmentVariable(variableName);
                        }
        </script>

</head> <body onload="setContentText()"> 

        Hallo Welt
        </body>
        </html>
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=Windows_Sidebar_Gadget&oldid=1188“