E vediamoli finalmente questi Widget. In questo post vi accompagno nella stesura del vostro primo Widget utilizzando le tecniche introdotte in WM 6.5.
Intanto, cos'è un Widget. Un Widget è un 'pezzo' di Web :-), o come dicono dalle parti di Redmond un 'chunk of Web', realizzato con tutte le classiche tecnologie Web (HTML, CSS, Javascript) che però gira su un dispositivo Windows Mobile >= 6.5 come se fosse una normalissima device application sviluppata con le Windows Form. Detto così può sembrare limitativo, ma se consideriamo il fatto che possiamo utilizzare anche la tecnologia AJAX, la cosa vi garantisco si fa estremamente interessante. Da non sottovalutare inoltre il fatto che i widget sono uno standard W3C e quindi assumono una valenza che va al di la della semplice applicazione che gira su device Windows Mobile, visto che potrebbero essere infatti elaborati da dispositivi completamente differenti e cross-platform semplicemente widget-compliant ( vedi le specifiche del W3C ).
Cominciamo a sviluppare il nostro progetto partendo da un classico progetto Windows device application con CF 3.5 e target un emulatore Windows Mobile 6 (inutile ricordarvi di scaricare l'SDK per Windows Mobile 6.5 di cui, per comodità , vi lascio il link qui. Aggiungiamo, anche se vi fa un pò strano, una pagina Html e aggiungiamo un tag molto semplice all'interno di body. Il risultato del codice dovrebbe risultare questo:
La salviamo come WPCWidget.htm
Vediamo adesso com'è semplice trasformare questo piccolo frammento di web in un'applicazione mobile. La procedura è veramente semplice. Scegliamo un'immagine che servirà da icona per il nostro Widget e mettiamola nella stessa directory del file html. La mia si chiama icon.png. Adesso la parte più delicata. Per far sì che il widget venga trattato correttamente sul dispositivo, è necessario fornire un file di configurazione chiamato ovviamente...config.xml. In questo file vengono indicate diverse informazioni come vediamo in figura:
Questo file, che può essere assimilato ad un manifest file dell'applicazione, è obbligatorio e fornisce le informazioni relative al funzionamento del widget stesso. Il tag root è <widget> contenente la versione ed il namespace (W3C). Di seguito il nome del Widget stesso e soprattutto a seguire l'entry point dell'applicazione: la pagina cioè da cui far partire il tutto. Nel nostro caso si tratta di WPCWidget.htm. Un altro tag molto importante è <access>. Come si vede l'attributo network stabilisce se il widget può usufruire dell'accesso in rete o meno. Nel caso affermativo, l'utente del widget deve essere avvertito e deve esplicitamente dare il permesso alla comunicazione su rete. Seguono l'icona con cui identificare il widget e le informazioni sull'autore. Nella directory dovreste quindi alla fine avere questa situazione:
La parte più complessa è terminata. Adesso basta 'zippare' i tre file in un unico file, magari chiamato WPCWidget.zip e rinominarlo WPCWidget.Widget. Esatto basta rinominare il file compresso per essere pronto al deployment sul device. Quest'ultimo può avvenire per esempio tramite file sharing con il device. Infatti basterà far partire l'emulatore (tramite direttamente Visual Studio) e una volta avviato l'emulatore andare sulla menubar dell'emulatore stesso e posizionarsi su File\Configure per impostare la directory in cui si trova il .Widget come directory condivisa.
A questo punto se andate ad aprire la storage card sul device (emulator) troverete il contenuto della nostra share
Facendo doppio click sull'icona del widget vedremo apparire la nostra icona con la descrizione
Confermando l'installazione vedremo la nostra pagina web in azione sul dispositivo.
Oggetti Javascript
Il nostro semplice widget contiene solo HTML, ma sappiamo che la grande possibilità è quella di sfruttare javascript. Dobbiamo inoltre far presente che Windows Mobile supporta l'oggetto Javascript Widget che ha alcune interessanti proprietà:
| Proprietà | Descrizione |
| authorEmail | L'indirizzo mail dell'autore. Corrisponde all'attributo 'email' del tag <author> nel file manifest |
| authorName | Nome dell'autore. Corrisponde all'attributo 'name' del tag <author> nel manifest |
| authorURL | sito web, come sopra per l'attributo 'href' |
| currentIcon | icona utilizzata dal widget. E' di tipo WidgetIcon |
| description | Descrizione del Widget. Viene visualizzato all'installazione |
| height | Altezza del Widget in pixel |
| identifier | identificatore, come sopra per l'attributo 'uid' |
| locale | Localizzazione del widget. Riflette le impostazioni inserite nella dialog box delle Regional Settings |
| menu | Oggetto di tipo Menu |
| name | Come sopra per l'elemento <name> del manifest |
| version | la versione. Come sopra per l'attributo 'version' |
| width | Ampiezza in pixel |
Adesso sfruttando l'oggetto menu di widget, cerchiamo di costruire un menu con alcune voci cliccabili. Intanto vediamo le proprietà e i metodi dell'oggetto menu stesso per capire cosa possiamo fare:
| Proprietà | Descrizione |
| append(item) | Appende un menuitem alla softkey di destra |
| clear() | Cancella i contenuti del main menu |
| createMenuItem(id) | Crea un oggetto MenuItem con uno specifico intero identificativo |
| getMenuItemById(id) | Restituisce il particolare MenuItem con quello specifico Id |
| remove(item) | Rimuove lo specifico oggetto MenuItem dal menu |
| setSoftKey(item, id) | Assegna un oggetto MenuItem alla soft-key con lo specifico Id |
Se avete fatto girare il semplice widget, quando questo parte ha la soft key di sinistra impostata con un singolo MenuItem 'Exit' che termina l'applicazione. L'altra soft key di destra ha un menu con a sua volta un singolo menuitem 'Exit'. Per costruire un semplice MenuItem si crea tramite il metodo opportuno e, in questo caso, si appende alla softkey di sinistra:
Se si usava menu.append(menu1001), il MenuItem veniva inserito nella softKey di destra. Con le funzionalità sopra descritte, si allargano le possibilità di costruire dei menù estremamente accattivanti, magari con la possibilità di submenu che a loro volta esplodono in altrettanti menu, come dimostrato nell'immagine successiva:
Il codice dell'esempio mostra la facilità con cui costruire il submenu visualizzato sopra
CSS
Infine la possibilità di usare i CSS. Come vediamo nel codice seguente, sono supportati completamente i CSS che rendono veramente comoda la formattazione del layout del Widget e quindi una più alta manutenibilità del codice. Tutto questo senza contare le infinite possibilità che si aprono (DHTML) facendo convergere le due tecnologie CSS con Javascript, argomento di prossimi post. Vediamo semplicemente la dichiarazione e l'utilizzo di un CSS:
bye!
sv.
Subscribe