[OFFTOPIC] Nace DevsDNA

Hola a todos!

Desde Noviembre de 2014 empecé la aventura de trabajar como autónomo, con ganas de buscar nuevos retos y de intentar crear algo diferente.

Hoy quiero contaros una nueva aventura. Estos últimos 10 meses han sido una montaña rusa de trabajo, emociones y mucha diversión. Viendo los resultados me animé, junto a mi mujer, a ir un paso más allá y así nace una nueva empresa, DevsDNA.

devsdna

DevsDNA está pensada como una empresa donde buenos desarrolladores puedan realizar buenos e interesantes proyectos móviles, principalmente, trabajando desde casa, para no tener que mover toda tu vida por un trabajo. Creemos en la responsabilidad de las personas y que hoy en día existen suficientes herramientas como para poder mantener una comunicación fluida estemos donde estemos cada uno de nosotros. Por ahora somos una empresa pequeña, el equipo está compuesto ahora mismo por Beatriz Márquez, Ciani Afonso, Rubén Fernandez y un servidor.

image

Tenemos grandes proyectos en el tintero, queremos desarrollar nuestras propias apps multiplataforma internamente y seguir trabajando en apoyo a la comunidad, por ejemplo patrocinando el evento de Windows 10, Hel10 World! del 22 de Octubre organizado por Microsoft.

Pretendemos ser un lugar donde trabajar a gusto y hacer cosas de las que sentirnos orgullosos, con Windows 10, Xamarin o WPF. Solo el tiempo dirá si lo conseguimos o no…

Mientras tanto, puedes darte una vuelta por nuestra web, ver algunos de los proyectos en los que colaboramos y conocer más sobre nosotros y nuestra filosofía.

Por cierto! Buscamos desarrolladores!

Si crees que cumples estos requisitos:

  • Controlas Xamarin, Windows Phone, Windows 10.
  • Al oir SCRUM, MVVM, IoC, Servicios no te mareas.
  • Te comunicas bien en XAML y C#.
  • No quieres tocar nada de Javascript o HTML5.
  • Te sientes responsable para trabajar a distancia con libertad de horarios.
  • Te gusta hacer las cosas bien y sentirte orgulloso de tu trabajo.
  • Escribes en un blog, haces eventos o simplemente te gusta colaborar con la comunidad de alguna forma.

Entonces puede que este sea tu sitio ideal para trabajar! envíanos un email a info@devsdna.com con el asunto [Trabajo Desarrollador]  y tu CV actualizado, enlaces a GitHub, Blog… y hablaremos!

Un saludo y Happy Coding!

[MATERIALES] TLP Innova Tenerife 2015

Hola a todos!

El 16 y 17 de Julio tuve la gran suerte de poder participar, junto a grandes amigos y compañeros como Ciani Afonso, Santiago Porras, Alberto Díaz, Javier Suarez, Vanessa Estorach o Bruno Capuano, en la edición 2015 de TLP Innova.

Cabecera_Tw_TLPInnova_2015_azul

TLP Innova forma parte de la Tenerife Lan Party, dedicandose a los profesionales de nuevas tecnologías.

En esta ocasión pude participar con 3 charlas/talleres:

  • El Jueves 16 realicé un taller de 3 horas sobre Xamarin Forms, en el que intentamos desarrollar una app multiplataforma que conectase con un servicio meteorológico.
  • El Viernes 17, junto a Javier Suarez, tuve una charla sobre el futuro que viene con Windows 10: Hololens y Bridges.
  • El Viernes 17, casi a última hora, una charla sobre Xamarin y como te ayuda a llegar a todos los clientes de una forma más efectiva.

A continuación os dejo las Slides, tanto del taller como de las charlas. Las de la charla de futuro, están en el SlideShare de Javier Suarez y se las robo con cariño para ponerlas aquí también:

También os dejo aquí los proyectos de ejemplo que usamos en el taller de Xamarin.Forms para que podáis darles un vistazo y usarlos como referencia:

ver-github1

Por último, pero no menos importante, una relación de artículos que han publicado el resto de compañeros sobre la TLP, para que no os perdáis nada:

 

Un saludo y Happy Coding!

[EVENTO] Windows 10 Developer Readiness by MVPs

Hola a todos!

Windows 10 developer readiness

El próximo día 11 de Junio se celebrará un evento online sobre desarrollo para Windows 10, el “Windows 10 developer readiness, powered by MVPs”. Se trata de un evento global. En cada país participante, MVPs locales han preparado contenido para ayudar a los desarrolladores a empezar a crear apps para Windows 10.

Windows 10 Developer Readiness - Powered by MVPs

En España, Javier Suarez Ruiz, Rafael Serna Medina, Bruno Capuano y un servidor intentaremos contarte todas las novedades sobre Windows 10, diseño adaptativo, nuevos controles, XAML, la nueva Store e incluso IoT… ¿Te lo vas a perder?

¿Cuando?

El jueves 11 de Junio, empezando a las 19:00 (GMT+1) y hasta las 22:00 (GMT+1), estaremos hablando de todas estas novedades tan interesantes.

¿Donde?

Online! Podrás acceder usando Skype for business. Pero primero tendrás que registrarte!! Puedes hacerlo desde el siguiente enlace:

https://mvp.eventbuilder.com/event?eventid=f6j8t3

¿Quienes serán los ponentes?

Pues tenemos un cartel de lujo, en el que es un placer poder participar:

¿De qué hablaremos?

La agenda, aunque puede variar ligeramente, será más o menos como sigue:

  1. Introducción a Windows 10
  2. Diseño adaptativo en Windows 10
  3. Nuevos Tiles
  4. Nuevos Controles
  5. Novedades en XAML
  6. IoT con Windows 10

Nos vemos el 11!

Pues eso, no nos falléis, os esperamos a todos allí dispuestos a contestar todas vuestras preguntas y dudas y a compartir lo que sabemos de Windows 10.

Un saludo y Happy Coding!

[Windows 10] Novedades para desarrolladores 4 de N

Hola a todos,

Bienvenidos a la 4º entrega de la serie sobre Windows 10. En este artículo haremos un parón en cuanto a las novedades. En su lugar vamos a ver… como reparar nuestros antiguos proyectos de Visual Studio 2015 CTPX para que continuen funcionando en Visual Studio 2015 RC. Pero antes, el índice de la serie:

  1. Windows 10, Novedades para desarrolladores 4 de N: Visual Studio 2015 RC

Hace un par de semanas, durante el //Build 2015, Microsoft liberó la versión Release Candidate de Visual Studio 2015. Como suele ocurrir cuando trabajamos con versiones CTP de cualquier herramienta, los cambios introducidos por la versión RC han roto los proyectos anteriores de aplicaciones universales para Windows 10. Si intentas cargar un proyecto creado con la CTP5/6 de Visual studio verás el siguiente mensaje:

image

