[ad_1]
Dies ist mein erster Ausflug in die Welt der Widgets. Ich bin eher ein traditioneller Programmierer und ich benutze Javascript unter extremer Zwang. Deshalb war ich nie auf das Feld der Widgets oder Gadgets für diese Angelegenheit angezogen.
Umzug auf die Anforderungen für diese Art von Entwicklung
Widget-Engine, Yahoo nennt es Konfabulator. (Frag mich nicht warum ich keine Ahnung habe). Yahoo SDK herunterladen SDK herunterladen.
Die sekundäre Anforderung ist ein guter Texteditor, Yahoo verwendet XML und Javascript, um Widgets zu entwerfen, also würde ich vorschlagen, einen guten XML- und Javascript-Editor zu finden. Wenn Sie verwirrt sind, laden Sie bitte die visuelle Studio kostenlose Ausgabe, ich denke, es wird für Ihre Anforderungen ausreichend sein. In diesem Punkt bin ich offen für Vorschläge.
Laden Sie das Referenzhandbuch von der Yahoo-Website herunter. Klicken Sie hier, um einen Zip herunterzuladen, der das Handbuch im pdf-Format hat.
Bild-Editor, benötigen Sie einen guten Bild-Editor, um Ihre Widget-Hintergründe und die Benutzeroberfläche im Allgemeinen so bitte kaufen oder erhalten Sie einen Bild-Editor, die so gut wie Gimp oder Photoshop ist. Die folgende Liste wurde von meinen Lesern zur Verfügung gestellt, also habe ich keine Ahnung, wie gut diese Software ist, aber ich weiß, dass diese frei sind.
Photoscape Download
Gimp für Fenster Download
Serif PhotoPlus Download
Neben diesen Software musst du grundlegendes Verständnis von XML und Javascript haben. Diese Tutorials werden nicht versuchen, euch eines dieser beiden Fächer zu unterrichten.
Die Hauptdatei, die ausgeführt wird, hat eine Erweiterung von kon. Das sagst du wie die exe-Datei unter der Windows-Umgebung. Die kon-Datei ist kein eigenständiges Exe, sondern eine Datei, die vom Konfublator verwendet wird. Sobald die Konfabulator-Engine auf Ihrem System installiert ist, sobald Sie auf eine kon-Datei doppelklicken, startet die Engine und die Datei wird ausgeführt. Alle diese Schritte werden in meinem Video morgen auf dem Du Tube umreißt. Wenn Sie irgendwelche Fragen haben, fühlen Sie sich frei, mir eine Zeile zu fallen
Erstellen des Hintergrunds
Für dein Widget kannst du eine kleine Hintergrundgrafik-Datei erstellen. Ich versuche nicht, etwas kompliziertes zu schaffen, damit die Hintergrunddatei ein Bild von 200 * 200 Pixeln sein wird. Die Grundfarbe ist transparent, also wird es nichts behindern und es gibt drei-vier Formen. Der Name der Datei ist back1.png
Widget Hintergrund
Erstellen des Programms
Lässt uns unseren Lieblings-Texteditor feuern und eine Datei namens helloworld.kon erstellen. Die Grundsyntax ist wie eine XML-Datei. Daher muss es mit der folgenden Zeile wie eine XML-Datei beginnen
Die erste Zeile einer XMl-Datei
Diese Dateien haben das Grundelement, also lasst uns das Grundskelett der Datei erstellen
Basic Widget Skeleton
Jedes Widget-Element muss ein Fenster-Element in ihm haben, deshalb müssen wir ein Fenster definieren, das der sichtbare Teil deines Widgets sein würde. Wie wir alle wissen, muss jedes Fenster einen Namen, einen Titel, eine Höhe und eine Breite haben, auf die gleiche Weise müssen wir diese Attribute definieren. Wieder ist es bis zu Ihnen, wenn Sie diese als Attribute des Fensterelements oder Kindes des Fensterelements wünschen. Persönlich bevorzuge ich das letztere.
Für den Hintergrund Bild erstellen Sie alle Grafiken und speichern Sie es im png Format
Wie Sie sehen können, haben wir alle Eigenschaften definiert, die die letzte Eigenschaft, die wir hinzufügen müssen, ist die Bild-Eigenschaft, die den Hintergrund des Fensters zeigt. Lass das Bildelement einfügen.
RSS1My First Widget400300true
Ein wichtiger Punkt ist, dass die Dateien auf dem gleichen Weg sein sollten, weil wir uns nicht sicher sein können, wie das Dateisystem des Benutzers so ist, wenn du dein Widget in einem Ordner namens mywidgets dann speicherst Speichern Sie das Bild entweder dort oder machen Sie ein Unterverzeichnis wie Bilder oder Ressourcen, um die Bilddateien zu speichern.
Wie es üblich ist, muss es eine Hallo Weltbotschaft irgendwo geben, also lasst uns den Text in das Yahoo-Widget einfügen Dies ist auch ein Element namens Text und Attribute wie Daten, Farbe, Schriftart etc.
Textelement eingefügt
Standardmäßig wird der Text auf der äußersten linken Seite gedruckt. Wenn wir den Text verschieben wollen, müssen wir die voffset- und hoffset-Werte geben. Grundsätzlich werden diese Werte den Text vertikal und horizontal von der 0,0 Position um die Anzahl der von Ihnen angegebenen Pixel verschieben. Ich habe den Text 100 Pixel nach unten und 50 Pixel nach rechts gelegt.
RSS1My First Widget400300trueResources / widget.pngNDTV Top News5010016 # ff4499
Lässt dies speichern und versuchen, es auszuführen. Wenn alles ordnungsgemäß installiert wurde und die Datei richtig geschrieben wurde, sollte dein Desktop eine Sicherheitsmeldung anzeigen, einfach nur auf das Widget klicken.
Dort hast du es, dein erstes Widget, wenn du es gerade noch schließen möchtest Klicken Sie darauf und wählen Sie das enge Widget.
Morgen werde ich dir zeigen, wie man in dieses Widget etwas Funktionalität bringt, hoffentlich werde ich auch ein Video fertig machen.
[ad_2]
Source by Sudeep Mukherjee