+ Navigazione fra pagine Nicolò Sordoni. + Window, Frame, Page In tutte le applicazioni Windows, sia le Store Apps, che le Phone Apps, esistono i seguenti.

Presentazione sul tema: "+ Navigazione fra pagine Nicolò Sordoni. + Window, Frame, Page In tutte le applicazioni Windows, sia le Store Apps, che le Phone Apps, esistono i seguenti."— Transcript della presentazione:

1 + Navigazione fra pagine Nicolò Sordoni

2 + Window, Frame, Page In tutte le applicazioni Windows, sia le Store Apps, che le Phone Apps, esistono i seguenti concetti: Window (finestra), che non è altro che una porzione dello schermo. In Windows Phone, un’app ha una sola finestra, mentre le App Windows Store possono averne molteplici. Frame: Ogni Window può contenere un solo Frame, la cui dimensione è identica a quella della finestra. Il Frame viene creato all’avvio dell’applicazione, mostra la pagina corrente e mantiene in memoria lo stack contenente la cronologia di navigazione

3 + Window, Frame, Page Page: La pagina è il concetto chiave delle nostre applicazioni, ed è quel componente che corrisponde ad una singola schermata della nostra app. Al suo interno possiamo definire l’interfaccia, la logica di interazione utente, ecc..

4 + Application Life Cycle In figura è mostrato il ciclo di vita delle applicazioni Windows Phone. Ogni app in esecuzione si trova in uno stato denominato Running; in qualsiasi momento si può verificare un evento (pressione del tasto Home, selezione di una notifica) che porta l’app ad essere sospesa. L’app passa innanzitutto nello stato Deactivated in cui il sistema esegue una serie di operazioni per ridurre l’impatto su memoria, batteria e CPU.

5 + Application Life Cycle A questo punto l’app viene portata in uno stato denominato Dormant, in cui sono stati interrotti tutti i thread in background, sono state annullate le notifiche dei sensori ed è stato effettuato il dispose delle risorse non ritenute necessarie per un’applicazione non attiva. Lo stato dell’applicazione (Stack delle pagine, pagina attuale e dati contenuti al suo interno) viene però mantenuto, pertanto, riportandola in foreground, l’app rimarrà identica a quando l’abbiamo sospesa. Per tornare in background l’app passerà tramite lo stato Activated, in cui saranno ripristinate alcune delle funzionalità che erano state interrotte (es: sensori), sebbene non tutte. Ad esempio, i thread in background, dovranno essere riavviati da codice.

6 + Application Life Cycle Sebbene il sistema gestisca per noi la persistenza dello stato della nostra app, non possiamo sempre far affidamento al 100% su tale meccanismo, dato che, come si nota dall’immagine che rappresenta il ciclo di vita, l’app può passare dallo stato Dormant a TombStoned. In tal caso lo stato della nostra app andrebbe perso, pertanto è buona norma memorizzare in maniera persistente lo stato, ogni volta che la nostra app viene posta in background.

7 + Gestire la navigazione Come accennato, il componente responsabile di gestire la navigazione fra le varie pagine è il Frame, pertanto, per poter spostarci in una pagina abbiamo bisogno di utilizzare tale classe. All’interno di ogni pagina, abbiamo accesso diretto al frame che la contiene, grazie alla proprietà denominata, come possiamo intuire, Frame. Tale classe espone due overload del metodo Navigate, che ci permettono di navigare verso una differente pagina dell’app. La presenza di due differenti overload del metodo è dovuta all’eventuale necessità di passare un parametro alla nuova Page che andremo a visualizzare.

8 + Frame.Navigate Frame.Navigate(Type sourcePageType); Frame.Navigate(Type sourcePageType, object parameter); Come possiamo notare, il metodo Navigate richiede come primo parametro un Type, cioè un tipo. Tale tipo deve essere quello della nuova pagina che vogliamo mostrare, pertanto la sintassi è la seguente: L’esempio precedente permette di navigare ad una nuova pagina, denominata SecondPage, a cui viene passato un oggetto come parametro. Tale oggetto può essere di qualsiasi tipo (Stringa, Intero,una qualunque classe definita dall’utente, ecc...).

9 + metodo OnNavigateTo Ovviamente, dopo aver passato un parametro alla pagina che viene lanciata, è necessario che quest’ultima sia in grado di recuperarlo per poterlo utilizzare. A tale scopo ogni pagina espone un apposito metodo di callback, cioè OnNavigateTo. Tale metodo viene invocato nel momento in cui viene effettuata una navigazione verso la pagina corrente, prima che sia mostrata a video. Come si nota dall’esempio, tale metodo accetta come parametro un’istanza della classe NavigationEventArgs, che permette di accedere ai parametri ottenuti in input tramite la property Parameter. Questo è il punto ideale in cui ripristinare lo stato della nostra pagina, in caso di chiusura improvvisa.