Puede llevar a equivocos, pues nos indica que necesitamos ¿actualizar? nuestro Visual Studio. Lo que ocurre es que en el CSPROJ de nuestro proyecto está indicada una versión de la plataforma de aplicaciones universales (UAP) más pequeña que la usada por Visual Studio 2015 RC. Lo que tenemos que hacer es presionar OK.  El proyecto no se cargará y se mostrará como “Update required” en el explorador de soluciones. Vamos a solucionarlo.

En primer lugar necesitaremos editar el archivo CSPROJ. haz click derecho sobre el proyecto en el explorador de soluciones y escoge la opción “Edit XXXXXX.csproj”. En el XML del archivo de proyecto busca los nodos: TargetPlatformVersion y TargetPlatformMinVersion. Verás que su valor está establecido en 10.0.10030.0, que es el valor antiguo. Con la nueva versión de Visual Studio 2015 RC, este valor debería ser 10.0.10069.0. Sustituye el valor antiguo por el nuevo. guarda los cambios, cierra el archivo y haz click derecho sobre el proyecto de nuevo. En esta ocasión escoge la opción “Reload project”.

Enhorabuena, ahora tu proyecto ya se ha abierto en Visual Studio. Pero si intentas compilarlo te dará algunos errores de que le faltan packages de NuGet para compilar. La versión de ApplicationInsights usada en la CTP y la RC ha cambiado, así que lo primero será actualizar los paquetes de Application Insights a la última versión.

Haz click derecho sobre el nodo “References” del proyecto > Manage NuGet packages. En la ventana de NuGet selecciona el filtro “Upgrade available” y asegurate de tener marcado el check de “include prerelease”:

image

Se mostrarán varios resultados. Actualizando el primer paquete Microsoft.ApplicationInsights, ya descarga la versión actualizada del resto, por lo que es el único que necesitamos actualizar.

Otro paso más es actualizar el archivo applicationinsights.config. Este contiene los modulos que carga application insights al instanciarse y han cambiado. Lo más sencillo es crear un nuevo proyecto y copiar los que incluye allí por defecto:

<?xml version=”1.0encoding=”utf-8“?>
<ApplicationInsights xmlns=”http://schemas.microsoft.com/ApplicationInsights/2013/Settings“>
  <TelemetryModules>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.Implementation.Tracing.DiagnosticsTelemetryModule, Microsoft.ApplicationInsights“/>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.Windows.SessionTelemetryModule, Microsoft.ApplicationInsights.Extensibility.Windows“/>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.Windows.PageViewTelemetryModule, Microsoft.ApplicationInsights.Extensibility.Windows“/>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.Windows.UnhandledExceptionTelemetryModule, Microsoft.ApplicationInsights.Extensibility.Windows“/>
  </TelemetryModules>
  <TelemetryChannel Type=”Microsoft.ApplicationInsights.Channel.PersistenceChannel, Microsoft.ApplicationInsights.PersistenceChannel“/>
  <ContextInitializers>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.ComponentContextInitializer, Microsoft.ApplicationInsights“/>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.DeviceContextInitializer, Microsoft.ApplicationInsights“/>
  </ContextInitializers>
  <TelemetryInitializers>
    <Add Type=”Microsoft.ApplicationInsights.Extensibility.Windows.UserContextInitializer, Microsoft.ApplicationInsights.Extensibility.Windows“/>
  </TelemetryInitializers>
</ApplicationInsights>

Ya solo nos queda añadir dos nuevos paquetes de NuGet a nuestra aplicación:

  • Microsoft.ApplicationInsights.PersistanceChannel
  • Microsoft.ApplicationInsights.WindowsApps

Una vez hecho esto, todo debería funcionar… o casi todo. Si hacemos un rebuild de la solución, pasará correctamente y se ejecutará también perfectamente.

Pero si miramos el panel de errores, veremos que muestra varios warnings referentes al certificado de la aplicación (nombreapp_TemporaryKey.pfx). Por ahora podemos eliminarlo y no afectará a la funcionalidad. Cuando el editor visual de appxmanifest esté disponible en próximas versiones podremos regenerarlo nuevamente.

Con estos pequeños trucos, deberías tener tu proyecto funcionando de nuevo en Visual Studio 2015 RC.

Un saludo y Happy Coding!

[EVENTO] Windows 10 GameJam Sevilla 2015

Los pasados días 15, 16 y 17 de mayo se organizó en Sevilla la Windows 10 GameJam, donde tanto profesionales como estudiantes se reunieron para aprender más sobre Windows 10 y desarrollar algunos juegos sobre la plataforma.

image

El primer día de la GameJam se dedicó por completo a sesiones de formación sobre la plataforma.

En concreto yo hice dos sesiones: Introducción a Windows 10 y Nuevos controles en Windows 10. A continuación puedes ver las slides de ambas charlas:

Y las demos las puedes descargar de GitHub aquí.

El segundo y tercer día se dedicaron los equipos a desarrollar juegos/apps. Finalmente se montaron dos equipos que optaron por desarrollar un juego cada uno. Gracias a los chicos de Wave Engine, que han estado todo el fin de semana en los foros pendientes de las dudas e incluso pasaron por aquí a enseñarnos como funcionaba ese estupendo motor de juegos.

Uno de los juegos se llamó Hungry Birds:

WP_20150517_17_09_25_Pro

El otro se inspiró en UNEPIC con algunos cambios en la historia, los gráficos… (por cierto si no conocéis UNEPIC, el de verdad, ya estáis tardando en probarlo y comprarlo!!)

WP_20150517_17_18_15_Pro

Un fantástico fin de semana, divertido y en el que todos hemos aprendido muchísimo. Aquí algunas fotos que lo atestiguan:

WP_20150515_11_19_15_Pro

WP_20150515_16_30_43_Pro

WP_20150517_13_18_16_Pro

Un saludo y Happy Coding!

[HOLOLENS] Build 2015: Holographic Academy

Hola a todos!

Todavía con algo de Jet Lag, pero ya en casa y empezando a analizar la experiencia de este //Build 2015, el tercero consecutivo al que tengo la suerte de asistir.

Un evento como el //Build es muy intenso, dos días  y medio en los que, normalmente, tienes entre 8 y 10 sesiones oficiales en paralelo cada hora, sin contar con focus groups, sesiones privadas y otros bajo invitación. Total, que te tienes que comer la cabeza para elegir que ver en directo y que ver en Channel9.

En esta edición se han presentado cosas interesantísimas como los proyectos Astoria e Islandwood, para traer apps de Android y iOS respectivamente a Windows, y de los que hablaré más adelante.

Pero había un rey indiscutible, un producto que todo el mundo estaba esperando y que muchos incluso teníamos la esperanza de poder llevarnos a casa, como regalo o pagando un programa Early adopter… Hablo de HoloLens. Para que os hagáis una idea del nivel de excitación durtante la Keynote, en un momento dado Alex Kipman, padre de Kinect y Hololens, anuncia que han traido “cientos de unidades” al Build y el público entra en modo “Berserker” automáticamente… hasta que dice que solo son para probarlas, no para llevarle a casa… puedes ver el subidón y consiguiente bajón en el video de la Keynote (2:51:37).

En realidad si que llevaron cientos de HoloLens al Build para poder probarlas en lo que llamaron la “Holographic Academy”.

