Io Programmo 155 Ottobre 2010

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 • AnnO XI • n.4 (113)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 2010 • Anno XIv, n.10 (155)Per esPerti e PrinciPianti

Programmare senza scrivere codice!

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

ioPro

gra

mm

o A

nn

o X

IV - N

°10 (1

55)

ED

IZIO

NI M

ASTE

RW

IND

OW

S P

hO

NE 7

• VIS

uA

L STu

DIO

LIgh

TSW

ITch

• IPh

ON

E 4

cO

N h

TML5

E JA

VA

Sc

RIP

T

Sotto la lente il nuovo Visual Studio LightSwitch. Per sviluppare applicazioni .NET senza conoscere alcun linguaggio

www.edmaster.it

VISuAL BASIc 2010scoPri il nuovo entity Framework 4Sfruttiamo tutte le novità per accedere velocemente a qualunque fonte DB

JQuERysemPliFica il codice dei tuoi JavascriPtCon jQuery, manipoliamo in modo veloce ogni tipologia di documento HTML

RuBy ON RAILSun Framework oPen source Per il webSviluppiamo WebApp con meno codice e in stile MVC

BROWSERle estensioni di GooGle chromeScriviamo una extension in grado di dialogare facilmente con Twitter

MOBILEGestione delle notiFiche con iPhoneUn’applicazione meteo per scoprire il funzionamento delle ‘Push Notification’

condivisione dei dati tra le aPP androidUsiamo i Content Provider per scrivere App in grado di dialogare tra loro

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

Windows Phone 7 ed è vera rivoluzione!

Sul cd-Rom tutti gli esempi di codice commentato!

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 l’innovativa 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

intelligenza artifiCiale Con Bada Riconosciamo un volto in una foto grazie alle API del sistema operativo

RIVISTA+CD € 6,99RIVISTA+LIBRO+CD € 9,99VERSIONE PLUS VERSIONE STANDARDby C@solari

Questo mese su ioProgrammo

All’inizio 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, all’indirizzo http://cdrom.ioprogrammo.it

❑ CD ❑ WEBnomefile

cdrom.ioprogrammo.it

Con la copertina di questo mese, ioProgrammo dà u� cialmente il benvenuto ad nuovo e atte-sissimo contender nell’arena delle piattaforme mobile. Windows Phone 7 ha � nora raccolto con-sensi pressoché unanimi da parte di chiunque abbia avuto modo di testarlo e siamo veramente felici di potervi presentare in anteprima assoluta l’ambiente di sviluppo. Vorrei ringraziare l’ottimo Roberto Brunetti per l’eccezionale tempismo, nonché la stessa Microsoft che ci ha concesso di proporre in anteprima le immagini del controllo Panorama, cuore della nuova interfaccia, e anco-ra sotto nda. Ancora una volta, per noi program-matori si apre un nuovo campo d’azione, una nuova possibilità per esprimere la nostra fantasia e le nostre capacità. Se, come tutto lascia presa-gire, Windows Phone 7 si rivelerà un successo (magari sfruttando la sinergia con XBox) gli sce-

nari che si apriranno saranno quanto mai interes-santi 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 mobi-le, è 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à nell’esecuzione dei comandi: il tutto si può riassumere nel concetto di coerenza con l’interfaccia di base. Ecco, riuscire a proporre un’applicazione innovativa, restando con l’am-biente, penso possa essere una buona base per un progetto di successo.

Ra� aele del Monaco

▼ COERENZA E INNOVAZIONE

Anno XIV - N.ro 10 (155) - Ottobre 2010Periodicità: Mensile

Reg. Trib. di CS al n.ro 593 del 11 Febbraio 1997Cod. ISSN 1128-594X

E-mail: [email protected]://www.edmaster.it/ioprogrammo

http://www.ioprogrammo.it

Direttore Editoriale: Massimo SestiDirettore 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 CocerioResponsabile area tecnica: Giancarlo Sicilia

Illustrazioni: Arturo BarbutoImpaginazione elettronica: Francesco Cospite

Pubblicità: Master Advertising s.r.l.Via F. Filzi, 27 - 20124 Milano

Tel. 02 83121211 - Fax 02 83121207e-mail [email protected]

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 l’Italia � no al 30/11/2010. Costo arretrati (a copia): il doppio del prezzo di copertina + €5.32 spese (spedi-zione 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, l’intesta-tario della carta e il codice CVV2, cioè le ultime 3 cifre del codice numerico riportato sul retro della carta).

• bonifi co bancario intestato a Edizioni Master S.p.A. c/o BCC MEDIOCRATI S.C.AR.L. IBAN: IT 85 Q 07062 80881 000000012000 (invian-do copia della distinta insieme alla richiesta).

SI PREGA DI UTILIZZARE IL MODULO RICHIESTA ABBONAMENTO PO STO NELLE PAGINE INTERNE DELLA RIVISTA. L’abbonamento ver rà attivato sul primo numero utile, successivo alla data della ri chiesta. Sostituzioni: qualora nei prodotti fossero rinvenuti difetti o imperfezioni che ne limitassero la fruizione da parte dell’utente, è 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 MilanoAssistenza tecnica: [email protected]

Stampa: Arti Gra� che Boccia S.p.a. Via T. C. Felice, 7 SalernoDuplicazione CD-Rom: Neotek S.r.l.C.da Imperatore - Bisignano (CS)Distributore esclusivo per l’Italia: 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 auto-riz zazione scritta della Edizioni Master. Manoscritti e foto originali, anche se non pubblicati, non si restituiscono. Edizioni Ma ster non sarà in alcun caso responsabile per i danni diretti e/o indiretti derivanti dall’u ti lizzo dei pro gram-mi contenuti nel supporto mul ti me dia le allegato alla rivista e/o per even tua li anomalie degli stessi. Nessuna responsabilità è, inol tre, assunta dalla Edizioni Master per danni o altro derivanti da virus informatici non riconosciuti dagli antivirus uf� ciali all’atto della ma ste riz zazione del supporto. Nomi e mar chi protetti sono citati senza indicare i relativi brevetti.

“Rispettare l’uomo e l’ambiente 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 dell’inquinamento”

SERVIZIO CLIENTI199.50.50.51* dal lunedì al venerdì 9:00/13:00 – 14:00/18:00

199.50.00.05* sempre in funzione

[email protected]

*Costo massimo della telefonata 0,118 € + iva a minuto di conversazione, da rete fissa, indipendentemente dalla distanza. Da rete mobile costo dipendente dal l ’operatore uti l izzato.

Windows Phone 7 ed è vera rivoluzione!

Come funziona l’innovativa 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

by C@solari

Questo mese su ioProgrammo

web 2.0il 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 richiede-va decine di righe di codice: scopri come approfittarne nelle tue applicazioni

Ruby foR dummies: iniziamo bene! . . . . . . . . . . . . .30Ruby è uno dei principali protagonisti del web moderno. Impareremo i fondamenti del lin-guaggio e creeremo una to do list per il web in poche righe di codice: avvicinarsi alla program-mazione di domani, partendo da zero

chRome: l’estensione è seRvita! . . . . . . . . . . . . . . . . . .36Maggior 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

mobileil telefono Riconosce i volti! . . . . . . . . . . . . . . . . . . . .42In questo appuntamento scopriremo come sfruttare le potenti API di BADA per cattura-re immagini dalla fotocamera. rintracceremo anche i volti presenti nelle immagini scat-tate. infine installeremo tutto sul telefono WAVE S8500

iPhone 4 con html5 e JavascRiPt! . . . . . . . . . . . . . . .50Se non si ha tempo o voglia di imparare Objective-C, il linguaggio Apple per svilup-pare su iPhone e iPad, le WebApp scritte in Sencha possono essere una valida alter-nativa per raggiungere i sempre più nume-rosi fan di casa Apple

notification: che temPo fa? .54Un’occasione per scoprire le potenzialità di push notification e local notification, attra-verso la realizzazione di un’applicazione che ci tiene aggiornati sulle temperature di una specifica località

gestione dei content PRovideR .60I Content Provider costituiscono la manie-ra di Android per condividere dati fra le applicazioni. In questo articolo imparere-mo a consultare i provider predefiniti e vedremo anche come costruire un forni-tore di contenuti custom

SiSTemAPRogRammaRe è ancoRa facile! . . . . . . . . . . .64 Un nuovo ambiente di sviluppo di Microsoft che semplifica la creazione di applicazioni anche per i non-programma-

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 garan-tito dal DataGrid di WPF, permettono di gestire i dati con molta più flessibilità. Sperimentiamone le possibilità con una applicazione di anagrafica

non Solo codicecome 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

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 92 Le più interessanti discussioni dal sito web di ioProgrammo

Software 96 I contenuti del CD-Rom allegato

Posta 98 Le richieste dei nostri lettori


qualche consiglio utilei 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 all’articolo e seguire passo passo quanto viene spiegato tenendo d’occhio l’intero progetto.

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

by C@solari


Il CD-Rom allegato

6 / Ottobre 2010

Come usare l’interfaccia del CD-ROM

Il top software del mese individuato dalla redazione

IN EVIDENZA

Il software diviso in categorie per

una comoda consultazione

IL SOFTWARE

Torna alla pagina iniziale del CD-ROM

HOME

Per inviare una email alla redazione con le tue richieste

CONTATTACIIl database di tutti i software pubblicati da ioProgrammo, anche gli arretrati

RICERCA SOFTWARE

Abbonamenti, informazioni e servizi utili

INFO

L’elenco del software contenuto nelle categorie

IL SOFTWARE

La dimensione del software sul CD

DIMENSIONE

Clicca qui per installare o salvare il software sul tuo PC

SALVAUna accurata recensione

dei contenuti

IL SOFTWARE

I l testo nasce dall’esperienza della Scuola di Robotica (www.scuo-

ladirobotica.it) e si propone due obiettivi: essere un manuale di faci-le consultazione, ricco di esempi, per la programmazione e presen-tare le basi teoriche per lo sviluppo di applicazioni Java, affrontando le problematiche specifiche della robotica. La possibilità di program-mare 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 applica-zioni per il robot Lego Mindstorms NXT, robot didattico nato per essere direttamente programmato con NXT-G, un pro-gramma fornito dalla Lego, che ha rilasciato il progetto sotto licenza Open Source, mettendo a disposizione della comunità tutte le specifiche software e hardware.

Un 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 crea-zione 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 dall’inter-no di MOTODEV Studio. Il plus di questo IDE è comunque rappresen-tato dalla garanzia di poter provare le proprie applicazioni su emula-tori virtuali che simulino gli handset di Motorola, appena vengano messi in commercio.

ProgrammareRobot con JavaSviluppare applicazioni per il robot Lego Mindstorm NXT

MOTODEV Studio for Android v1.3 Sviluppare per Google Android in stile Motorola

TopSoftware

CD

NEWS

http://www.ioprogrammo.it 8 / Ottobre 2010

Fennec 2.0, l’alpha è pronta per tutti

WNuova release preliminare per Fennec, il Firefox per smartphone, MID e altri dispositivi mobi-

le: la seconda main release della volpe del deserto marcata Mozilla arriva allo stadio di alpha “ufficiale” dopo quello pre-alpha su piattaforma Android, unifi-cando la distribuzione delle build per il succitato OS di Google e l’N900 di Nokia e portando in dote novità tecnologiche rilevanti.Fennec - nome in codice di un browser mobile realiz-zato a partire dalle stesse fondamenta della tecnolo-gia 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 inte-grato direttamente nella versione princi-pale del browser Mozilla - fornisce acces-so istantaneo alla cronologia di naviga-zione della “Awesome Bar”, ai preferiti, alle password, ai form già compilati e alle schede aperte sui diversi dispositivi su cui l’utente utilizza Firefox attraverso un mec-canismo 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 è prevalente-mente focalizzato sul miglioramento delle performance e della “reattività alle azioni dell’utente”.Per raggiungere lo scopo sono state appun-to implementate Electrolysis e Layers: la prima fa si che l’interfaccia 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 dell’utente mentre vengono caricate le pagine o la CPU esegue codice CPU JavaScript intensivo”.E Layers? I l componente verrà sfruttato a partire dalla prossima release beta di Fennec,

dice ancora Mozilla, migliorando grandemente “azio-ni grafiche intensive come lo scrolling, lo zoom, le animazioni e i video”. Previsto anche lo sfruttamento dell’accelerazione 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 intro-duce 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 all’utente direttamente sul desktop.

Il browser mobile di Mozilla si aggiorna. A bordo ci sono Sync e tecnologie pensate per migliorare le prestazioni e l’esperienza utente

NEWS


WebOS 2.0: ecco l’SDK!

Paypal e Android, matrimonio in vista?

W eb OS non è morto. La conclusa acquisizione di Palm da parte di HP permette ora al colosso statunitense di con-

centrarsi sulle prossime iterazioni del sistema operativo mobi-le. Per migliorare la propria posizione sul mercato, “fare rumo-re” 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 funzio-nalità 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. L’SDK di WebOS 2.0 offrirà agli svi-luppatori 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 velo-ci” con cui fornire all’utente la possibilità di aggiornare status online, scrivere email e altro ancora senza l’obbligo di lanciare

prima l’applicazione corrispondente. E ancora Web OS 2.0 avrà una moda-lità “dock” chiamata Exhibition, gra-zie alla quale sarà possibile program-mare il sistema per attivare partico-lari schermate o messaggi di stato una volta collegato lo smartphone/MID/tablet alla sua docking station. Garantiti infine un più facile accesso diretto all’hardware del dispositivo su cui gira l’OS, 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 l’effettiva disponibilità della versione definitiva del sistema operativo, e l’eventuale commercializzazione di gadget basa-ti su di esso.

PayPal, il servizio di pagamento di eBay, sarebbe in trat-tativa con Google per sbarcare su Android. Se l’incon-

tro tra le parti dovesse concludersi positivamente, PayPal dovrebbe arrivare, secondo alcune fonti, sulla piattaforma mobile di Google entro la fine dell’anno. 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, evi-tando ai clienti il fastidio di dover inserire ogni volta i dati della propria carta di credi-to o di registrarsi a Checkout e raggiungen-do 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 l’indiscrezione. Intanto PayPal sta

introducendo alcune innovazioni e caratte-ristiche aggiuntive alle sue applicazioni per iPhone e Android stessa: la possibilità di fare donazioni ad un’organizzazione no-profit direttamente dall’app, e un’opzione che dovrebbe permettere, fotografando fronte/retro un assegno, di depositarlo automa-ticamente sull’account 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.

NEWS

http://www.ioprogrammo.it Ottobre 2010 / 11

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 dell’Università di Oulu, in Finlandia. Ad annunciarlo un comunicato congiunto di Intel e Nokia, che hanno nuova-mente 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 potreb-be 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 ricer-ca 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 dell’azienda finlandese. Questa la rampa di lancio dei venti e più ricercatori dello Joint Innovation Center, alla ricerca di nuove esperienze. In tre dimensioni.

Fino a ieri comandi vocali disponibili su ordinari smartphone e cellulari si limitavano fondamentalmente alla possibilità di

comporre un numero telefonico presente in rubrica, senza l’uso delle mani. Oggi le cose stanno cambiando sensibilmente. In occa-sione 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 control-lo vocale come una funzione collate-rale ma come parte integrante dell’in-terfaccia utente futura, perché nelle prossime periferiche in arrivo sul mer-cato la voce sarà un elemento deter-minante. La chiave con cui accelerare i tempi di risposta tra input e output. Negli ultimi tre anni, Microsoft ha ela-borato e utilizzato questa tecnologia soprattutto per applicazioni specifiche, pensate per le esigenze aziendali, e per accessori dedicati al settore automo-bilistico. Il sistema infotainment Kia UVO che verrà installato sulle prossime Ford già appare un dimo-strazione di forza notevole, visto che con le parole è possibile arrivare a gestire le funzioni dell’autoradio 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 permetten-do di controllare determinate funzioni della dashboard, come la riproduzione dei filmati, tramite l’uso delle corde vocali. Il keynote dello SpeechTEK 2010 ha comunque sottolineato la volontà di inse-rire 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 ren-dere il dispositivo Microsoft più imme-diato rispetto ai concorrenti sugli scaf-fali dei negozi. Sui terminali Google Android è infatti già possibile attivare il sistema voice per qualunque appli-cazione che includa un campo di testo ma il sistema esige comunque l’uso 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à d’uso semplificata che sia basata esclusi-vamente sulle corde vocali dell’utente.

Win Phone 7: tutto vocale

NEWS


Oracle frena su OpenSolaris

TechAssistance (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 soluzio-

ni ai problemi più frequenti postati dagli utenti. Se invece sei tu ad essere in difficoltà e vuoi ottenere aiuto immediato, collegati all’home 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!

Scorrere un Array in VB.NET

All’interno di un’applicazione VB.NET vorrei visualizzare il contenuto di un array bidimen-

sionale utilizzando listview. Vorrei sapere se è possi-bile e, in caso affermativo, come trasformare l’array 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 uni-ca avvertenza, ti dico che stiamo considerando un’applicazio-ne WinForms e che questa soluzione potrebbe avere bisogno di qualche modifi ca nel caso in cui la volessi implementare in

un’applicazione 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.GetUpper-Bound(1) Dim lvi As New ListViewItem For x As Integer = dataArray.GetLowerBound(0) To dataArray.GetUpperBound(0) If x = 0 Th en lvi.Text = dataArray(x, y) Else lvi.SubItems.Add(dataArray(x, y)) End If Next listView.Items.Add(lvi) NextEnd Sub

PROBLEMI CON LA TECNOLOGIA? ECCO LE SOLUZIONI

Un memo interno all’azienda sembra confermare i timori della com-munity: 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é l’aggressività 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: l’approccio di Sun è stravolto, gli sforzi di distribuzione e programmazio-ne saranno concentrati su Solaris, di community basterà quella Linux e il resto del codice che sarà distribuito con licenze open source probabil-mente non sarà completo e in ogni caso seguirà a debita distanza la ver-sione uffi ciale. Il codice sorgente di Solaris è fi nora stato rilasciato sotto una licenza denominata Community Development and Distribution License (CDDL): questa continuerà ad essere uti-lizzata anche in futuro, ma condizionata-mente 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 chiara-mente gli ultimi chiodi sulla bara di OpenSolaris, “Non rilasceremo altre distribuzioni binarie, né OpenSolaris 2010.05, né distribuzioni successi-ve”. 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 off re

programmi di archiviazione basati su OpenSolaris e Linux), al cui lancio i pro-motori hanno aff ermato di non dipen-dere da Oracle e i cui programmatori stanno ora provvedendo a sostituire le componenti Solaris che non sono mai state rilasciare in open source.

NEWS


INtel tI legge Il PeNSIerO

Non si tratterebbe semplicemente della possibilità di captare gli stimoli

cerebrali relativi ad un determinato movi-mento muscolare, ma proprio della pos-sibilità di scrivere email o effettuare una ricerca su Internet solo visualizzando nella propria mente le parole da utilizzare. Per fare uscire l’idea dalla fantascienza i ricer-catori degli Intel labs starebbero pensando tracciando mappe dettagliate dell’attività cerebrale, trovando una corrispondenza tra parole pensate e stimoli trasmessi. Non c’è ancora nulla in produzione, ma lo studio pare sia in fase avanzata.

AmIgA rINASce cON cOmmODOre USA

Lo storico marchio Amiga è di nuovo proprietà di Commodore. Perlomeno

di Commodore USA, società a cui anco-ra mancano i diritti di sfruttamento del marchio “Commodore” - attualmente in gestione a Commodore International. Nell’annunciare la nuova linea “keybo-ard computer” Amiga chiamata AIO (“All In One”), Commodore USA dice di voler “supportare pienamente” gli sforzi della community riunitasi attorno ad AROS con l’elargizione di fondi che permetteranno al progetto di “evolversi rapidamente e prendere il posto che merita alla guida dei sistemi operativi per desktop”.

lg, l’e-PAPer è PrONtA

LG ha annunciato uno schermo e-paper grande, flessibile e leggero che evoca

immediatamente la fantascienza. La tec-nologia è costituita da un lamina di metal-lo al posto del vetro che garantisce flessi-bilità 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 all’altezza: oltre ad un alto livello di contrasto il fatto che necessita di energia solo per l’aggiornamento 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 l’idea corre immedia-tamente ad e-reader pensati appositamen-te per la lettura dei giornali...

NewsSilverlight: oltre Html5

con rFID, Facebook entra nella realtà

Secondo 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 esten-sione del linguaggio di scripting stori-co del web che permette l’implemen-tazione 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 itera-zione dello standard attraverso l’in-troduzione in Internet Explorer 9. Ma HTML5 e CSS 3 continueranno sempre a renderizzare un web diverso da un browser all’altro, dice Becker, mentre le specifiche del nuovo HTML sono ancora in evoluzione e ci vorranno

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.

La tecnologia Radio Frequency IDentification (RFID), già utilizzata per

esempio per tessere di riconoscimento o carte di credito, quest’estate ha anche esordito nel mondo dei social network: è stata infatti uti-lizzata per una versione nel mondo reale del Mi Piace di Facebook. A pensansare ad un

utilizzo social dell’RFID è stata l’azienda israe-liana e-dologic che l’ha sperimentata nel cen-tro 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 auto-maticamente un “mi piace” sul profilo dell’utente per il luogo o l’attività specifica così gradita da volerla spammare condivi-dere con i propri amici. Oltre alle macchine con il pollice, il fotografo ufficiale del Coca Cola Village è stato dotato di una macchinetta che in combina-zione con i braccialetti permette di pubblicare e taggare automa-ticamente le foto.

