Universal App – Sviluppo di
App per Windows Store
Gianluca Bertelli
[email protected]
Agenda
• Piattaforme
• Struttura di un App
• Grafica Componibile
• DataBinding
• Model View ViewModel (MVVM)
• Alcuni Suggerimenti
• Q&A
Piattaforme
Piattaforme (Chi ben comincia...)
Windows
Phone 7.8
Windows
Phone 8
Windows
Phone 8.1
Windows
Store
Universal
Piattaforme (è...)
Windows Store
App 8.1
Windows Store
Universal
Piattaforme (..a metà dell’opera!)
Windows Store
Universal
Windows App
(Windows 10)
Struttura di un App (Universal)
Windows
Shared
Phone
UI
Struttura di un App (Universal)
XAML
HTML
Grafica componibile
Windows
Phone
Griglia
Griglia
Pannello
orrizontale
Controllo
custom
Pannello
verticale
Barra di
stato
Pulsante
Data
Shared
Controllo
custom
Barra di
stato
Pulsante
PROJECT DEMO
DataBinding
Persona
Nome
Textbox1
Cognome
Textbox2
Età
Textbox3
DataContext
• Connessione «Automatica» tra UI e business logic
• Nasconde ed evita l’implementazione di meccanismi di refresh
INotifyPropertyChanged
Prima
public string Name {
get;
set;
}
Dopo
private string name;
public string Name
{
get { return name; }
set
{
name = value;
NotifyOfPropertyChange(() => Name);
}
}
XAML
<TextBlock Text="{Binding Path=Name}" DataContext="{Binding Persona}" />
DATABINDING DEMO
Model View ViewModel (MVVM)
MVC?
Model View ViewModel (MVVM)
Model View ViewModel (MVVM)
• Sfrutta il meccanismo del Binding
• Pacchetti NuGet gratuiti di diversi autori
• Permette di «minimizzare» l’utilizzo del «code behind»
• Massimizza il riutilizzo e la «testabilità» della parte di
modello
• E’ possibile riutilizzare lo stesso ViewModel su grafiche
differenti
Command – no more OnButtonClick!
• Gli eventi nell’approccio tradizionale vengono gestiti tramite event
handler definiti nel code behind (OnButtonClick...)
• Abilitare o meno un pulsante richiede di gestirne lo stato in vari punti
dell’applicazione, o avere un metodo di «refresh UI»
Vorrei gestire il
«ButtonClick»
nel modello e
non nella grafica
Vorrei che il
pulsante si
abiliti/disabiliti
in automatico in
base allo stato
corrente
Command
Command – no more OnButtonClick!
• E’ una propietà dei controlli
• Sfrutta il Binding
Code
private ICommand _pinToStart;
public ICommand PinToStart
{
get
{
return _pinToStart
?? (_pinToStart = new RelayCommand(
() => taskService.PinToStart(CurrentItem),
() => canPin));
}
}
XAML
<Button Content="Pin to start" Command="{Binding Path=PinToStart}" />
MVVM DEMO
Alcuni suggerimenti
• Scrivete le classi di Modello in Portable Class Library (PCL)
• Separazione «netta» tra Modello e «Data Access Layer»
• Un minimo di Unit Testing
• Implementate il workflow/macchina a stati già nel modello
• Scrivetevi Componenti custom
• Massimizzare l’utilizzo del progetto Shared
• Stili
• Immagini
• file
• Design Data
• Utilizzate un progetto Universal come base di partenza
Q&A
Gianluca Bertelli
[email protected]
@bertelli