Windows Sidebar Gadget: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
 
(2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
== Recourcen ==
 
Links:
 
Links:
  
−
http://www.ben-newman.de/gadget/
+
http://www.ben-newman.de/gadget/ - Im Prinzip das was hier erklärt wird.
  
 
http://www.microsoft.com/germany/technet/scriptcenter/topics/vista/gadgets-pt1.mspx
 
http://www.microsoft.com/germany/technet/scriptcenter/topics/vista/gadgets-pt1.mspx
 +
 +
Guter Einstieg wenn mehr programmiert wird
  
 
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.
 
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.
Zeile 18: Zeile 21:
  
 
  %userprofile%\appdata\local\microsoft\windows sidebar\gadgets
 
  %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.
 
'''Hinweis:''' Wenn das Feld Run (Ausführen) nicht da ist kann es in den Eigenschaften der Sidebar (Rechte Maustaste > Eigenschaften) aktiviert werden.
  
−
Zunächst brauchen wir zwei simple Textdateien:
+
=== Gadget Ordner erstellen ===
−
* 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.
+
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.
 +
 
 +
<pre>
 +
<?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>
 +
</pre>
 +
 
 +
 
 +
=== 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.
 +
 
 +
<pre>
 +
 
 +
<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>
 +
 
 +
</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:
  
−
Eine '''HTML-Datei''' (z. B. '''Test.htm'''). 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.
+
'''Ä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>
  
−
Diese Dateien kommen in einen Gadget Ordner
+
<!-- Ä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>

Aktuelle Version vom 23. Oktober 2007, 13:33 Uhr

Recourcen[Bearbeiten]

Links:

http://www.ben-newman.de/gadget/ - Im Prinzip das was hier erklärt wird.

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

Guter Einstieg wenn mehr programmiert wird

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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

Gadget einbinden[Bearbeiten]

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

Hintergrund des Gadgets[Bearbeiten]

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[Bearbeiten]

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=18587“