Sei sulla pagina 1di 81
iPhone 4 con hTML5 e JavascriPT! Scopriamo il framework Sencha touch per scrivere agevolmente una

iPhone 4 con hTML5 e JavascriPT!

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

by C@solari

agevolmente una WebApp per il melafonino by C@solari VERSIONE PLUS RIVISTA+LIBRO+CD € 9,99 VERSIONE

VERSIONE PLUS

RIVISTA+LIBRO+CD 9,99

VERSIONE STANDARD RIVISTA+CD € 6,99
VERSIONE STANDARD
RIVISTA+CD € 6,99

Per esPerti e PrinciPianti

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)

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)

VISuAL BASIc 2010

scoPri il nuovo entity Framework 4

Sfruttiamo tutte le novità per accedere velocemente a qualunque fonte DB

JQuERy

semPliFica il codice dei tuoi JavascriPt

Con jQuery, manipoliamo

in

modo veloce ogni tipologia

di

documento HTML

RuBy ON RAILS

un Framework oPen source Per il web

Sviluppiamo WebApp con meno codice e in stile MVC

BROWSER

le estensioni di GooGle chrome

Scriviamo una extension

in grado di dialogare

facilmente con Twitter

MOBILE

Gestione delle notiFiche con iPhone

Un’applicazione meteo per scoprire il funzionamento delle ‘Push Notification’

per scoprire il funzionamento delle ‘Push Notification’ intelligenza artifiCiale Con Bada Riconosciamo un volto in

intelligenza artifiCiale Con Bada

Riconosciamo un volto in una foto grazie alle API del sistema operativo

condivisione dei dati tra le aPP android

Usiamo i Content Provider

per scrivere App in grado

di dialogare tra loro

www.edmaster.it
www.edmaster.it

Windows

Phone7

ed è vera rivoluzione!

loro www.edmaster.it Windows Phone7 ed è vera rivoluzione! Batti sul tempo gli altri sviluppatori, inizia fin

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 softwareapplicazioni mobile per il nuovo sistema made in Microsoft Installare e configurare i tool necessari allo

Installare e configurare i tool necessari allo sviluppoCome funziona l’innovativa piattaforma hardware e software Passo per passo una prima applicazione in grado di

Passo per passo una prima applicazione in grado di sfruttare le novità del sistema operativoInstallare e configurare i tool necessari allo sviluppo Sul cd-Rom tutti gli esempi di codice commentato!

Sul cd-Rom tutti gli esempi di codice commentato!
Sul cd-Rom tutti gli esempi
di codice commentato!
operativo Sul cd-Rom tutti gli esempi di codice commentato! Programmare senza scrivere codice! Sotto la lente

Programmare senza scrivere codice!

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

Una gUida ragionata al CMS più adatto alle tUe eSigenze

Qual è il miglior Content Management System da adottare per il tuo sito Web? Scopriamo insieme caratteristiche e funzionalità dei CMS più in voga

Anno XIV - N.ro 10 (155) - Ottobre 2010 Periodicità: Mensile Reg. Trib. di CS al n.ro 593 del 11 Febbraio 1997 Cod. ISSN 1128-594X E-mail: ioprogrammo@edmaster.it http://www.edmaster.it/ioprogrammo http://www.ioprogrammo.it

Direttore Editoriale: Massimo Sesti Direttore Responsabile: Massimo Sesti Responsabile Editoriale: Gianmarco Bruni Redazione: Raffaele del Monaco Collaboratori: R. Brunetti, C. Daniele, M. De Ghetto, F. Napoletano, C. Pelliccia, L. Regnicoli , G. Sarnieri

Segreteria di Redazione: Rossana Scarcelli

Consulenza Redazionale: SET S.r.l. Gianfranco Forlino

Realizzazione gra ca: Cromatika S.r.l. Art Director: Fabio Marra Responsabile gra co di progetto: Leonardo Cocerio Responsabile area tecnica: Giancarlo Sicilia Illustrazioni: Arturo Barbuto Impaginazione elettronica: Francesco Cospite

Pubblicità: Master Advertising s.r.l. Via F. Filzi, 27 - 20124 Milano Tel. 02 83121211 - Fax 02 83121207 e-mail advertising@edmaster.it

Editore: Edizioni Master S.p.a. Sede di Milano: Via C. Correnti, 1 - 20123 Milano Sede di Rende: C.da Lecco, zona ind. - 87036 Rende (CS) Presidente e Amministratore Delegato: Massimo Sesti Direttore Generale: Massimo Rizzo

Abbonamento e arretrati Abbonamento Annuale: ioProgrammo (11 numeri) €59,90 sconto 23% sul prezzo di copertina di €76,89 • ioProgrammo con Libro (11 numeri) €75,90 sconto 31% sul prezzo di copertina di €109,89 Abbonamento Biennale: ioProgrammo (22 numeri) €75,90 sconto 51% sul prezzo di copertina di €153,78 • ioProgrammo con Libro (22 numeri) €108,90 sconto 51% sul prezzo di copertina di €219,78 Offerte valide solo per 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).

bonifico 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 POSTO NELLE

PAGINE INTERNE DELLA RIVISTA. L’abbonamento verrà attivato sul primo numero utile, successivo alla data della richiesta.

