Io Programmo 155 Ottobre 2010

Scopriamo il framework Sencha touch per scrivere agevolmente una WebApp per il melafonino
iPhone 4 con hTML5 e JavascriPT!

RIVISTA+LIBRO+CD 9,99
VERSIONE PLUS
by C@solari
RIVISTA+CD 6,99
VERSIONE STANDARD
ed vera rivoluzione!
Batti sul tempo gli altri sviluppatori, inizia fin da subito a guadagnare con le applicazioni mobile per il nuovo sistema made in Microsoft
Come funziona linnovativa piattaforma hardware e software Installare e configurare i tool necessari allo sviluppo Passo per passo una prima applicazione in grado di sfruttare le novit del sistema operativo
Sul cd-Rom tutti gli esempi di codice commentato!
Phone 7
Windows
Per esPerti e PrinciPianti
Poste Italiane S.p.A Spedizione in A.P. D.L. 353/2003 (onv.In L.27/02/2004 n.46) Art.1 CommA1 DCB romA. Periodicit mensile ottoBrE AnnO XI XIv, n.10 Poste Italiane S.p.A Spedizione in A.P. D.L.353/2003 (conv.in L.27/02/2004 n.46) art.1 comma 2 DCB ROMA Periodicit mensile APRILE 2007 2010 Anno n.4 (113) (155)
Sfruttiamo tutte le novit per accedere velocemente a qualunque fonte DB

JQuERy
scoPri il nuovo entity Framework 4
VISuAL BASIc 2010
Con jQuery, manipoliamo in modo veloce ogni tipologia di documento HTML
semPliFica il codice dei tuoi JavascriPt
Sviluppiamo WebApp con meno codice e in stile MVC
un Framework oPen source Per il web

BROWSER
RuBy ON RAILS
Scriviamo una extension in grado di dialogare facilmente con Twitter
le estensioni di GooGle chrome
Unapplicazione meteo per scoprire il funzionamento delle Push Notification
Gestione delle notiFiche con iPhone
MOBILE
Sotto la lente il nuovo Visual Studio LightSwitch. Per sviluppare applicazioni .NET senza conoscere alcun linguaggio
Una gUida ragionata al CMS pi adatto alle tUe eSigenze
Qual il miglior Content Management System da adottare per il tuo sito Web? Scopriamo insieme caratteristiche e funzionalit dei CMS pi in voga
Programmare senza scrivere codice!
Riconosciamo un volto in una foto grazie alle API del sistema operativo
intelligenza artifiCiale Con Bada
Usiamo i Content Provider per scrivere App in grado di dialogare tra loro
condivisione dei dati tra le aPP android
www.edmaster.it
Anno XIV - N.ro 10 (155) - Ottobre 2010 Periodicit: Mensile Reg. Trib. di CS al n.ro 593 del 11 Febbraio 1997 Cod. ISSN 1128-594X E-mail: ioprogrammo@edmaster.it http://www.edmaster.it/ioprogrammo http://www.ioprogrammo.it Direttore Editoriale: Massimo Sesti Direttore Responsabile: Massimo Sesti Responsabile Editoriale: Gianmarco Bruni Redazione: Raffaele del Monaco Collaboratori: R. Brunetti, C. Daniele, M. De Ghetto, F. Napoletano, C. Pelliccia, L. Regnicoli , G. Sarnieri Segreteria di Redazione: Rossana Scarcelli Consulenza Redazionale: SET S.r.l. Gianfranco Forlino Realizzazione gra ca: Cromatika S.r.l. Art Director: Fabio Marra Responsabile gra co di progetto: Leonardo Cocerio Responsabile area tecnica: Giancarlo Sicilia Illustrazioni: Arturo Barbuto Impaginazione elettronica: Francesco Cospite Pubblicit: Master Advertising s.r.l. Via F. Filzi, 27 - 20124 Milano Tel. 02 83121211 - Fax 02 83121207 e-mail advertising@edmaster.it Editore: Edizioni Master S.p.a. Sede di Milano: Via C. Correnti, 1 - 20123 Milano Sede di Rende: C.da Lecco, zona ind. - 87036 Rende (CS) Presidente e Amministratore Delegato: Massimo Sesti Direttore Generale: Massimo Rizzo Abbonamento e arretrati Abbonamento Annuale: ioProgrammo (11 numeri) 59,90 sconto 23% sul prezzo di copertina di 76,89 ioProgrammo con Libro (11 numeri) 75,90 sconto 31% sul prezzo di copertina di 109,89 Abbonamento Biennale: ioProgrammo (22 numeri) 75,90 sconto 51% sul prezzo di copertina di 153,78 ioProgrammo con Libro (22 numeri) 108,90 sconto 51% sul prezzo di copertina di 219,78 Offerte valide solo per lItalia no al 30/11/2010. Costo arretrati (a copia): il doppio del prezzo di copertina + 5.32 spese (spedizione con corriere). Prima di inviare i pagamenti, veri care la disponibilit delle copie arretrate al 199.50.50.51* La richiesta contenente i Vs. dati anagra ci e il nome della rivista, dovr essere inviata via fax allo 199.50.00.05*, oppure via posta a EDIZIONI MASTER Via C. Correnti, 1 - 20123 Milano, dopo avere effettuato il pagamento, secondo le modalit di seguito elencate: c/c post. n.16821878 o vaglia postale (inviando copia della ricevuta del versamento insieme alla richiesta); assegno bancario non trasferibile (da inviarsi in busta chiusa insieme alla richiesta); carta di credito, circuito Visa, Cartas, o Eurocard/Mastercard (inviando la Vs. autorizzazione, il numero di carta di credito, la data di scadenza, lintestatario della carta e il codice CVV2, cio le ultime 3 cifre del codice numerico riportato sul retro della carta). bonifico bancario intestato a Edizioni Master S.p.A. c/o BCC MEDIOCRATI S.C.AR.L. IBAN: IT 85 Q 07062 80881 000000012000 (inviando copia della distinta insieme alla richiesta). SI PREGA DI UTILIZZARE IL MODULO RICHIESTA ABBONAMENTO POSTO NELLE PAGINE INTERNE DELLA RIVISTA. Labbonamento verr attivato sul primo numero utile, successivo alla data della richiesta. Sostituzioni: qualora nei prodotti fossero rinvenuti difetti o imperfezioni che ne limitassero la fruizione da parte dellutente, prevista la sostituzione gratuita, previo invio del materiale difettato. La sostituzione sar effettuata se il problema sar riscontrato e segnalato entro e non oltre 10 giorni dalla data effettiva di acquisto in edicola e nei punti vendita autorizzati, facendo fede il timbro postale di restituzione del materiale. Inviare il CD-Rom difettoso in busta chiusa a: Edizioni Master - Servizio Clienti - Via C. Correnti, 1 - 20123 Milano Assistenza tecnica: ioprogrammo@edmaster.it
Questo mese su ioProgrammo
by C@solari
nari che si apriranno saranno quanto mai interessanti e speriamo davvero che questa eccezionale anticipazione di ioProgrammo possa darvi un vantaggio competitivo e permettervi di partire con il giusto anticipo. infatti bene ricordare che, proprio per la grande di usione che si spera possano avere le nostre app sui dispositivi mobile, bene che le interfacce seguano con grande scrupolo le linee guida dettate della casa madre. Facilit nel trovare il pulsante giusto, linearit del design, velocit nellesecuzione dei comandi: il tutto si pu riassumere nel concetto di coerenza con linterfaccia di base. Ecco, riuscire a proporre unapplicazione innovativa, restando con lambiente, penso possa essere una buona base per un progetto di successo. Ra aele del Monaco
COERENZA E INNOVAZIONE
Con la copertina di questo mese, ioProgrammo d u cialmente il benvenuto ad nuovo e attesissimo contender nellarena delle piattaforme mobile. Windows Phone 7 ha nora raccolto consensi pressoch unanimi da parte di chiunque abbia avuto modo di testarlo e siamo veramente felici di potervi presentare in anteprima assoluta lambiente di sviluppo. Vorrei ringraziare lottimo Roberto Brunetti per leccezionale tempismo, nonch la stessa Microsoft che ci ha concesso di proporre in anteprima le immagini del controllo Panorama, cuore della nuova interfaccia, e ancora sotto nda. Ancora una volta, per noi programmatori si apre un nuovo campo dazione, una nuova possibilit per esprimere la nostra fantasia e le nostre capacit. Se, come tutto lascia presagire, Windows Phone 7 si riveler un successo (magari sfruttando la sinergia con XBox) gli sce-
nomefile
CD WEB
cdrom.ioprogrammo.it
Allinizio di ogni articolo, troverete un simbolo che indicher la presenza di codice e/o software allegato, che saranno presenti sia sul CD (nella posizione di sempre \soft\codice\ e \soft\tools\) sia sul Web, allindirizzo http://cdrom.ioprogrammo.it
Phone 7
Windows
ed vera rivoluzione!
Come funziona linnovativa piattaforma hardware e software Installare e configurare i tool necessari allo sviluppo Passo per passo una prima applicazione in grado di sfruttare le novit del sistema operativo
SERVIZIO CLIENTI
dal luned al venerd 9:00/13:00 14:00/18:00
199.50.50.51*
199.50.00.05* sempre in funzione servizioclienti@edmaster.it

*Costo massimo della telefonata 0,118 + iva a minuto di conversazione, da rete fissa, indipendentemente dalla distanza. Da rete mobile costo dipendente dalloperatore utilizzato.
Stampa: Arti Gra che Boccia S.p.a. Via T. C. Felice, 7 Salerno Duplicazione CD-Rom: Neotek S.r.l. C.da Imperatore - Bisignano (CS) Distributore esclusivo per lItalia: Parrini & C S.p.A. Via di Santa Cornelia, 9 - 00060 - FORMELLO (RM) Finito di stampare nel mese di Settembre 2010 Nessuna parte della rivista pu essere in alcun modo riprodotta senza autorizzazione scritta della Edizioni Master. Manoscritti e foto originali, anche se non pubblicati, non si restituiscono. Edizioni Master non sar in alcun caso responsabile per i danni diretti e/o indiretti derivanti dallutilizzo dei programmi contenuti nel supporto multimediale allegato alla rivista e/o per eventuali anomalie degli stessi. Nessuna responsabilit , inoltre, assunta dalla Edizioni Master per danni o altro derivanti da virus informatici non riconosciuti dagli antivirus uf ciali allatto della masterizzazione del supporto. Nomi e marchi protetti sono citati senza indicare i relativi brevetti. Rispettare luomo e lambiente in cui esso vive e lavora una parte di tutto ci che facciamo e di ogni decisione che prendiamo per assicurare che le nostre operazioni siano basate sul continuo miglioramento delle performance ambientali e sulla prevenzione dellinquinamento
by C@solari
Questo mese su ioProgrammo
Programmare senza scrivere una riga di codice!

Una guida al nuovo Microsoft Visual Studio LightSwitch. Per sviluppare applicazioni .NET senza conoscere alcun linguaggio di programmazione
web 2.0
il Web dinamico facilissimo! . . . . . . . . . . . . . .24 jQuery il nome del framework che sta rivoluzionando lo sviluppo JavaScript. Grazie a jQuery possibile fare in una sola istruzione ci che in passato richiedeva decine di righe di codice: scopri come approfittarne nelle tue applicazioni Ruby foR dummies: iniziamo bene! . . . . . . . . . . . . .30 Ruby uno dei principali protagonisti del web moderno. Impareremo i fondamenti del linguaggio e creeremo una to do list per il web in poche righe di codice: avvicinarsi alla programmazione di domani, partendo da zero chRome: lestensione seRvita! . . . . . . . . . . . . . . . . . .36 Maggior controllo del browser, accesso a dati remoti, miglioramento della User Experience: tutto diventa semplice con le Chrome Extensions. Entriamo nei dettagli con una estensione che dialoga con Twitter notification: che temPo fa? .54 Unoccasione per scoprire le potenzialit di push notification e local notification, attraverso la realizzazione di unapplicazione che ci tiene aggiornati sulle temperature di una specifica localit gestione dei content PRovideR .60 I Content Provider costituiscono la maniera di Android per condividere dati fra le applicazioni. In questo articolo impareremo a consultare i provider predefiniti e vedremo anche come costruire un fornitore di contenuti custom tori. Una grande occasione anche per gli sviluppatori VB6 che vogliono passare a .NET senza difficolt gestiRe i dati con entity fRameWoRk 4 . . . . . . . . . . . . . .70 La pi recente tecnologia di accesso ai dati e il nuovo controllo visuale garantito dal DataGrid di WPF, permettono di gestire i dati con molta pi flessibilit. Sperimentiamone le possibilit con una applicazione di anagrafica
non Solo codice

come sceglieRe il cms giusto . . . . . . . . . . . . . .85 Il panorama dei CMS troppo vasto e hai dubbi su quello da utilizzare? Ecco gli aspetti fondamentali che devi valutare per arrivare a scegliere quello pi idoneo alle tue esigenze
SiSTemA
PRogRammaRe ancoRa facile! . . . . . . . . . . .64 Un nuovo ambiente di sviluppo di Microsoft che semplifica la creazione di applicazioni anche per i non-programma-
RubRiche
Allegati di ioProgrammo 6 Il software e il libro in allegato alla rivista News 8 Le pi importanti novit del mondo della programmazione Tips & Tricks 90 Una raccolta di trucchi da tenere a portata di... mouse Dal Forum Le pi interessanti discussioni dal sito web di ioProgrammo 92
mobile
il telefono Riconosce i volti! . . . . . . . . . . . . . . . . . . . .42 In questo appuntamento scopriremo come sfruttare le potenti API di BADA per catturare immagini dalla fotocamera. rintracceremo anche i volti presenti nelle immagini scattate. infine installeremo tutto sul telefono WAVE S8500 iPhone 4 con html5 e JavascRiPt! . . . . . . . . . . . . . . .50 Se non si ha tempo o voglia di imparare Objective-C, il linguaggio Apple per sviluppare su iPhone e iPad, le WebApp scritte in Sencha possono essere una valida alternativa per raggiungere i sempre pi numerosi fan di casa Apple
qualche consiglio utile

i nostri autori, nel presentare gli articoli, si sforzano di essere quanto pi comprensibili possibile. nel caso in cui abbiate difficolt nel comprendere esattamente il senso di una spiegazione tecnica, utile aprire il codice allegato allarticolo e seguire passo passo quanto viene spiegato tenendo docchio lintero progetto.
Software 96 I contenuti del CD-Rom allegato Posta Le richieste dei nostri lettori 98
http://www.ioprogrammo.it
Il CD-Rom allegato
Programmare Robot con Java
Top Software CD
Sviluppare applicazioni per il robot Lego Mindstorm NXT

l testo nasce dallesperienza della Scuola di Robotica (www.scuoladirobotica.it) e si propone due obiettivi: essere un manuale di facile consultazione, ricco di esempi, per la programmazione e presentare le basi teoriche per lo sviluppo di applicazioni Java, affrontando le problematiche specifiche della robotica. La possibilit di programmare robot in Java permette un immediato feedback circa la comprensione del linguaggio e un self-test diretto: la performance del robot. Esistono oggi in commercio diversi kit di robot molto impiegati a scopi didattici. Programmare robot con Java sviluppa in particolare le applicazioni per il robot Lego Mindstorms NXT, robot didattico nato per essere direttamente programmato con NXT-G, un programma fornito dalla Lego, che ha rilasciato il progetto sotto licenza Open Source, mettendo a disposizione della comunit tutte le specifiche software e hardware.
MOTODEV Studio for Android v1.3

Sviluppare per Google Android in stile Motorola
n ambiente di sviluppo con tutte le carte in regola per diventare lo standard per la programmazione su Android. In un unico pacchetto di installazione avremo la piattaforma Eclipse con gi pronti gli Android Development Tools (ADT). Tra le caratteristiche pi interessanti segnaliamo la presenza di un wizard che guida passo passo alla creazione di applicazioni. Ottima la gestione delle funzionalit DB, attraverso il pieno supporto per SQLite. Molto utile la possibilit di connettersi allo store di applicazioni Android, direttamente dallinterno di MOTODEV Studio. Il plus di questo IDE comunque rappresentato dalla garanzia di poter provare le proprie applicazioni su emulatori virtuali che simulino gli handset di Motorola, appena vengano messi in commercio.
Come usare linterfaccia del CD-ROM

Il top software del mese individuato dalla redazione
IN EVIDENZA
IL SOFTWARE
Lelenco del software contenuto nelle categorie
IL SOFTWARE
Il software diviso in categorie per una comoda consultazione
DIMENSIONE
La dimensione del software sul CD
IL SOFTWARE
Una accurata recensione dei contenuti
SALVA
Clicca qui per installare o salvare il software sul tuo PC
HOME
Torna alla pagina iniziale del CD-ROM
INFO RICERCA SOFTWARE

Il database di tutti i software pubblicati da ioProgrammo, anche gli arretrati Abbonamenti, informazioni e servizi utili
CONTATTACI
Per inviare una email alla redazione con le tue richieste
6 / Ottobre 2010
ht tp :/ /w ww . io p r o g r a m m o . i t
NEWS
Fennec 2.0, lalpha pronta per tutti

Il browser mobile di Mozilla si aggiorna. A bordo ci sono Sync e tecnologie pensate per migliorare le prestazioni e lesperienza utente
Nuova release preliminare per Fennec, il Firefox per smartphone, MID e altri dispositivi mobile: la seconda main release della volpe del deserto marcata Mozilla arriva allo stadio di alpha ufficiale dopo quello pre-alpha su piattaforma Android, unificando la distribuzione delle build per il succitato OS di Google e lN900 di Nokia e portando in dote novit tecnologiche rilevanti. Fennec - nome in codice di un browser mobile realizzato a partire dalle stesse fondamenta della tecnologia di un Firefox in evoluzione continua - raggiunge la versione alpha 2.01 con quattro novit principali: vale a dire il supporto per i componenti aggiuntivi, la funzionalit Firefox Sync e le tecnologie Electrolysis e Layers. Firefox Sync - attualmente disponibile come plugin esterno ma destinato a essere integrato direttamente nella versione principale del browser Mozilla - fornisce accesso istantaneo alla cronologia di navigazione della Awesome Bar, ai preferiti, alle password, ai form gi compilati e alle schede aperte sui diversi dispositivi su cui lutente utilizza Firefox attraverso un meccanismo di sincronizzazione remota sui server di Mozilla. Sincronizzazione remota a parte, Fennec alpha 2.01 ora il primo browser mobile a offrire una struttura a plugin, evidenzia il blog ufficiale di Mozilla, ed prevalentemente focalizzato sul miglioramento delle performance e della reattivit alle azioni dellutente. Per raggiungere lo scopo sono state appunto implementate Electrolysis e Layers: la prima fa si che linterfaccia del browser giri in un processo separato da quello che si occupa del rendering dei contenuti web. In tal modo dice Mozilla, Fennec in grado di rispondere molto pi velocemente agli input dellutente mentre vengono caricate le pagine o la CPU esegue codice CPU JavaScript intensivo. E Layers? Il componente verr sfruttato a partire dalla prossima release beta di Fennec,
dice ancora Mozilla, migliorando grandemente azioni grafiche intensive come lo scrolling, lo zoom, le animazioni e i video. Previsto anche lo sfruttamento dellaccelerazione hardware disponibile sui moderni MID, per un ulteriore incremento prestazionale della navigazione on-the-road. Fennec viene su bene, e Mozilla dispensa novit anche per Jetpack, il suo kit di sviluppo per estensioni basato su codice web (HTML, CSS e JavaScript) che arriva alla versione 0.7 e introduce tre nuove API: Panel API per la realizzazione di pop-up in grado di galleggiare sui contenuti web, Clipboard API per comunicare direttamente con la memoria degli appunti di sistema, Notifications API per attivare messaggi rivolti allutente direttamente sul desktop.
8 / Ottobre 2010
NEWS
WebOS 2.0: ecco lSDK!

eb OS non morto. La conclusa acquisizione di Palm da parte di HP permette ora al colosso statunitense di concentrarsi sulle prossime iterazioni del sistema operativo mobile. Per migliorare la propria posizione sul mercato, fare rumore ma soprattutto invogliare alla diffusione di WebOS, HP si rivolge prima di tutto agli sviluppatori con la distribuzione di un nuovo SDK. Assieme al kit di sviluppo sono state diffuse le prime informazioni sulle caratteristiche del futuro WebOS 2.0: Palm ha intenzione di far progredire e sfruttare ulteriormente le spiccate funzionalit multitasking del sistema con la funzionalit Stacks, un meccanismo che prevede la gestione di tutte
le applicazioni aperte come carte da spostare in giro sullo schermo, aprire, chiudere e raggruppare assieme in maniera automatica o manuale. LSDK di WebOS 2.0 offrir agli sviluppatori pieno accesso a Synergy, la funzionalit di gestione integrata - e a visione unificata - del messaging, dei contatti e dei calendari che potr dunque arricchirsi di nuovi servizi e caratteristiche, a totale piacimento di coder e produttori di gadget mobile. Stessa sorte toccher alla ricerca universale Just Type, che permetter di implementare delle azioni veloci con cui fornire allutente la possibilit di aggiornare status online, scrivere email e altro ancora senza lobbligo di lanciare prima lapplicazione corrispondente. E ancora Web OS 2.0 avr una modalit dock chiamata Exhibition, grazie alla quale sar possibile programmare il sistema per attivare particolari schermate o messaggi di stato una volta collegato lo smartphone/ MID/tablet alla sua docking station. Garantiti infine un pi facile accesso diretto allhardware del dispositivo su cui gira lOS, e la compatibilit con lo standard HTML 5. Molte sono insomma le novit che Palm ha in serbo per Web OS 2.0, e certamente altre se ne aggiungeranno in futuro. A essere meno certi sono leffettiva disponibilit della versione definitiva del sistema operativo, e leventuale commercializzazione di gadget basati su di esso.
Paypal e Android, matrimonio in vista?

P
ayPal, il servizio di pagamento di eBay, sarebbe in trattativa con Google per sbarcare su Android. Se lincontro tra le parti dovesse concludersi positivamente, PayPal dovrebbe arrivare, secondo alcune fonti, sulla piattaforma mobile di Google entro la fine dellanno. Android usa al momento pagamenti via carta di credito o un servizio sviluppato a Mountain View alternativo a quello di eBay, Checkout. Se il connubio con Paypal dovesse andare a buon fine, evitando ai clienti il fastidio di dover inserire ogni volta i dati della propria carta di credito o di registrarsi a Checkout e raggiungendo gli 87 milioni di account del concorrente, Google potrebbe colmare il gap di vendita delle app che soffre nei confronti di iPhone grazie anche al suo sistema di pagamento basato su iTunes. PayPal e Google non hanno commentato lindiscrezione. Intanto PayPal sta introducendo alcune innovazioni e caratteristiche aggiuntive alle sue applicazioni per iPhone e Android stessa: la possibilit di fare donazioni ad unorganizzazione no-profit direttamente dallapp, e unopzione che dovrebbe permettere, fotografando fronte/ retro un assegno, di depositarlo automaticamente sullaccount PayPal. Inoltre il servizio di eBay sta anche per introdurre un nuovo sistema per i micropamenti (fino a dieci dollari) basato sul principio dei crediti preacquisiti, utilizzabili dove si desidera.
10 / Ottobre 2010
NEWS
Intel e Nokia: laboratorio in comune per il 3D
stato chiamato Joint Innovation Center ed ospiter almeno una ventina di ricercatori grazie anche agli spazi degli Urban Living Labs dellUniversit di Oulu, in Finlandia. Ad annunciarlo un comunicato congiunto di Intel e Nokia, che hanno nuovamente unito le proprie forze per un obiettivo pi che ambizioso nelle tecnologie mobile. In collaborazione con il Center for Internet Excellence dello stesso ateneo finlandese, i ricercatori ospitati dalle due aziende potranno infatti lavorare allo sviluppo di esperienze ancora pi appaganti per tutti gli utenti mobile. Tra queste, la possibilit di visualizzare un ologramma in tre dimensioni del proprio interlocutore. La tecnologia 3D potrebbe cambiare il modo in cui utilizziamo i vari dispositivi mobile, offrendo esperienze molto pi immersive - ha spiegato Rich Green, vicepresidente di Nokia - Il nostro laboratorio con Intel attinger alla comunit di ricerca di Oulu, in particolare quella legata alle interfacce 3D. Da questo punto di vista, Intel e Nokia punteranno tutto sulla piattaforma mobile basata su Linux MeeGo, peraltro frutto della fusione tra il Moblin Project di Intel e la piattaforma Maemo dellazienda finlandese. Questa la rampa di lancio dei venti e pi ricercatori dello Joint Innovation Center, alla ricerca di nuove esperienze. In tre dimensioni.
Win Phone 7: tutto vocale

F
ino a ieri comandi vocali disponibili su ordinari smartphone e cellulari si limitavano fondamentalmente alla possibilit di comporre un numero telefonico presente in rubrica, senza luso delle mani. Oggi le cose stanno cambiando sensibilmente. In occasione del recente SpeechTEK 2010 newyorkese il general manager del Gruppo Voice di Microsoft, Zig Serafin, ha ribadito che la casa di Redmond non considera pi il controllo vocale come una funzione collaterale ma come parte integrante dellinterfaccia utente futura, perch nelle prossime periferiche in arrivo sul mercato la voce sar un elemento determinante. La chiave con cui accelerare i tempi di risposta tra input e output. Negli ultimi tre anni, Microsoft ha elaborato e utilizzato questa tecnologia soprattutto per applicazioni specifiche, pensate per le esigenze aziendali, e per accessori dedicati al settore automobilistico. Il sistema infotainment Kia UVO che verr installato sulle prossime Ford gi appare un dimostrazione di forza notevole, visto che con le parole possibile arrivare a gestire le funzioni dellautoradio e quelle del navigatore satellitare. Ma il colosso di Redmond ha intenzione di utilizzare questo canale di output in tanti altri ambiti consumer e includer i comandi via microfono anche in Kinect per Xbox 360 permettendo di controllare determinate funzioni della dashboard, come la riproduzione dei filmati, tramite luso delle corde vocali. Il keynote dello SpeechTEK 2010 ha comunque sottolineato la volont di inserire il riconoscimento vocale direttamente nel sistema operativo dei dispositivi Windows Phone 7 in uscita. Il sistema sar esteso alla gestione totale del telefono, quindi baster un ordine preciso pronunciato ad alta voce per chiamare un contatto, lanciare un applicazione, cercare una via sulla mappa o avviare una ricerca specifica su Bing. Caratteristiche che, almeno sulla carta, dovrebbero rendere il dispositivo Microsoft pi immediato rispetto ai concorrenti sugli scaffali dei negozi. Sui terminali Google Android infatti gi possibile attivare il sistema voice per qualunque applicazione che includa un campo di testo ma il sistema esige comunque luso del touch per attivazioni, conferme e correzioni, risultando alquanto macchinoso. Nelle ambiziose intenzioni di Microsoft c invece una totale scrematura dei passaggi che portano al raggiungimento del risultato e una modalit duso semplificata che sia basata esclusivamente sulle corde vocali dellutente.
h ttp :/ / w w w . i o p r o gr am m o.it
Ottobre 2010 / 11
NEWS
Oracle frena su OpenSolaris

U
n memo interno allazienda sembra confermare i timori della community: la distro open source di Solaris non sopravviver a Sun. Lo scoramento della community di OpenSolaris era stato anticipato da indizi che lasciavano ben poco spazio a interpretazioni pi ottimistiche: n laggressivit mostrata da Oracle nella denuncia a Google per Java, n il silenzio circa le sue intenzioni sugli altri prodotti open source acquisiti, facevano infatti ben sperare gli osservatori interessati. In poche parole: lapproccio di Sun stravolto, gli sforzi di distribuzione e programmazione saranno concentrati su Solaris, di community baster quella Linux e il resto del codice che sar distribuito con licenze open source probabilmente non sar completo e in ogni caso seguir a debita distanza la versione ufficiale. Il codice sorgente di Solaris finora stato rilasciato sotto una licenza denominata Community Development and Distribution License (CDDL): questa continuer ad essere utilizzata anche in futuro, ma condizionatamente ad alcuni controlli.Distribuiremo aggiornamenti con CDDL approvati o altri codici rilasciati con licenze open source, tuttavia ci accadr successivamente al rilascio del sistema operativo Solaris per le aziende. In questo modo le innovazioni appariranno nelle nostre versioni prima che da qualsiasi altra parte. Non distribuiremo pi codice sorgente per il SO Solaris in contemporanea al suo sviluppo. Firmato Mike Shapiro, Bill Nesheim, Chris Armes: il memo mette chiaramente gli ultimi chiodi sulla bara di OpenSolaris, Non rilasceremo altre distribuzioni binarie, n OpenSolaris 2010.05, n distribuzioni successive. A mantenere viva la speranza degli sviluppatori di OpenSolaris, per il momento scoraggiati dalle intenzioni di Oracle, altri progetti che continueranno ad utilizzare OpenSolaris, e che dovranno tentare di mantenere la compatibilit tra le loro versioni e il futuro Solaris di Oracle. Tra questi Illumos (sponsorizzato Nexenta, azienda che offre programmi di archiviazione basati su OpenSolaris e Linux), al cui lancio i promotori hanno affermato di non dipendere da Oracle e i cui programmatori stanno ora provvedendo a sostituire le componenti Solaris che non sono mai state rilasciare in open source.
PROBLEMI CON LA TECNOLOGIA? ECCO LE SOLUZIONI

T
echAssistance (www.techassistance.it) una community di tecnici specializzati sempre a tua disposizione per aiutarti a risolvere problemi di ogni tipo con i dispositivi elettronici che usi quotidianamente! Ecco alcune soluzioni ai problemi pi frequenti postati dagli utenti. Se invece sei tu ad essere in difficolt e vuoi ottenere aiuto immediato, collegati allhome page del servizio ed esponi il problema alla community: un team di esperti pronto a indicarti la soluzione pi adatta per risolverlo nel pi beve tempo possibile! unapplicazione ASP.NET. Private Sub Show(ByVal listView As ListView, ByVal dataArray As String(,)) listView.Items.Clear() For y As Integer = dataArray.GetLowerBound(1) To dataArray.GetUpperBound(1) Dim lvi As New ListViewItem For x As Integer = dataArray.GetLowerBound(0) To dataArray. GetUpperBound(0) If x = 0 Then lvi.Text = dataArray(x, y) Else lvi.SubItems.Add(dataArray(x, y)) End If Next listView.Items.Add(lvi) Next End Sub
Scorrere un Array in VB.NET
Allinterno di unapplicazione VB.NET vorrei visualizzare il contenuto di un array bidimensionale utilizzando listview. Vorrei sapere se possibile e, in caso affermativo, come trasformare larray in un elenco monodimensionale. Diciamo che data la mia matrice MyArray dim (2,10), vorrei visualizzarla verticlamente in una ListView. Potreste suggerirmi una soluzione? Gianluca
Ti riporto un metodo che dovrebbe fare al caso tuo. Come unica avvertenza, ti dico che stiamo considerando unapplicazione WinForms e che questa soluzione potrebbe avere bisogno di qualche modifica nel caso in cui la volessi implementare in
12 / Ottobre 2010
NEWS
Silverlight: oltre Html5

econdo Microsoft, Lo scopo di Silverlight non mai stato quello di sostituire HTML, quanto piuttosto quello di fare le cose che HTML (e altre tecnologie) non potevano in un modo che fosse facile da sfruttare per gli sviluppatori. Silverlight un estensione del linguaggio di scripting storico del web che permette limplementazione di applicazioni simil-desktop, la protezione dei contenuti, i video in 3D e lo streaming multimediale senza interruzioni. Microsoft convinta del fatto che HTML5 diverr ubiquo cos come HTML 4.01 lo attualmente, ed decisa a supportare la nuova iterazione dello standard attraverso lintroduzione in Internet Explorer 9. Ma HTML5 e CSS 3 continueranno sempre a renderizzare un web diverso da un browser allaltro, dice Becker, mentre le specifiche del nuovo HTML sono ancora in evoluzione e ci vorranno
News
INtel tI legge Il PeNSIerO
on si tratterebbe semplicemente della possibilit di captare gli stimoli cerebrali relativi ad un determinato movimento muscolare, ma proprio della possibilit di scrivere email o effettuare una ricerca su Internet solo visualizzando nella propria mente le parole da utilizzare. Per fare uscire lidea dalla fantascienza i ricercatori degli Intel labs starebbero pensando tracciando mappe dettagliate dellattivit cerebrale, trovando una corrispondenza tra parole pensate e stimoli trasmessi. Non c ancora nulla in produzione, ma lo studio pare sia in fase avanzata.
anni per vedere i risultati pratici per la totalit della Rete. Per Microsoft, aspettando il momento in cui HTML5 sar sfruttabile in massa, Silverlight si sar evoluto significativamente ed comunque gi qui, a disposizione di utenti e sviluppatori, e funziona in tutti i pi popolari browser e sistemi operativi.
AmIgA rINASce cON cOmmODOre USA
con rFID, Facebook entra nella realt

L
a tecnologia Radio Frequency IDentification (RFID), gi utilizzata per esempio per tessere di riconoscimento o carte di credito, questestate ha anche esordito nel mondo dei social network: stata infatti utilizzata per una versione nel mondo reale del Mi Piace di Facebook. A pensansare ad un utilizzo social dellRFID stata lazienda israeliana e-dologic che lha sperimentata nel centro estivo Coca Cola Village. Gli utenti sono stati dotati di un braccialetto con Tag RFID con i propri dati Facebook caricati, mentre nelle varie aree del villaggio vacanze sono state dislocate delle Like-Machine: avvicinando il braccialetto al lettore contenuto al suo interno, questa crea automaticamente un mi piace sul profilo dellutente per il luogo o lattivit specifica cos gradita da volerla spammare condividere con i propri amici. Oltre alle macchine con il pollice, il fotografo ufficiale del Coca Cola Village stato dotato di una macchinetta che in combinazione con i braccialetti permette di pubblicare e taggare automaticamente le foto.
o storico marchio Amiga di nuovo propriet di Commodore. Perlomeno di Commodore USA, societ a cui ancora mancano i diritti di sfruttamento del marchio Commodore - attualmente in gestione a Commodore International. Nellannunciare la nuova linea keyboard computer Amiga chiamata AIO (All In One), Commodore USA dice di voler supportare pienamente gli sforzi della community riunitasi attorno ad AROS con lelargizione di fondi che permetteranno al progetto di evolversi rapidamente e prendere il posto che merita alla guida dei sistemi operativi per desktop.
lg, le-PAPer PrONtA
G ha annunciato uno schermo e-paper grande, flessibile e leggero che evoca immediatamente la fantascienza. La tecnologia costituita da un lamina di metallo al posto del vetro che garantisce flessibilit e resistenza e permette di ottenere uno schermo epaper da 19 pollici, con uno spessore di appena 0,3 millimetri e un peso di 130 grammi. Anche le performance sembrerebbero allaltezza: oltre ad un alto livello di contrasto il fatto che necessita di energia solo per laggiornamento della pagina permette anche una durata della batteria molto elevata. Il progetto di LG di iniziare una produzione di massa di uno schermo da 11,5 pollici nella prima met del prossimo anno. E lidea corre immediatamente ad e-reader pensati appositamente per la lettura dei giornali...
Ottobre 2010 / 13
COVER STORY
Introduzione allambiente di sviluppo per Win Phone 7
SVILUPPARE PER WINDOWS PHONE 7

