La sezione Guida introduttiva fornisce una panoramica introduttiva a Google Gadget e agli Appunti, che consentono di modificare i gadget e visualizzare un'anteprima delle modifiche senza uscire dalla guida per gli sviluppatori. Il passaggio successivo consiste nella creazione di gadget personali. La procedura è illustrata in questo documento.
La procedura di base per creare e implementare un gadget è la seguente:
Il gadget dello sviluppatore funziona come una sorta di "centro comandi" per tutti i gadget della home page. Oltre a elencare tutti i gadget in esecuzione, permette anche di aggiungere, visualizzare e gestire i gadget. Se ti occupi di sviluppo di gadget, il gadget dello sviluppatore fornisce le funzioni di cui hai bisogno. Ad esempio, consente di aggiungere gadget "non funzionanti", il che può risultare utile quando si modifica attivamente un gadget.
Per aggiungere un gadget dello sviluppatore, fai clic qui:
Nel gadget dello sviluppatore puoi fare clic sui link di singoli gadget per visualizzare le relative specifiche XML. Questo è un buon metodo per vedere in che modo vengono implementati altri gadget.
Per il momento, non devi preoccuparti delle funzioni avanzate del gadget dello sviluppatore. Verranno discusse più dettagliatamente qui. Tuttavia, una funzione che dovresti imparare a utilizzare fin d'ora è la casella di controllo Copia cache. Per impostazione predefinita le specifiche dei gadget vengono archiviate nella cache. Ti consigliamo di deselezionare l'opzione Copia cache per i gadget su cui stai lavorando. In tal modo, ti sarà possibile visualizzare le modifiche anziché visualizzare il gadget archiviato nella cache.
Se non hai accesso a un server web pubblico, puoi trovare un host per i tuoi gadget utilizzando Google Page Creator. Per una soluzione di hosting più sofisticata che include anche il controllo della versione, consulta la sezione Hosting su Google Codici.
Per caricare i tuoi gadget su server utilizzando Google Page Creator, procedi nel seguente modo:
Se sei un nuovo utente di Google Page Creator: la prima volta che utilizzi Google Page Creator, devi accettare i Termini e condizioni prima di procedere. Quindi, si aprirà una pagina in cui verrà visualizzata la tua home page predefinita di Google Page Creator all'interno di un editor (tieni presente che questa home page non è correlata alla tua pagina iGoogle). In questa pagina fai clic su Back to Page Manager (Torna a Page Manager) per ritornare a Page Manager.
Se non sei un nuovo utente di Google Page Creator: quando accedi a Google Page Creator, la prima pagina visualizzata sarà quella di Page Manager.
Supponiamo, ad esempio, che tu abbia un gadget chiamato "myphonebook.xml", che hai caricato in Google Page Creator. A questo punto, puoi aggiungerlo alla tua pagina iGoogle mediante un URL del tipo:
http://<Google-username>.googlepages.com/myphonebook.xml
Ricordati che non esistono gadget privati. Una volta che un gadget viene pubblicato su un sito web pubblico, qualunque utente potrà trovarlo e visualizzarlo. Assicurati di non includere informazioni personali come numeri di telefono o indirizzi email privati.
E se non vuoi che il tuo gadget sia pubblico? Google incentiva gli autori dei gadget a condividere le proprie specifiche. Tuttavia, se desideri ridurre al minimo la visibilità pubblica del tuo gadget, ecco alcuni suggerimenti da seguire prima di rilasciarlo:
Una volta capito in che modo modificare e pubblicare i gadget, sei pronto per includere altre funzioni più avanzate nelle specifiche dei tuoi gadget. Le specifiche XML di un gadget sono costituite da 3 parti fondamentali:
Nota: all'interno degli attributi XML nelle specifiche del gadget per determinati caratteri devi utilizzare i codici "escape" corrispondenti (ossia, in pratica, codificare) affinché tali caratteri siano interpretati correttamente. Per ulteriori informazioni, consulta Utilizzo dei codici "escape" per caratteri speciali.
Quando scrivi un gadget, devi iniziare dalla sezione <Content>.
La sezione <Content> rappresenta il "cervello" di un gadget. La sezione <Content> definisce il tipo di contenuto e può includere il contenuto al proprio interno oppure rimandare a un contenuto esterno tramite un link. La sezione <Content> è l'area in cui gli attributi del gadget e le preferenze utente si combinano con la logica di programmazione e le informazioni sulla formattazione per consentire l'esecuzione del gadget.
Il modo più semplice per creare il gadget consiste nell'inserire semplicemente il codice HTML (e, facoltativamente, JavaScript o Flash) nella sezione <Content>. Gli sviluppatori web più esperti possono leggere Scelta del tipo di contenuto per altre opzioni sul controllo degli accessi, l'hosting remoto, l'uso di linguaggi di scripting alternativi e altri argomenti. Di seguito viene riportato un semplice gadget di esempio. Questo gadget visualizza una fotografia selezionabile con un clic che apre un album di foto in una nuova pagina HTML.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Go to Photo Album" height="250" scaling="false" />
<Content type="html">
<![CDATA[
<div style="text-align:center"><a
id="Riggs" title="My Photo Album" target="_blank"
href="http://picasaweb.google.com/doc.examples/ShelfBoy">
<img border="0" alt="Photo" src="http://doc.examples.googlepages.com/Riggsie-OP.jpg"
title="Click Here."></a>
</div>
]]>
</Content>
</Module>
Questo è il gadget in esecuzione:
Alcuni gadget richiedono che l'utente possa inserire informazioni specifiche personalizzate. Ad esempio, il gadget di un gioco potrebbe consentire agli utenti di inserire un livello di difficoltà preferito. La sezione delle preferenze utente (<UserPref>) nel file XML descrive i campi di inserimento dei dati dell'utente che si trasformano in comandi dell'interfaccia utente quando il gadget è in esecuzione. Le preferenze utente vengono memorizzate in modo permanente.
Ad esempio, questo gadget visualizza un saluto personale basato sull'ora del giorno. Consente agli utenti di specificare i seguenti elementi:
Questo è un esempio del gadget in esecuzione:
Questo è l'aspetto del gadget quando l'utente fa clic su edit (modifica) per modificare le preferenze utente:
Le preferenze utente che si trasformano in comandi dell'interfaccia utente quando il gadget è in esecuzione sono definite nelle specifiche XML nel seguente modo:
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Preferences for __UP_myname__" height="250" />
<UserPref name="myname" display_name="Name" required="true" />
<UserPref name="myphoto" display_name="Photo" default_value="http://doc.examples.googlepages.com/Rowan-headshot.jpg"/>
<UserPref name="mychoice" display_name="Show Photo?" datatype="bool" default_value="true"/>
<UserPref name="mycolor" display_name="Color" default_value="Yellow" datatype="enum" > <EnumValue value="Red" /> <EnumValue value="Aqua" /> <EnumValue value="Lime" /> <EnumValue value="Yellow" /> <EnumValue value="Pink" /> <EnumValue value="Orange" /> <EnumValue value="White" /> </UserPref>
Tieni presente quanto segue:
Ecco un esempio di JavaScript che visualizza il saluto del gadget:
<Content type="html">
<![CDATA[
<div id="content_div" style="font-size:12pt; padding:5px;">
<script type="text/javascript">
// Get userprefs
var prefs = new _IG_Prefs(__MODULE_ID__);
// Based on user input, display personal greeting
function displayGreeting (){
// Create Date object
var today = new Date();
// Get current time.
var time = today.getTime();
var salutation;
// Based on the time of day, display an appropriate greeting
var hour = today.getHours();
if (hour < 12)
salutation = "Morning";
else if (hour > 17)
salutation = "Evening";
else salutation = "Afternoon";
// Build HTML string to display message
var html = "";
var element = document.getElementById('content_div');
element.style.height=250;
// Set the background color according to the mycolor userpref
element.style.backgroundColor=prefs.getString("mycolor");
// Display a greeting based on the myname userpref
html += "<br><h2>Good " + salutation + ", " + prefs.getString("myname") + "!!!</h2><br>";
// If the "Show Photo?" checkbox is checked, display photo.
if (prefs.getBool("mychoice")==true)
{
html += '<img src="' + prefs.getString("myphoto") + '">';
}
_gel("content_div").innerHTML = html;
}
_IG_RegisterOnloadHandler(displayGreeting);
</script>
]]>
</Content>
Per un elenco di tutti gli attributi <UserPref>, consulta la sezione Riferimento.
Per accedere alle preferenze utente dal tuo gadget, devi utilizzare l'API JavaScript delle preferenze utente, ad esempio:
<script type="text/javascript">
// Must be constructed using the __MODULE_ID__ token. It gets replaced
// at runtime with the actual ID of your gadget.
var prefs = new _IG_Prefs(__MODULE_ID__);
var someStringPref = prefs.getString("StringPrefName");
var someIntPref = prefs.getInt("IntPrefName");
var someBoolPref = prefs.getBool("BoolPrefName");
</script>
Per un elenco di tutte le funzioni JavaScript, consulta il Riferimento.
Puoi utilizzare una variabile di sostituzione del formato __UP_userpref__ nelle sezioni <ModulePrefs> o <UserPref>, dove userpref coincide con l'attributo name di una preferenza utente. Quando il gadget viene eseguito, il valore stringa della preferenza utente corrispondente viene sostituito dalla variabile senza carattere "escape". Ad esempio, in questa parte di codice il valore specificato dall'utente al momento dell'esecuzione per la preferenza utente projects viene sostituito da __UP_projects__ nella stringa title_url:
<Module>
<ModulePrefs title="Build Monitor"
title_url="http://www.example.com/build/status.php?__UP_projects__"/>
<UserPref name="projects" display_name="project(s)"/>
<Content ... />
</Module>
Un esempio simile è presente nell'esempio di preferenze utente.
Di seguito riportiamo alcune linee guida generali per l'uso delle variabili di sostituzione delle preferenze utente:
La sezione <ModulePrefs> nel file XML specifica le caratteristiche del gadget, ad esempio il titolo, l'autore, le dimensioni preferite e così via. Ad esempio:
<Module>
<ModulePrefs title="Today's Network Traffic" title_url="http://www/~rowan/gadgets/stats/"
height="200" author="Jane Smith" author_email="xxx@google.com"/>
<Content ...>
... content ...
</Content>
</Module>
Gli utenti del tuo gadget non potranno modificare questi attributi.
Per un elenco completo degli attributi <ModulePrefs>, consulta la sezione Riferimento.
Quando sei pronto per creare gadget più complessi, consulta la pagina Nozioni fondamentali per lo sviluppo oppure torna alla home page della documentazione per una panoramica delle sezioni e degli argomenti.
©2010 Google - Norme sulla privacy - Termini e condizioni - Tutto su Google
Aggiornato il