Sostituzioni: qualora nei prodotti fossero rinvenuti difetti o imperfezioni che ne limitassero la fruizione da parte 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 Milano Assistenza tecnica:
Edizioni Master - Servizio Clienti - Via C. Correnti, 1 - 20123 Milano
Assistenza tecnica: ioprogrammo@edmaster.it
SERVIZIO CLIENTI
199.50.50.51 *
dal lunedì al venerdì 9:00/13:00 – 14:00/18:00
199.50.00.05 * sempre in funzione
servizioclienti@edmaster.it
*Costo massimo della telefonata 0,118 € + iva a minuto di
conversazione, da rete fissa, indipendentemente dalla distanza.
Da rete mobile costo dipendente dall’operatore utilizzato.

Stampa: Arti Gra che Boccia S.p.a. Via T. C. Felice, 7 Salerno Duplicazione CD-Rom: Neotek S.r.l. C.da Imperatore - Bisignano (CS) Distributore esclusivo per 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- rizzazione scritta della Edizioni Master. Manoscritti e foto originali, anche se non pubblicati, non si restituiscono. Edizioni Master non sarà in alcun caso

responsabile per i danni diretti e/o indiretti derivanti dall’utilizzo dei program-

mi contenuti nel supporto multimediale allegato alla rivista e/o per eventuali

anomalie degli stessi. Nessuna responsabilità è, inoltre, assunta dalla Edizioni Master per danni o altro derivanti da virus informatici non riconosciuti dagli antivirus uf ciali all’atto della masterizzazione del supporto. Nomi e marchi 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”

ambientali e sulla prevenzione dell’inquinamento” Questo mese su ioProgrammo by C@solari ▼ COERENZA E

Questo mese su ioProgrammo

by C@solari

COERENZA E INNOVAZIONE

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

❑ CD ❑ WEB nomefile cdrom.ioprogrammo.it
❑ CD ❑ WEB
nomefile
cdrom.ioprogrammo.it

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

Windows

Phone7

all’indirizzo http://cdrom.ioprogrammo.it Windows Phone7 ed è vera rivoluzione! Come funziona l’innovativa

ed è vera rivoluzione!

Come funziona l’innovativa piattaforma hardware e softwareWindows Phone7 ed è vera rivoluzione! Installare e configurare i tool necessari allo sviluppo

Installare e configurare i tool necessari allo sviluppoCome funziona l’innovativa piattaforma hardware e software Passo per passo una prima applicazione in grado di

Passo per passo una prima applicazione in grado di sfruttare le novità del sistema operativoCome funziona l’innovativa piattaforma hardware e software Installare e configurare i tool necessari allo sviluppo

tool necessari allo sviluppo Passo per passo una prima applicazione in grado di sfruttare le novità

by C@solari

Questo mese su ioProgrammo

Programmare senza scrivere una riga di codice!

Una guida al nuovo Microsoft Visual Studio LightSwitch. Per sviluppare applicazioni .NET senza conoscere alcun linguaggio di programmazione

web 2.0

 

notification: che temPo fa? 54 Un’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à

tori. Una grande occasione anche per gli sviluppatori VB6 che vogliono passare a .NET senza difficoltà

il Web dinamico

 

è

facilissimo!

24

jQuery è il nome del framework che sta rivoluzionando lo sviluppo JavaScript. Grazie a jQuery è possibile fare in una sola istruzione ciò che in passato richiede- va decine di righe di codice: scopri come approfittarne nelle tue applicazioni

gestiRe i dati con entity fRameWoRk 4 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

70

gestione dei content PRovideR 60

I

Content Provider costituiscono la manie-

 

ra

di Android per condividere dati fra le

Ruby foR dummies:

 

applicazioni. In questo articolo imparere- mo a consultare i provider predefiniti

iniziamo bene!

30

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

vedremo anche come costruire un forni- tore di contenuti custom

e

 

non Solo codice

come sceglieRe il cms giusto

 

SiSTemA

85

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

36

mobile

il telefono Riconosce i volti!

In 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

42

iPhone 4 con html5 e JavascRiPt!

Se 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

50

PRogRammaRe è ancoRa facile!

Un nuovo ambiente di sviluppo

di Microsoft che semplifica la creazione di

64

applicazioni anche per i non-programma- RubRiche Allegati di ioProgrammo 6 Il software e il libro
applicazioni anche per i non-programma-
RubRiche
Allegati di ioProgrammo 6
Il software e il libro in allegato
alla rivista
News
Le più importanti novità
del mondo della programmazione
8
Tips & Tricks
90
Una raccolta di trucchi da tenere
a portata di
mouse
Dal Forum
Le più interessanti discussioni
dal sito web di ioProgrammo
92
Software
I contenuti del CD-Rom allegato
96
Posta
Le richieste dei nostri lettori
98

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

qualche consiglio utile

i nostri autori, nel presentare gli

articoli, si sforzano di essere quanto più comprensibili possibile.

nel caso in cui abbiate difficoltà nel comprendere esattamente il senso di una spiegazione tecnica, è utile aprire il codice allegato all’articolo

e seguire passo passo quanto viene

spiegato tenendo d’occhio l’intero

progetto.

http://www.ioprogrammo.it

