Estructura XAML con Xamarin Forms
Estructura XAML con Xamarin Forms
Hoy vamos a aprender la estructura básica que contiene un documento XAML en nuestro proyecto portable de Xamarin Forms pero, antes de nada, ¿qué es y para qué sirve el lenguaje de programación XAML?:
El lenguaje de marcado de aplicaciones extensible, o XAML, es un lenguaje de marcado basado en XML desarrollado por Microsoft. XAML es el lenguaje que subyace a la presentación visual de una aplicación desarrollada en Microsoft Expression Blend, al igual que HTML es el lenguaje que subyace la presentación visual de una página web. La creación de una aplicación en Xamarin Forms supone tener que escribir código XAML, ya sea de forma manual o visual, mediante la vista Diseño de Expression Blend.
A continuación, os dejamos el videotutorial explicativo y seguidamente repasaremos punto por punto la composición de la estructura:
Una solución creada en Visual Studio 2015 con la tecnología Xamarin Forms se compone de tres proyectos: Portable Class Library, Android e iOS. Como se puede observar, la primera ventaja que nos brinda esta tecnología es la posibilidad de crear un código único para los tres proyectos y, de esta forma, no tener que crear tres proyectos distintos en función del dispositivo móvil con el que queramos trabajar. Sin embargo, todas las prtestaciones que nos brinda Xamarin Forms no son realizables puesto que NO es una extensión gratuita para Visual Studio, por lo que la principal desventaja también la encontramos ahí.
Como se puede apreciar, tenemos una clase llamada «App» en la que debemos definir cuál es la vista principal que queremos que nuestro dispositivo móvil nos muestre. En nuestro caso a la vista principal la hemos llamado «inicio».
Una vez modificado este registro, podemos proceder a crear un nuevo documento de «Cross-Platform» de tipo XAML Forms Page. Dicho documento va a contener toda la estructura XAML en la que repasaremos punto por punto la composición y funcionalidad de cada atributo.
ContentPage
- El atributo Content Page va a definir cuál es el principio y el final de nuestra vista, es decir, de la misma manera que en HTML la etiqueta <html></html> define el inicio y final del documento, con el atributo Content Page ocurre lo mismo. Aquí dentro se van a inyectar todas las funcionalidades que queremos que aparezcan en nuestro dispositivo móvil, tales como: color de fondo, imágenes, textos, botones, etc…
Xlmns
-
Al crear un XAML hacemos uso de los elementos y atributos especificados en el estándar de XML. Para que esto sea posible debemos incluir en el elemento raíz del esquema (el elemento “schema”) una referencia al namespace “http://schemas.microsoft.com/winfx/2009/xaml”. Esto se hace incluyendo el atributo “xmlns” en el elemento “schema”. El xmlns identifica el namespace al que pertenecen los componentes incluidos en el esquema, asignando opcionalmente un prefijo.
Bindings
- Los bindings permiten que el controlador lance acciones sobre el modelo cuando el usuario interactúa sobre la vista (o en el sentido inverso). Una forma muy común de interactuar entre modelo y vista es que el usuario ingresa un valor en algún control y nosotros queremos guardar ese valor en alguna variable en el modelo. El binding relaciona dos propiedades entre sí haciendo que se mantengan sincronizadas: si una cambia la otra también. Con frecuencia se eligen una propiedad del modelo con una propiedad de la vista, pero no es indispensable. El binding puede ser unidireccional o bidireccional. En el caso de un binding bidireccional o «two way», cualquiera de los dos elementos puede generar modificaciones. Esta característica es la gran ventaja de los bindings porque de una forma muy sencilla podemos hacer que la vista refleje automáticamente cambios que hayamos realizado en el modelo.
Stacklayout
- Debemos recordar que un proyecto creado en Xamarin Forms portable no nos brinda todas las opciones de personalización que sí lo harían proyectos que realizásemos en nativo. Dicho esto, un atributo stacklayout define el contenido que queremos incorporar dentro. Imaginemos que tenemos que realizar una vista en la cual tenemos que agrupar una serie de controladores en posición vertical y seguidamente otros en posición horizontal. Con stacklayout podemos decirle a nuestra aplicación cuál va a ser el orden y/o disposición de dichos elementos. Podemos tener tantos stacklayout como deseemos en función del esquema visual que queramos trazar.
Label Text, Input Text, Button Text…
- Son etiquetas que usamos para crear nuestros controladores tales como: cajas de texto, botones, leyendas, barras de búsqueda, etc… pueden contener texto «hardcodeado» o «bindings». Están diseñados principalmente para incorporar bindings puesto que no olvidemos que XAML se compone de modelos y de vistas.
Resumen: aquí podemos ver la estructura común que todo dispositivo móvil (ya sea Android, iOS o Windows Phone) presenta a la hora de crear una vista de «Login» como acabamos de aprender hoy. Espero que os haya sido de utilidad. ¡Muchas gracias y hasta pronto!
Autor: Álvaro Ramiro Ledesma, alumno del curso MCSD Web Applications + MCSD Sharepoint Apps
Centro: Tajamar
Año académico: 2015-2016.
Enlace a GitHub: https://github.com/alraled/Estructura_Xaml