Template designed by

cert-path70-484 – Essentials of developing Windows Store apps

Matteo Paganiinfo@qmatteoq.com - @qmatteoqhttp://www.qmatteoq.com

Template designed by

Software Engineer @ Funambol

Microsoft MVP – Windows Phone Development

Nokia Developer Champion

Autore dei libri «Sviluppare applicazioni per Windows Phone 8» e «Windows Phone 8 Development Succinctly»

Membro della community DotNetLombardia e fondatore di WPDev Fusion

chi sono

brought to you by

• Percorso di certificazione per lo sviluppo di Windows Store app

• E’ suddiviso in tre differenti certificazioni

• Gli esami sono stati recentemente aggiornati a Visual Studio 2013 e Windows 8.1

• Esistono due varianti:• Sviluppo con HTML e Javascript

• Sviluppo con XAML e C#

MSCD: Windows Store app

• Esame 480: Programming in HTML5 with JavaScript and CSS3

• Esame 481: Essentials of Developing Windows Store Apps Using HTML5 and JavaScript

• Esame 482: Advanced Windows Store App Development Using HTML5 and JavaScript

MCSD: Windows Store Apps Using HTML5

• Esame 483: Programming in C#

• Esame 484: Essentials of Developing Windows Store Apps Using C#• Questo è l’esame che tratteremo oggi :)

• Esame 485: Advanced Windows Store App Development Using C#

MCSD: Windows Store Apps Using C#

• Design Windows Store apps (20-25%)

• Develop Windows Store apps (15-20%)

• Create the user interface (20-25%)

• Program the user interaction (20-25%)

• Manage security and data (20-25%)

http://www.microsoft.com/learning/en-us/exam-70-484.aspx

agenda

Let’

s g

o

Design Window Store

apps

• Una Windows Store app deve sfruttare il più possibile le caratteristiche della piattaforma:• Contratti

• Interazione tramite touch screen

• Uso di tile e notifiche

• Uso delle caratteristiche hardware dei device (sensori di movimento, geo localizzazione, ecc.)

• Attenzione all’accessibilità: screen reading, temi ad alto contrasto, tool UI Accessibility Checker per la validazione

Design the UI layout and the structure

Le caratteristiche chiave della UI nelle Windows Store app:

• Il contenuto deve essere al centro

• Interazione diretta con il contenuto

• Fast and fluid: touch first, feedback visuali, animazioni non invasive

• Supporto a diverse risoluzioni e form factor

• Sfruttare le tile per rendere l’app interattiva

Design the UI layout and the structure

Riutilizzare gli elementi visuali:

• Template

• Stili

• Risorse

• UserControl

Design the UI layout and the structure

• Separare la logica dall’interfaccia grafica:• Presentation layer: è la UI, implementata con XAML e controlli

visivi

• Business layer: è la logica che elabora i dati

• Data layer: sono i repository che contengono i dati base dell’applicazione (database, servizio REST, ecc.)

• Sfruttare i componenti WinMD: concettualmente simili alle librerie DLL, ma utilizzabili anche da Windows Store app sviluppate in C++ o HTML / JS.

Design for separation of concerns

• MVVM è il pattern più diffuso per definire l’architettura di applicazioni XAML / C#• View: l’interfaccia grafica

• ViewModel: logica di presentazione dei dati

• Model: business logic e dati

• Concetti chiave: binding, data context, INotifyPropertyChanged e ObservableCollection<T>

• Sono i meccanismi con i quali il ViewModel interagisce con la View

Apply the MVVM pattern to your app design

• PLM = Process Lifetime Management

Design and implement PLM

E’ importante imparare a gestire:

• OnSuspending: l’utente passa ad un’altra applicazione o attività

• OnResuming: l’applicazione viene riaperta e i dati devono essere aggiornati

• OnLaunching: l’applicazione viene aperta dalla tile

• OnActivating: l’applicazione viene aperta da un contratto

Design and implement PLM

• La pubblicazione richiede il superamento di un processo di certificazione che verifica la presenza di errori, il rispetto dei requisiti di sicurezza e le performance dell’app

• Le applicazioni vengono firmate digitalmente con un certificato di test, che viene poi sostituito in automatico durante la certificazione con uno reale

