Erstellen Sie Ihr eigenes Widget – wikiHow

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:22

Dieses Instructable wird Ihnen beibringen, wie Sie ein grundlegendes Yahoo erstellen! Widget. Am Ende dieses Tutorials haben Sie etwas JavaScript und XML gelernt.

Schritt 1: Erste Schritte

Einige Werkzeuge, die Sie benötigen, um ein Widget zu erstellen, sind: - Ein Computer mit Mac OS X oder Windows XP/Vista - Ein Textbearbeitungsprogramm. (Notepad ist perfekt.) - Ein Bildbearbeitungsprogramm. (Microsoft Paint ist in Ordnung.) - Geduld und Zeit. - Yahoo Widgets - Widget Converter Widget Sobald Sie diese Programme und Widgets haben, können Sie mit Schritt zwei fortfahren.

Schritt 2: Ordnerstruktur erstellen

Jetzt müssen Sie die Ordnerstruktur erstellen, um alle Dateien zu beherbergen, aus denen ein Widget besteht. Die Struktur sieht wie folgt aus: -Widget-Name | Inhalt | Widget.kon Main.js-Ressourcen | Alle Bilder, die das Widget verwendetSie können dieses Widget herunterladen, um automatisch die Ordnerstruktur zu erstellenStruktur - Reinier KaperSetzen Sie die Einstellungen eines Widgets, indem Sie mit der rechten Maustaste auf einen beliebigen Teil davon klicken und dann auf Einstellungen klicken. Ändern Sie die Einstellungen von Structure wie folgt: root: Navigieren Sie zu Ihrem Widget-Ordner. (Befindet sich in 'My Documents' unter Windows) Jetzt können Sie auf das Widget klicken und ein Dialogfeld wird angezeigt, in dem Sie nach dem Namen des Widgets gefragt werden.

Schritt 3: Erstellen aller erforderlichen Dateien

Wir beginnen mit der Erstellung der Datei widget.xml, die der Widget-Engine Informationen über Ihr Widget mitteilt. Laden Sie eine Vorlage herunter, die Sie für Sie erstellt haben. Download-Link unten. Legen Sie die Datei im Ordner "Inhalt" ab, der sich in dem Ordner befindet, der den Namen trägt, den Sie zuvor gewählt haben. Öffnen Sie die Datei mit einem Texteditor Ihrer Wahl und ersetzen Sie YourNameHere durch Ihren Namen. Speichern und schließen. Als nächstes erstellen wir die.kon-Datei, die die Hauptdatei ist, die dem Widget sagt, was zu tun ist. Die.kon-Datei ist nur eine XML-Datei mit einer umbenannten Erweiterung. Laden Sie diese grundlegende Datei widget.kon herunter und legen Sie sie auch in den Ordner "Inhalt". Öffnen Sie die Datei erneut mit einem Texteditor. Die erste Zeile bedeutet, dass die Datei eine XML-Datei ist, die mit der UTF-8-Codierung erstellt wurde. Das nächste hinzuzufügende Tag ist das Widget-Tag; Dann deklarieren Sie Ihre Einstellungen, wie Debug;. Jetzt können Sie Ihre Fensterelemente hinzufügen.. Widgets haben mehrere Objekte, die bestimmte Dinge tun und bestimmte Eigenschaften haben. Beispielsweise erstellt das Textobjekt, Text. Hier sind einige der Eigenschaften des Textobjekts: -name (selbsterklärend) -window (veraltet) -data (anzuzeigender Text) -color (selbsterklärend) -size -font -hOffset (auch bekannt als x) -vOffset (auch bekannt als y) -width -height Nachdem das gesagt ist, beginnen wir mit der Codierung. Fügen Sie der kon-Datei den folgenden Code in den Tags hinzu:myTextHello World!blueArial18left252Auf Englisch richtet dies ein Textobjekt namens myText ein, das "Hello World!" in Schriftart Arial, Farbe Blau und Größe 12. Speichern Sie Ihre kon-Datei und fahren Sie mit Schritt 4 fort.

Schritt 4: Freuen Sie sich

Doppelklicken Sie auf die kon-Datei und Ihr Widget wird geladen. Herzliche Glückwünsche! Sie haben Ihr erstes Widget erstellt. Aber wir sind noch nicht mit dem Codieren fertig. Du denkst wahrscheinlich "Das ist alles?", oder? Fahren Sie mit Schritt 5 fort, um Ihrem Widget einige Funktionen hinzuzufügen.

Schritt 5: Funktion hinzufügen

Jetzt werden wir dafür sorgen, dass das Widget die aktuelle Uhrzeit anzeigt. Dies erfordert einen Timer, der jede Minute aktualisiert wird, und eine weitere Datei. Die nächste Datei ist eine JavaScript-Datei, die in den Ordner 'Inhalt' verschoben wird. Öffnen Sie Ihren Texteditor und erstellen Sie eine Datei namens main.js. Um die Uhrzeit hinzuzufügen, verwenden wir "das Date-Objekt". Um das Datumsobjekt einzurichten, erstellen Sie eine Funktion. Fügen Sie diese Funktion der js-Datei hinzu:function updateText()'{ theTime = new Date(); theHour = String(theTime.getHours()); theMinutes = String(theTime.getMinutes()); myText.data = "Die Zeit ist: "+ theHour+":"+theMinutes; print('update');}Ihr Widget zeigt die Uhrzeit noch nicht an, da es nicht weiß, was es mit der js-Datei anfangen soll. Um dies zu gewährleisten, fügen wir der Kon-Datei diesen Event-Handler hinzu, in den Tags, aber nicht in den Tags: include('main.js');Um die Zeitaktualisierung durchzuführen, müssen wir einen Timer erstellen, der in die Kon-Datei, in den Tags, aber nicht in den Tags: Speichern Sie die Dateien und laden Sie das Widget. Es sollte die Uhrzeit anzeigen. Wenn es nicht funktioniert, laden Sie sowohl kon als auch js von unten herunter und ersetzen Sie sie durch die alten.

Schritt 6: Alles zusammenfassen

Verwenden Sie das Widget-Konverter-Widget, um das Widget in eine.widget-Datei zu konvertieren. HINWEIS: Ziehen Sie den Ordner mit dem Namen Ihres Widgets auf den Konverter, nicht die kon-Datei. Wenn Sie mit Ihrem Widget noch weiter gehen möchten, finden Sie hier einige Ressourcen. Hier ist eine Liste von Dingen, die Sie mit Ihrem Widget versuchen können: Fügen Sie einige Ereignishandler wie onClick mit den oder -Tags hinzu. - Zeigen Sie ein Bild aus einer lokalen Datei mit dem Bildobjekt an