free hit counter
May, 2010 - Pietro Brambati Blog - Site Home - MSDN Blogs

Pietro Brambati Blog

Developer's stories

May, 2010

  • Pietro Brambati Blog

    Windows Phone 7 e Silverlight : tutorial – parte 1

    • 5 Comments

    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.

    Download del software

    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:

    Creazione del progetto

    Molto semplicemente possiamo lanciare VS 2010, quindi File->New Project

    image

    Potete da subito lanciare il progetto e lo vedrete girare nell’emulatore che è stato installato insieme ai tool:

    image

    Definzione del layout dell’Applicazione

    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

    image

    Possiamo vedere direttamente dal designer di Visual Studio 2010 la preview dell’applicazione

    image

    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.

    image

    Definizione del layout grafico usando gli stili

    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.

    image

    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

    image

    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:

    image

    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.

    Networking

    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.

    image

    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.

    image

    Tramite le informazioni specificate possiamo creare un url che punta fisicamente all’immagine che vogliamo visualizzare. L’url ha la forma seguente:

    image 

    Per creare questi URL, uno per ogni foto, creiamo una classe C# che andremo poi a “riempire” in qualche modo:

    image

    Linq to XML

    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:

    image

    Possiamo ora scrivere il codice seguente, dopo il download del file XML

    image

    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?

    Visualizziamo i titoli delle foto

    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:

    image

    Nel codice C# dopo il codice LINQ to XML, basta che popoliamo la proprietà itemSource della ListBox come sotto.

    image

    Lanciando ora l’applicazione possiamo vedere la lista dei titoli delle sessioni

    image

    Visualizziamo anche le immagini

    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.

    image

    Il risultato finale è il seguente:

    image 

    Download e link utili

    Per ora vi lascio con il riferimento al training Kit su WP7 e potete divertirvi con l’esempio scaricandolo da qui.

  • Pietro Brambati Blog

    Visual Studio 2010 in italiano e non solo…

    • 0 Comments

    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.

    Posso installare Visual Studio 2010 in Italiano e in Inglese?

    Sì è possibile, ed è possibile passare da una versione all’altra. Ad esempio:

    1. Ho installato la trial di Visual Studio 2010 Professional in inglese usando il web installer da qui.
    2. Ho installato la trial di Visual Studio 2010 Professional in italiano usando il web installer da qui.

    Lanciando Visual Studio 2010 ho la versione inglese.

    image

    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:

    image

    E’ necessario riavviare Visual Studio perché la modifica abbia effetto:

    image

    Quindi facendo ripartire VS 2010, ora ho la versione in italiano

    image

    Per tornare alla versione inglese: Strumenti->Opzioni

    image

    E’ meglio la versione Inglese o quella Italiana?

    Dipende :-), penso che ci siano alcuni aspetti da considerare, che possono essere d’aiuto nella scelta e che quindi condivido con voi:

    • Se usate, installate spesso CTP, Beta di add-in, estensioni di Visual Studio, queste di solito sono installabili solo su una versione inglese di Visual Studio, per semplici motivi legati ai test che i team di prodotto fanno per versioni non ancora stabili delle varie estensioni.
    • Le funzionalità sono equivalenti nelle due versioni una volta rilasciate le RTM dei prodotti e per alcuni la versione in italiano fa sentire più a casa, anche se poi il codide lo scriviamo ovviamente in C#, VB.NET, F#…

    Comunque sia buon Visual Studio 2010.

  • Pietro Brambati Blog

    SharePoint and Office 2010 links

    • 0 Comments

    Guides

    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

    Trainings:

    SharePoint 2010 Training Kit

    http://channel9.msdn.com/learn/courses/SharePoint2010Developer/

    Office 2010 Training kit:

    http://channel9.msdn.com/learn/courses/Office2010

    VHD

    SharePoint 2010 and Office 2010 evaluation VHD

    http://www.microsoft.com/downloads/details.aspx?FamilyID=751fa0d1-356c-4002-9c60-d539896c66ce&displaylang=en

  • Pietro Brambati Blog

    Lancio di Visual Studio 2010 e .NET Farmework 4 in HD

    • 1 Comments

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

    image

    Sotto trovate i link dei video che sono ( e alcuni saranno presto) disponibili sul portale di BEIT:

    [Links Updated]

  • Pietro Brambati Blog

    IE9 Platform Preview 2

    • 2 Comments

    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:

    • performance
    • HTML 5, CSS 3 e Standard

    Performance

    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:

    image 

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

    image

    HTML 5, CSS 3 e Standard

    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.

    image

    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.

    Altri test

    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.

    Installazione

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

    image

Page 1 of 1 (5 items)