Top Il CD-Rom allegato Software CD Programmare Robot con Java MOTODEV Studio for Android v1.3
Top
Il CD-Rom allegato
Software
CD
Programmare
Robot con Java
MOTODEV Studio
for Android v1.3
Sviluppare applicazioni
per il robot Lego Mindstorm NXT
Sviluppare per Google Android
in stile Motorola
I
l testo nasce dall’esperienza della
Scuola di Robotica (www.scuo-
U n ambiente di sviluppo con tutte le carte in regola
per diventare lo standard per la programmazione su
ladirobotica.it) e si propone due
obiettivi: essere un manuale di faci-
Android. In un unico pacchetto di installazione avremo la
piattaforma Eclipse con già pronti gli Android Development
le
consultazione, ricco di esempi,
per la programmazione e presen-
tare le basi teoriche per lo sviluppo
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à
di
applicazioni Java, affrontando
DB, attraverso il pieno supporto per SQLite. Molto utile la
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.
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.
Come usare l’interfaccia del CD-ROM IN EVIDENZA IL SOFTWARE Il top software del mese individuato
Come usare l’interfaccia del CD-ROM
IN EVIDENZA
IL SOFTWARE
Il top software del mese
individuato dalla redazione
L’elenco del software
contenuto nelle categorie
IL SOFTWARE
DIMENSIONE
Il software diviso
in categorie per
una comoda consultazione
La dimensione
del software sul CD
IL SOFTWARE
SALVA
Una accurata recensione
dei contenuti
Clicca qui per installare o
salvare il software sul tuo PC
HOME
Torna alla pagina iniziale
del CD-ROM
INFO
Abbonamenti, informazioni
e servizi utili
RICERCA SOFTWARE
CONTATTACI
Per inviare una email alla
redazione con le tue richieste
Il database di tutti i software
pubblicati da ioProgrammo,
anche gli arretrati

NEWS

NEWS

Fennec 2.0, l’alpha è pronta per tutti

Il

browser mobile di Mozilla si aggiorna. A bordo ci sono Sync

e

tecnologie pensate per migliorare le prestazioni e l’esperienza utente

W Nuova 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

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

prima fa si che l’interfaccia del browser giri

in

occupa del rendering dei contenuti web. “In

istantaneo

alla

cronologia

di

naviga-

implementate

un

processo

Electrolysis

separato

da

e

Layers:

che

la

si

quello

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? Il 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.

NEWS

NEWS

WebOS 2.0: ecco l’SDK!

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.

commercializzazione di gadget basa- ti su di esso. Paypal e Android, matrimonio in vista? P ayPal,

Paypal e Android, matrimonio in vista?

P ayPal, 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.

sul principio dei crediti preacquisiti, utilizzabili dove si desidera. 10 / Ottobre 2010 http://www.ioprogrammo.it
NEWS

NEWS

Intel e Nokia: laboratorio in comune per il 3D

È stato chiamato Joint Innovation Center ed ospiterà almeno una ventina di ricercatori grazie anche agli spazi degli Urban

Living Labs 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-

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

be

alle interfacce 3D”. Da questo punto di vista, Intel e be Nokia punteranno tutto sulla piattaforma

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.

Center, alla ricerca di nuove esperienze. In tre dimensioni. Win Phone 7: tutto vocale F ino

Win Phone 7: tutto vocale

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

comporre un numero telefonico presente in rubrica, senza 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.

del risultato e una modalità d’uso semplificata che sia basata esclusi- vamente sulle corde vocali dell’utente.

NEWS

NEWS

Oracle frena su OpenSolaris

U n 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 ufficiale. Il codice sorgente di Solaris è finora 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 offre programmi di archiviazione basati su OpenSolaris e Linux), al cui lancio i pro- motori hanno affermato 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.

Solaris che non sono mai state rilasciare in open source. PROBLEMI CON LA TECNOLOGIA? ECCO LE
PROBLEMI CON LA TECNOLOGIA? ECCO LE SOLUZIONI T echAssistance (www.techassistance.it) è una community di tecnici
PROBLEMI CON LA
TECNOLOGIA? ECCO LE SOLUZIONI
T echAssistance (www.techassistance.it) è una community di tecnici specializzati sempre a tua disposizione per
aiutarti a risolvere problemi di ogni tipo con i dispositivi elettronici che usi quotidianamente! Ecco alcune 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?
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)
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 modifica nel caso in cui la volessi implementare in
If x = 0 Then
lvi.Text = dataArray(x, y)
Else
lvi.SubItems.Add(dataArray(x, y))
End If
Next
listView.Items.Add(lvi)
Next
End Sub
NEWS

NEWS

Silverlight:

oltre Html5

S econdo Microsoft, Lo scopo di

Silverlight non è mai stato quello

anni per vedere i risultati pratici per

la

totalità della Rete. Per Microsoft,

di

sostituire HTML, quanto piuttosto

aspettando il momento in cui HTML5

quello di fare le cose che HTML (e

sarà sfruttabile in massa, Silverlight

altre tecnologie) non potevano in un

si

sarà evoluto significativamente ed

modo che fosse facile da sfruttare per

è

comunque già qui, a disposizione

gli

sviluppatori. Silverlight è un esten-

di

utenti e sviluppatori, e funziona in

sione del linguaggio di scripting stori-

