Crea il tuo widget personale: 6 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:05

Questo Instructable ti insegnerà come creare un Yahoo! di base! Aggeggio. Alla fine di questo tutorial, avrai imparato un po' di JavaScript e XML.

Passaggio 1: iniziare

Alcuni strumenti necessari per creare un widget sono:- Un computer con Mac OS X o Windows Xp/Vista- Un programma di modifica del testo. (Il blocco note è perfetto.)- Un programma di modifica delle immagini. (Microsoft Paint va bene.)- Pazienza e tempo.- Yahoo Widgets- Widget Converter WidgetUna volta che hai questi programmi e widget, sei pronto per passare al passaggio due.

Passaggio 2: creazione della struttura delle cartelle

Ora dovrai creare la struttura delle cartelle per ospitare tutti i file che compongono un widget. La struttura si presenta così: -Nome widget | Contenuti | Widget.kon Main.js Risorse | Tutte le immagini che verranno utilizzate dal widget Puoi scaricare questo widget per creare automaticamente la struttura delle cartelle Struttura - Reinier Kaper Imposta le preferenze di un widget facendo clic con il pulsante destro del mouse su qualsiasi parte di esso e fai clic su Preferenze. Modifica le preferenze di Struttura come segue: root: vai alla cartella del widget. (Situato in "Documenti" su Windows) Ora puoi fare clic sul widget e verrà visualizzata una finestra di dialogo che ti chiederà il nome del widget.

Passaggio 3: creazione di tutti i file necessari

Inizieremo con la creazione del file widget.xml, che comunica al motore del widget le informazioni sul tuo widget. Scarica un modello che hai creato per te da utilizzare. Scarica il link qui sotto. Posiziona il file nella cartella "Contenuto" situata nella cartella intitolata con il nome che hai scelto in precedenza. Apri il file con l'editor di testo che preferisci e sostituisci YourNameHere con il tuo nome. Salva e chiudi. Successivamente creeremo il file.kon che è il file principale che dice al widget cosa fare. Il file.kon è solo un file XML con un'estensione rinominata. Scarica questo file widget.kon di base e mettilo anche nella cartella "Contenuti". Di nuovo, apri il file con un editor di testo. La prima riga indica che il file è un file XML creato con la codifica UTF-8. Il prossimo tag da aggiungere è il tag widget; Quindi dichiari le tue impostazioni, come debug;. Ora sei pronto per aggiungere gli elementi della tua finestra;. I widget hanno più oggetti che fanno determinate cose e hanno determinate proprietà. Ad esempio, l'oggetto testo,, crea il testo. Ecco un elenco di alcune delle proprietà dell'oggetto di testo: -name (autoesplicativo) -window (svalutato) -data (testo da visualizzare) -color (autoesplicativo) -size -font -hOffset (aka x) -vOffset (aka y) -width -height Detto questo, iniziamo a codificare. Aggiungi il seguente codice al file kon, nei tag:myTextHello World!blueArial18left252In inglese, questo imposta un oggetto di testo chiamato myText, che mostra "Hello World!" in carattere Arial, colore blu e dimensione 12. Salvare il file kon e continuare con il passaggio quattro.

Passaggio 4: gioisci

Fai doppio clic sul file kon e il tuo widget verrà caricato. Congratulazioni! Hai creato il tuo primo widget. Ma non abbiamo ancora finito di programmare. Probabilmente stai pensando: "Tutto qui?", giusto? Continua al passaggio 5 per aggiungere alcune funzioni al tuo widget.

Passaggio 5: aggiunta di funzioni

Ora faremo in modo che il widget visualizzi l'ora corrente. Ciò richiederà un timer che si aggiorna ogni minuto e un altro file. Il file successivo sarà un file JavaScript, che andrà nella cartella "Contenuti". Apri il tuo editor di testo e crea un file chiamato main.js. Per aggiungere l'ora, utilizzeremo "l'oggetto Data". Per impostare l'oggetto data, creare una funzione. Aggiungi questa funzione al file js:function updateText()'{ theTime = new Date(); theHour = String(theTime.getHours()); theMinutes = String(theTime.getMinutes()); myText.data = "L'ora è: "+ theHour+":"+theMinutes; print('update');}Il tuo widget non mostrerà ancora l'ora, perché non sa cosa fare con il file js. Per occuparsene, aggiungiamo questo gestore di eventi al file Kon, nei tag ma non nei tag: include('main.js');Per fare l'aggiornamento dell'ora, dobbiamo creare un timer, che va in il file Kon, nei tag ma non nei tag: salva i file e carica il widget. Dovrebbe mostrare l'ora. Se non funziona, scarica sia kon che js dal basso e sostituisci con quelli vecchi.

Passaggio 6: riassumere tutto

Utilizzare il widget convertitore widget per convertire il widget in un file.widget. NOTA: trascina la cartella che ha il nome del tuo widget sul convertitore, non il file kon. Se vuoi andare ancora oltre con il tuo widget, prendi alcune risorse qui. Ecco un elenco di cose che puoi provare a realizzare con il tuo widget: -Aggiungi preferenze per controllare il carattere usando il tag e il sotto-tag del carattere- Aggiungi alcuni gestori di eventi come onClick usando i tag o.-Visualizza un'immagine da un file locale usando l'oggetto immagine Spero che tu abbia trovato utile questo tutorial e che apprezzerai le infinite possibilità dei widget, Hunter