10 + metodo OnNavigatedFrom Oltre al metodo OnNavigatedTo, ne esiste un altro, speculare al primo, per gestire il caso in cui l’utente esca dalla pagina. Il parametro e ci permette di ottenere informazioni riguardo alla pagina alla quale stiamo per accedere. Tale metodo è il punto ideale in cui salvare lo stato e deallocare risorse non necessarie quando la pagina non è visualizzata, rimuovere eventuali Handler (come vedremo a breve), ecc..

11 + Tornare alla pagina precedente La classe Frame mantiene al suo interno la cronologia di navigazione, consentendo quindi in ogni momento di tornare alla pagina precedente. Il metodo da invocare è Frame.GoBack(). Dato che non sempre possiamo essere certi che esista una pagina precedente, è buona norma effettuare tale verifica, sfruttando la proprietà booleana Frame.CanGoBack.

12 + Gestire la pressione del tasto back Una cosa a cui va prestata particolare attenzione, è l’utilizzo del tasto back. Il comportamento di default del sistema, nel momento in cui l’utente preme il tasto back, è quello di rimandarlo all’applicazione precedente. Pertanto la nostra app sarà posta in background per passare ad un’altra. Non sempre questo è il comportamento che desideriamo ottenere, dato che potremmo voler fare in modo che, premendo il tasto back, l’utente torni alla pagina precedente.

13 + Tasto Back: Override a livello di App Sovrascrivere la pressione del tasto back a livello di App, ci permette di far si che ogni volta che l’utente preme back, non sarà il sistema a gestirlo, ma il metodo che avremo appositamente predisposto. In tal modo possiamo far sì che il comportamento di default sia quello di ritornare alla pagina precedente, gestendo il tutto in un unico punto del codice, senza doverlo ripetere per ogni pagina. Per ottenere tale risultato, è necessario sovrascrivere il comportamente di default del sistema. Il punto per farlo è all’avvio, quindi all’interno del costruttore della classe App.

14 + Tasto Back: Override a livello di App Analizziamo il metodo che abbiamo definito per definire il nostro comportamento personalizzato. Innanzitutto utilizziamo la proprietà Window.Current.Content, per accedere innanzitutto alla finestra Corrente, che in WP è unica per ogni applicazione, e quindi al suo Content (cioè il Frame dell’app). Dopo aver verificato che tale frame esista, abbiamo gestito il ritorno alla Page precedente.

15 + Tasto Back: Override a livello di Page L’utilizzo del back a livello di singola pagina è necessario in quei casi in cui abbiamo molteplici azioni che possono essere annullate tramite il tasto back. Il caso classico è quello in cui la nostra pagine presenta all’utente una finestra pop-up. In questo caso, potremmo voler fornire all’utente la possibilità di chiuderla tramite la pressione del back. Il codice nella seguente slide mostra come gestire tale situazione. Nel momento in cui l’utente accede alla pagina, è necessario aggiungere all’evento BackPressed, un apposito Handler. E’ importante rimuovere tale Handler in uscita dalla pagina, per evitare di invocare molteplici volte lo stesso metodo (in caso di accesso multiplo alla pagina) e di invocare il metodo anche dopo che la pagina non sarà più visualizzata.

16 + Tasto Back: Override a livello di Page

17 + Page CacheMode Nel momento in cui l’utente abbandona una determinata pagina, il sistema ha 2 possibilità: mantenerla in cache, oppure terminarla. Tale scelta dipenderà dall’attributo NavigationCacheMode, che avremo settato in tale Page: NavigationCacheMode.Disabled : ogni volta che la pagina viene visualizzata, viene creata una nuova istanza da capo. NavigationCacheMode.Enabled : il sistema mantiene in cache la pagina, ma può essere scartata se la dimensione della cache per il Frame corrente supera una determinata dimensione (determinata dalla proprietà Frame.CacheSize). NavigationCacheMode.Required : la pagina viene sempre e comunque mantenuta in cache.

18 + Utilities: SuspensionManager e NavigationHelper Per aiutarci a preservare lo stato della nostra app, anche quando va in background, Microsoft ci mette a disposizione due classi di supporto: SuspensionManager : memorizza lo stato del nostro frame e ci permette di ripristinare lo stack delle pagine e di ritornare alla pagina corrente. NavigationHelper : ci permette di memorizzare informazioni riguardo alla pagina correntemente visualizzata, in modo da mantenere le informazioni anche se l’app viene terminata.

