24

Jan

Push notifications in Mango: uno sguardo più approfondito sulle tile multiple

Nel post precedente abbiamo visto brevemente tutte le novità introdotte in Mango per quanto riguarda le notifiche push. Tra queste, una delle più interessanti e che merita di essere approfondita è il supporto alla tile multiple.

Come creare una o più tile secondarie

Il processo di creazione di più tile passa dall’applicazione vera e propria: grazie ai metodi esposti dalla classe ShellTile, saremo in grado di creare più tile e di pinnarle in automatico in home page. Vediamo come con un semplice esempio di codice:

StandardTileData tile1 = new StandardTileData
      {
      Title = "Tile 1",
      BackContent = "I'm the first tile",
      BackgroundImage = new Uri("/Images/Background1.png", UriKind.Relative)
      };

      ShellTile.Create(new Uri("/MainPage.xaml?ID=1", UriKind.Relative), tile1);

Come abbiamo fatto nel post precedente per aggiornare la tile principale dell’applicazione, creiamo un oggetto di tipo StandardTileData e valorizziamo le diverse proprietà inserendo le informazioni che vogliamo visualizzare (nell’esempio, il titolo, l’immagine e il contenuto mostrato sul retro).

Dopodichè usiamo il metodo Create esposto dalla classe statica ShellTile, passando due informazioni:

  • il NavigationUri, ovvero il deep link della nostra tile: questa informazione identifica univocamente la nostra tile.
  • I dati della nostra tile, ovvero l’oggetto di tipo StandardTileData che abbiamo creato.

Se eseguiamo questo codice, noteremo subito una cosa molto importante: la creazione della tile causa l’uscita dalla nostra applicazione, così che l’utente possa vederla immediatamente in home.

Intercettare la tile selezionata

Capire quale tile è stata selezionata ed adattare la nostra applicazione di conseguenza è molto semplice, grazie ai deep link: nell’evento OnNavigatedTo ci basta sfruttare il NavigationContext per capire se ci sono dei parametri in query string, esattamente come faremmo in qualsiasi altra applicazione che fa uso di questo meccanismo per passare informazioni da una pagina all’altra. Nell’esempio, mostriamo un semplice messaggio a video con l’ID della tile scelta:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
      {
      if (NavigationContext.QueryString.ContainsKey("ID"))
      {
      MessageBox.Show(string.Format("Tile Id: {0}", NavigationContext.QueryString["ID"]));
      }
      }

C’è però una cosa importantissima da tenere a mente: uno scenario che prima di Mango non si poteva verificare, dato che non esisteva il concetto di deep link. Nel momento in cui aprite la vostra applicazione usando un deep link che punta ad una pagina che non è la home (solitamente, la MainPage.xaml), quella sarà la prima pagina della vostra applicazione presente nello stack delle pagine. Pensate ad una classica situazione Master – Detail, dove la home funge da master (un elenco di notizie, ad esempio) con una pagina di dettaglio (il testo della notizia). Se create un deep link che punta direttamente alla pagina di dettaglio (con magari un parametro in query string per identificare la notizia), quella per il sistema operativo sarà la prima pagina della vostra applicazione. Questo significa che, premendo il pulsante Back, non verrete portati alla pagina master (l’elenco delle notizie) ma direttamente alla home del telefono.

Anche se il comportamento potrà sembrarvi a prima vista anomalo, se ci pensate bene è già così per tutte quelle applicazioni native che vi permettono di pinnare in home page le informazioni: i contatti dell’hub People, le mappe di Maps, gli album di Zune e così via.

Come gestire però il caso in cui vogliamo che l’utente sia in grado, dalla pagina di dettaglio, di tornare alla home page? Una possibile soluzione prevede:

  • L’inserimento di un pulsante nella pagina di dettaglio che porti all’home page. Tale pulsante sarà visibile solo se l’utente proviene da un deep link.
  • Una volta atterrati nella home page, la rimozione dallo stack della pagina di dettaglio. Se non lo facessimo, infatti, creeremmo un riferimento circolare e l’utente, premendo il pulsante Back, invece di uscire dall’applicazione come si aspetterebbe verrebbe riportato alla pagina di dettaglio.

Inseriamo il pulsante di dettaglio

Ecco come appare la pagina di dettaglio della nostra applicazione:


      
      

Useremo il TextBlock di nome txtDetail per mostrare l’id della tile selezionata e il pulsante btnGoBack per tornare alla home page. Tale pulsante sarà visibile solo se proveniamo da un deep link: vediamo come.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
      {
      if (!NavigationService.CanGoBack)
      btnGoBack.Visibility = Visibility.Visible;
      else
      btnGoBack.Visibility = Visibility.Collapsed;

      if (NavigationContext.QueryString.ContainsKey("ID"))
      {
      txtDetail.Text = string.Format("Detail id: {0}", NavigationContext.QueryString["ID"]);
      }
      }

CanGoBack è una proprietà del NavigationService che è presente anche nelle API della attuale versione di Windows Phone e ci dice se, nello stack, ci sono altre pagine appartenenti alla nostra applicazione. Se proveniamo da un deep link, questa proprietà sarà valorizzata a false: ecco perciò che in questo caso mostriamo il pulsante.

La seconda parte di codice ci serve per gestire il deep link: se proveniamo da un link che contiene un parametro in query string di nome ID, lo mostriamo a video.

Ma cosa deve fare il pulsante Go Back? Semplicemente portare l’utente alla pagina principale:

private void btnGoBack_Click(object sender, RoutedEventArgs e)
      {
      NavigationService.Navigate(new Uri("/MainPage.xaml?clear=true", UriKind.Relative));
      }

Possiamo notare il parametro clear in query string: ci servirà per capire che siamo nel caso in cui l’utente è arrivato alla pagina di dettaglio tramite un deep link.

Rimuoviamo la pagina di dettaglio dallo stack

Al contrario del codice mostrato in precedenza, questa volta dobbiamo agire sulla pagina MainPage.xaml: una volta che l’utente ha premuto il pulsante Go Back nella pagina di dettaglio ed è tornato alla home page, dobbiamo rimuoverla dallo stack per mantenere coerente la navigazione all’interno della nostra applicazione. Ecco come fare:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
      {
      if (NavigationContext.QueryString.ContainsKey("clear"))
      {
      NavigationService.RemoveBackEntry();
      }
      }

In questo caso invece sfruttiamo una delle novità di Mango, ovvero il metodo RemoveBackEntry esposto dal NavigationService, che non fa altro che rimuovere dallo stack delle pagine quella più recente. In questo modo ci assicuriamo che, quando l’utente avrà premuto il pulsante Back del device, uscirà dalla nostra applicazione e non tornerà alla pagina di dettaglio.

Ora capite perchè abbiamo usato il parametro clear all’interno della query string: andremo a rimuovere la pagina più recente dallo stack solo se ci troviamo nella situazione in cui è stato usato un deep link.

Nel prossimo post

Nel prossimo e ultimo post dedicato alle notifiche push vedremo come rimuovere una tile da codice e come aggiornarla usando un background agent.

by Il blog di Matteo Pagani on 1/24/2012
Post archive