In questo tutorial vedremo come sviluppare una semplice applicazione che accede a Flickr usando Windows Phone 7. L’obiettivo è vedere come sviluppare applicazioni per Windows Phone 7 usando Silverlight, una delle due possibile alternative per lo sviluppo. Per l’occasione ho ripescato una vecchia applicazione che ho usato in qualche presentazione per spiegare come si programma con Silverlight.
Per questo tutorial scaricate l’ultima versione dei tool in CTP per sviluppare con WP7, nel mio caso:
I tool includono una versione Express, gratuita, per sviluppare con WP7, se avete già Visual Studio 2010 installato sulla macchina, verranno aggiunti dei template di progetto. Potete scaricare anche una versione di Expression Blend 4 e i relativi add-in. Per il tutorial non sono necessari, ma per fare modifiche più sofisticate alla grafica lo sono:
Molto semplicemente possiamo lanciare VS 2010, quindi File->New Project
Potete da subito lanciare il progetto e lo vedrete girare nell’emulatore che è stato installato insieme ai tool:
Come prima cosa ho modificato la mainPage.Xaml e la classe phoneNavigation, inserendo il codice che vedete, dove uso il controllo di layout grid. Un controllo di layout definisce il posizionamento dei controlli al suo interno. In questo caso ho due griglie innestate che serviranno successivamente
Possiamo vedere direttamente dal designer di Visual Studio 2010 la preview dell’applicazione
Se fate partire l’emulatore e cliccate sul TextBox, come ci si aspetta comparirà la tastiera per scrivere il testo da ricercare e ora basta spostare il focus cliccando in un’altra parte per farla spomparire senza aggiungere codice ad hoc.
Se ora volessimo modificare alcune proprietà dello stile dei nostri controlli ad esempio impostando un certo font, oppure modificando la larghezza della textBox potremmo agire direttamente sul controllo impostando le singole proprietà e sfruttare l’intellisense offerto da Visual Studio.
il file App.xaml può essere utilizzato per inserire tutti gli stili che vogliamo definire. Ad esempio possiamo inserire il seguente frammento di codice XAML
Voglio definire uno stile BuddyImg che si applica ad un controllo di tipo Image che imposterà le proprietà HorizontalAlignment e Margin ai valori desiderati.
Posso ora tornare nella pagina main.xaml e andare ad impostare lo style nel controllo Image desiderato:
Nell’esempio di codice che potrete scaricare alla fine del post ho fatto la stessa operazione impostando la proprietà style su altri controlli della UI.
Ora vogliamo aggiungere la chiamata alle API di Flickr per fare la ricerca secondo la keywork che l’utente andrà ad inserire nella TextBox, per prima cosa aggiungiamo un handler sull’evento di click del bottone di ricerca. Visual Studio 2010 ci aiuta a generare l’handler nel progetto C#.
Fondamentalmente per accedere poi alle API di Flickr su può fare una chiamata REST passando dei parametri.
Quella che mi interessa mostrare è come faremo la chiamata usando l’oggetto WebClient, che per chi di voi ha usato Silverlight conosce bene. Come notate nel codice seguente ho impostato l’url della chiamata come prima cosa. Tutte le chiamatate fatte da Silverlight avvengono in modo asincrono, ed è necessario definire una chiamata di callback.
Possiamo ora mettere un breakpoint sulla funzione di callback per vededere che se eseguimo la chiamata vediamo il file XML che ci viene ritornato con le informazioni sulla ricerca.
Tramite le informazioni specificate possiamo creare un url che punta fisicamente all’immagine che vogliamo visualizzare. L’url ha la forma seguente:
Per creare questi URL, uno per ogni foto, creiamo una classe C# che andremo poi a “riempire” in qualche modo:
Per andare a fare il parsing del file XML e riempire una lista di oggetti FlickrPhoto useremo LINQ, per usare questa funzionalità ho aggiunto il riferimento alla libreria che mi serviva:
Possiamo ora scrivere il codice seguente, dopo il download del file XML
La variabile photos contiene ora la lista di tutte le foto richieste e richiamando le due proprietà UrlThumb e UrlSmall avete gli url alle foto in due diversi formati, come collegare questi url alla UI?
Ora usiamo una ListBox per visualizzare i titoli delle foto, impostiamo poi la proprietà DisplayMemberPath al valore della proprietà “title” che è quello che vogliamo venga visualizzato nella lista:
Nel codice C# dopo il codice LINQ to XML, basta che popoliamo la proprietà itemSource della ListBox come sotto.
Lanciando ora l’applicazione possiamo vedere la lista dei titoli delle sessioni
Una delle funzionalità più interessanti di Silverlight è il Data Template, grazie a questa funzionalità posso modificare, in modo radicale, come un controllo presenta le informazioni a video. Così gli elementi di una ListBox possono essere fatti da un’immagine il cui url è preso dalla classe precedentemente creata, e una TextBlock che visualizza il titolo della foto, ecco il codice.
Il risultato finale è il seguente:
Per ora vi lascio con il riferimento al training Kit su WP7 e potete divertirvi con l’esempio scaricandolo da qui.
Come abbiamo annunciato sul blog di team MSDN è disponibile per il download la versione italiana di Visual Studio 2010, ormai da qualche settimana. Nel post trovate utili informazioni sui tempi di validatà delle trial di Visual Studio 2010, mentre le versioni Express rimangono ovviamente sempre grauite.
Sì è possibile, ed è possibile passare da una versione all’altra. Ad esempio:
Lanciando Visual Studio 2010 ho la versione inglese.
E’ ora possibile passare dalla versione inglese a quella in italiano semplicemente modificando l’opzione dal menù tools, quindi Options e selezionando la lingua desiderata in International Settings:
E’ necessario riavviare Visual Studio perché la modifica abbia effetto:
Quindi facendo ripartire VS 2010, ora ho la versione in italiano
Per tornare alla versione inglese: Strumenti->Opzioni
Dipende :-), penso che ci siano alcuni aspetti da considerare, che possono essere d’aiuto nella scelta e che quindi condivido con voi:
Comunque sia buon Visual Studio 2010.
SharePoint 2010 Overview Evaluation Guide
http://go.microsoft.com/?linkid=9727161
SharePoint 2010 Walkthrough Guide
http://go.microsoft.com/?linkid=9727427
Microsoft SharePoint Server 2010 Evaluation Guide For IT Professionals
http://go.microsoft.com/?linkid=9727162
Microsoft SharePoint 2010 Professional Developer’s Evaluation Guide
http://go.microsoft.com/?linkid=9727163
SharePoint 2010 Training Kit
http://channel9.msdn.com/learn/courses/SharePoint2010Developer/
Office 2010 Training kit:
http://channel9.msdn.com/learn/courses/Office2010
SharePoint 2010 and Office 2010 evaluation VHD
http://www.microsoft.com/downloads/details.aspx?FamilyID=751fa0d1-356c-4002-9c60-d539896c66ce&displaylang=en
[Ho aggiornato i link ai nuovi video su BEIT in fondo al post]
Per chi se lo fosse perso potete vedere il lancio di Visual Studio 2010 e .NET Framework 4 in High Definition. Nel player sono stati aggiunti dei marcatori che vi permettono di muovervi velocemente da una sezione ad un’ altra.
Sotto trovate i link dei video che sono ( e alcuni saranno presto) disponibili sul portale di BEIT:
[Links Updated]
Mentre mi accingo a preparare una sessione su IE da presentare al PHPDay2010, ho avuto modo di provare la Platform Preview 2 di IE9. Come penso sapete queste release sono pensate per la community degli sviluppatori al fine di avere feedback sulla prossima versione del browser.
Le novità di questa preview riguardano:
Il team di IE si sta concentrando nel miglioare le performance di IE partendo dai siti e framework più diffusi, in modo da apportare modifiche per ottimizzare i casi più frequenti d’uso.
Sotto vedete le performance attuali del WebKit SunSpider, che misura il tempo di esecuzione (sull’ordinata vedete il tempo di escuzione in ms) per il Javascript:
IE9 utilizza un nuovo motore (rispetto a IE8) di esecuzione del Javascript, quest’ultimo in grado di compilare il Javascript prima dell’esecuzione.
Se provate ad eseguire il test ACID3, troverete migliormaneti (da 55 della preview 1 a 68 della preview 2):
Con la nuova preview trovate anche nuovi esempi delle funzionalità più richieste della community, comel’evento DOMContentLoaded che ora viene gestito in modo corretto e consente quindi di intervenire sulla pagina non al completo caricamento della stessa, ma quando le fase di parsing è completa.
Nell’esempio seguente vedete che mentre l’evento DOMContentLoaded si è scatenato e sarebbe quindi possibile cominciare a lavorare con il DOM della pagina, magari in Javascript, la pagina è ancora in attesa del completamento del carimento: in attesa di immagini etc.
Altri esempi che potete provare di IE 9, relativi agli standard sono : CSS3 Media Queries, DOM Range and HTML 5 Selection, getElementsByClassName direttamente dagli esempi disponibili.
Ci sono inoltre altri nuovi test che potete provare che sfruttano accelerazione offerta dall’ hardware del PC e il Javascript compilato. Senza modificare il markup delle applicazioni, quindi, il vostro codice girerà più velocemente in virtù dell’accelerazione hardware.
L’installazione della preview 2 avviene tramite un msi di circa 14MB che si installa side-by-side alla versione di IE8 che avete sulla macchina, e come già detto, è pensata non per la navigazione sul web ma per il testing. Se avete installata la preview precendete questa viene sostituita in modo automatico con la precedente versione.
Download di IE9 PP2
E per chi vuole esagerare come me:-)