tutti i più popolari browser e sistemi

co

del web che permette l’implemen-

operativi.

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

del nuovo HTML sono ancora in evoluzione e ci vorranno con rFID, Facebook entra nella realtà

con rFID, Facebook entra nella realtà

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

esempio per tessere di riconoscimento o carte

di credito, 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.

permette di pubblicare e taggare automa- ticamente le foto.   News INtel tI legge Il PeNSIerO
 

News

INtel tI legge Il PeNSIerO

N on 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

L o 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

L G 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

COVER STORY

COVER STORY

Introduzione all’ambiente di sviluppo per Win Phone 7

SVILUPPARE PER WINDOWS PHONE 7

LA PROPOSTA MICROSOFT NEL MONDO DELLA TELEFONIA MOBILE ROMPE GLI SCHEMI CON IL PASSATO E SI PRESENTA COME UNA VERA RIVOLUZIONE PER QUANTO RIGUARDA LA USER EXPERIENCE E IL MODELLO DI SVILUPPO BASATO SU SILVERLIGHT E SUL RUNTIME XNA

MODELLO DI SVILUPPO BASATO SU SILVERLIGHT E SUL RUNTIME XNA ❑ CD ❑ WEB ThinkAhead.IoProgrammo.zip
❑ CD ❑ WEB ThinkAhead.IoProgrammo.zip cdrom.ioprogrammo.it
❑ CD ❑ WEB
ThinkAhead.IoProgrammo.zip
cdrom.ioprogrammo.it
REQUISITI Conoscenze richieste
REQUISITI
Conoscenze richieste

Conoscenza di .NET e Visual Studiocdrom.ioprogrammo.it REQUISITI Conoscenze richieste Software È necessario installare i Windows Phone Developer

Software

richieste Conoscenza di .NET e Visual Studio Software È necessario installare i Windows Phone Developer Tools,

È necessario installare

i Windows Phone

Developer Tools, sca- ricabili gratuitamente

a partire dall’indirizzo http://tinyurl.com/

winp7dev

Impegno

dall’indirizzo http://tinyurl.com/ winp7dev Impegno Tempo di realizzazione Q uesto articolo ha l’obiettivo di

Tempo di realizzazione

http://tinyurl.com/ winp7dev Impegno Tempo di realizzazione Q uesto articolo ha l’obiettivo di intro- durre tutti

Q uesto 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

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-

feature del telefono stesso, prima di affronta-

fetto, il significato e il valore dell’interazione

re

l’argomento principale, ovvero lo sviluppo

uomo-macchina e della proprietà del prodotto

di

una semplice applicazione utilizzando gli

stesso; inoltre, la percezione degli aspetti pra-

strumenti di sviluppo, gratuiti, e il runtime

tici e dell’efficienza fanno parte dell’esperienza

di

Silverlight. Nel corso dell’articolo vedremo

dell’utente.

insieme alcune specifiche per lo sviluppo di

Il primo errore che può fare lo sviluppatore di

applicazioni.

applicazioni per Windows Phone 7 è ignorare

IL DEVICE

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

A

febbraio 2010, Microsoft ha reso pubbliche

resto del device: non stiamo affermando che

le

sue intenzioni nel mondo della telefonia

non possiamo avere fantasia e che le applica-

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

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-

di

con il passato, sia rispetto ai prodotti Microsoft

vista, il nuovo dispositivo rompe gli schemi

vono per dare una base comune per facilitare l’utilizzo delle applicazioni, riducendo i tempi

stessi come Windows Mobile 6.5, sia rispetto

di

apprendimento e la dimensione dell’even-

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-

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

abbiamo

attraversa la strada mentre legge 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-

Introduzione all’ambiente di sviluppo per Win Phone 7

COVER STORY

COVER STORY

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 PIATTAFORMA

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

utente per applicazioni WPF e Silverlight da qualche anno. NOTA ARCHITETTURA APPLICAZIONI Windows Phone 7, nella
NOTA ARCHITETTURA
NOTA
ARCHITETTURA

APPLICAZIONI

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

) per informazioni sull’architettura delle applicazioni. Fig. 1: Quadro riassuntivo della piattaforma di sviluppo

Fig. 1: Quadro riassuntivo della piattaforma di sviluppo

COVER STORY

COVER STORY

Introduzione all’ambiente di sviluppo per Win Phone 7

Introduzione all’ambiente di sviluppo per Win Phone 7 NOTA USER EXPERIENCE Spesso lo sviluppatore sot- tovaluta
NOTA
NOTA

USER EXPERIENCE

Spesso 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/.

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

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.

desktop, quindi è possibile optare anche per la scrittura di applicazioni web, magari ospitate

IL

MERCATO

una piattaforma di cloud computing come Windows Azure di cui abbiamo avuto modo

su

DI

RIFERIMENTO

La distribuzione delle applicazioni viene fatta

di

parlare in vari articoli apparsi nei numeri

tramite Windows Phone Marketplace che, da

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

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

una scheda Wi-Fi, l’accelerometro e altre caratteristiche Fig. 2: Applicazioni in fase di sviluppo: menu start

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

Introduzione all’ambiente di sviluppo per Win Phone 7

COVER STORY

COVER STORY

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 STRUMENTI DI SVILUPPO

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