COVER STORY Introduzione all’ambiente di sviluppo per Win Phone 7


Questo articolo ha l’obiettivo di intro-durre tutti coloro che vogliono esse-re parte della rivoluzione Microsoft

nel mondo della telefonia mobile al nuovo ambiente di programmazione. Inizieremo con una descrizione delle caratteristiche hardwa-re del dispositivo per poi concentrarci sulle feature del telefono stesso, prima di affronta-re l’argomento principale, ovvero lo sviluppo di una semplice applicazione utilizzando gli strumenti di sviluppo, gratuiti, e il runtime di Silverlight. Nel corso dell’articolo vedremo insieme alcune specifiche per lo sviluppo di applicazioni.

IL DEVICEA febbraio 2010, Microsoft ha reso pubbliche le sue intenzioni nel mondo della telefonia mobile e nei mesi successivi ha reso disponi-bili, gratuitamente, varie versioni CTP e Beta dell’ambiente 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 pre-sentare il prodotto nelle varie conferenze è diverso rispetto al passato. Seguiamo lo svilup-po mobile dal 1997 quando acquistammo un device con a bordo Windows CE 1.0 in occa-sione della Microsoft Professional Developer Conference 97 a San Diego: neanche allora, quando, veniva lanciato un prodotto destinato ad un successo strepitoso e che tutt’oggi fa da base per il nuovo device era stata data così tanta enfasi alla presentazione come oggi acca-de per Windows Phone 7.Del nuovo device è fondamentale comprender-ne la filosofia di progettazione e le linee guida che hanno ispirato la nascita di questa nuova user experience. Con il termine user experien-

ce, da qualche anno, si fa riferimento proprio all’esperienza che l’utente vive durante l’utiliz-zo 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 dell’utente con un sistema e comprende l’esperienza, l’af-fetto, il significato e il valore dell’interazione uomo-macchina e della proprietà del prodotto stesso; inoltre, la percezione degli aspetti pra-tici e dell’efficienza fanno parte dell’esperienza dell’utente.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 applica-zioni saranno tutte uguali, anzi, stiamo affer-mando il contrario: le linee guida servono per evitare che l’utente disperda il suo tempo alla ricerca di un tasto o di una funzionalità, ser-vono per dare una base comune per facilitare l’utilizzo delle applicazioni, riducendo i tempi di apprendimento e la dimensione dell’even-tuale testo di help. Le applicazioni mobile sono utilizzate in contesti diversi rispetto alle applicazioni tradizionali. L’esempio più classi-co è: se l’utente 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 leg-gere venti righe di testo di aiuto; se l’utente si deve fermare non abbiamo scritto una buona applicazione e se invece l’utente 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-

REQUISITI

Conoscenze richiesteConoscenza di .NET e Visual Studio

SoftwareÈ necessario installare i Windows Phone Developer Tools, sca-ricabili gratuitamente a partire dall’indirizzo http://tinyurl.com/winp7dev

Impegno

Tempo di realizzazione

❑ CD ❑ WEBThinkAhead.IoProgrammo.zip


SVILUPPARE PER WINDOWS PHONE 7LA 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


Ottobre 2010 / 15 http://www.ioprogrammo.it

NOTA

ARCHITETTURA APPLICAZIONIWindows Phone 7, nella sua prima versione, offre uno spazio per la memo-rizzazione dei dati deno-minato Isolated Storage. Il codice per utilizzare l’Isolated Storage segue le stesse tecniche di qualunque applicazione Silverlight. Nelle versioni successive potremmo avere supporti locali più evoluti, quindi, per evitare di riprogettare l’applica-zione o modi� carla pesan-temente, è consigliabile utilizzare una forma di disaccoppiamento fra la user interface, lo strato di logica di business e l’accesso ai dati. Questo disaccoppiamento con-sente di sostituire un singolo componente, nel nostro caso ad esempio l’accesso 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 sull’architettura delle applicazioni.

faccia mirata allo schermo e alla user expe-rience 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 PIATTAFORMAPer piattaforma si intende l’insieme delle carat-teristiche hardware e software che compongo-no il device: l’utente 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 accen-nato all’inizio dell’articolo, una versione di Windows CE su cui è installata una versione del .NET Compact Framework. Il .NET Compact Framework non è però utiliz-zabile direttamente dagli strumenti di svilup-po, 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 appli-cazioni web, ma è diventato anche l’ambiente di programmazione per le applicazioni mobile oltre al runtime che farà girare il codice sul device. Rispetto all’ambiente Silverlight tra-dizionale, in cui le applicazioni vengono rag-giunte dall’utente da un browser e possono poi essere installate in locale e fatte girare fuori dal browser stesso, nell’ambiente 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 l’aderenza alle specifiche per poi renderlo disponibile all’acquisto o al semplice download nel caso di applicazioni gratuite o versioni trial, gestendo tutti gli aspetti di com-mercializzazione, compresa l’eventuale pub-blicità 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 clas-si della libreria System.Net in quanto esposte dal runtime di Silverlight per effettuare richie-ste HTTP, così come è possibile interagire con i dispositivi hardware come il GPS o l’accele-rometro tramite, rispettivamente, la libreria System.Device e System.Device.Sensors. Se non avete a disposizione un device, cosa

probabile all’uscita di questo articolo, vi con-sigliamo di fare una passeggiata su Channel 9 (channel9.msdn.com), dove sono disponibili vari filmati introduttivi che mostrano pratica-mente quasi tutte le funzionalità del telefono e l’interazione dell’utente con la stessa. L’insieme delle funzionalità hardware e sof-tware esposte allo sviluppatore è riassunto in Fig.1, presa direttamente dalla documentazio-ne 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 applica-zioni “tradizionali”, ovvero applicazioni la cui interfaccia utente sia basata sul classico para-digma di pagine che l’utente 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 sot-tovalutare per gestire animazioni complesse o interazioni complesse dell’utente 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 pos-sono 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 ambien-te Desktop: Visual Studio, destinato agli svi-luppatori 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.

Fig. 1: Quadro riassuntivo della piattaforma di sviluppo



Gli strumenti di sviluppo comprendono anche un emulatore e una tonnellata di esempi com-pleti o esempi da costruire passo passo, e la documentazione sull’intera piattaforma.Sul device (e sull’emulatore) è ovviamente presente un browser internet, per la precisio-ne 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 piatta-forma comprendono :

1. Silverlight 3 (con alcune feature della ver-sione 4) per la creazione di moderne user interface basate su eventi

2. XNA per realizzare giochi e animazioni com-plesse

3. HTML/XHTML/AJAX/JQuery per applicazio-ni 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 trami-te applicazioni basate su Windows Azure che consentono di utilizzare il sistema di gestione degli utenti, le mappe, i servizi di localizzazio-ne, meccanismi per inviare notifiche all’utente e, non ultimi, i servizi esposti da Xbox Live.

IL MERCATO DI RIFERIMENTOLa distribuzione delle applicazioni viene fatta tramite Windows Phone Marketplace che, da svariati anni, è il contenitore in cui pubblicare e pubblicizzare le applicazioni rivolte al pub-blico. Non è possibile, almeno per adesso, installare una applicazione direttamente su un devi-ce, se non per portarne avanti lo sviluppo. L’approccio è molto simile a Windows Mobile, dove, da sempre è necessario firmare le appli-cazioni con il certificato del marketplace per renderle “sicure” e installabili senza blocchi di security sui vari device. Si possono fare parago-ni anche con le piattaforme concorrenti come iPhone e Android.Ogni applicazione installata gira in modo isola-to dalle altre con lo stesso paradigma utilizzato da Silverlight su piattaforma web: è possibi-le appoggiare dati e impostazioni applicative sull’Isolated Storage senza doversi preoccu-pare 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 l’insieme delle caratteristiche minime definite dalle specifiche per poter essere consi-derato un device Windows Phone 7. Microsoft ha scelto infatti una strada più aperta rispetto a Apple che fornisce anche l’hardware. 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 mag-giormente alle nostre esigenze (con tastiera o senza, con più storage o meno), ma dal punto di vista dello sviluppatore, avremo a disposi-zione un’insieme di caratteristiche comuni su cui poter contare. Ad esempio lo schermo sarà sempre 480x800 (dimesioni in Portrait), avremmo a disposizio-ne una quantità di RAM che farebbe impallidi-re un classico notebook di 3 anni fa, una foto-camera digitale, un servizio GPS, una scheda Wi-Fi, l’accelerometro e altre caratteristiche

NOTA

USER EXPERIENCESpesso lo sviluppatore sot-tovaluta 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 l’importanza di aderire alle linee guida della piattaforma. Su una interfaccia di dimensioni

ridotte e su un dispositivo che fa della user experien-ce un suo punto di forza è fondamentale rispettare le linee guida: vi consigliamo

caldamente di leggere la “UI Design & Interaction

Guide” che trovate a parti-re dalla home page per gli sviluppatori http://develo-per.windowsphone.com/

windows-phone-7/.

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



che vi consigliamo di controllare dopo l’usci-ta della versione finale degli strumenti che, essendo prevista per il 16 settembre, dovreb-bero già essere disponibili quando leggerete questo articolo.Iniziamo a costruire una semplice applicazio-ne e poi proveremo ad utilizzare qualche API esposta dalla piattaforma.

GLI STRUMENTIDI SVILUPPOSe avete una versione di Visual Studio 2010 già presente sulla macchina, l’installazio-ne degli strumenti di sviluppo aggiunge una serie di template per la creazione di appli-cazioni Windows Phone 7 sia per il runti-me di Silverlight che per l’ambiente XNA. Se non avete una versione di Visual Studio 2010 installata, nessun problema, verrà installata contestualmente la versione gratuita, demo-ninata Express for Windows Phone 2010 che comprende tutto il necessario per sviluppare. Ovviamente la versione Express non ha gli stru-menti della versione Ultimate di Visual Studio, ma consente di sviluppare con le stesse feature della versione Express tradizionale applicazio-ni Silverlight e XNA per Windows Phone 7.L’installazione degli strumenti di sviluppo in entrambe le forme, attiva anche l’interazione con l’emulatore 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 l’Application 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 l’installazione di applicazioni in test.Negli esempi che seguono costruiremo una semplice applicazione Silverlight per Windows Phone 7 e poi vedremo all’opera 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 rota-zione è poi gestibile all’interno dell’applica-zione), una dll per Windows Phone, ovvero il classico assembly .NET dove inserire il codice riutilizzabile da più applicazioni, e due appli-cazioni basate su due nuovi controlli specifici della piattaforma: Panorama e Pivot.

PARTIRECON IL PIEDE GIUSTOI vari template creano un classico progetto Visual Studio 2010 contenente una serie di refe-rence verso le librerie che abbiamo inquadrato nella prima parte dell’articolo, una pagina principale denominata MainPage.xaml, il clas-sico file App.xaml e relativo code-behind per la definizione delle risorse e del codice dell’appli-cazione e, non ultime, tre immagini.La prima immagine, ApplicationIcon.png con-sente di definire l’icona dell’applicazione, Background.png è invece, a discapito del suo nome, l’icona per la defizione del Tile dell’ap-plicazione (ovvero l’icona più grande da uti-lizzare nella schermata principale se l’uten-te decide di inserire l’applicazione nel menu start), SplashScreen.png è invece la scherma-ta che viene utilizzata durante la partenza dell’applicazione stessa. Per darvi una idea, in Fig.2 ci sono due scre-enshot dell’emulatore: 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. L’utente può decidere di spostare una appli-cazione nella schermata principale, effettuan-do il tap sull’applicazione e scegliendo “pin to start” dal menu contestuale. ThinkAhead.IoProgrammo è invece l’esempio 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 l’applicazione stessa. La definizione dei nomi delle risorse, come le immagini appena descritte, del titolo dell’ap-plicazione, del tile da usare nella scherma-ta principale sono infatti ospitate nel file WMAppManifest.xml. Questo file contiene anche le “capabilities” dell’applicazione, ovvero le feature del telefo-no che l’applicazione 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-341e-

4485-9e60-87edee5fbdfb}”

Title=”ThinkAhead.IoProgrammo”

RuntimeType=”Silverlight” Version=”1.0.0.0”

NOTA

BLOG, FORUM E ESEMPILa community www.think-mobile.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 for-niscono informazioni con-tinue sulle novità per gli sviluppatori e nella sezione media si trovano numerosi esempi sull’utilizzo dei sensori e delle varie fun-zionalità del device.

Fig. 3: Visual Studio Designer: l’interfaccia delle applicazioni segue la metafora della navi-gazione Web, per cui si può sempre tornare alla schermata precedente con un tap sul pulsante back

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>

Nel codice precedente è possibile notare la definizione dell’applicazione ThinkAhead.IoProgrammo, il runtime di tipo Silverlight, la versione e il tipo di applicazione, alcune infor-mazioni su autore, descrizione e publisher. L’icona applicativa è definita immediatamente sotto la definizione dell’applicazione 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 all’interno del progetto e che andremo a descrivere fra un attimo. Chiude il file la definizione del Tile di default, ovvero il puntatore al titolo, all’immagine e ad un eventuale contatore di notifiche che il dispositivo utilizzerà quando l’utente decide di effettuare il “pin to start” dell’applicazione.

DEFINIRE L’ASPETTOIl nuovo progetto, appena aperto, presenta il designer Silverlight che, come per le applica-zioni web, divide il codice XAML dal designer visuale. Abbiamo solamente modificato il titolo dell’applicazione e il titolo della pagina prin-cipale (MainPage.xaml) nell’estratto 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.RowDefi nitions>

<RowDefi nition Height=”Auto”/>

<RowDefi nition Height=”*”/>

</Grid.RowDefi nitions>



<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)

</Grid>





</phone:PhoneApplicationPage>

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 all’in-terno di una PhoneApplicationPage. Questa classe si trova nell’assembly Microsoft.Phone e rappresenta il contenitore di controlli per que-sta maschera: ogni maschera viene rappresen-tata da una pagina, in quanto l’utente si muove da una pagina all’altra e ha la possibilità, come ormai ci ha abituato il web, di ripercorrere la sua navigazione all’indietro tramite il pul-

sante back, rappresentato in basso a sinistra anche nella finestra di design di Visual Studio 2010 mostrata in Fig. 3. La seconda infor-mazione importante che si evince dal codice della pagina principale è l’utilizzo del costrutto StaticResource per le varie impostazioni gra-fiche della pagina. Ogni elemento proposto dal template viene rappresentato secondo uno stile; lo stile ha lo scopo di centralizzare la

Fig. 6: Codice reale XAML del controllo Panorama

Fig. 7: Il controllo Panorama in una applicazione reale



definizione delle informazioni di layout e pre-sentazione in modo da renderne più semplice la modifica a posteriori. Nel caso del template base di Visual Studio, le risorse, contraria-mente alle prime beta di cui abbiamo parlato in articoli precedenti, vengono centralizzate all’interno delle librerie referenziate, ma è possibile modificarle all’interno, 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 codi-ce 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 informazio-ni sono posizionate all’interno 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 all’utente le azioni da fare sulla pagina corrente. La Application Bar rappresenta il menu contestuale della pagi-na dove proporre all’utente 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 sull’emulatore. Tralasciamo in questo primo articolo qua-lunque 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 prepara-no l’event handler nel code behind della pagi-na xaml dove aggiungeremo un nuovo elemen-to 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 l’intellisense, consente di creare tutto il necessario per agganciare l’evento 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. 8: Phone Callda codice

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



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);

}

}

}

COSA SUCCEDE DIETRO LE QUINTEIl 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 clas-se PhoneApplicationPage (la stessa indicata nel file MainPage.xaml che abbiamo analizza-to in precedenza), l’utilizzo di un costruttore che verrà autogenerato nel file mainpage.g.cs, oltre al codice del metodo addButton_Click che abbiamo inserito noi per gestire l’inserimento dell’elemento nella listbox.Provando a digitare la keyword override note-rete 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 navigazio-ne 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 sull’emulatore: Visual Studio si preoccupa di attivare l’emulatore, effettuare il deploy dell’applicazione e il debug dell’appli-cazione stessa (provare a metttere un break-point per verificarne il funzionamento). A destra, in verticale, sono rappresentate una serie di informazioni di debug rispetto alla user interface. L’applicazione 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 intro-dotto 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 l’utente ha scelto per il suo device.Tutti i campi in cui l’utente 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). L’idea è semplificare la digitazione dei dati visto che l’utente usa spesso il device in condizioni di movimento o mentre può essere distratto delle condizioni dell’ambiente in cui si trova. La Fig. 6 mostra l’emulatore durante la scrittura del testo in un campo textbox. L’emulatore consente di eseguire altre opera-zioni come la rotazione dello schermo, l’avvio di Internet Explorer, lo zoom e, come vedremo nei prossimi articoli, molte funzionalità nasco-ste dai menu della interfaccia utente.Questo semplice esempio ha messo in eviden-za l’interfaccia proposta per una applicazione fatta di varie pagine in cui l’utente 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 all’interno 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 all’utente un panorama: si pensi al panorama nel più classico dei significati, dove presentare vari scorci, ognuno delle quali presenta informa-zioni all’utente e fa parte del panorama stesso. L’utente può interagire con i vari scorci effet-tuando lo scrolling direttamente dall’interfac-cia.

LA BELLEZZA DEL PANORAMAVisto che l’applicazione è localizzata in più lingue, abbiamo utilizzato il binding verso le nostre risorse localizzate (con un classico con-verter Silverlight) per le intestazioni e i vari TextBlock inseriti nel primo PanoramaItem.Il controllo Panorama consente di impostare un titolo per l’applicazione visto che il con-trollo occupa l’intera superficie dello scher-mo, consente di intercettare tramite l’even-



Roberto e Luca sono consulenti che operano

nel mondo .NET sin dalla presentazione dell’ambiente nel luglio 2000. Luca è spe-

cializzato nella de� nizione della user interface, mentre Roberto si dedica all’archi-

tettura e prestazioni della soluzione. La loro azienda, we.ThinkAhead.it, società

del gruppo DevLeap, è spe-cializzata nella realizzazione

di soluzioni cloud-based su Windows Azure, appli-cazioni 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 tec-

nologiche coperte.

GLI AUTORI

to SelectionChanged lo scrolling dell’utente, e ha una immagine di sfondo denominata PanoramaBackground.png. Nel nostro caso l’immagine è alta 800 pixel, come lo schermo del telefono, e larga 1850 pixel in modo da formare il panorama in cui l’utente 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 affian-cate la pagina 4 (ovvero l’ultima) alla pagina 0 (ovvero la prima).Come si può notare, la pagina a sinistra pre-senta il suo contenuto, ha il titolo dell’applica-zione allineato in alto, e, lascia intendere che esiste un secondo scorcio del panorama alla sua destra. Quando l’utente trascina la pagina verso sini-stra, cosa possibile anche con l’emulatore 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 “set-tings” dalla vista dell’utente. A sua volta la pagi-na “summary” e lascia intendere la presenza a destra di uno scorcio successivo. L’utente può anche tornare indietro ripercorrendo il pano-rama 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 consen-tono 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();

}

Non è possibile attivare la chiamata diretta-mente da una applicazione, almeno in questa prima release. Il PhoneCallTask consente di attivare la maschera nativa che l’utente utiliz-zerebbe per effettuare una chiamata precompi-lata con le due informazioni che appaiono nor-malmente. Un secondo Task, che come si nota dal codice seguente, ha il suffisso Chooser con-sente invece di attivare la scelta di un contatto dalla maschera nativa del device, far scegliere all’utente (da qui il nome Chooser) un contatto e ottenere il numero di telefono.

private void numberChooser_Click(object sender,

RoutedEventArgs e)

{

PhoneNumberChooserTask task = new

PhoneNumberChooserTask();

task.Show();

}

Altre Task consentono di memorizzare informazioni sul telefono, come ad esempio un numero di telefo-no, attraverso gli oggetti relativi. Nel codice seguente il salvataggio di un numero di telefono da una applicazione e in Fig. 10 lo screen-shot 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 sull’utilizzo 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 eviden-ziare da una parte le caratteristiche più importanti del nuovo Windows Phone 7 e dall’altra 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

Fig. 10: Save Phone Num-ber Task

WEB 2.0 Introduzione a jQuery


In principio il Web era statico, costituito da documenti HTML sempre uguali, che l’utente poteva consultare attraverso il proprio browser. Poi, gradualmente, il

Web si è trasformato da una collezione di documenti ad un canale per l’erogazione 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 all’utente dei docu-menti 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 l’utente con documenti Web dotati di pulsanti, animazioni, layer interattivi e così via.Al giorno d’oggi, 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 all’utente la migliore esperienza possibile nel settore delle web-app. Per rea-lizzare un’applicazione 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 dell’interfaccia uten-te, in particolar modo, bisogna sapere costruire un layout HTML da fare poi interagire con l’utente 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 medesi-me 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 dell’ambiente. 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à d’uso, in modo da ren-dere più semplice e divertente la creazione di interfacce utente Web interattive.

INTRODUZIONEA JQUERYPrima di immergerci nello studio sistematico del fra-mework, cerchiamo di capire innanzitutto in cosa con-siste 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 programmato-re americano, con l’intento 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, analiz-ziamo un esempio concreto di codice jQuery:

$(“div.invisibile”).addClass(“popup”).show(“slow”);