Q
CD WEB
ThinkAhead.IoProgrammo.zip
LA PROPOSTA MICROSOFT NEL MONDO DELLA TELEFONIA MOBILE ROMPE GLI SCHEMI CON IL PASSATO E SI PRESENTA COME UNA VERA RIVOLUZIONE PER QUANTO RIGUARDA LA USER EXPERIENCE E IL MODELLO DI SVILUPPO BASATO SU SILVERLIGHT E SUL RUNTIME XNA
uesto articolo ha lobiettivo di introdurre tutti coloro che vogliono essere parte della rivoluzione Microsoft nel mondo della telefonia mobile al nuovo ambiente di programmazione. Inizieremo con una descrizione delle caratteristiche hardware del dispositivo per poi concentrarci sulle feature del telefono stesso, prima di affrontare largomento principale, ovvero lo sviluppo di una semplice applicazione utilizzando gli strumenti di sviluppo, gratuiti, e il runtime di Silverlight. Nel corso dellarticolo vedremo insieme alcune specifiche per lo sviluppo di applicazioni.
IL DEVICE
A febbraio 2010, Microsoft ha reso pubbliche le sue intenzioni nel mondo della telefonia mobile e nei mesi successivi ha reso disponibili, gratuitamente, varie versioni CTP e Beta dellambiente di sviluppo. Il nome finale del prodotto Windows Phone 7 e, da tutti i punti di vista, il nuovo dispositivo rompe gli schemi con il passato, sia rispetto ai prodotti Microsoft stessi come Windows Mobile 6.5, sia rispetto ai diretti concorrenti. Anche il modo di presentare il prodotto nelle varie conferenze diverso rispetto al passato. Seguiamo lo sviluppo mobile dal 1997 quando acquistammo un device con a bordo Windows CE 1.0 in occasione della Microsoft Professional Developer Conference 97 a San Diego: neanche allora, quando, veniva lanciato un prodotto destinato ad un successo strepitoso e che tuttoggi fa da base per il nuovo device era stata data cos tanta enfasi alla presentazione come oggi accade per Windows Phone 7. Del nuovo device fondamentale comprenderne la filosofia di progettazione e le linee guida che hanno ispirato la nascita di questa nuova user experience. Con il termine user experien-
REQUISITI
Conoscenze richieste Conoscenza di .NET e Visual Studio Software necessario installare i Windows Phone Developer Tools, scaricabili gratuitamente a partire dallindirizzo http://tinyurl.com/ winp7dev Impegno
Tempo di realizzazione
ce, da qualche anno, si fa riferimento proprio allesperienza che lutente vive durante lutilizzo di un prodotto software. La user interface una delle componenti pi importanti della user experience, e non un suo sinonimo. La user experience (UX) riguarda il feeling dellutente con un sistema e comprende lesperienza, laffetto, il significato e il valore dellinterazione uomo-macchina e della propriet del prodotto stesso; inoltre, la percezione degli aspetti pratici e dellefficienza fanno parte dellesperienza dellutente. Il primo errore che pu fare lo sviluppatore di applicazioni per Windows Phone 7 ignorare queste linee guida, raccolte nel documento Application Phone UI Design and Interaction Guide, e progettare la user experience per la propria applicazione non in sintonia con il resto del device: non stiamo affermando che non possiamo avere fantasia e che le applicazioni saranno tutte uguali, anzi, stiamo affermando il contrario: le linee guida servono per evitare che lutente disperda il suo tempo alla ricerca di un tasto o di una funzionalit, servono per dare una base comune per facilitare lutilizzo delle applicazioni, riducendo i tempi di apprendimento e la dimensione delleventuale testo di help. Le applicazioni mobile sono utilizzate in contesti diversi rispetto alle applicazioni tradizionali. Lesempio pi classico : se lutente sta camminando e intanto usa il telefono, non possiamo fargli interrompere la passeggiata per farlo entrare in una opzione complicata da trovare o per costringerlo a leggere venti righe di testo di aiuto; se lutente si deve fermare non abbiamo scritto una buona applicazione e se invece lutente si distrae e attraversa la strada mentre legge... abbiamo fatto ancora peggio! Le linee guida si scaricano a partire da questo link http://developer.windowsphone.com/ windows-phone-7/, dove si trova anche una guida per la costruzione di siti web con inter-
14 / Ottobre 2010
COVER STORY
faccia mirata allo schermo e alla user experience con Windows Phone 7. Sempre a partire dal link indicato, troveremo altre due cose utilissime: la prima la documentazione sulla piattaforma che andremmo a introdurre da subito e la seconda, sono gli strumenti, gratuiti, per sviluppare applicazioni.
LA PIATTAFORMA
Per piattaforma si intende linsieme delle caratteristiche hardware e software che compongono il device: lutente finale utilizzer il telefono sfruttando le caratteristiche hardware (si pensi alla fotocamera digitale o al sistema GPS) e utilizzando il software presente sul device. Il sistema operativo del telefono , come accennato allinizio dellarticolo, una versione di Windows CE su cui installata una versione del .NET Compact Framework. Il .NET Compact Framework non per utilizzabile direttamente dagli strumenti di sviluppo, in quanto il codice si appoggia, tramite le classiche reference nei progetti, alle librerie di Silverlight o del Framework XNA. Da quando stato presentato Windows Phone 7, Silverlight non pi soltanto il potente runtime per applicazioni web, ma diventato anche lambiente di programmazione per le applicazioni mobile oltre al runtime che far girare il codice sul device. Rispetto allambiente Silverlight tradizionale, in cui le applicazioni vengono raggiunte dallutente da un browser e possono poi essere installate in locale e fatte girare fuori dal browser stesso, nellambiente Windows Phone 7 le applicazioni si installano dal Marketplace. Il software che sviluppiamo deve essere infatti inviato al Marketplace (come accadeva per Windows Mobile nel caso di applicazioni da distribuire al pubblico), che ne controlla la validit e laderenza alle specifiche per poi renderlo disponibile allacquisto o al semplice download nel caso di applicazioni gratuite o versioni trial, gestendo tutti gli aspetti di commercializzazione, compresa leventuale pubblicit e le statistiche di vendita. Le nostre applicazioni possono sfruttare le librerie messe a disposizione dalla piattaforma di sviluppo per interagire con la piattaforma stessa. Ad esempio possibile utilizzare le classi della libreria System.Net in quanto esposte dal runtime di Silverlight per effettuare richieste HTTP, cos come possibile interagire con i dispositivi hardware come il GPS o laccelerometro tramite, rispettivamente, la libreria System.Device e System.Device.Sensors. Se non avete a disposizione un device, cosa
probabile alluscita di questo articolo, vi consigliamo di fare una passeggiata su Channel 9 (channel9.msdn.com), dove sono disponibili vari filmati introduttivi che mostrano praticamente quasi tutte le funzionalit del telefono e linterazione dellutente con la stessa. Linsieme delle funzionalit hardware e software esposte allo sviluppatore riassunto in Fig.1, presa direttamente dalla documentazione installabile a partire dal link indicato. Come abbiamo accennato, nella parte in alto a sinistra, troviamo i due runtime, il primo dei quali, Silverlight, destinato ad applicazioni tradizionali, ovvero applicazioni la cui interfaccia utente sia basata sul classico paradigma di pagine che lutente pu navigare e su cui interagisce tramite controlli quali TextBox, ListBox e cos via. Il runtime di XNA nasce invece per sviluppare giochi, ma non da sottovalutare per gestire animazioni complesse o interazioni complesse dellutente con il device. In realt sarebbe possibile creare un gioco in Silverlight (ne troviamo diversi sul web) e una applicazione pi tradizionale in XNA, ma le librerie e soprattutto il modo di sviluppare dei due ambienti si adattano meglio per servire il compito per cui sono nate. Come si pu notare sempre dal riquadro in blu, entrambi gli ambienti hanno a disposizione una serie di librerie comuni come i sensori del telefono, il supporto alle notifiche push e possono utilizzare le API della libreria Microsoft. Phone per interagire con le funzionalit del telefono. Nel riguadro verde, troviamo invece strumenti di sviluppo gi disponibili da tempo in ambiente Desktop: Visual Studio, destinato agli sviluppatori ed Expression Blend, destinato ai designer. Visual Studio non ha bisogno di presentazioni, cos come Blend ormai il prodotto con cui si realizzano le interfacce utente per applicazioni WPF e Silverlight da qualche anno.
NOTA
ARCHITETTURA APPLICAZIONI
Windows Phone 7, nella sua prima versione, offre uno spazio per la memorizzazione dei dati denominato Isolated Storage. Il codice per utilizzare lIsolated Storage segue le stesse tecniche di qualunque applicazione Silverlight. Nelle versioni successive potremmo avere supporti locali pi evoluti, quindi, per evitare di riprogettare lapplicazione o modi carla pesantemente, consigliabile utilizzare una forma di disaccoppiamento fra la user interface, lo strato di logica di business e laccesso ai dati. Questo disaccoppiamento consente di sostituire un singolo componente, nel nostro caso ad esempio laccesso al supporto di memorizzazione, senza dover modi care una sola riga nello stato UI o nel Business Layer. Si veda il blog (http://blogs.devleap. com/rob) per informazioni sullarchitettura delle applicazioni.
Fig. 1: Quadro riassuntivo della piattaforma di sviluppo
Ottobre 2010 / 15
COVER STORY
NOTA
USER EXPERIENCE
Spesso lo sviluppatore sottovaluta molti degli aspetti legati alla user interface e alla user experience: non intendiamo dire che non sia in grado di costruire user interface carine o accattivanti, ma che sottovaluti limportanza di aderire alle linee guida della piattaforma. Su una interfaccia di dimensioni ridotte e su un dispositivo che fa della user experience un suo punto di forza fondamentale rispettare le linee guida: vi consigliamo caldamente di leggere la UI Design & Interaction Guide che trovate a partire dalla home page per gli sviluppatori http://developer.windowsphone.com/ windows-phone-7/.
Gli strumenti di sviluppo comprendono anche un emulatore e una tonnellata di esempi completi o esempi da costruire passo passo, e la documentazione sullintera piattaforma. Sul device (e sullemulatore) ovviamente presente un browser internet, per la precisione una versione di Internet Explorer allineata alle funzionalit della versione 7 presente sul desktop, quindi possibile optare anche per la scrittura di applicazioni web, magari ospitate su una piattaforma di cloud computing come Windows Azure di cui abbiamo avuto modo di parlare in vari articoli apparsi nei numeri precedenti. Le varie possibilit offerte dalla nuova piattaforma comprendono : 1. Silverlight 3 (con alcune feature della versione 4) per la creazione di moderne user interface basate su eventi 2. XNA per realizzare giochi e animazioni complesse 3. HTML/XHTML/AJAX/JQuery per applicazioni web basate su Internet Explorer 4. Applicazioni miste in cui, ad esempio, la parte principale scritta in Silverlight, ma sfrutta alcune animazioni fatte con XNA e per alcuni contenuti web sfrutta il controllo Web Browser. Tranne nel caso di applicazioni basate su browser, possibile utilizzare le API presenti sul telefono e una serie di servizi esposti da
Microsoft su internet, per la precisione tramite applicazioni basate su Windows Azure che consentono di utilizzare il sistema di gestione degli utenti, le mappe, i servizi di localizzazione, meccanismi per inviare notifiche allutente e, non ultimi, i servizi esposti da Xbox Live.
IL MERCATO DI RIFERIMENTO
La distribuzione delle applicazioni viene fatta tramite Windows Phone Marketplace che, da svariati anni, il contenitore in cui pubblicare e pubblicizzare le applicazioni rivolte al pubblico. Non possibile, almeno per adesso, installare una applicazione direttamente su un device, se non per portarne avanti lo sviluppo. Lapproccio molto simile a Windows Mobile, dove, da sempre necessario firmare le applicazioni con il certificato del marketplace per renderle sicure e installabili senza blocchi di security sui vari device. Si possono fare paragoni anche con le piattaforme concorrenti come iPhone e Android. Ogni applicazione installata gira in modo isolato dalle altre con lo stesso paradigma utilizzato da Silverlight su piattaforma web: possibile appoggiare dati e impostazioni applicative sullIsolated Storage senza doversi preoccupare di gestire lo spazio dati su disco per le varie applicazioni. Isolated Storage consente di memorizzare settaggi applicativi persistenti e temporanei. Le caratteristiche hardware possono essere diverse da device a device in base alle scelte del produttore, ma necessario che il device rispetti linsieme delle caratteristiche minime definite dalle specifiche per poter essere considerato un device Windows Phone 7. Microsoft ha scelto infatti una strada pi aperta rispetto a Apple che fornisce anche lhardware. Ad oggi sono previsti (e su internet si trovano varie immagini) device LG, Samsung e HTC. Avremo quindi la possibilit di scegliere il device che pi ci piace o che si adatta maggiormente alle nostre esigenze (con tastiera o senza, con pi storage o meno), ma dal punto di vista dello sviluppatore, avremo a disposizione uninsieme di caratteristiche comuni su cui poter contare. Ad esempio lo schermo sar sempre 480x800 (dimesioni in Portrait), avremmo a disposizione una quantit di RAM che farebbe impallidire un classico notebook di 3 anni fa, una fotocamera digitale, un servizio GPS, una scheda Wi-Fi, laccelerometro e altre caratteristiche
Fig. 2: Applicazioni in fase di sviluppo: menu start e menu programmi
16 / Ottobre 2010
COVER STORY
che vi consigliamo di controllare dopo luscita della versione finale degli strumenti che, essendo prevista per il 16 settembre, dovrebbero gi essere disponibili quando leggerete questo articolo. Iniziamo a costruire una semplice applicazione e poi proveremo ad utilizzare qualche API esposta dalla piattaforma.
PARTIRE CON IL PIEDE GIUSTO

I vari template creano un classico progetto Visual Studio 2010 contenente una serie di reference verso le librerie che abbiamo inquadrato nella prima parte dellarticolo, una pagina principale denominata MainPage.xaml, il classico file App.xaml e relativo code-behind per la definizione delle risorse e del codice dellapplicazione e, non ultime, tre immagini. La prima immagine, ApplicationIcon.png consente di definire licona dellapplicazione, Background.png invece, a discapito del suo nome, licona per la defizione del Tile dellapplicazione (ovvero licona pi grande da utilizzare nella schermata principale se lutente decide di inserire lapplicazione nel menu start), SplashScreen.png invece la schermata che viene utilizzata durante la partenza dellapplicazione stessa. Per darvi una idea, in Fig.2 ci sono due screenshot dellemulatore: a destra la schermata iniziale, dove sono ospitate tre applicazioni reali che stiamo sviluppando, e a sinistra la schermata di riepilogo di tutte le applicazioni installate. Lutente pu decidere di spostare una applicazione nella schermata principale, effettuando il tap sullapplicazione e scegliendo pin to start dal menu contestuale. ThinkAhead. IoProgrammo invece lesempio che stiamo costruendo in questo articolo. Tornando subito al codice creato dal template di progetto, oltre alle pagine che ospiteranno la definizione della user interface, nella directory Properties viene inserito un file fondamentale per lapplicazione stessa. La definizione dei nomi delle risorse, come le immagini appena descritte, del titolo dellapplicazione, del tile da usare nella schermata principale sono infatti ospitate nel file WMAppManifest.xml. Questo file contiene anche le capabilities dellapplicazione, ovvero le feature del telefono che lapplicazione desidera utilizzare. Ogni applicazione deve dichiarare se accede alla rete oppure ai servizi di notifiche o ancora se utilizza il phone dialer.
<?xml version=1.0 encoding=utf-8?> <Deployment xmlns=http://schemas. microsoft.com/windowsphone/2009/deployment AppPlatformVersion=7.0> <App xmlns= ProductID={c0aeef79-341e4485-9e60-87edee5fbdfb} Title=ThinkAhead.IoProgrammo RuntimeType=Silverlight Version=1.0.0.0
NOTA
GLI STRUMENTI DI SVILUPPO

Se avete una versione di Visual Studio 2010 gi presente sulla macchina, linstallazione degli strumenti di sviluppo aggiunge una serie di template per la creazione di applicazioni Windows Phone 7 sia per il runtime di Silverlight che per lambiente XNA. Se non avete una versione di Visual Studio 2010 installata, nessun problema, verr installata contestualmente la versione gratuita, demoninata Express for Windows Phone 2010 che comprende tutto il necessario per sviluppare. Ovviamente la versione Express non ha gli strumenti della versione Ultimate di Visual Studio, ma consente di sviluppare con le stesse feature della versione Express tradizionale applicazioni Silverlight e XNA per Windows Phone 7. Linstallazione degli strumenti di sviluppo in entrambe le forme, attiva anche linterazione con lemulatore su cui possibile testare le applicazioni tramite il classico F5 da Visual Studio. Gli strumenti installati prevedono anche, oltre alla versione Express di Blend 4 per la parte di disegno delle applicazioni, anche lApplication Deployment, in grado di installare su emulatore o device fisico una applicazione compilata nel classico package XAP, e il Phone Registration Tool che consente di sbloccare un device fisico per linstallazione di applicazioni in test. Negli esempi che seguono costruiremo una semplice applicazione Silverlight per Windows Phone 7 e poi vedremo allopera il controllo Panorama. Per prima cosa occorre creare un progetto scegliendo uno dei template Windows Phone nella sezione Silverlight for Windows Phone. Nella versione attuale, i progetti disponibili prevedono una applicazione Portrait o una applicazione Landscape (il supporto alla rotazione poi gestibile allinterno dellapplicazione), una dll per Windows Phone, ovvero il classico assembly .NET dove inserire il codice riutilizzabile da pi applicazioni, e due applicazioni basate su due nuovi controlli specifici della piattaforma: Panorama e Pivot.
BLOG, FORUM E ESEMPI

La community www.thinkmobile.it, nata in occasione della prima conferenza italiana sullo sviluppo mobile nel luglio di cinque anni fa, da aprile 2010 ha aperto una nuova sezione dedicata a Windows Phone 7: sono disponibili forum speci ci per trattare lo sviluppo, vari blog che forniscono informazioni continue sulle novit per gli sviluppatori e nella sezione media si trovano numerosi esempi sullutilizzo dei sensori e delle varie funzionalit del device.
Fig. 3: Visual Studio Designer: linterfaccia delle applicazioni segue la metafora della navigazione Web, per cui si pu sempre tornare alla schermata precedente con un tap sul pulsante back
Ottobre 2010 / 17
COVER STORY

Genre=apps.normal
Author=ThinkAhead Description=Sample description Publisher=ThinkAhead> <IconPath IsRelative=true IsResource=false> ApplicationIcon.png</IconPath> <Capabilities> <Capability Name=ID_CAP_GAMERSERVICES/> <Capability Name=ID_CAP_IDENTITY_DEVICE/> <Capability Name=ID_CAP_IDENTITY_USER/> <Capability Name=ID_CAP_LOCATION/> <Capability Name=ID_CAP_MEDIALIB/> <Capability Name=ID_CAP_MICROPHONE/> <Capability Name=ID_CAP_NETWORKING/> <Capability Name=ID_CAP_PHONEDIALER/> <Capability Name=ID_CAP_PUSH_ NOTIFICATION/> <Capability Name=ID_CAP_SENSORS/> <Capability Name=ID_CAP_ WEBBROWSERCOMPONENT/> </Capabilities> <Tasks> <DefaultTask Name =_default NavigationPage=MainPage.xaml/> </Tasks> <Tokens> <PrimaryToken TokenID=ThinkAhead. IoProgrammoToken TaskName=_default> <TemplateType5> <BackgroundImageURI IsRelative=true IsResource=false>Background.png</ BackgroundImageURI> <Count>0</Count> <Title>ThinkAhead.IoProgrammo</Title> </TemplateType5> </PrimaryToken> </Tokens> </App> </Deployment>
DEFINIRE LASPETTO
Il nuovo progetto, appena aperto, presenta il designer Silverlight che, come per le applicazioni web, divide il codice XAML dal designer visuale. Abbiamo solamente modificato il titolo dellapplicazione e il titolo della pagina principale (MainPage.xaml) nellestratto di codice seguente:
<phone:PhoneApplicationPage x:Class=ThinkAhead.IoProgrammo.MainPage xmlns=http://schemas.microsoft.com/winfx/2006/ xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/ xaml xmlns:phone=clr-namespace:Microsoft.Phone. Controls;assembly=Microsoft.Phone xmlns:shell=clr-namespace:Microsoft.Phone. Shell;assembly=Microsoft.Phone xmlns:d=http://schemas.microsoft.com/expression/ blend/2008 xmlns:mc=http://schemas.openxmlformats.org/ markup-compatibility/2006 mc:Ignorable=d d:DesignWidth=480 d:DesignHeight=768 FontFamily={StaticResource PhoneFontFamilyNormal} FontSize={StaticResource PhoneFontSizeNormal} Foreground={StaticResource PhoneForegroundBrush} SupportedOrientations=Portrait Orientation=Portrait shell:SystemTray.IsVisible=True>  <Grid x:Name=LayoutRoot Background=Transparent> <Grid.RowDenitions> <RowDenition Height=Auto/> <RowDenition Height=*/> </Grid.RowDenitions>  <StackPanel x:Name=TitlePanel Grid.Row=0 Margin=12,16,0,27> <TextBlock x:Name=ApplicationTitle Text=THINKAHEAD FOR IOPROGRAMMO Style={StaticResource PhoneTextNormalStyle}/> <TextBlock x:Name=PageTitle Text=main Margin=9,-8,0,0 Style={StaticResource PhoneTextTitle1Style}/> </StackPanel>  <Grid x:Name=ContentPanel Grid.Row=1 Margin=12,0,12,0/>
Fig. 4: Il primo test della nostra nuova app
Fig. 5: Software Input Panel (SIP)
Nel codice precedente possibile notare la definizione dellapplicazione ThinkAhead. IoProgrammo, il runtime di tipo Silverlight, la versione e il tipo di applicazione, alcune informazioni su autore, descrizione e publisher. Licona applicativa definita immediatamente sotto la definizione dellapplicazione e precede a sua volta la definizione, lasciata ai valori di default, delle capabilities. Nella sezione Task vediamo il puntatore alla pagina di default (MainPage.xaml) che stata creata allinterno del progetto e che andremo a descrivere fra un attimo. Chiude il file la definizione del Tile di default, ovvero il puntatore al titolo, allimmagine e ad un eventuale contatore di notifiche che il dispositivo utilizzer quando lutente decide di effettuare il pin to start dellapplicazione.
18 / Ottobre 2010
COVER STORY
Fig. 6: Codice reale XAML del controllo Panorama
</Grid>   </phone:PhoneApplicationPage>
sante back, rappresentato in basso a sinistra anche nella finestra di design di Visual Studio 2010 mostrata in Fig. 3. La seconda informazione importante che si evince dal codice della pagina principale lutilizzo del costrutto StaticResource per le varie impostazioni grafiche della pagina. Ogni elemento proposto dal template viene rappresentato secondo uno stile; lo stile ha lo scopo di centralizzare la
Molti sono gli elementi da comprendere nel codice della maschera prima di iniziare a costruire la nostra user interface: per prima cosa importante notare che ci troviamo allinterno di una PhoneApplicationPage. Questa classe si trova nellassembly Microsoft.Phone e rappresenta il contenitore di controlli per questa maschera: ogni maschera viene rappresentata da una pagina, in quanto lutente si muove da una pagina allaltra e ha la possibilit, come ormai ci ha abituato il web, di ripercorrere la sua navigazione allindietro tramite il pul-
Fig. 7: Il controllo Panorama in una applicazione reale
Ottobre 2010 / 19
COVER STORY
Fig. 8: Phone Call da codice
definizione delle informazioni di layout e presentazione in modo da renderne pi semplice la modifica a posteriori. Nel caso del template base di Visual Studio, le risorse, contrariamente alle prime beta di cui abbiamo parlato in articoli precedenti, vengono centralizzate allinterno delle librerie referenziate, ma possibile modificarle allinterno, ad esempio, del file App.xaml. Una successiva modifica al file App.xaml si riflette in tutte le pagine della nostra applicazione. La terza cosa da notare nel listato di codice XAML la presenza di un controllo Grid per definire il layout della pagina. La griglia divide il contenuto in due righe, la prima delle quali destinata al titolo e sottotitolo della pagina stessa; anche queste informazioni sono posizionate allinterno di una griglia (TitleGrid) che si posiziona a sua volta nella prima riga sfruttando la propriet Row della Grid LayoutRoot. La griglia posizionata nella seconda riga della griglia principale a nostra disposizione per il disegno della pagina. Chiude il listato una parte commentata in cui viene proposta la Application Bar, ovvero, la modalit con cui presentare allutente le azioni da fare sulla pagina corrente. La Application Bar rappresenta il menu contestuale della pagina dove proporre allutente le azioni possibili. Utilizzando il designer di Visual Studio, oppure direttamente il codice XAML, o anco-
ra Microsoft Expression Blend 4 (incluso nel setup degli strumenti), possiamo posizionare qualche controllo nella pagina per provare a verificarne il funzionamento sullemulatore. Tralasciamo in questo primo articolo qualunque elemento grafico o di impaginazione, andando a posizionare i controlli direttamente nella griglia. Aggiungiamo, come esempio, il codice seguente per preparare una listbox con le applicazioni che stiamo sviluppando.
<Grid x:Name=ContentPanel Grid.Row=1 Margin=12,0,12,0> <ListBox Height=244 HorizontalAlignment=Left Margin=14,31,0,0 Name=appListBox VerticalAlignment=Top Width=460> <ListBoxItem Content=kiss and hug /> <ListBoxItem Content=kind love /> <ListBoxItem Content=save the planet /> </ListBox> </Grid>
Immediatamente sotto la listbox inseriamo un TextBox e un pulsante per aggiungere altre applicazioni alla lista:
<Button Content=Aggiungi HorizontalAlignment=Left Margin=1,344,0,0 Name=addButton VerticalAlignment=Top Width=445 /> <TextBox HorizontalAlignment=Left Margin=6,266,0,0 Name=applicationTextBox Text= VerticalAlignment=Top Width=440 />
Facendo doppio clic sul pulsante aggiungi (addButton) Visual Studio o Blend ci preparano levent handler nel code behind della pagina xaml dove aggiungeremo un nuovo elemento a appListBox con il contenuto della propriet Text del controllo applicationTextBox. possibile generare gli event handler anche dal designer del codice XAML semplicemente digitando Click= per poi premere il tasto Tab che, come suggerisce lintellisense, consente di creare tutto il necessario per agganciare levento con il metodo che scriveremo nel code behind.
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation;
Fig. 9: Interfaccia in azione con il Phone Number Chooser
20 / Ottobre 2010

using System.Windows.Shapes; using Microsoft.Phone.Controls; namespace ThinkAhead.IoProgrammo { public partial class MainPage : PhoneApplicationPage { // Constructor public MainPage() { InitializeComponent(); } private void addButton_Click(object sender, RoutedEventArgs e) { appListBox.Items.Add(textBox1.Text); } } }
COVER STORY
COSA SUCCEDE DIETRO LE QUINTE

Il code behind semplice e, come Visual Studio ci ha abituati sin dalla versione 2002, prevede una derivazione dalla classe base del form, in questo caso una page rappresentata dalla classe PhoneApplicationPage (la stessa indicata nel file MainPage.xaml che abbiamo analizzato in precedenza), lutilizzo di un costruttore che verr autogenerato nel file mainpage.g.cs, oltre al codice del metodo addButton_Click che abbiamo inserito noi per gestire linserimento dellelemento nella listbox. Provando a digitare la keyword override noterete vari metodi utilizzabili per entrare nel ciclo di vita di una pagina, come ad esempio OnNavigatingFrom e OnNavigatedFrom per intercettare la navigazione verso altre pagine, OnNavigatedTo per intercettare la navigazione verso questa pagina, OnBackKeyPress per intercettare la pressione del tasto back, tasto che sar presente obbligatoriamente su tutti i device Windows Phone 7. Non ci resta che premere F5 per vedere il nostro lavoro sullemulatore: Visual Studio si preoccupa di attivare lemulatore, effettuare il deploy dellapplicazione e il debug dellapplicazione stessa (provare a metttere un breakpoint per verificarne il funzionamento). A destra, in verticale, sono rappresentate una serie di informazioni di debug rispetto alla user interface. Lapplicazione dovrebbe presentarsi (pixel pi, pixel meno) come in Fig. 4. Abbiamo aggiunto Office fra le applicazioni tramite la TextBox e la pressione del nostro pulsante per
verificare il funzionamento del codice introdotto nella pagina. Come abbiamo accennato, le librerie Microsoft offrono una serie di risorse per indicare lo stile di default dei vari controlli che possiamo utilizzare nella user interface. Selezionando ad esempio un elemento nella listbox, questa assume lo stile di default che riprende lo stile che lutente ha scelto per il suo device. Tutti i campi in cui lutente pu inserire del testo, quando ottengono il focus, presentano il Software Input Panel (SIP) che, chi lavora in ambiente mobile conosce molto bene sin dai tempi di Embedded Visual Basic (eVB). Lidea semplificare la digitazione dei dati visto che lutente usa spesso il device in condizioni di movimento o mentre pu essere distratto delle condizioni dellambiente in cui si trova. La Fig. 6 mostra lemulatore durante la scrittura del testo in un campo textbox. Lemulatore consente di eseguire altre operazioni come la rotazione dello schermo, lavvio di Internet Explorer, lo zoom e, come vedremo nei prossimi articoli, molte funzionalit nascoste dai menu della interfaccia utente. Questo semplice esempio ha messo in evidenza linterfaccia proposta per una applicazione fatta di varie pagine in cui lutente naviga attraverso le funzionalit applicative. A fianco a questa modalit di navigazione sono stati proposti su CodePlex sin dalle prime beta e previsti per la versione RTM allinterno del prodotto, due controlli che gli esperti di user experience definiscono come killer control. Si tratta di Panorama e Pivot. Il primo, Panorama, come indica il termine stesso, viene usato per presentare allutente un panorama: si pensi al panorama nel pi classico dei significati, dove presentare vari scorci, ognuno delle quali presenta informazioni allutente e fa parte del panorama stesso. Lutente pu interagire con i vari scorci effettuando lo scrolling direttamente dallinterfaccia.
LA BELLEZZA DEL PANORAMA

Visto che lapplicazione localizzata in pi lingue, abbiamo utilizzato il binding verso le nostre risorse localizzate (con un classico converter Silverlight) per le intestazioni e i vari TextBlock inseriti nel primo PanoramaItem. Il controllo Panorama consente di impostare un titolo per lapplicazione visto che il controllo occupa lintera superficie dello schermo, consente di intercettare tramite leven-
Ottobre 2010 / 21
COVER STORY

private void numberChooser_Click(object sender, RoutedEventArgs e) { PhoneNumberChooserTask task = new PhoneNumberChooserTask(); task.Show(); }
Fig. 10: Save Phone Number Task
GLI AUTORI Roberto e Luca sono consulenti che operano nel mondo .NET sin dalla presentazione dellambiente nel luglio 2000. Luca specializzato nella de nizione della user interface, mentre Roberto si dedica allarchitettura e prestazioni della soluzione. La loro azienda, we.ThinkAhead.it, societ del gruppo DevLeap, specializzata nella realizzazione di soluzioni cloud-based su Windows Azure, applicazioni WPF/Silverlight e applicazioni mobile sia per Windows Mobile 6.5 che per Windows Phone 7. Sul sito si trovano i riferimenti ai progetti e alle aree tecnologiche coperte.
to SelectionChanged lo scrolling dellutente, e ha una immagine di sfondo denominata PanoramaBackground.png. Nel nostro caso limmagine alta 800 pixel, come lo schermo del telefono, e larga 1850 pixel in modo da formare il panorama in cui lutente pu spostarsi. I cinque elementi interni (da 0 a 4) contengono le varie interfacce dei 5 scorci di panorama, come si nota nella Fig. 7 dove sono state affiancate la pagina 4 (ovvero lultima) alla pagina 0 (ovvero la prima). Come si pu notare, la pagina a sinistra presenta il suo contenuto, ha il titolo dellapplicazione allineato in alto, e, lascia intendere che esiste un secondo scorcio del panorama alla sua destra. Quando lutente trascina la pagina verso sinistra, cosa possibile anche con lemulatore nel caso in cui si utilizzi un PC con schermo touch, il panorama scorre e mostra lo scorcio a destra, dal titolo summary, togliendo lo scorcio settings dalla vista dellutente. A sua volta la pagina summary e lascia intendere la presenza a destra di uno scorcio successivo. Lutente pu anche tornare indietro ripercorrendo il panorama scoperto. Il controllo Pivot invece il classico Tab Control in chiave moderna: utilizzabile sfruttando le stesse gesture del controllo Panorama e, in pi, consente di cliccare sul tab per scegliere una voce: ne parleremo in un prossimo articolo. Chiudiamo vedendo alcune API che consentono di interagire con le feature del telefono. Non occorrono reference aggiuntive in questa versione.
private void dialButton_Click(object sender, RoutedEventArgs e) { PhoneCallTask task = new PhoneCallTask(); task.DisplayName = From ThinkAheadApp; task.PhoneNumber = 055-1111111; task.Show(); }
Altre Task consentono di memorizzare informazioni sul telefono, come ad esempio un numero di telefono, attraverso gli oggetti relativi. Nel codice seguente il salvataggio di un numero di telefono da una applicazione e in Fig. 10 lo screenshot relativo.
private void savePhone_Click(object sender, RoutedEventArgs e) { SavePhoneNumberTask task = new SavePhoneNumberTask(); task.PhoneNumber = 055-1111111; task.Show(); }
Sul sito www.thinkmobile.it sono disponibili esempi monotematici sullutilizzo di Acceletometro, ApplicationBar, InputScope, IsolatedStorage, Location Service, PushNoti cation e Manipulation. Sul sito trovate anche mini-articoli di una solo pagina con esempi mirati e forum per scambiare informazioni sullo sviluppo mobile. In questo primo articolo abbiamo cercato di evidenziare da una parte le caratteristiche pi importanti del nuovo Windows Phone 7 e dallaltra cercato di fornire i passi per la creazione di una semplice applicazione.
CONCLUSIONI, E AVVERTENZE...
Ribadiamo il consiglio che abbiamo dato qualche mese fa sulla prima beta degli strumenti: chiunque arrivi da Windows Mobile 6.x o da Windows CE e ha lavorato per anni con Windows Forms, di capire a fondo XAML e Silverlight prima di scrivere la prima vera applicazione. Silverlight in realt riprende una serie di idee e concetti venuti alla luce con Windows Presentation Foundation (WPF) nel lontano 2006, quando, a novembre, fu rilasciata la prima versione; senza fare il salto mentale verso questi ambienti si rischia di usare un ambiente estremamente potente come Silverlight al 10 percento delle sue possibilit, potenzialit e manutenibilit. Roberto Brunetti e Luca Regnicoli
Non possibile attivare la chiamata direttamente da una applicazione, almeno in questa prima release. Il PhoneCallTask consente di attivare la maschera nativa che lutente utilizzerebbe per effettuare una chiamata precompilata con le due informazioni che appaiono normalmente. Un secondo Task, che come si nota dal codice seguente, ha il suffisso Chooser consente invece di attivare la scelta di un contatto dalla maschera nativa del device, far scegliere allutente (da qui il nome Chooser) un contatto e ottenere il numero di telefono.
22 / Ottobre 2010
WEB 2.0
Introduzione a jQuery
IL WEB DINAMICO FACILISSIMO!

I
CD WEB
JQ1.rar
JQUERY IL NOME DEL FRAMEWORK CHE STA RIVOLUZIONANDO LO SVILUPPO JAVASCRIPT. GRAZIE A JQUERY POSSIBILE FARE IN UNA SOLA ISTRUZIONE CI CHE IN PASSATO RICHIEDEVA DECINE DI RIGHE DI CODICE: SCOPRI COME APPROFITTARNE NELLE TUE APP
REQUISITI
Conoscenze richieste HTML, CSS, JavaScript Software Web Browser ed un editor HTML, CSS e Java Impegno
n principio il Web era statico, costituito da documenti HTML sempre uguali, che lutente poteva consultare attraverso il proprio browser. Poi, gradualmente, il Web si trasformato da una collezione di documenti ad un canale per lerogazione di vere e proprie applicazioni. Tecnologie come CGI, PHP e ASP, per prime, hanno reso possibile la generazione dinamica lato server delle pagine HTML, cos da poter o rire allutente dei documenti costruiti ad hoc secondo le sue esigenze e le sue richieste. Lato client si parallelamente assistito ad un processo di evoluzione analogo: grazie alla tecnologia di base JavaScript, con uita poi nei pi ampi calderoni di DHTML e AJAX, stato possibile far interagire lutente con documenti Web dotati di pulsanti, animazioni, layer interattivi e cos via. Al giorno doggi, le applicazioni Web hanno ben poco da invidiare alle applicazioni desktop. I browser si fanno guerra a colpi di nuovi interpreti JavaScript, sempre pi completi e veloci, per poter o rire allutente la migliore esperienza possibile nel settore delle web-app. Per realizzare unapplicazione Web moderna, ad ogni modo, servono comunque parecchie conoscenze, visto che non tutte le tecnologie che appartengono a questa sfera sono state amalgamate. Dal punto di vista dellinterfaccia utente, in particolar modo, bisogna sapere costruire un layout HTML da fare poi interagire con lutente attraverso uno strato di logica espresso in JavaScript. Il problema che JavaScript un linguaggio di scripting cresciuto a strati. I browser, oggi come ieri, non sempre o rono le medesime funzionalit, e spesso si nisce per dover scrivere pi versioni di erenti dello stesso script, ognuna dedicata ad uno speci co browser. Ci si mette pure il fatto che, con JavaScript, certe operazioni di base, come le animazioni o la gestione degli eventi, non sono proprio intuitive da realizzare, indipendentemente dal browser utilizzato. Per facilitare la vita degli sviluppatori JavaScript, nel corso del tempo sono state realizzate una serie di librerie in grado di smussare i difetti dellambiente. Tra tutte queste, jQuery una di quelle di maggior pregio e di pi ampia adozione. In questo articolo conosceremo jQuery e ne esploreremo i pregi e le modalit duso, in modo da rendere pi semplice e divertente la creazione di interfacce utente Web interattive.
INTRODUZIONE A JQUERY
Prima di immergerci nello studio sistematico del framework, cerchiamo di capire innanzitutto in cosa consiste jQuery e quali signi cativi vantaggi possa apportare allo sviluppo delle nostre applicazioni Web. La libreria, ma sarebbe meglio dire il framework, nasce nel 2006 ad opera di John Resig, un giovanissimo programmatore americano, con lintento di sempli care lo sviluppo cross-browser delle applicazioni JavaScript. La libreria guadagna velocemente consensi e nuove funzionalit. Oggi sono davvero poche le web-app professionali che non utilizzano jQuery, e non c libreria JavaScript del medesimo genere che possa competere in popolarit con quella di John Resig. Entrare nel mondo di jQuery molto semplice. Prima di iniziare un esame sistematico, per renderci meglio conto di cosa si stia parlando, analizziamo un esempio concreto di codice jQuery:
$(div.invisibile).addClass(popup).show(slow);
Questa semplice istruzione, di cui presto comprenderemo ogni parte, svolge i seguenti compiti:
Individua, nel documento corrente, tutti i tag <div> Aggiunge ai <div> individuati la classe CSS popup. Fa apparire i <div> individuati con un e etto di animazione eseguito lentamente. Grazie a jQuery, insomma, con una sola riga di codice possibile svolgere operazioni complesse che, altrimenti, avrebbero richiesto un lungo codice JavaScript. con classe CSS invisibile.
DOWNLOAD ED INSTALLAZIONE
Il primo passo necessario per lutilizzo di jQuery nelle proprie applicazioni Web il download e linstallazione della libreria allinterno delle pagine HTML che compongono la propria web-app. Il sito di riferimento u ciale di jQuery disponibile allindirizzo: http://jquery.com/ Potete scegliere fra due versioni: la production e la
24 / Ottobre 2010
WEB 2.0
development. In entrambi i casi si tratta di un le .js che dovrete salvare sul vostro hard disk. La versione development presenta un sorgente ben indentato e facilmente leggibile. Potete utilizzarla per studiare il codice di jQuery, o anche per eseguire del debug allinterno della libreria stessa, nel caso in cui vi trovaste in di colt con qualche script. La versione production, invece, ha il medesimo contenuto dellaltra, ma il sorgente estremamente compresso e ridotto, tanto da risultare illeggibile.
CONCETTI FONDAMENTALI
Includendo il le .js in una pagina HTML, otteniamo che vi si inietta al suo interno una nuova funzione JavaScript, il cui nome jQuery(), ed il cui argomento un selettore di elementi. Ad esempio:
jQuery(#mioElemento)
Per maggiore comodit, la funzione jQuery() ha un alias, cio un secondo nome, pi breve, costituito dal solo carattere $. I nomi jQuery() e $(), insomma, identi cano la medesima funzione:
$(#mioElemento)
Fig.1: Alcune fasi della comparsa automatica di un popup, fatto apparire con una sola istruzione jQuery
Di conseguenza la versione production non buona per lo studio ed il debug, ma in compenso ha il pregio di pesare assai meno di quella development. Siccome la libreria dovr essere inclusa in ogni documento HTML che ne deve far uso, risparmiare banda indispensabile per migliorare la velocit di caricamento delle pagine. Ecco perch il download production quello pi consigliato. Alla ne otterrete un le con un nome del tipo:
jquery-1.4.2.min.js
Il cosiddetto selettore un riferimento utile per identi care uno o pi elementi della pagina. Esistono diversi tipi di selettori. Il pi basilare di questi un riferimento ad un oggetto del DOM gi esistente. Ad esempio:
$(document) $(window) $(document.getElementById(mioElemento))
Il nome, naturalmente, cambia in base alla versione scaricata. Al momento della stesura di questo articolo, la versione di riferimento la 1.4.2. A questo punto, per utilizzare la libreria in un documento HTML, non dovrete far altro che mettere il le .js nella medesima cartella del le .html, e poi aggiungere la seguente riga nellintestazione del documento:
<script type=text/javascript src=jquery-1.4.2.min. js></script>
Luso delle funzioni del tipo document.getElementById() e document.getElementByTagName(), ad ogni modo, non n necessario n consigliato quando si usa jQuery. La libreria, infatti, permette la selezione degli elementi usando degli appositi selettori di tipo stringa, che ricordano molto da vicino i selettori CSS. Ecco una rassegna delle principali possibilit, illustrate mediante esempi:
NOTA
WRITE LESS, DO MORE

Il motto di jQuery write less, do more, cio scrivi meno, fai di pi. Sicuramente azzeccato!
$(div)
Seleziona tutti gli elementi <div> della pagina corrente. Funziona con tutti i tag di HTML.
$(.miaClasse)
Seleziona tutti quegli elementi che hanno classe CSS miaClasse, ad esempio un <div class=miaClasse> o uno <span class=miaClasse>.
Ecco il codice completo di un esempio stile Ciao, Mondo!, realizzato applicando un e etto di fade-in/ fade-out con jQuery:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml xml:lang=it lang=it> <head> <title>Ciao, jQuery!</title> <script type=text/javascript src=jquery-1.4.2.min. js></script> </head> <body> <h1 id=saluta>Ciao, jQuery!</h1> <script type=text/javascript> ...
$(div.miaClasse)
Seleziona gli elementi di tipo <div> con classe CSS miaClasse, vale a dire solo quelli di tipo <div class=miaClasse>.
$(#mioId)
Seleziona lelemento avente lid speci cato, ad esempio <div id=mioId>. Si possono selezionare gli elementi anche discriminandoli in base ai loro attributi. Ecco alcuni altri esempi:
$([align])
Seleziona gli elementi che hanno un attributo align, indipendentemente dal tipo dellelemento e dal valore dellattributo.
Ottobre 2010 / 25
WEB 2.0 $([align=center])
Seleziona gli elementi con un attributo align pari esattamente a center, ad esempio <div align=center>.
Tutte le principali funzioni di jQuery permettono la concatenazione. Per questo possibile scrivere sequenze di chiamate come:
$(#mioElemento).text(nuovo testo). addClass(classeCss).show(slow);
$([title*=prova])
Seleziona gli elementi con un attributo title il cui valore contiene la sequenza di caratteri prova. Ci rientra, ad esempio, <div title=div di prova>. I selettori di attributo possono essere utilizzati insieme con quelli di elemento. Ad esempio:
$(div.miaClasse[align=center][title*=prova])
NOTA
Questa istruzione in grado di selezionare tutti gli elementi <div> con classe CSS miaClasse, attributo align pari a center e attributo title contenente la parola prova. Quindi:
<div class=miaClasse align=center title=div di
I NUMERI DI JQUERY
Le statistiche dicono che, al momento in cui questo articolo viene scritto, circa il 33% dei 10000 siti pi visitati al mondo fanno uso di jQuery: http://trends.builtwith.com/ javascript/JQuery Con circa il 70% totalizzato nella seguente rilevazione, invece, jQuery si attesta come la libreria JavaScript pi diffusa al mondo: http://w3techs.com/ technologies/overview/ javascript_library/all
prova></div>
Per facilitare la comprensione del framework, separeremo le funzioni in pi gruppi, secondo quello che il loro ambito di competenza. Il primo gruppo di funzioni che andremo ad esplorare riguarda la manipolazione degli elementi e del loro contenuto. Chi lavora con JavaScript sa bene che manipolare gli elementi gra ci, purtroppo, cosa tuttaltro che facile. Le di erenze tra i browser sono infatti determinanti. Operazioni che allapparenza dovrebbero essere semplicissime, come conoscere laltezza di un riquadro o modi care un attributo CSS, risultano essere molto complesse quando si realizza una web-app con ambizioni cross-browser. Con jQuery, fortunatamente, queste operazioni tornano ad essere semplicissime.
Non nita qui: loperatore maggiore di pu essere impiegato per identi care le gerarchie degli elementi. Ad esempio:
$(div[align=center] > a[href*=index.html])
CONTROLLO DELLE DIMENSIONI

Le dimensioni di un elemento possono essere controllare attraverso le seguenti funzioni:
Questa istruzione seleziona gli elementi <a> con attributo href contenente la sequenza index.html, ma solo se sono contenuti dentro un <div> con align=center! Insomma: la potenza di jQuery nellidenti care gli elementi di una pagina evidente. proprio da questa caratteristica che deriva il nome del framework: query, infatti, signi ca ricerca. Bene, ma cosa ce ne facciamo degli elementi selezionati mediante jQuery? La libreria restituisce gli oggetti identi cati incartandoli in speciali contenitori che li dotano di un sacco di funzionalit pronte alluso. Queste funzionalit servono per i pi disparati scopi: animazione, modi ca on-the- y, gestione degli eventi, manipolazione degli attributi di stile e via discorrendo. Per ora concentriamoci sul principio di base, comune a tutte le funzioni messe a disposizione da jQuery. Prendiamo ad esempio in considerazione la funzione text(), che serve per cambiare il testo contenuto in un elemento. La funzione accetta come argomento una stringa, che esprime il nuovo testo da inserire allinterno dellelemento. Quindi si pu fare:
var element = $(#mioElemento); element.text(Nuovo testo dellelemento);
width() e height()
Restituiscono, rispettivamente, la larghezza e laltezza dellelemento sul quale vengono invocati. La dimensione restituita non comprende eventuali padding, bordi e margini applicati allelemento.
innerWidth() e innerHeight()
Restituiscono, rispettivamente, la larghezza e laltezza interni ai bordi dellelemento sul quale vengono invocati. La misura include quindi leventuale padding applicato allelemento, ma non i bordi stessi ed i margini esterni ai bordi.
outerWidth() e outerHeight()
Restituiscono, rispettivamente, la larghezza e laltezza esterna ai bordi dellelemento sul quale vengono invocati. La misura include i padding ed i bordi applicati allelemento, ma non i margini. Se si passa un argomento booleano alle funzioni, con valore true, viene incluso nel calcolo anche leventuale margine applicato allelemento. Le funzioni width() ed height(), oltre che per il recupero delle dimensioni, possono essere usate anche per impostare ed alterare la larghezza di un elemento. Come argomento possibile fornire un intero, che esprime la nuova dimensione in pixel:
$(#mioElemento).width(200);
Una cosa che si soliti fare con jQuery concatenare le chiamate al seguente modo:
$(#mioElemento).text(Nuovo testo dellelemento);
26 / Ottobre 2010
WEB 2.0
Usando una stringa, invece, si possono selezionare di erenti unit di misura, proprio come avviene nei CSS:
$(#mioElemento).width(150pt);
Fig.4: outerWidth() e outerHeight() restituiscono le dimensioni di un elemento, del suo padding e dei suoi bordi. Opzionalmente possibile includere anche i margini Fig.2: width() e height() restituiscono le dimensioni di un elemento al netto di padding, bordi e margini
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml xml:lang=it lang=it>
NOTA
DEFINIAMO IL POSIZIONAMENTO
Passiamo al posizionamento. La funzione principale o set(), che restituisce la posizione di un oggetto rispetto al documento. Viene restituito un oggetto dotato delle propriet left e top, utili rispettivamente per conoscere il
<head> <title>offset() e position()</title> <script type=text/javascript src=jquery-1.4.2.min. js></script> <style> #elemento1 { position: absolute; left: 20px; top: 30px; } #elemento2 { position: absolute; left: 50px; top: 70px; } ...
JQUERY. NOCONFLICT()
Alcune altre librerie JavaScript utilizzano il simbolo $ per variabili e nomi di funzioni. Se usate in congiunzione con jQuery, pertanto, queste altre librerie potrebbero non funzionare correttamente. Ma non c problema: suf ciente chiamare listruzione jQuery.noCon ict() non appena si carica jQuery, e poi caricare le altre librerie che occorrono. Lalias $(), per, a questo punto non sar pi disponibile. Al suo posto dovrete usare il nome esteso della funzione, cio jQuery().
Fig.3: innerWidth() e innerHeight() restituiscono le dimensioni di un elemento e del suo padding, escludendo bordi e margini
CONTROLLO DEL CONTENUTO

Il recupero e la manipolazione del contenuto di un elemento viene svolta con le funzioni text() e html(). Se usate senza argomenti, restituiscono rispettivamente il testo ed il codice HTML contenuti in un elemento. Facciamo un esempio. Si consideri il seguente <div>:
<div id=mioElemento> <p>Questo è un <strong>testo</strong> che <em>usa alcuni</em> tag.</p> </div>
discostamento da sinistra e dallalto dellelemento preso in esame:

var offset = $(#mioElemento).offset(); alert(Da destra: + offset.left + px); alert(Dallalto: + offset.top + px);
La funzione o set() pu essere usata in maniera inversa, cio per impostare la posizione di un elemento. Ecco il modello da seguire:
$(#mioElemento).offset({ left: 40, top: 200 });
Provate ora a richiamare:

var text = $(#mioElemento).text();
La funzione position() del tutto simile a o set(), con la di erenza che in caso di elementi annidati luno dentro laltro, position() restituisce e controlla il posizionamento rispetto al contenitore e non rispetto al documento. Provate con questo esempio:
alert(text);
Il risultato sar:
Questo un testo che usa alcuni tag.
Ottobre 2010 / 27
WEB 2.0
var text = $(#mioElemento).html() alert(text);
Si pu veri care se un elemento ha una classe di stile usando la funzione booleana hasClass():
if ($(#mioElemento).hasClass(miaClasse)) { }
Questa volta il risultato sar il codice HTML contenuto nel <div>, cio:
<p>Questo un <strong>testo</strong> che <em>usa alcuni</em> tag.</p>
Passando un argomento di tipo stringa alle due funzioni si pu modi care il testo o il codice HTML contenuti in un elemento. Provate da voi la di erenza fra le due chiamate incluse nel seguente codice:
<div id=mioElemento1></div> <div id=mioElemento2></div> <script type=text/javascript> var message = Ciao, <strong>jQuery</strong>!; $(#mioElemento1).html(message); $(#mioElemento2).text(message); </script>
La funzione toggleClass(), in ne, aggiunge una classe ad un elemento se questo non la ha gi, mentre la rimuove in caso contrario. In pratica chiamare:
$(#mioElemento).toggleClass(miaClasse);
come fare:
if ($(#mioElemento).hasClass(miaClasse)) { $(#mioElemento).removeClass(miaClasse); } else { $(#mioElemento).addClass(miaClasse); }
LAUTORE Carlo Pelliccia lavora presso 4IT (www.4it.it), dove si occupa di analisi e sviluppo software per piattaforme Java. Nella sua carriera di technical writer ha pubblicato cinque manuali ed oltre duecento articoli, molti dei quali proprio tra le pagine di ioProgrammo. Il suo sito, che ospita anche diversi progetti Java Open Source, disponibile allindirizzo www.sauronsoftware.it
Altre due funzioni particolarmente utili per la manipolazione del contenuto di un elemento sono append() e prepend(). Le due funzioni aggiungono del codice HTML (come fa html(), quindi, non come fa text()) allelemento su cui vengono richiamate. La funzione prepend() lo aggiunge allinizio, prima cio del contenuto originale dellelemento; la funzione append(), invece, aggiunge al termine. Ecco un esempio:
<div id=mioElemento>[TESTO ORIGINALE]</div> <script type=text/javascript> $(#mioElemento).append([TESTO APPEND]); $(#mioElemento).prepend([TESTO PREPEND]); </script>
Oltre alle classi, con jQuery possibile arrivare a gestire no al singolo attributo CSS associato ad un elemento. La funzione utile css(). Il primo uso che si pu fare della funzione con un argomento di tipo stringa, che esprime il nome di un attributo CSS. La funzione restituir il valore associato allattributo richiesto. Provate con questo esempio:
<div id=mioElemento style=color: blue>Testo</div> <script type=text/javascript> var value = $(#mioElemento).css(color); alert(value); </script>
Il risultato di questo codice sar: [TESTO PREPEND][TESTO ORIGINALE][TESTO APPEND]
DIAMO IL NOSTRO STILE AGLI ELEMENTI

Unaltra grande caratteristica di jQuery la possibilit di manipolare le classi e gli attributi di stile CSS assegnati ad un elemento. Con la funzione addClass() possibile aggiungere una classe CSS ad un elemento:
$(#mioElemento).addClass(miaClasse);
Non importa se lattributo stato de nito in linea, allinterno di una classe CSS assegnata allelemento, ereditato da unaltra classe o forzato manualmente: la funzione css() restituir sempre il valore in vigore nel momento in cui lo si domanda. Aggiungendo un secondo argomento, la funzione css() pu essere utilizzata anche per modi care il valore dellattributo selezionato:
$(#mioElemento).css(color, red);
Una classe CSS, aggiunta via HTML o con jQuery stesso, pu essere rimossa da un elemento chiamando removeClass():
$(#mioElemento).removeClass(miaClasse);
Come avete appena visto, jQuery una libreria allo stesso tempo semplice e potente. Quanto sperimentato sinora, ad ogni modo, non ancora nulla rispetto alle vere potenzialit del framework! Per questo motivo nei prossimi numeri dedicheremo alcuni articoli allapprofondimento di jQuery e delle sue tante sfaccettature. Il prossimo mese, in particolar modo, impareremo come usare jQuery per gestire in maniera sempli cata gli eventi (clic, mouse-over, mouse-out, ecc.) di una pagina HTML. Carlo Pelliccia
28 / Ottobre 2010
WEB 2.0
Primi passi con Ruby On Rails
RUBY FOR DUMMIES: INIZIAMO BENE!

l linguaggio Ruby alla base di moltissimi dei servizi che usiamo tutti i giorni. Twitter, BaseCamp e innumerevoli altre applicazioni web si basano sul linguaggio di scripting creato nel 1993 dal giapponese Yukihiro Matsumoto (Matz per gli amici). Il linguaggio Ruby si ispira a Smalltalk, Lisp e Perl ed un linguaggio interpretato fortemente orientato agli oggetti. Linterprete scritto in C e rilasciato con doppia licenza GPL. Ruby non di per s rivoluzionario, ma oltre ad essere apprezzato dai professionisti per le sue feature pi avanzate (il mercato del lavoro, anche italiano, ricerca spasmodicamente sviluppatori Ruby in gamba) ben si presta ad essere imparato anche come primo linguaggio. La sua facilit di apprendimento permette anche a chi totalmente digiuno di programmazione di poter avvicinare questo mondo in tutta semplicit. A Ruby si accompagnano decine di migliaia di gems (gemme) create dalla folta comunit di sviluppatori che utilizzano il linguaggio. Le gems sono librerie o interi programmi distributi come pacchetti facilmente installabili grazie al gestore RubyGems. Esistono gemme che aggiungono ogni genere di funzionalit a Ruby: gemme per gestire il filesystem, gemme dedicate a Google Maps o allinvio di email massivo. Una bella comodit per gli sviluppatori, non costretti a dover reimplementare da zero funzionalit gi create da altri programmatori. Nel corso dellarticolo cominceremo a conoscere il linguaggio, ad usare gli strumenti di sviluppo pi utili e diffusi e creeremo unapplicazione di tipo To-Do list usando Rails
RUBY UNO DEI PRINCIPALI PROTAGONISTI DEL WEB MODERNO. IMPAREREMO I FONDAMENTI DEL LINGUAGGIO E CREEREMO UNA TO DO LIST PER IL WEB IN POCHE RIGHE DI CODICE: AVVICINARSI ALLA PROGRAMMAZIONE DI DOMANI, PARTENDO DA ZERO
stRUMenti di sVilUPPO
Ruby disponibile per tutti i sistemi operativi, in pacchetti di facile installazione, gi comprensivi di tutto il necessario allo sviluppo delle nostre applicazioni. Potete scegliere i pacchetti ufficiali (da scaricare dal sito www.ruby-lang.org/it/) o distribuzioni complete dello stack (come quella scaricabile da http://bitnami.org/) o ancora un IDE come Aptana RadRails (basato su Eclipse, lo trovate allindirizzo http://www.aptana.com/) che racchiude al suo interno lo stack Ruby.
Cd WeB
ruby.zip
Fig.1: Aptana, IDE che integra Ruby
REQUISITI
Conoscenze richieste HTML, CSS, JavaScript Software Web Browser ed un editor HTML, CSS e Java Impegno
Qualunque sistema voi scegliate (Linux, Windows o MacOs poco importa) vi ritroverete installate almeno tre cose: linterprete Ruby vero e proprio, irb (linterprete da riga di comando) e RDoc, la documentazione di Ruby creata in maniera automatica per lappunto da Rdoc: potete trovare la documentazione online allurl http://ruby-doc.org/.
COse Rails?
Rails, che useremo per sviluppare la nostra applicazione, un framework opensource per applicazioni web scritto in Ruby fortemente aderente al paradigma MVC (Model-View-Controller). Obiettivi principali di Rails sono la semplicit di utilizzo e la riduzione del codice scritto per creare applicazioni.
CiaO MOndO RUBY!

Cominciamo a programmare in Ruby dal pi classico dei programmi. Installato Ruby creiamo con il nostro editor preferito un file di testo con estensione .rb. Il nostro HelloWorld sar composto da una sola riga:
puts Hello World
30 / Ottobre 2010
WEB 2.0
Salvate e lanciate linterprete dal prompt dei comandi: ruby nome_file.rb. Il file verr eseguito e vedrete stampare a video il vostro primo programma Ruby.
lizzare il cancelletto #, tutto quello che verr scritto dopo il cancelletto sar considerato un commento. Per commenti multilinea potete usare la sintassi seguente:
=begin Tutto questo un commento Anche questa riga un commento =end
Fig.2: Linterprete Ruby in esecuzione su Windows
Vediamo ora come controllare il flusso del nostro codice, utilizzando i pi classici costrutti come if, while, ecc...
Potete anche lanciare linterprete interattivo da solo, eseguendo un comando alla volta e vedendone il risultato direttamente a schermo. Ad esempio lo stesso programma HelloWorld lanciato dallinterprete mostrer:
irb(main):001:0> puts Hello World Hello World => nil irb(main):002:0>
sintassi degli OPeRatORi

La sintassi degli operatori come if e altri costrutti simile a quella di altri linguaggi di programmazione, ma diamogli unocchiata ravvicinata scorrendo un array dichiarato ad inizio programma.
#esempi di operatori, cicli e condizioni
NOTA
# Dichiariamo un array che useremo come base per il nostro esempio oggetti = [Casa,Albero,Palla,Sedia,Tavolo, Moneta] # Larray definito? if oggetti.nil? puts Larray non e definito else puts Larray e popolato end # Esempio elseif if oggetti.length == 0 puts Larray e vuoto elsif oggetti.length == 1 puts Larray contiene una stringa else puts Larray contiene piu di una stringa end # Scorriamo larray con each puts \nArray mostrato usando each\n oggetti.each do |obj| puts Loggetto #{obj}\n end # Scorriamo larray con while puts \nArray mostrato usando while\n i=0 while i < oggetti.length puts oggetti[i] i += 1 end
La riga => nil mostra il risultato dellespressione che abbiamo digitato: puts ritorna sempre nil, il valore nullo del linguaggio Ruby. Vediamo ora qualcosa di un po pi avanzato. Possiamo dichiarare variabili e utilizzarne il contenuto in espressioni composte: il piccolo programma qui di seguito crea due variabili e le somma in una terza, infine stampiamo a video la radice quadrata della terza variabile:
a=3 b=6 c=a+b c = Math.sqrt(c) puts c
MVC
Model-View-Controller un pattern architetturale molto diffuso nello sviluppo object-oriented. Il pattern adottato da diversi framework PHP (Symfony, Zend Framework), Python (Django), e da Java (Swing e Struts)
Niente di pi facile... Come potete vedere la sintassi davvero semplificata, mancano i punti e virgola (non necessari) e abbiamo utilizzato uno degli innumerevoli oggetti predefiniti: sono chiamati built-in modules e definiscono gli elementi pi comuni del linguaggio. Se volessimo interpretare i nostri file in Aptana possiamo fare in questo modo: create un nuovo progetto Ruby, al suo interno create i file .rb contenente il codice del vostro programma e poi compilateli selezionando il tasto play dellIDE selezionando Run As... e poi Ruby Application: vedremo il risultato dellelaborazione nella finestra Console del nostro IDE. Se volete commentare il vostro codice potete uti-
Ottobre 2010 / 31
WEB 2.0
Come potete vedere, la sintassi simile a quella di altri linguaggi di programmazione. Scopo di questo articolo non approfondire la sintassi di base del linguaggio (il web ricco di guide e tutorial in merito), ma portare lutente a realizzare in breve tempo applicazioni reali come faremo nel corso dellarticolo.
vedere dallesempio precedente possibile passare parametri da utilizzare poi allinterno del metodo. Chiamare un metodo semplice come in qualsiasi altro linguaggio, ma usare le parentesi opzionale: tutto in nome della semplicit nella scrittura del codice. La chiamata al metodo stringa .upcase trasforma la stringa in maiuscolo, abbiamo usato un altro dei built-in module, in questo caso la classe string. Passiamo ora alle classi. Le classi possono essere viste come collezioni di metodi comuni ad un particolare oggetto. Un esempio, come al solito chiarir eventuali dubbi. Creiamo la classe Bambino: gli oggetti creati a partire dalla classe Bambino avranno un nome e sar possibile salutare e/o inviare un sms personalizzato al bambino rappresentato dalla classe.
class Bambino def initialize(nome = bambino) @nome = nome end def saluta
Fig.3: Il pattern MVC (fonte Wikipedia)
MetOdi e Classi
Come abbiamo detto ad inizio articolo, Ruby un linguaggio fortemente orientato agli oggetti. Cominciamo ad utilizzare i metodi, vedremo in seguito le classi e cominceremo a lavorare seriamente con il linguaggio. Il nostro primo metodo si occuper di ricevere come parametro una stringa che stamper a video dopo averla elaborata un po.
def mioMetodo(stringa) puts La stringa che hai passato al metodo e: \#{stringa.upcase}\ end mioMetodo(ciao)
puts Ciao #{@nome}! end def sms(testo) puts #{@nome} ha ricevuto lsms \#{testo}\ end end luigi = Bambino.new(Luigi) luigi.saluta luigi.sms questo e un sms per te
Loutput di questo piccolo programma :
Ciao Luigi!
I metodi in Ruby sono dichiarati tramite dichiarazione def <nome_metodo> ... end e come potete
Luigi ha ricevuto lsms: questo e un sms per te
Analizziamo il codice per scoprire come funziona la nostra classe: la classe si apre con la parola chiave class, seguita dal nome della classe scritto con la prima lettera maiuscola e si chiude con la parola chiave end. Il metodo initialize obbligatorio ed il metodo che si occupa di creare il nostro oggetto alla chiamata del metodo new(). La classe Bambino ha un attributo nome, che viene popolato proprio in fase di inizializzazione. I metodi vengono poi dichiarati come solito, mentre loggetto creato, con la sintassi Fate attenzione, lattributo nome non sar disponibile immediatamente allesterno della classe: sar necessario rendere esplicita la sua disponibilit. La classe viene quindi modificata come segue:
class Bambino
Fig.4: Lapplicazione RadRails in azione
attr_accessor :nome
32 / Ottobre 2010

...
WEB 2.0
Da adesso in poi potremo accedere allattributo nome della classe Bambino e sar anche possibile modificarlo al volo con listruzione luigi. nome=Luigi 2.
USIAMO LE GEMS
Come dicevamo ad inizio articolo, le Ruby Gems sono librerie preconfezionate messe a disposizione dagli utenti della community Ruby. Come possiamo usarle? Per usare una gemma dobbiamo prima installarla. Esistono tool grafici per gestire le gems, ma comunque il comando da shell (che ci si trovi su Windows o su Linux) semplicissimo: recatevi nella cartella che contiene il file ruby.exe (di solito c:\ruby\bin) e digitate:
gem install <nome_gem>
Una volta installata, la gemma subito disponibile per i nostri programmi: vediamo un esempio pratico, installiamo la gem mysql con il comando visto in precedenza. Il codice per connettersi al database e fare una query facilissimo, una volta inclusa la gem
require mysql connessione = Mysql.new(HOST, USERNAME, PASSWORD, NOME_DATABASE) rs = connessione.query(select * from tabella) rs.each_hash { |h| puts h[campo]} connessione.close
Creata la connessione eseguiremo la query verso il nostro database e otterremo un hash (array associativo) contenente tutte le righe del risultato. Tramite il costrutto each_hash scorreremo quanto restituito dalla query e lo stamperemo a video. Come dicevamo a inizio articolo, esistono decine di migliaia di gems, dalle funzionalit pi disparate: di solito si tratta di wrapper per servizi web (twitter, meteo, ecc...) o operazioni comuni come connessioni a database o scrittura di file. Se dovete implementare qualche funzionalit comune, provate prima a cercare uneventuale gem: magari qualcuno ha gi fatto il lavoro sporco per voi!
turazione quello di rendere indipendenti tra loro le parti del software adibite al controllo, allaccesso ai dati e alla presentazione degli stessi. Il model gestisce i dati e fornisce i metodi per accedervi, di solito si tratta della progettazione del database e delle modalit di accesso allo stesso. La view (o le view) visualizza i dati forniti dal controllore ed sostanzialmente il template (HTML in caso di applicazioni web) del nostro progetto. Il controller riceve i comandi dallutente attraverso la view e li smista tra i due restanti componenti del pattern. Per comodit useremo Aptana / RadRails e i wizard in esso incluso per creare la nostra applicazione, ma comunque possibile creare lapp da riga di comando lanciando rails (a sua volta installato come gemma). Assicuratevi di avere un server MySQL attivo sul vostro pc: Rails supporta tranquillamente il database recentemente acquisito da Oracle. Creiamo un nuovo progetto Ruby cliccando File -> New... -> Rails Project. Inserito il nome del progetto e la tipologia di database che vogliamo utilizzare (MySQL nel nostro caso) RadRails si occuper di creare tutti i files necessari alla nostra applicazione e lancer un server di test allindirizzo http://localhost:3000: il risultato quello che vedete in Fig. 4. Potete notare la quantit di file creati allinterno del nostro progetto: sono proprio i controller, le viste e i model di cui abbiamo parlato prima. Associamo ora il database allapplicazione: selezionate la database perspective di Aptana e una volta assegnato il nome al database modificate la stringa di connessione in base al vostro database server. Ecco fatto. Adesso siamo pronti per poter sviluppare la nostra applicazione Rails che non sar nientaltro che un nuovo progetto Rails che realizza una To-Do list: appoggiandoci ad un database memorizzeremo la lista delle cose da fare e potremo creare/modificare/ cancellare nuove entry nella nostra lista. un piccolo esempio, ma completo e capace di svelare anche ai novizi tutte le possibilit offerte da Rails.
RUBY ON RAILS
Per sfruttare pienamente le capacit di Ruby, quasi dobbligo ormai affiancare al linguaggio il framework Rails. Il framework Rails strettamente MVC, quindi bisogner adattarsi al modo di pensare di questo paradigma: il compito di questa strut-
Fig.5: La database perspective di Aptana
Ottobre 2010 / 33
WEB 2.0

def create @task = Task.new(params[:task]) if @task.save flash[:notice] = Task was successfully created. redirect_to :action => index else @tasks = Task.all render :action => index end end def finish @task = Task.find(params[:id]) new = {:finished => true} @task.update_attributes(new) redirect_to :action => index end def unfinish @task = Task.find(params[:id]) new = {:finished => false} @task.update_attributes(new) redirect_to :action => index end def destroy @task = Task.find(params[:id]) @task.destroy redirect_to(tasks_url) end end
CReiaMO la tO-dO list in Rails

Ricapitoliamo: andremo a creare un nuovo progetto in Aptana, proprio come abbiamo fatto prima. Per cominciare creiamo tre database sul nostro server: uno per lo sviluppo, uno per la produzione e uno per i test. Chiamiamoli todo_dev, todo_prod, todo_test rispettivamente. Poi installiamo la gem nifty-generators: ci server per i layout della nostra applicazione. Creiamo ora il nostro progetto e chiamiamolo todolist. Aptana finir di creare i nostri file e quindi colleghiamo il database alla nostra applicazione. Una volta collegati i database, modificate il file di configurazione dellapplicazione che trovate in /config/database.yml in modo che gli oggetti presenti nel file corrispondano ai database che avete creato.
test: adapter: mysql encoding: utf8
LAUTORE Francesco Napoletano socio della Piko Design (www.pikodesign.it) dove si occupa di tutta la parte di sviluppo web (dal PHP al JavaScript, passando per Flex ed actionscript 3.0). Il suo blog www.napolux. com tra i pi conosciuti nellambiente web italiano.
database: todo_test pool: 5 username: root password: host: localhost
Quello che avete appena letto un esempio di configurazione che potete trovare in /config/database.yml. Ora aprite la vista console (in basso nella finestra) del vostro IDE RadRails e digitate i seguenti comandi:
script/generate controller tasks script/generate nifty_layout script/generate model Task name:string finished:boolean rake db:migrate
Cosa fanno questi comandi? Generano altri file per la nostra applicazione, nellordine: il controller, I layout e il model (il database). Il comando rake db:migrate va a scrivere il database vuoto sul server MySQL. Ora andiamo a scrivere il nostro controller. Non sar nientaltro che una semplice classe ruby, che analizzeremo passo passo.
class TasksController < ApplicationController def index new @tasks = Task.all end def new @task = Task.new end
I metodi della classe (che estende Application Controller) sono davvero semplici e il loro nome esplicativo, e si occupano rispettivamente di creare, distruggere e settare come finiti (o non finiti) i task creati. Il file index.rhtml in /app/view/tasks la nostra pagina dellapplicazione. fondamentalemente un file html che racchiude tag ruby tra <% %> e mostra i task della nostra lista, pescati direttamente dal database.
COnClUsiOni
Ruby un linguaggio dalle immense potenzialit. Accoppiato a Rails fa faville. I professionisti Rails sono molto richiesti dal mercato del lavoro di oggi e imparare questo linguaggio non per niente difficile. Basta solo applicarsi ed entrare nellottica del paradigma MVC. Nel prossimo articolo espanderemo la nostra to-do list per renderla collaborativa. Francesco Napoletano
34 / Ottobre 2010
WEB 2.0
Come gestire le Chrome Extension
CHROME: LESTENSIONE SERVITA!

MAGGIOR CONTROLLO DEL BROWSER, ACCESSO A DATI REMOTI, MIGLIORAMENTO DELLA USER EXPERIENCE: TUTTO DIVENTA SEMPLICE CON LE CHROME EXTENSIONS. ENTRIAMO NEI DETTAGLI CON UNA ESTENSIONE CHE DIALOGA CON TWITTER
SECONDA PARTE
I
CD WEB
Search_on_Twitter.rar
n questo numero approfondiremo il discorso sulle estensioni di Google Chrome, avviato il mese scorso con una panoramica generale delle applicazioni. Ora analizzeremo pi dettagliatamente larchitettura delle extension, con un esempio ben pi complesso di quelli gi visti: preleveremo dei dati da unorigine esterna, grazie ad una richiesta XMLHttpRequest, e li utilizzeremo per generare dei contenuti e inserirli nel DOM di una pagina web.
sione, e gli viene offerto il risultato in una div che viene inserita automaticamente nel DOM del documento corrente.
LARChITETTuRA
Come sappiamo, unestensione pu comporsi di uno o pi file: di questi, solo il manifest.json obbligatorio. Tuttavia, essendo il manifest un semplice file testuale contenente le impostazioni generali, non pu essere lunico pezzo di unapplicazione complessa. Occorreranno, a seconda dei casi: un file contenente gli script che girano in background e che interagiscono con la UI del browser; un file che acceda al DOM delle pagine caricate per recuperare informazioni o modificarne la struttura; un file che venga aperto in una finestra di popup; uno o pi file .js e .html. Ma non finita: in una extension possono essere presenti anche di altri tipi di file, come applicazioni .swf e file multimediali. La nostra estensione si comporr dei seguenti file:
CuRRENTLY ON TWITTER
Twitter ci offre, ancora una volta, una ricca fonte di dati per sperimentare le nostre applicazioni. Il servizio espone una API che permette di effettuare ricerche testuali e ottenere gli aggiornamenti pi recenti in base alle chiavi di ricerca trasmesse. Approfitteremo di questa opportunit e svilupperemo una estensione per Chrome in cui verr inviata una richiesta alla Search API, che risponder con un oggetto JSON contenente una serie di 15 tweet. Questi saranno filtrati in base a un testo selezionato dallutente in una qualsiasi pagina web. In pratica lutente seleziona una stringa di testo in una pagina, clicca sullicona dellesten-
REQUISITI
Conoscenze richieste Buona conoscenza di HTML e Javascript Software Nessun requisito particolare Impegno
manifest.json background.html contentscript.js jquery-1.4.2.min.js chrstyle.css alcuni file immagine
DOVE SONO I METADATI

Il file manifest.json un semplice file di testo contenente un oggetto JSON le cui propriet forniscono i metadati di ogni estensione. Vediamo di quali dati abbiamo bisogno nel nostro esempio:
{ name: Search on Twitter,
Fig. 1: Lestensione che descriviamo in questo numero trasmette a Twitter un testo selezionato dallutente. I dati della risposta vengono visualizzati allinterno di una div che viene, infine, inserita nel DOM della pagina web
36 / Ottobre 2010

version: 1.0.0, description: Questa estensione permette di effettuare ricerche su twitter , permissions: [ tabs, http://*/* ], browser_action: { default_icon: icon_19.png, default_title: Search on Twitter }, icons: { 16 : icon_16.png, 48 : icon_48.png, 128 : icon_128.png }, background_page : background.html }
WEB 2.0
della pagina di background, i cui script, abbiamo detto, sono in grado di agire sulla UI del browser.
GLI SCRIPT
Le pagine di background sono degli script di lunga durata che girano fintanto che lestensione attiva. Questi script hanno lo scopo fondamentale di coordinare i task attraverso i componenti dellestensione (browser action, content script, popup, ecc.). Il coordinamento necessario in quanto ogni file svolge una o pi funzioni specifiche e non altre. Il file di background, ad esempio, accede alla UI del browser, ma non al DOM delle pagine web. Al contrario, i content script accedono al DOM dei documenti, ma non hanno accesso alla UI del browser e alle Chrome.* APIs. Ovviamente, allaumentare della complessit delle applicazioni, i file di background diventano sempre pi necessari. Il file content_script.js contiene gli script che interagiscono con le pagine web. Un content script pu individuare contenuti specifici presenti in una pagina, come dei file immagine, per consentirne poi la manipolazione, ad esempio creando al volo una webgallery, oppure per permetterne il download multiplo. Ci possibile in quanto i content script hanno accesso al DOM delle pagine web: il DOM viene condiviso tra gli script della pagina e ognuno dei content script delle extension attive. Ogni content script pu, ad esempio, aggiungere un nodo, come vedremo in queste pagine, o eliminarlo, oppure ancora modificarne laspetto. Va sottolineato che, sebbene i content script condividano laccesso al DOM con gli script della pagina web, questi funzionano in modo completamente indipendente gli uni dagli altri: i content script non vanno mai ad interferire con gli script della pagina e viceversa (ne vedremo un esempio nella nostra extension). Questi operano in un ambiente isolato rispetto agli altri content script e agli script delle pagine web, secondo un sistema definito isolated worlds.
Il campo permissions imposta i permessi. Il valore tabs permette allestensione di interagire con le schede e le finestre del browser: nel nostro esempio, sar necessario per incorporare i file .css e .js necessari. La stringa successiva consente agli script di operare sulle URL che corrispondono allo schema http://*/* (in pratica tutte le pagine che utilizzano il protocollo HTTP). Ci significa che la nostra applicazione non funziona quando la pagina web utilizza un protocollo HTTPS (per estendere i permessi, basta aggiungere il pattern https://*/*). Il campo browser_action impone al browser di visualizzare licona associata allestensione indipendentemente dalla pagina web corrente (licona appare nella toolbar di ogni tab del browser). Nellarray di attributi della browser action, inoltre, vengono stabiliti il file immagine e il testo del tooltip. La nostra estensione non utilizza una pagina di popup, quindi manca il campo corrispondente (default_popup). Il campo background_page individua il nome
NOTA
UNAPPLICAZIONE INTERATTIVA
A prima vista lapplicazione di questo numero potrebbe apparire simile a quella presentata il mese scorso. A ben vedere, le differenze sono molteplici. Prima di tutto, cambia larchitettura dellapplicazione: i dati di twitter non vengono mandati in un popup, ma inseriti nel DOM del documento; inoltre, la precedente applicazione non offriva interattivit allutente, limitandosi a prelevare gli ultimi tweet pubblici: al contrario, lestensione presentata in questo numero restituisce dati filtrati in base ad una specifica richiesta dellutente.
SCRIPT INJECTION
Gli script di background girano costantemente durante il funzionamento delle extension. Diversamente, i content script possono essere utilizzati sia in modo permanente, sia in modo programmatico, cio al verificarsi di un dato evento. Nel primo caso, gli script vanno sem-
Fig. 2: Nel GoogleDevelopers Channel di YouTube disponibile una playlist di ottime video-guide dedicate alle Chrome Extensions. Si veda http://goo.gl/lnpp
Ottobre 2010 / 37
WEB 2.0
plicemente registrati nel manifest, nel campo content_scripts. Quando invece agli script si accede in maniera programmatica, come al verificarsi dellevento clic sullicona della browser action, nel manifest.json andranno impostati solo alcuni permessi:
permissions: [
stato eseguito (maggiori dettagli sui metodi del modulo chrome.tabs sono disponibili su http://goo.gl/azWM). Ora che abbiamo a disposizione tutti i file, vediamo come coordinarne i compiti.
NOTA
tabs, http://*/* ],
MESSAGE PASSING
Sebbene abbiano completo accesso alle pagine web caricate, per motivi di sicurezza i content script non hanno accesso diretto agli altri script dellestensione, n alla UI del browser. Per accedere alla Chrome.* API diventa necessario, quindi, prevedere delle modalit di comunicazione tra il content script e gli altri componenti dellapplicazione. Nella nostra estensione, ad esempio, il content script inserir nel DOM della pagina corrente una div con i dati provenienti dallo script di background. La procedura viene definita message passing: tra il content script e il file di background si attiva un canale di comunicazione in cui gli script trasmettono un messaggio e rimangono in attesa di una risposta. La connessione pu riguardare singole richieste, come nel nostro esempio, oppure rimanere stabilmente attiva. Nel content script, quindi, avremo:
chrome.extension.sendRequest({action : searchTwitter, selection : window.getSelection(). toString()}, onText);
Per chi avesse perso larticolo precedente, ricordiamo che Chrome dispone di un ottimo strumento di sviluppo e debugging che permette di analizzare sia le normali pagine web, sia le estensioni del browser. Per effettuare lanalisi di una pagina web, al Developer Tools si accede dalla hovercard del documento, selezionando la voce di menu Opzioni per sviluppatori e, quindi, Strumenti per sviluppatori. Per lanalisi e il debug delle estensioni, invece, si dovr procedere diversamente, a seconda dei file di cui si compone lapplicazione. Se lestensione dispone di un popup, allora vi si acceder cliccando con il tasto destro del mouse sullicona della browser action; se lestensione dispone di un file background.html, allora bisogner accedervi attraverso lelenco della scheda Estensioni (chrome://extensions/). La documentazione ufficiale si trova nel sito del progetto Chromium, allindirizzo www.chromium.org/ devtools, mentre un ottimo tutorial per sviluppatori si trova su http://goo.gl/nfWf.
CHROME DEVELOPER TOOLS
Per la programmatic injection sar necessario abilitare il modulo chrome.tabs e ottenere il permesso per accedere a server remoti esterni. Una volta impostati i permessi, sar possibile invocare gli script dal file background.html:
chrome.browserAction.onClicked. addListener(function(tab) { chrome.tabs.insertCSS(null, {file: chrstyle.css}); chrome.tabs.executeScript(null, {file: contentscript. js}); chrome.tabs.executeScript(null, {file: jquery1.4.2.min.js}); });
Levento chrome.browserAction.onClicked si verifica quando lutente clicca sullicona della browser action. Al clic vengono inseriti il foglio di stile (chrome.tabs.insertCSS), il contentscript e la versione 1.4.2 di jQuery (chrome. tabs.executeScript). I metodi insertCSS e extecureScript accettano gli stessi tre argomenti: il primo stabilisce la ID della tab in cui inserire lo script o il foglio di stile, il secondo consiste in una serie di parametri, tra cui il nome del file da inserire, il terzo, non presente nellesempio, una funzione di callback da invocare appena lo script
Il metodo chrome.extension.sendRequest invia una singola richiesta ad un listener dellapplicazione. Il metodo accetta tre argomenti: lID di una estensione con cui si desidera eventualmente attivare una connessione (assente nel nostro esempio), un messaggio in formato JSON ed una eventuale funzione di callback che gestisce i dati della risposta. La nostra richiesta prevede due parametri: il primo individua una funzione definita nello script di background (searchTwitter), il secondo trasmette un testo selezionato dallutente nella pagina web corrente. Infine, onText la funzione di callback che ricever i dati della risposta. La richiesta del content script viene ricevuta dallo script del file background.html:
chrome.extension.onRequest.addListener(onRequest); function onRequest(request, sender, callback) { if (request.action == searchTwitter) {
Fig. 3: Il GoogleDevelopers Channel offre un ottimo videotutorial in cui vengono illustrate le modalit di comunicazione tra gli script delle extension. Il video disponibile allindirizzo http://www.youtube.com/watch?v=B4M_a7xejYI
searchTwitter(callback, request.selection); } };
38 / Ottobre 2010
WEB 2.0
Il metodo onRequest viene attivato quando uno script dellestensione trasmette una richiesta. Il metodo accetta tre argomenti: la richiesta, un oggetto contenente informazioni sullo script che ha inviato la richiesta, infine la solita funzione di callback (ricordiamo che la funzione di callback onText definita nel content script e trasmessa con la richiesta). Se la propriet action della richiesta corrisponde alla stringa searchTwitter, viene invocata la corrispondente funzione, con due parametri: la nostra callback e il testo selezionato dallutente nella pagina web. Infine, di seguito trovate la funzione searchTwitter, definita nel background.html:
function searchTwitter(callback, selection) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(data) { if (xhr.readyState == 4) { var data = JSON.parse(xhr.responseText); callback(data); } } var url = http://search.twitter.com/search.json?q= + selection; xhr.open(GET, url, true); xhr.send(); };
Fig. 4: La figura mette a confronto la pagina di un trending topic di Twitter con i risultati visualizzati dalla nostra extension
NOTA
LA SEARCH API DI TWITTER

La Search API di Twitter un servizio che permette di recuperare i pi recenti Tweet pubblicati dagli utenti dellapplicazione. Attualmente il servizio fornisce i dati in ordine cronologico, sebbene nel prossimo futuro verranno presentati i dati in base alla popolarit dei tweet. Per maggiori informazioni, si legga la documentazione online: http://dev.twitter. com/doc/get/search
Twitter ha restituito dei risultati significativi. Ecco alcuni campi della risposta:
{ results: [ { profile_image_url: .png, created_at: , from_user: , text: , }, ], , results_per_page: 15, page: 1, query: roma }
NOTA
Viene instanziato un nuovo oggetto XMLHttpRequest. Al cambiamento di stato, invocata la funzione anonima che recupera i dati (JSON.parse) e li trasmette alla funzione di callback. Il metodo xhr.open specifica la modalit di trasmissione (GET), la URL cui accedere per recuperare i dati e un parametro che stabilisce se la trasmissione asincrona (true) o sincrona (false). Il metodo send() trasmette la richiesta. Non resta che scoprire come sono strutturati i dati della risposta.
JSON FEEDS IN RETE

Nello sviluppo di questa extension, ci siamo serviti della Search API di Twitter, per la quantit di dati disponibili e per la facilit di accesso al servizio. In pratica, bastata una semplice richiesta XMLHttpRequest. Tuttavia avremmo potuto utilizzare un qualunque servizio web che rendesse disponibile un oggetto JSON: le API di Flickr, ad esempio, una delle tante Data API di Google, o anche YQL di Yahoo. E perch non pensare ad una ricerca multipla ed in tempo reale con la Google AJAX Feed API V2? Una volta compresi i meccanismi di comunicazione tra gli elementi di una extension, qualunque data source va bene per sviluppare applicazioni e mash-up inediti.
Lultimo campo (query: roma) riporta il testo che lutente ha selezionato nella pagina web e che costituisce la chiave di ricerca. Nel caso in cui, invece, lutente non abbia selezionato nessun testo, la richiesta trasmessa a Twitter ricever la seguente risposta:
{ error: You must enter a query. }
LA RISPOSTA DI TWITTER
Prima di mandare a video i dati, opportuno dare unocchiata alle possibili risposte di Twitter. Le informazioni necessarie per accedere alla Search API di Twitter sono disponibili allindirizzo http://dev.twitter.com/doc/get/ search. Qui ci baster dire che possiamo avere tre risposte. Nel caso migliore, lutente ha selezionato correttamente il testo nella pagina e lAPI di
Infine, nel caso lutente abbia selezionato un testo, ma la Search API non abbia trovato risultati, la risposta sar:
{ results: [ ], , query: abcdefg }
In questultimo caso, il campo results esister, ma non riporter dati utili. Ed ora vediamo come mandare a video loutput.
Ottobre 2010 / 39
WEB 2.0

.appendTo(#tweets) .fadeIn(1000); }); }else{ $(#chrContainer h3).prepend(data.error); } };
ACCEDIAMO AL DOM
Tornando per un attimo al file background. html, si noter che tra gli script iniettati nellextension con il metodo chrome.tabs. executeScript, vi anche la versione 1.4.2 di jQuery. Fino ad ora non ne abbiamo avuto
NOTA
RIFERIMENTI
Se avete perso larticolo precedente, prima di aprire il vostro editor, consigliamo di dare unocchiata alla guida introduttiva alle Chrome Extensions, allindirizzo http://goo.gl/XCCX. Tra le risorse online, abbiamo apprezzato moltissimo le videoguide introduttive del canale GoogleDevelopers di YouTube. La playlist Google Chrome Extensions un punto di riferimento imperdibile: http://goo.gl/lnpp. disponibile anche un gruppo di discussione (http://goo.gl/ FGJO). Da non perdere il Chromium blog allindirizzo http://blog.chromium. org/
Fig. 5: La scheda Estensioni permette di analizzare e configurare le applicazioni installate nel browser. Vi si accede, tra laltro, digitando chrome://extensions/ nella barra degli indirizzi
bisogno: adesso, per, il momento di sfruttarne le potenzialit soprattutto per semplificare il codice. Chiudiamo il background.html e torniamo al contentscript.js. Qui definiamo la funzione di callback che si occupa della manipolazione finale dei dati:
function onText(data) { $(<div id=chrContainer></div>) .prependTo(body).append(<h3></h3>); $(#chrContainer h3).addClass(chrTitle); $(<span class=close><a href=javascript:document. getElementById(\chrContainer\).parentNode. removeChild(document.getElementById(\chrContainer\ ));>Chiudi</a></span>) .appendTo(.chrTitle); if(data.results){ $(#chrContainer h3) .prepend(<span class=selected> + data.query + </span> on Twitter...); $(<ul id=tweets></ul>). appendTo(#chrContainer); $.each(data.results, function(){ $(<li></li>).hide() .append(<img src= + this.profile_image_url + alt= + this.from_user + />) .append(<span><a href=http://twitter.com/ + this.from_user + target=_blank> + this.from_user + </a> + this.text + </span>)
Il primo passo quello di creare una div e assegnarle un id=chrContainer. La div viene inserita come primo nodo del tag body e, al suo interno, viene inserito un nodo h3, con id=chrTitle. Listruzione successiva inserisce allinterno del nodo h3 un link che attiva un piccolo script. Il link serve ad eliminare la div#chrContainer dal DOM del documento. Si noti che non abbiamo fatto ricorso a jQuery, sebbene il metodo .remove() sarebbe stato molto pi efficiente del ricorso allAPI del DOM. Ci in quanto lo script che rimuove la div inserito nel DOM della pagina e non nel content script dellestensione (ricordiamo che la libreria jQuery stata incorporata nellestensione, non nel DOM del documento, e che i relativi script vivono in mondi isolati). Il successivo blocco condizionale verifica lesistenza di dati utili. Se Twitter restituisce loggetto results, viene generato un elenco di tweet; altrimenti mandato a video un messaggio di errore. Lapplicazione pronta. Non resta che aprire la scheda Estensioni (chrome://extensions/) e selezionare, in modalit sviluppatore, Carica estensione non pacchettizzata.
quALChE SuGGERIMENTO
In questo articolo abbiamo mostrato come prelevare dati da origini esterne e inserirli allinterno di una qualsiasi pagina web. Lo scopo principale, tuttavia, non era tanto quello di visualizzare dei dati prelevati da unorigine esterna, quanto piuttosto quello di comprendere come gli script di una extension dialoghino tra di loro, grazie al message passing, e come i content script operino rispetto alle pagine web da un lato, e agli altri componenti delle extension dallaltro (isolated worlds). E comunque, le features delle Chrome extensions non si limitano al trasferimento di dati: qualunque funzionalit vogliate aggiungere a Google Chrome, tutto ci che vi occorre del normalissimo codice HTML/JavaScript (e molta fantasia). Carlo Daniele
40 / Ottobre 2010
MOBILE
Le API di bada ed il test su device reali
IL TELEFONO RICONOSCE I VOLTI!

ello scorso articolo abbiamo visto come usare tutti gli strumenti messi a disposizione da Bada per aggiungere ai nostri progetti valide feature come linvio di email, sms, mms etc abbiamo scoperto come interrogare la SIM del telefono, come recuperare informazioni sensibili come il numero identi cativo o la cella a cui la stessa SIM si agganciata o loperatore che ci fornisce il servizio. In questo numero a ronteremo il discorso media. Con il termine media intendiamo tutte quelle risorse multimediali che potremo usare per arricchire i nostri programmi: immaginiamo di dover scrivere un ricettario da mettere in vendita sul sito di Samsung, in cui oltre al testo della preparazione e agli ingredienti, inseriamo anche unimmagine del piatto nito e presentato, o addirittura un video che spieghi passo-passo come realizzare quellottimo manicaretto! Vedremo anche come visualizzare unimmagine, ricercare volti umani e come sfruttare la splendida fotocamere da 5 milioni di pixel presente sul Samsung Wave s8500!
IN QUESTO APPUNTAMENTO SCOPRIREMO COME SFRUTTARE LE POTENTI API DI BADA PER CATTURARE IMMAGINI DALLA FOTOCAMERA. RINTRACCEREMO ANCHE I VOLTI PRESENTI NELLE IMMAGINI SCATTATE. INFINE INSTALLEREMO TUTTO SU TELEFONO WAVE S8500
CD WEB
MediaSample.zip
dei rettangoli. Non allarmatevi, non scriveremo complessi programmi di image processing ma, grazie alle API presenti in tutti i telefoni Powered by BADA, potremo semplicemente richiamare i servizi di cui abbiamo bisogno nostro uso e consumo. Qualche anno fa, uscirono le prime fotocamere digitali compatte in grado di scattare solo quando tutti i presenti nella foto sfoggiavano un gran sorriso, e qualcuno si sar chiesto come ci fosse possibile, la risposta proprio grazie alla Face Recognition Science. Tali feature possono essere applicate non solo alla ludica fotogra a, ma anche e soprattutto nel campo della sicurezza. La stessa Microsoft, presentando il suo nuovo sistema operativo, ha dichiarato che in futuro il 100% dei PC avranno a disposizione una webcam, e quindi non si dovranno pi inserire password per accedere ad una postazione condivisa, ma sar su ciente presentarsi con il proprio viso di fronte al computer, e il sistema operativo stesso valuter se dare laccesso o meno e con quali privilegi.
PARTIAMO DALLE IMMAGINI

REQUISITI
Conoscenze richieste Linguaggio C/C++, preferibilmente dimestichezza con lambiente Eclipse Software Windows XP, Vista, o Windows 7 Privilegi di amministratore Scheda con supporto ad OpenGL 1.5 correttamente congurato Impegno
COSA REALIZZEREMO
Scopo del nostro programma sar quello di ricevere una qualsiasi foto, questa sar prima di tutto visualizzata su schermo, e in seguito studiata per cercare dei volti umani. Una volta trovati, il programma traccer dei rettangoli verdi per evidenziarli, il risultato ottenuto sar simile a quello che vedete nella in Fig. 1 e in Fig. 2. Successivamente spiegheremo come integrare questa funzionalit con la fotocamera del nostro device.
Attraverso il namespace Media::Image avremo accesso a tutta una serie di API in C/C++ per elaborare ogni tipo di immagine. Per elaborare intendiamo la possibilit di fare coding/decoding di unimmagine, scalarla, comprimerla o copiarla in memoria. I formati attualmente supportati da BADA sono i seguenti: Bitmap formats 16-bit RGB565, 32-bit ARGB8888, 32-bit R8G8B8A8, Input formats (formati che riesce a visualizzare o manipolare): BMP, GIF, JPEG, PNG, TIFF, WBMP, Output formats (formati che riesce anche a scrivere): BMP, JPEG, PNG
PARTIAMO CON IL NUOVO PROGETTO

Create un nuovo programma di nome MediaSample di tipo Bada form based Application e completate il wizard. Per il nostro esempio abbiamo usato una foto di una nota coppia di attrici, Judi Dench e Cate Blanchet. Limmagine, che potete trovare insieme al programma completo, dentro la directory \Home, propone le due donne quasi a gura intera, e i volti non sono propria-
FACE DETECTOR
Il progetto che realizzeremo oggi un un programma che si occupa di visualizzare una foto sullo schermo, studiarla per rintracciare dei volti umani ed evidenziarli tramite
42 / Ottobre 2010

#include <FGraphics.h> #include <FIo.h> #include <FMedia.h>
MOBILE
mente in primo piano, quindi una vera sfida per il nostro Samsung BADA! La prima cosa da personalizzare la form, doppio clic sul solito file IDF_FORM1.xml e personalizziamo laspetto, i colori e il title (nel nostro caso devAPP.it & ioProgrammo). Importante in questa fase spostare anche il pulsante OK in fondo alla schermata, e gi che ci siamo cambiamo la propriet text in Face Detector.
e subito sotto i seguenti namespace:

using namespace Osp::Base; using namespace Osp::Media; using namespace Osp::Graphics; using namespace Osp::Io; using namespace Osp::Uix;
PrePariamo il file form1.h

Ora apriamo il file Form1.h e, nella sezione public, aggiungiamo le seguenti due dichiarazioni a metodi che andremo a sviluppare nel file Form1.cpp:
result FaceDetect(void); result DrawElement(const Osp::Graphics::Rectangle& rect);
using namespace Osp::Ui; using namespace Osp::Ui::Controls;
Dichiariamo una costante per spostare le immagini e i rettangoli di 50 pixel in basso, successivamente spiegheremo meglio il motivo:
#define TRASLAMENTO_VERTICALE 50
Sempre nello stesso file, poco pi in basso, nella sezione protected, dichiariamo questi tre oggetti:
Osp::Graphics::Bitmap * bmp_; Osp::Graphics::Rectangle bmprect_; Osp::Base::Collection::IList *pFaceDetectList;
Ora dobbiamo occuparci di scrivere il codice vero e proprio, spostiamoci allinterno del metodo OnInitializing e subito dopo la definizioni e binding del pulsante IDC_ BUTTON_OK, e subito prima dellistruzione return inseriamo il seguente codice:
Image decoder;
//Dichiariamo un oggetto di nome decoder e tipo Image // forziamo il richiamo del suo costruttore
E per finire, sempre nella sezione public, ma stavolta in quella che raccoglie i metodi virtuali, inseriamo la seguente dichiarazione:
virtual result OnDraw(void);
decoder.Construct();
Fig. 1: La semplice interfaccia della nostra app
//Decodifichiamo limmagine dal file su disco, dentro loggetto dichiarato bmp_ = decoder.DecodeN(L/Home/3212.jpg, BITMAP_ PIXEL_FORMAT_ARGB8888); //Se non ci sono problemi settiamo loggetto bmprect_ di tipo rectangle con le //dimensioni delloggetto caricato. //Abbiamo settato la y dellimmagine a 50 invece che 0 perch altrimenti //verrebbe in parte coperta dal title della form. if(bmp_) { bmprect_.width = bmp_->GetWidth(); bmprect_.height = bmp_->GetHeight(); bmprect_.x = 0; bmprect_.y = TRASLAMENTO_VERTICALE;
Il primo metodo, FaceDetect, come facile immaginare, si occupa di rintracciare i volti umani allinterno della foto. I volti possono essere un numero imprecisato, quindi il risultato verr messo in una lista pFaceDetectList. Loggetto bmp sar limmagine che andremo a visualizzare sul dispositivo, mentre bmprect altro non che un rettangolo con le coordine x, y, width e height dellimmagine. Il metodo DrawElement si occupa semplicemente di disegnare dei rettangoli arrotondati intorno ai visi, riceve infatti un oggetto di tipo Rectangle. Molto pi importante il metodo virtuale OnDraw(void) che viene richiamato ogni volta che si forza il refresh di una schermata tramite il comando RequestRedraw(true);
Passiamo al file form1.cPP

Prima di tutto occupiamoci degli import, accertiamoci che siano presenti o nel caso aggiungere i seguenti include:
#include <FBase.h> #include <FUix.h>
In questo modo avremo loggetto bmp caricato con limmagine letta da disco, e loggetto bmprect_ che un oggetto Osp::Graphics::Rectangle con le dimensioni dellimmagine e le coordinate di dove vogliamo visualizzarla (x = 0, y = 50). Abbiamo spostato le coordinate di 50 punti in basso (la coordinata 0,0 identifica langolo
Fig. 2: il programma dopo la pressione del tasto
Ottobre 2010 / 43
MOBILE
superiore sinistro del dispositivo), altrimenti limmagine sarebbe stata parzialmente coperta dalla propriet Title della form. Naturalmente quando disegneremo in nostri rettangoli verdi sul canvas, dovremo ricordarci di tale aggiustamento spostando anche tutti i rettangoli di 50 pixel in basso. Abbiamo quasi terminato di modificare il metodo OnInitializing, prima di richiamare il return dobbiamo forzare il refresh della form tramite listruzione:
RequestRedraw(true);
recupera il canvas della form su cui scriveremo. Se stato recuperato correttamente il canvas, e se loggetto bmp_ stato decodificato con successo, allora lo disegneremo alla posizione e con le dimensioni specificate nelloggetto bmprect_ Successivamente rilasceremo il canvas e testeremo se la lista dei volti contiene degli elementi. La prima volta, la lista risulter vuota, quindi non eseguir il ciclo for, ci torneremo successivamente.
RinfRescaRe lo scheRmo
Il metodo OnDraw, viene richiamato ogni volta che la form ha necessit di essere ridisegnata, e pu essere richiamato in automatico dal sistema o forzato dallo sviluppatore tramite listruzione RequestRedraw(true). Quello che faremo in questo metodo sar recuperare loggetto CANVAS dove andremo a dipingere i nostri oggetti, e poi presentare limmagine a video ed eventualmente i vari rettangoli intorno ai volti. Segue il codice completo del metodo:
result Form1::OnDraw() { Canvas * canvas = this->GetCanvasN(); if(canvas) { if(bmp_) { canvas->DrawBitmap(bmprect_, *bmp_, Rectangle(0,0,bmp_->GetWidth(), bmp_>GetHeight())); } delete canvas; } if(pFaceDetectList) ............
il metodo facedetect
Il metodo che segue, verr richiamato alla pressione del pulsante Face Detector sulla Form. Abbiamo preferito fargli usare un nuovo oggetto di tipo Image, per mantenere svincolata la fase di detection e valorizzazione dellarray con i volti trovati, dalla visualizzazione dellimmagine sul display del telefono, ma nulla ci vieta di centralizzare il tutto con un unico oggetto. Il programma legge nuovamente dal file system limmagine con le due attrici e la decodifica in memoria nelloggetto pImg. Fatto questo rilascia loggetto image e, se riuscito a decodificare in maniera corretta limmagine, allora prosegue con il detect. La parte che ci interessa maggiormente quella che istanzia loggetto di tipo FaceDetector. sufficiente dichiarare loggetto, e richiamare il suo costruttore:
FaceDetector faceDetect; r = faceDetect.Construct();
NOTA
rintracciare e riconoscere
Dobbiamo distinguere il face detection dal face recognition. Il primo identifica un volto, il secondo lo distingue tra quelli gi riconosciuti (utile ad esempio per taggare delle foto in automatico)
Successivamente, tramite listruzione che segue, il sistema estrarr tutti gli oggetti rectangle e valorizzer la lista pFaceDetecList.
pFaceDetectList = faceDetect.DetectFacesFromStill ImageN(*pImg);
Listruzione:
Canvas * canvas = this->GetCanvasN();
Abbiamo quasi terminato, dobbiamo solo gestire i vari errori e liberare le risorse, inoltre appena prima di terminare il metodo richiamare RequestRedraw(true);
result Form1::FaceDetect(void) { Bitmap* pImg = null; result r = E_SUCCESS; Image *image = new Image(); r = image->Construct(); String path(L/Home/3212.jpg); pImg = image->DecodeN(path, BITMAP_PIXEL_
Fig. 3: L output del programma con le coordinate dei volti rintracciati
44 / Ottobre 2010

FORMAT_RGB565); //delete the object created delete image; } if (pImg) { int width = 0, height = 0; width = pImg->GetWidth(); height = pImg->GetHeight(); if (width > 0 && height > 0) { //Detect faces FaceDetector faceDetect; r = faceDetect.Construct(); pFaceDetectList = faceDetect.DetectFaces FromStillImageN(*pImg); if(pFaceDetectList == null) { delete pImg; pImg = null; return r; } } } delete pImg; pImg = null; RequestRedraw(true); return r; } Dimension d; d.width = 8; d.height = 8; Canvas * canvas = this->GetCanvasN(); canvas->SetLineWidth(5); canvas->SetForegroundColor(Color::COLOR_ { result r = E_SUCCESS; pRect->height );
MOBILE
pRect->y+=TRASLAMENTO_VERTICALE; DrawElement( *pRect);
In pratica, nel caso in cui la lista fosse diversa da null, allora itereremo tutti gli oggetti contenuti. Per ogni oggetto recuperato (di tipo Osp::Graphics::Rectangle) scrivemo le info dettagliate sul log Tramite AppLog, aggiungeremo i famosi 50 pixel alla coordinata Y del rettangolo appena recuperato, e lo visualizzeremo nel canvas tramite la funzione DrawElement, passandogli il rettangolo letto e modificato.
NOTA
tutorial online
Potete avere maggiori informazioni circa lutilizzo della fotocamere e altri media nel documento pdf badaTutorial.Media.pdf allinterno della sezione Developer di www.bada. com
la funzione DrawelemenT
Un ultimo sforzo, dobbiamo scoprire come tracciare i rettangoli!
result Form1::DrawElement(const Osp::Graphics::Rectangle& rect)
GREEN);
Tracciamo i reTTangoli
Torniamo al metodo OnDraw: se ricordate, prima avevamo tralasciato la parte finale perch in quel momento eravamo certi che la lista era vuota. Dal momento che con il pulsante abbiamo valorizzato tale lista, e che abbiamo forzato il richiamo del metodo OnRedraw, dobbiamo vedere ora cosa accade!
if(pFaceDetectList) for(int i=0; i < pFaceDetectList->GetCount(); i++) { Osp::Graphics::Rectangle* pRect = (Osp::Graphics::Rectangle*)pFaceDetectList->GetAt(i); AppLog(Volto: %d {x=[%d], y=[%d], width=[%d], height=[%d]}, i+1, pRect->x, pRect->y, pRect->width,
if (canvas->DrawRoundRectangle(rect, d) != E_ SUCCESS) return r; return r;
Fig.4: Nuovi dispositivi Samsung correttamente installati
Fig. 5: Schema dei vari frames / panel
Ottobre 2010 / 45
MOBILE
}

result rt = E_SUCCESS; ClearLastResult(); if ( pCamera->GetCaptureFormat() == PIXEL_FORMAT_ JPEG ) { File file; rt = file.Construct(String(L/Home/Sample.jpg), Lw, true); if (IsFailed(rt)) { SetLastResult(rt); return; }
La funzione recupera il Canvas su cui scrivere (vedere la funzione di visualizzazione dellimmagine), setta il colore verde (SetForegroundColor) e la grandezza della riga a 5 pixel (SetLineWidth), e prepara un oggetto di tipo Dimension. Tale oggetto ci serve semplicemente per scegliere la curvatura del nostro rettangolo, ossia quanto dovr essere tondeggiante! Fatto tutto ci, non dobbiamo far altro che richiamare la funzione DrawRoundRectangle passandogli il rettangolo recuperato da FaceDetect e loggetto Dimension per la sbordatura!
considerazione finali sul Progetto

In Eclipse, nella sezione OUTPUT, noterete tutti i messaggi che abbiamo scritto tramite la funzione AppLog. Avremmo anche potuto scrivere tutto il codice riguardante la scrittura dei rettangoli direttamente nel metodo FaceDetect, e togliere cos il codice dalla funzione OnDraw, avremmo per dovuto avere laccortezza di richiamare il metodo canvas->Show(); allinterno di DrawElement per ogni rettangolo o fare un altro metodo refresh. In definitiva, meglio avere il codice di scrittura nel metodo OnDraw, altrimenti in caso avessimo tantissimi rettangoli potremmo avere dei problemi di flickering, ossia immagini che lampeggiano dovuti ai continui refresh. Riportiamo qui poi i passi per visualizzare unimmagine sul dispositivo: 1. Dichiarare loggetto di tipo immagine Image *image = new Image(); 2. Forzare il richiamo al suo costruttore :image::Construct() 3. Decodificare limmagine e verificare il codice di ritorno :Image::DecodeN() 4. Creare un rettangolo (area) dove visualizzare limmagine : Graphics::Rectangle() 5. Prendere listanza del canvas dove disegnare : App::IAppFrame::GetCanvasN() 6. Disegnare la bitmap nel rettangolo: Graphics::Canvas::DrawBitmap() 7. Forzare il refresh del canvas: Graphics::Canvas::Show()
rt = file.Write(capturedData ); if (IsFailed(rt)) { SetLastResult(rt); return; } } // Restart preview rt = pCamera->StartPreview(&bufferInfo,true); SetLastResult(rt);
Fig.6: I certificati correttamente installati sul device
Se abbiamo settato come JPEG il metodo di cattura/ registrazione, allora prende il fotogramma che state vedendo in quel momento e lo scrive nella directory dellapplicazione come /Home/Sample.jpg. Quindi chiaro che se implementassimo tale sorgente nel nostro applicativo, non dovremmo far altro che scrivere questo codice PRIMA del richiamo del metodo di FaceDetect, una volta avuta la conferma che abbiamo scritto correttamente il fotogramma sul filesystem dellapplicazione dovremmo semplicemente cambiare il valore della variabile path dal vecchio:
String path(L/Home/3212.jpg);
NOTA
al nuovo:
String path(L/Home/Sample.jpg );
un riferimento sicuro
Tenete sempre a portata di mano lAPI reference di bada al link: http://tinyurl.com/badaref
rintracciamo i volti in realtime tramite la fotocamera

Allinterno del percorso <BADA_SDK_HOME>\Examples\ MediaContent\Media\src\CameraExample.cpp troverete un file sorgente per poter accedere facilmente alla Fotocamera / Videocamera montata sul vostro dispositivo. Trovate il metodo CameraExampleListener::OnCa meraCaptured, come potete vedere piuttosto semplice.
E il programma eseguir lo scanning direttamente sullimmagine appena catturata! I passi per fare il preview della fotocamera sono i seguenti: 1. Create un form tramite Ui::Controls::Form. 2. Aggiungete il form al frame dellapplicazione tramite il metodo AddControl() 3. Settate lorientation, se portrate o landscape: For m::SetOrientation(ORIENTATION_LANDSCAPE) 4. Create un overlay panel usando Ui::Controls:: OverlayPanel.
46 / Ottobre 2010
MOBILE
5. Aggiungete loverlay panel al form tramite il metodo AddControl() 6. Settate il form corrente tramite Ui::Controls::Fram e::SetCurrentForm. 7. Disegnate e mostrate il frame per visualizzare il preview della fotocamera: Ui::Control::Draw(), Ui::Control::Show() 8. Raccogliete in background le informazioni sullimmagine visualizzata dalloverlay panel: GetBackgroundBufferInfo() (Il buffer information object un oggetto di tipo Graphics::BufferInfoobject.) 9. Visualizzate le informazioni sul preview: StartPreview() e Media::Camera::StartPreview(b ufferInfo) Allinterno della cartella <BADA_SDK_HOME>\ Examples\MediaContent\Media\src\ troverete tantissimi esempi su come caricare un video, controllare la fotocamere o registrare un video, ma purtroppo nulla sul face detection!
installiamo i certificati
Samsung richiede che i device usati per le prove siano certificati. Per copiare i certificati sul telefono dovremo impostarlo come dispositivo USB, andiamo sul telefono, clicchiamo su settings, poi connectivity e, nella sezione USB, scegliamo Mass storage. Clicchiamo su Set: il nostro PC rilever un nuovo dispositivo di memorizzazione e gli assegner una lettera (nel mio caso W: ). Dal PC copiamo il file <BADA_SDK_HOME>\Tools\sbuild\rootCACert.cer nel nuovo disk removibile, scegliamo la directory \Others. Ora torniamo a lavorare sul telefono, selezioniamo licona My files e una volta aperto il folder Others. ATTENZIONE: se il telefono impostato il lingua italiana dovrete trovare al posto di My files, Archivio, e al posto di Others, Altro. Clicchiamo ora sul certificato: vi verr chiesto se volete installarlo, date conferma. Una volta fatto, dovrebbe apparirvi una schermata come quella della Fig. 6.
NOTA
incontra altri sviluppatori

Al link http://developer. bada.com/forum/ trovate tutti i forum BADA suddivisi per sezioni: Notice, bada C/ C++, IDE& SDK, Developer Site, bada General
installiamo il device samsung wave s8500

Installare le applicazioni sul device, almeno la prima volta, parecchio macchinoso, e richiede che vengano seguiti gli step che vi diremo con molta attenzione. Per prima cosa assicuratevi di avere la versione dellSDK almeno 1.0.0b3, per la verifica sar sufficiente andare su ->Help->About bada IDE, dovrebbe aprirsi una schermata di info con la versione, nel mio caso: bada IDE for C and C++ Developers Version: 1.0.0b3. Prima di connettere il dispositivo al vostro PC dovrete installare il programma Kies che dovreste trovare sul CD che vi hanno dato con il dispositivo (Kies_1.5.1.10071_32_1.exe). Installatelo sul vostro PC e, solo dopo aver completato linstallazione, collegate il device al PC tramite il cavo USB fornito con il telefono. Spostatevi ora nella cartella <BADA_ SDK_HOME>\Tools dovreste trovare un file zippato di nome S8500-Driver-V5_02_0_0.zip, decomprimetelo nella nuova cartella S8500-Driver-V5_02_0_0 sempre sotto <BADA_SDK_HOME>\Tools. Quando vi verr richiesto di specificare una directory dove si trovano i driver, selezionate la directory: <BADA_ SDK_HOME>\Tools\ S8500-Driver-V5_02_0_0\i386. Verificate che non ci siano problemi di installazione, potrebbe venirvi richiesto di riavviare il PC. Alla fine dellinstallazione controllate nel pannello di controllo di Windows che siano installati due nuovi modem (Pannello di controllo->Gestione dispositivi): Samsung Mobile Modem in V2 in Modem. Samsung Mobile Modem Diagnostic Serial Port V2 (WDM) in Port.
testiamo laPPlicazione sul telefono

Negli articoli precedenti, se ricordate, quando compilavamo per il simulator nella directory Binaries del progetto vedevamo apparire sempre un file [nome progetto].exe. Clicchiamo con il pulsante destro del mouse sul nome del progetto, scegliamo la voce Build Configuration, Set Active e Target-Debug, il nostro scopo quello di debuggare il programma in esecuzione sul telefonino, se invece eravamo pronti a rilasciarlo per la verifica a Samsung avremmo dovuto scegliere Target-Release. Scegliamo dal menu di Eclipse, project->Build All o in alternativa CTRL+B, e speriamo che non ci siano errori. I pi attenti noteranno che nella directory Binaries, sotto al file MediaSample.exe [x86] apparso un nuovo eseguibile, MediaSample.exe [arm/le]. Siamo quasi pronti, prima dobbiamo assicurarci di connettere il dispositivo al PC e impostarlo per lesecuzione in debug anzich lasciarlo come avevamo fatto prima in Usb Storage. Andiamo sul telefono, clicchiamo su settings, poi connectivity e nella sezione USB scegliamo USB debugging. Clicchiamo su Set in basso a sinistra per confermare la nostra scelta, e ora da eclipse, selezioniamo il file exe per piattaforma ARM, pulsante destro del mouse, Debug As->Bada Target Application. A questo punto lapplicazione verr copiata sul telefono, e le verr assegnata licona che avremo scelto. Se vogliamo fermare lesecuzione del programma alla pressione del tasto Face Detector non dovremo far altro che aggiungere un breakpoint nel file Form1 nel metodo OnActionPerformed al richiamo del metodo FaceDetect()! Abbiamo cos concluso la serie di articoli dedicati alla programmazione di BADA spero che siano serviti a farvi incuriosire e farvi immergere in questo stimolante ambiente di sviluppo. Gino Sarnieri
LAUTORE Gino Sarnieri, consulente presso varie aziende di Roma e del Lazio un collaboratore attivo della community italiana di programmazione iPhone e mobile devAPP (www. devapp.it). Sviluppa in molti dei principali linguaggi di programmazione, da Java a C/C++, da PHP ad Adobe Flex ed Object C. Da alcuni mesi sta rilasciando applicazioni per iPhone, iPod Touch ed iPad. Per i dettagli si rimanda al sito www.sviluppoiphoneitalia.com. Per consigli, o dubbi sullarticolo, potete contattarlo al seguente indirizzo email: gsarnieri@gmail.com
Ottobre 2010 / 47
MOBILE
Sencha Touch, il nuovo framework JS per iPhone
IPHONE 4 CON HTML5 E JAVASCRIPT!

SE NON SI HA TEMPO O VOGLIA DI IMPARARE OBJECTIVE-C, IL LINGUAGGIO APPLE PER SVILUPPARE SU IPHONE E IPAD, LE WEBAPP SCRITTE IN SENCHA POSSONO ESSERE UNA VALIDA ALTERNATIVA PER RAGGIUNGERE I SEMPRE PI NUMEROSI FAN DI APPLE
encha Touch un framework Javascript creato da Sencha (lazienda che ha creato Ext.js) per sviluppare applicazioni orientate ai moderni device dotati di schermo touch e multitouch. Compatibile con i browser HTML5 di iPhone, iPad e Android, Sencha Touch permette agli sviluppatori di sfruttare le proprie conoscenze per sviluppare applicazioni del tutto simili a quelle native, sfruttando tecnologie come HTML e CSS senza luso di plugin esterni o tool di sviluppo proprietari. I vantaggi sono notevoli: tutti i device presenti e futuri compatibili con lo standard HTML5 potranno usare la vostra applicazione e, cosa ancor pi importante, non c bisogno di passare attraverso i marketplace u ciali (quello di Apple ad esempio a pagamento) per pubblicare la vostra applicazione. C qualche precisazione da fare per: Sencha Touch ancora in beta e, nonostante sia molto stabile e gi completo, potrebbe ancora variare prima del rilascio u ciale. da sottolineare anche che al momento il framework non permette di sfruttare tutte le feature disponibili sul telefono (come ad esempio la fotocamera). Chi si sentisse poco ferrato su argomenti come HTML5 o Javascript pu rivolgersi ad alternative pi semplici come jQTouch (www.jqtouch.com). Esploreremo le alternative in un paragrafo dedicato pi avanti nel corso dellarticolo.
AL LAVORO!
Creiamo ora il nostro primo le HTML5 usando Sencha Touch. Per lo sviluppo useremo la libreria in versione debug: cosa che ci permetter di individuare subito eventuali errori, a scapito di un piccolo calo delle performance della nostra applicazione. Non preoccupatevi, includendo la libreria di produzione tutto torner alla normalit. Fate attenzione anche allordine di inclusione dei le, come da tradizione Ext.js molto importante! Ecco il nostro le:
<!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content=text/ html; charset=utf-8> <title>La mia prima Applicazione Sencha Touch</ title>  <link rel=stylesheet href=sencha-touch/ resources/css/ext-touch.css type=text/css>  <link rel=stylesheet href=css/main.css type=text/css>  <script type=text/javascript src=sencha-touch/ ext-touch-debug.js> </script> 
CD WEB
sencha.zip
REQUISITI
Conoscenze richieste Basi di programmazione HTML e JavaScript Software Piattaforma Sencha Impegno
SETUP DELLAMBIENTE DI SVILUPPO

Scegliete leditor di codice che pi vi piace, un browser per lo sviluppo (possibilmente basato su Webkit, come Chrome o Safari), installate un webserver qualsiasi (ci servir per recuperare dati da remoto e creare app pi dinamiche) e scaricate il pacchetto Sencha Touch dal sito u ciale. Il pacchetto di 23MB, ma non vi spaventate: oltre alla libreria ext-touch in versione debug e production pieno di esempi e documentazione utile per cominciare a sviluppare con Sencha Touch. Se avete a disposizione un iPhone o un altro smartphone compatibile caricate nel browser del vostro device uno degli esempi presenti nella cartella examples per cominciare ad esplorare il framework.
<script type=text/javascript src=js/index.js> </script> </head> <body> </body> </html>
Il body e rimarra vuoto, perch sar Sencha a creare gli elementi della pagina grazie a Javascript: notate anche lheader HTML5 (senza doctype) e che nellordine abbiamo inserito: il CSS di Sencha, un nostro eventuale CSS (che dovr sempre seguire quello di Sencha), il javascript della libreria e il nostro le javascript dove creeremo la nostra applicazione.
50 / Ottobre 2010

Ext.setup({ onReady: function() { new Ext.TabPanel({ fullscreen: true, type: dark, sortable: true, items: [{ title: Tab 1, html: Questa è la prima tab della nostra applicazione, cls: card card5 }, { title: Tab 2, html: Questa è la seconda tab della nostra applicazione e al suo interno c\è <a href=http://www.google.com>un link</a>, cls: card card4 }, { title: Tab 3, html: <p>La terza tab contiene un\immagine</p><img src=images/senchalogo.png />, cls: card card3 }] }); } }); }, }
MOBILE
Allinterno del nostro tabpanel, le tab sono ora posizionate in basso e contengono dei bottoni, una toolbar inserita allinterno del tabpanel e sui bottoni possiamo inserire delle azioni (lalert dello screenshot) oppure, come fatto per il pulsante della tab in basso, uniconcina di noti ca contenente un piccolo testo o anche solo un numero. Esaminiamo anche questo pezzo di codice per poi passare a qualcosa di pi interessante: come potete vedere lannidamento qui pi presente come dicevamo poco sopra. La barra dockedItems contiene i diversi bottoni. Al pulsante home associato un handler che lancia un alert() allutente. Il codice delle tab praticamente uguale allesempio precedente, ma la di erenza sta tutta in questo pezzetto di codice:
tabBar: { dock: bottom, layout: { pack: center
Eccola qua. Abbiamo creato un tabpanel con tre tab che possiamo popolare con lHTML che pi ci utile: Sencha si occuper di gestire la rotazione dello schermo in modo che la pagina sia sempre coerente con lo schermo, come potete vedere dallo screenshot di Fig.2: le tab sono anche draggabili e riordinabili a seconda delle scelte dellutente. Esaminiamo un po pi da vicino il codice dellesempio: la funzione Ext.Setup() racchiude tutto il nostro codice. quella che viene eseguita per prima, e al suo interno contiene il codice che crea il nostro TabPanel. Il TabPanel (come gli altri oggetti di Sencha) un oggetto che ha alcune propriet (sono moltissime, ne vedremo alcune, per le altre fate riferimento alla documentazione) e contiene degli items (in questo caso le nostre tab) che a loro volta hanno attributi di cui uno il codice HTML da visualizzare. Il codice di Sencha, come quello di Ext.JS tutto un annidarsi di elementi che andranno poi a creare il nostro layout. Ad ogni elemento possono essere associati eventi, chiamate AJAX e tutto linsieme rappresenta la nostra applicazione. Vediamo un altro esempio che ci chiarir meglio il funzionamento di questo annidamento.
Ext.setup({ onReady: function() { new Ext.TabPanel({ fullscreen: true, ...
Queste poche righe indicano al tabpanel di non usare lo stile di default, ma di posizionare il dock in basso e di raccogliere le icone al centro della barra. Come dicevamo in precedenza importantissimo usare la documentazione (davvero ben fatta) per poter districarsi nel mare di opzioni presenti per ciascun componente. Partire dagli esempi inclusi nel download e studiarne il codice un ottimo punto di partenza per chi vuole sviluppare con Sencha.
Fig.1: Uno dei tanti esempi presenti nel pacchetto di download di Sencha
TWITTER IN PALMO DI MANO

Ok, basta giocare. Vediamo come creare un piccolo client twitter con Sencha e le API JSONP di Twitter. Il nostro esempio si occuper di fare una ricerca e mostrare i tweet in una lista con avatar e nickname, usando qualche riga di CSS personalizzato.
Ext.setup({ onReady:function() { var toolbar = new Ext.Toolbar({ dock: top, xtype: toolbar, title: Twitter }); var twitter = new Ext.Component({ title: Twitter, cls: timeline, scroll: vertical, tpl: [ <tpl for=.>, ...
Fig.2 La nostra prima applicazione Sencha
Ottobre 2010 / 51
MOBILE
NOTA
Lesempio di poche righe, ma de etto. Sencha Touch arriva sui vostri computer gi dotato di numerose utilities per richiamare AJAX, una di queste Ext.util.JSONP. request che abbiamo usato in questo caso. La chiamata alle api di twitter gestita in poche righe di codice. Aggiorneremo poi un Ext.Component(), un componente generico di cui dobbiamo creare il markup e fornire i segnaposto per le variabili ritornate dallutitility JSONP. Come potete vedere da questo piccolo pezzo di risultato tornato da twitter:
{ prole_image_url: http://a0.twimg.com/pro le_images/1015100480/avatar_normal.jpg, created_at: Thu, 26 Aug 2010 17:16:47 +0000, from_user: koalalorenzo, metadata: { result_type: recent }, to_user_id: null, text: like disperato re: http://ff.im/pL2r6, id: 22195095101, from_user_id: 366099, geo: null, iso_language_code: eo, source: <a href="http://friendfeed. com" rel="nofollow"> FriendFeed</a> }
La mappa creata centrata sulla nostra posizione attuale. Possiamo fare zoom e navigare la mappa con gli stessi eventi multitouch di Google Maps per iPhone e interagire con le mappe attraverso le API Google Maps: la documentazione allindirizzo http://code.google.com/intl/ it/apis/maps/index.html.
I FORM
Aspetto cruciale delle nostre applicazioni permettere agli utenti di interagire con i nostri dati: Sencha Touch mette a disposizioni component per form ottimizzati per i dispositivi touchscreen, che potete vedere in questo esempio.
var formBase = { scroll: vertical, url : pagina.php, standardSubmit : false, items: [ { xtype: eldset, title: Informazioni, instructions: Compila il modulo, defaults: { required: true, labelAlign: left }, items: [{ xtype: texteld, name : name, label: Nome, autoCapitalize : false }, { ...
IPHONE, IPAD E ANDROID

Sencha Touch compatibile con iPhone, iPod Touch, iPad e dispositivi Android. Con qualche adattamento funziona anche su browser desktop basati su webkit: Chrome, Safari, ecc
Fig.4: Il tabpanel arricchito da pi elementi
Il tweet composto da diverse variabili, alcune di queste sono mappate nel nostro script come potete facilmente vedere: sono lavatar, il tweet stesso e lautore del tweet. Vediamo ora altre peculiarit di Sencha Touch che esamineremo con piccoli esempi.
GEOCODING E MAPPE
Grazie a Sencha Touch e alle API HTML5 possiamo recuperare la nostra posizione e mostrarla sulla mappa. Sencha mette a disposizione un componente dedicato alluso delle mappe, ma dobbiamo comunque includere il le Javascript delle API fornito da Google con il parametro ?sensor=true. In questo modo comunichiamo a Google che stiamo richiamando le sue API da un dispositivo dotato di sensore GPS o AGPS.
Ext.setup({ onReady: function() { var toolbar = new Ext.Toolbar({ dock: top, xtype: toolbar, title: Esempio Google Maps }); ...
una panoramica di quello che possiamo realizzare: i component rispecchiano i classici componenti HTML pi quelli che potete vedere sulliPhone.
LISTE ANNIDATE
Come ultimo componente daremo unocchiata alle liste annidate. Si tratta di una specie di wizard presente in moltissime applicazioni iPhone. Permette di a nare la selezione di un particolare valore in base ai valori precedenti.
Ext.setup({ onReady: function() { var nestedList = new Ext.NestedList({ fullscreen: true, items: [{ text: Opzione A, items: [{ text: Opzione A.1, customAttribute: 123,
Fig.5: Il nostro piccolo client twitter
52 / Ottobre 2010

items: [{ text: Opzione A.1.a },{ text: Opzione A.1.b }] },{ text: Opzione A.2, customAttribute: 389 }] },{ text: Opzione B, items: [{ text: Opzione B.1, customAttribute: 233 },{ text: Opzione B.2, customAttribute: 2390 }] },{ text: Opzione C, items: [{ text: Opzione C.1, customAttribute: 903 },{ text: Opzione C.2, customAttribute: 77 ...
MOBILE
PhoneGap un framework opensource per applicazioni HTML5 e CSS3. Il framework supporta molte funzionalit degli smartphone moderni: geolocation, vibrazione, fotocamera, bussola, ecc ed compatibile con iPhone, Android, Blackberry, Symbian e Palm. www.phonegap.com Titanium permette di sviluppare applicazioni native per desktop e mobile (un po come Adobe AIR, anchesso in arrivo su dispositivi Android) e ha diversi componenti gi pronti per la realizzazione di interfacce. www.appcelerator.com iWebkit un framework dedicato ad iPhone e iPod Touch: leggero e semplice da usare permette di creare webapp per dispositivi Apple in maniera facile e veloce. http://iwebkit.net/ Di jQTouch (un plugin per jQuery dedicato a dispositivi mobili) abbiamo gi parlato in un altro numero di ioProgrammo. La sintassi per utilizzarlo semplice come quella di un qualsiasi plugin jQuery: assolutamente da provare... www.jqtouch.com jQuery non stata a guardare: in arrivo per ne anno jQueryMobile. Potete tenere docchio lo stato dello sviluppo allindirizzo: www.jquerymobile.com.
Fig.6: Google Maps sul nostro iPhone con Sencha Touch
Ovviamente il componente adatto per la navigazione orizzontale e quella verticale. Guardate lo screenshot per un esempio di implementazione: come al solito si procede per annidamento dei componenti uno allinterno dellaltro.
CREARE APPLICAZIONI PER IPAD

Sencha Touch pensato anche per sviluppare applicazioni iPad. Oltre ai classici componenti esistono speci ci componenti per iPad, gli overlay: box di testo che appaiono in posizioni prede nite. La sintassi per lo sviluppo di applicazioni iPad identica in quanto il framework pensato proprio per uniformare i dispositivi. Qualora per serva dover distinguere tra iPhone e iPad, si pu fare a damento sullutility Ext.platform che permette di distinguere tra i diversi dispositivi con metodi tipo Ext. platform.isIphone che ritorna true o false a seconda del dispositivo su cui ci si trova.
CONCLUSIONI
Sencha Touch un framework molto potente. Nonostante sia ancora in beta e non supporti completamente tutte le feature disponibili sui pi moderni smartphone, un buon compromesso che permette agli sviluppatori di fornire unesperienza native-like agli utenti che usano le loro applicazioni. La guerra del futuro delle applicazioni mobili passa anche per Sencha Touch e framework similari: se le webapp saranno sempre pi simili alle applicazioni native sviluppate in linguaggi come Objective-C (o Java nel caso di Android) e HTML5 prender sempre pi piede mettendo a disposizione funzionalit sempre pi avanzate, per gli utenti sar indi erente usare una webapp piuttosto che una che unapplicazione, magari a pagamento. La vivacit e linnumerevole numero di framework mobili disponibili gratuitamente sicuro indice di un settore in espansione: il segreto per riuscire nel mondo delle applicazioni mobili sta nel cogliere loccasione giusta e sfruttare le proprie conoscenze per essere sempre al passo con i tempi e perch no, le mode del momento. Francesco Napoletano
Fig.7: Liste annidate con Sencha Touch
LAUTORE Francesco Napoletano socio della Piko Design (www.pikodesign.it) dove si occupa di tutta la parte di sviluppo web (dal PHP al JavaScript, passando per Flex ed actionscript 3.0). Il suo blog www.napolux. com tra i pi conosciuti nellambiente web italiano.
ALTERNATIVE A SENCHA TOUCH

Per concludere il discorso diamo unocchiata alla concorrenza. Sono molti i framework disponibili sul mercato, in gran parte gratuiti. Potete provarli e sicuramente trovare quello che pi si addice al vostro stile di sviluppo:
Ottobre 2010 / 53
MOBILE
Push notification vs local notification
NOTIFICATION: CHE TEMPO FA?

uesto mese a ronteremo un argomento piuttosto particolare riguardante la programmazione dei nostri amati melafonini (ma anche iPad o iPod Touch!): le local noti cation e le push noti cation. Lo scopo delle noti che fare in modo che unapplicazione possa informare lutente che ci sono dei messaggi (noti che) per lui, mentre lapplicazione non in esecuzione in primo piano. Apple garantisce inoltre che lutente non avr percezione (se non dal contenuto forse) che la noti ca arrivata sia di tipo local o push. A questo link potete approfondire il concetto: http://tinyurl.com/inotic Avrete decine di applicazioni installate che fanno uso di queste feature, la stessa Facebook app richiede il permesso di potervi inviare noti che (push), cos da informarvi ogni volta che qualcuno commenta una vostra foto o scrive sulla vostra bacheca. di cile non fare confusione tra le push noti cation, e le local noti cation. Le prime sono state introdotte con la versione dellsdk 3.0, le secondo con lavvento del 4.0, che ha introdotto per la prima volta il multitasking anche per le applicazioni non scritte da Apple. Non dobbiamo per commettere lerrore di pensare che le local noti cation siano un rimpiazzo delle push, perch in verit risolvono altri problemi, e vengono sfruttate in contesti di erenti: Le Local noti cations sono schedulate da unapplicazione e scritte direttamente sullo stesso dispositivo ospite. Le Push noti cations, anche conosciute come remote noti cations, sono inviate da unapplicazione (tramite un server remoto) allApple Push Noti cation Service, il quale garantir di inviare la noti ca tramite servizio WEB al device sul quale lapplicazione installata. Volendo sintetizzare, possiamo dire che le local notication danno la possibilit di scrivere nel calendario e nella sveglia delliPhone, mentre le push sono un sistema complesso, per inviare messaggi esterni al dispositivo, informazioni di cui in quel momento, lapplicazione installata non a conoscenza.
UNOCCASIONE PER SCOPRIRE LE POTENZIALIT DI PUSH NOTIFICATION E LOCAL NOTIFICATION, ATTRAVERSO LA REALIZZAZIONE DI UNAPPLICAZIONE CHE CI TIENE AGGIORNATI SULLE TEMPERATURE DI UNA SPECIFICA LOCALIT
CD WEB
Temperature.zip
chiaro quindi, che se sto scrivendo unapplicazione stile scadenzario, in cui lutente mette delle date e dei messaggi per ricordarsi di qualcosa, le local noti cation sono la scelta consigliata, ma se devo avere un programma che deve esser svegliato da eventi esterni, quali appunto il fatto che qualcuno abbia scritto sulla mia bacheca Facebook o sapere che lindomani si prepara uno sciopero, allora le push noti cation sono le uniche che possano risolvere il mio caso.
LAPPLICAZIONE TEMPERATURE
Per presentare le noti che di tipo Push (remote notication) abbiamo deciso di scrivere un programma in XCode che, una volta lanciato, chieda allutente di scegliere tra 20 localit prede nite. Una volta scelta la localit, il dispositivo invier la richiesta al nostro server abbinando il devicetoken con la preferenza, e chieder di essere chiuso. Ogni giorno (a seconda dello scheduling che decideremo), invieremo le temperature rilevate della localit scelta al dispositivo dellutente, senza che questi debba mai pi lanciare lapplicativo. Il sito da cui attingeremo le informazioni sulle temperature (a solo scopo didattico) il seguente: www.meteoindiretta.it come potete vedere, in fondo alla pagina ci sono i rilevamenti delle principali citt italiane.
REQUISITI
Conoscenze richieste Object C, dimestichezza con lambiente XCode, basi di PHP, MySQL Software Mac OS 10.6.x o superiore, AMP ( apache, mysql, php) lato server. Snow Leopard, xcode 3.0 (per le push notication) e/o xcode 4.0 per le local notication Impegno
PARSER PHP LATO SERVER

Abbiamo scritto un programma in PHP di una cinquantina di righe di codice per fare il parsing della pagina ed estrapolare le localit con relative temperature minime e massime. Questo le lo chiameremo temperature.php. Per ora il parser scrive semplicemente a video i valori, poi lo modi cheremo per spedire i messaggi push.
<?php
54 / Ottobre 2010

set_time_limit(0); $handle = fopen(http://www.meteoindiretta.it/, rb); $riga = ; $initLocalita=0; $localita = ; while (!feof($handle)) { $riga = fgets($handle, 4096); if(strpos($riga, <td width=60px bgcolor=#E6E6E6>Meteo</td>)>0) { $initLocalita=1; } if(strpos($riga, title=meteo )>0 && $initLocalita==1) { ... ...
MOBILE
MESSAGGI:
CREATE TABLE àpns_messages` ( `pid` int(9) unsigned NOT NULL auto_increment, `fk_device` int(9) unsigned NOT NULL, `message` varchar(255) NOT NULL, `delivery` datetime NOT NULL, `status` enum(queued,delivered,failed) character set latin1 NOT NULL default queued, `created` datetime NOT NULL, `modied` timestamp NOT NULL default 0000-00-00 00:00:00 on update CURRENT_TIMESTAMP,
PREFERENZE della localit scelta associata al device:

CREATE TABLE àpns_notiche ` ( `pid` int(9) unsigned NOT NULL auto_increment, àppname` varchar(255) NOT NULL, àppversion` varchar(25) default NULL, `localita` char(64) NOT NULL, PRIMARY KEY (`pid`), ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT=Memorizza tutte le notiche;
Come vedete, il codice molto semplice: apre un socket sulla pagine in questione e legge le localit e le temperature facendo un po di pulizia delle singole righe lette. Naturalmente questo spezzone di codice non fa altro che recuperare le temperature di tutte le localit e le stampa a video, ancora non su ciente per il nostro scopo. Quello di cui avremo bisogno : 1. Un client XCode (la nostra applicazione per iPhone) che si registra sul nostro sito inviandoci il devicetoken del dispositivo,altre info accessorie e la localit di interesse 2. I certi cati lato server da creare in locale sul nostro Mac e spediti ad Apple. 3. Un programma lato server che recupera le informazioni e invia i messaggi ai dispositivi Naturalmente, per fare qualcosa di funzionante nella realt avremmo bisogno anche di un database per memorizzare i dispositivi e i messaggi sul server e gestire il tutto con una macchina a stati. Lato server realizzeremo una classica architettura LAMP, ossia formata dalle quattro componenti Linux, Apache, MySql, e PHP. Per il database prepariamo le seguenti tre tabelle: DEVICES_REGISTRATI:
CREATE TABLE àpns_devices` ( `pid` int(9) unsigned NOT NULL auto_increment, àppname` varchar(255) NOT NULL, àppversion` varchar(25) default NULL, `deviceuid` char(40) NOT NULL, `devicetoken` char(64) NOT NULL, `devicename` varchar(255) NOT NULL, `devicemodel` varchar(100) NOT NULL, `deviceversion` varchar(25) NOT NULL, `pushbadge` enum(disabled,enabled) default disabled, ...
Le prime due tabelle e parte del codice PHP sono liberamente tratti e modi cati per il nostro scopo dal progetto Open Source Easy APNS (trovate il progetto completo al link www.easyapns.com . Una volta installate sia la componente apache / php che la componente mysql dovremo iniziare a personalizzare le classi. Per la registrazione del dispositivo e linvio dei messaggi ad apple quasi tutto gi pronto, dovremo per gestire le personalizzazioni di servizio, come il setting della localit. A tal scopo scriviamo un nuovo le PHP che supporti easy pns, e che chiameremo gestione_temperature.php
<?PHP include(classes/class_APNS.php); include(classes/class_DbConnect.php); $db = new DbConnect(); $db->show_errors(); $apns = new APNS($db); if($_GET[action]==aggiungi) { $apns->settaLocalita( $_GET[appnam], $_GET[appversion], $_GET[devicetoken], $_GET[localita]); } ?>
NOTA
LA SCELTA DELLUTENTE
Lutente ha completo controllo sul tipo di notiche che pu ricevere, baster andare sul menu IMPOSTAZIONI del device, e scegliere il menu NOTIFICHE.
Ottobre 2010 / 55
MOBILE
Fatto questo, dovremo ora modi care la classe preesistente classes/class_APNS.php per aggiungergli il metodo settaLocalita.
public function settaLocalita ( $appname=NULL, $appversion, $devicetoken, $localita) { $ localita = addslashes($localita); // force utf8 encoding if not your default $this->db->query(SET NAMES utf8;);
LAMBIENTE ITUNESCONNECT
Per lavorare con i certi cati push dovremo necessariamente creare una nuova applicazione in iTunes Connect o modi carne una esistente. Colleghiamoci al link http://developer.apple.com entriamo con la nostra username e password e scegliamo il link Iphone Provisioning Portal. Clicchiamo ora sulla voce App IDs per far apparire la lista delle nostre applicazioni. Come dicevamo, possiamo sia creare una nuova applicazione, sia abilitare semplicemente le push noti cation su una esistente. Una volta creata lapplicazione, clicchiamo su con gure (ultimo pulsante a destra). Clicchiamo sul checkbox Enable for Apple Push Noti cation service, e successivamente sul tasto con gure di development (dovremo fare gli stessi passi poi anche per production). Si aprir una schermata con le istruzioni su come procedere. Seguiamo le istruzioni a video, apriamo Keychain Access application (se avete la versione italiana lapplicazione Accesso Portachiavi). Generato il certi cato
NOTA
$sql = INSERT INTO àpns_notiche` (pid,
ESEMPI SU LOCAL NOTIFICATION

Al link http://tinyurl.com/ localntfy trovate un ottimo tutorial con annesso codice sorgente da scaricare, relativo alla creazione delle pi semplici Local Noti cation
appname, devicetoken, localita) VALUES ( NULL, {$appname}, {$appversion}, {$devicetoken}, {$localita} );; $this->db->query($sql); $this->_triggerError(SQL creato : .$sql); }
Come potete vedere, non facciamo altro che inserire un record con la localit scelta associata al devicetoken del dispositivo.
NOTA
Un mini articolo di Apple per risolvere eventuali problemi nel caso non riceviate le noti che push potete trovarlo a questo link (in italiano) http:// support.apple.com/kb/ HT3576?viewlocale=it_IT
IN CASO DI PROBLEMI..
Fig.1: Lista delle applicazioni con labilitazione delle Push Notification
Fig.2: Istruzioni di Apple sullabilitazione delle Push Notification
GESTIONE DEI CERTIFICATI

Questa senza dubbio la parte pi macchinosa! Innanzitutto va precisato che per fare i test di noti che push dobbiamo necessariamente aver aderito al programma Iphone Developer e pagato la quota di 79 euro annuali, dovremo quindi avere accesso ad iTunes Provisioning Pro le, aver gi completato la gestione dei certi cati e aver abilitato la nostra macchina mac come piattaforma di sviluppo associata alla licenza, in pratica dovremmo gi avere esperienza di rilascio di applicazioni ad Apple! Lo scopo dei paragra che seguono, la creazione di due certi cati da mettere sul nostro sito, uno per la sandbox (sviluppo e test), laltro per lambiente di produzione.
come da istruzioni, dovrete salvarlo e cliccare sul tasto continue, ci verr chiesto di fare lupload del certi cato appena creato. Fatto questo per entrambi i certi cati, sia developer che production, dovremo scaricarli e salvarli sul nostro Mac ( le con estensione .cer). Ora dovete installare il certi cato appena scaricato: doppio clic su di esso ed il certi cato verr importato nel Portachiavi. Nel Portachiavi, andate nella categoria I miei certi cati: noterete un certi cato chiamato Apple Development Push Services, cliccateci sopra col tasto destro del mouse e cliccate su Esporta. Salvate il le con il nome temperature-dev-cert.p12. Tornate al certi cato Apple Development Push Services ed espandetelo cliccando sulla freccia grigia alla sua sinistra. Noterete una chiave, cliccateci col tasto destro del mouse ed esportatela salvandola col nome temperature-dev-key.p12.
56 / Ottobre 2010

#!/usr/bin/php <?PHP if(!function_exists(__autoload)){ function __autoload($class_name){
MOBILE
Aprite il terminale e posizionatevi nella cartella dove avete esportato i le sopra citati. Date i seguenti comandi, uno dopo laltro (inserendo la password e la passphrase dove richiesto):
openssl pkcs12 -clcerts -nokeys -out temperature-dev. pem -in temperature -dev.p12 openssl pkcs12 -nocerts -out temperature-dev-key.pem -in temperature-dev-key.p12 openssl rsa -in temperature-dev-key.pem -out temperature-dev-key-noenc.pem
require_once(classes/class_.$class_name..php); } } $db = new DbConnect(); $db->show_errors(); // FETCH $_GET OR CRON ARGUMENTS TO AUTOMATE TASKS $args = (!empty($_GET)) ? $_ GET:array(task=>$argv[1]); // CREATE APNS OBJECT, WITH DATABASE OBJECT AND
cat temperature-dev.pem temperature-dev-key-noenc. pem > dev.pem
Di tutto questo passaggio, il le che ci interessa quello creato con lultimo passaggio, dev.pem, che sar il certi cato per lambiente developer. Ora dovremo fare tutti gli stessi passaggi per il certi cato di produzione, alla ne dovremo avere anche un le pro.pem (o altro nome che preferite).
ARGUMENTS $apns = new APNS($db, $args); ?>
NOTA
CREIAMO LA NOSTRA APP CON XCODE

Creiamo una nuova applicazione, o al solito modichiamone una esistente. Gli unici due framework che dovremo avere laccortezza di importare sono AudioToolbox.framework, e SystemCon guration. framework, ricordiamoci di mettere limport #include <AudioToolbox/AudioToolbox.h>, allinterno del nostro le TemperatureAppDelegate.h. Possiamo ora a modi care il delegate principale del
RIFERIMENTI UFFICIALI
PERSONALIZZIAMO LE CLASSI
Torniamo alla classe class_APNS.php e con guriamola con i path corretti del nostro le system e con i nostri certi cati:
private $sandboxCerticate = /usr/local/psa/home/ vhosts/sviluppoiphoneitalia.com/httpdocs/push/classes/ dev.pem; private $certicate = /usr/local/psa/home/ vhosts/sviluppoiphoneitalia.com/httpdocs/ push/classes/prod.pem; private $logPath = apns.log;
La pagina di riferimento delliOS reference delle push noti cation service di Apple lo trovate al seguente indirizzo email: http://tinyurl.com/iosrfrnce
Modi chiamo i dati di accesso al nostro DB mysql, in class_DbConnect.php: (linea 109) $this->DB_HOST: nome dellhost dove risiede il DB (linea 110) $this->DB_USERNAME: Username di accesso (linea 111) $this->DB_PASSWORD: Password di accesso (linea 112) $this->DB_DATABASE: Database dove avete messo le tabelle easyapn Creiamo la classe apns.php. Questa la classe che chiameremo per registrare i nostri device. Sembra che non faccia nulla, in realt istanzia APNS e gli passa TUTTI gli argomenti:
Fig.3: La gestione delle notifiche da parte dellutente
nostro applicativo. Nel caso il nostro progetto si chiami Temperature, cerchiamo il le TemperatureDelegate.m ed apriamolo. Cerchiamo il metodo:
(void)applicationDidFinishLaunching:(UIApplication *) application
Ottobre 2010 / 57
MOBILE

NSString *urlString = [@/apns.php? stringByAppendingString:@task=register];
e modi chiamolo come segue:

[[UIApplication sharedApplication] registerForRemoteNoticationTypes:(UIRemote NoticationTypeAlert | UIRemoteNoticationTypeBadge | UIRemoteNoticationTypeSound)]; // Clear application badge when app launches application.applicationIconBadgeNumber = 0;
Avrete poi notato le istruzioni aggiunte:

NSUserDefaults *prefs = [NSUserDefaults standardUserDefaults]; [prefs setObject: deviceToken forKey:@deviceTokenPulito];
Le righe 2 e 3 servono per registrare il dispositivo sul nostro server (richiamer il metodo didRegisterForRemoteNoti cationsWithDeviceToken che scriveremo di seguito), mentre lultima riga pulisce i badge (ossia i numeri) che appaiono sullicona visualizzata sulla dashboard del nostro dispositivo. Le noti che sono composte di tre parti: 1. messaggio testuale 2. badge (numeri sullicona dellapplicazione) 3. suoni (audio che viene mandato in play alla ricezione di una noti ca) 4. Aggiungiamo il codice che segue PRIMA della ne della classe:
/* BEGIN APNS CODE */ - (void)application:(UIApplication *)application did RegisterForRemoteNoticationsWithDeviceToken: (NSData *)devToken {
Fig.5: Sezione di scelta della localit
NOTA
#if !TARGET_IPHONE_SIMULATOR
Su www.easyapns.com/ troverete da scaricare codice e istruzioni sullutilizzo di Easy APNs, un tool LAMP per sempli care luso delle push noti cation.
PROGRAMMARE IN UN LAMP
// Recupera le informazioni per la registrazione remota NSString *appName = [[[NSBundle mainBundle] info Dictionary] objectForKey:@CFBundleDisplayName]; NSString *appVersion = [[[NSBundle mainBundle] infoDictionary] objectForKey:@CFBundleVersion]; // Verica quali notiche sono attive NSUInteger rntypes = [[UIApplication shared Application] enabledRemoteNoticationTypes]; // Imposta i valori di default NSString *pushBadge = @disabled; NSString *pushAlert = @disabled; NSString *pushSound = @disabled; ...
con le quali salviamo nelle preferenze dellapplicazione il deviceToken che dovremo recuperare in seguito dalla schermata di scelta della localit da inviare al nostro server. Ora settiamo in target il nome del pro lo, lanciamo installandolo sul device e dovremmo ottenere un risultato uguale a quello della Fig. 3. Se navighiamo sul nostro telefono, e clicchiamo su impostazioni>noti che, vediamo la lista delle applicazioni che richiedono noti che di tipo push, possiamo intervenire in questa sezione per abilitare o disabilitare, suoni, badge o messaggi. Abbiamo quasi terminato la con gurazione dellapplicazione per iphone: ora dobbiamo togliere i riferimenti a RootViewController che non ci interessano, creare una nuova classe controller con XIB associato chiamato SceltaLocalita e modi care il tutto come segue: Aggiungete larray NSArray *arrayData; nel le SceltaLocalita.h, conterr lelenco delle localit. Aggiungete il metodo -(IBAction) pressSaveButton: (id) sender; per avere una funzione da richiamare alla pressione di un tasto che metteremo nello xib le. Aprite lo xib associato, trascinate un bottone, associategli il metodo alla pressione, salvate e uscite.
Naturalmente dovremo apportare alcune modifiche.

NSString *host = @www.mywebsite.com;
Al posto di www.mywebsite.com dovremo mettere il nostro sito dove abbiamo installato le classi php e i certi cati.
Fig.4: La gestione delle notifiche da parte dellutente
58 / Ottobre 2010

echo max = .$gradiMax.\n;
MOBILE
Ora inserite il SceltaLocalita.m:
seguente
codice
nel
file
#import Reachability.h
Dichiariamo una variabile di tipo int che conterr lindice della riga selezionata:
int rigaSelezionata = 0; - (void)viewDidLoad { ...
signi cava che avevamo la temperatura minima nella variabile $gradiMin e la localit nella variabile $localita. Non ci serve altro. Dovremo semplicemente fare una union tra la tabella apns_devices e la tabella apns_noti che per sapere la lista dei deviceToken e PID interessati a quella localit, e scrivere un messaggio nella tabella dei messaggi da spedire.
$apns->newMessage($PID); //PID del device destinatario del messaggio $apns->addMessageAlert(Temperatura localit.$localita. min=.$gradiMin. max=.$gradiMax); $apns->addMessageSound(bingbong.aiff); // ADD A SOUND $apns->queueMessage();
Il metodo viewDidLoad inizializza larray delle localit e prepara il picker per la scelta. I successivi quattro metodi servono per con gurare il picker e fargli visualizzare i dati dellarray.
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component { return [arrayData objectAtIndex:row]; } - (NSInteger)numberOfComponentsInPickerView: (UIPickerView *)pickerView { return 1; } - (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component { return [arrayData count]; }
Fatto questo, alla ne del parsing della pagina del meteo, inviamo i messaggi precedentemente accodati:
// SEND ALL MESSAGES NOW $apns->processQueue();
LAUTORE Gino Sarnieri, consulente presso varie aziende di Roma e del Lazio un collaboratore attivo della community italiana di programmazione iPhone e mobile devAPP (http:// www.devapp.it). Sviluppa in molti dei principali linguaggi di programmazione, da Java a C/C++, da PHP ad Adobe Flex ed Object C. Da alcuni mesi sta rilasciando applicazioni per iPhone, iPod Touch ed iPad. Per i dettagli si rimanda al sito www.sviluppoiphoneitalia.com. Per consigli, o dubbi sullarticolo, potete contattarlo al seguente indirizzo email: gsarnieri@gmail. com
Per non dover ogni giorno ricordarci di lanciare il server suggerito lutilizzo di un crontab o altri schedulatori; un esempio di utilizzo alla pagina www. easyapns.com/cron-job Se una volta arrivata la noti ca clicchiamo sul tasto Visualizza verr lanciato il programma Temperature. Come avrete capito leggendo larticolo, per implementare le push noti cation nelle nostre applicazioni dovremo avere bisogno di parecchi strumenti (LAMP), una discreta preparazione sistemistica e una dose di programmazione lato PHP / MySQL. A questo aggiungete la macchinosit dei certi cati e la necessit di avere un server con compilate e disponibili le librerie per Apache SSL e capirete perch sempre pi raro vedere le Push noti cation implementate nelle applicazioni iPhone. Gino Sarnieri
...
Molto pi importante, invece, il metodo pressSaveButton, che viene richiamato alla pressione del tasto della form, e che dovr nellordine: recuperare la localit scelta, recuperare dalle preferenze il deviceToken, creare la stringa da passare in GET al nostro host, veri care la connessione a Internet e inviare la richiesta.
-(IBAction) pressSaveButton: (id) sender { printf(\n Scelto : %s, [[arrayData objectAtIndex:rigaSelezionata] UTF8String]); ...
Lato XCode non abbiamo altro da aggiungere, ora dobbiamo semplicemente riprendere il programma iniziale che faceva il parser delle temperature dal sito del meteo e modi carlo per spedire i messaggi. Al momento in cui stampavamo il messaggio:
Fig.6: Il nostro programma che riceve le notifiche!
Ottobre 2010 / 59
MOBILE
Condividere i dati in Android
GESTIONE DEI CONTENT PROVIDER

I CONTENT PROVIDER COSTITUISCONO LA MANIERA DI ANDROID PER CONDIVIDERE DATI FRA LE APPLICAZIONI. IN QUESTO ARTICOLO IMPAREREMO A CONSULTARE I PROVIDER PREDEFINITI E VEDREMO ANCHE COME COSTRUIRE UN FORNITORE DI CONTENUTI CUSTOM
N
CD WEB
AndroidCP.rar
ei due numeri precedenti abbiamo imparato ad interagire con il le system ed il DBMS. Come abbiamo visto, secondo i meccanismi di gestione della sicurezza di Android, sia i le che i database sono solitamente di esclusiva propriet dellapplicazione che li genera. Come fare, allora, per condividere dati strutturati tra pi applicazioni Android? La risposta : mediante i Content Provider. Un Content Provider una parte di unapplicazione Android che si occupa di rendere disponibili dei dati alle altre applicazioni installate nel sistema. Ogni applicazione, pertanto, pu de nire una o pi tipologie di dati e rendere poi disponibili tali informazioni esponendo uno o pi Content Provider. Nellordine inverso, invece, qualunque applicazione pu richiedere laccesso ad un particolare tipo di dato: il sistema la metter in contatto con il corrispondente Content Provider precedentemente installato nel sistema.
quella che fa da ponte per laccesso al provider dei contatti in rubrica. Al suo interno c la costante statica CONTENT_URI, di tipo android.net.Uri, che riporta lURI che identi ca univocamente il provider. Una volta che si conosce lURI di una tipologia di contenuto, interagire con il provider che la eroga pi o meno come fare delle interrogazioni ad un database. Per prima cosa si deve recuperare unistanza delloggetto android.content.ContentResolver. Stando allinterno di una Activity (o avendo a disposizione un oggetto android.app.Context) si pu usare il metodo getContentResolver(). Ad esempio:
ContentResolver cr = getContentResolver();
Gli oggetti ContentResolver permettono le interrogazioni attraverso il loro metodo:

public Cursor query(Uri uri, String[] projection, String selection, String[] selectionArgs, String sortOrder)
RICERCA DEI CONTENUTI

Ogni tipo di contenuto esposto mediante Content Provider viene identi cato attraverso un URI, cio un indirizzo univoco. La forma tipica di questo genere di URI :
content://riferimento-di-base/bla/bla/bla
I parametri da fornire sono i seguenti:
uri lindirizzo che identi
REQUISITI
Conoscenze richieste Basi di Java Software Java SDK (JDK) 5+, Android SDK, Eclipse 3.3+, ADT Impegno
Android dispone di diversi Content Provider built-in, come quello per le immagini o quello per accedere ai contatti in rubrica. LURI per accedere ai contatti, ad esempio, :
content://com.android.contacts/contacts
ca il tipo di contenuto ricercato. projection la lista con i nomi delle colonne i cui valori devono essere inclusi nella risposta. Se null, vengono restituite tutte le colonne disponibili. selection la clausola WHERE. Se null, vengono restituite tutte le righe disponibili. selectionArgs la lista degli argomenti della clausola WHERE al punto precedente. sortOrder la clausola SQL di ordinamento. Se null, non si applica un ordinamento speci co alla lista dei risultati restituiti.
Siccome questi URI sono un po arbitrari, per convenienza si soliti fare in modo che qualche classe riporti lindirizzo in maniera statica, in modo che non sia necessario digitarlo per esteso. I Content Provider preinstallati in Android sono consultabili al package android.provider. In questo pacchetto, ad esempio, si trova la classe ContactsContract.Contacts, che
Questo schema, come possibile notare, ricalca molto da vicino quello conosciuto il mese scorso, quando abbiamo preso in esame i metodi per la ricerca in un database. Anche il tipo del risultato restituito di tipo a noi noto: si tratta di un oggetto android.database. Cursor, che possiamo sfogliare per sondare i record restituiti come risposta alla nostra query. Si faccia
60 / Ottobre 2010
MOBILE
solamente attenzione al fatto che il cursore restituito, in questo caso, potrebbe anche essere nullo: avviene quando lURI fornito al metodo non corrisponde ad alcun provider registrato nel sistema. Per comporre query complesse, cos come per prendere in esame i risultati restituiti, necessario conoscere il nome ed il tipo delle colonne che costituiscono lo specifico tipo di dato richiesto. Anche in questo caso si soliti includere tali informazioni allinterno delle costanti statiche di una classe. Nel caso della rubrica di sistema, ad esempio, le colonne disponibili sono elencate allinterno ContactsContract.Contacts. Ecco un esempio di codice che interroga la lista dei contatti di Android, ordinando i risultati in base al loro nome visualizzato:
ContentResolver cr = getContentResolver(); Uri uri = Contacts.CONTENT_URI; String[] projection = { Contacts.DISPLAY_NAME }; String selection = null; String[] selectionArgs = null; String sortOrder = Contacts.DISPLAY_NAME + ASC; Cursor cursor = cr.query(uri, projection, selection, selectionArgs, sortOrder); while (cursor.moveToNext()) { String displayName = cursor.getString(0); Log.i(Test, displayName); } cursor.close();
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Uri uri = Contacts.CONTENT_URI; String[] projection = { Contacts._ID, Contacts. DISPLAY_NAME }; String selection = null; String[] selectionArgs = null; String sortOrder = Contacts.DISPLAY_NAME + ASC; Cursor cursor = managedQuery(uri, projection, selection, selectionArgs, sortOrder); setListAdapter(new CursorAdapter(this, cursor, true) { @Override public View newView(Context context, Cursor cursor, ViewGroup parent) { String displayName = cursor.getString(1); TextView textView = new TextView(context); textView.setText(displayName); return textView; } @Override public void bindView(View view, Context context, Cursor cursor) { String displayName = cursor.getString(1); TextView textView = (TextView) view; textView.setText(displayName); } }); }
NOTA
permesso?
Il modello di sicurezza di Android fa s che le applicazioni non possano compiere determinate azioni senza ottenere prima un permesso specifico. Ad esempio, una qualsiasi applicazione non pu connettersi alla Rete allinsaputa dellutente, cos come non pu manipolare la lista dei contatti in rubrica. Le applicazioni che vogliono compiere questo genere di attivit devono dichiararlo esplicitamente. Lutente, quando installa lapplicazione, viene cos informato di quali sono le operazioni potenzialmente pericolose che il software pu eseguire, ed cos libero di accordare o meno la propria fiducia al produttore dellapp. Dal punto di vista dello sviluppo, un permesso pu essere richiesto aggiungendo nellAndroidManifest.xml dellapplicazione un tag del tipo: <uses-permissionandroid: name=permesso_richiesto /> Lelenco dei permessi a disposizione flessibile ed espandibile. La documentazione ufficiale riporta i permessi built-in in Android. Usando un editor avanzato, come Eclipse, poi possibile ottenere una lista visuale di tutti i permessi disponibili nel sistema per cui si sta sviluppando.
Attenzione a gestire sempre correttamente il ciclo di vita del cursore, senza dimenticarsi di chiuderlo ad utilizzo completato. Se si lavora allinterno di una attivit, risulta conveniente sostituire il metodo query() di ContentResolver con lanalogo managedQuery() di Activity: in questo caso, infatti, la gestione del cursore viene svolta automaticamente dallattivit. Per esercizio su quanto appena appreso, realizziamo ora una semplice attivit capace di mostrare in una lista il nome di ogni contatto presente in rubrica:
package it.ioprogrammo.contentproviderdemo01; import android.app.ListActivity; import android.content.Context; import android.database.Cursor; import android.net.Uri; import android.os.Bundle; import android.provider.ContactsContract.Contacts; import android.view.View; import android.view.ViewGroup; import android.widget.CursorAdapter; import android.widget.TextView; public class ContentProviderDemo01Activity extends ListActivity { @Override
Si faccia attenzione al fatto che questa attivit, per girare senza incappare in errori, necessita del permesso android.permission.READ_CONTACTS (per i dettagli, fate riferimento al box qui accanto).
Fig.1: Questa attivit si collega al Content Provider della rubrica, riuscendo cos a mostrare tutti i contatti registrati nel telefono
NoN solo ricerche

I Content Provider sono in grado di fornire anche funzionalit di inserimento, aggiornamento e cancellazione dei record. La classe ContentResolver, oltre al gi esaminato metodo query(), mette a disposizione i
Ottobre 2010 / 61
MOBILE
seguenti altri metodi:
public Uri insert(Uri uri, ContentValues values)

Inserisce un nuovo record del tipo specificato mediante il parametro uri. I valori per i campi del nuovo record devono essere specificati attraverso la mappa values, di tipo android.content. ContentValues. Il metodo restituisce lURI di dettaglio assegnato allelemento appena inserito. NOTA
storage esterno, per ottenerne lelenco. 2. Mostrare le immagini, facendo uso di un widget android.widget.Gallery (cfr. ioProgrammo 151). 3. Al clic su una delle immagini, eseguire la cancellazione della medesima, previa conferma da parte dellutente. Tradotto in codice:
package it.ioprogrammo.contentproviderdemo02; ... public class ContentProviderDemo02Activity extends Activity { private static final int DELETE_DIALOG = 1; private Gallery gallery = null; private int selectedImageId; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); gallery = new Gallery(this); Uri uri = MediaStore.Images.Media.EXTERNAL_ CONTENT_URI; ...
public
ricerca per iD
Tutti i contenuti esposti mediante provider dovrebbero avere una colonna chiamata _ID, con lidentificativo numerico del record, univoco nella sua categoria. Se si conosce lID di un record e lo si vuole estrarre direttamente dal suo provider, si pu fare ricorso alla classe android.content. ContentUris e al suo metodo statico withAppendedId(): Uri uri = ContentUris. withAppendedId(uri_di_ base_del_contenuto, id_del_contenuto); Cursor c = cr.query(uri, null, null, null, null);
int update(Uri uri, ContentValues values, String where, String[] selectionArgs) Aggiorna uno o pi record del tipo specificato mediante il parametro uri. La selezione avviene attraverso luso combinato dei parametri where e selectionArgs. I nuovi valori da assegnare ai record selezionati devono essere specificati attraverso la mappa values, di tipo android.content. ContentValues. Il metodo restituisce il numero dei record aggiornati.
public int delete(Uri uri, String where, String[]

selectionArgs) Cancella uno o pi record del tipo specificato mediante il parametro uri. La selezione avviene attraverso luso combinato dei parametri where e selectionArgs. Il metodo restituisce il numero dei record cancellati. Implementiamo un esempio pratico. Questa volta lavoreremo con la lista delle immagini memorizzate nella galleria del telefono. LURI di base per laccesso alle immagini che sono nello storage esterno viene riportato nella propriet:
android.provider.MediaStore.Images.Media.EXTERNAL_ CONTENT_URI
creare uN coNteNt Provider

Se volete condividere i dati della vostra applicazione con gli altri software installati nel telefono, potete implementare il vostro Content Provider. Farlo molto semplice: bisogna estendere la classe android. content.ContentProvider, che richiede limplementazione dei seguenti metodi:
public boolean onCreate()

Il codice da eseguirsi alla creazione del provider. Il metodo deve restituire un booleano: true, per segnalare che la creazione del provider andata a buon fine; false, in caso contrario. public String getType(Uri uri) Dato un URI di gestione del provider, questo metodo deve restituire il tipo MIME del contenuto corrispondente. Solitamente, con tipi di dati personalizzati, non bisogna far altro che inventare il nome della tipologia, seguendo per alcuni criteri. Se lURI specificato corrisponde ad un contenuto specifico (in genere avviene quando lURI contiene lID del contenuto), allora bisogna restituire un tipo MIME del tipo:
vnd.android.cursor.item/vnd.il_nome_del_tipo
Tutte le immagini recuperate mediante lapposito provider dispongono di una colonna _ID, in cui viene riportato il loro identificativo numerico univoco. Come indicato nel box laterale, dato lID di un contenuto, possibile avere un suo URI specifico facendo:
Uri uri = ContentUris.withAppendedId(uri_generico, id);
Dato lURI puntuale di un contenuto-immagine, possibile caricare limmagine (sotto forma di oggetto android.graphics.Bitmap) facendo:
ContentResolver cr = new ContentResolver(this); Bitmap image = MediaStore.Images.Media.getBitmap(cr, uri);
Sfruttando queste conoscenze, andiamo a realizzare unattivit in grado di svolgere i seguenti compiti: 1. Interrogare il Content Provider delle immagini su
Per gli URI che corrispondono a gruppi di contenuti (senza ID, quindi), la formula del tipo:
vnd.android.cursor.dir/vnd.il_nome_del_tipo
62 / Ottobre 2010
Condividere i dati in Android public Cursor query(Uri uri, String[] projection, String selection, String[] selectionArgs, String sortOrder) Il metodo richiamato per eseguire una ricerca tra i dati gestiti dal provider.
MOBILE
authorities, invece, definisce la parte fondamentale dellURI gestito dal provider, cio quello che dovranno utilizzare le altre applicazioni per interagire con il nostro Content Provider. Ad esempio, facciamo il caso che autorities sia:
it.ioprogrammo.arretrati
public insert(Uri uri, ContentValues values)

Il metodo richiamato per eseguire un inserimento nei dati gestiti dal provider.
public
In questo caso, il Content Provider ricever tutte le richieste il cui URI sia del tipo:
content:// it.ioprogrammo.arretrati/bla/bla/bla
int update(Uri uri, ContentValues values, String selection, String[] selectionArgs) Il metodo richiamato per eseguire un aggiornamento dei dati gestiti dal provider. int delete(Uri uri, String selection, String[] selectionArgs) Il metodo richiamato per eseguire una cancellazione fra i dati gestiti dal provider.
public
Una volta che il Content Provider stato implementato, bisogna registrarlo nel file AndroidManifest.xml, osservando il seguente modello:
<?xml version=1.0 encoding=utf-8?> <manifest ...> <application ...> <provider android:name=MioContentProvider android:authorities=mio_dominio/mio_tipo_di_ dato /> </application> </manifest>
Per concludere, poi necessario comunicare a chi dovr utilizzare il provider quale sia il suo URI di base e quali i nomi ed i tipi delle colonne di ciascun tipo di contenuto gestito. Solitamente conviene realizzare una o pi classi che contengano queste informazioni, da rendere poi disponibili a chi dovr servirsi del provider. Proviamo un esempio. Recuperiamo il progetto del blocco note realizzato nel numero precedente e andiamo ad arricchirlo con un Content Provider, capace di esportare verso lesterno le note gestite dallapplicazione:
package it.ioprogrammo.notepad; ... public class NotePadContentProvider extends ContentProvider { ...
NOTA
la classe Urimatcher
Uno strumento molto utile quando si costruiscono dei Content Provider complessi la classe android. content.UriMatcher. Questa utilit permette di lavorare pi agilmente con gli oggetti Uri di Android, discriminando facilmente larea di appartenenza di ciascun indirizzo ricevuto da un provider di contenuti.
Lattributo name serve per specificare il nome della classe che implementa il provider; lattributo
Registriamo il provider nel file AndroidManifest.xml dellapplicazione:

<provider android:name=NotePadContentProvider android:authorities=it.ioprogrammo.notepad />
LAUTORE Carlo Pelliccia lavora presso 4IT (www.4it.it), dove si occupa di analisi e sviluppo software per piattaforme Java. Nella sua carriera di technical writer ha pubblicato cinque manuali ed oltre duecento articoli, molti dei quali proprio tra le pagine di ioProgrammo. Il suo sito, che ospita anche diversi progetti Java Open Source, disponibile allindirizzo www.sauronsoftware.it
Aggiornate ora lapplicazione sul vostro smartphone o nellemulatore. Da questo momento in poi lelenco delle note gestibile non solo attraverso lattivit incorporata dallapplicazione stessa, ma anche attraverso il Content Provider che risponde a partire dallURI:
content://it.ioprogrammo.notepad
Per provare, implementate una nuova applicazione Android, estranea alla precedente, al cui interno va inserita la seguente attivit:
package it.ioprogrammo.notepadclient; ... public class NotePadClientActivity extends ListActivity { ...
Fig.2: Le note generate dallapplicazione del mese scorso vengono ora consultate attraverso una seconda applicazione, passando per un Content Provider
Carlo Pelliccia
Ottobre 2010 / 63
SISTEMA
Introduzione a Visual Studio LightSwitch
PROGRAMMARE ANCORA FACILE!

C
CD WEB
LS_FirstApp.zip
UN NUOVO AMBIENTE DI SVILUPPO DI MICROSOFT CHE SEMPLIFICA LA CREAZIONE DI APPLICAZIONI ANCHE PER I NON-PROGRAMMATORI. UNA GRANDE OCCASIONE ANCHE PER GLI SVILUPPATORI VB6 CHE VOGLIONO PASSARE A .NET SENZA DIFFICOLT
REQUISITI
Conoscenze richieste Nessuna Software SQL Server 2008 (per luso del database) Impegno
ome molti di voi sapranno, non molto tempo fa Microsoft ha annunciato un nuovo prodotto destinato a spostare la bilancia delle applicazioni verso il mondo .NET, verso Silverlight e soprattutto verso il Web (anche e soprattutto con Windows Azure). Questo nuovo software Visual Studio LightSwitch. La versione preliminare, la Beta 1, stata rilasciata prima agli abbonati MSDN (il 18 Agosto), poi al grande pubblico (il 23 Agosto). Dal momento del rilascio, il team di sviluppo di Microsoft e gli sviluppatori di tutto il mondo hanno iniziato a pubblicare articoli sui blog, video e iniziative di ogni genere per iniziare a capire e per far capire a tutti cos e a cosa serve questo nuovo software. Le domande che sorgono spontanee a molti, infatti, sono Serviva davvero questo LightSwitch? Che cosa ha di speciale o di diverso da Visual Studio 2010?. Questo articolo si pone proprio lobiettivo di spiegare cos, a cosa serve, come si installa e come si crea unapplicazione con LightSwitch. Prima di tutto vogliamo avvertirvi riguardo un fatto molto importante: stiamo parlando di una Beta 1, cio della prima Beta pubblica di un prodotto che tuttaltro che completo e stabile. Questo significa che lapplicazione subir molte modifiche e avr molti ampliamenti delle sue funzionalit, da qui alla data di rilascio definitivo prevista per lanno prossimo. In una fase intermedia dobbiamo aspettarci anche il rilascio di una Beta 2. Dunque, non possiamo ad oggi esplorare ancora le funzionalit che devono ancora essere implementate in quella che sar la versione definitiva dellambiente. Inoltre, unavvertenza di rito: sarebbe opportuno non installare il prodotto in un sistema di produzione: per non correre rischi meglio utilizzare una macchina virtuale opportunamente predisposta per linstallazione e i test.
COS VISUAL STUDIO LIGHTSWITCH

Visual Studio LightSwitch una piattaforma di sviluppo che permette di creare applicazioni basate sui dati. Pensateci bene: quante sono le applicazioni gestionali che devono fare un certo numero di attivit sempre uguali? E quanti sono gli sviluppatori che creano applicazioni gestionali, seguendo una sequenza di azioni sempre uguali? Creare un database o connettersi a un database esistente, creare linterfaccia utente con varie modalit (griglia, master-detail, scheda singola, modulo di ricerca con selezione dati), associare i controlli dellinterfaccia allorigine dati, eseguire le classiche operazioni CRUD (creazione, selezione, aggiornamento e cancellazione), magari esportare una tabella di dati verso Excel. Sono tutte abilit che devono essere fornite alla nostra applicazione. Visual Studio LightSwitch fa tutto questo e anche molto di pi, con pochi clic e in modo semplice come premere un interruttore della luce (da cui il nome LightSwitch). Ovviamente non pu sostituire strumenti professionali come Visual Studio 2010 o Microsoft Expression 4, ma pu essere utile in vari contesti, nascondendo allutente non-programmatore molti dettagli dellarchitettura, evitandogli di dover conoscere il linguaggio di programmazione, almeno per i progetti pi semplici. Il fatto che LightSwitch nasconda dei dettagli tecnici e non richieda la scrittura di codice non deve apparire come un limite del prodotto: le applicazioni LightSwitch sono completamente configurabili e si pu accedere alleditor di codice per aggiungere il codice che rappresenta le regole di business che si vogliono introdurre nellapplicazione. Riassumendo: abbiamo tutti i vantaggi di un ambiente di sviluppo visuale, senza rinunciare alla massima personalizzazione garantita dallapproccio via codice.
68 / Ottobre 2010
SISTEMA
A CHI INDIRIZZATO?
Questa la domanda cruciale, perch ogni volta che viene rilasciato un nuovo prodotto bisogna capire chi sono i potenziali utilizzatori, cio a chi destinato il prodotto. Nel caso di LightSwitch esistono diversi scenari in cui potrebbe fare la parte del leone e non escluso che possano essercene altri: Primo scenario: utenti evoluti (i power user). Questi utenti creano delle applicazioni utilizzando Microsoft Access oppure Excel, magari con un po di codice in VBA (Visual Basic for Applications). Access e Excel hanno dei seri limiti: la sicurezza, la fragilit dei file, limpossibilit di esporre dati e applicazioni direttamente sul web e altri su cui non ci soffermiamo in questa sede. Per hanno avuto successo, soprattutto Access, proprio per la facilit con cui si possono creare maschere da associare a tabelle o query, creare report, creare macro da associare ai pulsanti e costruire cos una vera e propria applicazione utente. LightSwitch fa sostanzialmente la stessa cosa: permette di creare Screen (schermate o maschere) e di associare tabelle ai controlli degli Screen, di fare ricerche nei dati e di esportare dati verso Excel, senza una riga di codice. Secondo scenario: sviluppatori di gestionali. Gli utilizzatori di gestionali, anche se si tratta di applicazioni verticali, tendono a chiedere molte funzionalit che sono molto comuni a tutti gli altri gestionali. Lo sviluppatore professionista, quindi, si trova nelle condizioni di dover reinventare continuamente la ruota. Le soluzioni classiche a questa situazione sono tipicamente il copia-incolla-adatta oppure, gli sviluppatori pi avanzati, lo sviluppo di un proprio framework di classi riutilizzabili, gi pronte da includere cos come sono in tutte le applicazioni gestionali su cui si lavora. LightSwitch permette allo sviluppatore di creare rapidamente linfrastruttura dellapplicazione (schermate, connessione ai dati, controllo Ribbon, menu, ecc.) con le funzionalit pi comuni gi attive. Il lavoro che lo sviluppatore deve fare, poi, consiste nellinserire il codice per la gestione delle regole di business e la personalizzazione dellinterfaccia. LightSwitch, quindi, pu essere di utile supporto per la creazione di prototipi di applicazioni o di applicazioni vere e proprie, quando il contesto semplice e il tempo disponibile limitato. Terzo scenario: sviluppatori Visual Basic 6.0. LightSwitch pu essere una grande opportunit per gli sviluppatori VB 6 che vogliono
finalmente passare al mondo .NET. La grande produttivit che offre LightSwitch permette a questi sviluppatori di creare rapidamente applicazioni gestionali sulla piattaforma .NET, anche per il web. Potranno cos partire da una posizione pi vantaggiosa che non in passato, dovendo concentrarsi quasi solo sulla parte pi importante dellapplicazione, cio la gestione delle regole di business. Per tutti gli altri dettagli, i wizard di LightSwitch fanno gi un lavoro rimarchevole.
NOTA
LARCHITETTURA DI LIGHTSWITCH
Unapplicazione gestionale (cio unapplicazione LOB = Line Of Business) solitamente organizzata in tre livelli: il livello di presentazione, il livello relativo alla logica di business e il livello dati. Il livello di presentazione si occupa dellinterfaccia utente, recuperando i dati dagli altri livelli e inviando le modifiche. Il livello della logica di business il livello che smista le richieste del livello di presentazione al livello dati, gestisce la sicurezza per garantire che lutente abbia i permessi per visualizzare e/o modificare determinati dati e effettua le elaborazioni secondo le regole di business. Il livello dati, infine, solitamente costituito dal DBMS (motore di database) o da unapplicazione che si occupa di gestire la persistenza dei dati e dei documenti archiviati. Questi tre livelli sono tra loro interconnessi, perch ciascuno dei livelli fornisce servizi che servono agli altri livelli. Creare unapplicazione gestionale a tre livelli da zero non un compito semplice, perch per ogni livello ci sono innumerevoli scelte da fare, sia dal punto di vista della tecnologia da utilizzare, sia da quello delle tecniche da adottare (si pensi anche solo al problema della sicurezza). LightSwitch fa tutto questo lavoro per noi: per ogni livello decide, sulla base delle nostre indicazioni, cosa deve essere fatto e costruisce lapplicazione seguendo i migliori criteri tecnici e di sicurezza attualmente utilizzati. Lutente non-programmatore, quindi, potrebbe anche ignorare quali sono le tecnologie adottate per la creazione dellapplicazione. Per quanto riguarda il livello di presentazione, LightSwitch utilizza Silverlight 4.0, i WCF RIA Services e lOffice Automation per lintegrazione con Office 2010. Lutilizzo di Silverlight ci garantisce la piena compatibilit dellapplicazione sia a livello di desktop, sia a livello del web. Il livello di logica di business si basa, invece, su codice ASP.NET 4.0, di Entity Framework
AVVERTENZE SULLA BETA 1
Visual Studio LightSwitch stato rilasciato in versione Beta 1, la prima versione preliminare pubblica. Mentre aspettiamo le nuove funzionalit che ci verranno messe a disposizione, possiamo installare il prodotto per assaporare le novit. consigliabile non installarlo in un ambiente di produzione: meglio in una macchina virtuale ad hoc.
Ottobre 2010 / 69
SISTEMA
e, ancora, su WCF RIA Services. Per alcuni servizi di hosting bisogner quindi attendere il supporto ad ASP.NET 4.0 per poter esporre le nostre applicazioni LightSwitch sul web. Infine per il livello dati, cio per lo storage, abbiamo una ottima gamma di possibilit: SQL Server, SQL Server Express, SQL Azure e SharePoint.
NOTA
Molti gestionali sono basati su schermate che interrogano una fonte dati e permettono di modi carli con le classiche operazioni CRUD (creazione, selezione, aggiornamento e cancellazione). LightSwitch permette di sempli care tutto il lavoro sporco, lasciando allutente le personalizzazioni e permettendo anche di scrivere il codice per le regole di business.
REINVENTARE LA RUOTA
LA PROCEDURA ...SENZA DI INSTALLAZIONE
Al termine del download potete creare il DVD di installazione attraverso un comune programma di masterizzazione in grado di generare un disco da immagine, oppure potete aprire direttamente il file con un emulatore di unit ottica (ad esempio il software gratuito Virtual CloneDrive). Allavvio dellinstallazione verranno caricati i file inclusi nel pacchetto di installazione e verr avviata una procedura semplicissima, di cui vediamo i passaggi salienti. Subito dopo verr mostrata la licenza duso del prodotto. Due note importanti da tenere ben presenti:
Per installare Visual Studio LightSwitch Beta 1 dovete prima di tutto scaricare limmagine del disco di installazione che, al momento della stesura di questo articolo, era denominato en_visual_studio_lightswitch_beta_1_x86_ dvd_566742.iso.
questa
versione scadr il 15 Maggio 2011 ( uninformazione inserita nella licenza duso); nella licenza non inclusa una licenza Go Live, cio non si pu utilizzare questo software per applicazioni commerciali ma solamente per dimostrazioni e test.
Fig. 1: Linstallazione pu essere personalizzata
Bisogner attendere qualche minuto anche con un collegamento in banda larga, dato che il file piuttosto grande (circa mezzo giga).
Tornando alla nostra finestra di dialogo, premendo Decline otterremo linterruzione dellinstallazione, mentre premendo il pulsante Accept potremo proseguire. Nella fase successiva, possiamo decidere se avviare linstallazione vera e propria o se desideriamo prima personalizzare linstallazione. Prima di proseguire con linstallazione vogliamo capire in cosa consiste la personalizzazione che ci consentita dal prodotto e quindi premiamo il pulsante Customize. Dovete per tenere conto che sul PC di test, su cui abbiamo installato il prodotto, avevamo gi installato praticamente tutti i componenti e le librerie aggiornati (Visual Studio 2010, .NET Framework 4.0, Silverlight 4.0 e cos via) e quindi la personalizzazione in realt non c: infatti otteniamo solo linformazione sulla cartella in cui verr effettuata linstallazione e lo spazio richiesto dallinstallazione stessa, senza poter cambiare nulla (Fig. 1). Confermiamo con la pressione del pulsante Install e finalmente avviamo linstallazione composta da vari passaggi. Il numero di passaggi dipende da cosa gi installato sul PC e quindi quali componenti dovranno essere installati. Durante le varie fasi, vengono installati almeno i seguenti elementi: 1. Microsoft SQL Server System CLR Types 2. Microsoft Silverlight 4.0 3. Microsoft Silverlight 4 SDK 4. Microsoft Visual Studio LightSwitch Beta Server 5. Microsoft Visual Studio LightSwitch Beta Edition Terminata linstallazione (dura alcuni minu-
Fig. 2: Il gruppo LightSwitch e i template per Visual Basic e C#
70 / Ottobre 2010
SISTEMA
ti), apparir una schermata che ci informa sul completamento della procedura. Nella schermata sono forniti un grande pulsante per avviare lambiente di sviluppo e un paio di collegamenti, rispettivamente per aprire la pagina del portale dedicato agli sviluppatori di LightSwitch e per leggere una dichiarazione Microsoft sulla privacy. Cosa partir a questo punto? Un ambiente dedicato a LightSwitch? Dipende: se gi installato Visual Studio 2010, come nel nostro caso, partir proprio questultimo ambiente di sviluppo. Pertanto, nellelenco di progetti che possono essere creati, troverete anche il nuovo gruppo LightSwitch, con i template rispettivamente per Visual Basic e per C# (Fig. 1). In caso contrario, verr installata solamente la shell di Visual Studio 2010, cio un software di supporto allambiente di sviluppo di LightSwitch. In tal caso, nellelenco dei tipi di progetto troverete solamente il gruppo LightSwitch. Ora che abbiamo installato tutto loccorrente, possiamo procedere alla creazione di una semplice applicazione con LightSwitch.
netterco a un DB esterno gi esistente (Fig. 3). Scegliamo di connetterci a un database cliccando sulla voce Attach to external database. Apparir una finestra di dialogo relativa a un wizard (cio unautocomposizione) per la definizione della connessione allorigine dati desiderata (Fig. 4).
NOTA
APPLICAZIONI PRONTE PER IL WEB

Le applicazioni funzionano con unarchitettura a due o tre livelli: se decidiamo per unarchitettura a tre livelli, possiamo convertire lapplicazione in unapplicazione web con pochi clic di mouse.
Fig. 4: La selezione dellorigine dati
CREIAMO LA NOSTRA PRIMA APPLICAZIONE

Dalla finestra di dialogo della Fig. 2, selezioniamo il template per Visual Basic, scegliamo un nome per la nostra applicazione (per esempio LS_FirstApp), la cartella in cui vogliamo memorizzare lapplicazione e confermiamo con OK. Terminata la preparazione della soluzione, apparir una prima finestra di selezione: secgliamo se creare una nuova tabella o se con-
Il wizard, come vedremo, molto simile a quello che ci permette di creare un Entity Data Model con ADO.NET Entity Framework, ma qualche differenza c. Per prima cosa, notiamo che possibile creare una connessione a un database, a un sito SharePoint o anche a un WCF RIA Service. Per questo esempio, scegliamo la voce Database e premiamo il pulsante Next. Il passo successivo ci permette di definire le propriet della connessione, con la classica finestra di dialogo utilizzata anche in molti altri
NOTA
SCREEN
LightSwitch permette di creare vari tipi di Screen. In ogni Screen ci sono dei pulsanti gi prede niti e funzionanti, tra cui anche un comodo pulsante per lesportazione del set di dati verso un foglio Excel.
Fig. 3: Scelta del tipo di origine dati
Fig. 5: De nizione delle propriet della connessione al DB
Ottobre 2010 / 71
SISTEMA
NOTA
UNA PIATTAFORMA AVANZATA

Le tecnologie utilizzate sono tutte allavanguardia: ASP.NET 4.0, SQL Server e SQL Azure, SilverLight, Entity Framework e WCF RIA Services. Non manca nemmeno lintegrazione con SharePoint.
Fig. 6: La selezione delle tabelle
contesti (Fig. 5). Nella figura abbiamo lasciato invariato il provider dati (Microsoft SQL Server), perch abbiamo a disposizione proprio un database di questo tipo. LightSwitch compatibile con SQL Server dalla versione 2005 in poi. In futuro (forse dalla Beta 2) sar fornito il supporto per laccesso anche a un database basato su SQL Azure. Dopo aver selezionato il nome del server (o comunque del PC su cui installata listanza di SQL Server), del tipo di autenticazione e il nome del database che ci interessa (in questo caso lesempio fornito da Microsoft e liberamente scaricabile da Internet, denominato Contact_Management), clicchiamo sul pulsante Test connessione. Avuta conferma della correttezza di tutte le
propriet di connessione, confermiamo cliccando sul pulsante OK. Il passaggio successivo richiede la scelta delle tabelle che si vogliono inserire nel Data Source (Fig. 6). Selezioniamo le tabelle Customers e Customer_ Addresses, come in figura e modifichiamo il nome del Data Source, da quello proposto automaticamente (cio C02_Contact_ManagementData, dovuto a una ridenominazione del database collegato allistanza di SQL Server) al nuovo nome ContactManagementData e, finalmente, clicchiamo sul pulsante Finish. In Fig. 7 vediamo il risultato finale. Nella stessa figura possibile anche notare lesistenza di una relazione uno a molti tra la tabella Customer e la tabella Customer_ Addresses. Nella parte superiore della finestra del designer ci sono vari pulsanti. Uno di questi quello che ci interessa: il pulsante Screen che ci permette, appunto, di aggiungere uno Screen cio una visualizzazio-
Fig. 8: Il wizard per laggiunta di uno Screen
Fig. 7: Il risultato del collegamento al database
ne, una schermata. Premendo tale pulsante, apparir un altro wizard (Fig. 8) che ci permette di aggiungere cinque tipi di Screen: uno per linserimento di nuovi record, uno per la ricerca di dati, uno di tipo master-detail, uno con una griglia per la visualizzazione e modifica di dati in forma tabellare e uno con unaltro tipo di master-detail, espresso per come una lista. Scegliamo la visualizzazione in forma tabellare (Editable Grid Screen): se vogliamo possiamo cambiare il nome allo Screen o lasciare quello predefinito, ma in ogni caso dobbiamo selezionare la tabella da cui estrarre i dati da inserire nella griglia. Sul lato destro, nella casella a
72 / Ottobre 2010
SISTEMA
discesa, scegliamo Customer, poi confermiamo cliccando su OK. Per avere unapplicazione un po pi articolata, aggiungiamo un altro Screen, questa volta del tipo List and Details. Per fare ci, cliccate con il tasto destro del mouse sul nome della cartella Screens, nella finestra Esplora Soluzioni e scegliete la voce Add Screen: apparir lo stesso wizard che abbiamo gi incontrato. Selezionate il tipo di Screen che avevamo indicato, cambiate il nome se lo desiderate e selezionate i dati della tabella Customer. Appariranno delle caselle di spunta per permettervi di indicare se volete inserire i dati della sola tabella selezionata o anche delle tabelle che sono in relazione con essa. Noi selezioniamo entrambe le caselle e confermiamo con OK. A questo punto possiamo eseguire il programma, premendo il tasto F5. Il risultato quello che vi mostriamo in Fig. 9. Lavvio in modalit out of browser, cio il programma viene eseguito come un normale programma desktop, anzich essere eseguito allinterno del browser di Internet Explorer. Potete notare che sul lato sinistro c lelenco degli Screen inseriti nellapplicazione. Nella parte alta presente un controllo Ribbon, con alcuni pulsanti per salvare le modifiche e per aggiornare la visualizzazione. Infine, allinterno della finestra di visualizzazione, sono inseriti i pulsanti per aggiungere, modificare o cancellare i record, la casella di ricerca e perfino un pulsante gi predisposto per esportare i dati dellintera griglia in un foglio Excel. Per esempio, se vogliamo aggiungere un record alla tabella, possiamo semplicemente cliccare sul pulsante Add. Apparir la finestra di dialogo che vi mostriamo in Fig. 10, con tutti i controlli gi predisposti per linserimento dei dati. Lapplicazione include anche gi delle regole per la validazione dei dati, anche se non pu certo prevedere tutte le regole di validazione che possono essere definite in contesti specifici... diciamo che comunque copre una buona variet di casi. Vi facciamo notare anche il fatto che abbiamo creato unintera applicazione (seppure molto semplice in questo esempio) senza scrivere nemmeno una riga di codice e solamente selezionando delle opzioni che via via sono state proposte da LightSwitch stesso. Comunque, lapplicazione, dopo la sua creazione attraverso i wizard che abbiamo appena visto, pu essere completamente personalizza-
ta e modificata, sia nellaspetto grafico, sia nelle regole di business che devono essere definite dietro le quinte, sia aggiungendo funzionalit che possono essere implementate solamente attraverso il codice (Visual Basic o C#). LightSwitch, inoltre, pu creare un database al volo, semplicemente definendo le tabelle e le
Fig. 9: Il programma in esecuzione
relazioni da inserire nel database. Tra i tipi di dati che possono essere assunti da una colonna di una tabella, LightSwitch include anche due nuovi tipi: EmailAddress e PhoneNumber. Entrambi questi tipi di dato implementano gi anche delle specifiche regole di validazione, per impedire linserimento di valori non corretti.
Fig. 10: Linserimento di un nuovo record
Ottobre 2010 / 73
SISTEMA
PASSARE AL WEB
Abbiamo gi accennato al fatto che in LightSwitch possiamo passare da unapplicazione out of browser (unapplicazione desktop) a unapplicazione per browser, cio per il web, semplicemente con un clic del mouse: proprio come azionare uninterruttore.
Fig. 11: La scheda Application Type, nelle propriet del progetto
Siccome difficile crederci se non lo si vede in pratica, vediamo in pratica come si procede. In Fig. 11 potete vedere la finestra delle propriet del progetto e, pi precisamente, la scheda Application Type inclusa nelle propriet. In questa scheda potete osservare che
possibile scegliere tre tipi di applicazione, ma pi precisamente tre architetture diverse: unapplicazione desktop a due livelli, unapplicazione desktop a tre livelli e unapplicazione per browser a tre livelli. Le tre opzioni includono anche una sintesi delle caratteristiche dellarchitettura corrispondente: per esempio, nelle applicazioni a tre livelli necessario che sia installato e avviato un server Internet Information Services (IIS) per effettuare la connessione ai dati. Durante la progettazione dellapplicazione che abbiamo visto finora in questo articolo, il tipo di applicazione adottato era quello a due livelli per il desktop. Clicchiamo, quindi, sulla terza opzione, per selezionare il tipo di applicazione per browser a tre livelli. Dopo aver salvato le modifiche, avviamo lapplicazione con il tasto F5: vedremo cos aprirsi il browser e, dopo qualche istante, vedrete lapplicazione apparire nella pagina web (Fig. 12). Lapplicazione ha lo stesso aspetto e le stesse funzionalit dellapplicazione per desktop. Notate anche il pulsante in alto a destra (Customize Screen): anche nel browser potete personalizzare linterfaccia grafica come nella versione desktop. Va bene, forse abbiamo barato un po: non abbiamo utilizzato un solo clic, ma quattro e (addirittura) la pressione del tasto F5. Per vi sfidiamo a fare la stessa cosa con meno clic in un altro ambiente di sviluppo: provateci e fateci sapere!
Fig. 12: La nostra applicazione allinterno del browser Internet Explorer
74 / Ottobre 2010
SISTEMA
UN OCCHIO ALLA SICUREZZA

Alcuni sviluppatori hanno espresso qualche perplessit dal punto di vista della sicurezza, ma anche da questo punto di vista non c nulla da temere: il team di sviluppo di LightSwitch ha pensato anche a questo. Tra le propriet dellapplicazione, infatti, troviamo anche una scheda denominata Access Control (Fig.14). Questa scheda permette di impostare il livello di sicurezza dellapplicazione, scegliendo tra le seguenti opzioni: nessuna autenticazione (predefinito), autenticazione Windows e autenticazione con un form. Inoltre possibile definire i ruoli (per esempio Utente, Superutente, Amministratore), gli utenti appartenenti a ciascun ruolo e i permessi da assegnare a ciascuno di essi o a ciascun ruolo.
Screen Navigation, invece, permette di definire i menu dellapplicazione, con la possibilit anche di definire diversi menu per ciascun utente e per ciascun ruolo (Fig. 15). Abbiamo lasciato per ultima la scheda Extensions, cio quella dedicata alle estensioni, perch per il momento stata inserita ununica estensione che viene utilizza-
LE ALTRE PROPRIET DELLAPPLICAZIONE

Tra le propriet dellapplicazione sono state inserite anche altre tre schede: General, Extensions e Screen Navigation. possibile che in futuro possano essere inserite ulteriori schede. Per quanto riguarda la scheda General, dedicata alle propriet generali dellapplicazione, possiamo definire un nome di applicazione, assegnare unimmagine per il logo e unicona, indicare la cultura da utilizzare (per esempio per le impostazioni relative ai numeri, alle valute e alle date), il numero di versione distinto in major version e minor version (Fig. 13).
Fig. 14: Le propriet per il controllo degli accessi
ta in modo predefinito: Microsoft LightSwitch Extensions. Anche in questo caso probabile che la gamma di scelta si potr ampliare con altre estensioni utili.
NOTA
RISORSE
Nellarticolo trovate molte risorse utili su LightSwitch, anche se per il momento solo in lingua inglese. Per trovare informazioni in italiano potete visitare il portale www.DotNetWork.it e il blog dellautore, dedicato a LightSwitch (http:// lightswitchitalia.wordpress. com).
LA NOSTRA LISTA DEI DESIDERI

Ricordandoci che la prima Beta, non possiamo per non individuare alcune aree in cui il prodotto secondo noi potrebbe e dovrebbe migliorare. Escludendo le caratteristiche che non sono ancora attive nella Beta 1 ma che saranno probabilmente messe a disposizione successivamente, come il supporto a SQL
Fig. 13: Le propriet generali dellapplicazione
Non manca nemmeno unimpostazione per definire il tema dellapplicazione, inteso come insieme di elementi grafici che caratterizzano linterfaccia. Per il momento esiste un solo tema, predefinito, ma non abbiamo dubbi che successivamente ci sar una maggiore gamma di scelta. La scheda
Fig. 15: La scheda Screen Navigation
Ottobre 2010 / 75
SISTEMA
Azure, quali sono le funzionalit che servono di pi a un gestionale aziendale moderno? Prima di tutto non c nessuna funzione diretta di LightSwitch per produrre delle stampe, dei report. Questo pu essere implementato con del codice SilverLight, ma questo non certamente alla portata degli utenti comuni, anche se power. Oltre alla stampa ci piacerebbe trovare nel prodotto anche alcune altre funzionalit che ci vengono in mente un po alla rinfusa:
importazione
LAUTORE Mario De Ghetto un appassionato di informatica a 360 gradi, ma soprattutto di programmazione. Si laureato in ingegneria informatica allUniversit di Padova, stato nominato Microsoft MVP per la categoria Visual Basic, autore di vari libri, articoli e video e collabora con la Community tecnica DotNetWork.it. Pu essere contattato allindirizzo mario@deghetto.it.
di dati da file di testo con record a lunghezza fissa, magari con un sistema di specifiche di importazione migliorato rispetto a quello di Access importazione di dati da file di testo delimitati e da Excel esportazione verso gli stessi tipi di file che abbiamo appena citato produzione diretta di file PDF o XPS attivazione della stampa unione di Word, basata sui dati selezionati in LightSwitch uno Screen con un controllo pivot per manipolare una tabella con vari criteri e raggruppamenti integrazione con i Report Services di SQL Server
ne completa, potete invece scaricare lesempio gratuito che trovate allindirizzo http://code. msdn.microsoft.com/lightswitch (Vision Clinic Application Walkthrough and Sample). La classica documentazione di MSDN on line si trova allindirizzo http://bit.ly/9YeALH, mentre alcuni approfondimenti li potete trovare nel blog ufficiale del team di sviluppo di LightSwitch, allindirizzo http://blogs.msdn.com/b/lightswitch/. Se poi volete avere delle informazioni in italiano, potete visitare il portale della Community italiana DotNetWork (www.dotnetwork.it), nonch il blog dellautore di questo articolo, dedicato proprio a LightSwitch (http://lightswitchitalia. wordpress.com). Naturalmente, gran parte delle informazioni e degli articoli pubblicati si riferiscono alla Beta e quindi subiranno sicuramente molte modifiche nel corso di questi mesi, fino al rilascio della versione finale. Se siete interessati allevoluzione del prodotto, quindi, siete invitati a visitare di tanto in tanto le pagine che vi abbiamo indicato.
CONCLUSIONI
Visual Studio LightSwitch Beta 1, il nuovo prodotto Microsoft per sviluppatori e non-sviluppatori, finalmente stato rilasciato tra lentusiasmo di molti sviluppatori e alcune perplessit. Solo levoluzione del progetto e il tempo diranno se questo prodotto potr avere successo tra il pubblico, tecnico e non. Una cosa certa: sta iniziando una nuova era di rottura sulla divisione tra applicazioni desktop e web, perch ormai possibile trasformare unapplicazione desktop in unapplicazione web o per il cloud (Windows Azure) e viceversa con un semplice clic. Questo era impensabile, fino a qualche anno fa, per le nette differenze delle piattaforme. LightSwitch senza dubbio un prodotto innovativo che far molto discutere, i maggiori consensi e la maggiore utilit la trover presso i power users oltre che tra gli sviluppatori VB6 che ancora non hanno fatto il grande salto verso .NET. La logica visuale e la rapidit con cui possibile arrivare a definire soluzioni complete possono rappresentare un ottimo ponte verso la piattaforma .NET. La certezza poi di poter personalizzare in maniera assoluta e con la forza dei linguaggi .NET le soluzioni ottenute automaticamente, ne permette ladozione anche presso i professionisti che non possono accettare limitazioni imposte by design. Mario De Ghetto
ALCUNE RISORSE UTILI

In questultimo paragrafo vi vogliamo segnalare alcune risorse utili per approfondire la conoscenza del prodotto e per ottenere informazioni sulle ultime novit. Allindirizzo http://msdn.com/lightswitch trovate il portale LightSwitch Developer Center, con risorse da scaricare, informazioni e video didattici. Nel caso vogliate interagire con altri utenti LightSwitch o con il team di sviluppo, potete frequentare il forum che trovate allindirizzo http:// bit.ly/cA5bm2. Se volete provare unapplicazio-
Fig. 20: La scheda Extensions allinterno del browser Chrome
76 / Ottobre 2010
Visual Basic 2010 ed Entity Framework 4
SISTEMA
GESTIRE I DATI CON ENTITY FRAMEWORK 4

LA PI RECENTE TECNOLOGIA DI ACCESSO AI DATI E IL NUOVO CONTROLLO VISUALE GARANTITO DAL DATAGRID DI WPF, PERMETTONO DI GESTIRE I DATI CON MOLTA PI FLESSIBILIT. SPERIMENTIAMONE LE POSSIBILIT CON UNA APPLICAZIONE DI ANAGRAFICA
e guardiamo indietro nel passato, Visual Studio ci ha sorpreso ad ogni nuova versione, introducendo sempre nuovi strumenti e nuove tecnologie di accesso ai dati. successo molte volte, anche con le versioni precedenti alla rivoluzione .NET: acronimi come DAO, RDO, ADO, ADO.NET e LINQ sono molto conosciuti dai programmatori, perch quasi non c applicazione che non si colleghi a un database. Le ultime novit in materia sono la nota estensione Entity Framework e il pattern M-V-VM (Model-View-ViewModel). Per la verit Entity Framework non una novit assoluta: infatti era gi stato rilasciato in precedenza come estensione per il .NET Framework 3.5, con la possibilit di utilizzarlo con Visual Studio 2008. La nuova versione di Entity Framework inclusa nel .NET Framework 4.0 e quindi in Visual Studio 2010, stata ulteriormente migliorata con lintroduzione di nuove caratteristiche che ci danno una grande flessibilit nello sviluppo di applicazioni per la gestione di dati. Semmai, la parte difficile consiste nellorientarsi in questo mare di possibilit, dove possiamo facilmente perderci nella tempesta di novit, se non riusciamo a scorgere un faro che possa darci la rotta per tornare in un porto sicuro. Scegliere di utilizzare i wizard, oppure affidarsi a classi completamente personalizzate? Questa una scelta del tutto personale, anche se sicuramente i primi sono pi adatti a chi si avvicina per le prime volte a una nuova tecnologia, mentre le seconde sono pi adatte in contesti in continua evoluzione. Infatti, un wizard estremamente comodo per fare il lavoro nel pi breve tempo possibile e senza tante complicazioni, ma poi avremo qualche problema in pi quando dovremo apportare delle modifiche allapplicazione, dato che i wizard hanno la cattiva abitudine di fare a modo loro e di nascondere molti dettagli implementativi. Lutilizzo dei wizard indicato quando lapplicazione piuttosto semplice, quando avr una certa stabilit nel tempo con modifiche molto limitate oppure quando ci stato dato poco tempo per realizzare lapplicazione. In questo articolo vedremo come si crea facilmente unapplicazione WPF (Windows Presentation Foundation) con Entity Framework, utilizzando un Entity Data Model (EDM) creato mediante wizard. Lapplicazione finale sar quella che vi mostriamo in Fig. 1.
La cassetta DegLi attrezzi

Come abbiamo appena visto, possiamo utilizzare Visual Studio 2008 installando le opportune estensioni per il .NET Framework 3.5 per avere a disposizione le librerie di Entity Framework. In questa versione dovremo installare anche il WPF Toolkit per avere a disposizione la versione WPF del controllo DataGrid. Una migliore dotazione, tuttavia, costituita da Visual Studio 2010 o Visual Basic 2010 Express, dato che includono nativamente sia le estensioni della nuova versione di Entity Framework, sia il controllo DataGrid. Noi utilizzeremo la versione Express.
cD Web
EF4_mdf.zip
Fig. 1: Lapplicazione completa in azione
un Database senza rete

Naturalmente, manca anche un altro elemento importante: un database da cui attingere i dati da mostrare in un DataGrid. Nellesempio di questo articolo opereremo una scelta un po diversa da quelle che si vedono in molti altri articoli pubblicati su Internet. Infatti, invece di utilizzare il solito database NorthWind, utilizzeremo un piccolo database basato su SQL Server 2008 che creeremo appositamente. Anche in questo caso la versione Express pi che sufficiente, dato che la creazione del database avverr interamente allinterno dellambiente di sviluppo. Questo tipo di database viene memorizzato in un file locale con estensione .mdf ed immediatamente utilizzabile senza che sia necessario installare una versione completa di SQL Server nel computer
REQUISITI
Conoscenze richieste Conoscenza di base di Visual Basic 2010 Software Visual Studio 2010 o Visual Basic 2010 Express, SQL Server 2008 Express Impegno
Ottobre 2010 / 79
SISTEMA
NOTA
Letteralmente wizard significa mago: cos vengono chiamate, praticamente da sempre, le autocomposizioni che permettono di creare codice con il minimo intervento dello sviluppatore. sufficiente rispondere a qualche richiesta del wizard e in pochi secondi otteniamo il risultato atteso.
Nelle maNi del mago
dellutente, perch creeremo un tipo di connessione al database basata su file anzich sul provider di accesso ai servizi di rete. Questa una scelta da prendere in seria considerazione nello sviluppo e nella distribuzione di unapplicazione, quando si vuole alleggerire allutente la fase di installazione del prodotto. Avremmo voluto utilizzare SQL Server CE 3.5, basata su file .sdf, ma purtroppo la versione Compact non compatibile con Entity Framework. Con luscita della versione 4.0 si risolver anche questo problema. Per prima cosa creiamo il file di database. Possiamo utilizzare lapposita finestra di connessione a una base di dati, oppure il menu Strumenti > Connetti al database: in ogni caso apparir una finestra di dialogo come indicato nella Fig. 2. Premendo il pulsante Modifica, apparir una nuova finestra di dialogo per la selezione del tipo di origine dati (Fig. 3). Selezioniamo la voce File di database Microsoft SQL Server e confermiamo premendo il pulsante OK. Dopo la conferma apparir nuovamente la finestra della Fig. 2. Dopo aver verificato la corretta selezione del tipo di origine dati, con la pressione del pulsante Sfoglia procederemo alla selezione della cartella in cui vogliamo memorizzare il database. Per il momento scegliamo la stessa cartella in cui si trova il progetto, poi inseriamo il nome del database (nel nostro caso Gestionale.mdf) e confermiamo premendo il pulsante Apri. Tornando alla finestra iniziale, non possiamo ancora testare la connessione perch il file di database non ancora stato creato e quindi confermiamo le scelte premendo il pulsante OK.
Fig. 3: Selezione del tipo di origine dati
Immediatamente verremo informati del fatto che il file di database non esiste e ci verr proposto di crearlo (Fig. 4). Dopo che avremo premuto il pulsante S, vedremo che nella finestra Esplora database apparir la struttura del file di database Gestionale. Naturalmente, in questa fase abbiamo un database ancora vuoto, dato che non abbiamo ancora creato la tabella che ci servir per lesempio di applicazione. Potete verificare linesistenza di tabelle espandendo il nodo relativo alla connessione appena creata fino al nodo Tabelle, nella finestra Esplora database (o Esplora server in Visual Studio 2010). Con un clic del tasto destro del mouse sul nodo Tabelle, selezionate Aggiungi nuova tabella e defi-
Fig. 4: Creazione del database
nite lo schema come nella Fig. 5. Selezionate la riga del campo ID e premete il pulsante Imposta chiave primaria (un pulsante con una chiave gialla, sulla barra degli strumenti). Inoltre, nelle propriet del campo espandete il nodo Specifica identit e impostate il valore di (Identit) a S. Questa modifica permetter linserimento automatico di un numero progressivo.
Fig. 2: Selezione o creazione del database
Fig. 5: Lo schema della tabella Anagrafica
80 / Ottobre 2010
SISTEMA
DeFiniamo LinterFaccia graFica

Per prima cosa definiamo la dimensione della pagina (per esempio 700x500) e della Grid che conterr i controlli WPF (in questo caso un po pi piccola della pagina: 670x450). Allinterno della Grid, poi, definiamo due righe che conterranno rispettivamente i pulsanti di comando e il controllo DataGrid che servir per contenere i dati prelevati dalla tabella Anagrafica. Il codice XAML il seguente:
<Window x:Class=MainWindow xmlns=http://schemas.microsoft.com/winfx/2006/ xaml/presentation xmlns:x=http://schemas.microsoft.com/winfx/2006/ xaml Title=Anagrafica Height=500 Width=700> <Grid Height=450 HorizontalAlignment=Left Margin=10,10,0,0 Name=Grid1 VerticalAlignment=Top Width=670> <Grid.RowDefinitions> <RowDefinition Height=70 /> <RowDefinition /> </Grid.RowDefinitions>
Fig. 6: Alcuni dati di esempio inseriti nella tabella Anagrafica
Dopo aver salvato lo schema, alla richiesta del nome da assegnare alla tabella, inserite Anagrafica e confermate. Con un clic del tasto destro del mouse sul nome della tabella Anagrafica, infine, selezionate Mostra dati tabella e inserite alcune righe di dati, tralasciando di inserire il valore della colonna ID, poich questo dato sar inserito automaticamente. Un esempio di alcuni dati inseriti lo potete vedere nella Fig. 6. Ora che abbiamo terminato di creare il database e di inserire qualche dato di prova, il momento di dedicarci allapplicazione.
NOTA
Quale dB
LappLicazione WpF
Selezionate la voce Nuovo progetto nella Pagina iniziale o la voce di menu File > Nuovo > Progetto. Vi apparir la finestra di dialogo nella quale troverete il modello Applicazione WPF che vi serve. Selezionate tale modello, inserite il nome dellapplicazione (in questo esempio utilizzeremo il nome EF4) e leventuale percorso in cui deve essere memorizzato e confermate. A questo punto si aprir il designer WPF. Se utilizzate Visual Studio 2010 ricordatevi, prima di confermare la creazione del progetto, di verificare nellapposita casella a discesa che il .NET Framework utilizzato sia quello della versione 4.0. Se invece utilizzate Visual Basic 2010 Express dovrete verificare limpostazione della versione del .NET Framework 4.0 nelle propriet dellapplicazione, scheda Compilazione > Opzioni di compilazione avanzate.
 </Grid> </Window>
Notate come vengono definite le righe della Grid, con due tag <RowDefinition ... />. Ora aggiungiamo tre pulsanti di comando nella prima riga della Grid: il primo per aggiungere una nuova riga di dati, il secondo per cancellare una riga di dati esistente e il terzo per salvare tutte le modifiche. Nel codice appena visto, abbiamo inserito un commento <!-Inserisci qui il resto del codice --> per indicare dove dovrete inserire il codice che vi mostreremo tra breve. Per prima cosa, inseriamo un controllo StackPanel per contenere ordinatamente i nostri pulsanti di comando:
<StackPanel Grid.Row=0 Orientation=Horizontal>  </StackPanel>
Perch non utilizziamo un database basato su file .sdf? Purtroppo, Entity Framework non supporta SQL Server Compact Edition 3.5. La versione 4.0 di questo database engine, invece, avr la piena compatibilit con Visual Studio 2010 e con Entity Framework. Potete trovare le nuove caratteristiche di SQL Server CE 4.0 in questa pagina: http://tinyurl. com/sqlce4
Fig. 7: Selezione dellelemento ADO.NET in riferimento allEntity Data Model
In questo codice abbiamo impostato unassociazione tra il controllo di tipo StackPanel e la prima riga della Grid, semplicemente indicando Grid.Row=0. Vi ricordiamo che in .NET tutti gli indici iniziano da zero e quindi la riga zero indica la prima riga della Grid. Inoltre abbiamo definito il tag Orientation per disporre orizzontalmente il contenuto, cio i nostri tre pulsanti, altrimenti verrebbero disposti in senso verticale. Avremmo potuto definire anche un nome per lo StackPanel, le dimensioni orizzontali e verticali e cos via, ma in questo contesto sono impostazioni superflue.
Ottobre 2010 / 81
SISTEMA
(IsSynchronizedWithCurrentItem) e a disegnare lo sfondo delle righe con una colorazione alternata (AlternatingRowBackground). Infine abbiamo impostato una serie di propriet booleane, ciascuna delle quali ha un nome che inizia per CanUser (lutente pu...), per permettere di: aggiungere e cancellare righe, ordinare e riordinare le colonne, ridimensionare righe e colonne. La parte grafica dellapplicazione pressoch completa, manca ancora un tassello: abbiamo creato un file di database e una connessione a tale database, ma lapplicazione non ancora in grado di vedere il DB e di associare la tabella dei dati alla griglia. Vediamo ora come creare il modello della base dati con un elemento Entity Data Model (EDM).
Fig. 8: Selezione del tipo di origine dati
Vediamo ora come possiamo definire dei pulsanti allinterno dello StackPanel:
<Button Width=120 Height=40 Margin=10 Content=Aggiungi riga Name=btnAggiungi /> <Button Width=120 Height=40 Margin=10 Content=Elimina riga Name=btnElimina />
aggiungiamo un eLemento entity Data moDeL

Qui entra in gioco il wizard a cui avevamo fatto cenno allinizio di questo articolo. Per aggiungere un elemento di tipo Entity Data Model, in grado di mappare gli oggetti del database in una forma pi orientata agli oggetti, clicchiamo con il tasto destro del mouse sul nome del progetto e selezioniamo la voce Aggiungi > Nuovo elemento. Apparir la finestra di dialogo che vi mostriamo nella Fig. 7, dalla quale dovete selezionare ADO.NET Entity Data Model, inserire un nome per lelemento con estensione
NOTA
<Button Width=120 Height=40 Margin=10 Content=Salva modifiche Name=btnSalva />
necessario copiare il database nelle sottocartelle Debug e Release del progetto per poter vedere i dati. Non permettete che la copia venga fatta automaticamente dallambiente di sviluppo, altrimenti qualsiasi modifica ai dati verr sovrapposta dalla copia originale del database.
copie iN maNuale
In questo codice definiamo, appunto, i tre pulsanti che ci servono, impostando le loro dimensioni, la loro distanza (Margin), il testo che deve apparire su ciascun pulsante (Content) e il nome con cui identificato il controllo nel codice (Name). Dopo il codice di definizione dello StackPanel, inseriamo il codice XAML per definire la griglia dei dati con un controllo DataGrid:
<DataGrid AutoGenerateColumns=True Grid.Row=1 Name=dgAnagrafica IsSynchronizedWithCurrentItem=True AlternatingRowBackground=LightGray ItemsSource={Binding} CanUserAddRows=True CanUserDeleteRows=True CanUserSortColumns=True CanUserReorderColumns=True CanUserResizeColumns=True CanUserResizeRows=True />
Fig. 9: Definizione della connessione al database
Anche in questo caso abbiamo impostato le propriet Grid.Row, questa volta a 1 perch vogliamo inserire il controllo nella seconda riga, e Name per assegnare un nome al controllo (dgAnagrafica). Le altre propriet impostate servono a definire un legame con una sorgente dati (ItemsSource), ad autogenerare le colonne della griglia (AutoGenerateColumns), a sincronizzare la griglia con lelemento corrente
.edmx (per esempio Anagrafica.edmx) e infine premere il pulsante Aggiungi. Nel primo passo del wizard dobbiamo decidere se vogliamo utilizzare un database o un oggetto (Fig. 8). Selezioniamo Database e premiamo Avanti. Il passo successivo ci permette di selezionare lorigine dati vera e propria. Nel caso in cui dovessimo avere gi a disposizione una connessione a unorigine dati nellambiente di sviluppo, come in questo caso, nella casella a discesa verr proposto il nome di tutte le connessioni disponibili (Fig. 9).
82 / Ottobre 2010
SISTEMA
Notate come la stringa di connessione sia un po diversa dalla classica stringa di connessione ADO. NET, con laggiunta di alcuni metadati. Nella stessa scheda possiamo inserire anche un nome a nostra scelta per la stringa di connessione, ma possiamo mantenere invariato il nome che viene proposto in automatico, composto dal nome del database e dal suffisso Entities. Premendo ancora una volta il pulsante Avanti, verr visualizzata la finestra che trovate nella Fig. 10. In questa finestra abbiamo selezionato lunica tabella che avevamo definito in precedenza, mentre le altre opzioni sono inserite di default. Notate che presente una casella di spunta denominata Includi colonne di chiavi esterne nel modello. una novit di Entity Framework 4.0, in quanto questa ultima versione fornisce il supporto anche per le chiavi esterne, al contrario della versione precedente. Anche in questo caso possiamo cambiare, se vogliamo, il nome del namespace che viene inserito di default come composizione del nome del database e del suffisso Model. Premendo il pulsante Fine, concludiamo il wizard e troviamo nella finestra Esplora Soluzioni un nuovo file: Gestionale.edmx. Non lunica novit che troviamo nel nostro progetto: infatti lambiente di sviluppo aprir il modello EDM, mostrando le finestre che vedete nella Fig. 11. Prima di andare avanti, dovete ricordarvi di copiare i file di database (Gestionale.mdf e Gestionale_log.ldf) nelle sottocartelle Debug e Release, cio nelle cartelle da cui verr eseguita lapplicazione dopo la compilazione. Infatti, mancando la copia del database non sar possibile visualizzare e gestire i dati. Se le cartelle Debug e Release non esistono ancora, potete crearle in questo momento. Tornando alla nostra pagina XAML, dobbiamo ora associare il modello dati al controllo DataGrid, attraverso le sue propriet di binding. Nel prossimo paragrafo vediamo la procedura per ottenere questo risultato.
Data binDing
Per data binding si intende lassociazione che viene creata tra unorigine dati, a livello di intero dataset o di singolo campo con un controllo visuale. Per esempio, nella applicazione che stiamo costruendo in questo articolo creeremo unassociazione tra la tabella Anagrafica e il controllo DataGrid per visualizzare lintero set di dati contenuto nella tabella. Tale associazione permetter di aggiungere, eliminare o modificare dati nella griglia e, con un opportuno comando, di aggiornare la tabella memorizzata nel database. Procediamo con ordine. Prima di tutto dobbiamo creare due oggetti fondamentali e lo facciamo modificando il codice del file di code-behind, cio il file associato alla pagina XAML definita finora, denominato MainWindows.xaml.vb, come segue:
Imports System.Collections.ObjectModel Class MainWindow Private GestionaleContext As New GestionaleEntities Private AnagraficaList As ObservableCollection(Of Anagrafica) End Class
Mentre la prima istruzione crea listanza del contesto, cio un riferimento al modello EDM denominato Gestionale Entities, la classe ObservableCollection una particolare collezione che permette di realizzare unassociazione dati bidirezionale (two-way data binding): non solo dallorigine dati allinterfaccia grafica, ma anche dallinterfaccia grafica allorigine dati, permettendo cos il salvataggio delle modifiche. Una precisazione: importante che vi ricordiate di importare il namespace System. Collections.ObjectModel, altrimenti non potrete utilizzare la classe ObservableCollection. Ora dobbiamo leggere la tabella di origine per popolare la griglia dei dati:
Private Function GetAnagrafica() As ObservableCollection(Of Anagrafica) Return New ObservableCollection(Of Anagrafica) _ (From ana In Me.GestionaleContext.Anagrafica Select ana) End Function
Fig. 10: Scelta delle tabelle da includere nel modello
Questa funzione crea e restituisce un oggetto di tipo ObservableCollection, cio una collezione di elementi di tipo Anagrafica, selezionati attraverso una query eseguita sugli elementi memorizzati nellentit Anagrafica. Ora lapplicazione gi in grado di visualizzare i dati nella griglia, pertanto manca ancora lultimo passaggio per completare il lavoro: il codice dei gestori di evento dei tre pulsanti.
Ottobre 2010 / 83
SISTEMA

Private Sub btnElimina_Click( ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) _ Handles btnElimina.Click Try Dim rigaCorrente As Anagrafica = CType(Me.dgAnagrafica.SelectedItem, Anagrafica) Me.AnagraficaList.Remove(rigaCorrente) Me.GestionaleContext.DeleteObject(rigaCorrente) Catch ex As Exception in caso di errore non eseguo nulla End Try End Sub
Gestire le modifiche dei dati

Per aggiungere una nuova riga procediamo in tre passi: prima creiamo un oggetto di tipo Anagrafica, poi aggiungiamo tale oggetto alla collezione di tipo ObservableCollection e poi aggiungiamo lo stesso oggetto al contesto dellorigine dati. Naturalmente, loggetto che aggiungiamo costituito da una riga vuota: una volta creata la riga sar sufficiente inserire i dati che mancano, direttamente nella griglia, e poi salvare le modifiche.
LAUTORE Mario De Ghetto un appassionato di informatica a 360 gradi, ma soprattutto di programmazione. Si laureato in ingegneria informatica allUniversit di Padova, stato nominato Microsoft MVP per la categoria Visual Basic, autore di vari libri, articoli e video e collabora con la Community tecnica DotNetWork.it. Pu essere contattato allindirizzo mario@deghetto.it.
Infine il gestore dellevento Click del pulsante btnSalva il seguente:

Private Sub btnSalva_Click( ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) _ Handles btnSalva.Click Try Me.GestionaleContext.SaveChanges() Catch ex As Exception MessageBox.Show(ex.ToString) End Try End Sub
Fig. 11: Le finestre per la gestione dellEntity Data Model
Il codice del gestore dellevento Click del pulsante btnAggiungi il seguente:

Private Sub btnAggiungi_Click( ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) _ Handles btnAggiungi.Click Dim ana As New Anagrafica Me.AnagraficaList.Add(ana) Me.GestionaleContext.AddToAnagrafica(ana) End Sub
Anche in questo caso abbiamo un blocco Try ... Catch ... End Try, per prevenire eventuali eccezioni durante la memorizzazione delle modifiche. Listruzione che tentiamo di eseguire semplicemente quella che richiama il metodo SaveChanges del contesto dellorigine dati. Nel caso in cui listruzione dovesse fallire, verr mostrato il testo delleccezione.
Per eliminare una riga dobbiamo scrivere qualche porzione di codice in pi: infatti dobbiamo verificare quale riga selezionata per poterla cancellare. Se nessuna riga selezionata sar sollevata uneccezione. Per gestire tale eccezione quindi necessario inserire le istruzioni allinterno di un blocco Try ... Catch ... End Try. La sezione Catch non ci interessa, dato che non dobbiamo fare nulla se nessuna riga selezionata. Invece la sezione Try quella pi importante: prima di tutto troviamo il riferimento alla riga corrente, cio la riga selezionata nel momento in cui premiamo il pulsante di eliminazione. Successivamente richiamiamo il metodo Remove dalla collezione ed eliminiamo la riga anche dal contesto dellorigine dati. Ecco il codice corrispondente a quanto abbiamo descritto:
conclusioni
Abbiamo visto con quale semplicit possibile visualizzare i dati di una tabella nella nuova DataGrid di WPF, fornendo allutente anche la possibilit di modificare il contenuto della griglia e automaticamente, in cascata, anche i dati della tabella di origine. Abbiamo anche visto come funziona il wizard per laggiunta di un Entity Data Model mappato a unorigine dati. Con WPF e con le sue possibilit di data binding si pu fare ancora di pi e meglio, ma in molti casi le tecniche che vi abbiamo mostrato in questo articolo sono pi che sufficienti. Mario De Ghetto
84 / Ottobre 2010
Content Management System: la scelta giusta
non solo codice
Come sCegliere il Cms giusto

Q
uello dei CMS (ossia sistemi di gestione dei contenuti) uno di quei settori pi ampi dellintero mercato delle applicazioni per il Web. Seguendo levoluzione delle tecnologie dedicate e delle esigenze degli utenti, il mercato dei servizi e dei prodotti per costruire siti cresce di giorno in giorno. Ci sia un vantaggio, perch la concorrenza la migliore spinta per il miglioramento, sia uno svantaggio, perch rende difficile districarsi in un mare di offerte spesso troppo simili tra loro. In questa guida intendiamo dunque offrirvi un aiuto su come scegliere il gestore dei contenuti che pi si addice alle vostre esigenze. Abbiamo strutturato larticolo sotto forma di domande e risposte, una sorta di grande Faq ragionata, in modo da poter analizzare facilmente quegli elementi che ci sembrano essenziali nella scelta di un prodotto del genere. Non abbiamo la presunzione di essere stati esaustivi, e probabilmente abbiamo lasciato fuori o messo in secondo piano molte caratteristiche che alcuni potrebbero invece considerare essenziali. Ma le caratteristiche di un servizio del genere sono moltissime: abbiamo selezionato quelle che ci sembravano pi importanti. Un breve avviso prima di addentrarci nel vivo dellargomento: non approfondiremo laspetto di progettazione del sito, dal quale dipendono, se non tutte, molte delle decisioni che si dovranno prendere quando si vuole selezionare unapplicazione del genere.
Il panorama deI CmS troppo vaSto e haI dubbI Su quello da utIlIzzare? eCCo glI aSpettI fondamentalI Che devI valutare per arrIvare a SCeglIere quello pI Idoneo alle tue eSIgenze
Ho davvero bisogno di un cms?
Prima di pensare a quale CMS scegliere bene chiedersi se davvero un CMS ci che vi serve per gestire il vostro sito Web. Tra i possibili svantaggi va in primo luogo considerato il costo. Sebbene alcuni dei pi completi gestori di contenuti siano completamente gratuiti ed Open Source, e non costa nulla o quasi nulla utilizzarli, si deve considerare almeno il costo del servizio di hosting del sito Web, di solito molto pi alto di un servizio per la gestione di siti tradizionali. In secondo luogo, prima di decidere se vale la pena utilizzare o no un CMS, si dovr considerare che unapplicazione di tal genere pur sempre uninfrastruttura complessa, che da un lato facilita la pubblicazione di un sito Web, rendendo automatici i processi di pubblicazione delle pagine e di strutturazione delle stesse, ma dallaltro tende a legare lo stesso sito alle proprie strutture: se si ha in mente di pubblicare qualcosa che il servizio non prevede, o se un giorno volessimo cambiare
Prima di scegliere
Prima di passare alla fase di selezione di un CMS, necessario definire i prerequisiti del sito che andremo a creare per rendere pi agevole il processo di selezione. In questa categoria rientra non solo la scelta della vera e propria natura del sito, ma anche la decisione su chi dovr usarlo, sullinfrastruttura tecnologica sulla quale si appogger, sul livello di competenze richiesto agli amministratori.
Fig. 1: Il mondo dei CMS vastissimo. In figura la mappa dei prodotti secondo CMS Watch
Ottobre 2010 / 85
non solo codice
Content Management System: la scelta giusta E-commerce

I siti di commercio elettronico offrono tutti gli strumenti per la vendita di prodotti. Si va dalla pubblicazione degli oggetti organizzati in categorie fino alla gestione del processo di acquisto e post-vendita. Molto diffuso Magento (www. magentocommerce.com).
NOTA
I plug-In pI comunI
I plug-in, o estensioni o moduli, permettono di ampliare le funzionalit di un CMS e sono una delle caratteristiche da valutare con pi attenzione quando si deve scegliere un software per il proprio sito. Tra i pi comuni plug-in, quelli che ogni CMS dovrebbe permettere di installare, ricordiamo: le gallerie di immagini (e anche video) per pubblicare set di fotografie in modo semplice e veloce; i sondaggi, per poter interagire con i propri visitatori e raccogliere informazioni sui loro interessi; le aree di upload e download, per consentire di pubblicare file e lasciarli scaricare; la gestione avanzata dei tag, per creare tag cloud o per consentire ai navigatori di seguire specifici argomenti del sito; le statistiche, o interne o basate su servizi esterni, per permettere di analizzare gli accessi al sito; nel caso il sito prevedesse commenti pubblici e senza moderazione preventiva, dobbligo dotarsi di un modulo antispam, per evitare di ritrovarsi i commenti pieni di spazzatura.
del tutto interfaccia o infrastruttura, molto pi difficile farlo avendo i contenuti pubblicati con un CMS che senza. Detto questo, non ci sentiremo di consigliare luso di un CMS per siti piccoli, siti che non prevedono di essere composti da pi di dieci pagine e che non hanno bisogno di diverse modifiche giornaliere. Per questi siti bene utilizzare uno dei tanti editor di pagine Web disponibili sul mercato - o un servizio basato sul Web, gratuito e in italiano come Weebly (www.weebly.com) - che, nei migliori dei casi, forniscono anche modelli di sito predefiniti e facilmente aggiornabili. In tutti gli altri casi, non c quasi alternativa: cerchiamo di scegliere un buon CMS.
Wiki
I wiki sono servizi che permettono la pubblicazione collaborativa di pagine web. Il loro scopo quello di pubblicare pagine che tutti possono non solo legger, ma anche modificare. Il principio su cui si basano che la scrittura collaborativa di documenti e testi possa permettere di migliorare la qualit del testo stesso. Il CMS pi noto per questo genere di siti Mediawiki (www.mediawiki.org), il servizio su cui costruita lenciclopedia collaborativa Wikipedia.
che tipo di sito dovr progettare?

Il secondo tipo di domanda che ci si deve subito porre prima di mettersi alla ricerca di un CMS : che tipo di sito dovr pubblicare? sempre bene adottare un servizio o unapplicazione che sia specificamente pensata per il sito che si ha in mente. Per semplificarvi il compito di scelta, ecco una lista di possibili tipologie di siti Web che potrebbero essere gestite da un CMS.
Community
Di solito i siti dedicati alle community si raccolgono attorno a un forum, un servizio che facilita la discussione e lo scambio di messaggi su temi predefiniti. I servizi di questo tipo offrono spesso funzionalit pi evolute, come sistemi di messaggistica interna, pubblicazione di foto e video e cos via. Uno dei CMS pi noti per la pubblicazione di un forum phpBB (www.phpbb.com).
Siti generalisti
Li potremmo chiamare anche portali. Sono siti che includono una gran variet di funzioni che comprendono in generale tutte le caratteristiche indicate nelle successive categorie: pubblicazione di notizie, gallerie fotografiche, strumenti di community e cos via. Esempio di CMS di questo tipo il noto Joomla (www.joomla.org).
E-Learning
I siti di e-learning facilitano la somministrazione della formazione online permettendo di gestire corsi, insegnanti e studenti; formalizzando i corsi in percorsi formativi formati da testi, immagini, video; valutando i risultati raggiunti attraverso verifiche online. Uno dei CMS pi noti Dokeos (www.dokeos.com).
Blog
I blog non hanno bisogno di presentazione. Sono tipologie di siti che prevedono la pubblicazione di articoli o post in ordine cronologico suddivisi per categorie. Nati come semplici diari personali, sono oggi veri e propri strumenti editoriali professionali che possono essere utilizzati per la pubblicazione di notizie, foto, video o per decine di altri utilizzi. Il pi noto CMS di questa categoria Wordpress (www.wordpress.org).
Collaborazione
I siti che permettono agli utenti di collaborare tra di loro sono molto diffusi in ambito aziendale. Oltre a consentire di condividere documenti, immagini e altre tipologie di risorse, includono di solito strumenti di comunicazione asincrona (forum) e sincrona (chat), blog, wiki e altre tipologie di strumenti che favoriscono la condivisione di risorse e buone pratiche. Uno dei servizi pi completi Alfresco (www.alfresco.com).
Gallerie fotografiche
I siti di gallerie fotografiche hanno un solo scopo: pubblicare le fotografie (o anche i video) prodotti da un utente nel modo pi semplice possibile. Oltre a suddividere le fotografie in album e visualizzare in diverse risoluzioni, consentono agli utenti di scaricarle, votarle e commentarle. Il pi noto CMS dedi-
Fig. 2: Per piccoli siti anche possibile usare un semplice editor HTML come Expression Web 3 di Microsoft
86 / Ottobre 2010
non solo codice
cato alla pubblicazione di fotografie Gallery (http://gallery.menalto.com).
chi user il cms (autori/editori)?

Dopo aver definito a grandi linee il tipo di sito che si vuole pubblicare, necessario definire chi lo dovr utilizzare ogni giorno. La scelta si impone per due diverse ragioni: da un lato per definire la complessit tecnica del CMS che si andr a scegliere, dallaltro per stabilire il livello di controllo sugli utenti che esso potrebbe offrire. Se gli utenti che dovranno usare il servizio sono molti, e magari non tutti nel perimetro dellorganizzazione, necessario che il CMS da scegliere abbia dei forti controlli sugli accessi, consentendo di scegliere in modo molto preciso cosa pu fare e cosa non pu fare ognuno di questi utenti. Se gli utenti non sono esperti, necessario che il CMS fornisca strumenti di facile gestione come, ad esempio, la possibilit di incollare contenuti da un word processor e un editor di testi che faciliti la formattazione di contenuti senza conoscere per forza il linguaggio HTML. Chi dovr usare il CMS avr bisogno di un editor di contenuti semplice e funzionale.
librerie richieste, la loro versione e cos via. Sono informazioni che sono disponibili sui siti di ogni CMS alla voce System Requirements o, in italiano, Risorse di sistema.
requisiti di base
Dopo aver definito i prerequisiti, arrivato il momento di passare alla selezione delle caratteristiche di base che dovr avere lapplicazione. Una delle scelte pi importanti riguarda la tipologia del CMS: custom, Open Source, commerciale o come servizio. Non pensiate sia una scelta scontata: per ognuna delle scelte suggerite esistono vantaggi e svantaggi. Successivamente si dovr passare alla selezione dei moduli e delle caratteristiche grafiche, forse le variabili pi importanti in ballo nel processo di selezione.
di che tipo di cms ho bisogno?

Definite le esigenze di base nella scelta di un CMS, ora di passare a definire pi specificamente il tipo di prodotto di cui si ha bisogno. Le scelte da valutare partono dalla selezione della natura stessa del CMS. Per comodit, le scelte si possono suddividere in quattro differenti alternative. CMS Custom: un CMS progettato internamente pu essere utile quando le necessit sono talmente specifiche che non possibile, o non conveniente, trovarle nelle altre tipologie di servizi. CMS Open Source: la strada pi seguita, poich consente di avere prodotti di alta qualit a costi quasi nulli. CMS commerciali: la strada pi costosa. I CMS commerciali sono adatti a grandi organizzazioni che hanno bisogno di soluzioni pronte alluso e servizi di assistenza sempre disponibili. Esiste, da qualche tempo, anche una terza soluzione: i CMS come software-as-a-service, spesso gratuiti e molto semplici da utilizzare, anche se adatti a piccoli siti Web. Appartengono a questa categoria servizi come Google Sites o Weebly.
chi amministrer il cms?

Da valutare anche chi dovr amministrare il servizi. Ogni CMS ha un livello pi o meno profondo di personalizzazioni che vi si possono applicare e molti prevedono sistemi di aggiornamento automatici. Altri, per raggiungere questi stessi obiettivi, richiedono invece qualche conoscenza in pi. Se lamministratore del servizio non ha basi di programmazione, bene prevedere un CMS che fornisce aggiornamenti e installazione dei moduli supplementari automatici.
che tipo di infrastruttura tecnologica mi serve?

Dopo aver deciso il tipo di sito da pubblicare e lutente tipo, necessario pensare allinfrastruttura tecnologica da usare, che deve essere condivisa sia dal CMS sia dallo spazio Web che si ha a disposizione. Se si ha gi uno spazio Web su cui risiede il vecchio sito, necessario chiedere al provider lelenco delle tecnologie supportate per poter poi essere informati quando si andr a scegliere il software. Se invece lo spazio Web ancora da acquistare, una valutazione sommaria dellinfrastruttura tecnologica necessaria sar utile per poter confrontare i piani: non tutti hanno lo stesso prezzo. Quando si valutano le tecnologie non basta fermarsi al linguaggio di programmazione utilizzato (PHP, Java, Asp.Net ecc.) e al database (MySQL, SQL Server ecc.), ma si dovr valutare anche le eventuali estensioni o
Fig. 3: Weebly un servizio Web che permette di creare al volo, con il solo browser, siti Web completi
Ottobre 2010 / 87
non solo codice

quale interfaccia graca?
Altro punto nevralgico per la scelta di un CMS la disponibilit di template, ossia di pacchetti di elementi grafici che sono in grado di modificare lintera interfaccia grafica di un sito. , si capisce, un elemento di primaria importanza poich nulla come laspetto grafico definisce a colpo docchio la natura e la qualit di un sito. Per i CMS pi popolari, il numero di questi pacchetti davvero enorme, ma molto semplice averne contezza cercando su Google frasi come Joomla template Joomla photo template, sostituendo a Joomla il nome del proprio CMS e a photo lo stile del template che si cerca (magazine, video, community e cos via).
NOTA
I SITI pER AppRoFonDIRE

Sono tantissimi i siti che aiutano lutente nella scelte del giusto CMS per il proprio sito Web. Uno dei pi noti e utili sicuramente OpensourceCMS (www. opensourcecms.com), un sito che permette di testare decine di CMS open source gi preinstallati e configurati sui server del sito. Il servizio consente di visualizzare non solo linterfaccia utente, ma anche di utilizzare la sezione di amministrazione per poter provare le varie opzioni offerte da ogni singola applicazione. CMS Matrix (www.cmsmatrix.org) invece dedicato al confronto fra i vari CMS. Il sito offre un lungo elenco di applicazioni e unanalitica scheda con i dettagli delle funzioni supportate che, con pochi clic, possono essere visualizzare singolarmente o confrontate fra loro. Per avere informazioni ancora pi dettagliate si pu navigare su CMS Review (www.cmsreview. com). Il sito offre una directory di quasi 400 CMS, siano essi open source o commerciali, con recensioni e analisi dettagliate delle funzioni. Molto ben fatto il processo di selezione (link Directory of CMS) con il quale scegliere lapplicazione che si desidera attraverso un processo di selezione passo per passo.
Fig. 4: Gallery un CMS per immagini e video. La versione 3 (in figura) attesa a breve
di quali plug-in ho bisogno?

Ogni CMS che si rispetti ha un set di funzionalit incluse nellinstallazione (cosiddette built-in) e diverse altre funzionalit che invece vanno installate a parte, chiamate estensioni, moduli o plug-in. Per poter scegliere il giusto CMS necessario che tutte le funzionalit richieste dal progetto del sito (che, a questo stadio, deve essere gi pronto) debbano essere garantite in una delle due modalit. Scegliere le giuste funzionalit non cosa semplice: per definire quelle built-in pu essere utile fare riferimento a www.cmsmatrix. org, una vera e propria miniera di informazioni che, per ogni CMS recensito, offre una ricca tabella con le tutte le funzionalit supportate. Per valutare invece i plug-in disponibili, necessario fare visita al sito del produttore del CMS e visualizzare la lista di quelli disponibili. Fate attenzione: spesso non basta rintracciare un plugin nella pagina delle estensioni del CMS per assicurarsi che funzioni. Per essere sicuri che sia quello giusto, va installato e testato per un po.
Fig. 6: Vignette di Open Text uno dei CMS di livello enterprise pi noti (www.opentext.com)
requisiti secONdari
Definiti i prerequisiti e i requisiti di base, si pu passare a selezionare i requisiti che chiameremo secondari solo per comodit. Di questa categoria fanno parte le opzioni di sicurezza, la presenza di supporto e documentazione, la presenza di strumenti di marketing e di accessibilit.
quanto sicuro il cms?

I CMS sono applicazioni Web, esposte 24 ore su 24 allesterno. La sicurezza e la solidit dellapplicazione uno di quegli aspetti che non va assolutamente sottovalutato: attacchi di cracking verso siti Web gestiti anche da noti CMS sono allordine del giorno. La sicurezza va valutata sotto due diversi profili. Da un lato verificando il numero delle vulnerabilit (errori di programmazione che possono compromettere il corretto funzionamento del sito) rilevate nel corso del tempo: un CMS che deve fare i conti spesso con problemi di sicurezza non probabilmente una scelta che pu garantire stabilit. Dallaltro lato, va verificato il numero di giorni che trascorrono dalla scoperta della vulnerabilit al rilascio di una patch di sicurezza in grado di correggerla: un CMS il cui team di sviluppo reagisce presto ai problemi certamente pi
Fig. 5: Chi dovr usare il CMS avr bisogno di un editor semplice e funzionale (in figura quello di Wordpress 3)
88 / Ottobre 2010
non solo codice
Fig. 7: Una documentazione chiara e approfondita necessaria per utenti e amministratori di un CMS
gli strumenti per lottimizzazione sui motori di ricerca: dalla riscrittura degli indirizzi (URL) in un formato gradito ai motori fino alla gestione dei metadati. Verificate anche la possibilit di gestire, attraverso funzioni built-in o plug-in, strumenti per la condivisione delle risorse sui social network e su altri servizi di comunicazione (almeno Facebook e Twitter), o anche risorse per la creazione di campagne di e-mail marketing (newsletter). Accertatevi infine che sia possibile aggiungere, maga ri integrandoli nel pannello di amministrazione, strumenti esterni di monitoraggio degli accessi, come Google Analytics.
affidabile di un altro in cui le patch vengono rilasciate dopo tempo. Facendo una ricerca su uno dei tanti database di vulnerabilit presenti online (come ad esempio www.osvdb.org oppure http://secunia.com/advisories/search) possibile verificare direttamente sia il numero di vulnerabilit scoperte sia il tempo trascorso per correggerle.
quali strumenti di accessibilit?

Da valutare, in fase di scelta di un CMS, anche tutte le funzioni che possiamo far ricadere sotto la categoria di accessibilit e che qui intendiamo in senso largo: tutti quegli strumenti che favoriscono laccesso al sito ad un pi vasto numero di persone. Oltre ad un layout che garantisca il rispetto delle regole WCAG (Web Content Accessibility Guidelines), le linee guida di accessibilit predisposte dal W3C, lente non profit che si occupa di standardizzare i linguaggi del Web, necessario che il CMS possa produrre, nel modo pi fluido e automatico possibile, anche una versione del sito destinata alla lettura su dispositivi cellulari. Molti CMS possono attivare questa funzione attraversi un plug-in. Inoltre, se vi fosse la necessit di raggiungere anche un pubblico internazionale, va constatata la possibilit di poter contare su interfacce multi-lingua, che si adattano automaticamente alla lingua del visitatore.
che documentazione e che supporto mi garantisce?

Sia gli amministratori di sistema, sia gli utenti del CMS dovrebbero avere a disposizione una buona documentazione per sapere come gestire lapplicazione. Le strade per ottenere queste informazioni sono di solito tre: la documentazione ufficiale rilasciata con lapplicazione; i canali di supporto diretto; la comunit di utenti. Verificate che la documentazione ufficiale copra sia le procedure di installazione, sia, nel caso di CMS Open Source, le procedure di modifica del codice dellapplicazione. Dovrebbe inoltre contenere le istruzioni per luso dei vari componenti, utili per chi dovr utilizzare direttamente il CMS. Del supporto diretto si dovrebbe, come minimo, verificare il costo di ogni richiesta e il numero di giorni che il produttore si riserva di attendere prima di rispondere. Se raro trovare supporto tecnico dedicato in prodotti open source, invece quasi sempre disponibile una comunit che, di solito attraverso un forum, riesce a risolvere anche i problemi pi ostici. Verificate che la comunit sia attiva, navigando nel sito dedicato e visualizzando il numero di messaggi inviati.
quali strumenti di marketing?

Tra gli strumenti pi comuni inclusi in un CMS non dovrebbero mancare quelli dedicati alla promozione del sito, indispensabili per promuovere attivit di marketing, per aumentare il numero di visitatori e per fidelizzare i lettori. Indispensabile, in questo campo, sono
Fig. 8: CMSaccessibile (www.cmsaccessibile.net) un CMS commerciale basato su Mambo che pone al centro gli standard di accessibilit
Ottobre 2010 / 89
TIps&TrIcks
Una raccolta di trucchi da tenere a portata di... mouse
I trucchi del mestiere
tips & tricks

Questa rubrica raccoglie trucchi e piccoli pezzi di codice, frutto dellesperienza di chi programma, che solitamente non trovano posto nei manuali. Alcuni di essi sono proposti dalla redazione, altri provengono da una ricerca su Internet, altri ancora ci giungono dai lettori. Chi volesse contribuire, potr inviare i suoi Tips&Tricks preferiti. Una volta selezionati, saranno pubblicati nella rubrica. Tutti i Tips elencati sono anche presenti nel supporto CD-Rom che accompagna la rivista
PHP
Genera una strinGa casuale
<?php /************* *@l lunghezza della stringa */ function generate_rand($l){ $c=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwx yz0123456789; srand((double)microtime()*1000000); for($i=0; $i<$l; $i++) { $rand.= $c[rand()%strlen($c)]; } return $rand; } ?>
{ $browserIsMobileSafari = true; } ?>
da oGGetto ad array
function object_to_array($object){ $new = NULL; if (is_object($object)) { $object = (array) $object; } if (is_array($object)) { $new = array(); foreach ($object as $key => $val) { $key = preg_replace(/^\\0(.*)\\0/, , $key); $new[$key] = $this->object_to_array($val); } } else { $new = $object; } return $new;
tre metodi Per riconoscere liPHone

< ?php $browser = strpos($_SERVER[HTTP_USER_AGENT],iPhone) || strpos($_SERVER[HTTP_USER_AGENT],iPod); if ($browser == true) { echo Code You Want To Execute; } ?> <?php $browser = strpos($_SERVER[HTTP_USER_AGENT],iPhone) || strpos($_SERVER[HTTP_USER_AGENT],iPod); if ($browser == true) { header(Location: http://www.example.com/); } ?> <?php /* riconosce Mobile Safari */ $browserAsString = $_SERVER[HTTP_USER_AGENT]; if (strstr($browserAsString, AppleWebKit/) && strstr($browserAsString, Mobile/))
interaGire con il GeocodinG di GooGle

function geoCode($QUERY,$GOOGLEKEY=ABQIAAAAmYQAbPS pbkj2fDNP_JB0UBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQQxl2km_ LSoDtKnqMEqRRfxbaqjQ) { $RETURN = array(); $page = file_get_contents(http://maps.google.com/maps/geo?q=. urlencode($QUERY).&key=.$GOOGLEKEY.&output=xml); $xml = new SimpleXMLElement($page); list($longitude, $latitude, $altitude) = explode(,, $xml->Response->Placemark->Point->coordinates); $RETURN[LandCode] = (string) $xml->Response->Placemark>AddressDetails->Country->CountryNameCode; $RETURN[LandName] = (string) $xml->Response->Placemark>AddressDetails->Country->CountryName;
90 / Ottobre 2010
h tt p: // ww w . io p r o g r a m m o . i t

$RETURN[AdArea] = (string) $xml->Response->Placemark>AddressDetails->Country->AdministrativeArea>AdministrativeAreaName; $RETURN[SubAdArea] = (string) $xml->Response>Placemark[0]->AddressDetails->Country->AdministrativeArea>SubAdministrativeArea->SubAdministrativeAreaName; $RETURN[DependentArea] = (string) $xml->Response>Placemark[0]->AddressDetails->Country->AdministrativeArea>SubAdministrativeArea->Locality->DependentLocality>DependentLocalityName; $RETURN[Locality] = (string) $xml->Response>Placemark->AddressDetails->Country->AdministrativeArea>SubAdministrativeArea->Locality->LocalityName; $RETURN[PostCode] = (int) $xml->Response>Placemark->AddressDetails->Country->AdministrativeArea>SubAdministrativeArea->Locality->PostalCode->PostalCodeNumber; if (!$RETURN[PostCode]) $PLZ = (int) $xml->Response->Placemark[0]->AddressDetails>Country->AdministrativeArea->SubAdministrativeArea->Locality>DependentLocality->PostalCode->PostalCodeNumber; $RETURN[LAT] = $latitude; $RETURN[LON] = $longitude; return $RETURN; } <?php echo $excerpt; ?> </div> </p> <div class=entry> <p class=post-meta>
TIps&TrIcks
evidenziare il termine cercato

<div class=post> <?php $title = get_the_title(); $keys= explode( ,$s); $title = preg_ replace(/(.implode(|, $keys) .)/iu, <strong class=search-excerpttitle>\0</strong>, $title); ?> <h2 class=title><a href=<?php the_permalink() ?> rel=bookmark title=<?php the_title(); ?>><?php echo $title; ?></ a></h2>

 <?php $excerpt = get_the_excerpt(); $keys= explode( ,$s); $excerpt = preg_replace(/(.implode(|, $keys) .)/iu, <strong class=search-excerpt>\0</strong>, $excerpt); ?>
Generare una Password

function generatePassword($length=9, $strength=0) { $vowels = aeuy; $consonants = bdghjmnpqrstvz; if ($strength >= 1) { $consonants .= BDGHJLMNPQRSTVWXZ; } if ($strength >= 2) { $vowels .= AEUY; } if ($strength >= 4) { $consonants .= 23456789; } if ($strength >= 8 ) { $vowels .= @#$%; } $password = ; $alt = time() % 2; for ($i = 0; $i < $length; $i++) { if ($alt == 1) { $password .= $consonants[(rand() % strlen($consonants))]; $alt = 0; } else { $password .= $vowels[(rand() % strlen($vowels))]; $alt = 1; } } return $password; }
c#
rimuovere lultimo carattere di una strinGa
// prima : mystring = abcde; mystring = mystring .TrimEnd(;); // dopo : mystring = abcde
una classe Per il croP del testo

public class CropText { public CropText() { } public string ShortenText(string input, int MaxLenght, bool DoDots) { string result = input; int InputLength = input.Length; string lastChar = result.Substring(result.Length - 1);
Ottobre 2010 / 91
TIps&TrIcks
if (MaxLenght < InputLength) { result = input.Substring(0, MaxLenght); if (lastChar == ) {
JQuery
stamPare una PaGina weB
prntwin = window.open(); prntwin.opener = self; prntwin.document.body.innerHTML=msg; prntwin.print(); prntwin.close();
result = result.Substring(0, result.Length - 1); } if (DoDots) { result += ...; } } return result; } }
aPrire un linK esterno in una nuova Finestra

$(document).ready (function() { // Activate on links with rel attribute set to ext $(a[rel=ext]).click (function() { // Add target=_blank attribute to link when clicked $(this).attr(target,_blank); }); // codice privilegiato }); /* Si usa scrivendo il link in questo modo: * <a href=url_here rel=ext title=title_here>LINK TEXT</a> */
codice PrivileGiato
SPSecurity.RunWithElevatedPrivileges(delegate() { using (SPSite site = new SPSite(SPContext.Current.Site.ID)) { } });
un tooltiP sulla listBoX

private void OnListBoxMouseMove(object sender, MouseEventArgs e) { int itemIndex = -1; if (m_LinksListBox.ItemHeight != 0) { itemIndex = e.Y / m_LinksListBox.ItemHeight; itemIndex += m_LinksListBox.TopIndex; } if ((itemIndex >= 0) && (itemIndex < m_LinksListBox.Items. Count)) { ILink mouseOveredLink = (m_LinksListBox.Items[itemIndex] as LinkListItem).Link; }); if (mouseOveredLink != null) { if (!ListBoxToolTip.GetToolTip(m_LinksListBox). Equals(mouseOveredLink.FileName)) { ListBoxToolTip.SetToolTip(m_LinksListBox, mouseOveredLink. FileName); } return; } } ListBoxToolTip.Hide(m_LinksListBox); } }); $(document).ready(function() { $(#input).mask(); } })(jQuery); }); }); //looses focus $this.blur(function() { if($this.val() == ) $this.val(text); //when focused ont the input $this.focus(function(){ if($this.val() == text) $this.val();
una mascHera di inPut

(function($) { $.fn.mask = function() { return $(this).each(function() { var $this = $(this), text = $this.val();
92 / Ottobre 2010
Discussioni dal Web
DAL FORUM
Partecipa anche tu su http://www.ioprogrammo.it
Dal forum
Questa rubrica raccoglie trucchi e piccoli pezzi di codice, frutto dellesperienza di chi programma, che solitamente non trovano posto nei manuali. Alcuni di essi sono proposti dalla redazione, altri provengono da una ricerca su Internet, altri ancora ci giungono dai lettori. Chi volesse contribuire, potr inviare i suoi Tips&Tricks preferiti. Una volta selezionati, saranno pubblicati nella rubrica. Tutti i Tips elencati sono anche presenti nel supporto CD-Rom che accompagna la rivista
WPF E LE TOOLBAR
Autore: Dark Mighty Wolf Newbie
LINGUAGGI DI PROGRAMMAZIONE
Ho voluto provare con il seguente codice:

public partial class BankPanel : UserControl { public BankPanel() { InitializeComponent(); } private void btnSearch_Click(object sender, RoutedEventArgs e) { string abi = txtAbi.Text.Trim(); string cab = txtCab.Text.Trim(); string result; Bank bank; string error; if (SearchBank(abi, cab, out bank, out error)) { result = bank.Name + \nABI: + bank.Abi + \nCAB: + bank.Cab + \nCountry: + bank.Country + \nCity: + bank.City + \nAddress: + bank.Address ; } else { result = Not found\n( + error + ); } lblResult.Content = result; } ... ...
Una domanda diretta: come si mettono le immagini alle toolbar di Windows Presentation Foundation???
Autore: Dark Mighty Wolf Newbie
Ciao, ti posto il codice xaml per inserire limmagine ad un button (ci che vuoi fare da quanto capisco):
<ToolBarTray Background=White> <ToolBar Band=1 BandIndex=1> <Button> <Image Source=toolbargraphics\cut.bmp /> </Button> ... ...
Puoi fare riferimento a questo articolo su MSDN: http://msdn.microsoft.com/en-us/library/ms752063.aspx Fammi sapere!

LINGUAGGI DI PROGRAMMAZIONE > .NET
WE B S E R V I C E P E R V A LI D A Z I O N E A B I E CAB
Autore: Marcellofregni Newbie
Buongiorno a tutti gli utenti del Forum, qualcuno a conoscenza di un web service preposto alla validazione del codice bancario ABI e CAB? Sto cercando il modo di inserire, allinterno di una applicazione che sto realizzando, la funzionalit di ricerca di liali bancarie tramite lintroduzione di codici ABI e CAB. Se qualcuno conosce lesistenza di un Web Service che espone questa funzionalit mi aiuterebbe moltissimo. Grazie Marcello
Autore: alex.75 Jr. Member
Vedi qui se riesci ad usare questo: www.nexusonline.it:8088/
Da notare che per inserire le credenziali (invece di una email per username ho usato per sbaglio la stringa errata che vedi nel codice) ho dovuto creare un Web Reference anzich un Service reference . Ho martellato un p a manina (una ventina di chiamate al minuto) i metodo usati nellesempio ed ha sempre risposto correttamente. Ciao.
Ottobre 2010 / 93
DAL FORUM
Discussioni dal Web
Partecipa anche tu su http://www.ioprogrammo.it

OGGETTO SQLDATAREADER
Autore: bassaidai Newbie LINGUAGGI DI PROGRAMMAZIONE > .NET
Salve, sono nuovo del forum, quindi mi scuso se largomento stato gi trattato ma non lho trovato nei vari post. La domanda la seguente: spesso in C# uso loggetto SqlDataReader, che per ha un cursore forward only; non c un oggetto analogo (lavorando in modalit connessa al db) che mi consenta di scorrere un recordset in entrambe le direzioni (e quindi non solo forward only) come si poteva fare in classic ASP (impostando ad es. in modo appropriato la propriet CursorType di un recordset)? Grazie!
NO, per fortuna non c. Per lavorare in modalit simil-connessa esistono i DataSet... In realt internamente usano dei DataReader anchessi e mantengono lo stato del record in modo tale da creare il giusto comando SQL automaticamente lasciando il tutto trasparente (= nascosto) allutente. Vengono molto pubblicizzati (e le pseudo-guide abbondano) ma il mio consiglio comunque di utilizzare sempre un (Sql)DataReader ed effettuare le operazioni di creazione, aggiornamento e cancellazione manualmente (quindi senza usare DataSet). Altro consiglio di aggiungere msdn alle stringhe di ricerca che fai su Google (o quantomento prediligere i link relativi alla documentazione ufficiale-aggiornata). Ciao Alessandro
Autore: Bassaidai Newbie
stile mordi e fuggi Ecco perch ho scritto per fortuna . . Sinceramente non ricordo nemmeno come una pagina web potesse in ASP tenere una connessione aperta per sfruttare un cursore sui record. Questo perch ogni azione dellutente che invia una richiesta al server d vita ad un processo che muore con la risposta che il server fornisce (HTML generato). Mi pare che la modalit di lavoro sempre-connesso fosse propria di applicativi stand-alone ?! Se devi fare una cosa del genere leggi il recordset (DataReader) e crea una lista di oggetti tipizzati, mettila in cache e scorri gli item come vuoi. Per quanto riguarda lintegrit dei dati con i DataSet ricordo poco... La query di update viene costruita con una where che controlla i valori dei campi del record, cercandone uno che corrisponda a quello da noi editato (fa proprio un controllo sui vecchi valori). Se il record fosse gi stato modificato tale modifica fatta in precedenze da terze parti non verrebbero intaccate dal nostro aggiornamento. Lo stesso avviene per la cancellazione. Molto probabilmente invece aggiornamenti e cancellazioni fatti da noi andrebbero a riferisi allID del record (solitamente si fa cos). Un comportamento totalmente diverso quindi. Ciao
LINGUAGGI DI PROGRAMMAZIONE > JAVA >
JAVA API GOOGLE MAP

Autore: Songissimo Newbie
Salve dovrei realizzare unapplet java che utilizzi Google Map vorrei sapere se ci fosse possibile, perch guardando qua e la mi sembra che le API di Google Map possano essere utilizzate solo tramite javascript allinterno di web-application. Nel caso fosse possibile vi sarei grato se mi indicaste qualche link. Grazie a tutti per laiuto.
Autore: pancry777 Jr. Member
Grazie per la risposta, ma perch dici per fortuna? non una limitazione? Se io volessi gestire una paginazione di recordset senza usare per forza una GridView, come farei con un DataReader, che forward only? In classic ASP alla pressione di un pulsante avanti, indietro,... posso posizionare il cursore dove voglio, sulla pagina che mi serve in base alla dimensione della paginazione che ho dato al recordset, ma con un DataReader? Per quanto riguarda i Dataset (ed in genere la modalit disconnessa) anchio preferisco evitarli a favore dei DataReader (anche se ho notato anchio che vengono molto pubblicizzati). Una cosa che inoltre non sono mai riuscito a capire bene sulla modalit disconnessa di .NET la seguente: se io aggiorno/ cancello dei record in memoria (su un DataTable, DataSet...), nel momento in cui poi devo far persistere le modifiche sul db, viene effettuato un controllo che tali record sul db stesso nel frattempo non siano stati modificati/cancellati? Ad es. Sql Server Management avvisa se si prova a modificare a mano dei record che sono stati precedentemente modificati/cancellati; come viene gestita dal framework tale integrit dei dati? Grazie ancora
Perch non provi a farlo in Java FX? Ti invio un esempio e se leggi gi c anche il codice... http://javafx.com/samples/IpLocator/ index.html
Grazie per lindicazione, mi sembra molto utile... il fatto che dovrei realizzare unapplicazione espressamente desktop...
Autore: pancry777 Jr. Member
Scusa e dove sarebbe il problema? Invece di usare le applet, usi le applicazioni (usa gli swing). Ti segnalo un link che con netbeans fa al caso tuo: http://tinyurl.com/forum155
Le connessioni al database sono limitate, quindi vanno usate in
Proprio ci che cercavo!!!Sei stato grande!!! Grazie ancora!!!
94 / Ottobre 2010
SOFTWARE SUL CD
Librerie e Tool di sviluppo
soFtwAre sul cD
MotoDeV
Sviluppare per Android in stile Motorola
n ambiente di sviluppo con tutte le carte in regola per diventare lo standard per la programmazione su Android. In un unico pacchetto di installazione avremo la piattaforma Eclipse con gi pronti gli Android Development Tools (ADT). Tra le caratteristiche pi interessanti segnaliamo la presenza di un wizard che guida passo passo alla creazione di applicazioni. Ottima
Studio for Android v1.3

la gestione delle funzionalit DB, attraverso il pieno supporto per SQLite. Molto utile la possibilit di connettersi allo store di applicazioni Android, direttamente dallinterno di MOTODEV Studio. Il plus di questo IDE comunque rappresentato dalla garanzia di poter provare le proprie applicazioni su emulatori virtuali che simulino gli handset di Motorola.
A4Desk FlAsh Photo GAllery 2.47

Una galleria di immagini sUbito pronta
Un tool all-in-one che crea una galleria fotografica interattiva in Flash, ampiamente personalizzabile grazie alle numerose skin disponibili. Lutente pu creare una galleria fotografica in Flash o un album fotografico con pochi clic del mouse. La galleria fotografica pu quindi essere pubblicata su un sito Web o allinterno di un CD-ROM, o ancora utilizzata come applicazione stand alone. Non necessaria alcuna conoscenza di Flash.
Nome file: a4deskgallery_setup.exe
meglio comprendere, documentare e visualizzare il codice sorgente. AutoFlowchart supporta i linguaggi C, C ++, Visual C + +. NET), Delphi (Object Pascal).
Nome file: autoflowchart.rar
cryPto obFuscAtor For .Net 2010 r2

metti al riparo il tUo lavoro
Un efficace aiuto per proteggere la propriet intellettuale del software che sviluppiamo, offuscando il codice assembly generato a partire da qualsiasi linguaggio della piattaforma .NET, inclusi C#, VB.Net, Managed C++, J#. Crypto Obfuscator supporta tutte le versioni del framework. NET, compresi il .NET Compact Framework, Silverlight e XNA.
Nome file: cryptoobfuscator.exe
vere codice in modo rapido e semplice, come levidenziazione della sintassi, il function navigator, lauto completamento via tag, le macro, la ricerca e sostituzione attraverso regular expression e un ottimo validatore XML. La versione 3.5.7 aggiunge il supporto per Ant e per HTML 5.
Nome file: editrocket3_5_7_setup.exe
ewDrAw 3D 8.0
le tUa app generano immagini 3d
Un ActiveX per la grafica vettoriale 3D e 2D, ottimo anche nella generazione di animazioni. Si pu usare per CAD, CAM e GIS. EWDraw 3D basato su OpenGL, mentre le libreria realizzata con un controllo Windows a 32 bit. Pu essere utilizzato con applicazioni scritte in Visual Basic, Delphi, C++ Builder, Visual C++, VB.NET e C #. La versione 8.0 aggiunge il drag&drop per i solidi in tre dimensioni.
Nome file: EWDraw 3D.exe
AutoFlowchArt 3.1
diagrammi di flUsso aUtomatici

AutoFlowchart un ottimo strumento per generare diagrammi di flusso a partire dal codice sorgente. Il diagramma di flusso pu essere pi o meno dettagliato a seconda delle preferenze dellutente, e si pu pre-definire la larghezza, laltezza, la spaziatura orizzontale e la spaziatura verticale. possibile esportare il diagramma di flusso come un file di Word o un file bitmap. Pu aiutare i programmatori a
eDitrocket 3.5.7
scrivere codice a razzo
EditRocket un editor di testo perfetto per la scrittura di codice sorgente, grazie al supporto per oltre 20 linguaggi, tra cui HTML, PHP, JavaScript, CSS, Java, Objective-C, Python, Ruby, Perl, XML, C, C++ e Shell Script. Dispone di molti strumenti per aiutare gli utenti a scri-
FirebirD PhP GeNerAtor 10.8

firebird: interfacce pro
Firebird PHP Generator un generatore di
96 /Ottobre 2010
Librerie e Tool di sviluppo
SOFTWARE SUL CD
interfacce per database Firebird. Consente di generare codice PHP di alta qualit per linterrogazione di tabelle selezionate e viste. Con Firebird PHP Generator avremo a disposizione una interfaccia di livello professionale per laccesso ai dati. Freeware.
Nome file: firebird_phpgenerator_free_ setup.exe
loutput. Non solo, il codice che viene prodotto di facile lettura, consentendo cos ulteriori personalizzazioni. Gli script PHP possono girare sia su server Windows (MySQL/PostgreSQL/ Access/MSSQL) che su server Linux (MySQL/ PostgreSQL). La versione 7.1 introduce la compatibilit con PHP Report Maker 4.
Nome file: phpmkr.exe
siteMAP writer 5.2

crea la mappa del tUo sito
Sitemap Writer Pro uno strumento che consente di creare e tenere sempre aggiornata la sitemap dei nostri siti web. Sitemap Writer Pro rende la creazione e la modifica di una mappa semplice e rapida: possibile generare automaticamente sitemap per i vostri siti web, modificarle, caricarle su server web e presentare a tutti i motori di ricerca che supportano Sitemaps (Google, Yahoo, Ask.com e MSN). La versione 5.2.9 ha aggiunto il supporto per importare dati da un file CSV
Nome file: SitemapWriterPro_5.2.9_ Setup.exe
hiGhliGht 3.1
il tUo codice pronto da leggere

Highlight un convertitore universale che trasforma il codice sorgente in file HTML, XHTML, RTF, LaTeX, TeX, XSL-FO e file XML, con una evidenziazione della sintassi particolarmente efficace. Molto comodo in tutti quei casi in cui si renda necessario presentare il codice delle proprie applicazioni garantendo la migliore leggibilit possibile.
Nome file: highlight-setup-3.1.exe
rAzorsQl 5.2.0
Uninterfaccia per tUtti i db

Interrogare, modificare, visualizzare e gestire tutti i principali database da ununica interfaccia. RazorSQL uno strumento per lamministrazione di DB, con la capacit di connettersi a DB2, Derby, Firebird, FrontBase, HSQLDB, Informix, Microsoft SQL Server, MySQL, OpenBase, Oracle, PostgreSQL, SQL Anywhere, SQLite e Sybase. possibile connettersi anche a qualsiasi altro database compatibile con ODBC o JDBC. RazorSQL costruito su di un motore di database relazionale che troviamo gi preinstallato e funzionante out of the box La versione . 5.2.0 include miglioramenti nellinterfaccia a riga di comando, e nelleditor SQL.
Directory: RazorSQL
VisuAl iMPorter Pro 7.7.5
importazione dati Universale

Visual Importer Professional automatizza il processo di caricamento dei dati in qualsiasi database. Consente allutente di progettare limportazione, lesportazione e gli script SQL, pianificandone lesecuzione sulla base di un preciso scheduling. I repository supportati sono Access, Oracle, SQL Server, Interbase, MySQL e PostgreSQL.
Nome file: VImpPS.zip
litePXP 8.20
la tUa applicazione pHp sU cd

LitePXP permette di navigare siti scritti in PHP su CD, senza alcun collegamento a Internet. Si tratta di una applicazione portatile che comprende Apache, MySQL e PHP. possibile eseguire il software direttamente da CD / DVD o qualsiasi altro supporto. possibile effettuare il re-brand e personalizzare la finestra entro cui girano le pagine PHP con il nome di uno specifico prodotto e la sua icona.
Nome file: litepxp-setup.exe
reMoVe VbA PAssworD 2.11.4
via il lUccHetto dalle app!

Un comodo tool per eliminare istantaneamente qualsiasi password VBA e sbloccare cos progetti VBA di Excel, Word, Autodesk AutoCAD, PowerPoint, Access, Publisher, Outlook, e FrontPage. In pochi secondi possono essere rimosse password di qualsiasi lunghezza e set di caratteri.
Nome file: setup_rvp.zip
witeM iNstAller 4.5.11
distribUzioni da professionisti
wItem Installer un potente strumento per la creazione di pacchetti di installazione di Windows, altamente personalizzabili e che seguono in pieno le linee guida per lottenimento del logo di certificazione Windows. Molto diffuso in ambito pro, consente la distribuzione di pacchetti di grande affidabilit.
Nome file: winstall.exe
PhP GeNerAtor Per MysQl 10.8
gUi professionali per mysQl

Un generatore di interfacce grafiche per la gestione di DB MySQL che permette unagile rappresentazione dei dati in formato HTML. Tra le caratteristiche pi interessanti, segnaliamo lautenticazione degli utenti, il supporto per collegamenti ipertestuali e immagini, le numerose opzioni di ricerca per le relazioni master-detail e la capacit di creare applicazioni Web multilingue.
Nome file: mysql_phpgenerator_free_ setup.exe
shiVA 1.8.1 Ple
il gioco si fa facile, in 3d
ShiVa3D una potente piattaforma per lo sviluppo di applicazioni 3D, particolarmente indicata per il real time e per la creazione di videogiochi. Gli ambienti target sono Windows, Mac OS, Linux, iPhone, Android, Palm, Wii e il iPad. Shiva include un potente motore 3D multipiattaforma e un editor tridimensionale WYSIWYG. Leditor visuale permette di creare videogiochi in modo molto rapido e, grazie alla sua immediatezza, pu essere utilizzato anche da chi ha scarse conoscenze di programmazione. Un ambiente potente e completo da prendere in seria considerazione per lo sviluppo di giochi 3D.
Directory: ShiVa
webloG eXPert lite 6.7
analizza cosa fanno i tUoi Utenti

Un analizzatore di log del server Web capace di restituire informazioni specifiche e precise sulle statistiche riguardanti i visitatori del tuo sito, compresa lattivit generale, laccesso ai file, pagine di riferimento, motori di ricerca, browser, sistemi operativi e tutti gli errori che si possono verificare durante la navigazione. Il programma genera un report in HTML ricco di tabelle e grafici. WebLog Expert Lite supporta i file di log di Apache e IIS. Questa nuova release permette il backup automatico.
Nome file: WLELiteSetup.exe
PhP GeNerAtor Per MysQl 10.8

pHpmaker 7.1
Un interessante tool capace di generare codice PHP a partire da un database MySQL. In pochi istanti possibile creare tutto il codice relativo alla gestione dei dati: visualizzazione, inserimento e modifica inclusi. Molto flessibile, include numerose opzioni per personalizzare
Ottobre 2010 / 97
Posta
Le domande dei nostri lettori
by C@solari
Invia i tuoi quesiti a ioprogrammo@edmaster.it
Lesperto risponde
CodiCe Java: troppi if!
Salve a tutti, so che questa una questione piuttosto banale, ma vorrei chiedervi un aiuto per migliorare il codice che vi invio in allegato. Ho diversi case e sto usando solo semplici if e if-then-else. Mi ricordo che cera un modo per usare una look-up table, ma non so come implementarlo in Java. Vi ringrazio per qualsiasi suggerimento vogliate inviarmi.
private int transition(char current, int state) { if(state == 0) { if(current == b) { return 1; } else return 0; } if(state == 1) {
Lasciando perdere la questione sulla correttezza dellapproccio che ho adottato, vorrei solo sapere dove collocare il blocco try/catch, per evitare problemi nel caso ci siano inconvenienti con la query. Quindi, mi (e vi) chiedo: dove devo posizionare il tentativo di cattura, in modo che possa comunicare allutente che qualcosa andato storto? Nel metodo FindObject? Nella propriet IsUsed? Dove richiamo la propriet IsUsed? Da qualche altra parte? (nel caso, dove?) Marcello La regola generale che vale la pena intercettare una eccezione, solo se poi puoi farci qualcosa. Altrimenti conviene intercettare le eccezioni al pi alto livello della propria applicazione e fare tutto ci che necessario per gestirla, al limite anche terminare istantaneamente lapplicazione. Nelle applicazioni con una interfaccia utente, il livello pi alto spesso riconducibile allhandler del clic su un pulsante. Per i servizi in background, il pi alto livello spesso riferibile ai callback. Se si lascia che leccezione si propaghi nel sistema, si avr uneccezione non gestita e lapplicazione andr in crash. Gestire una eccezione in una applicazione con interfaccia utente, spesso comporta la generazione di un messaggio per lutente. Alcune eccezioni non sono fatali e loperazione pu essere ripetuta (per esempio se un file mancante o una query di database non riuscita), ma altre eccezioni sono mortali e lunica opzione quella di terminare lapplicazione. Un servizio in background registrer leccezione e, forse, tenter di ripetere loperazione. Se diversi tentativi falliscono, il livello di allerta sul log pu aumentare per ottenere lattenzione di un operatore. Ti riassumo qualche good practice per la gestione delle eccezioni: Se si cattura uneccezione e si genera una nuova eccezione, bene effettuare il Wrap della eccezione originale e riproporla come InnerException della nuova eccezione. Se si cattura uneccezione e si effettua qualche operazione per gestirla, bene rigenerarla comunque, per non perdere in futuro la traccia che c comunque qualcosa che non va. Nella maggior parte dei casi si dovrebbe sempre e solo intercettare la classe base Exception, allinterno dellhandler di pi alto livello. Utilizzare blocchi finally o ancora meglio il pattern IDisposable per eseguire il cleanup allinterno del tuo codice. Conviene pensare alle eccezioni come a una interfaccia utente per lo sviluppatore e formattare i messaggi eccezione di conseguenza. Prova ad utilizzare solo le eccezioni per situazioni eccezionali, come gli errori imprevisti. Non generare le eccezioni per i casi di errore pi comuni. La verifica dellesistenza di una chiave in un dizionario non dovrebbe generare uneccezione ma ritornare un valore true / false. Dunque, per rispondere alla tua domanda specifica, non credo che dovresti utilizzare alcun blocco try/catch nel tuo codice.
Carlo Ciao Carlo, quello che stai cercando di fare molto simile a un automa a stati finiti, e questi sono di solito attuati con laiuto di una tabella di transizione. Una volta impostata la tabella, semplicemente una questione di indicizzare verso lo stato che si desidera ottenere come valore di ritorno della funzione. Assumendo che i valori siano meno di 256, possibile utilizzare un array bidimensionale di byte:
byte table[][] = new byte[NUM_STATES][NUM_CHARACTERS]; // Qui cominci a popolare la tabella table[0][b] = 1; table[1][a] = 2; // qui prosegui sfruttando la matrice di transizione private int transition(char current, int state) { return table[state][current]; }
Quando e dove usare i try/CatCh?

Sono sempre molto indeciso su dove collocare i blocchi try/catch. Per esempio, ho una classe che opera con un database, con un metodo che accetta due parametri: FindObject (string where, string order). Questo metodo esegue una query SQL con i parametri where e order indicati nella chiamata. In una classe, ho una propriet chiamata IsUsed, fatta in questo modo:
public bool IsUsed { get { ClassA a = new ClassA(); Collection<ClassA> myCollection = a.FindObject(Id = 1,); if(..) // etc } }
98 / Ottobre 2010

Io Programmo 155 Ottobre 2010

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Io Programmo 155 Ottobre 2010

Caricato da

Copyright:

Formati disponibili

Scopriamo il framework Sencha touch per scrivere agevolmente una WebApp per il melafonino

iPhone 4 con hTML5 e JavascriPT!

Per esPerti e PrinciPianti

Sfruttiamo tutte le novit per accedere velocemente a qualunque fonte DB

scoPri il nuovo entity Framework 4

VISuAL BASIc 2010

Con jQuery, manipoliamo in modo veloce ogni tipologia di documento HTML

semPliFica il codice dei tuoi JavascriPt

Sviluppiamo WebApp con meno codice e in stile MVC

un Framework oPen source Per il web

Scriviamo una extension in grado di dialogare facilmente con Twitter

le estensioni di GooGle chrome

Unapplicazione meteo per scoprire il funzionamento delle Push Notification

Gestione delle notiFiche con iPhone

Programmare senza scrivere codice!

intelligenza artifiCiale Con Bada

condivisione dei dati tra le aPP android

Questo mese su ioProgrammo

199.50.00.05* sempre in funzione servizioclienti@edmaster.it

Questo mese su ioProgrammo

Programmare senza scrivere una riga di codice!

non Solo codice

qualche consiglio utile

Programmare Robot con Java

Sviluppare applicazioni per il robot Lego Mindstorm NXT

MOTODEV Studio for Android v1.3

Come usare linterfaccia del CD-ROM

INFO RICERCA SOFTWARE

Fennec 2.0, lalpha pronta per tutti

WebOS 2.0: ecco lSDK!

Paypal e Android, matrimonio in vista?

Intel e Nokia: laboratorio in comune per il 3D

Win Phone 7: tutto vocale

Oracle frena su OpenSolaris

PROBLEMI CON LA TECNOLOGIA? ECCO LE SOLUZIONI

Scorrere un Array in VB.NET

Silverlight: oltre Html5

AmIgA rINASce cON cOmmODOre USA

con rFID, Facebook entra nella realt

lg, le-PAPer PrONtA

Introduzione allambiente di sviluppo per Win Phone 7

SVILUPPARE PER WINDOWS PHONE 7

Introduzione allambiente di sviluppo per Win Phone 7

Fig. 1: Quadro riassuntivo della piattaforma di sviluppo

Introduzione allambiente di sviluppo per Win Phone 7

Fig. 2: Applicazioni in fase di sviluppo: menu start e menu programmi

Introduzione allambiente di sviluppo per Win Phone 7

PARTIRE CON IL PIEDE GIUSTO

GLI STRUMENTI DI SVILUPPO

BLOG, FORUM E ESEMPI

Introduzione allambiente di sviluppo per Win Phone 7

Fig. 4: Il primo test della nostra nuova app

Fig. 5: Software Input Panel (SIP)

Introduzione allambiente di sviluppo per Win Phone 7

Fig. 6: Codice reale XAML del controllo Panorama

Fig. 7: Il controllo Panorama in una applicazione reale

Introduzione allambiente di sviluppo per Win Phone 7

Fig. 8: Phone Call da codice

Fig. 9: Interfaccia in azione con il Phone Number Chooser

Introduzione allambiente di sviluppo per Win Phone 7

COSA SUCCEDE DIETRO LE QUINTE

LA BELLEZZA DEL PANORAMA

Introduzione allambiente di sviluppo per Win Phone 7

Fig. 10: Save Phone Number Task