• L’applicazione viene descritta dal file di manifest, presente nella root di tutti i progetti

Plan for an app deployment

domanda

You have been asked to implement the UI of a Windows Store app. The application requirements make it essential for the app to be fast and fluid, and provide visual feedback to users for their actions at the same time. The designer of the user interface has recommended using animations. How should you implement animations while ensuring app requirements are met?

A. Convince the designer that animations will make the UI complex and unintuitive.

B. Use animations in the controls provided by the platform and in the animation library.

C. Implement your own animations and add them to the UI.

D. Build custom controls and add animations in them. Use these custom controls to build the UI.

Domanda

Let’

s g

o

Develop Windows

Store apps

• La classe ContactPicker consente di accedere ai contatti memorizzati nel dispositivo

• Non è una API per accesso programmatico: l’utente deve manualmente scegliere i contatti da importare

• Due metodi:• PickSingleContactAsync() per recuperare un singolo contatto

• PickMultipleContactsAsync() per recuperare più contatti

• Viene restituito un oggetto di tipo ContactInformation

• Le applicazioni possono implementare il contratto Contract Picker, per registrarsi come provider di contatti aggiuntivi all’hub People

Access and display contacts

• La charm bar consente agli utenti di interagire con l’applicazione in maniera standard:• Search per attivare il contratto di ricerca

• Share per attivare il contratto di condivisione

• Devices per attivare il contratto di stampa e di riproduzione wireless di contenuti (PlayTo)

• Settings per accedere alle impostazioni dell’applicazione

Design for charms and contracts

• Si dichiara l’apposito contratto nel file di manifest

• L’applicazione viene aperta tramite il metodo OnSearchActivated presente nella classe App

• Si riceve in ingresso il termine cercato

• Si porta l’utente alla pagina dedicata, con i risultati già filtrati per la parola chiave

• E’ possibile lanciare altre applicazioni tramite i metodi LaunchFileAsync() e LaunchUriAsync()

Implement search

• La classe DataTransferManager espone l’evento DataRequested, che viene scatenato nel momento in cui l’utente vuole condividere qualcosa

• E’ possibile condividere: testi, link, immagini, file, html, ecc.

• L’applicazione target viene attivata tramite il metodo OnShareTargetActivated.

• Deve predisporre una UI ad hoc per la condivisione dei dati ricevuti

Implement share

• Si registrano una serie di SettingsCommand, che corrispondono alle varie opzioni che compaiono nella charm bar

• Si crea un controllo di tipo SettingsFlyout, che fondamentalmente è una pagina larga 346 px

• Si mostra il flyout alla selezione, da parte dell’utente, di uno dei SettingsCommand

Manage app settings and preferences

• Il Windows Runtime espone diverse classi per memorizzare, in maniera semplice e veloce, i settings• LocalSettings: settings locali, accessibili solamente dall’app

• RoamingSettings: settings salvati sul cloud, sincronizzati tra tutti i dispositivi dell’utente

• La best practise prevede che i setting vengano sempre salvati sfruttando i RoamingSettings

Manage app settings and preferences

domanda

You are developing a Windows Store game and want to save user settings when the app is suspended. Which data storage strategy should you use?

A. Save the settings in local storage and retrieve when needed.

B. Save in the local registry and read from it when needed.

C. Save in the roaming app data store and read from it when needed.

D. Save in the local directory and read from the file when needed.

Domanda

Let’

s g

o

Create the user

interface

• Windows 8.1 ha introdotto il concetto di layout fluido: non più tre dimensioni fisse (full, fill e snapped), ma un layout variabile

• La larghezza minima dell’applicazione è 500px (320px se si fa opt in per la modalità snapped)

• Il VisualStateManager vi permette di gestire agevolmente i cambiamenti del layout, specificando una serie di stati che contengono solamente le differenze rispetto al layout standard

Create layout aware apps to handle view states

• Il controllo Grid permette di realizzare layout di tipo tabellare e consente di definire righe e colonne, all’interno delle quali posizionare gli altri controlli

• Il suo punto di forza è il supporto a righe e colonne con dimensioni dinamiche per realizzare layout fluidi

• Il controllo ScrollViewer permette di inserire contenuti che occupano più spazio della dimensione dello schermo

