javi's devs

Recientemente, he tenido que realizar el envío de un email con attachment y, tras probar varias librerías de pago sin demasiado exito, me he convencido que la mejor opción era el uso de Sockets.

Para ello, siendo que uno de los objetivos era usar el puerto 465 y disfrutar de conexión segura SSL, me decidí a probar la librería SocketEx, una librería TcpClient, basada en la bouncywp71, muy sencilla de usar y con soporte para SSL y TLS.

Dicha librería nos permite, de forma fácil, crear un SecureTcpClient para comunicarnos a bajo nivel con un servidor, dando instrucciones mediante StreamWriter y recibiendo sus respuestas con un StreamReader.

Creando la conexión

Crear la conexión es tan fácil como crear un SecureTcpClient con el host y el puerto que queramos.

private SecureTcpClient CreateConnection() { var connection = new SecureTcpClient("smtp.gmail.com", 465); return connection; }

Enviando el correo

Creamos una conexión con el método descrito anteriormente, obtenemos la stream, creamos un StreamWriter que usaremos para escribir los comandos y un StreamWriter que leeremos línea a línea.

var connection = CreateConnection(); var stream = connection.GetStream(); var reader = new StreamReader(stream); var writer = new StreamWriter(stream); string rn = Char.ConvertFromUtf32(13) + Char.ConvertFromUtf32(10); string boundaryDef = "unique-boundary-1"; string boundary = "--" + boundaryDef + rn; var request = "EHLO smtp.gmail.com + rn + "AUTH LOGIN" + rn + ToBase64String(user) + rn + ToBase64String(pass) + rn + "MAIL FROM:<" + from + ">" + rn + "RCPT TO:<" + to + ">" + rn + "DATA" + rn + "From: " + from + rn + "To: " + to + rn + "Subject: " + subject + rn + "MIME-Version: 1.0" + rn + "Content-Type: multipart/mixed; boundary=" + boundaryDef + rn + rn + "This is a multi-part message in MIME format" + rn + rn + boundary + "Content-Type: text/plain;" + rn + rn + "This is a body text" + rn + boundary + "Content-Type: image/jpg; file=\"" + filename + "\"" + rn + "Content-Transfer-Encoding: base64" + rn + "Content-Disposition: attachment; filename=\"" + filename + "\"" + rn + rn + file + rn + rn + "--" + boundaryDef + "--" + rn + rn + "." + rn + "QUIT\r"; writer.WriteLine(request); writer.Flush(); var fullMessage = new StringBuilder(); string message; while ((message = reader.ReadLine()) != null) { if (string.IsNullOrWhiteSpace(message)) break; fullMessage.AppendLine(message); System.Diagnostics.Debug.WriteLine(message); }

En algunas ocasiones necesitamos que determinado control tenga comportamiento de botón. Este es el caso de imágenes o contenedores enteros de tipo Grid o StackPanel que necesitamos que, al hacer una pulsación sobre ellos, ejecuten una determinada acción. Dicho comportamiento lo podríamos realizar con un evento de tipo Click o Tap, pero suele ser más cómodo, a la vez que da una mejor experiencia de usuario, usar un Command (esto es porque el Command, al mover un poco la yema del dedo sobre el botón sin salir del control, sigue realizando el comando mientras que los eventos Click y Tap no).

Para estos casos lo mejor que podemos hacer es utilizar un estilo personalizado para el Button que vacíe, por así decirlo, el template habitual del botón.

<Style x:Key="BtnEmptyStyle" TargetType="ButtonBase"> <Setter Property="Background" Value="Transparent" /> <Setter Property="Padding" Value="0" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ButtonBase"> <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" toolkit:TiltEffect.IsTiltEnabled="True"> <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>

El efecto tilt utiliza librerías del Toolkit de Windows Phone así que tendréis que añadir su xmlns (y bajar el Toolkit de NuGet si no lo tenéis ya).

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

De esta forma nos ahorramos bordes, paddings y margins propios del botón haciendo que este sea tan solo un contenedor al que podemos añadir Commands y, al que añadiremos también, para dar efecto de pulsado, el efecto “titl”.

Creado el estilo, sólo nos falta envolver el control de la vista con un botón de este tipo.

Este patrón permite adaptar una clase a una interfaz ya creada.

Puede sernos útil sobre todo cuando tengamos código heredado que no implemente por si solo una interfaz dada.

Veamos su estructura:

- Cliente: Clase que necesita utilizar el código de Adaptee a través de una interfaz dada.

- ITarget: Interfaz que queremos usar.

- Adaptee: Clase que contiene el código que queremos utilizar.

- Adapter: Implementa ITarget, obtieniendo de Adaptee las funcionalidades que deseamos.

Un diagrama de la wikipedia:

Implementación

ITarget

