3. Windows Phone 8 App
Windows 8 App

4. 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

5.  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

8. 1. Un origen
2. Un proyecto
3. Un ensamblado
Multiples plataformas

14. 



Plataforma
Pueden crear
Pueden consumir
Windows Phone 8
C++
C++, C#, VB
Windows 8
C++, C#, VB
C++, C#, VB, Javascript

17. User Interface
App Logic
General
Model-View-ViewModel (MVVM)

19. 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)

20. 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

21. 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);

22. 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”.

23. 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.

25. Editar perfil
Nombre
Apellido

26. <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>

27. <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>

28. <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>

29. 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

30. Fuente: http://www.slideshare.net/soreygarcia/planificando-las-bases-de-una-aplicacin-windows-phone

31. ADD/MODIFY
TASK
SPLASH
TASK S LIST
SETTINGS
PRODUCTIVITY REPORT
ABOUT

32. 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

33. 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));
}
}

35. public class MainViewModel : BindableBase
{
private String nombre;
public String Nombre
{
get
{
return this.nombre;
}
set
{
Set<String>(ref nombre, value);
}
}

36. 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;
}

37. <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}">

39. MVVM Simple

41. Event
Handlers
Events
Commanding

42. <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>

43. <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>

44. 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);

46. 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

48. 
Navigation Service

Network Service

LocalDatabaseService

SocialService

SettingsService

RoamingService

SecurityService

50. MVVM Intermedio

52. public class MainViewModel
{
private DataService dataSvc;
public MainViewModel()
{
dataSvc= new DataService();
}
public void XYZmethod()
{
var theCar = dataSvc.Car;
...
NavigationService.Instance.GoBack();
}
...
}

54. NavigationService INavigationService
NavigateTo Uri
Application
PhoneApplicationFrame
Application
PhoneApplicationFrame

55. 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();
}
...
}

57. <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>

59. 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>(); }
}
}

60.  Repository Pattern
 Messenger Pattern
 EventToCommand

61. MVVM Avanzado

63. 




64. http://aka.ms/ShareCode