Come creare un widget

I widget sono applicazioni autonome che si trovano solitamente incorporate su siti di terze parti come orologi, contatori d'asta, countdown eventi, ecc. I widget sono quindi mini-applicazioni facili da implementare, veloci da sviluppare e usate per sfruttare tecnologie avanzate aggiungendo funzionalità ad applicazioni esistenti. Se sai creare una pagina Web, sai come creare e distribuire un widget poiché usano la stessa tecnologia: JavaScript, DHTML e CSS. I widget possono essere di tipo accessorio, applicazione o informazione. I widget accessorio sono autonomi e funzionano indipendentemente da Internet o un'applicazione. I widget applicazione sono associati a un'applicazione completa mentre i widget informazione lavorano con dati Internet.

L'Architettura

Passo 1

Avvia il tuo editor di testo e crea un file HTML. Il file HTML dovrebbe aderire allo standard XHTML 1.0 o superiore per conformarsi alle best practice attuali del Web. Un semplice codice XHTML sarà simile a questo:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Widgets</title>
</head>
<body background="picture.png">
<h1> Welcome to Widget World</h1>
</body>
</html>

Passo 2

Usa il tag <canvas> per eseguire il rendering 2D completo per il widget se richiesto. L'attributo "composite" è un'altra aggiunta al tag che permette di specificare come l'immagine ("picture.png") viene renderizzata.

Passo 3

Usa i Fogli di Stile a Cascata (CSS) per stilizzare il widget in modo che venga visualizzato uniformemente su tutti i browser. Parte del file CSS conterrebbe lo styling seguente:

/* Stili CSS per il widget */

Passo 4

Metti il file sopra in un file separato. In questo esempio, abbiamo salvato il file come "widget.css". Riferisci il file usando l'istruzione "import" sul file HTML principale come mostrato:

<head>
<link rel="stylesheet" type="text/css" href="widget.css">
</head>

Aggiungere Dinamicità

Passo 1

Usa l'oggetto "widget" per fornire capacità aggiuntive. Ad esempio, per accedere alle preferenze utente, usa la seguente riga di codice:

widget.setPreferenceForKey(preference, key)
widget.preferenceForKey(key)

Passo 2

Usa gli eventi di attivazione per evitare l'uso eccessivo di tempo CPU o risorse di rete da parte del widget. Il codice seguente mostra come fare:

if (window.widget) {
  widget.hide = hide;
  widget.show = show;
}
function hide() {
  if (timeInterval == null) {
    timeInterval = setInterval(updateTime, 500);
  }
}

Aggiungi altre funzioni al codice come preferisci.

Passo 3

Crea il file "Info.plist" per identificare un widget e le sue risorse. Questo file varia nel contenuto a seconda del tipo di widget.

Suggerimento

In linea con l'uso delle tecnologie Web, la dinamicità dei widget è fornita usando JavaScript. Questo permette al widget di accedere alle preferenze utente sul sistema, ribaltare i widget per accedere alle preferenze, aprire altre applicazioni, rispondere agli eventi delle pagine Web ed eseguire comandi di sistema come strumenti da riga di comando e script shell.