19 + Utilities: SuspensionManager e NavigationHelper Tali classi vengono aggiunte in automatico quando inseriamo, all’interno del progetto, una nuova pagina di tipo BasicPage : Solution > Add > New Item.. e, dalla finestra che appare, selezioniamo Basic Page. Verremo informati che il sistema sta per aggiungere in automatico alcune nuove classi. Accettiamo e vedremo che comparirà una nuova sezione all’interno della nostra app, denominata Common.

20 + SuspensionManager Il SuspensionManager, deve registrare al suo interno il Frame dell’applicazione corrente; il punto ideale per farlo è non appena è stato creato. Pertanto, per utilizzare il SuspensionManager, è sufficiente lavorare all’interno della classe App, dato che è in questo punto che vengono gestiti i principali eventi relativi al Frame. Il metodo onLaunched, viene invocato quando l’app viene lanciata per la prima volta. In questo metodo, che l’IDE ha già generato per noi con del codice all’interno, quello che l’app cerca di fare è recuperare il riferimento al Frame corrente; Se non riesce a recuperarlo, viene creata una nuova istanza. In questo punto andremo a registrare il Frame appena istanziato nel SuspensionManager e a cercare di ripristinare l’istanza precedente.

21 + SuspensionManager L’esempio precedente mostra come applicare quanto detto nella precedente slide, mentre quello che segue, rappresenta il codice per recuperare lo stato precedentemente salvato. Il metodo onSuspending è invocato quando l’app viene messa in background

22 + await e async Negli esempi precedenti è stato fatto uso di due parole chiave finora mai incontrate: await e async. Esse sono due nuove parole chiave, introdotte di recente da Microsoft, per gestire l’utilizzo di codice asincrono. async deve essere prefissa a tutte quelle chiamate che, dato che potrebbero richiedere molto tempo per essere eseguite, andrebbero lanciate in maniera asincrona. Usando la parola chiave async, viene invocato un metodo in maniera asincrona; nello stesso momento il metodo attualmente in esecuzione viene interrotto, ed il Thread ritorna disponibile per nuove operazioni; dato che solitamente si tratta del GUI Thread, in tal modo si impedisce che l’interfaccia rimanga bloccata. Non appena la chiamata asincrona sarà terminata, il controllo ritornerà al metodo precedente che completerà la sua esecuzione. async è una parola chiave che deve essere prefissa a tutti quei metodi che fanno uso di codice asincrono.

23 + NavigationHelper Come accennato, esiste un componente che ci supporta nel mantenere persistente lo stato di una singola pagina. Per farlo dobbiamo dichiarare a livello d’istanza una nuova proprietà di tipo NavigationHelper, che andremo ad inizializzare nel costruttore della pagina. Oltre a questo è necessario invocare due metodi di Utility all’interno dei callback OnNavigatedTo e OnNavigatedFrom

24 + NavigationHelper Questa classe offre due eventi, LoadState e SaveState, che vengono invocati rispettivamente quando la pagina viene caricata oppure chiusa. All’interno dei metodi associati a tali eventi, andremo a scrivere il codice che ci permetterà di preservare lo stato della pagina.

25 + Controlli specifici dell’ambiente Nicolò Sordoni

26 + L’ApplicationBar In Windows Phone si fa spesso uso della cosiddetta ApplicationBar, che non è altro che una barra, che viene visualizzata in basso, a fondo alla pagina, e permette un rapido accesso a determinate funzionalità dell’applicazione. I bottoni inseriti al suo interno sono divisi in due categorie: Primari, che possiedono un’icona che è sempre visualizzata, ed un testo, che viene mostrato solamente quando la barra viene espansa. Possono essere al massimo 4 Secondari, di default sono nascosti e diventano visibili all’espansione della barra. La barra di default mostra solamente le icone dei bottoni primari, ma è sempre presente un tasto che consente all’utente l’espansione della barra.

27 + L’ApplicationBar

28 + Per inserire una barra all’interno di una pagina, è necessario utilizzare la proprietà Page.BottomAppBar. I bottoni vanno definiti all’interno di un nodo innestato al suo interno, denominato CommandBar. Il nodo CommandBar prevede al suo interno una suddivisione in due categorie: CommandBar.PrimaryCommands e CommandBar.SecondaryCommands, per definire rispettivamente bottoni primari e secondari. All’interno di tali sezioni andremo ad inserire i bottoni veri e propri, utilizzando il controllo AppBarButton.

