Sviluppare un Google Gadget

L’API di Google Gadget di Google Desktop comprende oggetti e metodi che consentono di scrivere gadget per la Sidebar in linguaggi di script quali JavaScript o VBScript. In questo documento vengono illustrate le procedure per la scrittura di gadget utilizzando questa API insieme al Gadget Designer di Google Desktop. Designer è un ambiente di sviluppo integrato che permette di progettare l’interfaccia utente dei propri gadget utilizzando componenti a trascinamento, nonché di testare i gadget creati al di fuori della Sidebar.

Il primo passo da effettuare è scaricare l’SDK all’indirizzo:

http://desktop.google.com/downloadsdksubmit?hl=it

All’interno dello zip, oltre alle librerie utili al funzionamento dell’ambiente, troviamo degli esempi pratici che ci mostrano alcune delle funzionalità delle API ed un tool grafico per lo sviluppo delle applicazioni.

Per iniziare con lo sviluppo lanciamo il  Gadget Designer eseguendo il file designer.exe presente nella cartella api/tools. A questo punto creiamo un nuovo progetto andando su File->New Gadget.

Una volta attribuito un nome al tuo gadget, Designer crea una cartella per il progetto insieme a diversi file e cartelle per permetterti di iniziare.

Il Riquadro Gadget Explorer contiene le cartelle e i file che vengono compressi nel file zip nome_gadget.gg utilizzato per la distribuzione del gadget. La cartella di livello superiore presenta il nome scelto per il gadget al momento della creazione del progetto. Quest’ultima contiene inizialmente due cartelle e cinque file.

• Cartella en: en è l’ID lingua dell’inglese americano. Questa cartella contiene il file strings.xml, dove l’autore e Designer salvano la versione in inglese americano di tutte le stringhe utilizzate nell’interfaccia utente del gadget;
• Gadget Settings: fai doppio clic su questo comando per richiamare la finestra di dialogoImpostazioni del progetto.
• main.js: un file JavaScript predefinito nel quale è possibile scrivere funzioni che implementano il comportamento e la gestione degli eventi del gadget. Facendo doppio clic, il file viene aperto per la modifica nel Riquadro Visualizzazione e viene aggiunta una scheda per la visualizzazione nella parte superiore dello stesso riquadro. Una volta apportate le modifiche al file, salva le modifiche selezionando File->Salvaoppure premendo Ctrl+S.
• main.xml: il file XML che definisce il layout/la visualizzazione dell’interfaccia utente del gadget. Facendo doppio clic su questa voce, viene selezionata automaticamente la scheda main.xml nella parte superiore del Riquadro Visualizzazione e viene visualizzato il contenuto del file main.xml all’interno dello stesso riquadro;
• plugin_large.gif: un file contenente l’immagine dell’icona grande associata al gadget. Sostituisci questo file con un file con lo stesso nome contenente un’icona di dimensioni adatte al tuo gadget (32 x 32 pixel).
• plugin_small.gif: un file contenente l’immagine dell’icona piccola associata al gadget. Sostituisci questo file con un file con lo stesso nome contenente un’icona di dimensioni adatte al tuo gadget (12 x 12 pixel).
• Cartella stock_images: contiene file di immagine precaricati relativi a componenti dell’interfaccia utente, quali, ad esempio, pulsanti e caselle di controllo. Normalmente, gli utenti sostituiscono questi file con file di immagine personali oppure li sovrascrivono in modo che il contenuto includa immagini personali.

Vedremo come sia possibile tramite un oggetto JavaScript, recuperare delle informazioni riguardo il sistema su cui sta girando il gadget (solo per Windows) andando ad interrogare le classi WMI (Windows Management Information).

Ogni chiamata alle classi WMI inizia col prefisso winmgmts:.

Inoltre utilizzeremo come livello di ImpersonationLevel (che è un tipo enumerativo composto dai livelli: Default, Anonymous, Identify, Impersonate, Delegate) quelloImpersonate, che ci consente di richiedere tutte le informazioni a cui l’utente corrente ha accesso. Dopo questo parametro opzionale, segue l’identificativo del computer al quale stiamo chiedendo le informazioni. Per usare il computer in uso, specifichiamo  \. . Per gli altri computer possiamo usare \hostname.  Alla fine abbiamo il namespace delle anostra chiamata che sarà sempre rootcimv2 :

winmgmts:{impersonationLevel=Impersonate}\.rootcimv2

Creiamo quindi una classe OS definendone un costruttore (per il momento vuoto) che sarà una funzione chiamata quando utilizzeremo il costrutto new. Definiamo poi due funzioni utilizzando l’oggetto prototype, salviamo il tutto in un file all’interno del nostro progetto (ad esempio oshelper.js):

function OS() {
}
OS.prototype.getWMI= function(){
 return GetObject("winmgmts:{impersonationLevel=Impersonate}\\.\root\cimv2");
}
OS.prototype.whoIsLogged= function(){
var wmi= this.getWMI();
var query ="Select * from Win32_ComputerSystem";
e = new Enumerator(wmi.ExecQuery(query));
 
for (e.moveFirst( );!e.atEnd();e.moveNext())
	{
	var data = e.item();
	this.userName=data.Username;
 }
}

All’interno del nostro file main.xml inseriamo una Label nella quale inseriremo i risultati ottenuti, nel nostro caso l’utente loggato e l’hostname:

<view height="150" width="250" onopen="view_onOpen()">
  <img src="stock_imagesbackground.png"/>
  <label height="26" name="label1" width="120" x="10" y="10"/>
  <script src="main.js" />
  <script src="oshelper.js" />
</view>

All’interno del file main.js definiamo la funzione view_onOpen() che viene chiamata quando il gadget viene lanciato:

function view_onOpen() {
var os = new OS();
os.whoIsLogged();
label1.innerText= os.userName;
}

Questo è il risultato ottenuto:

Il Gadget realizzato

Riferimenti

http://desktop.google.com/it/script-primer.html

http://code.google.com/intl/it-IT/apis/desktop/articles/e3.html