Windows Phone 8 App

Windows 8 App
Windows Phone 8 App

Windows 8 App

XAML UI
Framework

.NET Code
(C#; VB.NET)

Windows Runtime
APIs

DirectX 11

Native In...
 Separar lógica de interfaz de usuario y la aplicación utilizando el

patrón de MVVM
 Compartir funcionalidad utilizando...
1. Un origen
2. Un proyecto
3. Un ensamblado
Multiples plataformas





Plataforma

Pueden crear

Pueden consumir

Windows Phone 8

C++

C++, C#, VB

Windows 8

C++, C#, VB

C++, C#, VB...
User Interface

App Logic

General

Model-View-ViewModel (MVVM)
View
Data Bindings

Interfaz de Usuario

Commands

One way
One time
Two way

ViewModel

Estructuras que
representan los co...
Aplicaciones XAML

Este es el escenario “típico” de un
desarrollador .NET hasta antes de
XAML o MVC”

Etiqueta
Caja de tex...
Usando XAML se pueden crear de forma declarativa los mismos
elementos gráficos que se crearían en código
<StackPanel>
<Tex...
Ambos escenarios permiten acceder a los controles de la pantalla como
miembros de la clase que los contiene es decir
this....
View (XAML y Code behind)
Data Bindings

Commands

ViewModel

Model

Trabajar con MVVM es una de las
estrategias cross pla...
Editar perfil
Nombre

Apellido
<StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" >
<TextBlock TextWrapping="Wrap" Text="TextBlock"/>

<Te...
<StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" DataContext="{Binding
Persona}" >
<TextBlock TextWrappin...
<Grid x:Name="LayoutRoot" Background="Transparent"

d:DataContext="{Binding Source={StaticResource SampleDataSource}}">
<S...
class Class Model

MainView Model
+
+

SelectedTask :TaskViewModel
TasksByCategory :ObservableCollection<CategoryViewModel...
Fuente: http://www.slideshare.net/soreygarcia/planificando-las-bases-de-una-aplicacin-windows-phone
ADD/MODIFY
TASK

SPLASH

TASK S LIST

SETTINGS

PRODUCTIVITY REPORT

ABOUT
class Class Model

MainView Model
«binding»

«binding»

Task's List
«boundary»

CategoryView Model

TaskView Model

Add/Mo...
public class ItemViewModel : INotifyPropertyChanged
{
private string lineOne;
public string LineOne
{
get { return lineOne...
public class MainViewModel : BindableBase
{
private String nombre;
public String Nombre
{
get
{
return this.nombre;

}
set...
private static HueClientViewModel hueClientVM = null;
public static HueClientViewModel HueClientVM
{
get{
if (hueClientVM ...
<Application x:Class="Hue_Demo_Phone.App“ ...
xmlns:vm="clr-namespace:Hue_Demo_Phone.ViewModels">
<Application.Resources>
...
MVVM Simple
Event
Handlers

Events
Commanding
<StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" DataContext="{Binding
Persona}" >
<TextBlock TextWrappin...
<Button Content="Press this" Height="72" Margin="90,464,0,0" Name="button1" Width="300"
Command="{Binding HelloCommand}"/>...
public interface ICommand
{
void Execute(object parameter);
bool CanExecute(object parameter);
event EventHandler CanExecu...
public MainViewModel()
{
this.guardarPerfilCommand = new RelayCommand(GuardarPerfil, null);

}
#region GuardarPerfil

priv...


Navigation Service



Network Service



LocalDatabaseService



SocialService



SettingsService



RoamingServic...
MVVM Intermedio
public class MainViewModel
{
private DataService dataSvc;
public MainViewModel()
{
dataSvc= new DataService();
}

public v...
NavigationService INavigationService

NavigateTo Uri
Application

PhoneApplicationFrame

Application

PhoneApplicationFram...
public class MainViewModel
{
private IDataService dataSvc;
private INavigationService navSvc;

public MainViewModel(IDataS...
<phone:PhoneApplicationPage>
<!-- XAML -->
<phone:PhoneApplicationPage.DataContext>
<Binding Path="Main" Source="{StaticRe...
public class ViewModelLocator
{
static ViewModelLocator()
{
ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default); //...
 Repository Pattern
 Messenger Pattern
 EventToCommand
MVVM Avanzado




http://aka.ms/ShareCode
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
Upcoming SlideShare
Loading in …5
×

Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8

4,108 views

Published on

Published in: Technology
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
4,108
On SlideShare
0
From Embeds
0
Number of Embeds
2,412
Actions
Shares
0
Downloads
34
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8

  1. 1. Windows Phone 8 App Windows 8 App
  2. 2. Windows Phone 8 App Windows 8 App XAML UI Framework .NET Code (C#; VB.NET) Windows Runtime APIs DirectX 11 Native Interop Component Windows Runtime APIs Partner Runtimes & Game Engines IE10 Web Browser Control Partner Runtime Engines
  3. 3.  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
  4. 4. 1. Un origen 2. Un proyecto 3. Un ensamblado Multiples plataformas
  5. 5.     Plataforma Pueden crear Pueden consumir Windows Phone 8 C++ C++, C#, VB Windows 8 C++, C#, VB C++, C#, VB, Javascript
  6. 6. User Interface App Logic General Model-View-ViewModel (MVVM)
  7. 7. View Data Bindings Interfaz de Usuario Commands One way One time Two way ViewModel Estructuras que representan los contextos de datos de las pantallas y el que permiten el acceso a la logica de negocio Model Clases con solo propiedades que representan las fuentes de los datos (archivos, servicios, bases de datos)
  8. 8. Aplicaciones XAML Este es el escenario “típico” de un desarrollador .NET hasta antes de XAML o MVC” Etiqueta Caja de texto Aplicaciones de escritorio, web forms Etiqueta Caja de texto MainPage.xaml (Lenguaje declarativo XAML) Form.cs (Code behind C#) Form.designer.cs (C#) Clase Form MainPage.xaml.cs (Code behind C#) Clase MainPage
  9. 9. 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);
  10. 10. 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 } Ahora bien, el que esto se permita no significa que sea la práctica “sugerida”.
  11. 11. View (XAML y Code behind) Data Bindings Commands ViewModel Model Trabajar con MVVM es una de las estrategias cross platform cuyo primer paso es entender en que parte se ubica nuestro “anterior” esquema de trabajo. Como podemos observar, trabajar de la forma típica no es más que trabajar sobre las vistas. ¿Funciona? Si, pero no es la practica correcta. Algunos desarrolladores alcanzan a llegar hasta implementar Vistas Modelos como contextos de datos, sin embargo los manipulan desde el code behind, lo que es inapropiado.
  12. 12. Editar perfil Nombre Apellido
  13. 13. <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>
  14. 14. <StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" DataContext="{Binding Persona}" > <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>
  15. 15. <Grid x:Name="LayoutRoot" Background="Transparent" d:DataContext="{Binding Source={StaticResource SampleDataSource}}"> <StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1“ DataContext="{Binding Persona}" > </StackPanel> </Grid>
  16. 16. class Class Model MainView Model + + SelectedTask :TaskViewModel TasksByCategory :ObservableCollection<CategoryViewModel> TaskView Model CategoryView Model + + + Identifier :int Name :string Tasks :ObservableCollection<TaskViewModel> + + + + + Identifier :int Name :string PlannedDate :DateTime Pomori :int Status :TaskStatus + + Delete() :void Save() :void
  17. 17. Fuente: http://www.slideshare.net/soreygarcia/planificando-las-bases-de-una-aplicacin-windows-phone
  18. 18. ADD/MODIFY TASK SPLASH TASK S LIST SETTINGS PRODUCTIVITY REPORT ABOUT
  19. 19. class Class Model MainView Model «binding» «binding» Task's List «boundary» CategoryView Model TaskView Model Add/Modify Task «boundary» Fuente: http://www.slideshare.net/soreygarcia/planificando-las-bases-de-una-aplicacin-windows-phone
  20. 20. 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)); } }
  21. 21. public class MainViewModel : BindableBase { private String nombre; public String Nombre { get { return this.nombre; } set { Set<String>(ref nombre, value); } }
  22. 22. 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; }
  23. 23. <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}">
  24. 24. MVVM Simple
  25. 25. Event Handlers Events Commanding
  26. 26. <StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1" DataContext="{Binding Persona}" > <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>
  27. 27. <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>
  28. 28. public interface ICommand { void Execute(object parameter); bool CanExecute(object parameter); event EventHandler CanExecuteChanged; } public class HelloWorldCommand : ICommand { public void Execute(object parameter) { Debug.WriteLine("Hello, world"); } public bool CanExecute(object parameter) { return true; } public event EventHandler CanExecuteChanged; } new HelloWorldCommand().Execute(null);
  29. 29. public MainViewModel() { this.guardarPerfilCommand = new RelayCommand(GuardarPerfil, null); } #region GuardarPerfil private ICommand guardarPerfilCommand; public ICommand GuardarPerfilCommand { get { return this.guardarPerfilCommand; } } private async void GuardarPerfil() { //Code } #endregion GuardarPerfil
  30. 30.  Navigation Service  Network Service  LocalDatabaseService  SocialService  SettingsService  RoamingService  SecurityService
  31. 31. MVVM Intermedio
  32. 32. public class MainViewModel { private DataService dataSvc; public MainViewModel() { dataSvc= new DataService(); } public void XYZmethod() { var theCar = dataSvc.Car; ... NavigationService.Instance.GoBack(); } ... }
  33. 33. NavigationService INavigationService NavigateTo Uri Application PhoneApplicationFrame Application PhoneApplicationFrame
  34. 34. public class MainViewModel { private IDataService dataSvc; private INavigationService navSvc; public MainViewModel(IDataService data, INavigationService nav) { dataSvc= data; navSvc = nav; } public void XYZmethod() { var theCar = dataSvc.Car; ... navSvc.GoBack(); } ... }
  35. 35. <phone:PhoneApplicationPage> <!-- XAML --> <phone:PhoneApplicationPage.DataContext> <Binding Path="Main" Source="{StaticResource Locator}"/> </phone:PhoneApplicationPage.DataContext> <Grid x:Name="LayoutRoot" Background="Transparent" > <StackPanel x:Name="ContentPanel" Margin="12,0,12,0" Grid.Row="1“ DataContext="{Binding Persona}" > </StackPanel> </Grid>
  36. 36. public class ViewModelLocator { static ViewModelLocator() { ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default); // Using SimpleIOC // Register Services if (ViewModelBase.IsInDesignModeStatic) SimpleIoc.Default.Register<IDataService, Design.DesignDataService>(); else SimpleIoc.Default.Register<IDataService, DataService>(); SimpleIoc.Default.Register<INavigationService, NavigationService>(); // Register ViewModels SimpleIoc.Default.Register<MainViewModel>(); } // Following property returns an instance of MainViewModel, with dependencies injected public MainViewModel Main { get { return ServiceLocator.Current.GetInstance<MainViewModel>(); } } }
  37. 37.  Repository Pattern  Messenger Pattern  EventToCommand
  38. 38. MVVM Avanzado
  39. 39.    
  40. 40. http://aka.ms/ShareCode

×