PARTIRE CON IL PIEDE GIUSTO

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

RuntimeType=”Silverlight” Version=”1.0.0.0” NOTA BLOG, FORUM E ESEMPI La community www.think-
NOTA BLOG, FORUM
NOTA
BLOG, FORUM

E ESEMPI

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

dei sensori e delle varie fun- zionalità del device. Fig. 3: Visual Studio Designer: l’interfaccia delle

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

COVER STORY

COVER STORY

Introduzione all’ambiente di sviluppo per Win Phone 7

Introduzione all’ambiente di sviluppo per Win Phone 7 Fig. 4: Il primo test della nostra nuova
Introduzione all’ambiente di sviluppo per Win Phone 7 Fig. 4: Il primo test della nostra nuova

Fig. 4: Il primo test della nostra nuova app

per Win Phone 7 Fig. 4: Il primo test della nostra nuova app Fig. 5: Software

Fig. 5: Software Input Panel (SIP)

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

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

shell:SystemTray.IsVisible=”True”> <!--LayoutRoot is the root grid where all page content

<!--LayoutRoot is the root grid where all page content is placed-->

<Grid x:Name=”LayoutRoot” Background=”Transparent”>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

Height=”*”/> </Grid.RowDefinitions> <!--TitlePanel contains the name of the application and

<!--TitlePanel contains the name of the application and page title-->

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

PhoneTextTitle1Style}”/> </StackPanel> <!--ContentPanel - place additional content here-->

<!--ContentPanel - place additional content here-->

<Grid x:Name=”ContentPanel” Grid.Row=”1”

Margin=”12,0,12,0”/>

Introduzione all’ambiente di sviluppo per Win Phone 7

COVER STORY

COVER STORY

all’ambiente di sviluppo per Win Phone 7 COVER STORY Fig. 6: Codice reale XAML del controllo

Fig. 6: Codice reale XAML del controllo Panorama

COVER STORY Fig. 6: Codice reale XAML del controllo Panorama </Grid> <!--Sample code showing usage of

</Grid>

</Grid> <!--Sample code showing usage of ApplicationBar-->

<!--Sample code showing usage of ApplicationBar-->

<!--<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible=”True” IsMenuEnabled=”True”>

<shell:ApplicationBarIconButton x:Name=”appbar_button1” IconUri=”/Images/appbar_ button1.png” Text=”Button 1”/>

<shell:ApplicationBarIconButton x:Name=”appbar_button2” IconUri=”/Images/appbar_ button2.png” Text=”Button 2”/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem x:Name=”menuItem1” Text=”MenuItem 1”/>

<shell:ApplicationBarMenuItem x:Name=”menuItem2” Text=”MenuItem 2”/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage.ApplicationBar>--> </phone:PhoneApplicationPage>

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

secondo uno stile; lo stile ha lo scopo di centralizzare la Fig. 7: Il controllo Panorama

Fig. 7: Il controllo Panorama in una applicazione reale

COVER STORY

COVER STORY

Introduzione all’ambiente di sviluppo per Win Phone 7

Introduzione all’ambiente di sviluppo per Win Phone 7 Fig. 8: Phone Call da codice definizione delle
Introduzione all’ambiente di sviluppo per Win Phone 7 Fig. 8: Phone Call da codice definizione delle

Fig. 8: Phone Call da codice

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-

Visual Studio, oppure direttamente il codice XAML, o anco- Fig. 9: Interfaccia in azione con il

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

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;

Introduzione all’ambiente di sviluppo per Win Phone 7

COVER STORY

COVER STORY

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using System.Windows.Shapes; using Microsoft.Phone.Controls; namespace ThinkAhead.IoProgrammo { public partial class

namespace ThinkAhead.IoProgrammo

{

public partial class MainPage : PhoneApplicationPage

{

// Constructor

public MainPage()

{

InitializeComponent();

}

// Constructor public MainPage() { InitializeComponent(); } private void addButton_Click(object sender, RoutedEventArgs

private void addButton_Click(object sender, RoutedEventArgs e)

{

appListBox.Items.Add(textBox1.Text);

}

}

}

COSA SUCCEDE DIETRO LE QUINTE

Il code behind è semplice e, come Visual Studio

ci ha abituati sin dalla versione 2002, prevede

una derivazione dalla classe base del form, in questo caso una page rappresentata dalla clas- se PhoneApplicationPage (la stessa indicata nel file MainPage.xaml che abbiamo analizza-

to in precedenza), l’utilizzo di un costruttore

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

prime beta e previsti per la versione RTM all’interno del che verrà autogenerato nel file mainpage.g.cs

che verrà autogenerato nel file mainpage.g.cs, oltre al codice del metodo addButton_Click che

preoccupa di attivare l’emulatore, effettuare il

prodotto, due controlli che gli esperti di user experience definiscono come “killer control”.

abbiamo inserito noi per gestire l’inserimento

Si

tratta di Panorama e Pivot.

dell’elemento nella listbox.

Il

primo, Panorama, come indica il termine

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

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.

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

deploy dell’applicazione e il debug dell’appli- cazione stessa (provare a metttere un break- point per verificarne il funzionamento).

LA BELLEZZA DEL PANORAMA

Visto che l’applicazione è localizzata in più lingue, abbiamo utilizzato il binding verso le

A

serie di informazioni di debug rispetto alla user

destra, in verticale, sono rappresentate una

nostre risorse localizzate (con un classico con- verter Silverlight) per le intestazioni e i vari TextBlock inseriti nel primo PanoramaItem.

interface. L’applicazione dovrebbe presentarsi

Il

controllo Panorama consente di impostare

(pixel più, pixel meno) come in Fig. 4. Abbiamo aggiunto “Office” fra le applicazioni tramite la TextBox e la pressione del nostro pulsante per

un titolo per l’applicazione visto che il con- trollo occupa l’intera superficie dello scher- mo, consente di intercettare tramite l’even-

COVER STORY

COVER STORY

Introduzione all’ambiente di sviluppo per Win Phone 7

Introduzione all’ambiente di sviluppo per Win Phone 7 Fig. 10: Save Phone Num- ber Task GLI
Introduzione all’ambiente di sviluppo per Win Phone 7 Fig. 10: Save Phone Num- ber Task GLI

Fig. 10: Save Phone Num- ber Task

GLI AUTORI
GLI AUTORI

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.

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

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

}

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.