holoacademy

En grupos de 60 personas, con un mentor cada 2 asistentes, un PC para cada uno y unas HoloLens también para cada uno, nos metieron en una sala, donde nos quitaron todo aparato electrónico, y nos permitieron durante cuatro horas jugar con Unity, Visual Studio y Hololens, probando nuestro código directamente en el hardware.

Lo mejor de todo es que, aunque no nos dejaron sacar fotos o grabar vídeos, si que nos dieron carta blanca para hablar sobre la experiencia… así que vamos allá.

Durante tres horas, nos guiaron por una serie de tutoriales muy sencillos para crear apps 3D para Hololens usando Unity y Visual Studio, cubriendo los siguientes aspectos:

  • Setup inicial y despliegue
  • Interacción con las manos
  • Interacción con la cabeza
  • Interacción con la voz
  • Sonido posicional
  • Colisiones con el mundo real

Setup inicial y despliegue

Cuando trabajas con un dispositivo como HoloLens, que además está en preview, esperas que sea de todo menos sencillo. Pero en esta ocasión, no fue así. Los pasos a realizar para poder desplegar una escena de Unity a las HoloLens fueron extremadamente simples, incluso para alguien con muy poca experiencia en Unity como yo.

En primer lugar tuvimos que configurar la distancia interpupilar en  las HoloLens, algo normal en este tipo de aparatos y que también debemos hacer en Oculus Rift si queremos obtener los mejores resultados. Básicamente se trata de la separación en milimetros entre el centro de nuestras pupilas.

Para configurar las Hololens, estas disponen de un servidor web al que podemos acceder cuando las conectamos por USB y que también nos permitía arrancar apps instaladas en el dispositivo y cerrar procesos en ejecución.

El despliegue de apps fue muy sencillo. Compilas la app en Unity para generar la solución de Visual Studio, abres la solución en Visual Studio, conectas las HoloLens por USB y haces un “Start without debugging”, te pones las HoloLens, quitas el USB… y listo! Ya tienes tu app ejecutando y ante tus ojos!

Como dato curioso, cada vez que acababamos de usar las HoloLens, teníamos que volver a entrar a la web que llevan incorporadas (127.0.0.1:100800) y en la pestaña de administración de apps teníamos que matar el proceso de la app. Supongo que son flecos que quedan por pulir y que esta parte se mejorará en la versión final que se haga pública. Tampoco nos dijeron si podiamos o no depurar, solo nos indicaron que siempre lanzasemos la app sin depuración.

Interacción con las manos.

La interacción con el mundo virtual se puede realizar mediante las manos, con un gesto muy simple de click que consiste en levantar el dedo índice perpendicular al dedo pulgar, formando una L al reves con la mano derecha, bajando el dedo índice hasta tocar el pulgar para indicar un click. Ha este gesto lo llaman “Air tap” y es todo lo que necesitamos para interactuar con nuestro mundo virtual, seleccionar objetos, arrastrarlos, soltarlos o ejecutar acciones sobre ellos. Hicimos una demo que se componía de un bloq de notas con dos esferas flotando sobre el, al mirar las esferas y hacer “air tap” sobre ellas, automáticamente caían, rodaban por el bloq de notas y caían fuera de este hacia el infinito (todavía no habíamos puesto el reconocimiento de las superficies reales).

Interacción con la cabeza.

Que no con la vista directamente. En un primer momento pensaba que Hololens haría un tracking de los ojos, pero realmente hace un tracking de la cabeza. Calcula automáticamente el vector direccional de hacia donde apunta nuestra cabeza y expone APIs para leer este vector así como comprobar contra que elementos del mundo virtual colisiona, de forma que nos permitía situar un objeto (un circulo) justo en el punto de colisión de nuestro vector de la cabeza con el objeto virtual, algo así como un puntero que facilitaba seleccionar objetos. a esta interacción la llamaban “Gaze”, mirada en español.

Interacción con la voz.

Esta última forma de interacción es, a mi entender, una de las más potentes de todas. Como las otras dos, la sencillez extrema de su implementación parece de mentira, pero es que solo con 1 línea de código podías atar un texto a la ejecución de un comando de un objeto. En mi caso definí dos textos:

  • I Love Holograms” que ejecutaba el comando de reset del mundo virtual para empezar de 0.
  • Drop Sphere” que ejecutaba el comando DropSphere que había definido anteriormente, sobre la esfera que tuviese seleccionada con la vista.

En una sala con música suave, unas 80 personas entre asistentes y tutores, no falló ni una sola vez el reconocimiento de voz, y eso que mi inglés… bueno, que no tengo acento nativo precisamente. Si que, a diferencia del resto de gestos, el reconocimiento de voz tenía un pequeño lag, de un par de segundos entre que pronunciabas el comando y ejecutaba la acción. Otro punto a pulir un poco más para la versión final.

Sonido posicional.

Cuando se habla de Hololens, siempre se referencia la posibilidad de mostrar hologramas sobre el mundo real. Pero, ¿Qué pasa con el sonido? Pues, de verdad creedme, es tan espectacular o mas que la imagen.

Las Hololens tienen dos pequeños altavoces rojos, que no te tapan los oidos en ningún momento y que se pegan a la parte superior de tu oreja, parece que realizan un efecto de vibración sobre el cartílago de la misma que es lo que transmite el sonido perfectamente. Si te quitabas las Hololens y te acercabas a los auriculares apenas escuchabas nada, pero en cuanto te las ponías escuchabas los sonidos que reproducian perfectamente nítidos. Si estabas en la posición adecuada claro. Y digo adecuada, porque el sonido puede ser ambiental desde un punto focal definido en Unity o emitido por un objeto. En cualquiera de los dos casos el sonido (su volumen y su posición percibida) varía según nuestra posición. Para probarlo hicimos un pequeño juego del escondite en Unity, donde un objeto reproducía una canción, se posicionaba aleatoriamente a nuestro alrededor y teníamos que encontrarlo solo por el sonido… además una vez que lo encontrabas, variaba su posición de nuevo aleatoriamente. Realmente impresionante lo bién que funcionaba.

Colisiones con el mundo real.

Hasta aquí, todo maravilloso. Pero cuando las esferas de la demo del bloc de notas caían al suelo, desaparecían sin colisionar con los objetos reales. Para llevar a cabo esto, solo tuvimos que agregar un objeto del kit de hololens a nuestra escena en Unity. Este objeto nos permitía dibujar la malla del mundo real en wireframe, opaca o ocultarla. Una vez puesto, automáticamente los objetos colisionaban con el mundo real. Además, la malla no era estática, se redibujaba constantemente por lo que podías tirar un objeto en una dirección y poner un obstaculo, una silla por ejemplo, en su camino y el objeto virtual colisionaba con la silla del mundo real… impresionante.

Lo bueno…

Fueron suficientes para hacer 7 demos muy sencillas, pero que utilizaban todos los aspectos de Hololens, gestos, tracking de cabeza, voz, colisiones, sonido… lo que más me sorprendio fue la sencillez para desarrollar usando toda esta tecnología. Muchas cosas como las colisiones con el mundo real ™ ya te las daba automágicamente Hololens, el sonido posicional, el crear una escena y que fuese visible…

