WP7

Visualizzare il traffico dati WiFi di WP7 con Fiddler

Martino Bordin — Wed, 07 Sep 2011 11:13:44 GMT

In questi giorni (o meglio, notti) sto aggiornando la mia app WorldCam per WP7 all’ultima versione dei tools (Mango). Con l’occasione ho riscritto e ottimizzato parte del programma, soprattutto per quanto riguarda il download delle immagini. Per testare le modifiche effettuate, ho pensato di utilizzare Fiddler per controllare il traffico dati.

Per fare ciò ho seguito questa semplice procedura:

Lanciare Fiddler ed abilitare le connessioni remote su Options-> Connections. Eventualmente modificare la porta sulla quale Fiddler si metterà in ascolto.
Sul device WP7, nelle impostazioni di rete, settare come Proxy l’indirizzo IP del PC sul quale è in esecuzione Fiddler e relativa la porta.
Navigate utlizzando il telefono e la connessione WiFi e vedrete il traffico dati su Fiddler:

Happy sniff!

P.S: Ovviamente è possibile fare la stessa cosa anche per IPhone:

Blendability con Moq e NBuilder

Martino Bordin — Tue, 09 Aug 2011 15:59:27 GMT

Che il vostro progetto sia sviluppato in WPF, Silverlight o Silverlight per WP7 un aspetto fondamentale (direi quasi un requisito non funzionale) da soddisfare è il supporto ai designer di Visual Studio/Blend, identificato con il termine “Blendability”.

Anche se può sembrare banale, in realtà la faccenda si complica man mano che i nostri ViewModel prendono forma e utilizziamo IoC.

In soldoni il Designer non è in grado di rappresentare graficamente una View collegata ad un ViewModel di questo tipo:

 public MainViewModel(IPersonService personService)
{
    People = new ObservableCollection<Person>(personService.GetAll());
 
    ShowPersonDetailCommand = new RelayCommand(PerformShowPersonDetail, CanShowPersonDetail);
}
 

Tra le soluzioni possibili troviamo:

utilizzare un ViewModelLocator che restituisce istanze diverse dei ViewModel se siamo a design-time o a run-time (es: link)
utilizzare ViewModel che si comportano in modo diverso se siamo a design-time o a run-time (es: link)
utilizzare file XAML in cui definire i dati fake (es: link)

Personalmente, anche se funzionanti, non mi piace nessuna delle soluzioni proposte in quanto:

vado ad inserire logica completamente estranea ai ViewModelLocator\ViewModel (punti 1, 2)
mi ritrovo a manutenere file XAML satelliti che andranno ad appesantire il refactoring (punto 3)

Da un po' di tempo a questa parte sto adottando la strategia che da il titolo a questo post: uso Moq e NBuilder.

Per chi non li conoscesse, sono 2 librerie che facilitano la scrittura di test automatici, essendo rispettivamente un framework di mocking e un tool per la generazione dinamica di oggetti.

Nonostante siano strumenti nati per altri scopi, ho deciso di provarli per ottenere ViewModel “blendabili”.

In pratica:

Vado a creare, possibilmente in un assembly a parte, un MainViewModelDesign che eredita dal MainViewModel visto in precedenza.

 public class MainViewModelDesign : MainViewModel
{
    public MainViewModelDesign()
        : base(GetMockedService())
    {
    }
}
 

Il Metodo GetMockedService mi ritorna un mock che implementa IPersonService e va a definire i metodi utilizzati dal ViewModel in questione. In questo caso ho instrumentato Moq in maniera tale che, quando viene invocato il metodo GetAll, mi restituisca, tramite la classe Builder di NBuilder, un elenco di Person.

 private static IPersonService GetMockedService()
{
    var mockedService = new Mock<IPersonService>();
    mockedService
        .Setup(s => s.GetAll())
        .Returns(Builder<Person>.CreateListOfSize(5).Build());
 
 
    return mockedService.Object;
}
 

Per collegare il nostro nuovo ViewModel useremo il Databinding e la proprietà d: DataContext, utilizzando la markup extension {d: DesignInstance} (maggiori info qui), passando il nome del ViewModel che vogliamo venga creato automaticamente dal designer (riga 12):

 <Window 
    x:Class="Blendability.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewModels="clr-namespace:Blendability.ViewModels.Design"
    Title="People" 
    Height="350" 
    Width="525"
    mc:Ignorable="d"
    d:DataContext="{d:DesignInstance viewModels:MainViewModelDesign, IsDesignTimeCreatable=True}" 
    DataContext="{Binding Source={StaticResource locator}, Path=MainViewModel}">
 