Questa semplice istruzione, di cui presto comprendere-mo ogni parte, svolge i seguenti compiti:

• Individua, nel documento corrente, tutti i tag <div> con classe CSS invisibile.

• Aggiunge ai <div> individuati la classe CSS popup.• Fa apparire i <div> individuati con un e� etto di anima-

zione eseguito lentamente.

Grazie a jQuery, insomma, con una sola riga di codice è possibile svolgere operazioni complesse che, altrimenti, avrebbero richiesto un lungo codice JavaScript.

DOWNLOADED INSTALLAZIONEIl primo passo necessario per l’utilizzo di jQuery nelle proprie applicazioni Web è il download e l’installazione della libreria all’interno delle pagine HTML che compon-gono la propria web-app. Il sito di riferimento u� ciale di jQuery è disponibile all’indirizzo: http://jquery.com/Potete scegliere fra due versioni: la “production” e la

REQUISITI

Conoscenze richiesteHTML, CSS, JavaScript

SoftwareWeb Browser ed un editor HTML, CSS e Java

Impegno


❑ CD ❑ WEBJQ1.rar


IL WEB DINAMICO È FACILISSIMO!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

WEB 2.0Introduzione a jQuery


NOTA

WRITE LESS, DO MOREIl motto di jQuery è “write less, do more”, cioè “scrivi meno, fai di più”. Sicuramente azzeccato!

“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 codi-ce di jQuery, o anche per eseguire del debug all’interno della libreria stessa, nel caso in cui vi trovaste in di� coltà con qualche script. La versione “production”, invece, ha il medesimo contenuto dell’altra, ma il sorgente è estrema-mente compresso e ridotto, tanto da risultare illeggibile.

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ù con-sigliato. Alla � ne otterrete un � le con un nome del tipo:

jquery-1.4.2.min.js

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 nell’intestazione del documento:

<script type=”text/javascript” src=”jquery-1.4.2.min.

js”></script>

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>


js”></script>

</head>

<body>

<h1 id=”saluta”>Ciao, jQuery!</h1>

<script type=”text/javascript”>

...

CONCETTI FONDAMENTALIIncludendo 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”)

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”))

L’uso delle funzioni del tipo document.getElementB-yId() 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à, illu-strate mediante esempi:

• $(“div”)Seleziona tutti gli elementi <div> della pagina corren-te. 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”>.

• $(“div.miaClasse”)Seleziona gli elementi di tipo <div> con classe CSS miaClasse, vale a dire solo quelli di tipo <div class=”miaClasse”>.

• $(“#mioId”)Seleziona l’elemento avente l’id speci� cato, ad esem-pio <div id=”mioId”>.

Si possono selezionare gli elementi anche discriminan-doli in base ai loro attributi. Ecco alcuni altri esempi:

• $(“[align]”)Seleziona gli elementi che hanno un attributo align, indipendentemente dal tipo dell’elemento e dal valore dell’attributo.

Fig.1: Alcune fasi della comparsa automatica di un pop-up, fatto apparire con una sola istruzione jQuery



• $(“[align=center]”)Seleziona gli elementi con un attributo align pari esatta-mente a center, ad esempio <div align=”center”>.

• $(“[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]”)

Questa istruzione è in grado di selezionare tutti gli ele-menti <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

prova”>…</div>

Non è � nita qui: l’operatore “maggiore di” può essere impiegato per identi� care le gerarchie degli elementi. Ad esempio:

$(“div[align=center] > a[href*=index.html]”)

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 nell’identi� care gli ele-menti 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 sele-zionati mediante jQuery? La libreria restituisce gli oggetti identi� cati “incartandoli” in speciali conteni-tori che li dotano di un sacco di funzionalità pronte all’uso. Queste funzionalità servono per i più dispa-rati 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 disposi-zione da jQuery. Prendiamo ad esempio in conside-razione 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 all’interno dell’elemento. Quindi si può fare:

var element = $(“#mioElemento”);

element.text(“Nuovo testo dell’elemento”);

Una cosa che si è soliti fare con jQuery è concatenare le chiamate al seguente modo:

$(“#mioElemento”).text(“Nuovo testo dell’elemento”);

Tutte le principali funzioni di jQuery permettono la con-catenazione. Per questo è possibile scrivere sequenze di chiamate come:

$(“#mioElemento”).text(“nuovo testo”).

addClass(“classeCss”).show(“slow”);

Per facilitare la comprensione del framework, separere-mo 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 tutt’altro che facile. Le di� erenze tra i browser sono infatti determinanti. Operazioni che all’apparen-za dovrebbero essere semplicissime, come conoscere l’altezza 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.

CONTROLLODELLE DIMENSIONILe dimensioni di un elemento possono essere controllare attraverso le seguenti funzioni:

• width() e height()Restituiscono, rispettivamente, la larghezza e l’altezza dell’elemento sul quale vengono invocati. La dimensione restituita non comprende eventuali padding, bordi e margini applicati all’elemento.

• innerWidth() e innerHeight()Restituiscono, rispettivamente, la larghezza e l’altezza interni ai bordi dell’elemento sul quale vengono invocati. La misura include quindi l’eventuale padding applicato all’elemento, ma non i bordi stessi ed i margini esterni ai bordi.

• outerWidth() e outerHeight()Restituiscono, rispettivamente, la larghezza e l’altezza esterna ai bordi dell’elemento sul quale vengono invo-cati. La misura include i padding ed i bordi applicati all’elemento, ma non i margini. Se si passa un argomento booleano alle funzioni, con valore true, viene incluso nel calcolo anche l’eventuale margine applicato all’ele-mento.

Le funzioni width() ed height(), oltre che per il recupero delle dimensioni, possono essere usate anche per impo-stare ed alterare la larghezza di un elemento. Come argo-mento è possibile fornire un intero, che esprime la nuova dimensione in pixel:

$(“#mioElemento”).width(200);

NOTA

I NUMERIDI 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

WEB 2.0Introduzione a jQuery


Usando una stringa, invece, si possono selezionare di� e-renti unità di misura, proprio come avviene nei CSS:

$(“#mioElemento”).width(“150pt”);

DEFINIAMO IL POSIZIONAMENTOPassiamo 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

discostamento da sinistra e dall’alto dell’elemento preso in esame:

var offset = $(“#mioElemento”).offset();

alert(“Da destra: “ + offset.left + “px”);

alert(“Dall’alto: “ + 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 });

La funzione position() è del tutto simile a o� set(), con la di� erenza che in caso di elementi annidati l’uno dentro l’altro, position() restituisce e controlla il posizionamen-to rispetto al contenitore e non rispetto al documento. Provate con questo esempio:

<!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>offset() e position()</title>


js”></script>

<style>

#elemento1 {

position: absolute;

left: 20px; top: 30px;

}

#elemento2 {

position: absolute;

left: 50px; top: 70px;

}

...

CONTROLLODEL CONTENUTOIl recupero e la manipolazione del contenuto di un ele-mento 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>

Provate ora a richiamare:

var text = $(“#mioElemento”).text();

alert(text);

Il risultato sarà:

Questo è un testo che usa alcuni tag.

NOTA

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 l’istruzione jQuery.noCon� ict() non appena si carica jQuery, e poi caricare le altre librerie che occorrono. L’alias $(), però, a questo punto non sarà più disponibile. Al suo posto dovrete usare il nome esteso della funzione, cioè jQuery().

Fig.2: width() e height() restituiscono le dimensioni di un elemento al netto di padding, bordi e margini

Fig.3: innerWidth() e innerHeight() restituiscono le di-mensioni di un elemento e del suo padding, escludendo bordi e margini

Fig.4: outerWidth() e outerHeight() restituiscono le dimensioni di un elemento, del suo padding e dei suoi bordi. Opzionalmente è possibile includere anche i margini

WEB 2.0 Primi passi con Ruby On Rails


Il 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 forte-mente orientato agli oggetti. L’interprete è 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 spa-smodicamente sviluppatori Ruby in gamba) ben si presta ad essere imparato anche come primo linguaggio. La sua facilità di apprendimento per-mette anche a chi è totalmente digiuno di program-mazione 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 libre-rie 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 fi lesystem, gemme dedicate a Google Maps o all’invio di email massivo. Una bella comodità per gli sviluppatori, non costretti a dover reimplementare da zero fun-zionalità già create da altri programmatori.Nel corso dell’articolo cominceremo a conoscere il linguaggio, ad usare gli strumenti di sviluppo più utili e diff usi e creeremo un’applicazione di tipo “To-Do list” usando Rails

COs’e’ Rails?Rails, che useremo per sviluppare la nostra applica-zione, è un framework opensource per applicazioni web scritto in Ruby fortemente aderente al paradig-ma MVC (Model-View-Controller). Obiettivi prin-cipali di Rails sono la semplicità di utilizzo e la riduzione del codice scritto per creare applicazioni.

stRUMentidi sVilUPPORuby è disponibile per tutti i sistemi operativi, in pacchetti di facile installazione, già comprensivi di tutto il necessario allo sviluppo delle nostre applica-zioni. Potete scegliere i pacchetti uffi ciali (da scari-care dal sito www.ruby-lang.org/it/) o distribuzio-ni complete dello stack (come quella scaricabile da http://bitnami.org/) o ancora un IDE come Aptana RadRails (basato su Eclipse, lo trovate all’indirizzo http://www.aptana.com/) che racchiude al suo interno lo stack Ruby.

Qualunque sistema voi scegliate (Linux, Windows o MacOs poco importa) vi ritroverete installate alme-no tre cose: l’interprete Ruby vero e proprio, irb (l’interprete da riga di comando) e RDoc, la docu-mentazione di Ruby creata in maniera automatica per l’appunto da Rdoc: potete trovare la documen-tazione online all’url http://ruby-doc.org/.

CiaO MOndO RUBY!Cominciamo a programmare in Ruby dal più classico dei programmi. Installato Ruby creiamo con il nostro editor preferito un fi le di testo con estensione .rb. Il nostro HelloWorld sarà composto da una sola riga:

puts “Hello World”

REQUISITI

Conoscenze richiesteHTML, CSS, JavaScript

SoftwareWeb Browser ed un editor HTML, CSS e Java

Impegno


❑ Cd ❑ WeBruby.zip


RUBY FOR DUMMIES:INIZIAMO BENE!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

Fig.1: Aptana, IDE che integra Ruby

WEB 2.0Primi passi con Ruby On Rails


NOTA

MVCModel-View-Controller è un pattern architetturale molto diffuso nello sviluppo object-oriented. Il pattern è adottato da diversi fra-mework PHP (Symfony, Zend Framework), Python (Django), e da Java (Swing e Struts)

Salvate e lanciate l’interprete dal prompt dei comandi: ruby nome_file.rb. Il file verrà eseguito e vedrete stampare a video il vostro primo programma Ruby.

Potete anche lanciare l’interprete interattivo da solo, eseguendo un comando alla volta e vedendo-ne il risultato direttamente a schermo. Ad esempio lo stesso programma HelloWorld lanciato dall’inter-prete mostrerà:

irb(main):001:0> puts “Hello World”

Hello World

=> nil

irb(main):002:0>

La riga => nil mostra il risultato dell’espressione 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 conte-nuto 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

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 cre-ate i file .rb contenente il codice del vostro programma e poi compilateli selezionando il tasto “play” dell’IDE selezionando “Run As...” e poi “Ruby Application”: vedremo il risultato dell’elaborazione nella finestra Console del nostro IDE.Se volete commentare il vostro codice potete uti-

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

Vediamo ora come controllare il flusso del nostro codice, utilizzando i più classici costrutti come if, while, ecc...

sintassi degli OPeRatORiLa sintassi degli operatori come if e altri costrutti è simile a quella di altri linguaggi di programmazio-ne, ma diamogli un’occhiata ravvicinata scorrendo un array dichiarato ad inizio programma.

#esempi di operatori, cicli e condizioni

# Dichiariamo un array che useremo come base per il

nostro esempio

oggetti = [“Casa”,”Albero”,”Palla”,”Sedia”,”Tavolo”,

”Moneta”]

# L’array è definito?

if oggetti.nil?

puts “L’array non e’ definito”

else

puts “L’array e’ popolato”

end

# Esempio elseif

if oggetti.length == 0

puts “L’array e’ vuoto”

elsif oggetti.length == 1

puts “L’array contiene una stringa”

else

puts “L’array contiene piu’ di una stringa”

end

# Scorriamo l’array con each

puts “\nArray mostrato usando each\n”

oggetti.each do |obj|

puts “L’oggetto #{obj}\n”

end

# Scorriamo l’array con while

puts “\nArray mostrato usando while\n”

i = 0

while i < oggetti.length

puts oggetti[i]

i += 1

end

Fig.2: L’interprete Ruby in esecuzione su Windows



Come potete vedere, la sintassi è simile a quella di altri linguaggi di programmazione. Scopo di que-sto articolo non è approfondire la sintassi di base del linguaggio (il web è ricco di guide e tutorial in merito), ma portare l’utente a realizzare in breve tempo applicazioni “reali” come faremo nel corso dell’articolo.

MetOdi e ClassiCome abbiamo detto ad inizio articolo, Ruby è un linguaggio fortemente orientato agli oggetti. Cominciamo ad utilizzare i metodi, vedremo in segui-to 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”)

I metodi in Ruby sono dichiarati tramite dichiara-zione def <nome_metodo> ... end e come potete

vedere dall’esempio precedente è possibile passare parametri da utilizzare poi all’interno 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 tra-sforma 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 salu-tare e/o inviare un sms personalizzato al bambino rappresentato dalla classe.

class Bambino

def initialize(nome = “bambino”)

@nome = nome

end

def saluta

puts “Ciao #{@nome}!”

end

def sms(testo)

puts “#{@nome} ha ricevuto l’sms \”#{testo}\””

end

end

luigi = Bambino.new(“Luigi”)

luigi.saluta

luigi.sms “questo e’ un sms per te”

L’output di questo piccolo programma è:

Ciao Luigi!

Luigi ha ricevuto l’sms: “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 l’oggetto è creato, con la sintassi Fate attenzione, l’attributo nome non sarà disponibile immediatamente all’esterno della classe: sarà necessario rendere esplicita la sua disponibilità. La classe viene quindi modificata come segue:

class Bambino

attr_accessor :nome

Fig.3: Il pattern MVC (fonte Wikipedia)

Fig.4: L’applicazione RadRails in azione

WEB 2.0Primi passi con Ruby On Rails


...

Da adesso in poi potremo accedere all’attribu-to nome della classe Bambino e sarà anche pos-sibile modificarlo al volo con l’istruzione luigi.nome=”Luigi 2”.

USIAMO LE GEMSCome dicevamo ad inizio articolo, le Ruby Gems sono librerie “preconfezionate” messe a disposizio-ne dagli utenti della community Ruby. Come pos-siamo 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 associa-tivo) contenente tutte le righe del risultato. Tramite il costrutto each_hash scorreremo quanto restituito dalla query e lo stamperemo a video. Come dice-vamo 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 implementa-re qualche funzionalità comune, provate prima a cercare un’eventuale gem: magari qualcuno ha già fatto il lavoro sporco per voi!

RUBY ON RAILSPer sfruttare pienamente le capacità di Ruby, è quasi d’obbligo ormai affiancare al linguaggio il framework Rails. Il framework Rails è strettamente MVC, quindi bisognerà adattarsi al modo di pensa-re di questo paradigma: il compito di questa strut-

turazione é quello di rendere indipendenti tra loro le parti del software adibite al controllo, all’accesso 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 dall’utente 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 l’app 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 recen-temente acquisito da Oracle. Creiamo un nuovo pro-getto Ruby cliccando File -> New... -> Rails Project. Inserito il nome del progetto e la tipologia di databa-se 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 all’in-dirizzo http://localhost:3000: il risultato è quello che vedete in Fig. 4. Potete notare la quantità di file creati all’interno del nostro progetto: sono proprio i control-ler, le viste e i model di cui abbiamo parlato prima. Associamo ora il database all’applicazione: selezio-nate 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à nient’altro 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.

Fig.5: La “database perspective” di Aptana



CReiaMO la tO-dO list in RailsRicapitoliamo: andremo a creare un nuovo proget-to 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 dell’applicazione 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

database: todo_test

pool: 5

username: root

password:

host: localhost

Quello che avete appena letto è un esempio di configurazione che potete trovare in /config/data-base.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, nell’ordine: il control-ler, 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à nient’altro 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

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)


end

def unfinish


new = {:finished => false}

@task.update_attributes(new)


end

def destroy


@task.destroy

redirect_to(tasks_url)

end

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 dell’applicazione. è fondamentalemente un file html che racchiude tag ruby tra <% %> e mostra i task della nostra lista, pescati direttamen-te dal database.

COnClUsiOniRuby è 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 entra-re nell’ottica del paradigma MVC. Nel prossimo articolo “espanderemo” la nostra to-do list per renderla collaborativa.

Francesco Napoletano

L’AUTORE

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

nell’ambiente web italiano.

WEB 2.0 Come gestire le Chrome Extension


In questo numero approfondiremo il discor-so sulle estensioni di Google Chrome, avviato il mese scorso con una panoramica

generale delle applicazioni. Ora analizzere-mo più dettagliatamente l’architettura delle extension, con un esempio ben più comples-so di quelli già visti: preleveremo dei dati da un’origine esterna, grazie ad una richiesta XMLHttpRequest, e li utilizzeremo per generare dei contenuti e inserirli nel DOM di una pagina web.

CuRRENTLY ON TWITTERTwitter ci offre, ancora una volta, una ricca fonte di dati per sperimentare le nostre appli-cazioni. Il servizio espone una API che permet-te 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 richie-sta alla “Search API”, che risponderà con un oggetto JSON contenente una serie di 15 tweet. Questi saranno filtrati in base a un testo sele-zionato dall’utente in una qualsiasi pagina web. In pratica l’utente seleziona una stringa di testo in una pagina, clicca sull’icona dell’esten-

sione, e gli viene offerto il risultato in una div che viene inserita automaticamente nel DOM del documento corrente.

L’ARChITETTuRACome sappiamo, un’estensione può comporsi di uno o più file: di questi, solo il manifest.json è obbligatorio. Tuttavia, essendo il manifest un semplice file testuale contenente le imposta-zioni generali, non può essere l’unico pezzo di un’applicazione complessa. Occorreranno, a seconda dei casi: un file contenente gli script che girano in background e che interagisco-no 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:

• manifest.json• background.html• contentscript.js• jquery-1.4.2.min.js• chrstyle.css• alcuni file immagine

DOVE SONO I METADATIIl file manifest.json è un semplice file di testo contenente un oggetto JSON le cui proprie-tà forniscono i metadati di ogni estensione. Vediamo di quali dati abbiamo bisogno nel nostro esempio:

{

“name”: “Search on Twitter”,

REQUISITI

Conoscenze richiesteBuona conoscenza di HTML e Javascript

SoftwareNessun requisito particolare

Impegno


❑ CD ❑ WEBSearch_on_Twitter.rar


CHROME: L’ESTENSIONE È 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

Fig. 1: L’estensione che descriviamo in questo numero trasmette a Twitter un testo selezionato dall’utente.I dati della risposta vengono visualizzati all’interno di una div che viene, infi ne, inserita nel DOM della pagina web

SECONDA PARTE

WEB 2.0Come gestire le Chrome Extension


NOTA

UN’APPLICAZIONE INTERATTIVAA prima vista l’applicazione di questo numero potrebbe apparire simile a quella presentata il mese scorso. A ben vedere, le differenze sono molteplici. Prima di tutto, cambia l’architettura dell’applicazione: i dati di twitter non vengono mandati in un popup, ma inseriti nel DOM del documento; inoltre, la pre-cedente applicazione non offriva interattività all’uten-te, limitandosi a prelevare gli ultimi tweet pubblici: al contrario, l’estensione pre-sentata in questo numero restituisce dati filtrati in base ad una specifica richiesta dell’utente.

“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”

}

Il campo permissions imposta i permessi. Il valore tabs permette all’estensione di intera-gire con le schede e le finestre del browser: nel nostro esempio, sarà necessario per incorpora-re i file .css e .js necessari. La stringa successiva consente agli script di operare sulle URL che corrispondono allo schema http://*/* (in pra-tica 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 l’icona associata all’estensione indipendentemente dalla pagina web corrente (l’icona appare nella toolbar di ogni tab del browser). Nell’array 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

della pagina di background, i cui script, abbia-mo detto, sono in grado di agire sulla UI del browser.

GLI SCRIPTLe pagine di background sono degli script di lunga durata che girano fintanto che l’esten-sione è attiva. Questi script hanno lo scopo fondamentale di coordinare i task attraverso i componenti dell’estensione (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, all’aumentare della complessità delle applicazioni, i file di background diven-tano 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 manipolazio-ne, 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, aggiunge-re un nodo, come vedremo in queste pagine, o eliminarlo, oppure ancora modificarne l’aspet-to. Va sottolineato che, sebbene i content script condividano l’accesso 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 interferi-re 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 pagi-ne web, secondo un sistema definito “isolated worlds”.

SCRIPT INJECTIONGli script di background girano costantemen-te 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 è di-sponibile una playlist di ottime video-guide dedicate alle Chrome Extensions. Si veda http://goo.gl/lnpp



NOTA

CHROME DEVELOPER TOOLS

Per chi avesse perso l’articolo 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 l’analisi 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 l’analisi e il debug

delle estensioni, invece, si dovrà procedere

diversamente, a seconda dei file di cui si compone

l’applicazione. Se l’estensione dispone di un

popup, allora vi si accederà cliccando con il tasto

destro del mouse sull’icona della browser action; se l’estensione dispone di

un file background.html, allora bisognerà accedervi

attraverso l’elenco della scheda “Estensioni”

(chrome://extensions/). La documentazione ufficiale si

trova nel sito del progetto “Chromium”, all’indirizzo

www.chromium.org/devtools, mentre un ottimo

tutorial per sviluppatori si trova su http://goo.gl/nfWf.

plicemente registrati nel manifest, nel campo content_scripts. Quando invece agli script si accede in maniera programmatica, come al verificarsi dell’evento clic sull’icona della browser action, nel mani-fest.json andranno impostati solo alcuni per-messi:

“permissions”: [

“tabs”, “http://*/*”

],

Per la “programmatic injection” sarà necessa-rio 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: “jquery-

1.4.2.min.js”});

});