El equipo de Hololens ha decidido mapear las unidades de Unity 1:1 con 1metro en el mundo real, por lo que era muy intuitivo crear objetos y posicionarlos en el mundo real.

La puesta en escena de Microsoft. Nos citaron en un hotel a unos 5 minutos del Moscone Center, en la 5º planta, nos pidieron que dejasemos todos los aparatos electrónicos, incluso la Band, en una taquilla, nos pusieron en línea por parejas y nos fueron metiendo en una antesala y presentándonos a nuestro tutor, con el que compartimos las siguientes 4 horas, comió con nosotros, y se preocupó de todo lo que necesitásemos. Todo esto entre guardias de seguridad como armarios, yo vi 3 en la sala y en los ascensores había otros 2. Cada vez que terminabamos uno de los ejemplos, nos daban un achievement y aplaudían… todo muy “gaming”, agradable y personal. Un gran trato el que recibimos todos allí.

Lo que todavía hay que pulir…

Y no digo malo, no por fanboy, si no porque no me paso nada que pudiese considerar “malo”, La experiencia de desarrollo hay que pulirla un poco para no tener que parar a mano las apps para poder desplegar una nueva y para poder depurar una app.

Hay que mejorar un poco la latencia de los comandos de voz, aunque quizás no sea posible, ahora mismo tiene la misma latencia que tiene cortana, por lo que no es en sí un show stopper, simplemente  que todos los demas gestos son tan inmediatos, que en la voz se nota el retardo… esperas que sea inmediato.

El tamaño de visión. Buscad un monitor de 24” y ponerlos a unos 40 centímetros de el, ese sería más o menos el espacio de renderizado de Hololens, ¿Por hardware? ¿Por rendimiento? La verdad es que no lo se, es algo en lo que siguen trabajando según nos dijeron, y si te acercas mucho a un objeto estropea en cierta medida la experiencia por que vez el corte del objeto virtual sobre el mundo real.

La sujección a la cabeza es un poco endeble todavía y te da la impresión de que si giras demasiado la cabeza o la inclinas, se pueden caer las Hololens, estaría bien que lo mejorasen porque muchas veces tiendes a inclinarte para mirar detrás de un objeto y  te refrenas por miedo a que se caigan.

El futuro

El futuro, es una pasada. Lo sé porque desde el minuto 1 que me puse las Hololens supe que estaba en él. Las Hololens son algo totalmente nuevo y sorprendente, la aplicación profesional en medicina, mecánica, deportes o ocio es tán clara, que personalmente creo que van a revolucionar el mundo. Ahora solo nos queda esperar a que Microsoft decida que quiere nuestro dinero y cree un programa de Early adopters para que los desarrolladores podamos ponernos a trabajar con ellas.

A continuación os dejo unas fotos de una Hololens de exposición que tenían en una vitrina y nos permitieron fotografiar, con selfie incluido para demostrar que si, que estube allí y que todo esto, no fue solo un sueño de ciencia ficción, aunque lo parezca!WP_20150501_13_19_39_Pro

WP_20150501_13_19_45_Pro

WP_20150501_13_19_55_Pro

Y aquí un pequeño video oficial que Microsoft ha colgado en Youtube, en el segundo 42 podéis ver la mesa donde estuve trabajando… en ese momento debía estar jugando con las hololens por el pasillo jajajaja.

Microsoft HoloLens

Un  saludo y Happy Coding!

 

[Windows 10] Novedades para desarrolladores 3 de N

Hola a todos!

Vamos a por la tercera entrega de la serie Windows 10, novedades para desarrolladores. Pero primero, por si te perdiste los anteriores, el índice:

  1. Windows 10, novedades para desarrolladores 3 de N: Nuevos controles

Bonus track: Windows 10 for phones build 10051

Antes de comenzar con el contenido de esta entrega propiamente dicho, una buena noticia. Con la última versión de Windows 10 for phones 10051, ya podemos desplegar aplicaciones desde Visual Studio a nuestro teléfono.

Para ello, primero tendremos que registrar nuestro dispositivo para desarrollo usando la conocida aplicación Windows Phone Developer Registration (10). La diferencia es el número entre paréntesis. Tenemos que asegurarnos de usar la versión 10, no la tradicional 8.1:

image

Solo tienes que presionar el botón “Register” e introducir los datos de tu cuenta LiveID para registrar el nuevo dispositivo.

NOTA: Si antes de actualizar el teléfono a Windows 10, ya lo tenías registrado para desarrollo, no necesitarás volver a registrarlo.

Ahora si, empecemos con la tercera entrega. En esta ocasión, vamos a darle un repaso a nuevos controles incluidos en el SDK.

Entre otras muchas novedades, en este artículo verás dos nuevos controles:

  • RelativePanel, que te ayudará en la creación del Layout de tu página y el soporte a orientaciones y resoluciones diferentes.
  • SplitView, con el que podrás crear los nuevos menús de Windows 10 entre otras cosas.

También veremos nuevas propiedades que se han añadido a los controles contenedores originales (Stack, Grid…) para simplificar nuestro XAML.

RelativePanel

En el anterior artículo de la serie hablamos de como poder adaptar nuestra interfaz de usuario a distintas resoluciones usando Adaptative Visual States. En este sentido, el nuevo RelativePanel nos va a simplificar mucho el trabajo.

El RelativePanel es un control contenedor, al igual que la Grid clásica de XAML, pero que nos permite posicionar los elementos dentro de él de forma relativa al panel y a los elementos contenidos.

Esto nos dá mucha flexibilidad. Por ejemplo empecemos con algo sencillo, dos elementos dentro de un RelativePanel:

<RelativePanel>
    <Rectangle Fill="Purple" Width="250" Height="200"/>
    <Ellipse Fill="Yellow" Width="350" Height="350"/>
</RelativePanel>

Como podemos ver, ambos están posicionados por defecto en el borde superior izquierdo del panel:

image

Ahora, si modificamos nuestro XAML usando las propiedades adjuntas que expone el RelativePanel, podemos obligar al ellipse a situarse en la esquina inferior derecha:

<RelativePanel>
    <Rectangle Fill="Purple" Width="250" Height="200"/>
    <Ellipse Fill="Yellow" Width="350" Height="350"
             RelativePanel.AlignRightWithPanel="True"
             RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>

Este XAML, nos ofrece este resultado:

image

Incluso si cambiamos la orientación o la resolución, los elementos se quedarán anclados donde los hemos posicionado. Pero es aún más interesante el poder definir sus posiciones relativas entre ellos, por ejemplo, ahora que hemos posicionado el elipse en la esquina inferior derecha, podemos decirle al rectángulo que se posiciones relativo al elipse:

<RelativePanel>
    <Ellipse x:Name="elipseAmarillo" Fill="Yellow"
             Width="350" Height="350"
             RelativePanel.AlignRightWithPanel="True"
             RelativePanel.AlignBottomWithPanel="True"/>
    <Rectangle Fill="Purple" Width="250" Height="200"
               RelativePanel.AlignTopWith="elipseAmarillo"
               RelativePanel.AlignLeftWith="elipseAmarillo"/>