Sul sito www.thinkmobile.it

sono

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

WEB 2.0

WEB 2.0

Introduzione a jQuery

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

DI RIGHE DI CODICE: SCOPRI COME APPROFITTARNE NELLE TUE APP ❑ CD ❑ WEB JQ1.rar cdrom.ioprogrammo.it
❑ CD ❑ WEB JQ1.rar cdrom.ioprogrammo.it
❑ CD ❑ WEB
JQ1.rar
cdrom.ioprogrammo.it
REQUISITI Conoscenze richieste HTML, CSS, JavaScript
REQUISITI
Conoscenze richieste
HTML, CSS, JavaScript

Software

Web Browser ed un editor HTML, CSS e JavaConoscenze richieste HTML, CSS, JavaScript Software Impegno Tempo di realizzazione I n principio il Web era

Impegno

Software Web Browser ed un editor HTML, CSS e Java Impegno Tempo di realizzazione I n

Tempo di realizzazione

ed un editor HTML, CSS e Java Impegno Tempo di realizzazione I n principio il Web

I n 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.

INTRODUZIONE A JQUERY

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

DOWNLOAD ED INSTALLAZIONE

Il 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

Introduzione a jQuery

WEB 2.0

WEB 2.0

development”. In entrambi i casi si tratta di un le .js

CONCETTI FONDAMENTALI

che dovrete salvare sul vostro hard disk. La versione

Includendo il le .js in una pagina HTML, otteniamo che

development” presenta un sorgente ben indentato e

vi

si inietta al suo interno una nuova funzione JavaScript,

facilmente leggibile. Potete utilizzarla per studiare il codi-

il

cui nome è jQuery(), ed il cui argomento è un selettore

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.

mente compresso e ridotto, tanto da risultare illeggibile. Fig.1: Alcune fasi della comparsa automatica di un

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

Di conseguenza la versione “production” non è buona

per lo studio ed il debug, ma in compenso ha il pregio di

pesare assai meno di quella “development”. Siccome la libreria dovrà essere inclusa in ogni documento HTML che ne deve far uso, risparmiare banda è indispensabile per migliorare la velocità di caricamento delle pagine. Ecco perché il download “production” è quello più 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>

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

</head>

<body>

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

<script type=”text/javascript”>

<body> <h1 id=”saluta”>Ciao, jQuery!</h1> <script type=”text/javascript”>

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.

dal tipo dell’elemento e dal valore dell’attributo. NOTA WRITE LESS, DO MORE Il motto di jQuery
NOTA WRITE LESS,
NOTA
WRITE LESS,

DO MORE

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

WEB 2.0

WEB 2.0

Introduzione a jQuery

WEB 2.0 Introduzione a jQuery • $(“[align=center]”) Seleziona gli elementi con un attributo align pari esatta-

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

NOTA I NUMERI
NOTA
I NUMERI

DI JQUERY

Le statistiche dicono che, al momento in cui questo articolo viene scritto, circa il 33% dei 10000 siti più visitati al mondo fanno uso di jQuery:

http://trends.builtwith.com/

javascript/JQuery

Con circa il 70% totalizzato nella seguente rilevazione, invece, jQuery si attesta come la libreria JavaScript più diffusa al mondo:

http://w3techs.com/

technologies/overview/

javascript_library/all

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.

CONTROLLO DELLE DIMENSIONI

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

Introduzione a jQuery

WEB 2.0

WEB 2.0

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

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

avviene nei CSS: $(“#mioElemento”).width(“150pt”); Fig.2: width() e height() restituiscono le dimensioni di un

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

DEFINIAMO IL POSIZIONAMENTO

Passiamo al posizionamento. La funzione principale è o set(), che restituisce la posizione di un oggetto rispetto al documento. Viene restituito un oggetto dotato delle proprietà left e top, utili rispettivamente per conoscere il

left e top , utili rispettivamente per conoscere il Fig.3: innerWidth() e innerHeight() restituiscono le di-

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

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:

e non rispetto al documento. Provate con questo esempio: Fig.4: outerWidth() e outerHeight() restituiscono le
e non rispetto al documento. Provate con questo esempio: Fig.4: outerWidth() e outerHeight() restituiscono le

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

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/

xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”it” lang=”it”>

<head>

<title>offset() e position()</title>

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

<style>

#elemento1 {

position: absolute;

left: 20px; top: 30px;

}