29 + AppBarButton Il controllo AppBarButton permette di definire un elemento che sarà mostrato all’interno dell’ApplicationBar. Le principali proprietà di tale controllo sono: Icon : Valida solamente nel caso di PrimaryCommand. Specifica quale icona sarà mostrata all’interno del cerchio per quel bottone. E’ possibile selezionarla fra un elenco di icone di default offerte da sistema, oppure utilizzare una propria icona personalizzata. Label : Specifica il testo che sarà associato al bottone e che sarà visualizzato in maniera differente a seconda di che tipo di bottone si tratti. Click : E’ un evento e permette di gestire il click sul bottone.

30 + AppBarButton

31 + Hub

32 + L’immagine alla slide precedente ci mostra un classico utilizzo di una pagina strutturata come Hub. La schermata è ovviamente più ampia della dimensione dello schermo di uno smartphone; questo perchè le varie sezioni (indicate come Panorama Panels), dovranno essere visualizzate una alla volta. L’utente potrà scorrerle semplicemente tramite uno swipe. La navigazione è circolare, quindi una volta arrivati all’ultima sezione, uno slide verso destra ci permetterà di tornare alla prima. La cosa che salta subito all’occhio in questo tipo di applicazione è l’immagine di sfondo. Questo tipo di applicazione presenta un’unica immagine come sfondo per tutte le sezioni, quindi scorrendo da un panel all’altro, scorrerà anche l’immagine. Spesso si fa uso di immagini circolari, in cui il margine destro coincide con quello sinistro, quindi non si ha mai un taglio netto, neanche quando si passa dall’ultimo Panel al primo. Notiamo come anche il titolo sia distribuito su più sezioni, per sottolineare la presenza di ulteriori informazioni.

33 + Hub Ognuna delle sezioni di questo pattern non è vincolata in alcun modo alle altre, ma è libera di mostrare qualsiasi tipo di informazione. Ovviamente è necessario che le varie viste abbiano comunque un target comune, altrimenti non avrebbero motivo di trovarsi nella stessa pagina. Questo tipo di pattern viene utilizzato molto per realizzare le schermate iniziali delle applicazioni, fungendo per certi versi da vetrina. In questo modo è possibile presentare all’utente le funzionalità principali e più interessanti in una maniera accattivante. Ciò che è importante tenere a mente è che questo pattern non è stato concepito come contenitore di dati, ma esclusivamente come punto di accesso a ulteriori funzionalità. E’ pertanto sconsigliato, sia dal punto di vista dell’esperienza utente, che delle performance, inserire troppe informazioni in un Hub. Microsoft suggerisce di non usare più di 5 sezioni.

34 + Pivot

35 + Il pivot, come il panorama, è suddiviso in più sezioni, che possono essere navigate tramite swipe. Anche in questo caso si ha circolarità di navigazione. Il pivot mostra una sezione alla volta, ma in alto possiamo notare la presenza dei titoli di molteplici sezioni (2 o 3). Questo per notificare la presenza di ulteriori viste oltre a quella corrente. Il titolo della sezione attualmente selezionata avrà una colorazione più marcata e sarà il primo della lista. La differenza principale con l’Hub, è la presenza di un legame relativamente forte fra le informazioni contenute nelle singole pagine. Questo pattern è solitamente utilizzato per mostrare la stessa tipologia di informazione, ma filtrata o mostrata in maniere differenti, oppure per mostrare informazioni diverse, ma comunque legate allo stesso soggetto.

36 + Pivot : implementazione Per inserire un Pivot all’interno della nostra applicazione, è sufficiente utilizzare il controllo denominato, ovviamente, Pivot. Al suo interno possiamo inserire le sezioni tramite il controllo PivotItem. Quest’ultimo possiede una proprietà Header, che imposteremo per definire il titolo della sezione, mentre per definire quale sarà il suo contenuto è sufficiente inserire al suo interno dei controlli XAML.

37 + Hub: implementazione L’utilizzo dell’Hub è lievemente più complicato rispetto al Pivot, dato che richiede un ulteriore passaggio. Dopo aver inserito il controllo Hub, è necessario introdurre al suo interno una serie di HubSection. All’interno di tali nodi non va inserito direttamente il layout della sezione, ma è necessario inteodurre un ulteriore nodo, denominato DataTemplate. All’interno di tale nodo inseriremo le specifiche per la visualizzazione. Per impostare l’immagine è necessario inserire un Brush all’interno della proprietà Background.