</RelativePanel>

Esta posición dibujará el siguiente resultado:

image

Lo que hemos echo es alinear los bordes superior e izquierdo de ambos elementos y además alinear los bordes inferior y derecho del elipse con el panel.

Tenemos multitud de opciones más que usar:

  • Below: nos permite indicar que el elemento se alinee debajo del elemento indicado.
  • Above: nos permite indicar que el elemento se alinee encima del elemento indicado.
  • LeftOf/RightOf: posicionar el elemento a la izquierda o derecha del elemento indicado.

De esta forma, toda nuestra interface será relativa y se alineará correctamente independientemente de la resolución o de los cambios de orientación que sufra el dispositivo:

<RelativePanel>
    <Ellipse x:Name="yellowEllipse" Fill="Yellow"
             Width="350" Height="350"
             RelativePanel.AlignRightWithPanel="True"
             RelativePanel.AlignBottomWithPanel="True"/>
    <Rectangle x:Name="purpleRectangle" Fill="Purple"
               Width="250" Height="200"
               RelativePanel.Above="yellowEllipse"
               RelativePanel.AlignLeftWith="yellowEllipse"/>
    <Rectangle Fill="Orange"
               Width="225" Height="300"
               RelativePanel.AlignHorizontalCenterWithPanel="True"
               RelativePanel.LeftOf="purpleRectangle"/>
</RelativePanel>

image

SplitView

Un nuevo chico en el patio de juegos de Windows, pero un antiguo conocido para los que vengan o trabajen con iOS o Android. SplitView es su nombre en Windows, muchos lo conoceréis como el menú hamburguesa… o el menú lateral tan usado en iOS y Android

hamburguer

hamburguersample

El control SplitView es en si mismo toda una revolución en la plataforma Windows, sobre todo en la familia de dispositivos mobile, donde llevamos varios años ya, desde Windows Phone 7, con un patrón de uso en la parte inferior de la pantalla. Ahora de pronto nos vemos cambiando hacia la parte superior… veremos como queda todo finalmente. Pero ahora vamos a ver como funciona este control en Windows 10.

Básicamente, el control Splitview nos permite definir un panel con opciones que puede ser abierto para crear un menú deslizante lateral.

Para empezar, podemos crear un layout como el siguiente:

<Grid Background="LightGray">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
        
    <Grid Grid.Row="0" Background="RoyalBlue">
        <ToggleButton x:Name="BurguerToggle"
                      Background="Transparent"
                      IsChecked="False">
                    <FontIcon x:Name="Hamburger"
                           FontFamily="Segoe MDL2 Assets"
                      Foreground="LightCyan"
                      Glyph="" />
        </ToggleButton>
    </Grid>

    <SplitView Grid.Row="1" PanePlacement="Left"
               CompactPaneLength="50"
               OpenPaneLength="320"
               IsPaneOpen="{Binding IsChecked,
                                    ElementName=BurguerToggle}"
               PaneBackground="RoyalBlue"
               DisplayMode="CompactInline">
        <SplitView.Pane>
            <RelativePanel/>
        </SplitView.Pane>
    </SplitView>
</Grid>

En este código, podemos ver como definimos un ToggleButton en la primera Row, que actuará como el botón para abrir y cerrar nuestro SplitView. Usamos un icono de fuente, FontIcon, con la nueva fuente Segoe MDL2 Assets incluida en Windows 10 para definir el símbolo del menú hamburguesa.

A continuación en el SplitView hay ciertas propiedades interesantes:

  • PanePlacement: Donde se situará, el panel desplegable: a izquierda o derecha.
  • DisplayMode: La forma en la que se mostrará el SplitView:
    • CompactInline: compacto, dejando una tira del control visible y en linea con el contenido. Al abrirse, modifica el tamaño del contenido que tenga a su lado.
    • CompactOverlay: compacto, dejando una tira del control visible y sobre el contenido de la pantalla, por lo que no modifica el tamaño de este.
    • Inline: igual que CompactInline, pero sin la tira del control, no se ve nada del SplitView.
    • Overlay: igual que CompactOverlay, pero sin la tira del control, no se ve nada del SplitView.
  • CompactPaneLength: Nos permite definir el ancho de la tira del control cuando está cerrado y el displaymode es CompactInline o CompactOverlay.
  • OpenPaneLength: Nos permite definir el ancho del control abierto.
  • IsPaneOpen: determina si se abre o se cierra el panel. En este caso hemos usado un Binding al ToggleButton para poder hacerlo sin escribir código C#.

El resultado, en Tablet sería este:

image

Y en el teléfono, este otro:

007

En el teléfono no es recomendable dejar un modo Compact, podemos usar AdaptativeVisualStates para cambiar esto dependiendo de la resolución, por ejemplo.

No es un adios, es un hasta luego…

Y con esto termina la tercera entrega de la serie, como siempre, puedes encontrar los ejemplos de este artículo (Win10RelativePanel y Win10SplitView) en mi repositorio de GitHub sobre Windows 10.

Nos vemos pronto!

Un saludo y Happy Coding!

 

[Windows 10] Novedades para desarrolladores 2 de N

Hola a todos!

Seguimos con el segundo artículo de la serie sobre novedades para desarrolladores en Windows 10. Aquí tienes el índice de artículos:

  1. Windows 10, novedades para desarrolladores 2 de N: UI Adaptativa

En esta ocasión vamos a hablar de los nuevos adaptative visual states y sobre como adaptar nuestra interfaz de usuario a las diferentes familias de dispositivos existentes.

En las aplicaciones universales para Windows 8.1 y Windows Phone 8.1, teníamos un proyecto diferente para cada plataforma. Esto facilitaba el crear una interfaz de usuario adaptada, simplemente creando la misma página dos veces, una por cada plataforma.

Sin embargo, en Windows 10 solo disponemos de un proyecto, ¿Como podemos adaptar nuestra interfaz de usuario?

Existen dos formas principalmente: Podemos crear varias vistas XAML para una misma página o podemos modificar el aspecto de nuestro XAML mediante visual states.

Adaptative visual states

Si ya has desarrollado en XAML para Windows o Windows Phone, te sonarán los Visual States

Éstos “estados visuales” te permiten definir grupos de cambios de la interfaz de usuario dentro de tu XAML, para una página o un control, que definan diferentes estados. Por ejemplo, podíamos definir un estado para indicar que estamos cargando datos, otro estado para cuando el usuario haga un gesto predeterminado (un swipe, un fick…)

Lo único que les faltaba era una forma sencilla de usar Visual States para el cambio de nuestra interfaz de usuario dependiendo de la resolución vertical/horizontal del dispositivo donde se ejecutaba la app. Este es el hueco que cubren precisamente los Adaptative Visual States. Mediante el uso de un nuevo tipo de trigger, el AdaptativeTrigger, puedes crear VisualStates que se ejecuten automáticamente basándose en el tamaño de la ventana de la aplicación.