• Per la visualizzazione di testi abbiamo a disposizione i controlli TextBlock e RichTextBlock

Implement layout controls

• L’app bar rappresenta un punto di accesso veloce alle funzioni dell’applicazione

• Due posizioni possibili:• Superiore: usata per la navigazione all’interno delle sezioni

dell’app

• Inferiore: offre i comandi per interagire con il contenuto corrente

• Due tipi di controlli:• AppBar: per mostrare controlli XAML a piacimento

• CommandBar: per mostrare comandi sotto forma di pulsanti

Design and implement the app bar

• Il controllo GridView consente di mostrati dati tramite una rappresentazione a griglia con scrolling orizzontale

• Il controllo ListView consente di mostrare dati tramite una rappresentazione a lista con scrolling verticale

• Il controllo FlipView consente all’utente di navigare attraverso una collezione di dati, dando particolare visibilità a quello corrente

Design and implement data presentation

• Tutti questi controlli sono basati sulle proprietà ItemsSource (la collezione di dati da mostrare) e ItemTemplate (la rappresentazione visuale del singolo elemento)

• Supportano il concetto di DataTemplateSelector: gli elementi di una collezione possono essere rappresentati con un template differente, in base ad una determinata proprietà

Design and implement data presentation

• E’ possibile riutilizzare lo stesso aspetto visuale per più controlli grazie agli stili

• Gli stili consento inoltre di ridefinire la proprietà Template di un controllo, che ne definisce l’aspetto

• Lo XAML offre i brush, che consentono di definire il riempimento di un controllo, anche in maniera creativa (ad esempio, gradienti)

Create and manage XAML styles and templates

• Stili, template e risorse possono essere dichiarati:• Inline: applicati solo al controllo stesso e ai figli

• A livello di pagina

• A livello di applicazione

• Possono essere memorizzati in un file di risorse esterno, chiamato ResourceDictionary

Create and manage XAML styles and templates

domanda

You are developing a Windows Store text editor app. You have implemented a number of commands using buttons; however, during a usability review, you have been asked to remove some of the commands from the surface and move them into the app bar. Which functionality should you move to the app bar? (Choose all that apply.)

A. Searching within text

B. Cutting, copying, and pasting

C. Increasing and decreasing the font size

D. Creating, editing, and deleting a new file

E. Sending a file as an email attachment

Domanda

Let’

s g

o

Program the user

interaction

• Le tile consentono di mostrare informazioni all’utente senza costringerlo ad aprire l’applicazione ogni volta

• Le tile possono essere aggiornate:• A runtime dall’applicazione

• Schedulate ad una determinata data e ora

• Periodicamente tramite un servizio web

• Con una notifica push inviata tramite il WNS (Windows Notification Service)

• Le tile sono definite tramite XML, con la possibilità di scegliere tra un vasto catalogo di template

Create and manage tiles

• L’aggiornamento delle tile viene gestito dalla classe TileUpdateManager

• Le Windows Store app supportano la possibilità di creare e aggiornare tile secondarie

• Le tile supportano i badge, per mostrare all’utente un numero o un simbolo

Create and manage tiles

• Le notifiche toast servono per avvisare l’utente del verificarsi di un evento legato all’applicazione

• Anche le notifiche toast possono essere create a runtime, schedulate o inviate tramite una notifica push.

• Anche le notifiche toast sono rappresentate in XML, ma il catalogo dei template disponibili è più ridotto

• Vengono inviate tramite la classe ToastUpdateManager

Notify users by using toast

• Le Windows Store app possono essere controllate con diversi sistemi di input: tastiera e mouse, touch screen, penna

• La classe Pointer consente di gestire le interazioni a basso livello dell’utente con l’interfaccia

• Tramite i manipulation event, siamo in grado di intercettare le interazioni avanzate dell’utente (drag, hold, ecc.)

Manage input devices

• Le Windows Store app usano una navigazione di tipo gerarchico, dalla pagina più esterna a quella più interna

• La navigazione è possibile tramite la classe Frame, che espone i metodi più comuni (come Navigate e GoBack)

• E’ possibile gestire il ciclo di vita della pagina tramite i metodi di navigazione, come OnNavigatedTo e OnNavigatedFrom