public interface IClient { /// <summary> /// Obtenemos una lista de direcciones por id del cliente /// </summary> /// <param name="id">pk del cliente</param> /// <returns>lista de direcciones de un cliente</returns> List<string> GetAddresses(int id); }

Adaptee

public class ContactAdaptee { /// <summary> /// Obtenemos una dirección por id de contacto /// </summary> /// <param name="id">pk del contacto</param> /// <returns>dirección de un contacto</returns> public string GetAddress(int id) { // creamos la direccíón (que cogeríamos de base de datos) string address = "Av. Lexington 63, New York"; return address; } }

Adapter

public class ContactAdapter: IClient { /// <summary> /// Obtenemos una lista de direcciones por id de contacto /// </summary> /// <param name="id">pk del contacto</param> /// <returns>lista de direcciones de un contacto</returns> public List<string> GetAddresses(int id) { ContactAdaptee adaptee = new ContactAdaptee(); return new List<string> { adaptee.GetAddress(id) }; } }

o bien

public class ContactAdapter: ContactAdaptee, IClient { /// <summary> /// Obtenemos una lista de direcciones por id de contacto /// </summary> /// <param name="id">pk del contacto</param> /// <returns>lista de direcciones de un contacto</returns> public List<string> GetAddresses(int id) { return new List<string>{base.GetAddress(id)}; } }

y finalmente el Client

class Program { static void Main(string[] args) { // inicializamos el adapter IClient contactAdapter = new ContactAdapter(); // obtenemos las direcciones del contacto con pk 1 List<string> addresses = contactAdapter.GetAddresses(1); } }

Y eso es todo, gracias a este patrón podemos reutilizar una clase adaptándola a una interfaz de forma muy sencilla.

Enlaces

http://es.wikipedia.org/wiki/Adapter_(patr%C3%B3n_de_dise%C3%B1o)

http://www.dofactory.com/net/adapter-design-pattern

Singleton es un patrón de diseño que restringe la instanciación de una clase a un único objeto. Esto es muy útil si queremos que un objeto coordine acciones en un sitema o bien controle un recurso físico.

Aproximaciones

public class Singleton { public static Singleton _instance; // evitamos que se puedan crear instancias private Singleton() { } public static Singleton GetInstance() { // en caso de que no haya ninguna instanciación creamos una if (_instance == null) { _instance = new Singleton(); } return _instance; } } public class Singleton { public static Singleton _instance; private Singleton() { } public static Singleton Instance { get { if (_instance == null) { _instance = new Singleton(); } return _instance; } } }

Ambas son igualmente válidas y tienen las mismas limitaciones. Su mayor ventaja es que tiene un comportamiento conocido como lazy instantiation, es decir, que la instanciación no se produce hasta que alguien pregunte por ella.

Sin embargo, la mayor desventaja es que no nos sirve para programas multihilo, pues dos hilos pueden entrar a la vez en el método get, realizar a la vez la consulta _instance == null y crear la instancia.

Para estos casos podemos realizar una instanciación estática. Marcamos la clase como sealed, de forma que otras clases no se puedan derivar de ésta y crear instancias, y le añadimos un readonly a la estática privada para que no pueda ser modificada mas que en la construcción o instanciación estática. 

Al igual que en el caso anterior tendrá un funcionamiento de tipo lazy instantiation, pues la instanciación se realizará la primera vez que la clase sea referenciada desde otra llamada.

public sealed class Singleton { private static readonly Singleton _instance = new Singleton(); private Singleton() { } public static Singleton Instance { // obtenemos la estática ya instanciada get { return _instance; } } }

La aproximación anterior sirve para la mayoría de casos, pero en otras ocasiones, cuando necesitemos retrasar la inicialización, usar un constructor que no sea el básico o realizar otras tareas antes de la inicialización, además de trabajar en multihilo, necesitamos otra solución.

public sealed class Singleton { private static volatile Singleton _instance; private static object syncRoot = new Object(); private Singleton() { } public static Singleton Instance { get { if (_instance == null) { lock (syncRoot) { if (_instance == null) _instance = new Singleton(); } } return _instance; } } }

Las dos novedades principales son la declaración volatile para la privada _instance, que sirve para asegurarnos que su asignación se completa antes de poder ser accedida, y el uso del objeto estático syncRoot con la clave lock, que usaremos para bloquear el acceso a la creación de la instancia a otros hilos de ejecución. La doble comprovación _instance == null permite no tener que realizar el bloqueo en cada get, de manera que sólo se realizará cuando _instance sea null.

Y eso es todo, si quieres una mejor y más detallada explicación sobre el patrón Singleton puedes consultar aquí.

http://msdn.microsoft.com/es-es/library/bb972272.aspx

Para escribir este artículo me he ayudado de los siguientes enlaces:

http://en.wikipedia.org/wiki/Singleton_pattern

http://www.dofactory.com/net/singleton-design-pattern

El patrón Abstract Factory nos ofrece una estructura para crear familias de objetos relacionados sin especificar explícitamente sus clases.

Se sirve de la siguiente estructura:

- Cliente: La clase que creará las factorías para que le dé instancias de los objetos que quiere obtener.

- AbstractFactory: Clase que contiene la definición de métodos de las distintas factorías, teniendo un método que cree cada uno de los objetos que queramos obtener desde el Cliente.

- ConcreteFactory: Cada una de las factorías que implementarán de distinta forma los métodos de AbstractFactory.

- AbstractProduct: Clase que declara la definición de los métodos que queramos tener en nuestros productos.

- ConcreteProduct: Cada uno de los tipos de productos que implementarán de distinta forma los métodos de AbstractProduct.

Un diagrama sacado de la Wikipedia:

Y la implementación de dicho diagrama, usando Interfaces:

Main

class Program { static void Main(string[] args) { Application OSXClient = new Application(new OSXFactory()); Application WinClient = new Application(new WinFactory()); PrintHeader(typeof(OSXFactory)); OSXClient.Run(); PrintHeader(typeof(WinFactory)); WinClient.Run(); System.Console.ReadKey(); } static void PrintHeader(Type type) { System.Diagnostics.Debug.WriteLine(String.Format("Impresión de un botón con un application que tiene una {0}", type.Name)); } }

El cliente

public class Application { private Button _button; public Application(GUIFactory factory) { _button = factory.CreateButton(); } public void Run() { _button.Paint(); } }

Este cliente podría, por ejemplo, tener n controles de tipo botón e imprimirlos uno tras otro.

GuiFactory (AbstractFactory)

public interface GUIFactory { Button CreateButton(); }

OSXFactory y WinFactory (ConcreteFactories)

public class OSXFactory : GUIFactory { public Button CreateButton() { return new OSXButton(); } } public class WinFactory : GUIFactory { public Button CreateButton() { return new WinButton(); } }

Button (AbstractProduct)

public interface Button { void Paint(); }

OSXButton y WinButton (ConcreteProducts)

public class OSXButton : Button { public void Paint() { System.Console.WriteLine("Painted OS X button"); } } public class WinButton : Button { public void Paint() { System.Console.WriteLine("Painted Windows button"); } }

Imagino que alguna vez habréis tenido que "lidiar" con proyectos de clases portables (PCL). Estas maravillas, cargada de magia y veneno por igual, permite crear código mantenible y altamente reaprovechable, sin embargo, dependiendo de cuanto de portable quieres que sean, el soporte de funciones va escaseando, llegando a limitar cosas tan de uso común como el ToString o algunas funciones LINQ.

Las PCL son de uso muy recurrido cuando usamos el patrón MVVM, ya que reaprovecharemos mucho código entre plataformas, ya sea entre Windows 8 y Windows Phone, o incluso con Android, iPhone y WPF. Esto lo podremos realizar, por ejemplo, mediante el uso de MVVM Cross y Xamarin, poniendo todo el código del ViewModel, Business Layer y Database Layer en clases portables, de forma que tan solo tengamos las vistas, assets y estilos en la capa de la plataforma. Sin embargo, además de las vistas, tendremos algunas funciones que bien por estar trabajando en PCLs, o bien por implementarse de forma diferente en las distintas plataformas no podremos implementar en nuestro ViewModel o incluso en la Business Layer.

Para estos casos lo más práctico es usar servicios. Un servicio no es más que la implementación, en la capa de cada una de las plataformas, de una interfaz que usaremos desde una capa portable.

¿Cómo creo un servicio?

Lo más cómodo es usar algún sistema de inyección de dependencias, en mi caso actualmente uso el IoC que trae Mvvm Cross, pero si usáis otros no variará la forma de implementarlo, tan solo la forma de registralo. Al final de la entrada dejo un enlace a un post de Josué Yeray, con registro de servicios usando Autofac como IoC Container.

Registrando los servicios en MVVM Cross

Capa MVVM - App.cs En la capa de los ViewModels, en el App.cs, creamos un método que nos permita registrar cada uno de los servicios a su interfaz.

public void RegisterType(Type tInterface, Type tService) { Mvx.RegisterType(tInterface, tService); }

Capa de Windows 8 - Setup.cs En el Setup.cs de cada plataforma registramos cada uno de los servicios. En este caso, para simplificar, registramos tan solo el servicio de Notificaciones.

public class Setup : MvxStoreSetup { public Setup(Frame rootFrame) : base(rootFrame){ } protected override IMvxApplication CreateApp() { var app = new Apps.Core.Mvvm.App(); app.RegisterType(typeof(SNotificationService), typeof(INotificationService)); return app; } protected override IMvxTrace CreateDebugTrace() { return new DebugTrace(); } }

Capa de Windows Phone - Setup.cs Más de lo mismo...

public class Setup : MvxPhoneSetup { public Setup(PhoneApplicationFrame rootFrame) : base(rootFrame){ } protected override IMvxApplication CreateApp() { var app = new Apps.Core.Mvvm.App(); app.RegisterType(typeof(SNotificationService), typeof(INotificationService)); return app; } protected override IMvxTrace CreateDebugTrace() { return new DebugTrace(); } }

Y eso es todo, ahora solo queda crear la interfaz y su implementación.

Creamos interfaz

Capa MVVM - INotificationService.cs

public interface INotificationService { /// <summary> /// Mostramos una notificación /// <param name="message">Mensaje que queremos mostrar</param> /// </summary> bool Notify(string message); /// <summary> /// Mostramos una notificación con título /// </summary> /// <param name="message">Mensaje que queremos mostrar</param> /// <param name="title">Título - cabecera de la notificación</param> /// <returns></returns> bool Notify(string message, string title); }

Creamos implementaciones

Capa Plataforma (Windows 8) - SNotificationService.cs

using NotificationsExtensions.ToastContent; using Windows.UI.Notifications; namespace *** public class SNotificationService : INotificationService { IToastNotificationContent toastContent = null; private void ShowToast() { // Create a toast from the Xml, // then create a ToastNotifier object to show the toast ToastNotification toast = toastContent.CreateNotification(); // If you have other applications in your package, //you can specify the AppId of // the app to create a ToastNotifier for that application ToastNotificationManager.CreateToastNotifier().Show(toast); } public bool Notify(string message) { IToastText01 templateContent = ToastContentFactory.CreateToastText01(); templateContent.TextBodyWrap.Text = message; toastContent = templateContent; ShowToast(); return true; } public bool Notify(string message, string title) { IToastText02 templateContent = ToastContentFactory.CreateToastText02(); templateContent.TextHeading.Text = title; templateContent.TextBodyWrap.Text = message; toastContent = templateContent; ShowToast(); return true; } }

Capa Plataforma (Windows Phone) - SNotificationService.cs

using "Project_Name".Resources; using Coding4Fun.Toolkit.Controls; using System.Windows; using System.Windows.Media; namespace *** public class SNotificationService : INotificationService { public bool Notify(string message) { ToastPrompt toast = new ToastPrompt() { Message = message, Background = (SolidColorBrush)Application.Current.Resources["ApplicationPageBackgroundThemeBrush"], Foreground = new SolidColorBrush(Colors.White), TextOrientation = System.Windows.Controls.Orientation.Vertical, TextWrapping = TextWrapping.Wrap }; toast.Show(); return true; } public bool Notify(string message, string title) { ToastPrompt toast = new ToastPrompt() { Title = title, Message = message, Background = (SolidColorBrush)Application.Current.Resources["ApplicationPageBackgroundThemeBrush"], Foreground = new SolidColorBrush(Colors.White), TextOrientation = System.Windows.Controls.Orientation.Vertical, TextWrapping = TextWrapping.Wrap }; toast.Show(); return true; } }

Uso

Tan solo falta llamarlo desde el constructor del ViewModel, IoC ya nos dará la implementación correcta en cada caso.

private INotificationService notificationService; public MyAwesomeViewModel(INotificationService notService)) { this.notificationService = notService; }

Y más adelante, en cualquier método del viewModel.

notificationService.Notify("Service rules", "Awesome");

Y eso es todo... más adelante iré colgando los servicios que más utilizo en Windows 8 y Windows Phone.

Enlaces de interés

Compartiendo codigo en Windows Phone 7 y Windows Phone 8

Estrategias de código portable : #1 PCL - Portable Class Library

Service Locator Pattern in C#: A Simple Example

En XAML tenemos varias formas de escribir un código limpio y mantenible. Una de ellas es utilizar estilos, para ahorrarnos escribir una y otra vez los mismos valores y propiedades. Otra es el uso de DataTemplates, que nos permiten describir la estructura de un objeto con pelos y señales, pero aún tenemos una tercera, los UserControls.

¿Qué es un UserControl?

Un UserControl viene a ser un control que encapsula a su vez a otros controles dándoles además, un comportamiento propio.

Dicho control puede recibir parámetros, pero la implementación de esta funcionalidad no es del todo simple, así que me he creado un par de clases Base para facilitarme el trabajo.

BaseUserControl

public class BaseUserControl : UserControl { public event PropertyChangedEventHandler PropertyChanged; public BaseUserControl() : base() { } void SetValueDP(DependencyProperty property, object value, [System.Runtime.CompilerServices.CallerMemberName] String p = null) { SetValue(property, value); if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(p)); } } }

Esta clase limpia el cs del UserControl de la gestión del PropertyChanged.

Sin embargo, esta implementación es muy sencilla, y a veces necesito usar un Command y un CommandParameter en mis UserControls, para estos casos uso además la siguiente clase.

BaseCommandUserControl

public class BaseCommandUserControl : BaseUserControl { public BaseCommandUserControl() : base() { } public static readonly DependencyProperty TagProperty = DependencyProperty.Register("Tag", typeof(object), typeof(BaseCommandUserControl), null); public static readonly DependencyProperty CommandProperty = DependencyProperty.RegisterAttached("Command", typeof(ICommand), typeof(BaseCommandUserControl), new PropertyMetadata(null, OnCommandPropertyChanged)); public object Tag { get { return GetValue(TagProperty); } set { SetValue(TagProperty, value); } } public static void SetCommand(DependencyObject d, ICommand value) { d.SetValue(CommandProperty, value); } public static ICommand GetCommand(DependencyObject d) { return (ICommand)d.GetValue(CommandProperty); } protected static void OnCommandPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var control = d as BaseCommandUserControl; if (control != null) control.Tapped += OnTapped; } private static void OnTapped(object sender, TappedRoutedEventArgs e) { var control = sender as BaseCommandUserControl; var command = GetCommand(control); command.Execute(control.Tag); } }

De esta forma puedo, por ejemplo, enlazar un comando al Tap de la Grid principal del UserControl.

¿Y como sería la implementación del UserControl?

El CS del UserControl

public sealed partial class UCProfileButton : BaseCommandUserControl { public static readonly DependencyProperty ContentLineProperty = DependencyProperty.Register("ContentLine", typeof(string), typeof(UCProfileButton), null); public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header", typeof(string), typeof(UCProfileButton), null); public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(SymbolIcon), typeof(UCProfileButton), null); public UCProfileButton() : base() { this.InitializeComponent(); (this.Content as FrameworkElement).DataContext = this; } public string Header { get { return (string)GetValue(HeaderProperty); } set { SetValue(HeaderProperty, value); } } public string ContentLine { get { return (string)GetValue(ContentLineProperty); } set { SetValue(ContentLineProperty, value); } } public SymbolIcon Icon { get { return (SymbolIcon)GetValue(IconProperty); } set { SetValue(IconProperty, value); } } }

En nuestro UserControl añadimos las propiedades estáticas que queramos actualizar pasando parámetros desde la vista.

Y finalmente el XAML.

El XAML del UserControl

<local:BaseCommandUserControl x:Class="Msw.Presentation.Apps.Windows8.UserControls.UCProfileButton" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Msw.Presentation.Apps.Windows8.UserControls" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Button Style="{StaticResource ButtonProfileStyle}" HorizontalAlignment="Center" Visibility="{Binding ContentLine, Converter={StaticResource nullOrEmptyVisibilityConverter}}"> <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Width="260"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <AppBarButton Icon="{Binding Icon, Mode=OneWay}" IsCompact="True" Grid.RowSpan="2" IsHitTestVisible="False"/> <TextBlock Grid.Column="1" Text="{Binding Header, Mode=OneWay}" Style="{StaticResource SubheaderTextBlockStyle}" Foreground="White" /> <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ContentLine}" Style="{StaticResource BaseTextBlockStyle}" Foreground="White" /> </Grid> </Button> </local:BaseCommandUserControl>

Esta semana me ha tocado portar una App con un MVVM propio y varias capas a MVVM Cross. El proceso no ha sido trivial así que paso a explicar todos los cambios / añadidos que he hecho. Esto, por supuesto, sirve también para todos aquellos que os queráis meter en el interesante mundo del MVVM Cross comenzando o portando una de vuestras apps.

El ejemplo va para Windows 8, pero no debería ser muy diferente en el resto de plataformas, sobretodo en Windows Phone 8.

Capa de Windows 8

Paso 1: Instalar de nuget el Starter Pack de MVVM Cross.

Paso 2: Setup

La idea es crear una clase Setup que registre lo necesario para la plataforma. En mi caso, como ya trabajaba con Servicios, no he hecho aquí ningún cambio, básicamente he tenido que registrar dichos servicios desde aquí al ViewModelLocator (lo que en MVVM Cross se conoce como App, responsable de inicializar la aplicación y la gestión/inyección de dependencias). He respetado el nombre porque siempre lo habíamos llamado así, pero sed libres de nombrarlo App, de hecho ya se añade con este nombre al instalar el paquete de nuget en la capa del ViewModel.

public class Setup : MvxStoreSetup { public Setup(Frame rootFrame) : base(rootFrame) { } protected override IMvxApplication CreateApp() { var app = new Apps.Core.Mvvm.ViewModel.ViewModelLocator(); app.RegisterType(typeof(SConnectionService), typeof(IConnectionService)); app.RegisterType(typeof(SEncryptionService), typeof(IEncryptionService)); app.RegisterType(typeof(SGeolocationService), typeof(IGeolocationService)); app.RegisterType(typeof(SLaunchersService), typeof(ILaunchersService)); app.RegisterType(typeof(SMapsService), typeof(IMapsService)); app.RegisterType(typeof(SMessagingService), typeof(IMessagingService)); app.RegisterType(typeof(SNavigationService), typeof(INavigationService)); app.RegisterType(typeof(SNotificationService), typeof(INotificationService)); app.RegisterType(typeof(SResourceService), typeof(IResourceService)); app.RegisterType(typeof(SSettingsService), typeof(ISettingsService)); app.RegisterType(typeof(DataAccess), typeof(IDataAccess)); return app; } protected override IMvxTrace CreateDebugTrace() { return new DebugTrace(); } }

Paso 3: Modificar el App.xaml.cs

Al final del launched y antes del Windows.Current.Activate(); hay que añadir lo siguiente...

if (rootFrame.Content == null) { var setup = new Setup(rootFrame); setup.Initialize(); var startup = Cirrious.CrossCore.Mvx.Resolve(); startup.Start(); }

Obviamente tendremos que borrar la línea que hace que se navegue a la primera página.

Paso 4: Vistas

Las vistas han de utilizar el using

xmlns:views="using:Cirrious.MvvmCross.WindowsStore.Views"

y construirse en el XAML como 

views:MvxStorePage

También tendremos que ir al cs de la vista y hacer que la vista herede de MvxStorePage.

Si queremos, no obstante, podemos usar una clase PageBase (que quizás ya usábamos antes) que herede de la clase MvxStorePage.

*Nota: Si tienes algún override y te has cargado el base puede que algo no vaya bien.

Paso 5: UserControls

Podemos crear UserControls con su propio ViewModel. Para ello asignaremos el ViewModel al DataContext (en el XAML, por ejemplo)

DataContext="{Binding IndexViewModel,Source={StaticResource Locator}}

Si además tenemos una DependencyProperty y queremos asignarla a alguna propiedad del ViewModel haremos lo siguiente:

Creamos una propiedad de tipo DependencyProperty

public static readonly DependencyProperty HeaderPropery = DependencyProperty.Register("Header", typeof(string), typeof(UCTopBar), new PropertyMetadata(default(string)));

Creamos una propiedad de tipo el ViewModel que queramos.

IndexViewModel viewModel;

La asignamos en el constructor (en este caso se asigna la que hemos ido a buscar al ViewModelLocator desde la asignación al DataContext del XAML.

this.InitializeComponent(); viewModel = (IndexViewModel)this.DataContext;

Y finalmente enlazamos el DependencyProperty al ViewModel.

public string Header { get { return viewModel.HeaderText; } set { viewModel.HeaderText = value; } }

Desde el XAML, obviamente, enlazaríamos con la propiedad del ViewModel, haciendo un:

Text="{Binding HeaderText, Mode=OneWay}"

Hay que tener en cuenta que al cargar el ViewModel con la llamada al ViewModelLocator no seguirá el ciclo de vida habitual de MVVM Cross, ya que ni siquiera entrará en el InitBundle (lo veremos más adelante).

Capa del MVVM

Paso 1: Archivo ViewModelLocator (el ya nombrado App.cs de MVVM Cross).

Añadimos un método para cargar los servicios desde el Setup de la capa de plataforma.

public void RegisterType(Type tService, Type tInterface) { Mvx.RegisterType(tInterface, tService); }

En el Initialize cargamos las clases que queramos que se nos gestione mediante inyección de dependencias.

Por ejemplo, cargamos los ViewModels de esta capa mediante:

CreatableTypes() .EndingWith("ViewModel") .AsTypes() .RegisterAsLazySingleton();

Podemos cargar archivos de otras capas haciendo algo así:

typeof(IAddressRepository).Assembly.CreatableTypes() .EndingWith("Repository") .AsInterfaces() .RegisterAsLazySingleton();

Y finalmente registramos el ViewModel que queramos como inicio de la App.

RegisterAppStart();

También deberemos hacer un método, como hacíamos con el antiguo ViewModelLocator, para los ViewModels que no carguemos de forma habitual, como por ejemplo lo mencionado anteriormente de los UserControls.

public IndexViewModel IndexViewModel { get { try { return Mvx.Resolve(); } catch (Exception ex) { System.Diagnostics.Debug.WriteLine(ex.Message); } return Mvx.Resolve(); } }

Paso 2: ViewModels

El ViewModel ha de heredar ahora de MvxViewModel, cosa que no impide tener un ViewModelBase si queremos.

En cuanto al constructor, en el caso del ViewModelBase haríamos algo así.

public ViewModelBase(IMessagingService mesService, INotificationService notService, INavigationService navService, IResourceService resService) { this._messagingService = mesService; this._notificationService = notService; this._navigationService = navService; this._resourceService = resService; InitializeCommands(); }

Los commands muy parecidos a los habituales.

private Lazy _cmdGoBack; public ICommand CmdGoBack { get { return this._cmdGoBack.Value; } }

Y el InitializeCommands

private void InitializeCommands() { this._cmdGoBack = new Lazy(() => new MvxCommand(() => { Close(this); })); }

Éste en concreto cierra el ViewModel actual para ir atrás en la navegación.

Un ejemplo de ViewModel más completo que hereda de ViewModelBase

public CustomerViewModel(IConnectionService conService, IGeolocationService geoService, IManagementCustomer customerManagement, IManagementAgent agentManagement, IMessagingService mesService, INotificationService notService, INavigationService navService, IResourceService resService) : base(mesService, notService,navService,resService) { this._connectionService = conService; this._geolocationService = geoService; this._managementCustomer = customerManagement; this._managementAgent = agentManagement; InitializeCommands(); }

Navegación

ShowViewModel(new { LexId = 0 });

Con esto vamos al AddressViewModel pasándole un parámetro con nombre "LexId".

Para recoger estos parámetros...

protected async override void InitFromBundle(Cirrious.MvvmCross.ViewModels.IMvxBundle parameters) { int param = Convert.ToInt16(parameters.Data["LexId"]); await InitializeMapHeaderAndParamDependences(param); base.InitFromBundle(parameters); }

Éste método también nos servirá para inicializar nuestro ViewModel.

Si queremos, no obstante, podemos usar el método Start.

public override void Start() { base.Start(); }

Y para ir atrás se usa el ya citado Close.

Close(this);

Estado de navegación

Si quieres tener algunos datos cargados por si vuelves a la vista...

Usa el SaveStateToBundle para guardar todo lo que quieras (pasará automáticamente por aquí antes de ir a otro ViewModel).

protected override void SaveStateToBundle(IMvxBundle bundle) { bundle.Data["FilterIsVisible"] = _filterIsVisible.ToString(); bundle.Data["GridItem"] = _gridItem.ToString(); bundle.Data["HorizontalOffset"] = _horizontalOffset.ToString(); bundle.Data["SortOption"] = _sortOption.ToString(); bundle.Data["SearchText"] = _searchText; bundle.Data["FirstSortOption"] = _firstSortOption.ToString(); base.SaveStateToBundle(bundle); }

Y luego carga los datos mediante el ReloadFromBundle (pasará por aquí después del InitFromBundle y antes del Start (aunque si tienes algún await en alguno de estos métodos, esto no tiene porqué ser del todo cierto).

protected override void ReloadFromBundle(IMvxBundle state) { FilterIsVisible = Convert.ToBoolean(state.Data["FilterIsVisible"]); GridItem = Convert.ToInt16(state.Data["GridItem"]); HorizontalOffset = Convert.ToDouble(state.Data["HorizontalOffset"]); SortOption = Convert.ToInt16(state.Data["SortOption"]); SearchText = state.Data["SearchText"]; _firstSortOption = Convert.ToBoolean(state.Data["FirstSortOption"]); }

Hay que tener en cuenta que si hacemos un Close de un ViewModel y luego lo volvemos a abrir no pasará por el SaveStateToBundle ni por el ReloadFromBundle.

Convención de nombres

Si la vista se llama CustomerView el ViewModel debe llamarse CustomerViewModel, de no ser

así no lo cargará (a no ser que asignemos un método del ViewModelLocator al DataContext de

la vista, como hemos ejemplificado en el caso los UserControls).

Algunos enlaces de interés

MVVM Cross en Github

High Level Object

Configuración de App y Setup

Ciclo de vida de los ViewModel

Navegación

A mediados de semana, buscando cómo localizar Windows Phone 8.1, me encontré con un ilustrativo artículo de Johan Olsson en el que se explican las diferencias, en cuanto a localización, entre Windows Phone 8 y Windows Phone 8.1.

Pero ¿es posible aplicar el mismo procedimiento en una aplicación universal, en el proyecto Shared?

La respuesta es, sí, y el procedimiento es exactamente el mismo.

Cómo localizar una aplicación universal

Modificamos, si procede el "Idioma predeterminado" en el manifest de ambas plataformas.

En mi caso lo he puesto en "es", puesto que es genérico para cualquier español, si quisiera hacerlo más específico, debería poner es-ES.

Creamos la siguiente estructura de carpetas.

Básicamente, creamos una carpeta "Strings" en Shared y dentro de ella una carpeta por cada idioma que queramos que nuestra aplicación soporte, con un archivo Resources.resw en ella.

Ahora sólo nos falta llenar el archivo de Resources con los textos y llamarlo desde el XAML o código.

Un pequeño ejemplo de archivo de Resources sería el siguiente

En el primer caso, cuando carguemos la vista, nos cogerá, para el elemento con x:Uid="lblSuccess" la propiedad Text que le indicamos aquí.

El segundo caso es el que llamaremos desde código, aunque bien podríamos utilizar el primero, pidiendo el recurso con nombre "lblSuccess/Text".

Para llamarlo desde el XAML

<!-- recomiendo, aunque tengamos el texto localizado en resources, poner un texto igualmente, para poder visualizarlo desde el diseñador --> <TextBlock x:Uid="lblSuccess" Text="TestSuccess" Style="{StaticResource HeaderTextBlockStyle}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="YellowGreen" Tapped="LblSuccess_Tapped"/>

El TextBlock con x:Uid "lblSuccess" se cargará con la propiedad "Text" directamente del archivo de Resources, sobreescribiendo la que le hayamos asignado en el diseñador.

Para llamarlo desde código (si queremos lanzar MessageBox, Toast Notifications o lo que sea)

var map = ResourceLoader.GetForCurrentView(); string text = map.GetString("txtTapped");

Éste método ha cambiado un poco y aunque es posible seguir usando el antiguo, se recomienda usar este en los proyectos Windows 8.1 y Windows Phone 8.1.

Por último, decir que podemos crear otros archivos Resources con otros nombres, como por ejemplo uno para mostrar Errores, al que podremos llamar desde código mediante una línea.

Últimamente estoy trabajando con Lex.DB, una base de datos creada por Lex que ofrece algunas ventajas respecto a SQLite y que tiene un rendimiento muy convincente. Además ofrece la opción de usarse en proyectos Portable Class Library, con lo que todavía se vuelve más interesante.

El caso es que tras darle una vuelta de tuerca al ejemplo escrito en la página de Nokia Developer decidí hacer genéricos los métodos de la clase DataAccess, sobretodo para no escribir una y otra vez los métodos GET, UPDATE y REMOVE y bueno, aquí está el resultado.

Una pregunta que normalmente resolvemos mediante una página web tipo "What is my IP?" y que a priori parece fácil de solventar, pero para nada lo es, ni en Windows Phone ni en Windows 8.

Por suerte podemos utilizar el mismo "truco" para obtener la IP mediante una petición web asíncrona.

private static async Task GetPublicIP() { HttpWebRequest request = (HttpWebRequest)WebRequest.Create("http://checkip.dyndns.org/"); request.Method = "GET"; request.BeginGetResponse(new AsyncCallback(GetPublicIPCompleted), request); } private static void GetPublicIPCompleted(IAsyncResult ar) { string result = String.Empty; try { HttpWebRequest request = (HttpWebRequest)ar.AsyncState; using (HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(ar)) using (Stream streamResponse = response.GetResponseStream()) using (StreamReader streamRead = new StreamReader(streamResponse)) { result = streamRead.ReadToEnd(); int first = result.IndexOf("Address: ") + 9; int last = result.LastIndexOf(""); result = result.Substring(first, last - first); } } catch (Exception ex) { } }

Esta semana debía añadir un control de valoración en una de nuestras aplicaciones, dicho control debía permitir la visualización, pero también la modificación del valor, permitiendo tanto estrellas enteras como medias estrellas.

Exáctamente esto:

Tras un rato buscando, lo más cercano que encontré fue un control realizado por Shai Raiten. Sin embargo, su control era de visualización y no de entrada de datos, así que he hecho unos pequeños cambios.

Necesitaremos seguir tres pasos:

Crear el control de valoración

Crear el convertidor que dado un valor muestre las estrellas

Añadir el control de valoración a la vista.

Paso 1 - Creación del UserControl

En primer lugar deberemos crear el UserControl y asignar los recursos que necesitamos. Uno será el Converter, que crearemos más tarde, y el otro la string que usaremos para crear las estrellas.

<UserControl.Resources> <converter:RatingValueToWidthConverter x:Key="ratingValueToWidthConverter" /> <x:String x:Key="StarPath">F1 M 0,217.042L 227.5,217.042L 297.875, 0L 367.542,217L 595.542,217L 410.208,353.667L 480.708, 569.667L 297.208,436.667L 116.208,568.167L 185.708,352.667L 0,217.042 Z</x:String> </UserControl.Resources>

Evidentemente deberemos añadir el xmlns que del namespace donde crearemos el Converter, que en mi caso es:

xmlns:converter="using:AppRating.Converter"

Hecho esto deberemos crear el XAML del UserControl.

<Grid x:Name="MainGrid"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Path Name="star" Stretch="Uniform" Data="{StaticResource StarPath}" Grid.Column="0" Grid.Row="1" Fill="Gold" Margin="4" HorizontalAlignment="Left" VerticalAlignment="Top" d:LayoutOverrides="Width, Height" /> <Path x:Name="star2" Stretch="Uniform" Data="{StaticResource StarPath}" Grid.Column="1" Grid.Row="1" Fill="Gold" Margin="4" HorizontalAlignment="Left" VerticalAlignment="Top" /> <Path x:Name="star3" Stretch="Uniform" Data="{StaticResource StarPath}" Grid.Column="2" Grid.Row="1" Fill="Gold" Margin="4" HorizontalAlignment="Left" VerticalAlignment="Top" /> <Path x:Name="star4" Stretch="Uniform" Data="{StaticResource StarPath}" Grid.Column="3" Grid.Row="1" Fill="Gold" Margin="4" HorizontalAlignment="Left" VerticalAlignment="Top" /> <Path x:Name="star5" Stretch="Uniform" Data="{StaticResource StarPath}" Grid.Column="4" Grid.Row="1" Fill="Gold" Margin="4" HorizontalAlignment="Left" VerticalAlignment="Top" /> <TextBlock Text="{Binding Header, Mode=OneWay}" Grid.ColumnSpan="5" Style="{StaticResource BaseTextBlockStyle}" Margin="0,12"/> <Rectangle x:Name="Mask" Fill="{ThemeResource ApplicationPageBackgroundThemeBrush}" VerticalAlignment="Top" Height="{Binding ElementName=star, Path=ActualHeight}" HorizontalAlignment="Right" Width="{Binding Rating, Converter={StaticResource ratingValueToWidthConverter}}" RenderTransformOrigin="0.5,0.5" Grid.ColumnSpan="5" Grid.Row="1" Margin="0,4"/> <Path Name="border" Stretch="Uniform" Data="{StaticResource StarPath}" Grid.Column="0" Grid.Row="1" StrokeThickness="1" Stroke="Goldenrod" Margin="3" HorizontalAlignment="Left" VerticalAlignment="Top" d:LayoutOverrides="Width, Height"/> <Path x:Name="border2" Stretch="Uniform" Data="{StaticResource StarPath}" Grid.Column="1" Grid.Row="1" StrokeThickness="1" Stroke="Goldenrod" Margin="3" HorizontalAlignment="Left" VerticalAlignment="Top"/> <Path x:Name="border3" Stretch="Uniform" Data="{StaticResource StarPath}" Grid.Column="2" Grid.Row="1" StrokeThickness="1" Stroke="Goldenrod" Margin="3" HorizontalAlignment="Left" VerticalAlignment="Top" /> <Path x:Name="border4" Stretch="Uniform" Data="{StaticResource StarPath}" Grid.Column="3" Grid.Row="1" StrokeThickness="1" Stroke="Goldenrod" Margin="3" HorizontalAlignment="Left" VerticalAlignment="Top" /> <Path x:Name="border5" Stretch="Uniform" Data="{StaticResource StarPath}" Grid.Column="4" Grid.Row="1" StrokeThickness="1" Stroke="Goldenrod" Margin="3" HorizontalAlignment="Left" VerticalAlignment="Top" /> <Canvas Grid.ColumnSpan="5" Grid.Row="1" Tapped="Canvas_Tapped" Background="Transparent"/> </Grid>

Como veis, he hecho alguna modificación respecto al código de Shai Raiten, he creado una Grid con columnas para albergar las estrellas en lugar de usar margins (de esta forma nos será más fácil controlar el tamaño del control) y he añadido un Canvas al final de todo que mediante un evento Tapped nos permitirá modificar el Rating pinchando en las estrellas.

Finalmente iremos al CS del usercontrol para añadir las propiedades Header y Rating al UserControl, para que puedan ser modificadas desde el XAML de la vista.

public static readonly DependencyProperty RatingProperty = DependencyProperty.Register("Rating", typeof(double), typeof(UCRating), null); public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register("Header", typeof(string), typeof(UCRating), null); public event PropertyChangedEventHandler PropertyChanged; public UCRating() { this.InitializeComponent(); (this.Content as FrameworkElement).DataContext = this; } void SetValueDP(DependencyProperty property, object value, [System.Runtime.CompilerServices.CallerMemberName] String p = null) { SetValue(property, value); if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(p)); } } /// Texto del TextBlock public string Header { get { return (double)GetValue(HeaderProperty); } set { SetValue(HeaderProperty, value); } } /// Valoración de las estrellas public double Rating { get { return (double)GetValue(RatingProperty); } set { SetValue(RatingProperty, value); } }

Además del evento del Canvas que nos servirá para actualizar el control.

/// Evento que se dispara al hacer Tap en el canvas private void Canvas_Tapped(object sender, TappedRoutedEventArgs e) { var position = e.GetPosition((Canvas)sender).X; double max = ((Canvas)sender).ActualWidth; Rating = 5 - Math.Round(((-position + max) * 5 / max) * 2, MidpointRounding.AwayFromZero) / 2; }

Le he añadido un Match Round para que permita la entrada de valor enteros y medios.

Paso 2 - Creación del Converter

Aquí no hay mucho secreto, creamos un convertidor que dado un valor de tipo double nos devuelva un ancho, que hará que la máscara nos muestre pintadas las estrellas que tocan. 

/// Convertidor que devuelve el ancho dependiendo de un double public class RatingValueToWidthConverter : IValueConverter { //ancho del control private const double Max = 150; public object Convert(object value, Type targetType, object parameter, string lang) { var rate = (double)value; return ((((rate) * Max) / 5.0) - Max) * -1.0; } public object ConvertBack(object value, Type targetType, object parameter, string lang) { throw new NotImplementedException(); } }

Hay que tener en cuenta que si queremos modificar el ancho del control lo deberemos modificar también aquí en el valor Max.

Paso 3 - Añadir el UserControl al XAML de la vista

Finalmente añadimos el "xmlns" y el control a la vista.

xmlns:uc="using:AppRating.UserControls"

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <uc:UCRating x:Uid="UCRating" Header="Valoración" Rating="3.5" Width="150" VerticalAlignment="Center"/> </Grid>

Podemos pasar parámetros de diversas formas, podemos querer pasar una simple string, en cuyo caso lo más sencillo es usar QueryString, o cualquier otro tipo de objeto, para el que usaremos NavigationEventArgs.

Uso de QueryString

Es muy sencillo, pero a cambio sólo es útil cuando queremos pasar poca información, sea cual sea, pero siempre en formato de cadena de texto.

Podemos, por ejemplo, crear un botón en nuestra primera vista que navegue a la siguiente enviando un parámetro, en este caso la string “naranjas”, aunque podríamos pasar un entero o un boleano sin problema.

private void BtnHeader_Tap(object sender, GestureEventArgs e) {     Button btn = (Button)sender;     this.NavigationService.Navigate(     new Uri(         String.Format("/Views/DestinationPage.xaml?parameter1={0}", "naranjas")         , UriKind.Relative)); }

Y en la página de destino

protected override void OnNavigatedTo(NavigationEventArgs e) {     base.OnNavigatedTo(e);     string parameter = string.Empty;     if (NavigationContext.QueryString.TryGetValue("parameter1", out parameter))     {         this.LblHeader.Text = parameter;     } }

De esta forma actualizaríamos automáticamente el texto LblHeader de la segunda vista con el texto enviado desde la primera.

Y qué pasa si queremos pasar varios parámetros? ningún problema, modificamos la Uri en la primera vista de la siguiente forma:

new Uri( String.Format("/Views/DestinationPage.xaml?parameter1={0}&parameter2={1}", "plátanos", "fruta") , UriKind.Relative)

Y en la página de destino añadiríamos otro TryGetValue, así de fácil.

if (NavigationContext.QueryString.TryGetValue("parameter2", out parameter)) {     this.LblAppName.Text = parameter; }

Uso de NavigationEventArgs

Necesitaremos implementar un poco más de código, pero a cambio podremos enviar cualquier tipo de objeto, por ejemplo una Lista o una Clase entera.

En la segunda vista (la de destino) creamos una variable pública con el tipo de objeto que queramos pasar.

public int DestinationParameter;

Y en el OnNavigatedTo operaremos con dicha variable, pues ya se habrá actualizado su valor desde el OnNavigatedFrom de la página de origen, que en breve implementaremos.

this.LblNumber.Text = DestinationParameter.ToString();

El último paso es implementar el override del OnNavigatedFrom

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e) {     // NavigationEventArgs retorna la página de destino     DestinationPage destinationPage = e.Content as DestinationPage;     if (destinationPage != null)     {     // cambiar propiedad de una propiedad pública de la página de destino     destinationPage.DestinationParameter = 5;     } }