Pongamos como ejemplo el siguiente XAML que hemos creado en un proyecto Blank application (UAP) para Windows 10:

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Border Margin="24,24,0,12" BorderBrush="Red" BorderThickness="2" Background="LightCyan">
        <TextBlock x:Name="TitleText" FontSize="48" Text="This is a long text title!" Foreground="Black"/>
    </Border>
    <StackPanel x:Name="ListPanel" Orientation="Vertical">
        <Image x:Name="Image01" Source="/Assets/Bilbao001.jpg" MaxHeight="120" Stretch="UniformToFill"/>
        <Image x:Name="Image02" Source="/Assets/Bilbao002.jpg" MaxHeight="120" Stretch="UniformToFill"/>
        <Image x:Name="Image03" Source="/Assets/Bilbao003.jpg" MaxHeight="120" Stretch="UniformToFill"/>
    </StackPanel>
</StackPanel>

Si ejecutamos la aplicación en el emulador de Windows 10 mobile y en Windows 10 obtendremos el siguiente resultado:

image

El resultado no es bueno en ninguna de las dos plataformas. En Tablet/Desktop vemos todo el título, pero las imágenes se estiran demasiado y la altura máxima que les hemos puesto hacen que no se vean bien. En el emulador del teléfono, las imágenes se ven bien, pero el título es demasiado grande y no se ve entero.

Vamos a crear un primer Visual State que ajuste el texto del título para que se vea correctamente en el teléfono:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="NarrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="300"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="TitleText.FontSize"
                        Value="24"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Con el AdaptativeTrigger le indicamos al sistema que lance los Setters cuando la resolución de pantalla horizontal sea igual o mayor al tamaño mínimo indicado. En este caso cambiamos el tamaño de fuente del título a uno más adecuado. Ahora podemos crear otro Visual State que controle una resolución mayor, para adaptar el contenido a Tablets/Desktops:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="NarrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="300"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="TitleText.FontSize"
                        Value="24"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="WideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="ListPanel.Orientation"
                        Value="Horizontal"/>
                <Setter Target="Image01.MaxHeight"
                        Value="600"/>
                <Setter Target="Image02.MaxHeight"
                        Value="600"/>
                <Setter Target="Image03.MaxHeight"
                        Value="600"/>
                <Setter Target="Image01.MaxWidth"
                        Value="300"/>
                <Setter Target="Image02.MaxWidth"
                        Value="300"/>
                <Setter Target="Image03.MaxWidth"
                        Value="300"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

En este caso, cuando la resolución es mayor de 600 píxeles, cambiamos la orientación del StackPanel y los tamaños máximos de las imágenes, para aprovechar mejor la pantalla. Todo, usando como disparador el AdaptativeTrigger. ¿El resultado? Aquí podéis ver algunos ejemplos:

image

Esto ya tiene otro aspecto… ahora nuestras imágenes y textos se adaptan al tamaño de su contenedor para ofrecer la mejor experiencia en cada momento.

Es importante tener algo en cuenta. Con los Adaptative Visual States, estamos trabajando con resoluciones, no con plataformas. Por eso en la imagen superior, podemos ver tanto en Tablet como en Phone, el mismo layout, dependiendo solo de la resolución horizontal en cada momento.

¿Y si quiero una vista específica para dispositivos móviles, por ejemplo? Esto no te sirve. Ten en cuenta que puedes tener smartphones con una resolución horizontal de 400 píxeles y otros con 1080 píxeles… y si los pones en modo landscape, hasta 1920 píxeles. Lo mismo que una pantalla de PC y muchas tablets del mercado.

Si quieres tener una vista en especial para una familia de dispositivos, sigue leyendo en el siguiente apartado.

Device family views

Puede que en ocasiones tu interfaz de usuario sea tan compleja, que adaptarla mediante los Visual States sea una locura. O simplemente que los cambios sean tantos, que casi merecería la pena crear una pantalla nueva desde cero.

Para estos casos, Microsoft ha añadido al SDK de Windows 10 el concepto de “Device family views”, que nos permite añadir múltiples vistas .xaml a una misma página, identificando cada una por convención.

Vamos a empezar por crear un nuevo proyecto Blank Application (UAP) que llamaremos WIn10DeviceFamilyViews.

En la página principal MainPage, vamos a crear la interfaz de usuario por defecto para Tablet/Desktop, sin usar Adaptative Visual States:

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Border Margin="24" BorderBrush="Red" BorderThickness="2"
            Background="LightCyan">
        <TextBlock x:Name="TitleText" FontSize="48"
                    Text="This is the default view for mainpage"
                    Foreground="Black"/>
    </Border>
    <StackPanel Margin="24" x:Name="ListPanel" Orientation="Horizontal">
        <Image x:Name="Image01" Source="/Assets/Bilbao001.jpg"
                MaxHeight="600" MaxWidth="300" Stretch="UniformToFill"/>
        <Image x:Name="Image02" Source="/Assets/Bilbao002.jpg"
                MaxHeight="600" MaxWidth="300" Stretch="UniformToFill"/>
        <Image x:Name="Image03" Source="/Assets/Bilbao003.jpg"
                MaxHeight="600" MaxWidth="300" Stretch="UniformToFill"/>
    </StackPanel>
</StackPanel>

El resultado:

image

Ahora, vamos a crear una vista específica para la familia de dispositivos mobile.

En primer lugar, vamos a añadir una nueva carpeta a nuestro proyecto llamada “DeviceFamily-Mobile”. Por convención, cuando la familia de dispositivos en la que nos ejecutemos sea mobile y esta carpeta exista, se buscará por cada página si existe una vista xaml en ella. Si existe, se usará en lugar del xaml por defecto.

Una vez creada la carpeta, vamos a añadir un nuevo item, pero no añadiremos una página nueva, en su lugar seleccionaremos el item Xaml View de la ventana de añadir nuevo item. Lo llamaremos igual que la página a la que deseamos añadirla. En este caso MainPage.xaml:

image

Una vez añadida nos daremos cuenta de que no tiene archivo cs asociado. Pero si hacemos click en la ventana de XAML y seleccionamos view code (F7) nos abre un archivo de code behind… es el de la página principal.

Ahora podemos empezar a diseñar nuestra vista mobile. Le añadimos este XAML:

<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Border Margin="24,24,24,12" BorderBrush="Red" BorderThickness="2"
            Background="LightCyan">
        <TextBlock x:Name="TitleText" FontSize="26"
                    Text="This is the mobile view for mainpage"
                    Foreground="Black"/>
    </Border>
    <StackPanel Margin="24,0,24,24" x:Name="ListPanel" Orientation="Vertical">
        <Image x:Name="Image01" Source="/Assets/Bilbao001.jpg"
                MaxHeight="230" Stretch="UniformToFill"/>
        <Image x:Name="Image02" Source="/Assets/Bilbao002.jpg"
                MaxHeight="230" Stretch="UniformToFill"/>
        <Image x:Name="Image03" Source="/Assets/Bilbao003.jpg"
                MaxHeight="230" Stretch="UniformToFill"/>
    </StackPanel>