L’evento chrome.browserAction.onClicked si verifica quando l’utente clicca sull’icona della browser action. Al clic vengono inseriti il foglio di stile (chrome.tabs.insertCSS), il con-tentscript 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 nell’esempio, è una fun-zione di callback da invocare appena lo script

è 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.

MESSAGE PASSINGSebbene abbiano completo accesso alle pagine web caricate, per motivi di sicurezza i content script non hanno accesso diretto agli altri script dell’estensione, né alla UI del browser. Per accedere alla Chrome.* API diventa necessario, quindi, prevedere delle modalità di comunica-zione tra il content script e gli altri componenti dell’applicazione. Nella nostra estensione, ad esempio, il content script inserirà nel DOM della pagina corrente una div con i dati prove-nienti 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 richie-ste, come nel nostro esempio, oppure rimanere stabilmente attiva. Nel content script, quindi, avremo:

chrome.extension.sendRequest({‘action’ :

‘searchTwitter’, ‘selection’ : window.getSelection().

toString()}, onText);

Il metodo chrome.extension.sendRequest invia una singola richiesta ad un listener dell’appli-cazione. Il metodo accetta tre argomenti: l’ID di una estensione con cui si desidera even-tualmente 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 secon-do trasmette un testo selezionato dall’utente 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’) {

searchTwitter(callback, request.selection);

}

};

Fig. 3: Il GoogleDevelopers Channel offre un ottimo video-tutorial in cui vengono illustrate le modalità di comunicazio-ne tra gli script delle extension. Il video è disponibile all’in-dirizzo http://www.youtube.com/watch?v=B4M_a7xejYI

WEB 2.0Come gestire le Chrome Extension


JSON FEEDS IN RETENello sviluppo di questa extension, ci siamo ser-viti della Search API di Twitter, per la quantità di dati disponibili e per la facilità di accesso al ser-vizio. 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 comuni-cazione tra gli elementi di una extension, qualunque data source va bene per sviluppare applicazioni e mash-up inediti.

Il metodo onRequest viene attivato quando uno script dell’estensione trasmette una richiesta. Il metodo accetta tre argomenti: la richiesta, un oggetto contenente informazioni sullo script che ha inviato la richiesta, infine la solita fun-zione di callback (ricordiamo che la funzione di callback onText è definita nel content script e trasmessa con la richiesta). Se la proprietà action della richiesta corrispon-de alla stringa searchTwitter, viene invocata la corrispondente funzione, con due parame-tri: la nostra callback e il testo selezionato dall’utente 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();

};

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.

LA RISPOSTA DI TWITTERPrima di mandare a video i dati, è opportu-no dare un’occhiata alle possibili risposte di Twitter. Le informazioni necessarie per acce-dere alla Search API di Twitter sono disponibili all’indirizzo http://dev.twitter.com/doc/get/search. Qui ci basterà dire che possiamo avere tre risposte. Nel caso migliore, l’utente ha selezionato correttamente il testo nella pagina e l’API di

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”

}

L’ultimo campo (query: “roma”) riporta il testo che l’utente ha selezionato nella pagina web e che costituisce la chiave di ricerca. Nel caso in cui, invece, l’utente non abbia selezionato nessun testo, la richiesta trasmessa a Twitter riceverà la seguente risposta:

{

error: “You must enter a query.”

}

Infine, nel caso l’utente abbia selezionato un testo, ma la Search API non abbia trovato risul-tati, la risposta sarà:

{

results: [ ],

…,

query: “abcdefg”

}

In quest’ultimo caso, il campo results esisterà, ma non riporterà dati utili. Ed ora vediamo come mandare a video l’output.

NOTA

NOTA

LA SEARCH API DI TWITTER La Search API di Twitter è un servizio che permette di recuperare i più recenti Tweet pubblicati dagli utenti dell’applicazione. 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

Fig. 4: La figura mette a confronto la pagina di un trending topic di Twitter con i risultati visualizzati dalla nostra extension



ACCEDIAMO AL DOMTornando per un attimo al file background.html, si noterà che tra gli script “iniettati” nell’extension con il metodo chrome.tabs.executeScript, vi è anche la versione 1.4.2 di jQuery. Fino ad ora non ne abbiamo avuto

bisogno: adesso, però, è il momento di sfrut-tarne le potenzialità soprattutto per semplifi-care il codice. Chiudiamo il background.html e torniamo al contentscript.js. Qui definiamo la funzione di callback che si occupa della mani-polazione 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>’)

.appendTo(‘#tweets’)

.fadeIn(1000);

});

}else{

$(‘#chrContainer h3’).prepend(data.error);

}

};

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”. L’istruzione successiva inserisce all’interno 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 abbia-mo fatto ricorso a jQuery, sebbene il metodo .remove() sarebbe stato molto più efficiente del ricorso all’API del DOM. Ciò in quanto lo script che rimuove la div è inserito nel DOM della pagina e non nel content script dell’estensio-ne (ricordiamo che la libreria jQuery è stata incorporata nell’estensione, non nel DOM del documento, e che i relativi script vivono in “mondi isolati”). Il successivo blocco condizio-nale verifica l’esistenza di dati utili. Se Twitter restituisce l’oggetto results, viene generato un elenco di tweet; altrimenti è mandato a video un messaggio di errore. L’applicazione è pron-ta. Non resta che aprire la scheda “Estensioni” (chrome://extensions/) e selezionare, in moda-lità sviluppatore, “Carica estensione non pac-chettizzata”.

quALChE SuGGERIMENTOIn questo articolo abbiamo mostrato come prelevare dati da origini esterne e inserirli all’interno di una qualsiasi pagina web. Lo scopo principale, tuttavia, non era tanto quello di visualizzare dei dati prelevati da un’origine esterna, quanto piuttosto quello di compren-dere come gli script di una extension dialo-ghino 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 dall’altro (“isolated worlds”). E comunque, le features delle Chrome exten-sions 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

Fig. 5: La scheda “Estensioni” permette di analizzare e con-figurare le applicazioni installate nel browser. Vi si accede, tra l’altro, digitando chrome://extensions/ nella barra degli indirizzi

NOTA

RIFERIMENTISe avete perso l’articolo

precedente, prima di aprire il vostro editor, consiglia-

mo di dare un’occhiata alla guida introduttiva alle Chrome Extensions, all’in-dirizzo http://goo.gl/XCCX.

Tra le risorse online, abbiamo apprezzato moltissimo le video-

guide introduttive del canale GoogleDevelopers

di YouTube. La play-list “Google Chrome

Extensions” è un punto di riferimento imperdibile:

http://goo.gl/lnpp. È dispo-nibile anche un gruppo di discussione (http://goo.gl/

FGJO). Da non perdere il “Chromium blog” all’indi-

rizzo http://blog.chromium.org/

MOBILE Le API di bada ed il test su device reali


Nello scorso articolo abbiamo visto come usare tutti gli strumenti messi a disposizione da Bada per aggiungere ai nostri progetti valide feature

come l’invio 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 l’operatore 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 arric-chire 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 un’immagine del piatto � nito e presen-tato, o addirittura un video che spieghi passo-passo come realizzare quell’ottimo manicaretto! Vedremo anche come visualizzare un’immagine, ricercare volti umani e come sfruttare la splendida fotocamere da 5 milioni di pixel presente sul Samsung Wave s8500!

PARTIAMODALLE IMMAGINIAttraverso 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 un’immagine, 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 scri-

vere): BMP, JPEG, PNG

FACE DETECTORIl 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

dei rettangoli. Non allarmatevi, non scriveremo com-plessi programmi di image processing ma, grazie alle API presenti in tutti i telefoni “Powered by BADA”, potremo semplicemente richiamare i servizi di cui abbiamo biso-gno 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 possi-bile, 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 acce-dere 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 l’accesso o meno e con quali privilegi.

COSA REALIZZEREMOScopo del nostro programma sarà quello di ricevere una qualsiasi foto, questa sarà prima di tutto visualiz-zata 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.

PARTIAMO CON IL NUOVO PROGETTOCreate 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. L’immagine, 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-

REQUISITI

Conoscenze richiesteLinguaggio C/C++, preferibilmente dime-stichezza con l’am-biente Eclipse

SoftwareWindows XP, Vista, o Windows 7 Privilegi di ammini-stratoreScheda con suppor-to ad OpenGL® 1.5 correttamente confi -gurato

Impegno


IL TELEFONO RICONOSCE I VOLTI!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 ❑ WEBMediaSample.zip


MOBILELe API di bada ed il test su device reali


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 l’aspetto, i colori e il title (nel nostro caso devAPP.it & ioProgram-mo). 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.

PrePariamoil file form1.hOra 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);

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;

E per finire, sempre nella sezione public, ma stavolta in quella che raccoglie i metodi virtuali, inseriamo la seguente dichiarazione:

virtual result OnDraw(void);

Il primo metodo, FaceDetect, come è facile immaginare, si occupa di rintracciare i volti umani all’interno della foto. I volti possono essere un numero imprecisato, quin-di il risultato verrà messo in una lista pFaceDetectList.L’oggetto bmp sarà l’immagine che andremo a visualiz-zare sul dispositivo, mentre bmprect altro non è che un rettangolo con le coordine x, y, width e height dell’imma-gine. 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 scher-mata tramite il comando RequestRedraw(true);

Passiamo al file form1.cPPPrima di tutto occupiamoci degli import, accertiamo-ci che siano presenti o nel caso aggiungere i seguenti include:

#include <FBase.h>

#include <FUix.h>

#include <FGraphics.h>

#include <FIo.h>

#include <FMedia.h>

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;

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 spieghe-remo meglio il motivo:

#define TRASLAMENTO_VERTICALE 50

Ora dobbiamo occuparci di scrivere il codice vero e pro-prio, spostiamoci all’interno del metodo OnInitializing e subito dopo la definizioni e binding del pulsante IDC_BUTTON_OK, e subito prima dell’istruzione return inse-riamo il seguente codice:

Image decoder; //Dichiariamo un oggetto di nome

decoder e tipo Image

decoder.Construct(); // forziamo il richiamo del suo

costruttore

//Decodifichiamo l’immagine dal file su disco, dentro

l’oggetto dichiarato

bmp_ = decoder.DecodeN(L”/Home/3212.jpg”, BITMAP_

PIXEL_FORMAT_ARGB8888);

//Se non ci sono problemi settiamo l’oggetto bmprect_

di tipo rectangle con le //dimensioni dell’oggetto

caricato.

//Abbiamo settato la y dell’immagine 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;

}

In questo modo avremo l’oggetto bmp caricato con l’immagine letta da disco, e l’oggetto bmprect_ che è un oggetto Osp::Graphics::Rectangle con le dimensioni dell’immagine e le coordinate di dove vogliamo visua-lizzarla (x = 0, y = 50). Abbiamo spostato le coordinate di 50 punti in basso (la coordinata 0,0 identifica l’angolo

Fig. 1: La semplice interfaccia della nostra app

Fig. 2: il programma dopo la pressione del tasto



superiore sinistro del dispositivo), altrimenti l’immagine 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 dob-biamo forzare il refresh della form tramite l’istruzione:

RequestRedraw(true);

“RinfRescaRe”lo scheRmoIl 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 l’istruzione RequestRedraw(true). Quello che faremo in questo metodo sarà recuperare l’oggetto CANVAS dove andremo a dipingere i nostri oggetti, e poi presentare l’immagine a video ed eventual-mente 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)

............

L’istruzione:


recupera il canvas della form su cui scriveremo. Se è stato recuperato correttamente il canvas, e se l’oggetto bmp_ è stato decodificato con successo, allora lo disegneremo alla posizione e con le dimensioni specificate nell’oggetto 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.

il metodo facedetectIl metodo che segue, verrà richiamato alla pres-sione 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 dell’array con i volti trovati, dalla visualizzazione dell’immagine sul display del telefono, ma nulla ci vieta di centraliz-zare il tutto con un unico oggetto. Il programma legge nuovamente dal file system l’immagine con le due attrici e la decodifica in memoria nell’og-getto pImg.Fatto questo rilascia l’oggetto image e, se è riuscito a decodificare in maniera corretta l’immagine, allora prosegue con il detect.La parte che ci interessa maggiormente è quella che istanzia l’oggetto di tipo FaceDetector. È sufficiente dichiarare l’oggetto, e richiamare il suo costruttore:

FaceDetector faceDetect;

r = faceDetect.Construct();

Successivamente, tramite l’istruzione che segue, il siste-ma estrarrà tutti gli oggetti rectangle e valorizzerà la lista pFaceDetecList.

pFaceDetectList = faceDetect.DetectFacesFromStill

ImageN(*pImg);

Abbiamo quasi terminato, dobbiamo solo gestire i vari errori e liberare le risorse, inoltre appena prima di termi-nare 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_

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)

Fig. 3: L ‘output del programma con le coordinate dei volti rintracciati



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;

}

Tracciamoi reTTangoliTorniamo 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 valoriz-zato 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,

pRect->height );

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 dettaglia-te 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.

la funzione DrawelemenTUn ultimo sforzo, dobbiamo scoprire come traccia-re i rettangoli!

result Form1::DrawElement(const

Osp::Graphics::Rectangle& rect)

{

result r = E_SUCCESS;


canvas->SetLineWidth(5);

canvas->SetForegroundColor(Color::COLOR_

GREEN);

Dimension d;

d.width = 8;

d.height = 8;

if (canvas->DrawRoundRectangle(rect, d) != E_

SUCCESS)

return r;

return r;

NOTA

tutorial onlinePotete avere maggiori informazioni circa l’utilizzo della fotocamere e altri media nel documento pdf “badaTutorial.Media.pdf” all’interno della sezione Developer di www.bada.com

Fig.4: Nuovi dispositivi Samsung correttamente installati

Fig. 5: Schema dei vari frames / panel



}

La funzione recupera il Canvas su cui scrivere (vedere la funzione di visualizzazione dell’immagine), 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 l’og-getto Dimension per la sbordatura!

considerazione finali sul ProgettoIn Eclipse, nella sezione OUTPUT, noterete tutti i mes-saggi che abbiamo scritto tramite la funzione AppLog.Avremmo anche potuto scrivere tutto il codice riguar-dante la scrittura dei rettangoli direttamente nel meto-do FaceDetect, e togliere così il codice dalla funzione OnDraw, avremmo però dovuto avere l’accortezza di richiamare il metodo canvas->Show(); all’interno di DrawElement per ogni rettangolo o fare un altro meto-do refresh. In definitiva, è meglio avere il codice di ‘scrit-tura’ 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 un’immagi-ne sul dispositivo:

1. Dichiarare l’oggetto di tipo immagine Image *image = new Image();

2. Forzare il richiamo al suo costruttore :image::Construct()

3. Decodificare l’immagine e verificare il codice di ritorno :Image::DecodeN()

4. Creare un rettangolo (area) dove visualizzare l’im-magine : Graphics::Rectangle()

5. Prendere l’istanza 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()

rintracciamo i volti in realtime tramite la fotocameraAll’interno del percorso <BADA_SDK_HOME>\Examples\MediaContent\Media\src\CameraExample.cpp trovere-te un file sorgente per poter accedere facilmente alla Fotocamera / Videocamera montata sul vostro disposi-tivo. Trovate il metodo CameraExampleListener::OnCameraCaptured, come potete vedere è piuttosto semplice.

result rt = E_SUCCESS;

ClearLastResult();

if ( pCamera->GetCaptureFormat() == PIXEL_FORMAT_

JPEG )

{

File file;

rt = file.Construct(String(L”/Home/Sample.jpg”),

L”w”, true);

if (IsFailed(rt))

{

SetLastResult(rt);

return;

}

rt = file.Write(capturedData );

if (IsFailed(rt))

{

SetLastResult(rt);

return;

}

}

// Restart preview

rt = pCamera->StartPreview(&bufferInfo,true);

SetLastResult(rt);

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 dell’applicazione come /Home/Sample.jpg. Quindi è chiaro che se implementassimo tale sor-gente nel nostro applicativo, non dovremmo far altro che scrivere questo codice PRIMA del richiamo del metodo di FaceDetect, una volta avuta la con-ferma che abbiamo scritto correttamente il foto-gramma sul filesystem dell’applicazione dovremmo semplicemente cambiare il valore della variabile path dal vecchio:

String path(L”/Home/3212.jpg”);

al nuovo:

String path(L”/Home/Sample.jpg “);

E il programma eseguirà lo scanning direttamente sull’immagine 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 dell’applicazione tra-

mite il metodo AddControl() 3. Settate l’orientation, se portrate o landscape: For

m::SetOrientation(ORIENTATION_LANDSCAPE)4. Create un overlay panel usando Ui::Controls::

OverlayPanel.

NOTA

un riferimento sicuro

Tenete sempre a portata di mano l’API reference di

bada al link: http://tinyurl.com/badaref

Fig.6: I certificati corretta-mente installati sul device



5. Aggiungete l’overlay panel al form tramite il meto-do AddControl()

6. Settate il form corrente tramite Ui::Controls::Frame::SetCurrentForm.

7. Disegnate e mostrate il frame per visualizzare il preview della fotocamera: Ui::Control::Draw(), Ui::Control::Show()

8. Raccogliete in background le informazio-ni sull’immagine visualizzata dall’overlay panel: GetBackgroundBufferInfo() (Il buf-fer information object è un oggetto di tipo Graphics::BufferInfoobject.)

9. Visualizzate le informazioni sul preview: StartPreview() e Media::Camera::StartPreview(bufferInfo)

All’interno della cartella <BADA_SDK_HOME>\Examples\MediaContent\Media\src\ troverete tan-tissimi esempi su come caricare un video, controlla-re la fotocamere o registrare un video, ma purtroppo nulla sul face detection!

installiamo il device samsung wave s8500Installare 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 dell’SDK almeno 1.0.0b3, per la verifi-ca 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 l’installazione, 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, decomprime-telo 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 installazio-ne, potrebbe venirvi richiesto di riavviare il PC. Alla fine dell’installazione controllate nel pannello di controllo di Windows che siano installati due nuovi modem (Pannello di controllo->Gestione dispositi-vi):–“Samsung Mobile Modem in V2” in Modem.–“Samsung Mobile Modem Diagnostic Serial Port V2 (WDM)” in Port.

installiamo i certificatiSamsung 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 l’icona 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 vole-te installarlo, date conferma. Una volta fatto, dovrebbe apparirvi una schermata come quella della Fig. 6.

testiamo l’aPPlicazionesul telefonoNegli articoli precedenti, se ricordate, quando compila-vamo 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 debug-gare 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ù atten-ti 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 l’esecuzione 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 l’applicazione verrà copiata sul telefono, e le verrà assegnata l’icona che avremo scel-to. Se vogliamo fermare l’esecuzione 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

L’AUTORE

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 linguag-gi di programmazione, da Java a C/C++, da PHP ad Adobe Flex ed Object C. Da alcuni mesi sta rila-sciando applicazioni per iPhone, iPod Touch ed iPad. Per i dettagli si rimanda al sito www.svi-luppoiphoneitalia.com.Per consigli, o dubbi sull’articolo, potete contat-tarlo al seguente indirizzo email: [email protected]

NOTA

incontra altri sviluppatoriAl link http://developer.bada.com/forum/ trovate tutti i forum BADA suddivisi per sezioni: Notice, bada C/C++, IDE& SDK, Developer Site, bada General

MOBILE Sencha Touch, il nuovo framework JS per iPhone


Sencha Touch è un framework Javascript creato da Sencha (l’azienda che ha creato Ext.js) per svi-luppare 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 l’uso 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 pubbli-care 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 alternati-ve più semplici come jQTouch (www.jqtouch.com). Esploreremo le alternative in un paragrafo dedicato più avanti nel corso dell’articolo.

SETUP DELL’AMBIENTE DI SVILUPPOScegliete l’editor 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 spa-ventate: 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 com-patibile caricate nel browser del vostro device uno degli esempi presenti nella cartella examples per cominciare ad esplorare il framework.

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 preoccu-patevi, includendo la libreria di produzione tutto tor-nerà alla normalità. Fate attenzione anche all’ordine 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>



<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 l’header HTML5 (senza doctype) e che nell’ordine 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 appli-cazione.

REQUISITI

Conoscenze richiesteBasi di program-mazione HTML e JavaScript

SoftwarePiattaforma Sencha

Impegno


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

❑ CD ❑ WEBsencha.zip

MOBILESencha Touch, il nuovo framework JS per iPhone


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>’,


},

{

title: ‘Tab 3’,

html: ‘<p>La terza tab contiene

un\’immagine</p><img src=”images/senchalogo.png”

/>’,


}]

});

}

});

