Creare l'app Rubrica per Windows Phone 8

In questa parte della guida ci dedichiamo alla creazione di un'app Windows Phone 8 che permetterà ai nostri utenti di gestire la propria rubrica di contatti, utilizzando o come si dice "consumando" il servizio che abbiamo creato nella lezione precedente.

Apriamo Visual Studio 2012 e creiamo un nuovo progetto Windows Phone 8. Per la nostra app realizzeremo una interfaccia grafica molto semplice: nella finestra principale dell'applicazione saranno presenti due campi di testo per l'immissione del nome e del numero di telefono di un nuovo contatto, un pulsante per salvare l'aggiunta del nuovo contatto e una lista con tutti i contatti finora creati.

Di seguito è possibile trovare il codice XAML della finestra principale della nostra app Rubrica:

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
	    <RowDefinition Height="Auto"/>
		<RowDefinition Height="*"/>
    </Grid.RowDefinitions>
	<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
	    <TextBlock Text="rubrica" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
	</StackPanel>
	<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="Auto" />
			<RowDefinition Height="*" />
        </Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
		    <ColumnDefinition Width="1*" />
		    <ColumnDefinition Width="1*" />
		</Grid.ColumnDefinitions>
		<TextBox Grid.Row="1" Grid.Column="0" Name="txtNuovoNome" />
		<TextBox Grid.Row="1" Grid.Column="1" Name="txtNuovoNumero" />
		<Button Grid.Row="2" Name="btnAggiungi" Grid.ColumnSpan="2">Aggiungi</Button>
		<phone:LongListSelector Grid.Row="3" Grid.ColumnSpan="2" Name="lstContatti">
		    <phone:LongListSelector.ItemTemplate>
		        <DataTemplate>
			        <StackPanel Orientation="Horizontal">
				        <TextBlock Text="{Binding Nome, Mode=TwoWay}" Margin="10,5" VerticalAlignment="Center"/>
					    <TextBlock Text="{Binding Numero, Mode=TwoWay}" Margin="10,5" VerticalAlignment="Center"/>
				    </StackPanel>
			    </DataTemplate>
		    </phone:LongListSelector.ItemTemplate>
		</phone:LongListSelector>
    </Grid>
</Grid>

Nello screenshot di seguito è possibile vedere l'organizzazione della nostra interfaccia grafica:

Possiamo quindi procedere ad aggiungere il codice di base per il funzionamento della nostra app.

Aggiungiamo prima di tutto al nostro progetto il riferimento alla libreria che si occuperà di gestire il collegamento al nostro Azure Mobile Service. Facciamo clic con il tasto destro sul progetto Windows Phone 8 nel Solution Explorer di Visual Studio 2012 e scegliamo "Aggiungi riferimento…". Cerchiamo la libreria di nome "Windows Azure Mobile Services Client" e aggiungiamola alle references, quindi confermiamo.

Nel codice della nostra MainPage andiamo ad aggiungere la reference a questa libreria, inserendo in cima l'istruzione di importazione:

using Microsoft.WindowsAzure.MobileServices;

Andiamo a questo punto a creare la classe che rappresenterà l'entità dati che la nostra app andrà a gestire, ovvero i Contatti della Rubrica. Creiamo una nuova classe all'interno del nostro progetto che chiameremo "Contatto", e aggiungiamo le proprietà Id, Nome e Numero:

public class Contatto
{
    public int Id { get; set; }
    [DataMember(Name = "nome")]
    public string Nome { get; set; }
    [DataMember(Name = "numero")]
    public string Numero { get; set; }
}

Gli attributi DataMember specificano il nome delle colonne all'interno del database su Windows Azure alle quali queste proprietà dovranno essere mappate. Per convenzione, la proprietà con il nome Id verrà utilizzata come chiave primaria. Questa convenzione può essere ovviamente modificata, ma per gli scopi della nostra applicazione va benissimo.

Passiamo quindi a creare l'infrastruttura di base di codice relativo alla pagina principale dell'applicazione. Procediamo preparando il codice che si occuperà di gestire gli eventi di aggiunta di un nuovo Contatto alla Rubrica e di visualizzazione di tutti i Contatti disponibili. Facciamo doppio click con il mouse sul tasto "Aggiungi" nell'editor dell'interfaccia grafica dell'app; Visual Studio si occuperà per noi di creare un handler dell'evento, nel quale andremo ad inserire questo stub di codice:

private void btnAggiungi_Click(object sender, RoutedEventArgs e)
{
    var contatto = new Contatto { Nome = txtNuovoNome.Text, Numero = txtNuovoNumero.Text };
    AggiungiContatto(contatto);
}

Allo stesso modo, all'evento OnNavigated della pagina dell'app andiamo ad aggiungere la chiamata al metodo che si occuperà di caricare tutti i Contatti disponibili:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    LoadContatti();
}

Procederemo a creare i metodi AggiungiContatto() e LoadContatti() subito dopo aver creato le strutture dati necessarie nel nostro Azure Mobile Service.