#elemento2 {

position: absolute;

left: 50px; top: 70px;

}

#elemento1 { position: absolute; left: 20px; top: 30px; } #elemento2 { position: absolute; left: 50px; top:

CONTROLLO DEL CONTENUTO

Il 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>:

NOTA JQUERY.
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().

<div id=”mioElemento”>

<p>Questo &egrave; 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.

WEB 2.0

WEB 2.0

Introduzione a jQuery

WEB 2.0 Introduzione a jQuery var text = $(“#mioElemento”).html() alert(text); Questa volta il risultato sarà

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

alert(text);

Questa volta il risultato sarà il codice HTML conte- nuto nel <div>, cioè:

<p>Questo è un <strong>testo</strong> che <em>usa alcuni</em> tag.</p>

Passando un argomento di tipo stringa alle due funzioni si può modi care il testo o il codice HTML contenuti in un elemento. Provate da voi la di erenza fra le due chia- mate incluse nel seguente codice:

<div id=”mioElemento1”></div>

<div id=”mioElemento2”></div>

<div id=”mioElemento2”></div> <script type=”text/javascript”> var message =

<script type=”text/javascript”>

var message = “Ciao, <strong>jQuery</strong>!”;

$(“#mioElemento1”).html(message);

$(“#mioElemento2”).text(message);

</script>

L’AUTORE
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

Altre due funzioni particolarmente utili per la manipo- lazione del contenuto di un elemento sono append() e prepend(). Le due funzioni aggiungono del codice HTML (come fa html(), quindi, non come fa text()) all’elemento su cui vengono richiamate. La funzione prepend() lo aggiunge all’inizio, prima cioè del contenuto originale dell’elemento; la funzione append(), invece, aggiunge al termine. Ecco un esempio:

<div id=”mioElemento”>[TESTO ORIGINALE]</div>

<script type=”text/javascript”>

$(“#mioElemento”).append(“[TESTO APPEND]”);

$(“#mioElemento”).prepend(“[TESTO PREPEND]”);

</script>

Il risultato di questo codice sarà:

[TESTOPREPEND][TESTOORIGINALE][TESTOAPPEND]

DIAMO IL “NOSTRO” STILE AGLI ELEMENTI

Un’altra grande caratteristica di jQuery è la possibilità di manipolare le classi e gli attributi di stile CSS assegnati ad un elemento. Con la funzione addClass() è possibile aggiungere una classe CSS ad un elemento:

$(“#mioElemento”).addClass(“miaClasse”);

Una classe CSS, aggiunta via HTML o con jQuery stesso, può essere rimossa da un elemento chiamando remove- Class():

$(“#mioElemento”).removeClass(“miaClasse”);

Si può veri care se un elemento ha una classe di stile usando la funzione booleana hasClass():

if ($(“#mioElemento”).hasClass(“miaClasse”)) {

}

La funzione toggleClass(), in ne, aggiunge una classe ad un elemento se questo non la ha già, mentre la rimuove in caso contrario. In pratica chiamare:

$(“#mioElemento”).toggleClass(“miaClasse”);

È come fare:

if ($(“#mioElemento”).hasClass(“miaClasse”)) {

$(“#mioElemento”).removeClass(“miaClasse”);

} else {

$(“#mioElemento”).addClass(“miaClasse”);

}

Oltre alle classi, con jQuery è possibile arrivare a gestire no al singolo attributo CSS associato ad un elemento. La funzione utile è css(). Il primo uso che si può fare della funzione è con un argomento di tipo stringa, che esprime il nome di un attributo CSS. La funzione restituirà il valo- re associato all’attributo richiesto. Provate con questo esempio:

<div id=”mioElemento” style=”color: blue”>Testo</div>

style=”color: blue”>Testo</div> <script type=”text/javascript”> var value =

<script type=”text/javascript”>

var value = $(“#mioElemento”).css(“color”);

alert(value);

</script>

Non importa se l’attributo è stato de nito in linea, all’in- terno di una classe CSS assegnata all’elemento, ereditato da un’altra classe o forzato manualmente: la funzione css() restituirà sempre il valore in vigore nel momento in cui lo si domanda. Aggiungendo un secondo argomento, la funzione css() può essere utilizzata anche per modi care il valore dell’attributo selezionato:

$(“#mioElemento”).css(“color”, “red”);

Come avete appena visto, jQuery è una libreria allo stesso tempo semplice e potente. Quanto sperimentato sinora, ad ogni modo, non è ancora nulla rispetto alle vere potenzialità del framework! Per questo motivo nei prossimi numeri dedicheremo alcuni articoli all’appro- fondimento di jQuery e delle sue tante sfaccettature. Il prossimo mese, in particolar modo, impareremo come usare jQuery per gestire in maniera sempli cata gli eventi (clic, mouse-over, mouse-out, ecc.) di una pagina HTML.

Carlo Pelliccia

WEB 2.0

WEB 2.0

Primi passi con Ruby On Rails

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

AVVICINARSI ALLA PROGRAMMAZIONE DI DOMANI, PARTENDO DA ZERO ❑ Cd ❑ WeB ruby.zip cdrom.ioprogrammo.it REQUISITI
❑ Cd ❑ WeB ruby.zip cdrom.ioprogrammo.it
❑ Cd ❑ WeB
ruby.zip
cdrom.ioprogrammo.it
REQUISITI Conoscenze richieste
REQUISITI
Conoscenze richieste

HTML, CSS, JavaScriptcdrom.ioprogrammo.it REQUISITI Conoscenze richieste Software Web Browser ed un editor HTML, CSS e Java Impegno

Software

Web Browser ed un editor HTML, CSS e JavaConoscenze richieste HTML, CSS, JavaScript Software Impegno Tempo di realizzazione I l linguaggio Ruby è alla

Impegno

Software Web Browser ed un editor HTML, CSS e Java Impegno Tempo di realizzazione I l

Tempo di realizzazione

ed un editor HTML, CSS e Java Impegno Tempo di realizzazione I l linguaggio Ruby è

I l linguaggio Ruby è alla base di moltissimi

dei servizi che usiamo tutti i giorni. Twitter,

BaseCamp e innumerevoli altre applicazioni

web si basano sul linguaggio di scripting creato nel 1993 dal giapponese Yukihiro Matsumoto (Matz per gli amici). Il linguaggio Ruby si ispira a Smalltalk, Lisp e Perl ed è un linguaggio interpretato 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 filesystem, 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 diffusi 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.

stRUMenti di sVilUPPO

Ruby è disponibile per tutti i sistemi operativi, in pacchetti di facile installazione, già comprensivi di tutto il necessario allo sviluppo delle nostre applica- zioni. Potete scegliere i pacchetti ufficiali (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.

) che racchiude al suo interno lo stack Ruby. Fig.1: Aptana, IDE che integra Ruby Qualunque

Fig.1: Aptana, IDE che integra 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 file di testo con estensione .rb. Il nostro HelloWorld sarà composto da una sola riga:

puts “Hello World”

Primi passi con Ruby On Rails

WEB 2.0

WEB 2.0

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.

e vedrete stampare a video il vostro primo programma Ruby. Fig.2: L’interprete Ruby in esecuzione su

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

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

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

Niente di più facile

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 OPeRatORi

La 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

  puts oggetti[i]   i += 1   end NOTA MVC Model-View-Controller è un pattern architetturale
NOTA MVC
NOTA
MVC

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

WEB 2.0

WEB 2.0

Primi passi con Ruby On Rails

WEB 2.0 Primi passi con Ruby On Rails Come potete vedere, la sintassi è simile a

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.

“reali” come faremo nel corso dell’articolo. Fig.3: Il pattern MVC (fonte Wikipedia) MetOdi e Classi Come

Fig.3: Il pattern MVC (fonte Wikipedia)

MetOdi e Classi

Come abbiamo detto ad inizio articolo, Ruby

è un linguaggio fortemente orientato agli oggetti. Cominciamo ad utilizzare i metodi, vedremo in 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-

end e come potete

zione def <nome_metodo>

end e come potete zione def <nome_metodo> Fig.4: L’applicazione RadRails in azione vedere

Fig.4: L’applicazione RadRails in azione

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

“#{@nome} ha ricevuto l’sms \”#{testo}\”” end end luigi = Bambino.new(“Luigi”) luigi.saluta luigi.sms

luigi = Bambino.new(“Luigi”)

\”#{testo}\”” end end luigi = Bambino.new(“Luigi”) luigi.saluta luigi.sms “questo e’ un sms per te”

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

Primi passi con Ruby On Rails

WEB 2.0

WEB 2.0

 

turazione é quello di rendere indipendenti tra loro

 

le

parti del software adibite al controllo, all’accesso

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

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

è sostanzialmente il “template” (HTML in caso di USIAMO LE GEMS Come dicevamo ad inizio articolo,

USIAMO LE GEMS

Come dicevamo ad inizio articolo, le Ruby Gems sono librerie “preconfezionate” messe a disposizio-

prima installarla. Esistono tool grafici per gestire

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

ne dagli utenti della community Ruby. Come pos-

in

esso incluso per creare la nostra applicazione, ma è

siamo usarle? Per usare una “gemma” dobbiamo

comunque possibile creare l’app da riga di comando lanciando rails (a sua volta installato come gemma).

le

gems, ma comunque il comando da shell (che

Assicuratevi di avere un server MySQL attivo sul vostro

ci

recatevi nella cartella che contiene il file ruby.exe

si trovi su Windows o su Linux) è semplicissimo:

pc: Rails supporta tranquillamente il database recen- temente acquisito da Oracle. Creiamo un nuovo pro-

(di solito c:\ruby\bin) e digitate:

getto Ruby cliccando File -> New

-> Rails Project.

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’

require ‘mysql’ connessione = Mysql.new(‘HOST’, ‘USERNAME’, ‘PASSWORD’, ‘NOME_DATABASE’) rs =

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

database o scrittura di file. Se dovete implementa- re qualche funzionalità comune, provate prima a

o operazioni comuni come connessioni a

)

cercare un’eventuale gem: magari qualcuno ha già fatto il lavoro sporco per voi!