Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
65
-
Upload
sorey-garcia -
Category
Technology
-
view
2.813 -
download
1
Transcript of Estrategias para desarrollo crossplatform en Windows Phone 8 y Windows 8
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
Partner Runtime Engines
DirectX 11Native Interop
Component
Windows Runtime
APIs
IE10 Web Browser Control
Partner Runtimes & Game Engines
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
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, Javascript
User Interface
App Logic
General Model-View-ViewModel (MVVM)
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
Aplicaciones de escritorio, web forms
Caja de texto
Etiqueta
Form.cs (Code behind C#)
Form.designer.cs (C#)
Clase
Form
Este es el escenario “típico” de un
desarrollador .NET hasta antes de
XAML o MVC”
Aplicaciones XAML
Caja de texto
Etiqueta
MainPage.xaml
(Lenguaje declarativo XAML)
MainPage.xaml.cs (Code behind C#)
Clase
MainPage
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);
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”.
Model
View (XAML y Code behind)
ViewModel
Data Bindings Commands
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.
Nombre
Editar perfil
Apellido
<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>
<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>
<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>
class Class Model
CategoryViewModel
+ Identifier :int
+ Name :string
+ Tasks :ObservableCollection<TaskViewModel>
TaskViewModel
+ Identifier :int
+ Name :string
+ PlannedDate :DateTime
+ Pomori :int
+ Status :TaskStatus
+ Delete() :void
+ Save() :void
MainViewModel
+ SelectedTask :TaskViewModel
+ TasksByCategory :ObservableCollection<CategoryViewModel>
Fuente: http://www.slideshare.net/soreygarcia/planificando-las-bases-de-una-aplicacin-windows-phone
ADD/MODIFY TASK
SETTINGS
SPLASH
ABOUT
TASK S LIST
PRODUCTIVITY REPORT
class Class Model
CategoryViewModel TaskViewModel
MainViewModel
Task's List
«boundary»
Add/Modify Task
«boundary»
«binding»
«binding»
Fuente: http://www.slideshare.net/soreygarcia/planificando-las-bases-de-una-aplicacin-windows-phone
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));
}}
public class MainViewModel : BindableBase
{
private String nombre;
public String Nombre
{
get
{
return this.nombre;
}
set
{
Set<String>(ref nombre, value);
}
}
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;
}
<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}">
MVVM Simple
EventsEvent
Handlers
Commanding
<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>
<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>
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);
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
Navigation Service
Network Service
LocalDatabaseService
SocialService
SettingsService
RoamingService
SecurityService
MVVM Intermedio
public class MainViewModel{
private DataService dataSvc;
public MainViewModel(){dataSvc= new DataService();
}
public void XYZmethod(){
var theCar = dataSvc.Car;...NavigationService.Instance.GoBack();
}...
}
NavigationService INavigationService
NavigateTo Uri
Application PhoneApplicationFrame
Application PhoneApplicationFrame
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();
}...
}
<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>
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>(); }
}
}
Repository Pattern
Messenger Pattern
EventToCommand
MVVM Avanzado
http://aka.ms/ShareCode
