Template 10. Un nuevo camino para hacer aplicaciones UWP. ¡La churrera está en marcha!

Icon for package Template10

 

Template 10: “Una amplia biblioteca de helpers, servicios y clases para las aplicaciones UWP con el fin de maximizar la genialidad y minimizar lo repetitivo.”

UWP se encuentra entre nosotros y como sabemos, viene con muchas y nuevas caráctericticas: Device families, SplitView/Hamburger Menu, Relative Panel, StateTriggers/AdaptiveTrigger, etc. Si bien es cierto, la creacion de aplicaciones siguie siendo repetitiva teniendo que crear la estructura base o esqueleto de nuestra aplicación cada vez que comenzamos con una nueva. Es cierto que podemos crear una plantilla y guardarla para partir de ella. También es cierto que seguiremos teniendo que repetir código o pensar en la navegación, etc. Para evitar “todo” esto ¡llega TEMPLATE 10!

 

Con Template10 podremos comenzar a crear aplicaciones como UWP “churros” y disponer en ellas desde el momento cero, de “todo” lo imprescindible.

  • Controles
  • Behaviors
  • Services
  • Converters
  • MVVM y, ademas compatible con con MVVMLight (Galasoft) y IoC/DI.
  • etc.

Personalmente lo que mas me gusta de Template 10, es toda la funcionalidad que incluye Out-of-the-box:

  • Plantillas de projectos “Mínima” o “Básica”
  • BootStrapper. Menos eventos en nuestro “App.xaml.cs”. En lugar de: OnLaunched, OnActivated, OnFileActivated, OnCachedFileUpdaterActivated, etc. Unicamente necesitaremos dos: “ public override async Task OnInitializeAsync(IActivatedEventArgs args)” y “   public override async Task OnStartAsync(StartKind startKind, IActivatedEventArgs args)”
  • Menu Hamburger
  • Navegación y control del Menú, sin tener que codificar practicamente nada.
  • Adios a “Behaviors SDH (XAML)”. Referencia con advertendia de obsolescencia y Bienvenida: “Microsoft.Xaml.Behaviors.Uwp.Managed”, como Open Source.
  • El códio se encuentra en Gihub: https://github.com/Windows-XAML/Template10 y además, con algunos ejemplos para hacerlo aún más fácil.

Los pasos que seguiremos para la ejecución de una aplicación haciendo uso de Templat10 son los siguientes:

  1. Descargar el instalable (v1.5) para la plantilla de proyecto desde aquí.
  2. Crear un nuevo proyecto de tipo Template 10 (Minimal): image
  3. Actualizar desde NuGet el paquete “Template10” e incluir el paquete “Microsoft.Xaml.Behaviors.Uwp.Managed”
  4. En estos momento y hasta que sea actualizada la plantilla de proyecto, modificar el constructor de la clase Shell.xaml.cs, sustituyendo el parámetro “NavigationService” por su interfaz “INavigationService” tal y como puede verse en la siguiente image: image
  5. F5 y voilá…

imageimage image

Espero que haya sido de utilidad.

Gracias @jerrynixon, por ofrecernos tan apreciado trabajo y hacernos más facil la creación de nuestas aplicaciones. “Thanks so much”

Saludos
Juanlu, ElGuerre

[TIP Windows10 – x:Bind]: El fin de los parámetros <null> desde un “AppBarButton”

Muy buenas,

Al desarrollar aplicaciones Window Phone 8/8.1 con MVVM, el paso de parámetros desde un boton “AppBarButton” de una “CommandBar”,  siempre se convertía en una tarea un poco tediosa y, por consiguiente, teníamos que implementar algun tratamiento extra . Ahora, para las aplicaciones universales y gracias a “x:Bind”, ya no será necesario. Veamos como solucionarlo con un pequeño cambio.

Situación / Problema:

Enlazando el DataContext de una página con su ViewModel. Aunque podría se cualquiera, en en este ejemplo usamos el Contenedor de Unity (SimpleIoC) de MvvmLight de Galasoft.

image

A continuación, el enlazado con el “Comand” se hace a partir del DataContext antes definido. Sin embargo y, aunque debería ocurrir lo mismos para el “CommandParameter”, no es así. En el Comando (RelayCommand) implementado en el ViewModel, el parámetro recibido siempre tiene el valor nulo en lugar del objeto pasado “lvTasks” (ListView, en este caso).

image

Nota: Esto ocurre ya que el botón no es capaz de localizar el elemento “lvTasks” definido en la página, puesto que el enlazado lo está haciendo con el ViewModel. ¡Lo curioso es que esto es así para este tipo de botones pero nó para otros controles!

 

Solución:

Hasta ahora, para solucionar los inconvenientes anteriores, teníamos que crear una propiedad adicional en el ViewModel, cambiar los DataContext en el “CodeBehind” y otras alternativas que podemos ver buscando en Google. La cuestión es que supone ensuciar el código para hacer algo muy trivial.

Desde que contamos con “x:Bind” en Windows 10, la solucion es mucho más simple. Cambiamos “Binding ElementName=lvTasks” por “x:Bind lvTasks” y todo solucionado:

image

Como vemos, x:bind es capaz de localizar el control “lvTasks” en la página y por tanto nuestro RelayCommand deja de recibir parámetros nulo.

image 

Recordemos además, que el uso de x:Bind crea un enlace a datos fuertemente tipados y aporta mejoras de rendimiento.  Para más informació sobre x:Bind, podéis echar un vistazo a este post de nuestro compañero @JavierSuarezRuiz

Espero que sea util.

Salduos
Juanlu, ElGuerre