Ovviamente possiamo ancora impostare la “solita” proprietà DataContext che verrà effettivamente utilizzata a runtime (riga 13).

A questo punto se apro Visual Studio o Blend avrò pieno supporto del designer:

Riassumendo:

ho definito un ViewModel che eredita dal ViewModel reale, e si preoccupa solo di visualizzare i dati (e che andrò a mettere su un assembly a parte) ed eventuale logica di generazione dei dati fake (tra l’altro NBuilder è abbastanza versatile e posso definire regole del tipo “le prime 5 Person devono avere Name = “Nome123abc” e DateOfBirth = “01/02/2003”, le restanti Name = “blablabla")
se farò refactoring non dovrò cambiare file XAML se non la View vera e propria
ho il pieno supporto dei designer: editing di stili\template con preview instantanea, animazioni, property window, etc
funziona per progetti WPF\ SL e WP7!

Ho preparato un esempio un pò più articolato di quello illustrato che potete scaricare qui. Ovviamente tutto quello che vedrete aprendo il designer NON lo vedrete a runtime .

Cosa ne pensate? Come ottenete la blendability di solito nei vostri progetti?

SketchFlow Template per Windows Phone 7

Martino Bordin — Sat, 11 Jun 2011 13:02:44 GMT

E’ stato rilasciato il template di SketchFlow per Windows Phone 7.

In questo modo potrete facilmente creare mockup utilizzando pivot, panorama, datetime picker, map, application bar, behaviors per simulare la navigazione e molto altro…

Per iniziare a creare prototipi delle vostre app, il sito da visitare è http://wp7sketchflow.codeplex.com, dove troverete maggiori info e l’installer msi.

Attenzione: per usare il template è necessario avere installato Expression Blend 4 con SketchFlow e i Mango developer tools per Windows Phone.

Happy Sketching!

Workaround al caching del WebClient su WP7

Martino Bordin — Sat, 30 Apr 2011 20:38:42 GMT

In una mia applicazione utilizzo l’oggetto WebClient per effettuare chiamate REST ad un web service che mi restituisce un XML con il risultato.

Una particolarità è che, a parità di URL, l’XML risultante cambia (es: un metodo GetRandomProducts).

Fin qui niente di strano..tuttavia WebClient utilizza un meccanismo di cache interno in base all’indirizzo e non ci sono proprietà per disabilitare tale comportamento.

L’unica soluzione che ho trovato è passare in QueryString un parametro random (es: un GUID).

Mi sono quindi creato un extension method che qui riporto.

public static class WebClientExtensions
    {
        public static void DownloadStringAsync(this WebClient client, Uri uri, object userToken, bool ignoreCache)
        {
            if (ignoreCache)
            {
                Uri freshAddress;
 
                if (string.IsNullOrEmpty(uri.Query))
                {
                    freshAddress = new Uri(uri.AbsoluteUri + "?" + Guid.NewGuid());
                }
                else
                {
                    freshAddress = new Uri(uri.AbsoluteUri + "&" + Guid.NewGuid());
                }
 
                client.DownloadStringAsync(freshAddress, userToken);
            }
            else
            {
                client.DownloadStringAsync(uri, userToken);
            }
        }
    }

Usare WP7 Capability Tool in Visual Studio

Martino Bordin — Fri, 11 Feb 2011 16:24:17 GMT

Se sviluppate applicazioni per Window Phone 7 saprete che è necessario specificare nel file WMAppManifest.xml tutte le funzionalità del device che la nostra applicazione andrà ad utilizzare.

La validità di quanto indicato informerà l’utente prima del download, e verrà inoltre controllata durante il processo di pubblicazione sul Marketplace.

Per identificare velocemente quali funzionalità sono necessarie per il corretto funzionamento della nostra app è disponibile il CapabilityDetection, installato assieme all’SDK.

Per comodità mi sono creato quindi uno shortcut tra i tool di Visual Studio in questo modo:

Title: WP7 Capability Detection

Command: C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Tools\CapDetect\CapabilityDetection.exe

Arguments: Rules.xml $(BinDir)

Initial directory: C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Tools\CapDetect\

Use Output window: true

Ora, una volta compilata l’applicazione, posso lanciare il tool direttamente da Visual Studio, ed il risultato mi verrà mostrato nella console di output:

Usare il Commanding in Windows Phone 7

Martino Bordin — Tue, 25 Jan 2011 00:24:32 GMT

Se avete provato a sviluppare applicazioni Silverlight per Windows Phone 7 (derivante in gran parte su Silverlight 3), avrete notato che il controllo Button non ha una proprietà Command, utilizzata spessissimo se sviluppate le vostre applicazioni con l’ormai famoso pattern MVVM, e che consiglio di utilizzare per tutte le applicazioni “non banali” (leggi “non demo” ).

Fortunatamente, comunque, l’infrastruttura per gestire il Commanding è supportata e perfettamente funzionante. Infatti potete tranquillamente creare i vostri ViewModel esponendo proprietà di tipo ICommand. Come fare però ad agganciare i controlli della UI a queste proprietà?

Per questo proposito ci corre in aiuto il Behaviour EventToCommand creato dall’MVP Laurent Bugnion nel suo MVVM Light Toolkit (toolkit disponibile anche per WPF e Silverlight 4).

Questo behaviour permette di essere agganciato a qualsiasi evento di un oggetto, purché esso derivi da DependencyObject (la stragrande maggioranza dei controlli UI) e che chiamerà, allo scatenarsi dell’evento voluto, il Command specificato nello XAML tramite Binding.

In pratica, è possibile scrivere questo codice nell’editor XAML per eseguire il Comando TestCommand quando si clicca sul Button :

<Button Content="Click me">
    <Interactivity:Interaction.Triggers>
        <Interactivity:EventTrigger 
            EventName="Click">
            <Galasoft:EventToCommand Command="{Binding TestCommand}"/>
        </Interactivity:EventTrigger>
    </Interactivity:Interaction.Triggers>
</Button>

I namespace Interactivity e Galasoft, importati rispettivamente dagli assembly System.Windows.Interactivity e Galasoft.MvvmLight.Extras.WP7, sono cosi dichiarati:

xmlns:Interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
xmlns:Galasoft="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP7"

Naturalmente è possibile utilizzare il Behaviour anche per altri tipi di eventi e controlli, ed è inoltre possibile indicare un eventuale CommandParameter, l’argomento EventArgs dell’evento e molto altro.

Alla prossima.

Salvare immagini nella Media Library di Windows Phone 7

Martino Bordin — Mon, 24 Jan 2011 22:58:00 GMT

Sul blog di Daniel Egan, MVP nonché Microsoft Regional Director, c’è un interessante post che illustra come salvare un’immagine nella Media Library di Windows Phone 7.

La procedura illustrata è abbastanza chiara ed è commentata in ogni passaggio significativo, per cui non mi soffermerò su di essa. Nel caso abbiate un oggetto BitmapImage caricato con la vostra immagine (v. esempio) tutto funzionerà tranquillamente.

Tuttavia un oggetto BitmapImage può essere creato passando al costruttore un oggetto URI che identifica la risorsa, sia essa remota (caricata da web) o locale (espressa tramite Pack Uri). In questo caso, però, verrà sollevata un’eccezione di tipo NullReferenceException: Invalid pointer se l’immagine non è stata ancora scaricata completamente (l’operazione è asincrona) quando tentate di salvarla.

Per risolvere tale problema, è sufficiente:

inizializzare l’oggetto BitmapImage impostando CreateOptions = BitmapCreateOptions.None (il default è DelayCreation):

var bitmap = new BitmapImage
{
    CreateOptions = BitmapCreateOptions.None,
    UriSource = uriSource
};

In questo modo l’immagine verrà inizializzata immediatamente e non quando verrà visualizzata nella UI (quindi, nel nostro caso, mai).

agganciarsi all’evento ImageOpened per salvare l’immagine scaricata nella Media Library come visto nell’esempio di Daniel Egan:

bitmap.ImageOpened += (s, e) =>
                {
                    var image = (BitmapImage)s;
                    
                    // Save image to media library...
                };

Il gioco è fatto!

Alla prossima.

Programming Windows Phone 7

Martino Bordin — Mon, 01 Nov 2010 15:51:00 GMT

Volevo segnalarvi che, da qualche giorno, è disponibile GRATUITAMENTE un e-book inerente la programmazione per Windows Phone 7: “Programming Windows Phone 7”, di Charles Petzold.

E’ un bel “librone” con più di mille pagine che va a toccare sia lo sviluppo con Silverlight che quello con XNA.

Ecco il link: Programming Windows Phone 7

Credo proprio che ci darò un occhio!

Alla prossima