</StackPanel>

Es muy parecido al XAML que teníamos en la página principal, pero totalmente adaptado al uso vertical y menor resolución.  Incluso podemos añadir nuevos elementos no necesarios en la vista por defecto, como un scroll para ver las imágenes más grandes.

Si ahora volvemos a ejecutar la aplicación tanto en Tablet como en el emulador del teléfono, veremos que en el primer caso sigue usando la vista por defecto mientras que en el segundo hace uso de nuestra nueva vista xaml:

image

Cada familia de dispositivos tiene sus vistas independientes, lo que nos aporta la misma flexibilidad que teníamos en los proyectos universales de 8.1, pero con la nueva estructura unificada. Además podemos mezclar ambas técnicas: Adaptative visual states y Vistas por familia de dispositivo, según sea necesario en cada página.

Esto ha sido todo amigos…

Por ahora!! Espero que os guste el artículo y os sea útil el código, que como siempre, tenéis en el repo de GitHub de Windows 10 que he creado.

Volveremos a vernos en breve con más cosas interesantes sobre las novedades de Windows 10 para desarrolladores.

Un saludo y Happy Coding!

 

[Windows10] Novedades para desarrolladores 1 de N

Hola a todos!

El pasado 23 de Marzo, Microsoft liberó una primera versión de sus herramientas para desarrolladores de Windows 10. Nos encontramos ante una versión muy temprana de las mismas, hay muchas cosas que hemos podido ver en vídeo que no están disponibles en la versión pública. Así mismo, tienes que estar preparado para pelear con ellas, desde la instalación hasta en el momento de usarlas. Al ser una versión alpha, existen muchos fallos y esquinas que pulir todavía.

Lista de artículos:

Como conseguir instalar las herramientas

En primer lugar, necesitas estar registrado como Windows Insider para poder acceder a todo el software relacionado con Windows 10.

Para poder instalarlas necesitarás unos requisitos mínimos de software:

  • Windows 10 Build 10041
  • Visual Studio 2015 CTP6

Tras tener todo instalado, puedes descargar un ISO de las herramientas o un instalador web, desde la página de herramientas técnicas.

Dada la naturaleza preview, tanto de Visual Studio 2015, como Windows 10 y las herramientas de desarrollo, lo más sensato es que no lo instales todo en tu PC principal. Puedes crear una máquina virtual con Hyper-V, VMWare o VirtualBox sin problema. Con unos 40Gb de espacio reservado podrás instalar Windows 10, Visual Studio 2015 y las developer tools par trabajar con ellas.

Problemas conocidos

Después de trabajar unos días con las herramientas de desarrollo, ya se conocen algunos problemas y sus posibles “workarounds”, cuando existe alguno:

  • La versión actual de Windows 10 mobile que liberó microsoft en febrero no es compatible con estas herramientas, por lo que es imposible desplegar a un dispositivo que tenga esa build pública.
  • Conflicto con el emulador de Android de Cordova tools: El emulador de Android usa la versión 8.0.12484 de XDE para ejecutarse, mientras que las dev tools de Windows 10 instalan la versión 8.0.12513, que no soporta el plugin de Android. Si tienes instalados ambos emuladores, al arrancar el de Windows obtendrás el error: “Failed to load SKU “WP””. Se soluciona desinstalando el emulador de Android de Visual Studio.
  • Por defecto el emulador de Windows 10 mobile usa 2 procesadores, si estás en una máquina virtual, asegurate de asignarle al menos 4, de lo contrario es posible que el emulador no cargue.

Seguro que mientras vayas avanzando en el uso de las herramientas, encuentras nuevos fallos, normal en una versión tan temprana, no olvides usar la herramienta “Windows Feedback” para informarlos a Microsoft. Tras instalar las nuevas herramientas tendrás una opción llamada “Developer Platform”:

001

Un poco de terminología primero…

Antes de continuar  y empezar a ver que podemos hacer con las nuevas herramientas, es bueno que conozcamos algunos nombres nuevos que se presentan con las herramientas:

  • Windows apps. Microsoft quiere que abandonemos “Windows Phone app” o “Windows Store app” para referirnos a las aplicaciones y las empecemos a llamar simplemente “Windows apps”. Vamos a seguirle el juego por ahora…
  • UAP: Windows universal app platform. La nueva plataforma de apps que viene con Windows 10 y que forma parte de Windows OneCore (El core unificado de Windows presente en todas las ediciones de Windows 10).
    • universal app platform se escribe en minúsculas porque no es una marca, es el nombre de la tecnología.
    • UAP es el acrónimo de la plataforma de aplicaciones. No vas a desarrollar un UAP. Vas a desarrollar una app Windows, que puede ejecutarse sobre el UAP.
  • Familias de dispositivos. Los distintos tipos de dispositivos sobre los que UAP funciona: Smartphones, tablets, desktop, IoT…

Con estos puntos explicados… vamos a jugar con las herramientas!

Nuestra primera Windows app

Ya es hora de empezar a ver un poco de código de verdad. Tras arrancar Visual Studio 2015 con las herramientas instaladas, en la ventana de nuevo proyecto, encontraremos un nodo llamado Windows 10, que contiene los nuevos proyectos:

image

No encontramos muchas sorpresas aquí:

  • Blank application (UAP): Una aplicación vacia que hace uso de la universal app platform.
  • Class library (UAP): Un proyecto de librería de clases.
  • Windows Runtime Component (UAP): un proyecto que nos permite crear un componente WinRT.
  • Unit Test App (UAP): Una aplicación para ejecutar tests sobre nuestra aplicación.

Donde veremos cambios es al crear un nuevo proyecto del tipo Blank application. Una vez creado veremos que ya no tenemos la estructura de proyectos que se creaban en  Windows 8.1, con un proyecto Windows Store y otro Windows Phone, más un proyecto Shared:

image

En Windows 10, tendremos un ejecutable para todos los dispositivos que soportemos, por lo que solo tendremos un proyecto y no necesitaremos usar el proyecto shared al estilo de Windows 8.1.

Al tener un solo proyecto para las distintas familias de dispositivos, ¿Como podemos usar features de una familia en concreto? Microsoft a resuelto esto mediante la creación de SDKs de extensión por familia de dispositivo. Para ver las extensiones disponibles, haz click derecho sobre el nodo References de tu proyecto y dentro de la pantalla “References Manager” ve al nodo “Universal app platform > Entensions”:

image

Pero, ¿Qué pasa si ejecutamos la app en un dispositivo que no soporta una extensión en concreto? Nuestra aplicación fallaría. Para evitarlo, siempre que usemos una API parte de un SDK de extensión, debemos comprobar primero si dicha API está disponible.

Un ejemplo muy sencillo y que tendrás que usar en tus apps, si o si, si quieres que se ejecuten correctamente en un smartphone: La gestión del botón atrás.

Las APIs necesarias, se encuentran en el SDK de extensión “Windows Mobile Extension SDK” que debemos referenciar en nuestro proyecto. A continuación, en el archivo App.xaml.cs debemos añadir el siguiente código:

using Windows.Phone.UI.Input;

public App()
{
    this.InitializeComponent();
    this.Suspending += OnSuspending;
    HardwareButtons.BackPressed += HardwareButtons_BackPressed;
}
private void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e)
{
    //TODO: Back button management
}

En el emulador de Windows Phone, funcionará perfectamente. Pero si intentamos ejecutar la app en Windows 10, fallará porque no encontrará el API. Para evitar esto, tenemos que comprobar primero si el API está disponible o no:

using Windows.Phone.UI.Input;
using Windows.Foundation.Metadata;

public App()
{
    this.InitializeComponent();
    this.Suspending += OnSuspending;
    if (ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons"))
    {
        HardwareButtons.BackPressed += HardwareButtons_BackPressed;
    }
}
private void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e)
{
    //TODO: Back button management
}

Se que muchos os estaréis llevando las manos a la cabeza, yo incluido, por tener que usar el full qualified name… en un string. No hay nada más proclibe a errores que esto. Esperemos que reciban todo nuestro feedback y lo cambien por algún tipo de enumerado o constante que nos evite plagar nuestro código de “magic strings”.

Fundido a negro…

Y con esto llegamos al final de este primer artículo sobre Windows 10 para desarrolladores. Pronto una nueva entrega. Tenemos mucho de lo que hablar: AdaptativeVisualStates, Device families, cambios en XAML…

Puedes seguir los ejemplos que vaya publicando en este repo de GitHub exclusivo para Windows 10.

Un saludo y Happy Coding!

 

[XAMARIN.FORMS] Preview de Xamarin.Forms para Windows XAML

sticker-with-textPicture1dotnetconf-logo-300x290

El 19 de Marzo pasado, James Montemagno junto con Miguel de Icaza y Scott Hanselman presentaron durante la DotNetConf 2015 la versión preview de Xamarin.Forms para Windows Phone 8.1 y Windows Store. Puedes ver el video de la presentación en Channel9.

Este es un anuncio largamente esperado. Hasta ahora, Xamarin.Forms solo soportaba Windows Phone 8.0, lo que en ciertas ocasiones evitaba poder usarlo.

Aunque todavía está en modo preview, ya nos permite jugar con lo que vendrá en un futuro y empezar a añadir aplicaciones universales windows a nuestros proyectos Xamarin.Forms.

Probando la nueva preview

Para comenzar, necesitaremos crear un nuevo proyecto de Xamarin.Forms desde Visual Studio, en su versión Portable:

image

A continuación, aunque no es totalmente necesario, es recomendable actualizar las librerías de Xamarin.Forms a la última versión disponible. Para ello, solo tendremos que hacer click derecho sobre la solución en el explorador de solución y escoger la opción “Manage NuGet Packages for solution…”. Tenemos que cambiar el canal de “Stable only” a “Include prerelease”. En Updates veremos nuevas versiones de Xamarin.Forms y Xamarin Support Library y un botón “Update All”:

image

Tras tener la última versión de nuestras librerías para Xamarin.Forms, es hora de incluir el soporte a Windows Phone 8.1 y Windows Store.

Para ello, primero necesitamos añadir un nuevo proyecto universal Windows a nuestra solución Xamarin.Forms. Una vez que lo tengamos, podemos eliminar el proyecto de Windows Phone 8 que Xamarin.Forms incluye por defecto, ya no lo vamos a necesitar más.

Tras esto, tenemos que hacer click derecho sobre la solución y de nuevo lanzar el gestor de paquetes de NuGet. Buscaremos un paquete llamado Xamarin.Forms.Windows. Como estamos trabajando con una preview, tendremos que indicarle a NuGet que busque en software prerelease también:

XFW

Una vez seleccionado, NuGet nos preguntará en que proyectos queremos añadirlo. Por defecto nos mostrará los proyectos universales seleccionados:

xfw2

Tras aceptar, ya tendremos las librerías necesarias para que nuestro proyecto universal soporte Xamarin.Forms. Pero todavía nos quedan dos pasos, antes de empezar a escribir código.

Por defecto, la librería portable que crea Xamarin.Forms, no soporta Windows Phone 8.1 (Windows XAML):

image

Tenemos que añadir el soporte para Windows 8.1 y Windows Phone 8.1 y eliminar el soporte a Windows Phone Silverlight 8:

image

Al hacer esto, nos avisará de que al presionar OK se recargará el proyecto. Tras la recarga, ya podremos añadir una referencia al proyecto Portable en nuestros proyectos Windows y Windows Phone 8.1 (universal). En este punto, si compilamos, todo debería compilar sin problemas.

Para dejar todo funcionando, necesitamos indicarle a nuestra app universal que debe inicializar Xamarin.Forms, al igual que lo hacemos en el resto de proyectos, en la página principal.

Iniciando Xamarin.Forms en un proyecto Windows Universal

En el archivo App.xaml.cs, en el método OnLaunched, vamos a iniciar el sistema de Xamarin.Forms:

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;
    if (rootFrame == null)
    {
        rootFrame = new Frame();
        rootFrame.CacheSize = 1;

        //Initialize Xamarin.Forms
        global::Xamarin.Forms.Forms.Init(e);

        Window.Current.Content = rootFrame;
    }

En el archivo MainPage.xaml del proyecto Windows, tenemos que cambiar el tipo de la página, para usar el tipo WindowsBasePage definido en los ensamblados de Xamarin.Forms:

<forms:WindowsPage
    x:Class=“XamarinForWinStore.WinUniversal.MainPage”
    xmlns:forms=“using:Xamarin.Forms.Platform.WinRT”

En el code behind de esta misma página, tenemos que quitar la herencia de la clase Page y añadir una llamada a LoadApplication en el constructor:

public sealed partial class MainPage
{
    public MainPage()
    {
        this.InitializeComponent();

        this.NavigationCacheMode = NavigationCacheMode.Required;

        LoadApplication(new XamarinForWinStore.App());
    }
}

Repetimos el mismo proceso en el proyecto Windows Phone, solo que esta vez usaremos WindowsPhonePage en lugar de WindowsPage.

Y ya estamos listos!

Si marcamos el proyecto Windows Store como proyecto de inicio y ejecutamos, veremos que nos saludan Xamarin.Forms:

image

Todavía falta camino…

Esta preview es un gran avance y nos permite empezar a jugar con Xamarin.Forms en más plataformas, pero está lejos de estar completa. Algunas de las cosas que faltan:

  • Mapas: No están soportados en esta versión.
  • GridView: El control estrella de Windows Store, no está soportado.
  • Controles: No todos los renderizadores de controles están completos en esta versión.
  • Recursos: WinRT no permite cargar recursos desde un ensamblado diferente a no ser que lo marquemos correctamente con ReflectionPermission. Esto no es compatible con PCL.

Como decía, todavía falta camino por recorrer, pero es un gran paso en la dirección correcta. ¿Qué nos deparará el //Build 2015? Estaré allí en persona para contaros todas las novedades!

Como siempre, tenéis disponible el código en GitHub para que podáis empezar a trastear con él.

Un saludo y Happy Coding!