Eccola qua. Abbiamo creato un tabpanel con tre tab che possiamo popolare con l’HTML 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 dell’utente.Esaminiamo un po’ più da vicino il codice dell’esempio: 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 “anni-darsi” di elementi che andranno poi a creare il nostro layout. Ad ogni elemento possono essere associati eventi, chiamate AJAX e tutto l’insieme rappresenta la nostra applicazione. Vediamo un altro esempio che ci chiarirà meglio il funzionamento di questo “annidamento”.

Ext.setup({


new Ext.TabPanel({

fullscreen: true,

...

All’interno del nostro tabpanel, le tab sono ora posiziona-te in basso e contengono dei bottoni, una toolbar è inseri-ta all’interno del tabpanel e sui bottoni possiamo inserire delle azioni (l’alert dello screenshot) oppure, come fatto per il pulsante della tab in basso, un’iconcina di noti� ca contenente un piccolo testo o anche solo un numero.Esaminiamo anche questo pezzo di codice per poi pas-sare a qualcosa di più interessante: come potete vedere l’annidamento qui è più presente come dicevamo poco sopra. La barra dockedItems contiene i diversi bottoni. Al pulsante home è associato un handler che lancia un alert() all’utente.Il codice delle tab è praticamente uguale all’esempio precedente, ma la di� erenza sta tutta in questo pezzetto di codice:

tabBar: {

dock: ‘bottom’,

layout: {

pack: ‘center’

}

},

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 distri-carsi nel mare di opzioni presenti per ciascun com-ponente. Partire dagli esempi inclusi nel download e studiarne il codice è un ottimo punto di partenza per chi vuole sviluppare con Sencha.

TWITTER IN PALMO DI MANOOk, 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 appli-cazione Sencha

Fig.1: Uno dei tanti esempi presenti nel pacchetto di download di Sencha

MOBILE Sencha Touch, il nuovo framework JS per iPhone


L’esempio è di poche righe, ma d’e� 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 dall’utitility JSONP. Come potete vedere da questo piccolo pezzo di risultato tornato da twitter:

{

“profi le_image_url”: “http://a0.twimg.com/pro

fi 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>”

}

Il tweet è composto da diverse variabili, alcune di queste sono mappate nel nostro script come potete facilmente vedere: sono l’avatar, il tweet stesso e l’autore del tweet.Vediamo ora altre peculiarità di Sencha Touch che esa-mineremo con piccoli esempi.

GEOCODING E MAPPEGrazie a Sencha Touch e alle API HTML5 possiamo recuperare la nostra posizione e mostrarla sulla mappa. Sencha mette a disposizione un componente dedicato all’uso delle mappe, ma dobbiamo comunque includere il � le Javascript delle API fornito da Google con il para-metro ?sensor=true. In questo modo comunichiamo a Google che stiamo richiamando le sue API da un disposi-tivo dotato di sensore GPS o AGPS.

Ext.setup({


var toolbar = new Ext.Toolbar({

dock: ‘top’,

xtype: ‘toolbar’,

title: ‘Esempio Google Maps’

});

...

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 docu-mentazione è all’indirizzo http://code.google.com/intl/it/apis/maps/index.html.

I FORMAspetto 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: ‘fi eldset’,

title: ‘Informazioni’,

instructions: ‘Compila il modulo’,

defaults: {

required: true,

labelAlign: ‘left’

},

items: [{

xtype: ‘textfi eld’,

name : ‘name’,

label: ‘Nome’,

autoCapitalize : false

}, {

...

È una panoramica di quello che possiamo realizzare: i component rispecchiano i classici componenti HTML più quelli che potete vedere sull’iPhone.

LISTE ANNIDATECome ultimo componente daremo un’occhiata 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 pre-cedenti.

Ext.setup({


var nestedList = new Ext.NestedList({

fullscreen: true,

items: [{

text: ‘Opzione A’,

items: [{

text: ‘Opzione A.1’,

customAttribute: 123,

Fig.4: Il tabpanel arricchito da più elementi

Fig.5: Il nostro piccolo client twitter

NOTA

IPHONE, IPAD E ANDROID

Sencha Touch è compatibi-le con iPhone, iPod Touch, iPad e dispositivi Android. Con qualche adattamento

funziona anche su browser desktop basati su webkit:

Chrome, Safari, ecc…

MOBILESencha Touch, il nuovo framework JS per iPhone


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’,


},{

text: ‘Opzione B.2’,


}]

},{

text: ‘Opzione C’,

items: [{

text: ‘Opzione C.1’,


},{

text: ‘Opzione C.2’,

customAttribute: 77

...

Ovviamente il componente è adatto per la navigazione orizzontale e quella verticale. Guardate lo screenshot per un esempio di implementazione: come al solito si pro-cede per annidamento dei componenti uno all’interno dell’altro.

CREARE APPLICAZIONI PER IPADSencha Touch è pensato anche per sviluppare applica-zioni iPad. Oltre ai classici componenti esistono speci� ci componenti per iPad, gli overlay: box di testo che appa-iono 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 sull’utility 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.

ALTERNATIVE A SENCHA TOUCHPer concludere il discorso diamo un’occhiata alla concor-renza. 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:

PhoneGap è un framework opensource per applica-zioni HTML5 e CSS3. Il framework supporta molte funzionalità degli smartphone moderni: geolocation, vibrazione, fotocamera, bussola, ecc… ed è compa-tibile con iPhone, Android, Blackberry, Symbian e Palm. www.phonegap.com

Titanium permette di sviluppare applicazioni nati-ve per desktop e mobile (un po’ come Adobe AIR, anch’esso in arrivo su dispositivi Android) e ha diversi componenti già pronti per la realizzazione di inter-facce.www.appcelerator.com

iWebkit è un framework dedicato ad iPhone e iPod Touch: leggero e semplice da usare permette di cre-are webapp per dispositivi Apple in maniera facile e veloce.http://iwebkit.net/

Di jQTouch (un plugin per jQuery dedicato a dispo-sitivi mobili) abbiamo già parlato in un altro numero di ioProgrammo. La sintassi per utilizzarlo è semplice come quella di un qualsiasi plugin jQuery: è assoluta-mente da provare... www.jqtouch.com

jQuery non è stata a guardare: è in arrivo per � ne anno jQueryMobile. Potete tenere d’occhio lo stato dello sviluppo all’indirizzo: www.jquerymobile.com.

CONCLUSIONISencha Touch è un framework molto potente. Nonostante sia ancora in beta e non supporti com-pletamente tutte le feature disponibili sui più moderni smartphone, è un buon compromesso che permette agli sviluppatori di fornire un’esperienza “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 saran-no 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 dispo-sizione funzionalità sempre più avanzate, per gli utenti sarà indi� erente usare una webapp piuttosto che una che un’applicazione, magari a pagamento.La vivacità e l’innumerevole numero di framework mobi-li disponibili gratuitamente è sicuro indice di un settore in espansione: il segreto per riuscire nel mondo delle appli-cazioni mobili sta nel cogliere l’occasione giusta e sfrutta-re le proprie conoscenze per essere sempre al passo con i tempi e perché no, le mode del momento.

Francesco Napoletano

L’AUTORE

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 nell’ambiente web italiano.

Fig.6: Google Maps sul nostro iPhone con Sencha Touch

Fig.7: Liste annidate con Sencha Touch

MOBILE Push notification vs local notification


Questo mese a� ronteremo un argomento piut-tosto particolare riguardante la programma-zione 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 un’ap-plicazione possa informare l’utente che ci sono dei messaggi (noti� che) per lui, mentre l’applicazione non è in esecuzione in primo piano. Apple garantisce inoltre che l’utente 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/inotifi cAvrete 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 dell’sdk 3.0, le secondo con l’avvento del 4.0, che ha introdotto per la prima volta il multitasking anche per le applica-zioni non scritte da Apple.Non dobbiamo però commettere l’errore 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 un’ap-

plicazione e scritte direttamente sullo stesso dispositivo ospite.

• Le ‘Push noti� cations’, anche conosciute come ‘remote noti� cations’, sono inviate da un’applica-zione (tramite un server remoto) all’Apple Push Noti� cation Service, il quale garantirá di inviare la noti� ca tramite servizio WEB al device sul quale l’applicazione è installata.

Volendo sintetizzare, possiamo dire che le ‘local noti-� cation’ danno la possibilitá di scrivere nel calendario e nella sveglia dell’iPhone, mentre le push sono un sistema complesso, per inviare messaggi esterni al dispositivo, informazioni di cui in quel momento, l’ap-plicazione installata non è a conoscenza.

È chiaro quindi, che se sto scrivendo un’applicazione stile scadenzario, in cui l’utente mette delle date e dei messaggi per ricordarsi di qualcosa, le local noti� ca-tion sono la scelta consigliata, ma se devo avere un programma che deve esser “svegliato” da eventi ester-ni, quali appunto il fatto che qualcuno abbia scritto sulla mia bacheca Facebook o sapere che l’indomani si prepara uno sciopero, allora le push noti� cation sono le uniche che possano risolvere il mio caso.

L’APPLICAZIONE ‘TEMPERATURE’Per presentare le noti� che di tipo Push (remote noti-� cation) abbiamo deciso di scrivere un programma in XCode che, una volta lanciato, chieda all’utente 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 tem-perature rilevate della località scelta al dispositivo dell’utente, senza che questi debba mai piú lanciare l’applicativo. Il sito da cui attingeremo le informazioni sulle temperature (a solo scopo didattico) è il seguen-te: www.meteoindiretta.it come potete vedere, in fondo alla pagina ci sono i rilevamenti delle principali città italiane.

PARSER PHP LATO SERVERAbbiamo scritto un programma in PHP di una cin-quantina di righe di codice per fare il parsing della pagina ed estrapolare le località con relative tempe-rature minime e massime. Questo � le lo chiameremo temperature.php. Per ora il parser scrive semplice-mente a video i valori, poi lo modi� cheremo per spe-dire i messaggi push.

<?php

REQUISITI

Conoscenze richiesteObject C, dimesti-chezza con l’ambiente XCode, basi di PHP, MySQL

SoftwareMac OS 10.6.x o superiore, AMP ( apa-che, mysql, php) lato server.Snow Leopard, xcode 3.0 (per le push noti-fi cation) e/o xcode 4.0 per le local noti-fi cation

Impegno


NOTIFICATION:CHE TEMPO FA?UN’OCCASIONE PER SCOPRIRE LE POTENZIALITÀ DI PUSH NOTIFICATION E LOCAL NOTIFICATION, ATTRAVERSO LA REALIZZAZIONE DI UN’APPLICAZIONE CHE CI TIENE AGGIORNATI SULLE TEMPERATURE DI UNA SPECIFICA LOCALITÀ

❑ CD ❑ WEBTemperature.zip


MOBILEPush notification vs local notification


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)

{

...

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 iPho-

ne) 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 infor-mazioni 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’,

...

MESSAGGI:

CREATE TABLE àpns_messages` (


`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,

`modifi ed` timestamp NOT NULL default ‘0000-00-00

00:00:00’ on update CURRENT_TIMESTAMP,

...

PREFERENZE della località scelta associata al device: CREATE TABLE àpns_notifi che ` (


à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 notifi che’;

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 perso-nalizzare le classi. Per la registrazione del dispositivo e l’invio 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 chiamere-mo 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 È DELL’UTENTEL’utente ha completo controllo sul tipo di noti-� che che può ricevere, basterà andare sul menu IMPOSTAZIONI del devi-ce, e scegliere il menu NOTIFICHE.



Fatto questo, dovremo ora modi� care la classe preesi-stente 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’;”);

$sql = “INSERT INTO `apns_notifi che` (pid,

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.

GESTIONEDEI CERTIFICATIQuesta è senza dubbio la parte più macchinosa! Innanzitutto va precisato che per fare i test di noti� che push dobbiamo necessariamente aver aderito al pro-gramma “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 applica-zioni 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), l’altro per l’ambiente di produzione.

L’AMBIENTE ITUNESCONNECTPer lavorare con i certi� cati push dovremo necessa-riamente 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 sceglia-mo 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 l’applicazione, clicchiamo su ‘con� gure’ (ultimo pul-sante 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 è l’ap-plicazione Accesso Portachiavi). Generato il certi� cato

come da istruzioni, dovrete salvarlo e cliccare sul tasto continue, ci verrà chiesto di fare l’upload 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 catego-ria 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 espan-detelo cliccando sulla freccia grigia alla sua sinistra. Noterete una chiave, cliccateci col tasto destro del mouse ed esportatela salvandola col nome tempera-ture-dev-key.p12.

NOTA

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

NOTA

IN CASO DI PROBLEMI..

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

Fig.1: Lista delle applicazioni con l’abilitazione delle Push Notification

Fig.2: Istruzioni di Apple sull’abilitazione delle Push Notification



Aprite il terminale e posizionatevi nella cartella dove avete esportato i � le sopra citati. Date i seguenti comandi, uno dopo l’altro (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

cat temperature-dev.pem temperature-dev-key-noenc.

pem > dev.pem

Di tutto questo passaggio, il � le che ci interessa è quel-lo creato con l’ultimo passaggio, dev.pem, che sarà il certi� cato per l’ambiente 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).

PERSONALIZZIAMOLE CLASSITorniamo alla classe class_APNS.php e con� guria-mola con i path corretti del nostro � le system e con i nostri certi� cati:

private $sandboxCertifi cate = ‘/usr/local/psa/home/

vhosts/sviluppoiphoneitalia.com/httpdocs/push/classes/

dev.pem’;

private $certifi cate = ‘/usr/local/psa/home/

vhosts/sviluppoiphoneitalia.com/httpdocs/

push/classes/prod.pem’;

private $logPath = ‘apns.log’;

Modi� chiamo i dati di accesso al nostro DB mysql, in class_DbConnect.php:

(linea 109) $this->DB_HOST: nome dell’host 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:

#!/usr/bin/php

<?PHP

if(!function_exists(“__autoload”)){

function __autoload($class_name){

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

ARGUMENTS

$apns = new APNS($db, $args);

?>

CREIAMO LA NOSTRA APP CON XCODECreiamo una nuova applicazione, o al solito modi-� chiamone una esistente. Gli unici due framework che dovremo avere l’accortezza di importare sono AudioToolbox.framework, e SystemCon� guration.framework, ricordiamoci di mettere l’import #include <AudioToolbox/AudioToolbox.h>, all’in-terno del nostro � le TemperatureAppDelegate.h.Possiamo ora a modi� care il delegate principale del

nostro applicativo. Nel caso il nostro progetto si chiami Temperature, cerchiamo il � le “TemperatureDelegate.m” ed apria-molo.

Cerchiamo il metodo:

(void)applicationDidFinishLaunching:(UIApplication *)

application

NOTA

RIFERIMENTIUFFICIALI La pagina di riferimento dell’iOS reference delle push noti� cation service di Apple lo trovate al seguente indirizzo email: http://tinyurl.com/iosrfrnce

Fig.3: La gestione delle notifiche da parte dell’utente



e modi� chiamolo come segue:

[[UIApplication sharedApplication]

registerForRemoteNotifi cationTypes:(UIRemote

Notifi cationTypeAlert | UIRemoteNotifi cationTypeBadge |

UIRemoteNotifi cationTypeSound)];

// Clear application badge when app launches

application.applicationIconBadgeNumber = 0;

Le righe 2 e 3 servono per registrare il dispositivo sul nostro server (richiamerà il metodo didRegisterFor-RemoteNoti� cationsWithDeviceToken che scrivere-mo di seguito), mentre l’ultima riga pulisce i badge (ossia i numeri) che appaiono sull’icona visualizza-ta sulla dashboard del nostro dispositivo.

Le noti� che sono composte di tre parti:1. messaggio testuale2. badge (numeri sull’icona dell’applicazione)3. suoni (audio che viene mandato in play alla rice-

zione di una noti� ca)4. Aggiungiamo il codice che segue PRIMA della � ne della classe:

/* BEGIN APNS CODE */

- (void)application:(UIApplication *)application did

RegisterForRemoteNotifi cationsWithDeviceToken:

(NSData *)devToken {

#if !TARGET_IPHONE_SIMULATOR

// Recupera le informazioni per la registrazione remota

NSString *appName = [[[NSBundle mainBundle] info

Dictionary] objectForKey:@”CFBundleDisplayName”];

NSString *appVersion = [[[NSBundle mainBundle]

infoDictionary] objectForKey:@”CFBundleVersion”];

// Verifi ca quali notifi che sono attive

NSUInteger rntypes = [[UIApplication shared

Application] enabledRemoteNotifi cationTypes];

// Imposta i valori di default

NSString *pushBadge = @”disabled”;

NSString *pushAlert = @”disabled”;

NSString *pushSound = @”disabled”;

...

Naturalmente dovremo apportare alcune modi-fiche.

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.

NSString *urlString = [@”/apns.php?”

stringByAppendingString:@”task=register”];

Avrete poi notato le istruzioni aggiunte:

NSUserDefaults *prefs = [NSUserDefaults

standardUserDefaults];

[prefs setObject: deviceToken

forKey:@”deviceTokenPulito”];

con le quali salviamo nelle preferenze dell’appli-cazione 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 inter-venire in questa sezione per abilitare o disabilitare, suoni, badge o messaggi. Abbiamo quasi terminato la con� gurazione dell’applicazione per iphone: ora dobbiamo togliere i riferimenti a RootViewController che non ci interessano, creare una nuova classe con-troller con XIB associato chiamato SceltaLocalita e modi� care il tutto come segue:Aggiungete l’array NSArray *arrayData; nel � le SceltaLocalita.h, conterrà l’elenco 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, asso-ciategli il metodo alla pressione, salvate e uscite.

NOTA

PROGRAMMARE IN UN LAMP

Su www.easyapns.com/ troverete da scaricare

codice e istruzioni sull’utilizzo di Easy

APNs, un tool LAMP per sempli� care l’uso delle

push noti� cation.

Fig.5: Sezione di scelta della località

Fig.4: La gestione delle notifiche da parte dell’utente



Ora inserite il seguente codice nel file SceltaLocalita.m:

#import “Reachability.h”

Dichiariamo una variabile di tipo int che conterrà l’in-dice della riga selezionata:

int rigaSelezionata = 0;

- (void)viewDidLoad {

...

Il metodo viewDidLoad inizializza l’array delle località e prepara il picker per la scelta. I successivi quattro metodi servono per con� gurare il picker e fargli visua-lizzare i dati dell’array.

- (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];

}

...

Molto più importante, invece, è il metodo pressSave-Button, che viene richiamato alla pressione del tasto della form, e che dovrà nell’ordine: recuperare la località scelta, recuperare dalle preferenze il device-Token, 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:

echo “ max = “.$gradiMax.”\n”;

signi� cava che avevamo la temperatura minima nella variabile $gradiMin e la località nella variabile $locali-ta. 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();

Fatto questo, alla � ne del parsing della pagina del meteo, inviamo i messaggi precedentemente accodati:

// SEND ALL MESSAGES NOW

$apns->processQueue();

Per non dover ogni giorno ricordarci di lanciare il server è suggerito l’utilizzo di un crontab o altri sche-dulatori; 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 l’articolo, per imple-mentare le push noti� cation nelle nostre applica-zioni dovremo avere bisogno di parecchi strumen-ti (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� ca-tion implementate nelle applicazioni iPhone.

Gino Sarnieri

L’AUTORE

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 lin-guaggi di programmazione, da Java a C/C++, da PHP ad Adobe Flex ed Object C. Da alcuni mesi sta rila-sciando applicazioni per iPhone, iPod Touch ed iPad.

Per i dettagli si rimanda al sito www.sviluppoiphonei-talia.com.

Per consigli, o dubbi sull’articolo, potete contat-tarlo al seguente indirizzo email: [email protected]

Fig.6: Il nostro programma che riceve le notifiche!

MOBILE Condividere i dati in Android


Nei 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à dell’applicazione 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 un’applicazione Android che si occupa di rendere disponibili dei dati alle altre applicazioni installate nel sistema. Ogni applicazione, pertanto, può de� nire una o più tipolo-gie di dati e rendere poi disponibili tali informazioni esponendo uno o più Content Provider. Nell’ordine inverso, invece, qualunque applicazione può richie-dere l’accesso ad un particolare tipo di dato: il sistema la metterà in contatto con il corrispondente Content Provider precedentemente installato nel sistema.

RICERCA DEI CONTENUTIOgni 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

Android dispone di diversi Content Provider built-in, come quello per le immagini o quello per accedere ai contatti in rubrica. L’URI per accedere ai contatti, ad esempio, è:

content://com.android.contacts/contacts

Siccome questi URI sono un po’ arbitrari, per con-venienza si è soliti fare in modo che qualche classe riporti l’indirizzo 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 è

quella che fa da ponte per l’accesso al provider dei contatti in rubrica. Al suo interno c’è la costante statica CONTENT_URI, di tipo android.net.Uri, che riporta l’URI che identi� ca univocamente il provider.Una volta che si conosce l’URI di una tipologia di contenuto, interagire con il provider che la eroga è più o meno come fare delle interrogazioni ad un data-base. Per prima cosa si deve recuperare un’istanza dell’oggetto android.content.ContentResolver. Stando all’interno 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 interroga-zioni attraverso il loro metodo:

public Cursor query(Uri uri, String[] projection, String

selection, String[] selectionArgs, String sortOrder)

I parametri da fornire sono i seguenti:

• uri è l’indirizzo che identi� 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 clau-sola WHERE al punto precedente.

• sortOrder è la clausola SQL di ordinamento. Se null, non si applica un ordinamento speci� co alla lista dei risultati restituiti.

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

REQUISITI

Conoscenze richiesteBasi di Java

SoftwareJava SDK (JDK) 5+, Android SDK, Eclipse 3.3+, ADT

Impegno


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

❑ CD ❑ WEBAndroidCP.rar


MOBILECondividere i dati in Android


solamente attenzione al fatto che il cursore restituito, in questo caso, potrebbe anche essere nullo: avviene quando l’URI fornito al metodo non corrisponde ad alcun provider registrato nel sistema.Per comporre query complesse, così come per pren-dere in esame i risultati restituiti, è necessario cono-scere il nome ed il tipo delle colonne che costituiscono lo specifico tipo di dato richiesto. Anche in questo caso si è soliti includere tali informazioni all’interno delle costanti statiche di una classe. Nel caso della rubrica di sistema, ad esempio, le colonne disponibili sono elencate all’interno 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();

Attenzione a gestire sempre correttamente il ciclo di vita del cursore, senza dimenticarsi di chiuderlo ad utilizzo completato. Se si lavora all’interno di una atti-vità, risulta conveniente sostituire il metodo query() di ContentResolver con l’analogo managedQuery() di Activity: in questo caso, infatti, la gestione del cursore viene svolta automaticamente dall’attività.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

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) {


TextView textView = new TextView(context);

textView.setText(displayName);

return textView;

}

@Override

public void bindView(View view, Context context,

Cursor cursor) {


TextView textView = (TextView) view;

textView.setText(displayName);

}

});

}

}

Si faccia attenzione al fatto che questa attività, per gira-re senza incappare in errori, necessita del permesso android.permission.READ_CONTACTS (per i dettagli, fate riferimento al box qui accanto).

NoN solo ricercheI Content Provider sono in grado di fornire anche funzionalità di inserimento, aggiornamento e cancel-lazione dei record. La classe ContentResolver, oltre al già esaminato metodo query(), mette a disposizione i

Fig.1: Questa attività si collega al Content Provider della rubrica, riuscendo così a mostrare tutti i contatti registrati nel telefono

NOTA

è permesso?Il modello di sicurezza di Android fa sì che le appli-cazioni non possano com-piere determinate azioni senza ottenere prima un permesso specifico. Ad esempio, una qualsiasi applicazione non può connettersi alla Rete all’in-saputa dell’utente, così come non può manipolare la lista dei contatti in rubrica. Le applicazioni che vogliono compiere questo genere di attività devono dichiararlo esplicitamente. L’utente, quando installa l’applicazione, 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 produt-tore dell’app.Dal punto di vista dello sviluppo, un permesso può essere richiesto aggiun-gendo nell’AndroidMani-fest.xml dell’applicazione un tag del tipo:<uses-permissionandroid:name=”permesso_richie-sto” />L’elenco dei permessi a disposizione è flessibile ed espandibile. La docu-mentazione 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 svi-luppando.

MOBILE Condividere i dati in Android


seguenti altri metodi:

•publicUriinsert(Uriuri,ContentValuesvalues)Inserisce un nuovo record del tipo specificato mediante il parametro uri. I valori per i campi del nuovo record devono essere specificati attra-verso la mappa values, di tipo android.content.ContentValues. Il metodo restituisce l’URI di detta-glio assegnato all’elemento appena inserito.

•public int update(Uri uri, ContentValuesvalues,Stringwhere,String[]selectionArgs)Aggiorna uno o più record del tipo specificato mediante il parametro uri. La selezione avviene attraverso l’uso combinato dei parametri where e selectionArgs. I nuovi valori da assegnare ai record selezionati devono essere specificati attra-verso la mappa values, di tipo android.content.ContentValues. Il metodo restituisce il numero dei record aggiornati.

•publicintdelete(Uriuri,Stringwhere,String[]selectionArgs)Cancella uno o più record del tipo specificato mediante il parametro uri. La selezione avviene attraverso l’uso 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. L’URI di base per l’accesso alle immagini che sono nello storage esterno viene riportato nella proprietà:

android.provider.MediaStore.Images.Media.EXTERNAL_

CONTENT_URI

Tutte le immagini recuperate mediante l’apposito provider dispongono di una colonna “_ID”, in cui viene riportato il loro identificativo numerico univoco. Come indicato nel box laterale, dato l’ID di un conte-nuto, è possibile avere un suo URI specifico facendo:

Uri uri = ContentUris.withAppendedId(uri_generico, id);

Dato l’URI puntuale di un contenuto-immagine, è possibile caricare l’immagine (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 un’attività in grado di svolgere i seguenti compiti:

1. Interrogare il Content Provider delle immagini su

storage esterno, per ottenerne l’elenco.2. Mostrare le immagini, facendo uso di un widget

android.widget.Gallery (cfr. ioProgrammo 151).3. Al clic su una delle immagini, eseguire la can-

cellazione della medesima, previa conferma da parte dell’utente.

Tradotto in codice:

package it.ioprogrammo.contentproviderdemo02;

...

public class ContentProviderDemo02Activity extends

Activity {

privatestaticfinalintDELETE_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;

...

creare uN coNteNt ProviderSe volete condividere i dati della vostra applicazio-ne con gli altri software installati nel telefono, pote-te implementare il vostro Content Provider. Farlo è molto semplice: bisogna estendere la classe android.content.ContentProvider, che richiede l’implementa-zione dei seguenti metodi:

•publicbooleanonCreate()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.

•publicStringgetType(Uriuri)Dato un URI di gestione del provider, questo meto-do deve restituire il tipo MIME del contenuto cor-rispondente. Solitamente, con tipi di dati perso-nalizzati, non bisogna far altro che inventare il nome della tipologia, seguendo però alcuni criteri. Se l’URI specificato corrisponde ad un contenuto specifico (in genere avviene quando l’URI contiene l’ID del contenuto), allora bisogna restituire un tipo MIME del tipo:

vnd.android.cursor.item/vnd.il_nome_del_tipo

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

NOTA

ricerca per iDTutti i contenuti esposti

mediante provider dovreb-bero avere una colonna

chiamata _ID, con l’iden-tificativo numerico del

record, univoco nella sua categoria. Se si conosce

l’ID di un record e lo si vuole estrarre diretta-

mente dal suo provider, si può fare ricorso alla

classe android.content.ContentUris e al suo meto-

do statico withAppende-dId(): Uri uri = ContentUris.

withAppendedId(uri_di_base_del_contenuto,

id_del_contenuto);Cursor c = cr.query(uri,

null, null, null, null);

MOBILECondividere i dati in Android


•public Cursor query(Uri uri, String[] projec-tion, String selection, String[] selectionArgs,StringsortOrder)Il metodo richiamato per eseguire una ricerca tra i dati gestiti dal provider.

•publicinsert(Uriuri,ContentValuesvalues)Il metodo richiamato per eseguire un inserimento nei dati gestiti dal provider.

•public int update(Uri uri, ContentValuesvalues,Stringselection,String[]selectionArgs)Il metodo richiamato per eseguire un aggiornamen-to dei dati gestiti dal provider.

•public int delete(Uri uri, String selection,String[]selectionArgs)Il metodo richiamato per eseguire una cancellazio-ne fra i dati gestiti dal provider.

Una volta che il Content Provider è stato implemen-tato, 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>

L’attributo name serve per specificare il nome della classe che implementa il provider; l’attributo

authorities, invece, definisce la parte fondamen-tale dell’URI gestito dal provider, cioè quello che dovranno utilizzare le altre applicazioni per inte-ragire con il nostro Content Provider. Ad esempio, facciamo il caso che autorities sia:

it.ioprogrammo.arretrati

In questo caso, il Content Provider riceverà tutte le richieste il cui URI sia del tipo:

content:// it.ioprogrammo.arretrati/bla/bla/bla

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 l’esterno le note gestite dall’applicazione:

package it.ioprogrammo.notepad;

...

public class NotePadContentProvider extends

ContentProvider {

...

Registriamo il provider nel file AndroidManifest.xml dell’applicazione:

<provider android:name=”NotePadContentProvider”

android:authorities=”it.ioprogrammo.notepad” />

Aggiornate ora l’applicazione sul vostro smartpho-ne o nell’emulatore. Da questo momento in poi l’elenco delle note è gestibile non solo attraverso l’attività incorporata dall’applicazione stessa, ma anche attraverso il Content Provider che risponde a partire dall’URI:

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

{

...

Carlo Pelliccia

L’AUTORE

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 all’indirizzo www.sauronsoftware.it

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 l’area di appartenenza di ciascun indirizzo ricevuto da un provider di contenuti.

Fig.2: Le note generate dall’applicazione del mese scorso vengono ora consultate attraverso una seconda applicazio-ne, passando per un Content Provider

SISTEMA Introduzione a Visual Studio LightSwitch


Come 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 l’obiettivo di spiegare cos’è, a cosa serve, come si installa e come si crea un’applicazione 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 è tutt’altro che completo e stabile. Questo significa che l’applicazione subirà molte modifiche e avrà molti ampliamenti delle sue funzionalità, da qui alla data di rilascio definitivo prevista per l’anno prossimo. In una fase intermedia dobbiamo aspettarci anche il rilascio di una “Beta 2”. Dunque, non possiamo ad oggi esplorare anco-ra le funzionalità che devono ancora essere implementate in quella che sarà la versione definitiva dell’ambiente. Inoltre, un’avverten-za 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 l’in-stallazione e i test.

COS’È VISUAL STUDIO LIGHTSWITCHVisual 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 appli-cazioni gestionali, seguendo una sequenza di azioni sempre uguali? Creare un database o connettersi a un data-base esistente, creare l’interfaccia utente con varie modalità (griglia, master-detail, scheda singola, modulo di ricerca con selezione dati), associare i controlli dell’interfaccia all’origine dati, eseguire le classiche operazioni CRUD (creazione, selezione, aggiornamento e can-cellazione), 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, nascon-dendo all’utente non-programmatore molti dettagli dell’architettura, 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 all’editor di codice per aggiungere il codice che rappresenta le regole di business che si vogliono introdurre nell’applicazione. Riassumendo: abbiamo tutti i vantaggi di un ambiente di sviluppo visuale, senza rinunciare alla massima personalizzazio-ne garantita dall’approccio via codice.

REQUISITI

Conoscenze richiesteNessuna

SoftwareSQL Server 2008 (per l’uso del database)

Impegno


❑ CD ❑ WEBLS_FirstApp.zip


PROGRAMMARE È ANCORA FACILE!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À

SISTEMAIntroduzione a Visual Studio LightSwitch


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 utiliz-zando 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, l’impos-sibilità di esporre dati e applicazioni diretta-mente 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 pro-fessionista, 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 crea-re rapidamente l’infrastruttura dell’applicazio-ne (schermate, connessione ai dati, controllo Ribbon, menu, ecc.) con le funzionalità più comuni già attive. Il lavoro che lo sviluppatore deve fare, poi, consiste nell’inserire il codice per la gestione delle regole di business e la per-sonalizzazione dell’interfaccia. LightSwitch, quindi, può essere di utile supporto per la cre-azione di prototipi di applicazioni o di appli-cazioni vere e proprie, quando il contesto è semplice e il tempo disponibile è limitato.

Terzo scenario: sviluppatori Visual Basic 6.0. LightSwitch può essere una grande oppor-tunità 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 dell’applicazione, cioè la gestione delle regole di business. Per tutti gli altri detta-gli, i wizard di LightSwitch fanno già un lavoro rimarchevole.

L’ARCHITETTURADI LIGHTSWITCHUn’applicazione gestionale (cioè un’applica-zione LOB = Line Of Business) è solitamente organizzata in tre livelli: il livello di presenta-zione, il livello relativo alla logica di business e il livello dati. Il livello di presentazione si occupa dell’interfaccia 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 garanti-re che l’utente 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 un’appli-cazione 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 un’applicazione 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 utiliz-zare, 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 l’applicazione seguendo i migliori criteri tecni-ci e di sicurezza attualmente utilizzati. L’utente non-programmatore, quindi, potrebbe anche ignorare quali sono le tecnologie adottate per la creazione dell’applicazione.Per quanto riguarda il livello di presentazione, LightSwitch utilizza Silverlight 4.0, i WCF RIA Services e l’Office Automation per l’integrazio-ne con Office 2010. L’utilizzo di Silverlight ci garantisce la piena compatibilità dell’applica-zione sia a livello di desktop, sia a livello del web. Il livello di logica di business si basa, inve-ce, su codice ASP.NET 4.0, di Entity Framework

NOTA

AVVERTENZE SULLA BETA 1 Visual Studio LightSwitch è stato rilasciato in ver-sione “Beta 1”, la prima versione preliminare pub-blica. Mentre aspettiamo le nuove funzionalità che ci verranno messe a disposi-zione, possiamo installare il prodotto per assaporare le novità. È consigliabi-le non installarlo in un ambiente di produzione: meglio in una macchina virtuale ad hoc.



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.

LA PROCEDURA DI INSTALLAZIONEPer installare Visual Studio LightSwitch Beta 1 dovete prima di tutto scaricare l’immagine del disco di installazione che, al momento della stesura di questo articolo, era denomi-nato en_visual_studio_lightswitch_beta_1_x86_dvd_566742.iso.

Bisognerà attendere qualche minuto anche con un collegamento in banda larga, dato che il file è piuttosto grande (circa mezzo giga).

Al termine del download potete creare il DVD di installazione attraverso un comune program-ma 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).All’avvio dell’installazione 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 d’uso del prodotto.Due note importanti da tenere ben presenti:

• questa versione scadrà il 15 Maggio 2011 (è un’informazione inserita nella licenza d’uso);

• nella licenza non è inclusa una licenza “Go Live”, cioè non si può utilizzare questo sof-tware per applicazioni commerciali ma sola-mente per dimostrazioni e test.

Tornando alla nostra finestra di dialogo, pre-mendo Decline otterremo l’interruzione dell’in-stallazione, mentre premendo il pulsante Accept potremo proseguire.Nella fase successiva, possiamo decidere se avviare l’installazione vera e propria o se desi-deriamo prima personalizzare l’installazione.Prima di proseguire con l’installazione voglia-mo capire in cosa consiste la personalizza-zione che ci è consentita dal prodotto e quin-di 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 quin-di la personalizzazione in realtà non c’è: infatti otteniamo solo l’informazione sulla cartella in cui verrà effettuata l’installazione e lo spazio richiesto dall’installazione stessa, senza poter cambiare nulla (Fig. 1).Confermiamo con la pressione del pulsante Install e finalmente avviamo l’installazione composta da vari passaggi. Il numero di passag-gi dipende da cosa è già installato sul PC e quin-di quali componenti dovranno essere installati. Durante le varie fasi, vengono installati almeno i seguenti elementi:

1. Microsoft SQL Server System CLR Types2. Microsoft Silverlight 4.03. Microsoft Silverlight 4 SDK4. Microsoft Visual Studio LightSwitch Beta

Server5. Microsoft Visual Studio LightSwitch Beta

EditionTerminata l’installazione (dura alcuni minu-Fig. 2: Il gruppo LightSwitch e i template per Visual Basic e C#

Fig. 1: L’installazione può essere personalizzata

NOTA

...SENZA REINVENTARE

LA RUOTA Molti gestionali sono basati su “schermate” che inter-

rogano una fonte dati e permettono di modi� carli

con le classiche operazioni CRUD (creazione, sele-zione, aggiornamento e

cancellazione). LightSwitch permette di sempli� care tutto il lavoro “sporco”,

lasciando all’utente le personalizzazioni e per-

mettendo anche di scrivere il codice per le regole di

business.



ti), apparirà una schermata che ci informa sul completamento della procedura. Nella schermata sono forniti un grande pulsante per avviare l’ambiente di sviluppo e un paio di col-legamenti, rispettivamente per aprire la pagi-na 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 quest’ul-timo ambiente di sviluppo. Pertanto, nell’elen-co di progetti che possono essere creati, trove-rete anche il nuovo gruppo LightSwitch, con i template rispettivamente per Visual Basic e per C# (Fig. 1). In caso contrario, verrà instal-lata solamente la shell di Visual Studio 2010, cioè un software di supporto all’ambiente di sviluppo di LightSwitch. In tal caso, nell’elen-co dei tipi di progetto troverete solamente il gruppo LightSwitch. Ora che abbiamo installa-to tutto l’occorrente, possiamo procedere alla creazione di una semplice applicazione con LightSwitch.

CREIAMO LA NOSTRA PRIMA APPLICAZIONEDalla finestra di dialogo della Fig. 2, selezio-niamo il template per Visual Basic, scegliamo un nome per la nostra applicazione (per esem-pio LS_FirstApp), la cartella in cui vogliamo memorizzare l’applicazione e confermiamo con OK. Terminata la preparazione della solu-zione, apparirà una prima finestra di selezione: secgliamo se creare una nuova tabella o se con-

netterco a un DB esterno già esistente (Fig. 3).Scegliamo di connetterci a un database clic-cando sulla voce Attach to external database. Apparirà una finestra di dialogo relativa a un wizard (cioè un’autocomposizione) per la definizione della connessione all’origine dati desiderata (Fig. 4).

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, notia-mo che è possibile creare una connessione a un database, a un sito SharePoint o anche a un WCF RIA Service. Per questo esempio, sceglia-mo 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

SCREENLightSwitch 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 l’esportazione del set di dati verso un foglio Excel.

Fig. 3: Scelta del tipo di origine dati

Fig. 4: La selezione dell’origine dati

Fig. 5: De� nizione delle proprietà della connessione al DB

NOTA

APPLICAZIONI PRONTE PER IL WEB Le applicazioni funzionano con un’architettura a due o tre livelli: se decidiamo per un’architettura a tre livelli, possiamo convertire l’applicazione in un’appli-cazione web con pochi clic di mouse.



contesti (Fig. 5).Nella figura abbiamo lasciato invariato il provi-der dati (Microsoft SQL Server), perché abbia-mo a disposizione proprio un database di que-sto tipo. LightSwitch è compatibile con SQL Server dalla versione 2005 in poi. In futuro (forse dalla “Beta 2”) sarà fornito il supporto per l’accesso anche a un database basato su SQL Azure.Dopo aver selezionato il nome del server (o comunque del PC su cui è installata l’istanza di SQL Server), del tipo di autenticazione e il nome del database che ci interessa (in questo caso l’esempio fornito da Microsoft e libe-ramente scaricabile da Internet, denominato Contact_Management), clicchiamo sul pulsan-te Test connessione. Avuta conferma della correttezza di tutte le

proprietà di connessione, confermiamo clic-cando 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 automati-camente (cioè C02_Contact_ManagementData, dovuto a una ridenominazione del database collegato all’istanza di SQL Server) al nuovo nome ContactManagementData e, finalmente, clicchiamo sul pulsante Finish. In Fig. 7 vedia-mo il risultato finale.Nella stessa figura è possibile anche notare l’esistenza 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-

ne, una schermata. Premendo tale pulsante, apparirà un altro wizard (Fig. 8) che ci permet-te di aggiungere cinque tipi di Screen: uno per l’inserimento di nuovi record, uno per la ricer-ca di dati, uno di tipo master-detail, uno con una griglia per la visualizzazione e modifica di dati in forma tabellare e uno con un’altro 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 selezio-nare la tabella da cui estrarre i dati da inserire nella griglia. Sul lato destro, nella casella a

NOTA

UNA PIATTAFORMA AVANZATA

Le tecnologie utilizzate sono tutte all’avanguardia:

ASP.NET 4.0, SQL Server e SQL Azure, SilverLight, Entity Framework e WCF RIA Services. Non manca nemmeno l’integrazione

con SharePoint.

Fig. 6: La selezione delle tabelle

Fig. 7: Il risultato del collegamento al database

Fig. 8: Il wizard per l’aggiunta di uno Screen



discesa, scegliamo Customer, poi confermiamo cliccando su OK.Per avere un’applicazione 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 per-mettervi 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 confer-miamo con OK.A questo punto possiamo eseguire il program-ma, premendo il tasto F5. Il risultato è quello che vi mostriamo in Fig. 9. L’avvio è in modalità “out of browser”, cioè il programma viene eseguito come un normale programma desktop, anziché essere eseguito all’interno del browser di Internet Explorer.Potete notare che sul lato sinistro c’è l’elenco degli Screen inseriti nell’applicazione. Nella parte alta è presente un controllo Ribbon, con alcuni pulsanti per salvare le modifiche e per aggiornare la visualizzazione. Infine, all’interno della finestra di visualizza-zione, 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 dell’intera 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 l’inserimento dei dati. L’applicazione 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 speci-fici... diciamo che comunque copre una buona varietà di casi. Vi facciamo notare anche il fatto che abbiamo creato un’intera applicazione (seppure molto semplice in questo esempio) senza scrivere nemmeno una riga di codice e solamente sele-zionando delle opzioni che via via sono state proposte da LightSwitch stesso.Comunque, l’applicazione, dopo la sua crea-zione attraverso i wizard che abbiamo appena visto, può essere completamente personalizza-

ta e modificata, sia nell’aspetto 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

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 l’inserimento di valori non corretti.

Fig. 9: Il programma in esecuzione

Fig. 10: L’inserimento di un nuovo record



PASSARE AL WEBAbbiamo già accennato al fatto che in LightSwitch possiamo passare da un’appli-cazione “out of browser” (un’applicazione desktop) a un’applicazione per browser, cioè per il web, semplicemente con un clic del mouse: proprio come azionare un’interruttore.

Siccome è difficile crederci se non lo si vede in pratica, vediamo in pratica come si procede.In Fig. 11 potete vedere la finestra delle pro-prietà del progetto e, più precisamente, la scheda Application Type inclusa nelle pro-prietà. In questa scheda potete osservare che

è possibile scegliere tre tipi di applicazione, ma più precisamente tre architetture diverse: un’applicazione desktop a due livelli, un’appli-cazione desktop a tre livelli e un’applicazione per browser a tre livelli. Le tre opzioni includono anche una sinte-si delle caratteristiche dell’architettura corri-spondente: per esempio, nelle applicazioni a tre livelli è necessario che sia installato e avvia-to un server Internet Information Services (IIS) per effettuare la connessione ai dati.Durante la progettazione dell’applicazione 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 l’ap-plicazione con il tasto F5: vedremo così aprirsi il browser e, dopo qualche istante, vedrete l’ap-plicazione apparire nella pagina web (Fig. 12).L’applicazione ha lo stesso aspetto e le stes-se funzionalità dell’applicazione per desktop. Notate anche il pulsante in alto a destra (Customize Screen): anche nel browser potete personalizzare l’interfaccia 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. 11: La scheda Application Type, nelle proprietà del progetto

Fig. 12: La nostra applicazione all’interno del browser Internet Explorer



UN OCCHIOALLA SICUREZZAAlcuni 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à dell’applicazione, infatti, troviamo anche una scheda denominata Access Control (Fig.14).Questa scheda permette di impostare il livello di sicurezza dell’applicazione, scegliendo tra le seguenti opzioni: nessuna autenticazione (predefinito), autenticazione Windows e auten-ticazione con un form. Inoltre è possibile defi-nire i ruoli (per esempio Utente, Superutente, Amministratore), gli utenti appartenenti a cia-scun ruolo e i permessi da assegnare a ciascuno di essi o a ciascun ruolo.

LE ALTRE PROPRIETÀ DELL’APPLICAZIONETra le proprietà dell’applicazione sono state inserite anche altre tre schede: General, Extensions e Screen Navigation. È possibile che in futuro possano essere inserite ulteriori sche-de. Per quanto riguarda la scheda General, dedi-cata alle proprietà generali dell’applicazione, possiamo definire un nome di applicazione, assegnare un’immagine per il logo e un’icona, indicare la “cultura” da utilizzare (per esempio per le impostazioni relative ai numeri, alle valu-te e alle date), il numero di versione distinto in major version e minor version (Fig. 13).

Non manca nemmeno un’impostazione per definire il tema dell’applicazione, inteso come insieme di elementi grafici che caratterizzano l’interfaccia. Per il momento esiste un solo tema, predefinito, ma non abbiamo dubbi che successivamente ci sarà una maggiore gamma di scelta. La scheda

Screen Navigation, invece, permette di definire i menu dell’applicazione, 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 un’unica estensione che viene utilizza-

ta in modo predefinito: Microsoft LightSwitch Extensions. Anche in questo caso è probabile che la gamma di scelta si potrà ampliare con altre estensioni utili.

LA NOSTRA LISTA DEI DESIDERIRicordandoci che è la prima Beta, non possia-mo 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 disposizio-ne successivamente, come il supporto a SQL

Fig. 14: Le proprietà per il controllo degli accessi

Fig. 13: Le proprietà generali dell’applicazione

Fig. 15: La scheda Screen Navigation

NOTA

RISORSE Nell’articolo 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 dell’autore, dedi-cato a LightSwitch (http://lightswitchitalia.wordpress.com).



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 è certa-mente alla portata degli utenti comuni, anche se “power”. Oltre alla stampa ci piacerebbe tro-vare nel prodotto anche alcune altre funziona-lità che ci vengono in mente un po’ alla rinfusa:

• importazione di dati da file di testo con record a lunghezza fissa, magari con un siste-ma 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 rag-gruppamenti

• integrazione con i Report Services di SQL Server

ALCUNE RISORSE UTILIIn quest’ultimo paragrafo vi vogliamo segnalare alcune risorse utili per approfondire la cono-scenza del prodotto e per ottenere informazioni sulle ultime novità.All’indirizzo http://msdn.com/lightswitch tro-vate 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 fre-quentare il forum che trovate all’indirizzo http://bit.ly/cA5bm2. Se volete provare un’applicazio-

ne completa, potete invece scaricare l’esempio gratuito che trovate all’indirizzo http://code.msdn.microsoft.com/lightswitch (Vision Clinic Application Walkthrough and Sample). La classica documentazione di MSDN on line si trova all’indirizzo http://bit.ly/9YeALH, mentre alcuni approfondimenti li potete trovare nel blog ufficiale del team di sviluppo di LightSwitch, all’indirizzo http://blogs.msdn.com/b/light-switch/.Se poi volete avere delle informazioni in italiano, potete visitare il portale della Community italia-na DotNetWork (www.dotnetwork.it), nonché il blog dell’autore 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 all’evoluzione del prodotto, quindi, siete invitati a visitare di tanto in tanto le pagine che vi abbiamo indicato.

CONCLUSIONIVisual Studio LightSwitch Beta 1, il nuovo pro-dotto Microsoft per sviluppatori e non-sviluppa-tori, è finalmente stato rilasciato tra l’entusiasmo di molti sviluppatori e alcune perplessità. Solo l’evoluzione del progetto e il tempo diranno se questo prodotto potrà avere successo tra il pub-blico, tecnico e non.Una cosa è certa: sta iniziando una nuova “era di rottura” sulla divisione tra applicazioni desktop e web, perché ormai è possibile trasformare un’applicazione desktop in un’applicazione 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 com-plete 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 l’adozione anche presso i professionisti che non possono accettare limitazioni imposte by design.

Mario De Ghetto

L’AUTORE

Mario De Ghetto è un appassionato di informati-

ca a 360 gradi, ma soprat-tutto di programmazione.

Si è laureato in ingegneria informatica all’Università 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 all’indirizzo

[email protected].

Fig. 20: La scheda Extensions all’interno del browser Chrome

SISTEMAVisual Basic 2010 ed Entity Framework 4


Se 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 ver-sioni precedenti alla “rivoluzione .NET”: acronimi come DAO, RDO, ADO, ADO.NET e LINQ sono molto cono-sciuti dai programmatori, perché quasi non c’è applica-zione 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à asso-luta: 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 l’introduzione di nuove caratteristiche che ci danno una grande fl essibilità nello sviluppo di appli-cazioni per la gestione di dati. Semmai, la parte diffi cile consiste nell’orientarsi 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 affi darsi a classi completamente perso-nalizzate? 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 dovre-mo apportare delle modifi che all’applicazione, dato che i wizard hanno la cattiva abitudine di fare a modo loro e di nascondere molti dettagli implementativi. L’utilizzo dei wizard è indicato quando l’applicazione è piuttosto semplice, quando avrà una certa stabilità nel tempo con modifi che molto limitate oppure quando ci è stato dato poco tempo per realizzare l’applicazione.In questo articolo vedremo come si crea facilmente un’ap-plicazione WPF (Windows Presentation Foundation) con Entity Framework, utilizzando un Entity Data Model (EDM) creato mediante wizard. L’applicazione fi nale sarà quella che vi mostriamo in Fig. 1.

La cassetta DegLi attrezziCome 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.

un Database“senza rete”Naturalmente, manca anche un altro elemento importante: un database da cui attingere i dati da mostrare in un DataGrid. Nell’esempio di questo articolo opereremo una scelta un po’ diversa da quel-le 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 suffi ciente, dato che la creazione del database avver-rà interamente all’interno dell’ambiente di sviluppo.Questo tipo di database viene memorizzato in un fi le locale con estensione .mdf ed è immediatamen-te utilizzabile senza che sia necessario installare una versione completa di SQL Server nel computer

REQUISITI

Conoscenze richiesteConoscenza di base di Visual Basic 2010

SoftwareVisual Studio 2010 o Visual Basic 2010 Express, SQL Server 2008 Express

Impegno


❑ cD ❑ WebEF4_mdf.zip


GESTIRE I DATI CON ENTITY FRAMEWORK 4LA 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

Fig. 1: L’applicazione completa in azione

SISTEMA Visual Basic 2010 ed Entity Framework 4


dell’utente, perché creeremo un tipo di connessio-ne 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 un’applicazione, quando si vuole alleggerire all’utente 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 l’uscita della versione 4.0 si risolverà anche questo problema.Per prima cosa creiamo il file di database. Possiamo utilizzare l’apposita 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 proget-to, poi inseriamo il nome del database (nel nostro caso Gestionale.mdf) e confermiamo premendo il pulsante Apri.Tornando alla finestra iniziale, non possiamo anco-ra testare la connessione perché il file di database non è ancora stato creato e quindi confermiamo le scelte premendo il pulsante OK.

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 strut-tura 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 l’esempio di applicazio-ne. Potete verificare l’inesistenza di tabelle espan-dendo 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-

nite lo schema come nella Fig. 5.Selezionate la riga del campo ID e premete il pul-sante 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à l’inserimento auto-matico di un numero progressivo.

Fig. 3: Selezione del tipo di origine dati

Fig. 4: Creazione del database

Fig. 5: Lo schema della tabella AnagraficaFig. 2: Selezione o creazione del database

NOTA

Nelle maNi del mago

Letteralmente wizard signi-fica mago: così vengono chiamate, praticamente da sempre, le autocom-

posizioni che permettono di creare codice con il

minimo intervento dello sviluppatore. È sufficien-

te rispondere a qualche richiesta del wizard e in

pochi secondi otteniamo il risultato atteso.

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, trala-sciando 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 all’applicazione.

L’appLicazione WpFSelezionate la voce Nuovo progetto nella Pagina iniziale o la voce di menu File > Nuovo > Progetto. Vi apparirà la finestra di dialogo nella quale tro-verete il modello Applicazione WPF che vi serve. Selezionate tale modello, inserite il nome dell’ap-plicazione (in questo esempio utilizzeremo il nome EF4) e l’eventuale 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 veri-ficare nell’apposita casella a discesa che il .NET Framework utilizzato sia quello della versione 4.0. Se invece utilizzate Visual Basic 2010 Express dovrete verificare l’impostazione della versione del .NET Framework 4.0 nelle proprietà dell’ap-plicazione, scheda Compilazione > Opzioni di compilazione avanzate.

DeFiniamo L’interFaccia graFicaPer prima cosa definiamo la dimensione della pagina (per esempio 700x500) e della Grid che conterrà i con-trolli WPF (in questo caso un po’ più piccola della pagina: 670x450). All’interno 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>



</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 esi-stente e il terzo per salvare tutte le modifiche. Nel codi-ce appena visto, abbiamo inserito un commento “” 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>

In questo codice abbiamo impostato un’associazio-ne 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.

Fig. 6: Alcuni dati di esempio inseriti nella tabella Anagrafica

Fig. 7: Selezione dell’elemento ADO.NET in riferimento all’Entity Data Model

NOTA

Quale dB 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 engi-ne, 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 que-sta pagina: http://tinyurl.com/sqlce4



NOTA

copie iN maNualeÈ necessario copiare il

database nelle sottocar-telle Debug e Release del progetto per poter vedere i dati. Non permettete che la copia venga fatta auto-

maticamente dall’ambiente di sviluppo, altrimenti qual-siasi modifica ai dati verrà

sovrapposta dalla copia originale del database.

Vediamo ora come possiamo definire dei pulsanti all’interno dello StackPanel:

<Button Width=”120” Height=”40” Margin=”10”

Content=”Aggiungi riga” Name=”btnAggiungi” />


Content=”Elimina riga” Name=”btnElimina” />


Content=”Salva modifiche” Name=”btnSalva” />

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 è identi-ficato il controllo nel codice (Name).Dopo il codice di definizione dello StackPanel, inse-riamo 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” />

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 asse-gnare un nome al controllo (dgAnagrafica). Le altre proprietà impostate servono a definire un legame con una sorgente dati (ItemsSource), ad autogenera-re le colonne della griglia (AutoGenerateColumns), a sincronizzare la griglia con l’elemento corrente

(IsSynchronizedWithCurrentItem) e a disegnare lo sfondo delle righe con una colorazione alternata (AlternatingRowBackground). Infine abbiamo impo-stato una serie di proprietà booleane, ciascuna delle quali ha un nome che inizia per CanUser (“l’utente può...”), per permettere di: aggiungere e cancellare righe, ordinare e riordinare le colonne, ridimensiona-re righe e colonne. La parte grafica dell’applicazione è pressoché completa, manca ancora un tassello: abbiamo creato un file di database e una connessione a tale database, ma l’applicazione 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).

aggiungiamo un eLementoentity Data moDeLQui entra in gioco il wizard a cui avevamo fatto cenno all’inizio 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, clic-chiamo con il tasto destro del mouse sul nome del pro-getto 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 l’elemento con estensione

.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 l’origine dati vera e propria. Nel caso in cui dovessimo avere già a disposizione una connessione a un’origine dati nell’am-biente di sviluppo, come in questo caso, nella casella a discesa verrà proposto il nome di tutte le connessioni disponibili (Fig. 9).

Fig. 8: Selezione del tipo di origine dati

Fig. 9: Definizione della connessione al database



Notate come la stringa di connessione sia un po’ diversa dalla classica stringa di connessione ADO.NET, con l’aggiunta 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 l’unica tabella che avevamo definito in precedenza, mentre le altre opzioni sono inserite di default. Notate che è presen-te 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 com-posizione 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 è l’unica novità che troviamo nel nostro pro-getto: infatti l’ambiente 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 l’applicazione dopo la com-pilazione. 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, attra-verso le sue proprietà di binding. Nel prossimo para-grafo vediamo la procedura per ottenere questo risultato.

Data binDingPer data binding si intende l’associazione che viene creata tra un’origine dati, a livello di intero dataset o di singolo campo con un controllo visuale. Per esempio, nella applicazione che stiamo costruen-do in questo articolo creeremo un’associazione tra la tabella Anagrafica e il controllo DataGrid per visualizzare l’intero set di dati contenuto nella tabella. Tale associazione permetterà di aggiunge-re, eliminare o modificare dati nella griglia e, con un opportuno comando, di aggiornare la tabella memorizzata nel database.Procediamo con ordine. Prima di tutto dobbia-mo 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 l’istanza del conte-sto, cioè un riferimento al modello EDM denomina-to Gestionale Entities, la classe ObservableCollection è una particolare collezione che permette di realiz-zare un’associazione dati bidirezionale (two-way data binding): non solo dall’origine dati all’in-terfaccia grafica, ma anche dall’interfaccia grafi-ca all’origine dati, permettendo così il salvataggio delle modifiche. Una precisazione: è importante che vi ricordiate di importare il namespace System.Collections.ObjectModel, altrimenti non potrete uti-lizzare 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

Questa funzione crea e restituisce un oggetto di tipo ObservableCollection, cioè una collezione di ele-menti di tipo Anagrafica, selezionati attraverso una query eseguita sugli elementi memorizzati nell’en-tità Anagrafica.Ora l’applicazione è già in grado di visualizzare i dati nella griglia, pertanto manca ancora l’ultimo passaggio per completare il lavoro: il codice dei gestori di evento dei tre pulsanti.Fig. 10: Scelta delle tabelle da includere nel modello



Gestirele modifiche dei datiPer 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 dell’origine dati.Naturalmente, l’oggetto che aggiungiamo è costi-tuito da una riga vuota: una volta creata la riga sarà sufficiente inserire i dati che mancano, direttamente nella griglia, e poi salvare le modifiche.

Il codice del gestore dell’evento 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

Per eliminare una riga dobbiamo scrivere qualche porzione di codice in più: infatti dobbiamo verifi-care quale riga è selezionata per poterla cancellare. Se nessuna riga è selezionata sarà sollevata un’ecce-zione. Per gestire tale eccezione è quindi necessario inserire le istruzioni all’interno 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 premia-mo il pulsante di eliminazione.Successivamente richiamiamo il metodo Remove dalla collezione ed eliminiamo la riga anche dal contesto dell’origine dati. Ecco il codice corrispon-dente a quanto abbiamo descritto:

Private Sub btnElimina_Click(



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

Infine il gestore dell’evento Click del pulsante btn-Salva è il seguente:

Private Sub btnSalva_Click(



Handles btnSalva.Click

Try

Me.GestionaleContext.SaveChanges()

Catch ex As Exception

MessageBox.Show(ex.ToString)

End Try

End Sub

Anche in questo caso abbiamo un blocco Try ... Catch ... End Try, per prevenire eventuali ecce-zioni durante la memorizzazione delle modifiche. L’istruzione che tentiamo di eseguire è semplice-mente quella che richiama il metodo SaveChanges del contesto dell’origine dati.Nel caso in cui l’istruzione dovesse fallire, verrà mostrato il testo dell’eccezione.

conclusioniAbbiamo visto con quale semplicità è possibi-le visualizzare i dati di una tabella nella nuova DataGrid di WPF, fornendo all’utente anche la possibilità di modificare il contenuto della griglia e automaticamente, in cascata, anche i dati della tabella di origine. Abbiamo anche visto come fun-ziona il wizard per l’aggiunta di un Entity Data Model mappato a un’origine 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

Fig. 11: Le finestre per la gestione dell’Entity Data Model

L’AUTORE

Mario De Ghetto è un appassionato di informatica a 360 gradi, ma soprattutto

di programmazione. Si è laureato in ingegneria

informatica all’Università 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 all’indirizzo [email protected].

non solo codiceContent Management System: la scelta giusta


Quello dei CMS (ossia ‘sistemi di gestio-ne dei contenuti’) è uno di quei setto-ri più ampi dell’intero mercato delle

applicazioni per il Web. Seguendo l’evoluzione 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 miglio-re spinta per il miglioramento, sia uno svantag-gio, 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 l’articolo 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 prodot-to 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: abbia-mo selezionato quelle che ci sembravano più importanti. Un breve avviso prima di addentrar-ci nel vivo dell’argomento: non approfondiremo l’aspetto di progettazione del sito, dal quale dipendono, se non tutte, molte delle decisioni che si dovranno prendere quando si vuole sele-zionare un’applicazione del genere.

Prima di sceglierePrima di passare alla fase di selezione di un CMS, è necessario definire i prerequisiti del sito che andremo a creare per rendere più agevole il pro-cesso 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, sull’in-frastruttura tecnologica sulla quale si appoggerà, sul livello di competenze richiesto agli ammini-stratori.

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 possibi-li 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 un’applicazione di tal genere è pur sempre un’infrastruttura complessa, che da un lato facilita la pubblicazione di un sito Web, rendendo auto-matici i processi di pubblicazione delle pagine e di strutturazione delle stesse, ma dall’altro 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

Fig. 1: Il mondo dei CMS è vastissimo. In figura la mappa dei prodotti secondo CMS Watch

Come sCegliere il Cms giusto 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

non solo codice Content Management System: la scelta giusta


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 l’uso 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 ser-vizio 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.

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 un’applicazione che sia spe-cificamente 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.

•SitigeneralistiLi potremmo chiamare anche ‘portali’. Sono siti che includono una gran varietà di funzioni che comprendono in generale tutte le caratteristiche indicate nelle successive categorie: pubblicazio-ne di notizie, gallerie fotografiche, strumenti di community e così via. Esempio di CMS di questo tipo è il noto Joomla (www.joomla.org).

•BlogI blog non hanno bisogno di presentazione. Sono tipologie di siti che prevedono la pubbli-cazione di articoli o ‘post’ in ordine cronologico suddivisi per categorie. Nati come semplici diari personali, sono oggi veri e propri strumenti edi-toriali 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).

•E-commerceI siti di commercio elettronico offrono tutti gli strumenti per la vendita di prodotti. Si va dalla pubblicazione degli oggetti organizzati in cate-gorie fino alla gestione del processo di acquisto e post-vendita. Molto diffuso è Magento (www.magentocommerce.com).

•WikiI wiki sono servizi che permettono la pubblica-zione collaborativa di pagine web. Il loro scopo è quello di pubblicare pagine che tutti possono non solo legger, ma anche modificare. Il prin-cipio su cui si basano è che la scrittura colla-borativa 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 l’enciclopedia collaborativa Wikipedia.

•CommunityDi solito i siti dedicati alle community si raccol-gono 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 mes-saggistica interna, pubblicazione di foto e video e così via. Uno dei CMS più noti per la pubblica-zione di un forum è phpBB (www.phpbb.com).

•E-LearningI siti di e-learning facilitano la somministrazione della formazione online permettendo di gesti-re 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).

•CollaborazioneI siti che permettono agli utenti di collaborare tra di loro sono molto diffusi in ambito azienda-le. 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 tipo-logie di strumenti che favoriscono la condivisio-ne di risorse e buone pratiche. Uno dei servizi più completi è Alfresco (www.alfresco.com).

•GalleriefotograficheI 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 foto-grafie in album e visualizzare in diverse riso-luzioni, consentono agli utenti di scaricarle, votarle e commentarle. Il più noto CMS dedi-

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 pubblica-re set di fotografie in modo

semplice e veloce; i sondaggi, per poter inte-ragire con i propri visitatori e raccogliere informazioni

sui loro interessi; le aree di upload e down-

load, 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 argo-menti del sito;

le statistiche, o interne o basate su servizi esterni, per permettere di analiz-

zare gli accessi al sito; nel caso il sito prevedesse commenti pubblici e senza

moderazione preventiva, è d’obbligo dotarsi di un

modulo antispam, per evi-tare di ritrovarsi i commen-

ti pieni di ‘spazzatura’.

Fig. 2: Per piccoli siti è anche possibile usare un semplice editor HTML come Expression Web 3 di Microsoft



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 impo-ne per due diverse ragioni: da un lato per defini-re la complessità tecnica del CMS che si andrà a scegliere, dall’altro per stabilire il livello di con-trollo sugli utenti che esso potrebbe offrire. Se gli utenti che dovranno usare il servizio sono molti, e magari non tutti nel perimetro dell’organizza-zione, è 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.

chi amministrerà il cms?Da valutare anche chi dovrà amministrare il ser-vizi. Ogni CMS ha un livello più o meno profon-do di personalizzazioni che vi si possono appli-care e molti prevedono sistemi di aggiornamen-to automatici. Altri, per raggiungere questi stessi obiettivi, richiedono invece qualche conoscenza in più. Se l’amministratore 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 l’utente tipo, è necessario pensare all’infra-struttura 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 l’elenco 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 som-maria dell’infrastruttura 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

librerie richieste, la loro versione e così via. Sono informazioni che sono disponibili sui siti di ogni CMS alla voce System Requirements o, in italia-no, Risorse di sistema.

requisiti di baseDopo aver definito i prerequisiti, è arrivato il momento di passare alla selezione delle carat-teristiche di base che dovrà avere l’applicazio-ne. Una delle scelte più importanti riguarda la tipologia del CMS: custom, Open Source, com-merciale 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ù specifica-mente 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, tro-varle 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 organiz-zazioni che hanno bisogno di soluzioni pronte all’uso e servizi di assistenza sempre disponibili. Esiste, da qualche tempo, anche una terza solu-zione: 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.

Fig. 3: Weebly è un servizio Web che permette di creare al volo, con il solo browser, siti Web completi

non solo codice Content Management System: la scelta giusta


di quali plug-in ho bisogno?Ogni CMS che si rispetti ha un set di funzionalità incluse nell’installazione (cosiddette built-in) e diverse altre funzionalità che invece vanno in-stallate 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à pron-to) 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 informazio-ni che, per ogni CMS recensito, offre una ricca tabella con le tutte le funzionalità supportate. Per valutare invece i plug-in disponibili, è neces-sario fare visita al sito del produttore del CMS e visualizzare la lista di quelli disponibili. Fate at-tenzione: spesso non basta rintracciare un plug-in nella pagina delle estensioni del CMS per as-sicurarsi che funzioni. Per essere sicuri che sia quello giusto, va installato e testato per un po’.

quale interfaccia grafi ca?Altro punto nevralgico per la scelta di un CMS è la disponibilità di template, ossia di “pacchetti” di elementi grafi ci che sono in grado di modifi care l’intera interfaccia grafi ca di un sito. è, si capisce, un elemento di primaria importanza poiché nulla come l’aspetto grafi co defi nisce a colpo d’occhio 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, com-munity e così via).

requisiti secONdariDefiniti i prerequisiti e i requisiti di base, si può passare a selezionare i requisiti che chiameremo “secondari” solo per comodità. Di questa cate-goria fanno parte le opzioni di sicurezza, la pre-senza di supporto e documentazione, la presen-za di strumenti di marketing e di accessibilità.

quanto è sicuro il cms?I CMS sono applicazioni Web, esposte 24 ore su 24 all’esterno. La sicurezza e la solidità dell’ap-plicazione è uno di quegli aspetti che non va assolutamente sottovalutato: attacchi di cra-cking verso siti Web gestiti anche da noti CMS sono all’ordine del giorno. La sicurezza va valu-tata sotto due diversi profili. Da un lato verifi-cando 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 è proba-bilmente una scelta che può garantire stabilità. Dall’altro lato, va verificato il numero di giorni che trascorrono dalla scoperta della vulnerabi-lità 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. 4: Gallery è un CMS per immagini e video. La versio-ne 3 (in fi gura) è attesa a breve

Fig. 5: Chi dovrà usare il CMS avrà bisogno di un editor semplice e funzionale (in fi gura quello di Wordpress 3)

Fig. 6: Vignette di Open Text è uno dei CMS di livello enterprise più noti (www.opentext.com)

NOTA

I SITI pER AppRoFonDIRE

Sono tantissimi i siti che aiutano l’utente nella scelte

del giusto CMS per il pro-prio sito Web. Uno dei più noti e utili è sicuramente OpensourceCMS (www.

opensourcecms.com), un sito che permette di testa-

re decine di CMS open source già preinstallati e confi gurati sui server del

sito. Il servizio consente di visualizzare non solo l’in-

terfaccia utente, ma anche di utilizzare la sezione di

amministrazione per poter provare le varie opzioni offerte da ogni singola

applicazione. CMS Matrix (www.cmsma-trix.org) è invece dedicato

al confronto fra i vari CMS. Il sito offre un lungo elenco

di applicazioni e un’anali-tica scheda con i dettagli delle funzioni supportate

che, con pochi clic, posso-no essere visualizzare sin-

golarmente 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 sce-

gliere l’applicazione che si desidera attraverso un pro-

cesso di selezione passo per passo.



affidabile di un altro in cui le patch vengono rilasciate dopo tempo. Facendo una ricerca su uno dei tanti database di vulnerabilità presen-ti 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.

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 gesti-re l’applicazione. Le strade per ottenere queste informazioni sono di solito tre: la documen-tazione ufficiale rilasciata con l’applicazione; 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 procedu-re di modifica del codice dell’applicazione. Dovrebbe inoltre contenere le istruzioni per l’uso 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 tec-nico 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 aumen-tare il numero di visitatori e per fidelizzare i lettori. Indispensabile, in questo campo, sono

gli strumenti per l’ottimizzazione 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, attra-verso 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 cre-azione di campagne di e-mail marketing (new-sletter). Accertatevi infine che sia possibile aggiungere, maga ri integrandoli nel pannello di amministrazione, strumenti esterni di moni-toraggio degli accessi, come Google Analytics.

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 stru-menti che favoriscono l’accesso 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, l’ente non profit che si occupa di stan-dardizzare 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 cellula-ri. Molti CMS possono attivare questa funzione attraversi un plug-in. Inoltre, se vi fosse la necessità di raggiungere anche un pubblico internazionale, va consta-tata la possibilità di poter contare su interfacce multi-lingua, che si adattano automaticamente alla lingua del visitatore.

Fig. 7: Una documentazione chiara e approfondita è necessaria per utenti e amministratori di un CMS

Fig. 8: CMSaccessibile (www.cmsaccessibile.net) è un CMS commerciale basato su Mambo che pone al centro gli standard di accessibilità

I trucchi del mestiere

PHPGenera 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;

}

?>

tre metodi Per riconoscere l’iPHone< ?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/”))

{

$browserIsMobileSafari = true;

}

?>

da oGGetto ad arrayfunction 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;

}

interaGire con il GeocodinG di GooGlefunction 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;

TIps&TrIcks Una raccolta di trucchi da tenere a portata di... mouse


tips & tricksQuesta rubrica raccoglie trucchi e piccoli pezzi di codice, frutto dell’esperienza 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

TIps&TrIcksUna raccolta di trucchi da tenere a portata di... mouse


$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;

}

Generare una Passwordfunction generatePassword($length=9, $strength=0) {

$vowels = ‘aeuy’;

$consonants = ‘bdghjmnpqrstvz’;

if ($strength >= 1) {

$consonants .= ‘BDGHJLMNPQRSTVWXZ’;

}


$vowels .= “AEUY”;

}


$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;

}

evidenziare il termine cercato<div class=”post”>

<?php $title = get_the_title(); $keys= explode(“ “,$s); $title = preg_

replace(‘/(‘.implode(‘|’, $keys) .’)/iu’, ‘<strong class=”search-excerpt-

title”>\0</strong>’, $title); ?>

<h2 class=”title”><a href=”<?php the_permalink() ?>”

rel=”bookmark” title=”<?php the_title(); ?>”><?php echo $title; ?></

a></h2>

<p class=”post-meta”>



</p>

<div class=”entry”>



<?php $excerpt = get_the_excerpt(); $keys= explode(“ “,$s);

$excerpt = preg_replace(‘/(‘.implode(‘|’, $keys) .’)/iu’, ‘<strong

class=”search-excerpt”>\0</strong>’, $excerpt); ?>

<?php echo $excerpt; ?>

</div>

}

c#rimuovere l’ultimo carattere di una strinGa// prima : mystring = “abcde;”

mystring = mystring .TrimEnd(‘;’);

// dopo : mystring = “abcde”

una classePer il croP del testopublic 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);

TIps&TrIcks Una raccolta di trucchi da tenere a portata di... mouse


if (MaxLenght < InputLength)

{

result = input.Substring(0, MaxLenght);

if (lastChar == “ “)

{

result = result.Substring(0, result.Length - 1);

}

if (DoDots)

{

result += “...”;

}

}

return result;

}

}

codice PrivileGiatoSPSecurity.RunWithElevatedPrivileges(delegate()

{

using (SPSite site = new SPSite(SPContext.Current.Site.ID))

{

// codice privilegiato

}

});

un tooltiP sulla listBoXprivate 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);

}

JQuerystamPare una PaGina weBprntwin = window.open(“”);

prntwin.opener = self;

prntwin.document.body.innerHTML=msg;

prntwin.print();

prntwin.close();

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’);

});

});

/* Si usa scrivendo il link in questo modo:

* <a href=”url_here” rel=”ext” title=”title_here”>LINK TEXT</a>

*/

una mascHera di inPut(function($)

{

$.fn.mask = function() {

return $(this).each(function() {

var

$this = $(this),

text = $this.val();

//when focused ont the input

$this.focus(function(){

if($this.val() == text)

$this.val(“”);

});

//looses focus

$this.blur(function() {

if($this.val() == “”)

$this.val(text);

});

});

}

})(jQuery);

$(document).ready(function()

{

$(‘#input’).mask();

});

DAL FORUMDiscussioni dal Web


Partecipa anche tu su http://www.ioprogrammo.it

Dal forumQuesta rubrica raccoglie trucchi e piccoli pezzi di codice, frutto dell’esperienza 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

LINGUAGGI DI PROGRAMMAZIONE

WPF E LE TOOLBARAutore: Dark Mighty Wolf

Newbie ★

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 l’immagine 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.aspxFammi sapere!

LINGUAGGI DI PROGRAMMAZIONE > .NET

WEB SERVICE PER VALIDAZIONE ABI 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, all’interno di una applicazione che sto realizzando, la funzionalità di ricerca di � liali bancarie tramite l’introduzione di codici ABI e CAB. Se qualcuno conosce l’esistenza di un Web Service che espone questa funzionalità mi aiuterebbe moltissimo. GrazieMarcello

Autore: alex.75

Jr. Member ★ ★

Vedi qui se riesci ad usare questo:www.nexusonline.it:8088/

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;

}

...

...

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 nell’esempio ed ha sempre risposto correttamente. Ciao.

DAL FORUM Discussioni dal Web


Partecipa anche tu su http://www.ioprogrammo.it

94 / Ottobre 2010

LINGUAGGI DI PROGRAMMAZIONE > .NET

OGGETTO SQLDATAREADERAutore: bassaidai

Newbie ★

Salve,sono nuovo del forum, quindi mi scuso se l’argomento è stato già trattato ma non l’ho trovato nei vari post. La domanda è la seguente: spesso in C# uso l’oggetto 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!

Autore: alex.75

Jr. Member ★ ★

NO, per fortuna non c’è. Per lavorare in modalità simil-connessa esistono i DataSet...In realtà internamente usano dei DataReader anch’essi e manten-gono lo “stato” del record in modo tale da creare il giusto coman-do SQL automaticamente lasciando il tutto trasparente (= nasco-sto) all’utente. 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). CiaoAlessandro

Autore: Bassaidai

Newbie ★

Grazie per la risposta, ma perché dici “per fortuna”? non è una limi-tazione? 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 “avan-ti”, “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à disconnes-sa) anch’io preferisco evitarli a favore dei DataReader (anche se ho notato anch’io 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

Autore: alex.75

Jr. Member ★ ★

Le connessioni al database sono limitate, quindi vanno usate in

stile “mordi e fuggi”. Ecco perchè ho scritto “per fortuna”.Sinceramente non ricordo nemmeno come una pagina web potes-se in ASP tenere una connessione aperta per sfruttare un “cursore” sui record. Questo perchè ogni azione dell’utente 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 l’integrità 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 pre-cedenze 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 all’ID 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 un’applet 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 all’interno di web-application. Nel caso fosse possibile vi sarei grato se mi indicaste qualche link. Grazie a tutti per l’aiuto.

Autore: pancry777

Jr. Member ★ ★

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

Autore: Songissimo

Newbie ★

Grazie per l’indicazione, mi sembra molto utile... il fatto è che dovrei realizzare un’applicazione 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

Autore: Songissimo

Newbie ★

Proprio ciò che cercavo!!!Sei stato grande!!!Grazie ancora!!!

SOFTWARE SUL CD Librerie e Tool di sviluppo

http://www.ioprogrammo.it 96 /Ottobre 2010

A4Desk FlAsh Photo GAllery 2.47Una galleria di immagini sUbito prontaUn tool “all-in-one” che crea una galleria foto-grafica interattiva in Flash, ampiamente perso-nalizzabile grazie alle numerose skin disponi-bili. L’utente 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 all’interno di un CD-ROM, o ancora utilizzata come appli-cazione stand alone. Non è necessaria alcuna conoscenza di Flash.Nome file: a4deskgallery_setup.exe

AutoFlowchArt 3.1diagrammi 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 dell’utente, e si può pre-definire la larghezza, l’altezza, 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

meglio comprendere, documentare e visualiz-zare il codice sorgente. AutoFlowchart suppor-ta 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 lavoroUn efficace aiuto per proteggere la proprie-tà intellettuale del software che sviluppiamo, offuscando il codice assembly generato a par-tire 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

eDitrocket 3.5.7scrivere codice “a razzo”EditRocket è un editor di testo perfetto per la scrittura di codice sorgente, grazie al suppor-to 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-

vere codice in modo rapido e semplice, come l’evidenziazione della sintassi, il function navi-gator, l’auto completamento via tag, le macro, la ricerca e sostituzione attraverso regular expression e un ottimo validatore XML. La ver-sione 3.5.7 aggiunge il supporto per Ant e per HTML 5.Nome file: editrocket3_5_7_setup.exe

ewDrAw 3D 8.0le tUa app generano immagini 3dUn 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

FirebirD PhP GeNerAtor 10.8firebird: interfacce proFirebird PHP Generator è un generatore di

soFtwAresul cD

Un ambiente di sviluppo con tutte le carte in regola per diventare lo standard per la programmazione

su Android. In un unico pacchetto di installazione avre-mo 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 con-nettersi allo store di applicazioni Android, direttamen-te dall’interno 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.

MotoDeVStudio for Android v1.3

Sviluppare per Android in stile Motorola

SOFTWARE SUL CDLibrerie e Tool di sviluppo


interfacce per database Firebird. Consente di generare codice PHP di alta qualità per l’in-terrogazione di tabelle selezionate e viste. Con Firebird PHP Generator avremo a disposizione una interfaccia di livello professionale per l’ac-cesso ai dati. Freeware.Nome file: firebird_phpgenerator_free_

setup.exe

hiGhliGht 3.1il tUo codice pronto da leggereHighlight è un convertitore universale che tra-sforma 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

litePXP 8.20la tUa applicazione pHp sU cdLitePXP permette di navigare siti scritti in PHP su CD, senza alcun collegamento a Internet. Si tratta di una applicazione portatile che com-prende Apache, MySQL e PHP. È possibile ese-guire 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 speci-fico prodotto e la sua icona.Nome file: litepxp-setup.exe

PhP GeNerAtor Per MysQl 10.8gUi professionali per mysQlUn generatore di interfacce grafiche per la gestione di DB MySQL che permette un’agile rappresentazione dei dati in formato HTML. Tra le caratteristiche più interessanti, segna-liamo l’autenticazione degli utenti, il supporto per collegamenti ipertestuali e immagini, le numerose opzioni di ricerca per le relazioni master-detail e la capacità di creare applicazio-ni Web multilingue.Nome file: mysql_phpgenerator_free_

setup.exe

PhP GeNerAtor Per MysQl 10.8pHpmaker 7.1Un interessante tool capace di generare codi-ce 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

l’output. Non solo, il codice che viene prodotto è di facile lettura, consentendo così ulteriori personalizzazioni. Gli script PHP possono gira-re sia su server Windows (MySQL/PostgreSQL/Access/MSSQL) che su server Linux (MySQL/PostgreSQL). La versione 7.1 introduce la com-patibilità con PHP Report Maker 4.Nome file: phpmkr.exe

rAzorsQl 5.2.0Un’interfaccia per tUtti i dbInterrogare, modificare, visualizzare e gestire tutti i principali database da un’unica inter-faccia. RazorSQL è uno strumento per l’am-ministrazione di DB, con la capacità di con-nettersi 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 nell’interfaccia a riga di comando, e nell’editor SQL.Directory: RazorSQL

reMoVe VbA PAssworD 2.11.4via il lUccHetto dalle app!Un comodo tool per eliminare istantaneamen-te qualsiasi password VBA e sbloccare così pro-getti 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

shiVA 1.8.1 Pleil gioco si fa facile, in 3dShiVa3D è una potente piattaforma per lo sviluppo di applicazioni 3D, particolarmente indicata per il real time e per la creazio-ne di videogiochi. Gli ambienti target sono Windows, Mac OS, Linux, iPhone, Android, Palm, Wii e il iPad. Shiva include un poten-te motore 3D multipiattaforma e un editor tridimensionale WYSIWYG. L’editor visua-le permette di creare videogiochi in modo molto rapido e, grazie alla sua immedia-tezza, 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

siteMAP writer 5.2 crea la mappa del tUo sito Sitemap Writer Pro è uno strumento che con-sente 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 presen-tare 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

VisuAl iMPorter Pro 7.7.5importazione dati UniversaleVisual Importer Professional automatizza il processo di caricamento dei dati in qualsiasi database. Consente all’utente di progettare l’importazione, l’esportazione e gli script SQL, pianificandone l’esecuzione sulla base di un preciso scheduling. I repository sup-portati sono Access, Oracle, SQL Server, Interbase, MySQL e PostgreSQL.Nome file: VImpPS.zip

witeM iNstAller 4.5.11distribUzioni da professionistiwItem Installer è un potente strumento per la creazione di pacchetti di installazione di Windows, altamente personalizzabili e che seguono in pieno le linee guida per l’otteni-mento del logo di certificazione Windows. Molto diffuso in ambito pro, consente la distri-buzione di pacchetti di grande affidabilità.Nome file: winstall.exe

webloG eXPert lite 6.7analizza cosa fanno i tUoi UtentiUn analizzatore di log del server Web capace di restituire informazioni specifiche e precise sulle statistiche riguardanti i visitatori del tuo sito, compresa l’attività generale, l’ac-cesso 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

Posta Le domande dei nostri lettori


Invia i tuoi quesiti a [email protected]

L’esperto risponde

98 / Ottobre 2010

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 c’era 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)

{

…

Carlo

Ciao Carlo, quello che stai cercando di fare è molto simile a un automa a stati finiti, e questi sono di solito attuati con l’aiuto di una tabella di tran-sizione. 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 } }

Lasciando perdere la questione sulla correttezza dell’approccio 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 all’utente 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 l’ap-plicazione. Nelle applicazioni con una interfaccia utente, il livello più alto è spesso riconducibile all’handler del clic su un pulsante. Per i servizi in background, il più alto livello è spesso riferibile ai callback.Se si lascia che l’eccezione si propaghi nel sistema, si avrà un’eccezione non gestita e l’applicazione andrà in crash. Gestire una eccezione in una applicazione con interfaccia utente, spesso comporta la generazione di un messaggio per l’utente. Alcune eccezioni non sono fatali e l’operazio-ne può essere ripetuta (per esempio se un file è mancante o una query di database non riuscita), ma altre eccezioni sono “mortali” e l’unica opzione è quella di terminare l’applicazione. Un servizio in background registrerà l’eccezione e, forse, tenterà di ripetere l’operazione. Se diversi tentativi falliscono, il livello di allerta sul log può aumentare per ottenere l’attenzione di un operatore. Ti riassumo qualche “good practice” per la gestione delle eccezioni: •Se si cattura un’eccezione e si genera una nuova eccezione, è

bene effettuare il Wrap della eccezione originale e riproporla come InnerException della nuova eccezione.

•Se si cattura un’eccezione e si effettua qualche operazione per gestirla, è bene rigenerarla comunque, per non perdere in futu-ro la traccia che c’è comunque qualcosa che non va.

•Nella maggior parte dei casi si dovrebbe sempre e solo inter-cettare la classe base Exception, all’interno dell’handler di più alto livello.

•Utilizzare blocchi finally o ancora meglio il pattern IDisposable per eseguire il cleanup all’interno del tuo codice.

•Conviene pensare alle eccezioni come a una “interfaccia uten-te” 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 dell’esistenza di una chiave in un dizionario non dovrebbe generare un’eccezione 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.

Invia i tuoi quesiti a [email protected]

L’esperto risponde

by C@solari

Io Programmo 155 Ottobre 2010

Documents

Transcript of Io Programmo 155 Ottobre 2010