mvvm: portabilidad en aplicaciones xaml
DESCRIPTION
Presentación del patrón MVVM para crear aplicaciones portables.TRANSCRIPT
![Page 1: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/1.jpg)
![Page 2: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/2.jpg)
Separar lógica de interfaz de usuario y la aplicación utilizando el patrón de MVVM
Compartir funcionalidad utilizando bibliotecas de clases de portables
Compartir código con Archivos Enlazados
Manejo de las diferencias de plataforma de Windows Phone y Windows 8
Compartir utilizando componentes Windows Runtime
![Page 3: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/3.jpg)
![Page 4: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/4.jpg)
User Interface
App Logic
General Model-View-ViewModel (MVVM)
![Page 5: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/5.jpg)
![Page 6: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/6.jpg)
Model
View
ViewModel
Data BindingsOne way
One time
Two way
Commands
Interfaz de Usuario
Clases con solo propiedades querepresentan las fuentes de los datos (archivos, servicios, bases de datos)
Estructuras querepresentan los contextosde datos de las pantallas y el que permiten el accesoa la logica de negocio
![Page 7: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/7.jpg)
Aplicaciones de escritorio, web forms
Caja de texto
Etiqueta
Form.cs (Code behind C#)
Form.designer.cs (C#)
Clase
Form
Usar code behind en clases parciales,
es el escenario “típico o más sencillo”
de un desarrollador .NET.
Aplicaciones XAML
Caja de texto
Etiqueta
MainPage.xaml
(Lenguaje declarativo XAML)
MainPage.xaml.cs (Code behind C#)
Clase
MainPage
Nuestra meta para
hacer código portable
es usar code hind al
mínimo posible. En la
demo de hecho cero
code behind.
![Page 8: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/8.jpg)
Usando XAML se pueden crear de forma declarativa los mismos elementos gráficos que se crearían en código
<StackPanel><TextBox/><Button/>
</StackPanel>
StackPanel stackPanel = new StackPanel();
TextBox textBox = new TextBox();stackPanel.Children.Add(textBox);
Button button = new Button();stackPanel.Children.Add(button);
![Page 9: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/9.jpg)
Ambos escenarios permiten acceder a los controles de la pantalla como miembros de la clase que los contiene es decir
this.txtMensaje.Text = “Hola”;
Y crear event handlers para poner el código relacionado a una interacción del usuario, por ejemplo el click de un botón
private void Button_Click(object sender, RoutedEventArgs e) { //Code }
Sin embargo como ya lo dijimos, está no es la mejor práctica para hacer código portable y reusable.
![Page 10: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/10.jpg)
Nombre
Editar perfil
Apellido
![Page 11: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/11.jpg)
12:38
recordar
*****
iniciar sesión
password
soreygarcia
usuario
Text={Binding alias}
Password={Binding password}
Command={Binding IniciarSesionCommand}
DataContext={Binding Path=Usuario, Source={StaticResource Locator}}
![Page 12: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/12.jpg)
<StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" >
<TextBlock TextWrapping="Wrap" Text="TextBlock"/>
<TextBox Height="72" TextWrapping="Wrap" Text="TextBox"/>
<TextBlock TextWrapping="Wrap" Text="TextBlock"/>
<TextBox Height="72" TextWrapping="Wrap" Text="TextBox"/>
<Button Content="Button"/>
</StackPanel>
![Page 13: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/13.jpg)
<StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1">
<TextBlock TextWrapping="Wrap" Text="TextBlock"/>
<TextBox Height="72" TextWrapping="Wrap" Text="{Binding Nombre, Mode=TwoWay}"/>
<TextBlock TextWrapping="Wrap" Text="TextBlock"/>
<TextBox Height="72" TextWrapping="Wrap" Text="{Binding Apellido, Mode=TwoWay}"/>
<Button Content="Button"/>
</StackPanel>
![Page 14: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/14.jpg)
<Grid x:Name="LayoutRoot" Background="Transparent"
d:DataContext="{Binding Path=Persona, Source={StaticResource SampleDataSource}}">
<Grid x:Name="ContentPanel">
<!– Aquí van los demás elementos de nuestra vista -->
</Grid>
</Grid>
![Page 15: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/15.jpg)
![Page 16: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/16.jpg)
![Page 17: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/17.jpg)
class Models
Player
«property»
+ Clues(): List<string>
+ Id(): int
+ Name(): string
+ Photo(): string
Esta clase es suficiente
para serializar el archivo
que tenemos
![Page 18: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/18.jpg)
class ViewModels
ClueViewModel
«property»
+ Name(): string
+ Value(): string
BindableBase
MainViewModel
- jsonService: IJsonService
- navigationService: INavigationService
- phoneService: IPhoneService
- randomGen: Random
- LoadPlayers(): void
+ MainViewModel(INavigationService, IPhoneService)
~ SufflePlayers(): void
«property»
+ Players(): ObservableCollection<PlayerViewModel>
+ SelectedPlayer(): PlayerViewModel
BindableBase
PlayerViewModel
- navigationService: INavigationService
- phoneService: IPhoneService
- wasDiscovered: bool
- Discover(): void
- Guess(): void
+ PlayerViewModel(INavigationService, IPhoneService)
«property»
+ Answer(): string
+ Clues(): ObservableCollection<ClueViewModel>
+ DiscoverCommand(): ICommand
+ GuessCommand(): ICommand
+ Id(): int
+ Name(): string
+ ParentViewModel(): MainViewModel
+ Photo(): string
+ WasDiscovered(): bool
![Page 19: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/19.jpg)
public class ItemViewModel : INotifyPropertyChanged{
private string lineOne;public string LineOne{
get { return lineOne; }set {
if (value != lineOne){lineOne = value;NotifyPropertyChanged("LineOne");
}}
}
public event PropertyChangedEventHandler PropertyChanged;private void NotifyPropertyChanged(String propertyName){
if (null != PropertyChanged) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}}
![Page 20: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/20.jpg)
![Page 21: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/21.jpg)
public class MainViewModel : BindableBase
{
private String nombre;
public String Nombre
{
get
{
return this.nombre;
}
set
{
nombre = value;RaisePropertyChanged(“Nombre”);
}
}
![Page 22: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/22.jpg)
![Page 23: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/23.jpg)
private static HueClientViewModel hueClientVM = null;public static HueClientViewModel HueClientVM{
get{if (hueClientVM == null)
hueClientVM = new HueClientViewModel();return hueClientVM;
}}
public HueClientView(){
InitializeComponent();this.DataContext = App.HueClientVM;
}
![Page 24: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/24.jpg)
<Application x:Class="Hue_Demo_Phone.App“ ...xmlns:vm="clr-namespace:Hue_Demo_Phone.ViewModels">
<Application.Resources><vm:HueClientViewModel x:Key="HueClientVM" />
</Application.Resources>
<phone:PhoneApplicationPage ..."DataContext="{StaticResource HueClientVM}">
![Page 25: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/25.jpg)
<phone:PhoneApplicationPage><!-- XAML --><phone:PhoneApplicationPage.DataContext>
<Binding Path="Main" Source="{StaticResource Locator}"/></phone:PhoneApplicationPage.DataContext>
<Grid x:Name="LayoutRoot" Background="Transparent" >
</Grid>
![Page 26: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/26.jpg)
![Page 27: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/27.jpg)
![Page 28: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/28.jpg)
EventsEvent
Handlers
Commanding
![Page 29: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/29.jpg)
<StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" >
<TextBlock TextWrapping="Wrap" Text="TextBlock"/>
<TextBox Height="72" TextWrapping="Wrap" Text="{Binding Nombre, Mode=TwoWay}"/>
<TextBlock TextWrapping="Wrap" Text="TextBlock"/>
<TextBox Height="72" TextWrapping="Wrap" Text="{Binding Apellido, Mode=TwoWay}"/>
<Button Content="Button" Command="{Binding GuardarPerfilCommand}"/>
</StackPanel>
![Page 30: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/30.jpg)
<Button Content="Press this" Height="72" Margin="90,464,0,0" Name="button1" Width="300"Command="{Binding HelloCommand}"/>
<ListBox Height="100" x:Name="listBox1" ><i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged"><i:InvokeCommandAction Command="{Binding SelectionChanged}"
CommandParameter="{Binding ElementName=listBox1, Path=SelectedIndex}"/></i:EventTrigger>
</i:Interaction.Triggers></ListBox>
![Page 31: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/31.jpg)
![Page 32: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/32.jpg)
public ICommand GuardarPerfilCommand
{
get { return new RelayCommand(GuardarPerfil, null);}
}
private async void GuardarPerfil()
{
//Code
}
#endregion GuardarPerfil
![Page 33: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/33.jpg)
![Page 34: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/34.jpg)
![Page 35: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/35.jpg)
![Page 36: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/36.jpg)
![Page 37: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/37.jpg)
class StickerBook
StickerBook.Logic
+ Common
+ Contracts
+ Models
+ Services
+ ViewModels
StickerBook.WinPhone
+ App
+ Common
+ Converters
+ Pages
+ Properties
+ SampleData
+ Services
StickerBook.WinRT
+ App
+ Common
+ Converters
+ Pages
+ Properties
+ SampleData
+ Services
![Page 38: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/38.jpg)
![Page 39: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/39.jpg)
http://aka.ms/ShareCode
![Page 40: MVVM: Portabilidad en aplicaciones XAML](https://reader031.vdocument.in/reader031/viewer/2022013115/55cf970b550346d0338f740d/html5/thumbnails/40.jpg)