Design and implement navigation in an app

• Il Semantic Zoom consente all’utente di vedere, a colpo d’occhio, le categorie in cui sono raggruppati i nostri dati

• E’ supportato in maniera nativa da controlli come ListView e GridView.

• Si gestiscono gli stati ZoomedInView (visualizzazione normale) e ZoomedOutView (visualizzazione raggruppata)

Design and implement navigation in an app

domanda

You have developed a weather app for the Windows Store. You are working on an enhancement that will allow users to create shortcuts into your app for specific cities. What are the benefits of using secondary tiles in your app? (Choose all that apply.)

A. Secondary tiles can be updated with the latest information for the city the user is interested in.

B. Secondary tiles make it easier for the user to launch your app and browse to the page they are interested in.

C. After you have created a secondary tile, you can delete the application’s tile, thereby freeing up space on the Start screen.

D. For the same Microsoft account, if your app is installed on a new device, the secondary tiles will be available on it. This helps the user to start using your app without re-creating the secondary tiles.

E. Secondary tiles can be resized to any size the user prefers thereby saving screen area

Let’

s g

o

Manage security and

data

Diverse opportunità per memorizzare i dati della propria applicazione:

• Storage locale, isolato e riservato per l’applicazione

• Storage roaming, limitato ma sincronizzato tra diversi device

• Storage temporaneo, per dati di caching

• Servizi esterni (esempio, OneDrive, Azure)

Choose an appropriate data access strategy

• Accesso in sola lettura alla cartella dove è installata l’app

• Accesso alle librerie di sistema:• Documents

• Pictures

• Music

• Videos

• Removable devices

• FileOpenPicker: le applicazioni possono importare file presenti all’interno del sistema o esposti da altre applicazioni

Choose an appropriate data access strategy

• La classe HttpClient permette di effettuare operazioni di rete e interagire con servizi web

• Espone un metodo per ogni comando del protocollo HTTP: è adatta per interagire con i servizi REST

• Supporti ai servizi SOAP / WCF tramite la generazione di una classe proxy

• WebSocket per la comunicazione bidirezionale

Retrieve data remotely

• Il binding è il meccanismo base dello XAML che consente di creare un canale bidirezionale tra una sorgente (i dati) e una destinazione (un controllo)

• Grazie alle DependencyProperty, la modifica della sorgente provoca un aggiornamento della destinazione per visualizzare il cambiamento

• Il binding può essere monodirezionale o bidirezionale

Implement data binding

• Tutti i controlli per gestire collezioni derivano da ItemsControls, che consente di definire l’aspetto visuale e di collegare i dati tramite il binding

• Tramite i converter (classi che implementano IValueConverter) è possibile modificare, a runtime, il valore restituito da un’espressione di binding

Implement data binding

• La classe PasswordVault consente di memorizzare, in maniera sicura, le credenziali e di sincronizzare attraverso i dispositivi dell’utente

• La classe CredentialPicker consente di offrire un’interfaccia omogena tra le app per la richiesta di credenziali

Manage Windows Authentication

• WebAuthenticationBroker è una classe che vi permette di gestire con semplicità l’autenticazione tramite oAuth richiesta da molti servizi (Facebook, Twitter, Google, ecc.)

• La classe PasswordVault vista in precedenza può essere utilizzata anche per memorizzare credenziali di servizi remoti in maniera sicura e sincronizzarle tra più dispositivi

Manage web authentication

domanda

You are developing a Windows Store app that enables users to download their photos from social networking sites; manipulate them; and share them with friends through email, Twitter, and Facebook. Your app shows a list of photos that the user viewed recently as well as their modified versions. Which file storage options should you use? (Choose all that apply.)

A. Use the roaming application data store to save the processed files so that they are available on all devices.

B. Use the temporary application data store to save a copy of the original and processed files.

C. Use Windows Azure to store processed files and access these files on other devices owned by the user.

D. Use the roaming application data store to store the list of files accessed recently.

E. Use your application’s install location to store all the files.

Domanda

Grazie a tutti per la partecipazione

Riceverete il link per il download a slide e demo via email nei prossimi giorni

Per contattarmi

info@qmatteoq.com

@qmatteoq

Grazie