Discussion about Design, Technologies and User eXperience : Silverlight

Anteprime Silverlight 4 @ pdc09

Roberto Cavallini — Thu, 19 Nov 2009 23:22:00 GMT

Proprio poche ore fa, @ pdc'09 abbiamo avuto le prime anticipazioni sulle nuove funzionalità che saranno incluse nella nuova versione del plug-in attualmente in Beta! La keynote del secondo giorno dell'evento è stata praticamente "monopolizzata" da questo...(read more)

Expresssion Blend & SketchFlow @ Community Tour con Expressys.net e Visual Basic tips&tricks

Roberto Cavallini — Wed, 11 Nov 2009 17:50:00 GMT

Ormai ci siamo...mancano un paio di giorni alla tappa milanese del Community Tour che quest'anno vedrà per la prima volta coinvolta attivamente anche Expressys.net con una sessione dedicata alla realizzazione di prototipi interattivi attraverso Expression...(read more)

Disponibile un nuovo percorso formativo su Expression Studio 3 in italiano

Roberto Cavallini — Tue, 22 Sep 2009 16:01:00 GMT

Volete scoprire tutti i segreti sui tool della famiglia Expression Studio 3: novità funzionali, esempi, tutorial e molto altro...
Come vi avevo anticipato prima delle vacanze estive, sono da pochi giorni disponibili i primi 7 webcast che illustrano le principali novità funzionali disponibili in Expression Studio 3 e Silverlight 3.

Potete accedere al percorso formativo completo dalla seguente pagina:
http://tinyurl.com/expression-studio-3

Per semplicità, vi riporto anche i riferimenti ad ogni singolo video tutorial:

- Expression Studio 3: "Overview & proposal scenarios" (16' min.)

- Expression Blend 3 SketchFlow: "Dal prototipo al progetto reale" (24' min.)

- Expression Blend 3: "Sample Data & oltre…" (12' min.)

- Expression Blend 3: "Behavior - building block of interacivity" (29' min.)

- SuperPreview: ottimizzazione nella visualizzazione di un sito Web su più browser (27' min.)

- Expression Encoder 3: novità encoding e ottimizzazione dei video (24' min.)

- Deep Zoom Composer: overview sulle nuove funzionalità (50' min.)

Questa serie di webcast, vogliono essere i primi di una serie che andrò a realizzare nelle prossime settimane. Se avete suggerimenti su particolari funzionalità/esempi su cui volete avere approfondimenti o dettagli, vi invito ancora una volta a segnalarmi direttamente l'argomento al mio indirizzo di posta elettronica: roberto.cavallini@microsoft.com

Vi ricordo infine che è da qualche giorno online, la nuova versione del portale dedicato ai prodotti Expression Studio in italiano.

Personalizzare una ScrollBar attraverso gli "styles" in Silverlight

Roberto Cavallini — Mon, 07 Sep 2009 14:02:00 GMT

Continuiamo con la carrellata sulla personalizzazione dei controlli in Silverlight 3 attraverso l’impiego degli “Styles” e dei “ControlTemplate”.

ScrollBar:
Anche in questo caso, partiamo da alcuni semplici elementi di grafica creati in precedenza attraverso Illustrator ed importati in Blend 3. L’asset grafico importato definisce lo stile “Normal” della ScroolBar, mentre nell’immagine qui sotto ho voluto riportare come ho ipotizzato il comportamento della ScrollBar nei vari stati d’impiego.

In pratica, come negli esempi illustrati in precedenza, il primo step è quello di convertire gli asset grafici in “controllo”. Anche in questo caso, l’abbiamo ormai visto più volte, selezioniamo il contenitore Grid “verticalscrollbar” e trasformiamo il tutto in controllo definendo lo “Styles” ed il “ControlTemplate” facendo semplicemente “Tools > Make Into Control > ScrollBar”.
Vi ricordo che nella maschera “Make into Control” è fondamentale che definite la tipologia di controllo che volete creare nel nostro esempio “ScrollBar”. Per facilitare questa operazione vi consiglio di utilizzare l’utile motore di ricerca che vi permette di filtrare direttamente sulla tipologia di controllo.

A questo punto vi troverete nella root del ControlTemplate che avete appena creato, nel pannello Object Tree, dove anche in questo caso la grid principale avrà il nome “verticalscrollbar”. Sempre all’interno del template, selezioniamo la grid principale “verticalscrollbar” e dal menù “tool” selezioniamo “Make Into Part of ScrollBar > VerticalRoot”. “verticalscrollbar” verrà quindi rinominata in “VerticalRoot”.

Suddividiamo la grid nelle 5 righe necessarie per la definizione della ScrollBar. Nel nostro esempio specifico stiamo parlando di “5 righe” in quanto si tratta di una ScrollBar Vertical, se si trattasse di Horizontal, in questo caso si trattava di suddividere in 5 colonne. Vediamo illustrato il dettaglio nella figura qui sotto.

Se avete suddiviso correttamente la Grid, gli elementi grafici vi dovranno risultare in questo modo: “Track” in RowSpan “5”, “smalldecrease” in Row ”0”, thumb in Row “2”, e smallincrease in Row “4”.
La VerticalSmallDecrease non è ancora nel template, ma abbiamo l’asset grafico per questa parte che è l’oggetto “smalldecrease”. Bisognerà quindi trasformare questo oggetto attraverso il comando “Make Into Part” in Make Into Part. Selezioniamo quindi “smalldecrease” e dal menu tool trasformiamo “Tools > Make Into Part of ScrollBar > VerticalSmallDecrease > OK”.

Nel nostro esempio non abbiamo bisogno del “ContentPresenter” quindi possiamo cancellarlo. Selezioniamo “smalldecrease” e impostiamo la width e la height a “7” nel pannello delle proprietà.
Modifichiamo le dimensioni della grid a “7” ed il colore di sfondo “background” trasparente.
Interagendo con il comando “Scope up”, torniamo nel template principale “ScrollBarStyle1”, selezioniamo “VerticalSmallDecrease” e resettiamo Width, Height e Margin.
A questo punto dobbiamo definire gli “States” per il comportamento di “MouseOver” e “Pressed”, entriamo quindi nel template “RepeatButtonStyle1” e all’asset “smalldecrease”, modifichiamo il colore di riempimento Fill nei vari “states” rispettivamente come segue: “MouseOver” “Fill=#FFCCCCCC” e “Pressed” – smalldecrease “Fill= FFE5E5E5”. Per rendere i cambi di stati ancora più piacevoli è possibile definire una transitino “0,2” tra i vari “states” appena definiti. Del tipo “Normal -> MouseOver” 0,2 sec.

Ritorniamo quindi interagendo sul bottone “Scope up” nel template principale e ripetiamo le stesse operazioni anche per il bottone “smallincrease”.Selezioniamo quindi “thumb” sull’”Object Tree” nel control template principale e trasformiamo in VerticalThum come segue, “Tools > Make Into Part of ScrollBar > VerticalThumb > Ok”.
A questo punto bisognerà associare una MinHeight, ritorniamo quindi sul control template principale, selezioniamo “VerticalThumb”, applichiamo dei margin Left:5, Right:5, Top:0, Bottom:0; resettiamo la Height e associamo un MinHeight to 7.

Definiamo quindi gli “states” ed il comportamento attraverso il Visual States Manager, entriamo nel template di Thumb e associamo gli states di “MouseOver”, “Pressed” e la Transition in “0,2 sec”.
In conclusione, torniamo sulla Root principale del ControlTemplate “ScrollBarStyle1”, attiviamo il pannello “Parts” di Blend, e con selezionato la grid VerticalRoot nel ObjectTree, inseriamo “VerticalLargeDecrease”, nelle proprietà impostate Row=”1” e Opacity=”0”. Stessa operazione anche per il “VerticalLargeIncrease” con la differenza che impostate Row=”3”.

Abbiamo praticamente concluso l’esempio, l’unica cosa che ci rimane da fare prima di lanciare il build dell’applicazione e testare il tutto e quella di impostare le dimensioni delle nostre righe in questo modo: Auto, Auto, Auto, Star e Auto.

A questo link, trovate disponibile al download il codice sorgente del progetto in Blend 3.

Definire lo Style ed il Control Template per un "Button" in Silverlight 3

Roberto Cavallini — Fri, 04 Sep 2009 19:17:00 GMT

Come dimostrato nello scorso articolo per lo “Slider”, vediamo insieme la personalizzazione di un altro semplice controllo il “button”. Uno degli elementi fondamentali che caratterizzerà le nostre applicazioni.
Per semplificare ulteriormente la cosa, il buttone creato è veramente elementare e scarno. A mio avviso è importante capirne la logica e come in tutte le cose, una volta capite le basi, le cose più complesse vengono da se.

Anche in questo caso, presupponiamo di avere come base alcuni semplici elementi grafici che caratterizzeranno il nostro bottone, il tutto contenuti all’interno di una “Grid”.

In questo caso, questi elementi grafici rappresenteranno lo stato “Normal” del nostro button, attualmente sono semplici elementi grafici ed anche in questo caso, per prima cosa bisognerà convertirli in controllo “button”. Attiviamo e selezioniamo la “Grid” contenitore, tasto destro del mouse, “Make into control…” e trasformiamo in “Button”. Una soluzione alternativa poteva essere quella di partire dal Button standard disponibile all’interno dell’Asset Library di Blend 3 e da li editarlo come “Edit a copy…” del bottone di base.
Facendo questa operazione andremo a definire lo “Styles” che conterrà a sua volta il “ControlTemplate” con gli elementi grafici del button al suo interno e i vari “states” che potranno essere gestiti all’interno del “Visual State Manager”. Evidenziato nell’immagine qui sotto, il codice XAML che definisce il “ControlTemplate” all’interno dello Style del “Button”.

Come potete notare dal ObjectTree, il “TextBlock” non è più contenuto nel “ControlTemplate”, ma è stato sotituito da un nuovo elemento “ContentPresenter”, in cui se andate a vedere le sue proprietà a come “Content=OK” ed eredita le stesse proprietà del TextBlock.

A questo punto, per replicare gli “States” che sono stati definiti e trovate raffigurati nella prima immagine, accedete al “Visual State Manager” posizionatevi sul Rectangle e modificate il colore di background con un grigio più chiaro interagendo dal pannello proprietà.
Per replicare lo stesso colore di sfondo [background], anche allo States di “Pressed”, Blend 3 introduce una nuova funzionalità che vi permette di copiare rapidamente le proprietà da uno stato all’altro.
Banalmente, con MouseOver ancora attivo, tasto destro del mouse e selezionate “Copy State To > Pressed”. Il comando è applicabile anche dal menù “Tools”.

A questo punto spostiamoci sullo States Pressed per spostare leggermente il testo, selezioniamo l’elemento “ContentPresenter” e modifichiamo la proprietà “RenderTransform.Translate.X and .Y a “1”.
Procediamo con lo stato “Disabled”, selezioniamo il rettangolo e togliamoli lo sfonfo “Fill” rendendolo trasparente e modifichiamo le proprietà dello Stroke a grigio chiaro.

Per rendere il più reale possibile gli effetti di transizione da uno stato all’altro, vi ricordo che è possibile gestire le transizioni dal VisualStateManager, banalmente posizioniamoci su “Normal”, clicchiamo sul button per aggiungere e definire una nuova “Transition” e selezioniamo “Normal > MouseOver”.

Impostiamo la duration a “0,2s”. In questo modo abbiamo applicato un effetto di transizione, attualmente tutti gli altri passaggi da uno stato all’altro avvengono istantaneamente ma come potete intuire allo stesso modo avrei potuto definire le diverse transizioni.

Se notate in particolare la grafica del “button” sulla prima immagine, si è ipotizzato di far apparire una cornice azzurra quando il bottone si trova nello stato “Focused”. Il rettangolo non è attualmente presente begli elementi grafici di base contenuti nel nostro “button” nello “states” Normal. Bisognerà quindi procedere e crearlo al suo interno. Creare un nuovo oggetto all’interno di uno stato viene definito “drawing into state’” ciò sta a significare che l’oggetto sarà visibile solo nello stato in cui è definito. Questa funzionalità può essere molto utile anche per altri controlli.
Selezioniamo quindi “Focused”, inseriamo un nuovo rettangolo (leggermente più piccolo) facendo doppio click sullo strumento rettangolo. A questo punto vogliamo modificare le dimensioni ed il riempimento del nuovo rettangolo ma in questo caso vogliamo effettuarle sullo “States Base”. Non possiamo attivare lo stato “Base” in quanto sullo stato “base” il rettangolo non è presente, a questo punto disattiviamo quindi la registrazione premendo o da tastiera [CTRL + R] o interagendo sull’icona riquadrata in rosso nell’immagine seguente. Modifichiamo quindi le proprietà di “Fill”, “Margin” e “Stroke” e applichiamo i margini arrotondati.

Se volete creare il button leggermente più dinamico, potete inserire un’animazione “steady-state animation” nello stato “Focused”. Selezionate lo stato “Focused”, e cliccate sull’icona per attivare e gestire un’animazione all’interno dello stato (riquadro rosso).

A lato del Object Tree, vi apparirà per esteso la maschera di gestione delle “timeline” ed in questo modo potrete definire la vostra animazione con eventuali effetti di “easing in” e “easing out” da applicare ai “keyframe” che costituiscono l’animazione.

Come personalizzare un controllo in Silverlight 3 attraverso gli "styles" ed i "control template"

Roberto Cavallini — Fri, 04 Sep 2009 13:44:00 GMT

Come ho già più volte avuto modo di sottolineare, a mio avviso, una delle potenzialità di XAML sia in WPF sia per applicazioni Silverlight è la possibilità di andare a creare degli elementi/controlli dell'interfaccia grafica personalizzandone il comportamento e l'interazione attraverso gli "stili e i template". Molto simili ai CSS disponibili nell'HTML, ma per certi versi molto più potenti, permettono di definire l'aspetto grafico e il comportamento dei controlli che caratterizzano l'interfaccia dell'applicazione. Come nei CSS, una volta definito gli stili che possono essere interni allo XAML dell'interfaccia o gestiti esternamente attraverso uno XAML esterno - "resource dictionaries" (funzionalità già disponibile in WPF e recentemente introdotto nella nuova versione di Silverlight) è possibile applicare gli stili ai controlli dell'interfaccia. Banalizzando molto la cosa, a tutti i "button" dell'applicazione è possibile associare lo stesso stile in modo che l'applicazione abbia un aspetto grafico omogeneo, gestendo il tutto con dei "resource dictionaries" esterni, è possibile cambiare l'aspetto e l'interazione dell'applicazione facendo caricare dei "resource dictionaries" diversi.

Per definire e modificare gli stili, il modo più semplice ed immediato è quello di utilizzare Expression Blend che permette in modo rapido ed efficace di creare, modificare e gestire gli stili direttamente in "design mode". Le modalità di operare possono essere sostanzialmente due:

- partire da un controllo di base disponibile nell'Asset Library di Blend (button, check box, slider, etc,) duplicare il "Control Template" banalmente facendo tasto destro del mouse sopra il controllo sull'area di lavoro "Edit a Copy" ed operando in questo modo è possibile definire un nuovo stile che è possibile poi riassociare a tutti i controlli della stessa tipologia all'interno della pagina. Chiaramente all'interno dello stile è possibile poi definire la grafica e il comportamento (attraverso l'uso degli "State" nel "Visual State Manager");

- una volta creati gli elementi grafici che caratterizzeranno il controllo, trasformare il tutto in "controllo" attraverso il comando "Make Into Control..." ed in questo caso definire la tipologia del controllo attraverso lo stile. Per attivare il comando "Make Into Control..." è possibile procedere o facendo direttamente ancora una volta tasto destro e selezionando dal menù a tendina o dal menu "Tools". (Questa nuova funzionalità è disponibilie all'interno della nuova versione di Expression Blend 3 che anche sotto questo punto di vista introduce una serie di novità molto interessanti).

Come ho già detto, il concetto di stili e template sono una dei concetti base di XAML sia in WPF sia in Silverlight e sono già disponibili dalle versioni precedenti; con la nuova versione di Expression Blend 3 è migliorata notevolmente la gestione e definizione degli stili e dei template dal punto di vista grafico rendendo la cosa molto più semplice ed intuitiva.

Vediamo quindi insieme come è possibile definire uno stile per un semplice controllo quale potrebbe essere uno "Slider" partendo dagli elementi grafici in un'applicazione Silverlight 3.
Lo step zero della nostra demo, è quello di importare tutti gli elementi che caratterizzeranno il nostro controllo all'interno del progetto Silverlight in Blend. La grafica degli elementi è stata definita e disegnata in precedenza attraverso Illustrator. Sfruttando quindi una delle nuove funzionalità di Blend 3 è possibile importare e convertire tutti gli elementi grafici in XAML all'interno di Blend. Un paio di consigli, trattandosi di uno "Slider", concettualmente il controllo dovrebbe essere strutturato in due parti: un elemento "Thumb" con cui l'utente potrà interagire e un elemento "Track" su cui il "Thumb" dovrà scorrere. Chiaramente i due elementi potranno essere composti a loro volta da più elementi grafici ma il consiglio che vi do è quello di raggruppare e strutturare i "sottoinsieme" grafici di ogni elemento il un controllo di layout contenitore che potrebbere essere banalmente una "Grid" e un "Canvas". Il secondo accorgimento è quello poi di raggruppare i due elementi in un altro contenitore esterno che contenga entrambi i due elementi "Thumb e Track", in questo caso specifico per lo "Slider" bisogna utilizzare un'altra "Grid" che come vedremo andra poi strutturata e suddivisa in righe e colonne. Premetto nel nostro esempio andremo a realizzare uno "Slider" ad orientamento "Horizontal" e che quindi andrà utilizzato in posizione orizzontale. Vi riporto nell'immagine qui sotto un esempio molto semplice di grafica, mentre a questo link trovate un esempio leggermente più complesso, che sarete poi in grado di downlodare, in cui per simulare il comportamento dello Slider è stato applicata una funzione di "Data Binding" con un effetto "Blur" a sua volta applicato ad un'immagine presente all'interno dell'interfaccia.

Next step, procediamo a convertire la "Grid" contenitore in "controllo", come vi ho già anticipato attraverso il comando "Make Into Control...>Slider" ed in questo modo andremo a definire lo Stile. Per l'esempio possiamo tranquillamente definirlo nel "documento" e non come "resource dictionaries" - vedi opzioni in basso sulla maschera di definizione dello stile.

Procediamo quindi e suddividiamo la "Grid" in 3 Colonne come raffigurato nell'immagine qui sotto, idealmente la suddivisione dovrebbe essere in coincidenza con l'elemento "Thumb". Un'altra cosa da fare attenzione, in questo istante ci troviamo all'interno del "Control Template" del controllo che è definito all'interno dello "Stile". Nel "object tree" dell'applicazione dovreste avere indicato il nome dello stile che avete appena definito.

Se avete operato in modo corretto, l'elemento "Track" dovrebbe trovarsi in comune sulle 3 colonne e nelle proprietà avere quindi un "ColumnSpan=3", mentre il Thumb dovrebbe essere posizionato nella "Column=1": A questo punto, sempre all'interno dello stile bisogna procedere e convertire la Grid che contiene i due elementi "Track e Thumb" in "HorizontalTemplate". Operiamo in questo modo, sul VieeTree, attivate e selezionate la "Grid", fate tasto destro del mouse sopra la "Grid" e selezionate semplicemente "Make Into Part of Slider > HorizontalTemplate".

A questo punto selezionate "Thumb" e con lo stesso criterio di sopra applicate "Make Into Part of Slider > HorizontalThumb", in questo modo state definendo lo stile ed il control template da applicare all'elemento "Thumb", temporaneamente usciamo da questo stile interagendo con il comando "Scope up" sul Object Tree dell'applicazione e facciamo il "reset" dei margini dal pannello proprietà.

Selezioniamo quindi "HorizontalTemplate" nel object tree, dal pannello "Parts", novità di Blend 3 se non vi appare di default potete attivarlo interagendo all'interno del menù Windows, fate doppio click su "HorizontalTrackLargeChangeDecreaseRepeatButton" ed impostate l'opacity a "0" sul pannello delle proprietà. Riselezionate "HorizontalTemplate" e fate la stessa operazione anche per "HorizontalTrackLargeChangeIncreaseRepeatButton" impostando l'opacity a "0". Abbiamo praticamente concluso, modifichiamo a questo punto le dimensioni delle 3 colonne della Grid di "HorizontalTemplate" in "Auto, Auto e Star".

Lanciamo quindi la Build dell'applicazione, facendo "F5" da tastiera ed il tutto verrà caricato all'interno della finestra browser di "test". Dietro le quinte Blend 3, compila anche il progetto creando il file "XAP" che conterrà le DLL e lo XAML del progetto e la pagina HTML che vi permette di testare l'applicazione.

Nell'esempio completo che trovate disponibile a questo link, è stato inserito anche un "data binding" sull'effetto "blur" applicato all'immagine impiegata nell'esempio. Se siete interessati, nel prossimo post, descriverò come applicare questa funzionalità di "data binding" attraverso Blend 3.

SketchFlow: behavior per la definizione e gestione di funzionalità di "Conditional Navigation" nei prototipi

Roberto Cavallini — Wed, 02 Sep 2009 19:17:00 GMT

Al rientro dalle vacanze e, credo anche voi come me, ormai a pieni ritmi con gli impegni di lavoro...Vi segnalo questi interessanti behavior che vi permettono di definire delle navigazioni condizionali all'interno di un'applicazione SketchFlow in Silverlight. Mi spiego meglio, partiamo dal presupposto che il vostro prototipo di applicazione debba prevedere che a seconda di una specifica interazione dell'utente- banalmente preventiviamo come esempio l'attivazione di un check box - il comportamento di un bottone all'interno dell'applicazione debba variare.

Semplificando ulteriormente la cosa, il comportamento del bottone "A" permetterà di navigare di deafult su una schermata chiamatola per ipotesi "Screen 2", mentre se l'utente interagisce con l'applicazione attivndo un check box a questo punto il comportamento del bottone varierà e l'utente potrà accedere in un'altra schermata "Screen 3". E' molto più semplice descriverla con un esempio che raccontarla.

Ho pubblicato l'anteprima dell'applicazione online che risulta fruibile attraverso uno SketchFlow Player direttamente da questo "link"

Ma vediamo velocemente come è possibile definire e gestire i behavior e questa funzionalità direttamente all'interno di Blend 3. Per prima cosa, una volta definito il progetto Silverlight SketchFlow è necessario importare i due behavior che permettono di pilotare tale funzionalità che come potrete intuire non fanno parte degli asset disponibili di default offerti da Blend. Procediamo quindi all'interno della maschera di gestione "Projects" e semplicemente facendo "tasto destro" selezioniamo l'opzione "Add Existing Item". Vi verrà lanciata la classica finestra di "File System" e selezioniamo quindi i due behavior che dovreste aver appena downlodato dai link qui sotto, lanciate quindi una build del progetto per creare le DLL (un semplice Ctrl+Shift+B da da tastiera) e a questo punto non vi resta altro che agganciare i behavior agli elementi che costituiranno l'interfaccia.

Ammetto, lo sto dando per scontato, ma come potrete intuire, prima di tutto è necessario creare le 3 schermate diverse che costituiscono il nostro semplice prototipo interagendo direttamente sul pannello "SketchFlow Map". Durante la sessione che ho tenuto lo scorso giugno a REMIX'09 dedicata a SketchFlow e Blend 3, ho spiegato in dettaglio alcune potenzialità offerte da SketchFlow, vi invito quindi a vedere la registrazione della sessione disponibile a questo link.

Inseriti i semplici controlli che costituiscono l'interfaccia sullo "Screen 1": un bottone, un check box e alcune label testuali, a questo punto non resta che agganciare i behabior hai controlli per gestirne l'interazione. Come potete vedere nell'immagine qui sotto che rappresenta il "view tree" della schermata "Screen 1", i behavior necessari in questo semplice esempio sono #2 e nello specifico: "SetNavigationTarget" applicato a due controlli (UserControl Principale e al Chech Box)e "ConditionalNavigation" in questo caso applicato al "button" inserito nell'applicazione.
In dettaglio, il behavior "SetNavigationTarget" applicato allo "UserControl" contenitore avrà dichiarato nelle "properties" "EventName:Loaded" e come TargetScreen "Screen 2" mentre l'altro "SetNavigationTarget" sarà applicato al "check box" con sulle properties EventName:"checked" e TargetScreen:"Screen 3". Mentre al "button" sarà applicato il behavior "ConditionalNavigation" che permette di gestire lo "switch" a seconda se l'utente interagisce e attiva il "check box".

Vi riporto, qui sotto, i link al downlod dell'esempio sviluppato in Blend 3 (vi ricordo che si tratta di una funzionalità specifica per un progetto SketchFlow) ed il link ai singoli "behaviors" necessari per sviluppare questo esempio messi a disposizione da un mio collega di Corp - Christian Schormann. Vi segnalo inoltre che sul suo blog trovate anche la documentazione tecnica su come Christiann ha implementato questi behavior.

"Expression Blend Sample" disponibili nella Community Expression

Roberto Cavallini — Wed, 26 Aug 2009 17:29:00 GMT

Buon rientro a tutti!
Spero che anche voi abbiate avuto modo di riposarvi e ricaricare un po' le pile...pronti per le nuove "avventure" autunnali ;)
A poche ore dal rientro in ufficio, devo dire che queste vacanze hanno portato una serie di interessanti novità che credo valga la pena riassumervi brevemente.

Per prima cosa vi segnalo che sulla Community ufficiale dei prodotti Expression sono stati resi disponibili i progetti ed il codice sorgente degli esempi di Blend.
Direttamente da questo link, potrete accedere alla Gallery della community e procedere con il download degli esempi.
Attualmente non sono ancora disponibili i primi esempi che erano stati distribuiti in pacchetto con la prima versione di "Expression Interactive Designer", vi invito quindi a visitare periodicamente la gallery in modo da trovare i vari aggiornamenti.

La gran parte di questi esempi, hanno una caratteristica comune, sono state realizzati dal mio collega Celso Gomes; tra l'altro autore del portale Nibbles Tutorial. Proprio all'interno di questo portale potete trovare degli utili tutorial, che descrivono "step by step", come sono stati realizzati alcuni di questi esempi.
Una buona palestra per prendere dimestichezza con Blend e per riempire, nel caso, questi ultimi caldi giorni di meritate vacanze.

Sempre in questi giorni, vi segnalo che è stata rilasciata su MSDN la documentazione in italiano su Silverlight 3. Il taglio di questi articoli è abbastanza tecnico, ma credo possa sempre valerne la pena darne una lettura. La raccolta degli articoli è anche disponibile al download al seguente link.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Infine, vi segnalo un altro interessante progetto che è stato presentato ad inizio di agosto: "Mess with Silverlight", si tratta di un blog in cui è stata coinvolta un'agenzia creativa di Chicago "Mess Marketing" abitualmente autrice di progetti in ambiente MAC in Flash e tecnologia "competitive" a cui è stato chiesto di raccontare le loro esperienze nell'adottare e nello sviluppare progetti in Silverlight attraverso Expression Studio 3. Day by day troverete descritte e raccolte le esperienze sui progetti dal team creativo coinvolto.

Come avrete avuto più volte modo di apprendere, una delle potenzialità offerte da Expression Studio 3 è la capacità di lavorare in piena interoperabilità con gli strumenti della famiglia Adobe (Photoshop ed Illustrator) in modo da ottimizzare e ridurre drasticamente le tempistiche di realizzazione di un progetto.

Nelle prossime settimane, pubblicherò una serie di webcast - registrati durante la pausa estiva ;) - che descriveranno ed illustreranno tali potenzialità.
Stay tuned e buon lavoro ancora a tutti!

Deep Zoom Compser Update "bug fixed"

Roberto Cavallini — Fri, 31 Jul 2009 18:48:00 GMT

Vi segnalo un importante aggiornamento, è stata rilasciata una nuova versione di Deep Zoom Composer in cui sono stati risolti una serie di problemi in merito alla "path" delle immagini generate in fase di esportazione.
Come sempre, vi consiglio di installare le precedenti versioni ed installare l'aggiornamento. Si potevano riscontrare alcuni problemi nel caso impiegaste i custom templates disponibili aal'interno del tool, mentre il tutto funzionava correttamente esportando con il template di "Default".
Per riassumere il tutto, se date un occhio al file XML - "dzc_output.xml" potreste notare questa piccola incongruenza.

Per maggiori dettagli in merito vi rimando all'articolo sul blog di Expression Team a questo link.

Deep Zoom Composer: update!

Roberto Cavallini — Fri, 24 Jul 2009 10:43:00 GMT

QUICK NEWS:
Vi segnalo che è disponibile al download la versione 1.0 di Deep Zoom Composer. Trovate un post che riassume tutte le nuove funzionalità disponibili su questa pagina e il download a questo link (verificate nella maschera di download di aver selezionato la versione 1.0.000.0). Vi rimando inoltre ad un mio precedente post dove sono raccolti un po' di esempi in merito.

Expression Studio 3: now is live!

Roberto Cavallini — Wed, 22 Jul 2009 19:59:00 GMT

Cosa state aspettando!

A pochi giorni dal rilascio ufficiale della nuova versione di Silverlight 3 è ora disponibile al download la nuova versione di Expression Studio 3.

Tante le novità correlate ad ogni singolo prodotto, Web 3 e SuperPreview, Blend 3 e SketchFlow, Encoder 3 e il supporto per l'encoding video erogabili attraverso Smooth Streaming, nell'ottica di offrire un prodotto sempre più completo e che si integri perfettamente nel workflow di lavoro di design e progettazione dell'interfaccia utente di applicazioni Silverlight, WPF e portali Web in ASP.NET, PHP ed X/HTML conformi agli ultimi standard di mercato.

Vi invito ad accedere alla pagina di download per scaricare la nuova versione di Expression Studio 3.

Nei prossimi giorni vi segnalerò una serie di materiali in merito.
Stay tuned!

Una serie di video che presentano le nuove funzionalità di Silverlight 3

Roberto Cavallini — Thu, 16 Jul 2009 12:32:00 GMT

Vi segnalo questa interessante raccolta video dove vengono presentate le nuove potenzialità di Silverlight 3.
Inoltre da poche ore è visibile all'interno del portale "See the Light", dedicato al lancio ufficiale di Silverlight 3, il video "The Visual Kitchen" che raccoglie una serie di demo e case histories presentati la scorsa settimana durante l'evento di lancio. Buona visione!

Deep Zoom Composer: un po' di risorse utili per sperimentarne le nuove funzionalità

Roberto Cavallini — Thu, 16 Jul 2009 12:04:00 GMT

Come già accennato in un mio precedente post, la nuova versione di Deep Zoom Composer supporta una serie di interessanti funzionalità che vi permettono di creare in pochi semplici step le gallery Deep Zoom da inserire all'interno di un'applicazione Silverlight.

In merito a queste nuove funzionalità, vi segnalo una serie di articoli che affrontano in dettaglio come poter impiegare queste nuove funzionalità:

Creating a menu in Deep Zoom Composer

SlideShow Support in Deep Zoom Composer

Adding link in Deep Zoom Composer

Vi ricordo inoltre che l'ultima versione di Deep Zoom Composer è disponibile al download a questo link.

Silverlight 3 ed Expression Blend 3 SketchFlow: una serie di risorse utili per iniziare a sperimentare.

Roberto Cavallini — Wed, 15 Jul 2009 13:53:00 GMT

Mea culpa! J Il taglio dei miei ultimi post sono stati decisamente monopolizzati dagli importanti annunci che hanno scandito questi ultimi giorni, le novità correlate a Silverlight 3, Expression Studio 3 e Blend 3 sicuramente meritano le dovute attenzioni.
Credo sia però fondamentale cercare di sperimentare e provare nel minor tempo possibile le nuove funzionalità disponibili in Silverlight 3 ed Expression Blend 3. Vi anticipo che sto lavorando sulla redazione di una serie di mini video in pillole dove cercherò di darvi una completa overview sulle nuove funzionalità disponibili con le nuove versioni dei prodotti.
Nel frattempo, l’idea è quella di segnalarvi una serie di riferimenti e link utili che vi potranno dare un aiuto nell’iniziare a sperimentare lo sviluppo di applicazioni Silverlight 3 attraverso Expression Blend 3 Sketch Flow. (Le risorse riportate di seguito, sono tutte in lingua inglese.)

Expression Community
In parallelo all’uscita di Silverlight 3 e Blend 3 è stata anche lanciata ufficialmente la nuova Community ufficiale dei prodotti Expression. All’interno potete trovare una serie di materiali e white paper dedicati ai singoli prodotti.
Nello specifico in concomitanza con il lancio di Silverlight 3, sono usciti una serie di video introduttivi su Blend 3 ed Expression Web 3. Per accedere all’area dedicata alla formazione della community potete usare il seguente link.

All’interno della Community trovate uno spazio dedicato alla Gallery, dove sono raccolti una serie di materiali condivisi dalla communityutenti Expression: Web Template, Behavior, Themes, etc.

Nibbles Tutorials
Grandi novità anche all’interno di Nibbles Tutorial, è stata inserita una nuova sezione dedicata a degli esercizi “step by step”, attualmente sono disponibili due esercitazioni, una dedicata allo sviluppo dell’applicazione “Zune 3D”, contenuta tra gli esempi di Expression Blend 3 e una sulla realizzazione di un prototipo attraverso le funzionalità di Blend & SketchFlow. All’interno dell’area dedicata agli esempi, trovate disponibili anche alcuni behavior downlodabili.

Electric Beach by Christian Schormann
Negli scorsi giorni il mio collega di Corp di Christian ha pubblicato un interessante ed esaustivo post su Blend e SketchFlow, vi invito a darle una lettura. Punto per punto vengono descritte le principali funzionalità per creare in pochi minuti il prototipo della vostra applicazione e dare forma velocemente alle vostre idee. Il blog di Christian merita sicuramente una visita quotidiana troverete raccolti utili esempi e tutorial.

Dynamic Prototyping with Expression Blend 3
Due miei colleghi UXe di Corporation, hanno appena pubblicato il primo capitolo dedicato alle teorie di SketchFlow attraverso Expression Blend 3. Il tutto è disponibile sul sito dedicato al libro, a questo link.

Expression Blend Sample – Raccolta di Behaviors/Effects
Sempre in merito ai behaviors e a come gestire l’interazione all’interno di Blend 3 senza scrivere codice, vi segnalo una raccolta di behaviors disponibile su Codeplex – il file per l’installazione si trova su questa pagina. Una volta installati sul vostro PC, dovete aggiungere le DLL al vostro progetto Silverlight 3 (C:\Program Files\Microsoft Expression\Blend 3 Samples\Silverlight) e fatto ciò compariranno all’interno dell’asset library nella categoria “behaviors” ed “effects”.

Nei prossimi giorni pubblicherò ulteriori riferimenti, stay tuned! J

Novità: Expression Studio 3, Blend 3 + SketchFlow e Deep Zoom Composer (RC July 2009)

Roberto Cavallini — Tue, 14 Jul 2009 16:14:00 GMT

A poche ore dal lancio ufficiale di Silverlight 3, tante le novità correlate agli strumenti per lo sviluppo.

Come potete intuire, in parallelo del lancio di Silverlight 3 è stata presentata anche la nuova versione dei prodotti Expression Studio 3: composta da Design 3, Encoder 3, Web 3 + SuperPreview e Blend 3 + SketchFlow.

Trovate tutte le informazioni inerenti ai prodotti sul nuovo portale “microsoft.com/expression” (a breve andrà online anche la versione con i contenuti italiani), attualmente risulta disponibile al download Expression Blend 3 + SketchFlow mentre gli altri prodotti saranno disponibili entro fine mese. Tralascio ulteriori informazioni di rito sui prodotti e vediamo insieme alcune delle novità funzionali correlate alla nuova versione di Blend 3 + SketchFlow.

In parte ne avevo già parlato nei precedenti post, a seguito di MIX’09, le nuove funzionalità abilitano Blend 3 allo sviluppo di progetti Web e RIA in Silverlight 3 e Windows Presentation Foundation.
Inoltre grosse novità per la realizzazione dei concept/prototipi di progetto dinamici attraverso SketchFlow.
Il workflow di progetto “dal concept” al “progetto reale”, risulta più efficace ed ottimizzato sia dal punto di vista del design di un’applicazione sia l’integrazione con i nostri colleghi sviluppatori per la gestione del code behind di un’applicazione complessa. Vi ricordo che un progetto Silverlight/WPF di Blend può essere tranquillamente aperto e gestito, senza bisogno di nessun step di conversione, in Visual Studio.

Riporto di seguito alcune tra le più importanti novità disponibili in Expression Blend 3 + SketchFlow.

Behaviors: attraverso i behaviors, già introdotti in precedenza, sarete in grado di applicare l’interazione agli elementi della vostra applicazione facendo una semplice operazione di “drag & drop”. I behaviors sono inoltre tranquillamente riutilizzabili, devi veri e propri “building block di codice”, in altri progetti, molto simili al concetto di librerie di codice per gestire l’interazione di un’applicazione.

Intellisense: Blend 3 supporta le funzionalità di "intellisense" sia per lo XAML, che definisce l'interfaccia grafica, sia sul codice di "code behind" di un'applicazione C# e/o VB.NET senza bisogno di impiegare Visual Studio.

Import da Adobe Photoshop ed Illustrator: in Blend 3 è disponibile la funzionalità di "import" dei files ".psd ed .ai", piena compatibilità con la gerarchia ed organizzazione dei layer e dei testi che costituiscono l'interfaccia grafica. Attraverso una specifica "maschera di gestione import dei files", sarete in grado di selezionare, organizzare e raggruppare i layer contenuti nel file - gli elementi vettoriali che costituiscono l'interfaccia verranno definiti attraverso lo XAML ed eventuali testi potranno essere mantenuti modificabili (font, dimensione, carattere, etc) e/o convertiti in vettoriale.

Sample Data: attraverso le funzionalità di "sample data", potrete usufruire di fonte dati di esempio in "design time", in modo da simulare e sperimentare il comportamento degli elementi della vostra interfaccia con la fruizione ed il caricamento dei dati. Tale funzionalità è molto utile per la definizione degli stili e del comportamento sui controlli che costituiscono l'interfaccia. Rimane inoltre disponibile anche l'import e la gestione di fonte dati di testing provenienti da file XML. Definita in "design time", l'aspetto e l'interazione sui dati di esempio è possibile in modalità "runtime" collegare e caricare delle fonte dati reali.

Supporto di TFS: Blend 3 supporta inoltre Visual Studio Team Foundation Server (TFS) - per la gestione delle funzionalità di source control "check in/check out" dei progetti in sviluppo.
Ho volontariamente citato solo alcune delle principali novità funzionali di Blend 3, trovate una raccolta di contenuti di approfondimento sui seguenti post dei vari team di prodotto:

Overview of New Features in Expression Blend 3 + SketchFlow: Part 1
Overview of New Features in Expression Blend 3 + SketchFlow: Part 2
Overview of New Features in Expression Blend 3 + SketchFlow: Part 3
SketchFlow Concepts: an overview

Deep Zoom Composer Update (release candidate)
Inoltre è stata presentata ufficialmente ieri, una nuova versione di Deep Zoom Composer (July 2009 - release candidate).
La trovate disponibile al download in questo link (vi ricordo, nel caso, di disinstallare le precedenti versioni prima di procedere con l’installazione). Oltre alle precedenti utili funzionalità, introdotte già nella versione precedente (trovate un post di dettaglio a questo link), in questa nuova versione è stata ripristinata una funzionalità che era già stata disponibile in una delle versioni precedenti e che era stata temporaneamente disattivata. Una volta creata la vostra composition, in fase di “export” della collection è possibile esportare sia le immagini sia il codice di progetto in modo da poterlo aprire direttamente attraverso Expression Blend 3.