oa.upm.esoa.upm.es/49303/1/PFC_ALBERTO_ESTEBAN_BLANCO.pdf · 2018-01-25 · Resumen En la última década, la tecnología incorporada a los teléfonos móviles ha provocado una disrupción

º

PROYECTO FIN DE CARRERAPLAN 2000

E.U.I.T. TELECOMUNICACIÓN

TEMA: DESARROLLO DE APLICACIONES MÓVILES

TÍTULO: DESARROLLO MULTIPLATAFORMA IOS VS ANDROID CON XAMARIN

AUTOR: ALBERTO ESTEBAN BLANCO

RESUMEN DEL PROYECTO:

En la ultima decada, la tecnologia incorporada a los telefonos moviles ha provocado unadisrupcion en el mercado, convirtiendo estos dispositivos en maquinas muy potentes, a la vez queasequibles para la mayor parte de la poblacion mundial. Existen gran variedad de sistemasoperativos moviles, y por tanto, una gran variedad de formas de desarrollar aplicaciones.

El objetivo del PFC es docente. Consiste en una serie de lecciones practicas de desarrollo con elentorno Xamarin y su libreria Xamarin.Forms. Seran planteadas de forma incremental, buscandocompletar un recorrido por todos los elementos basicos que es necesario conocer para el correctodesarrollo de una aplicacion comercial.

DEPARTAMENTO:

Miembros del Tribunal Calificador:

PRESIDENTE: MARGARTIA MILLAN VALENZUELA

VOCAL: ANTONIO DA SILVA FARIÑA

VOCAL SECRETARIO: JESUS MORENO BLAZQUEZ

DIRECTOR:

Fecha de lectura:

Calificación:

DTE

Vº Bº.

El Secretario,

2

UNIVERSIDAD POLITÉCNICA DE MADRID

Escuela Superior Tecnica de Ingenieria y Sistemas deTelecomunicacion

INGENIERÍA TÉCNICA DE TELECOMUNICACIÓNTELEMÁTICA

PROYECTO FINAL DE CARRERA

DESARROLLO MULTIPLATAFORMA

IOS VS ANDROID CON

XAMARIN

AUTOR: ALBERTO ESTEBAN BLANCO

TUTOR: ANTONIO DA SILVA FARIÑA

4

Agradecimientos

Quiero agradecer profundamente a todas las personas que me han apoya-do y ayudado en mi formación. A todos aquellos que han aportado su granitode arena para que finalice mi carrera universitaria.

No puedo nombrar a todos, pero quiero mencionar especialmente:

A mi familia, por su apoyo desde la distancia. Siempre me hicieron presenteel valor del trabajo y el estudio.

A mi profesor y tutor, Antonio Da Silva, que me ha dado la oportunidad derealizar este proyecto. Gracias por su ayuda.

A mis compañeros de Universidad, por tantas horas vividas en los laborato-rios, buscando ayudarnos los unos a los otros.

A Adrián por compartir conmigo la Universidad, el trabajo y la locura porlas aplicaciones.

A Celestino y Marta, por hacer de Pepito Grillo cuando se necesita.

Y sobre todo, a mi abuela, que es la mejor.

5

6

"Somos lo que pensamos, todo lo que somos se levanta con nuestros pensamientos.Con ellos, creamos el mundo."

Dhammapada

Resumen

En la última década, la tecnología incorporada a los teléfonos móvilesha provocado una disrupción en el mercado de las telecomunicaciones. Es-ta tecnología ha convertido a los dispositivos en máquinas muy potentes, ala vez que económicamente asequibles para la mayor parte de la poblaciónmundial. Ello ha provocado la aparición de un nuevo mercado en el sectordel desarrollo, las aplicaciones móviles. Para el año 2019, se espera alcanzarcinco mil millones de dispositivos activos.

Como veremos más adelante, existen gran variedad de sistemas opera-tivos móviles, y por tanto, también existe una gran variedad de formas dedesarrollar aplicaciones. En la introducción plantearemos que consecuenciastiene el ecosistema actual en el desarrollo de aplicaciones móviles y por quése ha elegido el entorno de desarrollo Xamarin como tema de este ProyectoFin de Carrera.

Se analizará seguidamente el marco tecnológico de las aplicaciones mó-viles, centrado en los sistemas operativos móviles con mayor penetración enel mercado, así como las diferentes formas en las que se pueden desarrollaraplicaciones para estos sistemas.

En el capitulo Xamarin, se analizará en profundidad la plataforma, suhistoria, evolución y arquitectura, así como sus componentes fundamentalesy los de Xamarin.Forms. Con ello se pretende dar una base solida desde laque poder afrontar los siguientes capítulos de este Proyecto Fin de Carrera.

Las lecciones prácticas se han planteado de forma incremental, buscandorealizar un recorrido completo por todos los elementos básicos que es nece-sario conocer para el correcto desarrollo de una aplicación comercial.

El resultado final será una aplicación móvil, desarrollada con Xamariny su librería Xamarin.Forms, para los sistemas operativos Android e iOS.Esta aplicación, haciendo uso de la información abierta que ofrece OpenDataMadrid, mostrará las diferentes estaciones de medición de calidad del aire dela ciudad de Madrid y los valores de las mediciones realizadas por las mismasen tiempo real, geoposicionándolas en un mapa.

7

8

Abstract

Over the last decade, the technology embedded in mobile phones, hasconverted these devices in very powerful machines, causing a disruption in thetelecommunications market. In the meantime, they became more affordableto the majority of the world population generating a high demand, convertingthe mobile applications in a new business opportunity in the InformationTechnologies development market. By the year 2019, it is expected to reach5 billion of active devices.

As we will see, there is a wide variety of mobile operating systems, andtherefore there is also a wide variety of application development platforms.Introduction chapter will present the current ecosystem, its problems andconsequences on the mobile application development and the reason for se-lecting Xamarin as main theme of this PFC.

A specific chapter analysis the technological framework of mobile applica-tions, as well as the development methodologies, with particular emphasis onthe operating systems with the highest penetration in the market, currentlyiOS and Android.

The Xamarin platform and Xamarin.Forms library are presented in adedicated chapter. Its history, evolution and fundamentals components aredescribed to set the basis to approach the next chapters of this PFC.

The practical lessons have been structured incrementally to bring up allthe basic elements needed to properly develop a commercial application. Eachpractice will serve as a basis for the next, growing in difficulty and ending ina single solution that gathers all previous lessons.

The result will be a mobile application, for iOS and Android operativesystems, developed with Xamarin and the library Xamarin.Forms. It will beable to provide the measuring stations and the real time air quality valuesgiven by the Madrid's OpenData platform. Also will provide the GPS posi-tions of the stations, placing them on a map, as well as the position of thephone itself.

9

10

Índice general

Índice de figuras 15

Fragmentos de Código 17

Índice de tablas 19

Acrónimos 21

1. Introducción 231.1. Visión general . . . . . . . . . . . . . . . . . . . . . . . . . . . 241.2. Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2. Marco tecnológico 272.1. Dispositivos móviles . . . . . . . . . . . . . . . . . . . . . . . . 282.2. Sistemas operativos móviles . . . . . . . . . . . . . . . . . . . 28

2.2.1. Android . . . . . . . . . . . . . . . . . . . . . . . . . . 282.2.2. iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.2.3. Otros sistemas operativos . . . . . . . . . . . . . . . . 31

2.2.3.1. Windows Mobile . . . . . . . . . . . . . . . . 312.2.3.2. BlackBerry OS . . . . . . . . . . . . . . . . . 31

2.3. Tecnologías de desarrollo de aplicaciones multiplataforma . . . 322.3.1. Apache Cordova . . . . . . . . . . . . . . . . . . . . . . 322.3.2. Appcelerator Titanium . . . . . . . . . . . . . . . . . . 34

3. Xamarin 373.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383.2. Historia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383.3. Arquitectura . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

3.3.1. Android . . . . . . . . . . . . . . . . . . . . . . . . . . 413.3.2. iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

3.4. Xamarin.Forms . . . . . . . . . . . . . . . . . . . . . . . . . . 43

11

12 ÍNDICE GENERAL

3.4.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . 433.4.2. Estructura de la aplicación . . . . . . . . . . . . . . . . 443.4.3. XAML . . . . . . . . . . . . . . . . . . . . . . . . . . . 453.4.4. MVVM . . . . . . . . . . . . . . . . . . . . . . . . . . 46

3.4.4.1. Data Binding . . . . . . . . . . . . . . . . . . 463.4.4.2. Modelo . . . . . . . . . . . . . . . . . . . . . 473.4.4.3. VistaModelo . . . . . . . . . . . . . . . . . . 483.4.4.4. Vista . . . . . . . . . . . . . . . . . . . . . . 49

3.4.5. Inyección de dependencias y Servicios específicos de laplataforma . . . . . . . . . . . . . . . . . . . . . . . . . 50

3.4.6. Elementos UI Xamarin.Forms . . . . . . . . . . . . . . 513.4.6.1. Pages . . . . . . . . . . . . . . . . . . . . . . 513.4.6.2. Layouts . . . . . . . . . . . . . . . . . . . . . 543.4.6.3. Views . . . . . . . . . . . . . . . . . . . . . . 583.4.6.4. Cells . . . . . . . . . . . . . . . . . . . . . . . 65

4. Lecciones propuestas Xamarin 674.1. Practica 0: Instalación del entorno y aplicación Hola Mundo . 68

4.1.1. Instalación en Mac OS . . . . . . . . . . . . . . . . . . 684.1.2. Instalación en Windows . . . . . . . . . . . . . . . . . 69

4.1.2.1. Visual Studio . . . . . . . . . . . . . . . . . . 694.1.2.2. Xamarin Mac Agent . . . . . . . . . . . . . . 704.1.2.3. Visual Studio Emulator . . . . . . . . . . . . 71

4.1.3. Creación de la solución . . . . . . . . . . . . . . . . . . 724.1.4. Proyecto compartido . . . . . . . . . . . . . . . . . . . 734.1.5. Ejecución de la aplicación . . . . . . . . . . . . . . . . 74

4.2. Practica 1: interfaces básicas y arquitectura MVVM . . . . . . 754.2.1. MVVM . . . . . . . . . . . . . . . . . . . . . . . . . . 764.2.2. Modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . 764.2.3. VistaModelo . . . . . . . . . . . . . . . . . . . . . . . . 774.2.4. Vista . . . . . . . . . . . . . . . . . . . . . . . . . . . . 794.2.5. Ejecución de la aplicación . . . . . . . . . . . . . . . . 80

4.3. Práctica 2: interfaces avanzadas . . . . . . . . . . . . . . . . . 814.3.1. Navegación . . . . . . . . . . . . . . . . . . . . . . . . 814.3.2. NavigationPage . . . . . . . . . . . . . . . . . . . . . . 824.3.3. Propiedad Navigation . . . . . . . . . . . . . . . . . . . 834.3.4. Inclusión de una nueva página . . . . . . . . . . . . . . 834.3.5. Ejecución de la aplicación . . . . . . . . . . . . . . . . 86

4.4. Práctica 3: Código compartido . . . . . . . . . . . . . . . . . . 884.4.1. Shared Project . . . . . . . . . . . . . . . . . . . . . . 884.4.2. PCL: Portable Class Library . . . . . . . . . . . . . . . 88

ÍNDICE GENERAL 13

4.4.3. Implementación PCL . . . . . . . . . . . . . . . . . . . 904.4.4. Ejecución de la aplicación . . . . . . . . . . . . . . . . 92

4.5. Práctica 4: Código dependiente de la plataforma . . . . . . . . 944.5.1. Inyección de dependencias . . . . . . . . . . . . . . . . 94

4.5.1.1. Interfaz . . . . . . . . . . . . . . . . . . . . . 944.5.1.2. Implementación Android . . . . . . . . . . . . 954.5.1.3. Implementación iOS . . . . . . . . . . . . . . 974.5.1.4. Registro y resolución del Contenedor de in-

yección de dependencias . . . . . . . . . . . . 984.5.2. Inclusión del mapa . . . . . . . . . . . . . . . . . . . . 994.5.3. Ejecución de la aplicación . . . . . . . . . . . . . . . . 101

5. Conclusiones y trabajos futuros 1035.1. Conclusiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1035.2. Trabajos futuros . . . . . . . . . . . . . . . . . . . . . . . . . 104

Bibliografía 105

14 ÍNDICE GENERAL

Índice de figuras

2.1. Logo Android Nougat . . . . . . . . . . . . . . . . . . . . . . . 292.2. Distribución de versiones Android en el mercado, Mayo 2017 . 292.3. Logo iOS 10 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302.4. Logo Windows 10 Mobile . . . . . . . . . . . . . . . . . . . . . 312.5. Logo BlackBerry 10 . . . . . . . . . . . . . . . . . . . . . . . . 322.6. Logo Apache Cordova . . . . . . . . . . . . . . . . . . . . . . 322.7. Arquitectura Apache Cordova . . . . . . . . . . . . . . . . . . 332.8. Logo Appcelerator Titanium . . . . . . . . . . . . . . . . . . . 342.9. Arquitectura Appcelerator Titanium . . . . . . . . . . . . . . 35

3.1. Logo Xamarin . . . . . . . . . . . . . . . . . . . . . . . . . . . 383.2. Logo del proyecto Mono . . . . . . . . . . . . . . . . . . . . . 393.3. Arquitectura Xamarin.Anroid . . . . . . . . . . . . . . . . . . 413.4. Arquitectura Xamarin.iOS . . . . . . . . . . . . . . . . . . . . 423.5. Compilación AOT . . . . . . . . . . . . . . . . . . . . . . . . . 433.6. Estructura de capas Xamarin.Forms . . . . . . . . . . . . . . . 443.7. Interacción entre elementos MVVM . . . . . . . . . . . . . . . 463.8. Inyección de dependencias . . . . . . . . . . . . . . . . . . . . 513.9. Tipos de Page . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.10. Visualización TemplatedPage . . . . . . . . . . . . . . . . . . 523.11. Visualización ContentPage . . . . . . . . . . . . . . . . . . . . 523.12. Visualización MasterDetailPage . . . . . . . . . . . . . . . . . 533.13. Visualización NavigationPage . . . . . . . . . . . . . . . . . . 533.14. Visualización TabbedPage . . . . . . . . . . . . . . . . . . . . 543.15. Visualización CarouselPage . . . . . . . . . . . . . . . . . . . . 543.16. Tipos de Layout . . . . . . . . . . . . . . . . . . . . . . . . . . 553.17. Visualización ActivityIndicator . . . . . . . . . . . . . . . . . 583.18. Visualización Button . . . . . . . . . . . . . . . . . . . . . . . 593.19. Visualización DatePicker . . . . . . . . . . . . . . . . . . . . . 593.20. Visualización Entry . . . . . . . . . . . . . . . . . . . . . . . . 603.21. Visualización ListView . . . . . . . . . . . . . . . . . . . . . . 61

15

16 ÍNDICE DE FIGURAS

3.22. Visualización ProgressBar . . . . . . . . . . . . . . . . . . . . 623.23. Visualización SearchBar . . . . . . . . . . . . . . . . . . . . . 623.24. Visualización Slider . . . . . . . . . . . . . . . . . . . . . . . . 623.25. Visualización Stepper . . . . . . . . . . . . . . . . . . . . . . . 633.26. Visualización Switch . . . . . . . . . . . . . . . . . . . . . . . 633.27. Visualización TableView . . . . . . . . . . . . . . . . . . . . . 643.28. Visualización EntryCell . . . . . . . . . . . . . . . . . . . . . . 653.29. Visualización SwitchCell . . . . . . . . . . . . . . . . . . . . . 653.30. Visualización TextCell . . . . . . . . . . . . . . . . . . . . . . 663.31. Visualización ImageCell . . . . . . . . . . . . . . . . . . . . . 66

4.1. Android Virtual Device Manager vacío . . . . . . . . . . . . . 684.2. Creación de un nuevo emulador Android . . . . . . . . . . . . 694.3. Selección de opciones de instalación Visual Studio . . . . . . . 704.4. Xamarin Mac Agent . . . . . . . . . . . . . . . . . . . . . . . 714.5. Xamarin Mac Agent enlazado . . . . . . . . . . . . . . . . . . 714.6. Listado de Dispositivos Virtuales Android en Visual Studio . . 724.7. Creación de la solución Práctica 0 . . . . . . . . . . . . . . . . 734.8. Jerarquía de la solución Práctica 0 . . . . . . . . . . . . . . . 734.9. Detalle archivos XAML y CS . . . . . . . . . . . . . . . . . . 744.10. Ejecución Práctica 0 . . . . . . . . . . . . . . . . . . . . . . . 754.11. Patrón MVVM . . . . . . . . . . . . . . . . . . . . . . . . . . 764.12. Binding flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . 794.13. Ejecución Práctica 1 . . . . . . . . . . . . . . . . . . . . . . . 814.14. Pila de navegación: Push . . . . . . . . . . . . . . . . . . . . . 824.15. Pila de navegación: Pop . . . . . . . . . . . . . . . . . . . . . 824.16. Creación de una nueva ContentPage . . . . . . . . . . . . . . . 844.17. Práctica 2 Android . . . . . . . . . . . . . . . . . . . . . . . . 874.18. Práctica 2 iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . 874.19. Shared Project . . . . . . . . . . . . . . . . . . . . . . . . . . 884.20. Portable Class Library . . . . . . . . . . . . . . . . . . . . . . 894.21. Instalación paquete Nuget . . . . . . . . . . . . . . . . . . . . 914.22. Estructura del proyecto PCL . . . . . . . . . . . . . . . . . . 924.23. Práctica 3 Android . . . . . . . . . . . . . . . . . . . . . . . . 934.24. Práctica 3 iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . 934.25. Esquema de inyección de dependencias . . . . . . . . . . . . . 944.26. Práctica 4 Android . . . . . . . . . . . . . . . . . . . . . . . . 1024.27. Práctica 4 iOS . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Fragmentos de Código

3.1. Ejemplo de código XAML . . . . . . . . . . . . . . . . . . . . 453.2. Ejemplo DataBinding XAML . . . . . . . . . . . . . . . . . . 473.3. Ejemplo DataBinding C# . . . . . . . . . . . . . . . . . . . . 473.4. Ejemplo Modelo . . . . . . . . . . . . . . . . . . . . . . . . . . 473.5. Ejemplo VistaModelo . . . . . . . . . . . . . . . . . . . . . . . 483.6. Ejemplo Vista fichero C# . . . . . . . . . . . . . . . . . . . . 493.7. Ejemplo Vista fichero XAML . . . . . . . . . . . . . . . . . . 503.8. Ejemplo de ScrollView XAML . . . . . . . . . . . . . . . . . . 553.9. Ejemplo de Frame XAML . . . . . . . . . . . . . . . . . . . . 563.10. Ejemplo de AbsoluteLayout XAML . . . . . . . . . . . . . . . 563.11. Ejemplo de Grid XAML . . . . . . . . . . . . . . . . . . . . . 573.12. Ejemplo de StackLayout XAML . . . . . . . . . . . . . . . . . 573.13. Ejemplo de RelativeLayout XAML . . . . . . . . . . . . . . . 583.14. Ejemplo de ActivityIndicator . . . . . . . . . . . . . . . . . . 583.15. Ejemplo de BoxView . . . . . . . . . . . . . . . . . . . . . . . 593.16. Ejemplo de Button . . . . . . . . . . . . . . . . . . . . . . . . 593.17. Ejemplo de DatePicker . . . . . . . . . . . . . . . . . . . . . . 603.18. Ejemplo de Entry . . . . . . . . . . . . . . . . . . . . . . . . . 603.19. Ejemplo de Editor . . . . . . . . . . . . . . . . . . . . . . . . 603.20. Ejemplo de Image . . . . . . . . . . . . . . . . . . . . . . . . . 613.21. Ejemplo de Label . . . . . . . . . . . . . . . . . . . . . . . . . 613.22. Ejemplo de ListView . . . . . . . . . . . . . . . . . . . . . . . 613.23. Ejemplo de Picker . . . . . . . . . . . . . . . . . . . . . . . . . 623.24. Ejemplo de ProgressBar . . . . . . . . . . . . . . . . . . . . . 623.25. Ejemplo de SearchBar . . . . . . . . . . . . . . . . . . . . . . 623.26. Ejemplo de Slider . . . . . . . . . . . . . . . . . . . . . . . . . 633.27. Ejemplo de Stepper . . . . . . . . . . . . . . . . . . . . . . . . 633.28. Ejemplo de Switch . . . . . . . . . . . . . . . . . . . . . . . . 633.29. Ejemplo de TableView . . . . . . . . . . . . . . . . . . . . . . 643.30. Ejemplo de TimePicker . . . . . . . . . . . . . . . . . . . . . . 643.31. Ejemplo de WebView . . . . . . . . . . . . . . . . . . . . . . . 64

17

18 FRAGMENTOS DE CÓDIGO

3.32. Ejemplo de EntryCell . . . . . . . . . . . . . . . . . . . . . . . 653.33. Ejemplo de SwitchCell . . . . . . . . . . . . . . . . . . . . . . 653.34. Ejemplo de TextCell . . . . . . . . . . . . . . . . . . . . . . . 653.35. Ejemplo de ImageCell . . . . . . . . . . . . . . . . . . . . . . 66

4.1. Modelo Station . . . . . . . . . . . . . . . . . . . . . . . . . . 774.2. VistaModelo StationsViewModel . . . . . . . . . . . . . . . . 784.3. Vista XAML . . . . . . . . . . . . . . . . . . . . . . . . . . . 794.4. TextCell bindings . . . . . . . . . . . . . . . . . . . . . . . . . 794.5. Vista C# . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804.6. Inclusión de NavigationPage . . . . . . . . . . . . . . . . . . . 834.7. Modelo Measure . . . . . . . . . . . . . . . . . . . . . . . . . . 844.8. MeasuresPage.xaml . . . . . . . . . . . . . . . . . . . . . . . . 854.9. MeasuresPage.cs . . . . . . . . . . . . . . . . . . . . . . . . . 854.10. Método OnSelection . . . . . . . . . . . . . . . . . . . . . . . 864.11. Binding del método OnSelection . . . . . . . . . . . . . . . . . 864.12. Json Stations . . . . . . . . . . . . . . . . . . . . . . . . . . . 904.13. Método getStations ViewModel . . . . . . . . . . . . . . . . . 924.14. Clase Location . . . . . . . . . . . . . . . . . . . . . . . . . . 954.15. Interfaz iGPS . . . . . . . . . . . . . . . . . . . . . . . . . . . 954.16. Implementación ILocationListener . . . . . . . . . . . . . . . . 964.17. Implementación IGPS Android . . . . . . . . . . . . . . . . . 974.18. Implementación IGPS iOS . . . . . . . . . . . . . . . . . . . . 984.19. Registro de inyección de dependencias . . . . . . . . . . . . . . 984.20. Resolución de dependencias en StationsViewModel . . . . . . 994.21. Ejemplo de layout con Map . . . . . . . . . . . . . . . . . . . 1004.22. Ejemplo de Map en C# . . . . . . . . . . . . . . . . . . . . . 1004.23. Método toggleView . . . . . . . . . . . . . . . . . . . . . . . . 101

Índice de tablas

3.1. Histórico de versiones Xamarin.iOS . . . . . . . . . . . . . . . 403.2. Histórico de versiones Xamarin.Android . . . . . . . . . . . . . 40

4.1. Métodos de la interfaz INavegation . . . . . . . . . . . . . . . 83

19

20 ÍNDICE DE TABLAS

Acrónimos

AOT Ahead of Time 38, 39

API Application Programming Interface 37, 38, 41

CLI Common Language Infrastructure 34

CLR Common Language Runtime 38

IDE Integrated Development Environment 30, 34, 35

JIT Just in Time 38

JNI Java Native Interface 37

JSON JavaScript Object Notation 30, 88–90

MVVM Modelo-Vista-VistaModelo 40, 42, 74

PCL Portable Class Library 40, 41, 89, 92, 104

SAP Shared Asset Project 40, 41

SDK Software Development Kit 30, 34

XAML Extensible Application Markup Language 40–42, 46, 51, 71, 82, 84

XML Extensible Markup Language 30, 41, 71

21

22 Acrónimos

Capítulo 1

Introducción

En este capítulo de introducción, se da una visión general sobre el mun-do de la tecnología móvil, además de explicar los objetivos que se buscancompletar con la realización del presente proyecto.

23

24 CAPÍTULO 1. INTRODUCCIÓN

1.1. Visión general

Los dispositivos móviles han evolucionado de forma imparable en las dosúltimas décadas, incluyendo nuevos sensores y capacidades, llevando a que eluso como terminal de telefonía no sea el servicio más utilizado. Los terminalesactuales han alcanzado una capacidad de computación tal, que cualquierade los terminales actualmente en el mercado tienen más potencia que losordenadores encargados de llevar las misiones Apollo a la Luna [12].

Si a esto sumamos el abaratamiento de los terminales, se puede compren-der su amplia distribución, llegando a superar el mercado de ordenadoresportátiles en 2007 [17]. Ya en el año 2015 los teléfonos móviles se convirtie-ron en el principal punto de acceso a Internet para los españoles, según elestudio La Sociedad de la Información en España 2016 [16] de la FundaciónTelefónica.

Este estudio también refleja la evolución de la penetración en el merca-do de los diferentes sistemas operativos móviles. En Junio de 2016, Androidalcanzó una cuota de mercado del 92,1% e iOS un 8,2%, mientras que Win-dows Phone perdía casi la totalidad de su cuota, retrocediendo del 4% de unaño antes a un 0,4%. Con estos datos podemos afirmar que para cubrir lapráctica totalidad del mercado con una aplicación, al menos será necesariodesarrollarla para los sistemas operativos Android e iOS.

Esto supone una gran inversión de tiempo y dinero. Como veremos enel capitulo Marco Tecnológico, existen diferentes tecnologías para realizarun único desarrollo para ambas plataformas. Sin embargo, el resultado de lainteracción no alcanza las mismas cotas de calidad que los desarrollos nativos.

Este es el motivo para elegir Xamarin como tema de este proyecto. Per-mite realizar un único desarrollo manteniendo el nivel de calidad de unaaplicación nativa, ahorrando tiempos de desarrollo y asegurando la mante-nibilidad y escalabilidad de los desarrollos multiplataforma. Por todo esto,considero que es una tecnología interesante de aprender y con un gran pre-sente y futuro.

1.2. Objetivos

El objetivo de este Proyecto Fin de Carrera es crear una serie de leccionesprácticas, que servirán como punto de partida básico con el que poder apren-der el funcionamiento de la plataforma Xamarin. No se estudiarán todos losaspectos que puede abarcar una aplicación, pero si aquellos fundamentales yque permitirán al estudiante completar el aprendizaje por cuenta propia unavez haya finalizado las lecciones.

1.2. OBJETIVOS 25

El resultado final será una solución Xamarin, que permitirá exportar laaplicación a los sistemas operativos Android e iOS. La aplicación mostrarátodas las estaciones de medición de calidad del aire de la ciudad de Madrid ysus mediciones, en formato lista y geoposicionado. Estos datos son públicosy se obtienen en tiempo real del Portal de Datos Abiertos del Ayuntamientode Madrid.

Las tres primeras prácticas muestran los conceptos más básicos: comomontar el entorno de trabajo, la arquitectura de Xamarin, y como desarro-llar interfaces que permitan obtener una aplicación con una estructura denavegación compleja.

Por último, las dos prácticas finales abordan la creación de código com-partido y código dependiente de la plataforma, siendo dos de los aspectosmás interesantes a estudiar de la plataforma Xamarin.

26 CAPÍTULO 1. INTRODUCCIÓN

Capítulo 2

Marco tecnológico

Este capítulo pretende mostrar el estado actual de las tecnologías rela-cionadas con el desarrollo de aplicaciones móviles.

27

28 CAPÍTULO 2. MARCO TECNOLÓGICO

2.1. Dispositivos móviles

Los dispositivos móviles son aparatos con capacidad computacional y conun tamaño tal, que permite transportarlos con nosotros cómodamente. Lagran mayoría dispone de un medio de conexión a Internet, directo o a travésde otros dispositivos, así como un sinfín de medios de entrada/salida comoteclados, pantallas táctiles, cámaras fotográficas, wifi, bluetooth, etc.

Todo esto ha provocado que los dispositivos móviles revolucionen nuestrasociedad en la última década. Elementos con una funcionalidad clara e inmu-table durante décadas o siglos, han ampliado sus capacidades redefiniendo suuso, como por ejemplo, el teléfono móvil, el reloj inteligente o el brazalete decontrol biométrico.

Centrándonos en el tema de este proyecto, los teléfonos móviles han dejadode ser un dispositivo con una única funcionalidad, las llamadas de voz através de la red telefónica. Actualmente disponen de tantas utilidades comopodamos imaginar, gracias a las aplicaciones móviles. Haciendo uso de lanueva tecnología incorporada a los terminales, las aplicaciones se encargande proveer nuevos usos o funcionalidades a los teléfonos móviles. Como porejemplo, el GPS que permitió utilizar el teléfono como navegador para laconducción.

El auge de estos terminales ha generado un gran mercado, con una granvariedad de modelos de teléfono móvil y, como consecuencia, de sistemasoperativos móviles.

2.2. Sistemas operativos móviles

A continuación, estudiaremos los dos sistemas operativos que nos ocupanen este proyecto, Android e iOS, que como se ha comentado anteriormente,representan casi el 100% del mercado.

2.2.1. Android

Android es el sistema operativo móvil de Google. Posee licencia Apache yesta basado en el kernel de Linux, por lo que es un sistema abierto. Comenzóa ser desarrollado en 2004 por Android Inc, que fue comprada por Googlemás tarde. El desarrollo fue completado por la propia Google y el consorciode empresas tecnológicas Open Handset Alliance, que finalmente lanzaríansu primera versión en 2008.

Actualmente se encuentra en la versión 7.1.2, llamada Nougat. Utilizacomo lenguaje principal de programación Java, pudiendo ser utilizado con-

2.2. SISTEMAS OPERATIVOS MÓVILES 29

juntamente con C o C++. También es posible desarrollar aplicaciones en Go,aunque todavía es una posibilidad un poco limitada respecto de Java. Porúltimo, Google ha anunciado en Mayo de 2017, que dará soporte al lenguajede programación Kotlin para desarrollar aplicaciones Android.

Figura 2.1: Logo Android Nougat

Al ser un sistema abierto, ha sido utilizado por un sinfín de compañíasfabricantes de terminales, colonizando todas las gamas del mercado, desdelos terminales más novedosos y caros a los más económicos, convirtiéndoseasí en el claro dominador mundial. Sin embargo, este hecho le acarrea unode sus mayores inconvenientes, la inabarcable cantidad de dispositivos condiferente hardware así como lo fragmentada que se encuentra la distribucióndel sistema operativo.

Figura 2.2: Distribución de versiones Android en el mercado, Mayo 2017


Esto provoca que, para que la experiencia de usuario alcance altas cotasde calidad, se debe invertir mucho tiempo en el desarrollo. El tiempo seconsume principalmente en control de errores en las diferentes versiones delsistema operativo, que aun se encuentran en funcionamiento, y en ajustar lainterfaz a los diferentes tipos de terminales.

Dicho esto, Android es el sistema ideal para realizar betas para un solosistema por dos motivos: costes y distribución. Los costes son bajos ya queexisten terminales muy económicos y no es necesaria una licencia. La distri-bución es sencilla, ya que no es necesario utilizar el canal oficial Google Play,es posible exportar la aplicación e instalarla en cualquier terminal directa-mente. Esto confiere de gran agilidad al desarrollo, pues no hay tiempos deespera ni controles de terceros.

2.2.2. iOS

iOS es el sistema operativo creado por Apple Inc. para sus dispositivosmóviles iPhone, iPad e iPod Touch. Es un sistema cerrado y exclusivo de estosdispositivos. De esta forma, según Apple, los terminales son más seguros, yademás les permite proveer de una experiencia de usuario perfecta.

La primera versión de iPhone OS fue presentada por Apple en 2007,basándose en el kernel XNU de Darwin (BSD). Cada año desarrollan unanueva versión del sistema, por lo que actualmente nos encontramos en laversión iOS 10.

Figura 2.3: Logo iOS 10

Los lenguajes utilizados para programar en este sistema son Swift yObjective-C, pudiendo escribir algunas partes en C o C++. Apple ejerceun control férreo sobre las aplicaciones desarrolladas para sus dispositivos,ya que solo se pueden desarrollar disponiendo de un ordenador con sistemaoperativo Mac OS. Además para distribuir las aplicaciones a través del canaloficial, la App Store, deben pasar una revisión exhaustiva tanto del códigocomo de los contenidos que mostrarán.

Todo lo comentado anteriormente, ha generado un ecosistema seguro,pero con unos costes altos tanto en la compra de los terminales como en eldesarrollo de aplicaciones. Esto provoca, que se deba desarrollar para este

2.2. SISTEMAS OPERATIVOS MÓVILES 31

sistema si se quiere abarcar todo el mercado, pero que sea una opción muypoco interesante para desarrollar betas o productos que aun se encuentranen una fase de definición o que requerirán de muchas iteraciones sobre eldesarrollo.

2.2.3. Otros sistemas operativos

Existen otros sistemas aparte de los mencionados anteriormente. Sin em-bargo, estos sistemas a pesar de contar con una larga trayectoria, o nuncallegaron a ocupar una cuota considerable del mercado, o la incapacidad deadaptación les hizo perderla.

2.2.3.1. Windows Mobile

Windows Mobile es el sistema operativo de Microsoft, desarrollado basán-dose en el kernel de Windows NT. Es cerrado y propietario. Fue presentadoen 2010, llegando a ocupar la tercera posición del mercado, a distancia de iOSy Android. Su momento de mayor expansión llegó gracias a la expectacióngenerada por su alianza con Nokia, aunque finalmente no dio los resultadosesperados y se separaron. Su actual versión es Windows 10 Mobile. En elultimo año ha perdido la gran mayoría de su cuota, pasando a ser residualen comparación con los líderes del mercado.

Figura 2.4: Logo Windows 10 Mobile

2.2.3.2. BlackBerry OS

BlackBerry OS es el sistema operativo de BlackBerry Limited, desarrolla-do basándose en QNX OS. Es cerrado y propietario. Fue presentado en el año1999, convirtiéndose en uno de los dominadores del mercado y líder absolutoen el sector corporativo. Al igual que en el caso de iOS, solo montaba susistema en sus propios teléfonos, siendo el principal argumento la seguridad.Gracias a ello, a la buena integración con el correo electrónico corporativo y aotros motivos, como un teclado físico que fue revolucionario en su momento,este ecosistema gozó de un gran éxito, sobre todo en la década de los 2000.Sin embargo, la entrada de nuevos competidores que redefinieron el segmentode la telefonía móvil y la reticencia al cambio de la propia BlackBerry, fueronpaulatinamente haciéndole caer en ventas hasta prácticamente desaparecer.


Figura 2.5: Logo BlackBerry 10

Su desarrollo se ha detenido, aunque la compañía sigue dando soportey proveyendo de actualizaciones a sus usuarios. Actualmente BlackBerry seencuentra centrada en la fabricación de terminales con sistema operativoAndroid.

2.3. Tecnologías de desarrollo de aplicacionesmultiplataforma

En esta sección vamos a analizar las diferentes opciones que ofrece elmercado para el desarrollo de aplicaciones móviles multiplataforma.

2.3.1. Apache Cordova

Anteriormente conocido como PhoneGap, Apache Cordova es el entornode desarrollo más extendido para desarrollar aplicaciones multiplataforma.Originalmente desarrollado por Nitobi Software, fue adquirido por Adobeen 2011[1]. Coincidiendo con la adquisición, fue liberado su código fuentemediante licencia Apache[6] y pasó a conocerse por su actual denominación.

Figura 2.6: Logo Apache Cordova

Apache Cordova combina la posibilidad de programar la interfaz de laaplicación mediante JavaScript, HTML5 y CSS3, con el acceso a la API deldispositivo también mediante JavaScript. A este tipo de aplicaciones se lesdenomina híbridas, ya que si bien su comportamiento es similar a un sitio

2.3. TECNOLOGÍAS DE DESARROLLO DE APLICACIONES MULTIPLATAFORMA33

web, también son capaces de acceder a la API del teléfono y se instalan yacceden como una aplicación corriente.

Figura 2.7: Arquitectura Apache Cordova

En la figura 2.7 [5] podemos observar el esquema de la arquitectura deuna aplicación Apache Cordova. La pieza central de la arquitectura es laWebView. Se encarga de comunicar la WebApp y los plugins con el sistemaoperativo y de renderizar la interfaz de usuario. La WebApp contiene elcódigo de la aplicación y sus recursos (imágenes, ficheros, etc), definiendo lainterfaz de la aplicación y su comportamiento.

Por último, los plugins, los cuales son parte fundamental de la platafor-ma. Ofrecen acceso directo a las APIs nativas del dispositivo a través deJavaScript, simplificando el desarrollo. En este punto, debemos diferenciardos tipos de plugins, aquellos que son considerados parte de los fundamentosde Cordova y los realizados por terceros. Mientras los últimos tienen múlti-ples propósitos, los plugins que forman parte del núcleo de Cordova facilitanel trabajo con los componentes del teléfono como pueden ser cámara, Blue-tooth, acelerómetros, GPS, etc.

Apache Cordova define su filosofía como “escribe una vez”, objetivo alcual se enfoca su arquitectura. Sin embargo, al igual que con los navega-dores de escritorio, estas aplicaciones acaban necesitando ajustes para cadaplataforma, especialmente si se quiere optimizar el resultado final en cuanto


a aspecto y rendimiento, el cual se resiente con las rutinas multitarea, lasinterfaces complejas o el uso de la cámara[9].

Como conclusión, destacar que si bien Apache Cordova se acerca bastan-te a su objetivo, no lo alcanza completamente. Para obtener un resultadoprofesional se deberán realizar ajustes en cada plataforma, vigilando que elrendimiento de la aplicación no decaiga. Además, la interfaces están constru-idas con elementos HTML y no con elementos nativos, por lo que el compor-tamiento no será exactamente el esperado en una aplicación. Por todos estosmotivos, se ha considerado más interesante Xamarin como tema a desarrollaren el presente proyecto.

2.3.2. Appcelerator Titanium

Appcelerator Titanium es un entorno de desarrollo de aplicaciones mul-tiplataforma de código abierto. Desarrollado por Appcelerator, fue lanzadoinicialmente para aplicaciones de escritorio únicamente. En 2009 introdujo eldesarrollo para Android e iOS, separando el desarrollo móvil y escritorio en2012. En 2016 Appcelerator fue comprada por la compañía Axway.

Figura 2.8: Logo Appcelerator Titanium

Titanium provee de un IDE basado en Eclipse, así como un SDK, conel cual programar en Javascript como lenguaje de alto nivel. Utiliza XMLpara la construcción de las vistas y TSS (Titanium Style Sheet) para losestilos. Los archivos TSS son similares a JSON, y definen los estilos que mástarde serán utilizados como atributos del XML de la vista. El resultado dela exportación será una interfaz bastante similar a las interfaces nativas.

2.3. TECNOLOGÍAS DE DESARROLLO DE APLICACIONES MULTIPLATAFORMA35

Figura 2.9: Arquitectura Appcelerator Titanium

Titanium se define a si mismo como un puente entre el sistema operativonativo y el código de la aplicación, como puede observarse en la figura 2.9.En el nivel inferior tenemos el sistema operativo correspondiente y en la par-te superior la aplicación codificada en Javascript, encontrándose Titaniumentre ambos. La aplicación solicitará la creación de elementos de la interfaz,nuevas pantallas, etc a través de las APIs de Titanium que se encargarán deinterpretar las peticiones, para servírselas al sistema operativo. Así mismo,Titanium se encargará de hacer accesibles a la aplicación los eventos genera-dos en el sistema operativo, completando la comunicación bidireccional entresistema operativo y la aplicación Javascript.

Como conclusión, podemos decir que Appcelerator ha adoptado una solu-ción muy similar a Xamarin. Ambos proveen como producto final una aplica-ción nativa, y no una web encapsulada en una aplicación. Sin embargo, en elcaso de Titanium esta definición no es exacta. Los objetos nativos son com-pilados como código nativo, pero no la lógica de negocio que se mantendráen Javascript y será interpretada en tiempo de ejecución por JavaScriptCore.Por lo tanto, siendo superior en rendimiento a PhoneGap, no es comparablea las cotas de rendimiento alcanzadas por Xamarin.


Capítulo 3

Xamarin

En este capitulo se realizará un recorrido a través de las bases de Xamarin.El objetivo es alcanzar un mejor conocimiento de la plataforma Xamarin yde su paquete Xamarin.Forms.

37

38 CAPÍTULO 3. XAMARIN

3.1. Introducción

Xamarin es un entorno de desarrollo de aplicaciones multiplataforma,tanto para desarrollos de escritorio como móvil. La compañía Xamarin Inc.,con sede en California, es propiedad de Microsoft. Actualmente trabajan en lacompañía más de 350 empleados y cuentan con 1.4 millones de desarrolladoresque utilizan su plataforma de desarrollo por todo el mundo[20].

Figura 3.1: Logo Xamarin

Su misión es que desarrollar aplicaciones móviles geniales sea fácil, rápidoy divertido, mediante la creación de las mejores herramientas de desarrollosoftware en el mundo. Para ello, suministran su plataforma de código abierto,liberada bajo licencia MIT, que incluye tanto Xamarin SDK como sus pluginse IDEs.

A partir de un solo desarrollo en C#, Xamarin permite crear aplicacionesnativas para los entornos Android, iOS, Windows Mobile, macOS yWindows.Dependiendo de la vía elegida para el desarrollo, la cantidad de código com-partido podrá ser la totalidad del mismo o limitarse a la lógica de negocio,como veremos en los siguientes apartados.

3.2. Historia

Los inicios de Xamarin se remontan más allá de la fundación de la com-pañía. Era el año 2000, Microsoft acababa de lanzar .NET y CLI se habíapublicado como un standard abierto. Miguel de Icaza y Nat Friedman, fun-dadores de Xamarin, vieron en ello una oportunidad para mejorar la pro-ductividad de los desarrollos y se centraron en crear una versión para Linuxdesde su anterior compañía, Ximian. El proyecto se llamaría Mono, pero da-do que no contaban con los recursos necesarios para completarlo, en 2001decidieron publicarlo como código abierto para obtener la ayuda de otrosdesarrolladores.

3.2. HISTORIA 39

Figura 3.2: Logo del proyecto Mono

Tras varios años de desarrollo, se publicó Mono 1.0. Había pasado de tenersu único foco en el desarrollo de aplicaciones Linux, a soportar una ampliavariedad de sistemas.

Ximian fue comprada por Novell en 2003, un año antes de la publicaciónde Mono. Durante este periodo el proyecto creció, lanzando las primeras ver-siones de MonoTouch y Mono For Android, en 2009 y 2011 respectivamente.Novell dio soporte a la plataforma hasta 2011. Aquel año, Novell fue com-prada por Attachmate, anunciando el despido de una gran cantidad de losdesarrolladores del proyecto Mono. A raíz de estos acontecimientos, Miguelde Icaza anunció que continuaría el desarrollo y soporte de Mono desde unanueva compañía, Xamarin.

Fue un periodo de incertidumbre, de Icaza había perdido su equipo detrabajo y la licencia de Mono pertenecía a Attachmate. Llegó incluso a plan-tearse la posibilidad de volver a realizar los desarrollos por completo desdecero, pero seguía sin aclararse como demostrarían que los nuevos desarrollosde Xamarin no hacían uso de la tecnología desarrollada en Mono. Sin em-bargo, todo se acabó solucionando poco tiempo después. Novell anunció queentregaba una licencia a perpetuidad a Xamarin y gran parte del antiguoequipo del proyecto Mono se unió a de Icaza en esta nueva aventura.

El proyecto continuó evolucionando, lanzando actualizaciones periódicas,algunas casi simultáneas al lanzamiento de las nuevas versiones de los siste-mas operativos, como puede observarse en las tablas 4.1 y 3.1. En la búsquedade hacer que los desarrollos fueran más sencillos, crearon su propio IDE, Xa-marin Studio, y un plugin para Visual Studio.

Finalmente, en Febrero de 2016 fue adquirida por Microsoft, que decidióabrir el código bajo licencia MIT y pasó a ofrecer gratuitamente muchosde los servicios del nivel Enterprise. Además, posicionó Xamarin como suproducto estrella para el desarrollo móvil dentro del entorno de Visual Studio,


incluyendo el paquete Xamarin en la instalación por defecto, preinstalandoalgunos de sus componentes y ofreciendo una fácil integración con los serviciosde Microsoft Azure.

Versión Notas Fecha

MonoTouch 1 Versión inicial 09/2009

MonoTouch 2 Soporte para iPad 04/2010

MonoTouch 3 Soporte para iPhone 4 04/2010

MonoTouch 4 Soporte para iOS 4 04/2011



Xamarin.iOS 6.2 Soporte para Visual Studio 02/2013

Xamarin.iOS 7 Soporte para iOS 7 09/2013




Tabla 3.1: Histórico de versiones Xamarin.iOS

Versión Notas Fecha

Mono For Android 1 Versión inicial (Android 2.2) 04/2011

Mono For Android 4 Soporte para Android 3 y 4 12/2011

Xamarin.Android 5 Soporte para Android 5 04/2015



Tabla 3.2: Histórico de versiones Xamarin.Android

3.3. ARQUITECTURA 41

3.3. Arquitectura

En esta sección estudiaremos la arquitectura de la plataforma para cadauno de los sistemas operativos y su interacción dentro del entorno de ejecuciónMono. Nótese que cuando se habla de código administrado, es aquel que correen el entorno Mono y código nativo aquel que corre específicamente en laplataforma nativa.

3.3.1. Android

La base de la arquitectura de Xamarin.Android es el kernel Linux. Sobreél, corren los entornos Mono y ART (Android Runtime). Ambos se encargande hacer accesibles a los desarrolladores las APIs que posibilitan la interaccióncon el sistema operativo.

Mono brinda la posibilidad de usar todas las librerías de .NET, así comoAndroid Runtime hace accesible el uso de las librerías de Java y Android.Esto permite el uso de las herramientas del sistema operativo mediante unacceso de bajo nivel, ya sea a través de Mono o de ART.

Figura 3.3: Arquitectura Xamarin.Anroid

Como puede verse en la figura 3.3, existe una comunicación bidireccionalentre el código administrado y ART. Cuando Android necesita invocar códigoen la aplicación recurre a los ACWs (Android Callable Wrappers). Son losencargados de registrar los tipos, ya que ART no permite el registro de tiposen tiempo de ejecución. Cada vez que ART quiere ejecutar un método que hasido sobrescrito o implementado en el código administrado, Xamarin.Androiddebe resolverlo para proveer a ART el método correcto.

De igual manera sucede con los MWCs (Managed Callable Wrappers),aunque en sentido contrario. Son un puente JNI que permite que el códi-


go administrado invoque, sobrescriba e implemente los métodos de Java yAndroid.

3.3.2. iOS

La base de la arquitectura de Xamarin.iOS es el kernel XNU. Sobre élcorren los dos entornos de ejecución, Full AOT (Mono) y Objective-C. Ambosse encargan de hacer accesibles a los desarrolladores las APIs que posibilitanla interacción con el sistema operativo, como se ha visto anteriormente en elcaso de Android.

Figura 3.4: Arquitectura Xamarin.iOS

Al compilar una aplicación Xamarin, Mono compilará el código en C# ob-teniendo código MSIL (Microsoft Intermediate Language), que a su vez serácompilado por CLR (.NET Common Language Runtime) usando el compila-dor JIT (Just in Time). El resultado de la compilación de JIT será finalmentecompilado como código nativo en tiempo de ejecución.

3.4. XAMARIN.FORMS 43

Figura 3.5: Compilación AOT

Esta estructura tan compleja nace de la restricción de seguridad de Apple,que no permite la ejecución de código generado dinámicamente. Debido aello, Full AOT tiene algunas limitaciones especialmente con el uso de tiposgenéricos.

En el caso de Xamarin.iOS, la comunicación bidireccional se realiza me-diante Selectores y Registradores. Los Selectores permiten al código admi-nistrado acceder al entorno de Objective-C. Un Selector es un mensaje quese envía a una clase o instancia de Objective-C.

Los Registradores hacen accesible el código administrado a Objective-C.Esto se consigue gracias a la creación de un listado con todas las clases quederivan de NSObject. Durante el arranque de la aplicación se registrarándinámicamente las clases, categorías y protocolos. También existen registra-dores estáticos, creados en tiempo de compilación, que mejoran la velocidaddel arranque de la aplicación.

3.4. Xamarin.FormsXamarin.Forms es una librería Xamarin que permite crear interfaces na-

tivas con una sola codificación. En esta sección analizaremos y estudiaremosen profundidad que nos ofrece Xamarin.Forms.

3.4.1. Introducción

Xamarin lanzó Xamarin.Forms en 2014 para simplificar el proceso decreación de interfaces nativas. Permite abstraerse de las plataformas en lasque se esta trabajando, eliminando la necesidad de codificar una interfaz


diferente por plataforma. También incluye herramientas para la inyección dedependencias, navegar por la aplicación o utilizar el patrón Modelo-Vista-VistaModelo, como veremos en las siguientes secciones de este capítulo.

3.4.2. Estructura de la aplicación

Solución es el nombre que da Xamarin al espacio de trabajo de una apli-cación. La solución de una aplicación construida con Xamarin.Forms estaráformada por tantos proyectos como sistemas operativos deba soportar laaplicación, más otro proyecto adicional que contendrá el código compartidoescrito en C# y XAML. Este proyecto puede ser un Shared Asset Project(SAP) o una Portable Class Library (PCL).

Figura 3.6: Estructura de capas Xamarin.Forms


Las librerías Xamarin.Forms.Core y Xamarin.Forms.Xaml contienen laimplementación de la API de Xamarin.Forms en la que se apoya nuestro pro-yecto SAP o PCL. Estas a su vez hacen uso de las librerías específicas de cadaplataforma Xamarin.Forms.Platform, las cuales se encargan de transformarlas interfaces de Xamarin.Forms en las interfaces nativas correspondientes.

3.4.3. XAML

Extensible Application Markup Language (XAML) es un lenguaje desa-rrollado por Microsoft, basado en XML, cuyo propósito es la instanciación einicialización de objetos. En el caso de Xamarin.Forms es el encargado de lacreación y configuración de las interfaces de usuario, mediante su definiciónjerárquica en árbol.

<?xml version="1.0" encoding="utf-8"?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

Title="Ejemplo"><AbsoluteLayout

HorizontalOptions="FillAndExpand"VerticalOptions="FillAndExpand"><Label

Text="Ejemplo XAML"IsVisible="True"HorizontalTextAlignment="Center"VerticalOptions="CenterAndExpand"TextColor="Black"/>

</AbsoluteLayout></ContentPage>

Fragmento de Código 3.1: Ejemplo de código XAML

Las clases de Xamarin.Forms son elementos en XAML, así como sus pro-piedades son atributos. Por ello, como veíamos en el fragmento de código3.1, la clase Label aparece como un elemento de XAML y sus propiedades,por ejemplo isVisible, pasan a ser atributos. Para poder ser instanciadas enXAML las clases deben disponer de un constructor sin parámetros y paraque las propiedades puedan ser usadas como atributos, deben disponer de unmétodo set público.

El uso de XAML no es obligatorio, ya que cualquier cosa que se puedahacer con XAML se puede hacer con C#.


3.4.4. MVVM

MVVM es un patrón de presentación diseñado para controlar la separa-ción entre la interfaz de usuario y el resto de la aplicación. El patrón cuentacon cuatro elementos principales: Modelos, Vistas, VistaModelos y Data Bin-ding.

Figura 3.7: Interacción entre elementos MVVM

3.4.4.1. Data Binding

Data Binding es la conexión de dos objetos de tal forma que siempre seencuentren sincronizados. En MVVM el ejemplo más claro son los DataBin-dings entre propiedades presentes en la Vista y el VistaModelo. Así, cuandola propiedad es modificada en la Vista, es actualizada en el VistaModelo yviceversa. Juega un papel fundamental en el patrón MVVM.

Para ello es necesario que el objeto destino apunte su BindingContext alobjeto de origen. Además, el objeto destino debe llamar al método setBindingindicándole que propiedades quiere enlazar, ya sea invocando el método enC# o con la extensión de marcado Binding en XAML. La propiedad a enlazardebe heredar de BindableObject.

En el fragmento de código 3.2 podemos ver un ejemplo de DataBindingen XAML. El BindingContext de ContentPage (Vista) referencia a MyView-Model (VistaModelo), mientras que Label enlaza su propiedad Text con lapropiedad Name de MyViewModel.


<ContentPage Title="Ejemplo Binding XAML"><ContentPage.BindingContext><viewModels:MyViewModel/></ContentPage.BindingContext><Label Text="{Binding Name}"/>

</ContentPage>

Fragmento de Código 3.2: Ejemplo DataBinding XAML

La creación de un DataBinding en C# se muestra en el fragmento decódigo 3.3. El BindingContext de la variable Label referencia a la variabledata, y su propiedad Text es enlazada con la propiedad Name de data.

var label = new Label ();label.SetBinding (Label.TextProperty, "Name");var data = new {Name = "Pepe"};label.BindingContext = data;Debug.WriteLine (label.Text); //Mostrará "Pepe"

Fragmento de Código 3.3: Ejemplo DataBinding C#

3.4.4.2. Modelo

Los modelos representan entidades de la aplicación. Encapsulan la lógicade negocio y los datos, asegurando la consistencia y validez de los mismosmediante las reglas de negocio y la lógica de validación.

No deben referenciar la Vista ni el VistaModelo, sino que se deben imple-mentar las interfaces INotifyPropertyChanged e INotifyCollectionChanged,responsables de notificar al VistaModelo los cambios que se produzcan en elModelo.

namespace EjemplosMVVM.Models{

public class Item{

public Item (){}public int Id { get;set;}public string Name { get;set;}

}}

Fragmento de Código 3.4: Ejemplo Modelo


3.4.4.3. VistaModelo

Los VistaModelos actúan de intermediarios de la comunicación entre Mo-delo y Vista. Controlan y modifican las vistas, actuando como contexto dela información. El VistaModelo no tiene referencia de la Vista ni conoce suimplementación, es la Vista quien lo referencia a él.

Un VistaModelo esta compuesto por propiedades y comandos. Estas pro-piedades, pertenecientes a los modelos, se encuentran enlazadas a las vistas,ya sea para proveerlas de información a mostrar o para recoger la informa-ción introducida por el usuario. Los comandos son acciones que se ejecutanal dispararse los eventos producidos en la vista.

namespace EjemplosMVVM.ViewModels{//El VistaModelo implementa la interfaz INotifyPropertyChangedpublic class ItemViewModel : INotifyPropertyChanged{

//Método que gestionará el evento cuando la propiedad cambiepublic event PropertyChangedEventHandler PropertyChanged;

//ObservableCollection implementa INotifyCollectionChangedprivate ObservableCollection<Item> items = new

ObservableCollection<Item>();

public ObservableCollection<Item> Items{ get { return items; }

set { items = value; OnPropertyChanged(); }}public ItemViewModel(){}

public void OnPropertyChanged([CallerMemberName] stringpropertyName = "")

{//Comprobamos si ha cambiado de valor y es válidovar changed = PropertyChanged;if (changed == null)return;//Lanzamos el eventochanged(this, new

PropertyChangedEventArgs(propertyName));}

}}

Fragmento de Código 3.5: Ejemplo VistaModelo


3.4.4.4. Vista

Las vistas representan las pantallas de una aplicación, con todos los ele-mentos que la componen, definiendo su estructura y aspecto. En una im-plementación ideal, el código de la Vista solo contendrá un constructor quellamará al método InitializeComponent. Este método es el encargado de reali-zar la inicialización e instanciación de todos los objetos definidos en el ficheroXAML de la Vista. La Vista solo debe implementar en código aquellas ac-ciones que sean demasiado complejas para definirse en XAML, como porejemplo las animaciones.

La Vista recibe la información a mostrar del VistaModelo. Para poderrecibir las notificaciones de los cambios que se produzcan en los datos, la Vistadebe referenciar al VistaModelo correspondiente a través de la propiedadBindingContext.

namespace EjemplosMVVM.Views{

public partial class ItemPage : ContentPage{

public ItemViewModel ViewModel{

get { return BindingContext as ItemViewModel; }}

public ItemPage(){

InitializeComponent();BindingContext = new ItemViewModel();

}}

}

Fragmento de Código 3.6: Ejemplo Vista fichero C#

En el fragmento de código 3.6 vemos como el constructor de la vistainicializa los componentes de la Vista, presentes en el fichero XAML, y comoreferencia el BindingContext al VistaModelo. En Xamarin.Forms las vistasse definen en dos ficheros, uno en C# y otro XAML.


<?xml version="1.0" encoding="utf-8"?><ContentPage Title="Ejemplo Vista"

xmlns="http://xamarin.com/schemas/2014/forms"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:local="clr-namespace:EjemplosMVVM"x:Class="Views.ItemPage"><ListView x:Name="listView" ItemsSource="{Binding Items}">

<ListView.ItemTemplate><DataTemplate>



<TextCell Text="{Binding Name}"Detail="{Binding Id}"/>

</DataTemplate></ListView.ItemTemplate>

</ListView></ContentPage>

Fragmento de Código 3.7: Ejemplo Vista fichero XAML

En el fichero XAML del fragmento de código 3.7 podemos ver la estructurade la interfaz de ItemPage. Se ha incluido una Lista enlazada con la coleccióndel VistaModelo, produciendo un listado con los Items. A su vez, cada celdaha sido enlazada con las propiedades del objeto Item. Así hemos conectadola comunicación entre Vista y VistaModelo, y cada vez que la informacióncambie en la colección, cambiará la lista.

3.4.5. Inyección de dependencias y Servicios específicosde la plataforma

La inyección de dependencias es un servicio que ofrece Xamarin.Formspara poder definir comportamientos específicos en cada plataforma. El res-ponsable de encontrar la implementación adecuada para cada plataforma seráel DependencyService.

Para poder hacer uso del DependencyService se debe contar con los si-guientes elementos:

• Interfaz: define la funcionalidad que pretende hacer uso del Depen-dencyService. Debe estar presente en el código compartido.

• Implementación específica: la funcionalidad definida en la interfaz debeser implementada en cada uno de los proyectos de las plataformas. Si


una de las plataformas no implementara la interfaz provocaría un fallocuando se intentase ejecutar.

• Registro: cada implementación de la interfaz debe registrarse en el De-pendencyService para poder ser resuelta y servida en tiempo de ejecu-ción.

• Llamar a DependencyService: para poder ejecutar la funcionalidad es-pecífica debemos solicitar al DependencyService que resuelva la inter-faz. La solicitud se realiza explícitamente con la estructura Depen-dencyService.Get<Interfaz>().método().

Figura 3.8: Inyección de dependencias

3.4.6. Elementos UI Xamarin.Forms

En este apartado vamos a hacer un recorrido por los diferentes elementoscon que cuenta Xamarin.Forms para construir interfaces.

3.4.6.1. Pages

La clase Page es un elemento visual que ocupa toda la pantalla y quetiene una única vista hija. A continuación veremos los diferentes tipos declases Page y sus funcionalidades.


Figura 3.9: Tipos de Page

TemplatedPage es una clase Page que muestra el contenido a pantallacompleta. Es la base de la clase ContentPage.

Figura 3.10: Visualización TemplatedPage

ContentPage es una clase que hereda de TemplatedPage. Muestra unasola vista, normalmente un contenedor como un layout o un ScrollView.

Figura 3.11: Visualización ContentPage


MasterDetailPage es una clase Page con dos paneles. El primero ma-neja la información a alto nivel (por ejemplo una lista) y el segundo panelmuestra la información en detalle. Para que muestre la barra de navegaciónes necesario encapsularla en una NavigationPage.

Figura 3.12: Visualización MasterDetailPage

NavigationPage es una clase Page capaz de manejar la navegación através de la pila de Pages, encapsulándolas como su contenido y mostrandoel estado en su propia barra de navegación.

Figura 3.13: Visualización NavigationPage

TabbedPage es una clase que hereda de MultiPage. Esta clase permitenavegar mediante pestañas por sus hijos, los cuales también son clases Page.


Figura 3.14: Visualización TabbedPage

CarouselPage es una clase que hereda de MultiPage. Permite navegarpor sus hijos mediante gestos. Las Page hijas se desplazan horizontalmente,creando un efecto carrusel.

Figura 3.15: Visualización CarouselPage

3.4.6.2. Layouts

Los layouts son vistas contenedoras, que pueden contener layouts o vistas,permitiendo decidir la posición y tamaño de las vistas contenidas. A conti-nuación se ofrece una descripción de los mismos y ejemplos XAML para losmás complejos.


Figura 3.16: Tipos de Layout

TemplatedView es un layout que muestra el contenido con un ControlTemplate, el cual reemplazará los estilos existentes previamente. Es la clasepadre de ContentView.

ContentPresenter es un administrador de layouts para Templated-Views. Hereda directamente de la clase Layout. Se usa conjuntamente conControlTemplate para decidir donde se muestran los contenidos.

ContentView es un layout que hereda de TemplatedView y muestra unúnico contenido. No es de gran utilidad por si mismo, pero es un buen puntode partida para crear layouts personalizados.

ScrollView es un layout cuya principal capacidad es desplazarse horizon-tal o verticalmente tanto como sea necesario para mostrar todo el contenidoque encapsula.

<ContentPage.Content><ScrollView></ScrollView>

</ContentPage.Content>

Fragmento de Código 3.8: Ejemplo de ScrollView XAML


Frame es un layout que hereda de ContentView. Contiene un único hijoy provee de diferentes posibilidades de enmarcado.

</ContentPage.Content><Frame OutlineColor="Black">

<Label Text="Xamarin" /></Frame>


Fragmento de Código 3.9: Ejemplo de Frame XAML

AbsoluteLayout es un layout que permite posicionar a sus hijos de for-ma absoluta. Se puede realizar mediante coordinadas proporcionales, coordi-nadas de la pantalla del dispositivo o una combinación de ambas.

<ContentPage.Content><AbsoluteLayout>

<BoxView BackgroundColor="Red"AbsoluteLayout.LayoutBounds="20, 100, 40,30"></BoxView>

<Label Text="Xamarin" AbsoluteLayout.LayoutBounds="200,200, Autosize, Autosize"></Label>

</AbsoluteLayout></ContentPage.Content>

Fragmento de Código 3.10: Ejemplo de AbsoluteLayout XAML

Grid es un layout que permite organizar las vistas hijas en columnas yfilas, que pueden ser de diferentes anchuras y alturas.


<ContentPage.Content><Grid Padding="5" HeightRequest="50" VerticalOptions="Start">

<Grid.RowDefinitions><RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions><Grid.ColumnDefinitions>

<ColumnDefinition Width="30"></ColumnDefinition><ColumnDefinition Width="*"></ColumnDefinition>

</Grid.ColumnDefinitions><Grid.Children>

<Image Source="xamarin.png" Grid.Column="0"></Image><Label Text="Xamarin" Grid.Column="1"></Label>

</Grid.Children></Grid>


Fragmento de Código 3.11: Ejemplo de Grid XAML

StackLayout es un layout que apila las vistas de forma horizontal overtical. No es necesario indicar la posición de las vistas hijas, lo calcularáStackLayout, por lo que cualquier indicación de posición será sobrescrita.

<ContentPage.Content><StackLayout Orientation="Vertical">

<Label Text="Left"></Label><Label Text="Center"></Label><Label Text="Right"></Label>

</StackLayout></ContentPage.Content>

Fragmento de Código 3.12: Ejemplo de StackLayout XAML

RelativeLayout es un layout que permite posicionar y dar tamaño asus vistas hijas en relación a otros componentes. Por ejemplo, posicionarel borde superior de una vista a la misma altura que el borde superior delRelativeLayout o que la anchura de la vista sea la mitad de la anchura delRelativeLayout.


<ContentPage.Content><RelativeLayout>

<BoxViewRelativeLayout.XConstraint= "{ConstraintExpressionType=RelativeToParent, Property=Width, Factor=0.3}"

RelativeLayout.YConstraint="{ConstraintExpressionType=RelativeToParent, Property=Height, Factor=0.2}"

RelativeLayout.WidthConstraint="{ConstraintExpressionType=RelativeToParent, Property=Width, Factor=0.3}"

RelativeLayout.HeightConstraint="{ConstraintExpressionType=Constant, Property=Height, Constant=100}" />

</RelativeLayout></ContentPage.Content>

Fragmento de Código 3.13: Ejemplo de RelativeLayout XAML

3.4.6.3. Views

En Xamarin cualquier objeto visible se llama vista. Todos estos elementostienen en común que heredan de la clase View. A continuación se presentanlas vistas más comunes en ambos sistemas.

• ActivityIndicator: control visual para indicar que existe actividad,que algo esta en progreso.

Figura 3.17: Visualización ActivityIndicator

<ActivityIndicator Color="Red" IsRunning="true" />

Fragmento de Código 3.14: Ejemplo de ActivityIndicator

• BoxView: vista empleada para dibujar rectángulos.


<BoxView Color="Red" />

Fragmento de Código 3.15: Ejemplo de BoxView

• Button: una vista botón que reacciona ante los eventos táctiles.

Figura 3.18: Visualización Button

<Button Text="Click me!"/>

Fragmento de Código 3.16: Ejemplo de Button

• DatePicker: una vista que permite seleccionar fechas.

Figura 3.19: Visualización DatePicker


<DatePicker VerticalOptions="CenterAndExpand" Date="{x:Staticsys:DateTime.Now}">

<DatePicker.Format>yyyy-MM-dd</DatePicker.Format><DatePicker.MinimumDate>

<sys:DateTime x:FactoryMethod="Parse"><x:Arguments><x:String>Jan 1 2000</x:String>

</x:Arguments></sys:DateTime>

</DatePicker.MinimumDate><DatePicker.MaximumDate>

<sys:DateTime x:FactoryMethod="Parse"><x:Arguments><x:String>Dec 31 2050</x:String>

</x:Arguments></sys:DateTime>

</DatePicker.MaximumDate></DatePicker>

Fragmento de Código 3.17: Ejemplo de DatePicker

• Entry: vista de entrada de texto de una única línea.

Figura 3.20: Visualización Entry

<Entry Text="I am an Entry" />

Fragmento de Código 3.18: Ejemplo de Entry

• Editor: vista de entrada de texto con capacidad multilinea.

<Editor Text="I am an Editor" />

Fragmento de Código 3.19: Ejemplo de Editor

• Image: vista que muestra una imagen.


<Image Source="xamarin.jpg" />

Fragmento de Código 3.20: Ejemplo de Image

• Label: vista que muestra texto no editable.

<Label FontSize = "20" Text="Hello world!" />

Fragmento de Código 3.21: Ejemplo de Label

• ListView: vista que hereda de ItemView. Muestra una colección enformato lista vertical.

Figura 3.21: Visualización ListView

<ListView><ListView.ItemTemplate>

<DataTemplate><TextCell Text="Hello world!"/>


</ListView>

Fragmento de Código 3.22: Ejemplo de ListView


• Picker: vista que permite la selección de un elemento de una lista.

<Picker><Items><x:String>"A"</x:String><x:String>"B"</x:String>

</Items></Picker>

Fragmento de Código 3.23: Ejemplo de Picker

• ProgressBar: vista que permite saber el progreso de una tarea.

Figura 3.22: Visualización ProgressBar

<ProgressBar Progress="0.5"/>

Fragmento de Código 3.24: Ejemplo de ProgressBar

• SearchBar: vista que permite realizar búsquedas textuales.

Figura 3.23: Visualización SearchBar

<SearchBar Placeholder="Search" SearchCommand="{BindingSearchCommand}">

Fragmento de Código 3.25: Ejemplo de SearchBar

• Slider: vista que permite al usuario introducir un valor lineal.

Figura 3.24: Visualización Slider


<Slider ValueChanged="OnSliderValueChanged" />

Fragmento de Código 3.26: Ejemplo de Slider

• Stepper: vista que permite al usuario introducir un valor discreto,dentro de un rango.

Figura 3.25: Visualización Stepper

<Stepper ValueChanged="OnStepperValueChanged"/>

Fragmento de Código 3.27: Ejemplo de Stepper

• Switch: una vista que permite conmutar entre dos estados o valores.

Figura 3.26: Visualización Switch

<Switch IsToggled="True"/>

Fragmento de Código 3.28: Ejemplo de Switch

• TableView: una vista formada por filas de celdas.


Figura 3.27: Visualización TableView

<TableView><TableRoot>

<TableSection Title="Example"><TextCell Text="Hello world!"/>

</TableSection></TableRoot>

</TableView>

Fragmento de Código 3.29: Ejemplo de TableView

• TimePicker: una vista que permite seleccionar una hora.

<TimePicker Time="{x:Static sys:DateTime.Now}"/>

Fragmento de Código 3.30: Ejemplo de TimePicker

• WebView: una vista que presenta contenido HTML.

<WebView WidthRequest="1000" HeightRequest="1000" />

Fragmento de Código 3.31: Ejemplo de WebView


3.4.6.4. Cells

Una celda es un elemento especializado que hereda de Element. No esuna vista, sino que describe como crear una vista y sus vistas hijas. Todoslos elementos que veremos a continuación heredan de la clase Cell y se usanprincipalmente en ListViews y TableViews.

• EntryCell: es una celda que contiene un etiqueta y una caja paraintroducir texto.

<EntryCell Label="{Binding comment}" Text="{Binding name}" />

Fragmento de Código 3.32: Ejemplo de EntryCell

Figura 3.28: Visualización EntryCell

• SwitchCell: es una celda que contiene un etiqueta y una conmutador.

<SwitchCell Text="{Binding name}" On="{Binding isOn}" />

Fragmento de Código 3.33: Ejemplo de SwitchCell

Figura 3.29: Visualización SwitchCell

• TextCell: es una celda con dos textos. Típicamente como titulo ydescripción.

<TextCell Text="Xamarin" Detail="Cross Platform Apps"/>

Fragmento de Código 3.34: Ejemplo de TextCell


Figura 3.30: Visualización TextCell

• ImageCell: es una celda que hereda de TextCell. Además de los textos,incluye una imagen.

<ImageCell Text="Xamarin" Detail="Cross Platform Apps"ImageSource="xamarin.jpg"/>

Fragmento de Código 3.35: Ejemplo de ImageCell

Figura 3.31: Visualización ImageCell

Capítulo 4

Lecciones propuestas Xamarin

Este capítulo esta compuesto de una serie de prácticas incrementales parala iniciación al desarrollo en la plataforma Xamarin.

67

68 CAPÍTULO 4. LECCIONES PROPUESTAS XAMARIN

4.1. Practica 0: Instalación del entorno y apli-cación Hola Mundo

El objetivo de esta practica es que el alumno se introduzca en el entorno dedesarrollo de Xamarin, su instalación y configuración, así como el desarrollode una aplicación “Hola Mundo”.

El entorno de desarrollo es dependiente del sistema operativo con el quese trabaja. En Windows, se utilizará Visual Studio con su extensión de Xa-marin, mientras en Mac se utilizará Xamarin Studio. Ambos se encuentrandisponibles para su descarga en http://www.xamarin.com/Download.

En el caso de Windows, será necesario disponer de un máquina física ovirtual con Mac OS instalado que servirá para compilar y ejecutar el códi-go iOS. En ambos casos, Xcode debe estar actualizado a la última versióndisponible.

4.1.1. Instalación en Mac OS

Entramos en http://www.xamarin.com/Download, completamos el for-mulario y descargamos el instalador de Xamarin Studio Community. Unavez completada la instalación, podemos pasar crear un emulador Android.

Hacemos click en Herramientas→ Device Monitor. En el Device Monitorhacemos click en el icono Android Virtual Device Manager y veremos unapantalla como la la de la figura 4.1.

Figura 4.1: Android Virtual Device Manager vacío

http://www.xamarin.com/Download


4.1. PRACTICA 0: INSTALACIÓN DEL ENTORNO Y APLICACIÓN HOLA MUNDO69

Pulsamos el botón Create.. y aparecerá la siguiente pantalla donde com-pletando la información podremos crear nuestro emulador. También es posi-ble crear el emulador desde una imagen, las cuales se encuentran disponiblesen la pestaña Device Definitions.

Figura 4.2: Creación de un nuevo emulador Android

Una vez completada la creación, solo debemos seleccionar el emuladory pulsar el botón Start. Con esto ya tendríamos nuestro emulador Androidlisto para ejecutar las aplicaciones.

4.1.2. Instalación en Windows

4.1.2.1. Visual Studio

Entramos en http://www.xamarin.com/Download, completamos el for-mulario y descargamos el instalador de Visual Studio Community con Xa-



marin. Seguimos el proceso de instalación con especial atención a los paquetesa instalar, ya que en el caso de que instalemos Visual Studio desde cero de-bemos marcar la opción de Xamarin como en la figura.

Figura 4.3: Selección de opciones de instalación Visual Studio

4.1.2.2. Xamarin Mac Agent

Xamarin Mac Agent es el componente encargado de conectar, mediantessh, el entorno de Visual Studio con XCode para poder compilar y ejecutarlas aplicaciones iOS. Pulsando el icono de Mac Agent, se abre una nuevaventana que nos mostrará los ordenadores Mac existentes en la misma red ycon Remote Login activado.


Figura 4.4: Xamarin Mac Agent

Introducimos las credenciales del usuario habilitado en el ordenador Macy esperamos a que ambos entornos se enlacen. Una vez hecho esto, nuestroentorno esta listo para trabajar con aplicaciones iOS.

Figura 4.5: Xamarin Mac Agent enlazado

4.1.2.3. Visual Studio Emulator

Entramos en https://www.visualstudio.com/es/vs/msft-android-emulator/y descargamos e instalamos el emulador. Una vez instalado, encontraremosque ya tenemos unos cuantos perfiles de dispositivo preconfigurados.

Si quisiéramos crear nuevos dispositivos, lo haríamos accediendo a He-rramientas → Visual Studio Emulator for Android. Aquí encontraremos unamplio listado de dispositivos para descargar, filtrados por versión de An-droid.

https://www.visualstudio.com/es/vs/msft-android-emulator/


Figura 4.6: Listado de Dispositivos Virtuales Android en Visual Studio

4.1.3. Creación de la solución

Una vez completados los procesos de instalación y configuración del en-torno de desarrollo, estamos listos para abordar la creación de una sencillaaplicación Hola Mundo. Para ello, vamos a Archivo→ Nueva Solución (Pro-yecto en Visual Studio) y seleccionamos la plantilla de aplicación Multipla-taforma Xamarin.Forms. Seleccionamos ambas plataformas (Android, iOS) ,la opción para el código compartido Shared Library y completamos la confi-guración de la solución como en la figura 4.7.

Observemos ahora la estructura de la solución en la figura 4.8. Xamarin hacreado tres proyectos: HolaMundo, HolaMundo.Droid y HolaMundo.iOS. Sonrespectivamente el proyecto compartido, el proyecto Android y el proyectoiOS. En esta práctica nos centraremos en el proyecto compartido.


Figura 4.7: Creación de la solución Práctica 0

Figura 4.8: Jerarquía de la solución Práctica 0

4.1.4. Proyecto compartido

En el interior del proyecto compartido encontramos dos archivos: App yHolaMundoPage. Ambos son archivos XAML, que es un lenguaje de mar-cado declarativo utilizado para crear interfaces de usuario. Si abrimos losficheros XAML encontraremos la definición en XML de la interfaz, mientrasel comportamiento se encuentra en el fichero CS, inmediatamente debajo enla jerarquía del proyecto.


Figura 4.9: Detalle archivos XAML y CS

Por último, abrimos el fichero HolaMundoPage.xaml y localizamos la eti-queta Label. Cambiamos el atributo Text predefinido por “Hola Mundo!” yya estamos listos para probar nuestra aplicación.

4.1.5. Ejecución de la aplicación

Vamos a comenzar a probar nuestra aplicación. En la barra superior se-leccionamos el proyecto HolaMundo.iOS y un emulador donde ejecutarlo,en nuestro caso iPhone 7 iOS 10.3. En Android seleccionaremos HolaMun-do.Droid y el emulador que hayamos creado, en nuestro caso un Nexus 4.Pulsamos el botón play y tras cargar el emulador los resultados deberían sercomo los de la siguiente figura.

4.2. PRACTICA 1: INTERFACES BÁSICAS Y ARQUITECTURA MVVM75

(a) Ejecución Práctica 0 iOS (b) Ejecución Práctica 0 Android

Figura 4.10: Ejecución Práctica 0

4.2. Practica 1: interfaces básicas y arquitectu-ra MVVM

El objetivo de esta práctica es desarrollar una interfaz de usuario conalgunos de los elementos más comunes de las aplicaciones móviles, como sonbotones, etiquetas o listas mediante Xamarin y su paquete Xamarin.Forms.

La aplicación debe implementar una lista con las estaciones de calidaddel aire de Madrid. Para rellenar la lista se recomienda usar un tipo de celdapredefinido por Xamarin, TextCell. Existe la posibilidad de realizar celdaspersonalizadas con las vistas que se desee, pero para mejor comprensión delfuncionamiento se recomienda intentarlo más adelante.


4.2.1. MVVM

La arquitectura usada por Xamarin es MVVM (Modelo-Vista-VistaModelo).Esta arquitectura separa el modelo (la información) y la interfaz (Vista) através de una clase intermediaria (VistaModelo).

Figura 4.11: Patrón MVVM

El elemento principal a través del cual articularemos esta práctica esListView, el cual es una lista de elementos (vistas) con capacidad de despla-zamiento vertical e interacción. Cuando compilemos la aplicación, Xamarintransformará nuestra ListView en el elemento nativo correspondiente, List-View para Android y UITableView para iOS. La vista será la encargada dedefinir el formato de los elementos de la lista, así como de indicar los Bindingscon el modelo, que le suministrará el VistaModelo.

Para el ejemplo, utilizaremos las estaciones de control de calidad del airede la ciudad de Madrid como fuente de información para alimentar el modelode datos.

4.2.2. Modelo

El modelo de nuestra arquitectura MVVM, sería en este caso una estaciónde medición. Cada estación contendrá:

• Nombre: cadena de caracteres que representa el nombre de la estaciónde medición.

• Id: cadena de caracteres que representa el identificador de la estación.

Un ejemplo de implementación del modelo:


namespace Practica1.Models{

public class Station{

public string Id { get; set; }public string Name { get; set; }

}}

Fragmento de Código 4.1: Modelo Station

4.2.3. VistaModelo

Se explicará como implementar un VistaModelo, que permita conectar lavista con el modelo. El modelo ha de ignorar la existencia del VistaModelo,y a su vez el VistaModelo debe ignorar la existencia de la Vista. Es en laVista donde creamos el VistaModelo que suministrará el Modelo a la Vista.

Para ello en nuestro VistaModelo crearemos las colecciones necesarias pa-ra albergar el Modelo, así como los controladores de eventos encargados denotificar a la Vista los cambios que se produzcan en el Modelo. Por último,crearemos un método llamado getStations, el cual será llamado por el cons-tructor para obtener la información del Modelo y así suministrarla a la Vista.Propiedades y métodos del VistaModelo:

• ObservableCollection<Station>Stations : colección contenedora del mo-delo. Este tipo de colección permite la notificación automática a la vistade cualquier cambio, inserción o extracción de la misma.

• PropertyChangedEventHandler PropertyChanged : evento lanzado cuan-do se produce un cambio en la colección Stations.

• OnPropertyChanged : método encargado de comprobar si se han rea-lizado cambios en la propiedad, y si se han producido lanzar el evento.

• getStations: método encargado de alimentar de información la colecciónde estaciones.

• StationsViewModel : constructor del VistaModelo, encargado de llamaral método getStations.


namespace Practica1.ViewModels{

public class StationsViewModel : INotifyPropertyChanged{

public event PropertyChangedEventHandlerPropertyChanged;

private ObservableCollection<Station> stations = newObservableCollection<Station>();

public ObservableCollection<Station> Stations{

get { return stations; }set { stations = value; OnPropertyChanged(); }

}

public StationsViewModel(){

getStations();}

public void OnPropertyChanged([CallerMemberName] stringpropertyName = "")

{var changed = PropertyChanged;if (changed == null)

return;changed(this, new

PropertyChangedEventArgs(propertyName));}

public void getStations() {

string[] names = { "Plaza de España", "EscuelasAguirre", "Avda. Ramón y Cajal" };

string[] ids = { "28079004", "28079008","28079011" };

for (int i = 0; i < 3; i++){

Stations.Add(new Station() { Id = ids[i],Name = names[i] });

}}}}

Fragmento de Código 4.2: VistaModelo StationsViewModel


4.2.4. Vista

Se mostrará como se definen los elementos de los que se compone unalista, y como se conectan con la información. Para rellenar la lista se usarála celda predefinida TextCell, compuesta de dos campos: Text y Detail. Unaposible definición de la vista sería la siguiente:

<ListView x:Name="listView" ItemsSource="{Binding Stations}"><ListView.ItemTemplate>

<DataTemplate><TextCell Text="{Binding Name}" Detail="{BindingId}" TextColor="Black" DetailColor="Gray"/>


</ListView>

Fragmento de Código 4.3: Vista XAML

Con esto, estaría definida la interfaz de nuestra vista a falta de indicardonde iría la información del modelo. Este proceso lo realizaremos medianteBindings. El VistaModelo tiene acceso la información del modelo de datos, asícomo a los Bindings descritos en la vista. Los Bindings indican al VistaModeloque información del modelo de datos mostrar y donde mostrarla, o que acciónrealizar ante un evento.

Figura 4.12: Binding flow

En el siguiente ejemplo se muestra el anterior TextCell, con los respectivosbindings para mostrar el nombre y el id de la estación.

<TextCell Text="{Binding Name}" Detail="{Binding Id}"TextColor="Black" DetailColor="Gray"/>

Fragmento de Código 4.4: TextCell bindings

Para que los Bindings sean efectivos, debemos enlazar nuestra vista asu correspondiente VistaModelo, en el constructor de la vista. Un posibleejemplo:


using Xamarin.Forms;using Practica1.ViewModels;

namespace Practica1{

public partial class Practica1Page : ContentPage{

public Practica1Page(){

InitializeComponent();BindingContext = new StationsViewModel();

}

public StationsViewModel ViewModel{

get { return BindingContext asStationsViewModel; }

}}

}

Fragmento de Código 4.5: Vista C#


Una vez creados, Modelo, VistaModelo y Vista, podemos ejecutar la apli-cación donde deberíamos ver algo parecido a las siguientes figuras.

4.3. PRÁCTICA 2: INTERFACES AVANZADAS 81

(a) Ejecución Práctica 1 iOS (b) Ejecución Práctica 1 Android

Figura 4.13: Ejecución Práctica 1

4.3. Práctica 2: interfaces avanzadas

El objetivo de esta tercera práctica es estudiar vistas más complejas, quenos permitirán dotar a la aplicación de una estructura de navegación y crearinterfaces de usuario más ricas. Para ello usaremos NavigationPage, que nospermitirá desarrollar una arquitectura completa de aplicación.

4.3.1. Navegación

Como ya hemos mencionado anteriormente, el elemento fundamental so-bre el que construimos nuestras interfaces es el elemento Page. Ahora veremoscomo Xamarin navega a través de varios elementos page con dos operacionesbásicas: Push y Pop.

Push nos permite añadir una nueva Page a la navegación. Cuando reali-


zamos un acción Push con una nueva página, estamos añadiendo un nuevoelemento en la parte superior de la pila de navegación. El elemento previa-mente existente se situará inmediatamente debajo del nuevo elemento, quepasará a ser la pagina activa, como se aprecia en la figura.

Figura 4.14: Pila de navegación: Push

Pop nos permite eliminar la página activa de la parte superior de la pilade navegación. Con esta acción, provocamos que la página situada inmedia-tamente debajo pase a ser la nueva página activa. Típicamente esta es laacción que se ejecuta cuando vamos hacía atrás en la navegación.

Figura 4.15: Pila de navegación: Pop

4.3.2. NavigationPage

La clase NavigationPage, hija de la clase Page, es una pagina contene-dora. Nos permite movernos a través de la pila de navegación, que estarácompuesta de uno o varios objetos de tipo Page. Es una clase dependientede la plataforma, por lo que producirá diferentes resultados visuales, aunquecon un comportamiento idéntico desde el punto de vista de la navegación.

Para añadir la clase NavigationPage a nuestro proyecto, vamos al ficheroApp.xaml.cs y sustituiremos el constructor de la Page existente como en elsiguiente código.


public App(){

InitializeComponent();MainPage = new NavigationPage(new Practica2Page());

}

Fragmento de Código 4.6: Inclusión de NavigationPage

De esta forma, hemos incluido la navegación en nuestra aplicación y he-mos añadido nuestro primer elemento a la pila de navegación, la páginaPractica2Page.

4.3.3. Propiedad Navigation

La clase Page tiene una propiedad llamada Navigation, encargada de lagestión de la pila de navegación. Al ser propiedad de la clase Page, todas lasclases hijas la heredan, estando así disponible en cualquier tipo de página.Navigation implementa la interfaz INavigation, algunos de sus métodos másutilizados:

PopAsync() Elimina asíncronamente la página activa de lapila de navegación.

PushAsync(Page) Añade asíncronamente la página suministradaa la pila de navegación, pasando esta a ser lapágina activa.

PopToRootAsync() Elimina todas las páginas de la pila de navega-ción, excepto la página raíz.

Tabla 4.1: Métodos de la interfaz INavegation

4.3.4. Inclusión de una nueva página

Para comprender mejor el uso de la propiedad Navigation, vamos a in-cluir una nueva página en nuestra aplicación. Esta nueva página mostrará unlistado con las medidas de las estaciones de la ciudad de Madrid. Para ellodebemos crear un nuevo modelo, Measure, con la siguiente estructura:

• Name: cadena de caracteres que representa el nombre de la medida.


• Value: cadena de caracteres con el valor medido.

Un ejemplo de implementación del modelo:

namespace Practica2Page.Models{

public class Measure{

public string Name { get; set; }public string Value { get; set; }

}}

Fragmento de Código 4.7: Modelo Measure

Así mismo, deberemos incluir en el modelo Stations las medidas comouna colección de tipo List y completar el método getStations para alimentarlas estaciones con medidas. Por último, crearemos la nueva página Measures-Page. Para ello vamos al menú Archivo −→ Nuevo Archivo... y seleccionamosla plantilla Forms −→ Forms ContentPage XAML.

Figura 4.16: Creación de una nueva ContentPage


Incluimos una ListView con un TextCell como el de nuestra vista raíz,incluyendo los bindings del modelo.

<?xml version="1.0" encoding="UTF-8"?><ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="Practica2.MeasuresPage">

<ListView x:Name="listViewDetail"><ListView.ItemTemplate>

<DataTemplate><TextCell Text="{Binding Value}"

Detail="{Binding Name}"TextColor="Black" DetailColor="Gray"/>


</ListView></ContentPage>

Fragmento de Código 4.8: MeasuresPage.xaml

Modificamos el constructor para recibir las medidas y pasárselas a la vista.Obsérvese que en este caso estamos pasando directamente la información delmodelo a la vista. Puesto que la información nos la suministra el VistaModelo,sería redundante crear un nuevo VistaModelo para pasar una información dela que ya disponemos.

public partial class MeasuresPage : ContentPage{

public MeasuresPage(List<Measure> measures){

InitializeComponent();listViewDetail.ItemsSource = measures;

}}

Fragmento de Código 4.9: MeasuresPage.cs

Una vez creada la nueva página, ya tenemos todos los elementos necesariospara incluirla en la pila de navegación. Navegaremos a ella pulsando una delas estaciones de la lista de nuestra vista raíz.

Para ello crearemos el método OnSelection , encargado de recoger el even-to, con dos parámetros:


• Object sender: objeto desde el que se dispara el evento, en nuestro casola ListView.

• ItemTappedEventArgs event: objeto con la información del evento dis-parado.

void OnSelection(object sender, ItemTappedEventArgs e){

//ItemSelected es llamado en la selección y deselección//Cuando es deselección el Item es nullif (e.Item == null){

return;}

//Creamos la nueva página, pasándole las medidas en elconstructor

ContentPage page = newMeasuresPage(((Station)e.Item).measures);

page.Title = ((Station)e.Item).Name;

//Incluimos la nueva página en la pila de navegación,//pasando a ser la página activaNavigation.PushAsync(page);

}

Fragmento de Código 4.10: Método OnSelection

Finalmente lo enlazaremos mediante Bindings en el archivo XAML denuestra página raíz, para que la vista sepa que método recogerá el evento.

<ListView x:Name="listView" ItemTapped="OnSelection"ItemsSource="{Binding Stations}">

Fragmento de Código 4.11: Binding del método OnSelection


Ejecutando la aplicación en cada uno de los sistemas, los resultados de-berían ser similares a las siguientes figuras.


(a) Vista raíz (b) Vista detalle

Figura 4.17: Práctica 2 Android


Figura 4.18: Práctica 2 iOS


4.4. Práctica 3: Código compartido

El objetivo de la práctica 3 es comprender el funcionamiento de dos delos mecanismos que nos permiten compartir código a través de los diferentesproyectos (iOS, Android) de nuestra aplicación: “Shared Asset Projects” y“Portable Class Library”.

4.4.1. Shared Project

Hasta ahora no lo habíamos mencionado, pero el propio proyecto Practi-caX es un Shared Asset Project que comparte el código con los otros dos pro-yectos PracticaX.Droid y PracticaX.iOS. La arquitectura de funcionamientoes la siguiente:

Figura 4.19: Shared Project

4.4.2. PCL: Portable Class Library

Este mecanismo es válido siempre y cuando no necesitemos importar nues-tro código en un nuevo proyecto. En ese caso, se debe crear una Portable ClassLibrary que nos permita importar el código en los nuevos proyectos. Se debeanotar, que una Portable Class Library es dependiente de las plataformas alas que esta orientada. La arquitectura de funcionamiento es la siguiente:

4.4. PRÁCTICA 3: CÓDIGO COMPARTIDO 89

Figura 4.20: Portable Class Library


4.4.3. Implementación PCL

Fragmento de Código 4.12: Json Stations

Para profundizar en estos conceptos vamos a crear una librería que accedea un servicio HTTP. Este servicio devolverá un JSON con las estacionesde calidad del aire, así como sus medidas. Para ello nos serviremos de losservicios que nos ofrece .NET, y de una librería para parsear nuestro JSON.


Para crear la PCL debemos añadir un nuevo proyecto a la solución, detipo Biblioteca −→ Biblioteca Portable. Una vez creada la PLC, debemosañadir la librería JSON al proyecto. En Xamarin las librerías o paquetesse gestionan mediante NuGet, el manager de paquetes más extendido para.NET. En esta caso el paquete a instalar se llama Newtonsoft.Json . Paraabrir NuGet vamos a Proyecto −→ Agregar Paquetes NuGet y buscamos einstalamos el paquete.

Figura 4.21: Instalación paquete Nuget

Ahora debemos incluir los archivos de nuestra PCL, es decir, los Modelosy el VistaModelo donde vamos a implementar la llamada HTTP, como sepuede observar en la siguiente figura.


Figura 4.22: Estructura del proyecto PCL

public async void getStations(){//Llamada asincrona HTTP GET al servicio que devuelve una cadena Jsonstring result = await new HttpClient().GetStringAsync(Url);

//Deserializacion de la cadena Jsonvar collection =

JsonConvert.DeserializeObject<List<Station>>(result);

foreach (var station in collection){

Stations.Add(station);}

}

Fragmento de Código 4.13: Método getStations ViewModel

Para completar nuestra librería, solo nos falta conectarnos al serviciopara descargar y parsear el JSON con las estaciones y sus medidas. Abrimosel ViewModel y vamos al método getStations. Primero debemos realizar lapetición HTTP GET mediante HttpClient y el resultado lo parsearemos conel paquete NuGet Newtonsoft.Json, que hemos incluido anteriormente. Elresultado se encuentra en el fragmento de código 4.13


Ejecutando la aplicación en cada uno de los sistemas, los resultados de-berían ser similares a las siguientes figuras.







4.5. Práctica 4: Código dependiente de la pla-taforma

El objetivo de esta práctica es entender como podemos utilizar funcionesespecíficas de cada plataforma mediante la inyección de dependencias. Ennuestro caso utilizaremos el GPS, ya que su implementación es dependientede la plataforma.

En esta práctica, incluiremos un mapa donde colocar la posición del usua-rio así como todas las estaciones de medición de calidad del aire.

4.5.1. Inyección de dependencias

La inyección de dependencias es el método mediante el cual podemosacceder al código nativo de todas las plataformas a través de una interfazcomún en nuestra PCL.

Como puede observarse en la figura 4.25, disponemos de un código espe-cifico por plataforma. Sin embargo, la PCL solo conoce la interfaz común eignora el código dependiente que se ha inyectado en el contenedor.

Figura 4.25: Esquema de inyección de dependencias

4.5.1.1. Interfaz

Comenzaremos por definir la interfaz que nos permitirá acceder indepen-dientemente de la plataforma a las funciones específicas. Para ello definimos

4.5. PRÁCTICA 4: CÓDIGO DEPENDIENTE DE LA PLATAFORMA95

un único método llamado getLocation, sin parámetros de entrada, el cualdebe devolverá la posición GPS del dispositivo.

Como el objeto contenedor de la posición GPS también es dependientede la plataforma, crearemos una clase que nos permita trabajar con indepen-dencia. La clase se llamará Location y contendrá dos propiedades Longitudey Latitude, ambos double.

namespace PracticaPCL{

public class Location{

public double Latitude { get; set; }public double Longitude { get; set; }

public Location(){}

public Location(double latitude, double longitude){

this.Latitude = latitude;this.Longitude = longitude;

}}

}

Fragmento de Código 4.14: Clase Location

namespace PracticaPCL{

public interface IGps{

PracticaPCL.Location getLocation();}

}

Fragmento de Código 4.15: Interfaz iGPS

4.5.1.2. Implementación Android

Empezaremos por implementar nuestra interfaz iGPS en el proyecto Droid.Para ello crearemos la clase GPS, la cual implementará la interfaz y se encar-gará de gestionar el objeto LocationManager de Android. Además, crearemos


otra clase GpsLocationListener, que implementará la interfaz ILocationLis-tener.

La implementación de la interfaz ILocationListener será exactamenteigual que en cualquier código Android, con la salvedad del objeto ActionfinishedCallback que notificará a la clase GPS que hemos encontrado la lo-calización.

public void OnLocationChanged(Location location){

if (location.Accuracy <= desiredAccuracy){

Finish(location);return;

}

lock (locationSync){

bestLocation = location;}

}

private void Finish(Location location){

finishedCallback?.Invoke();loc = new PracticaPCL.Location(location.Latitude,

location.Longitude);}

Fragmento de Código 4.16: Implementación ILocationListener


public PracticaPCL.Location getLocation(){var providers = Providers;

GpsLocationListener singleListener = null;

singleListener = new GpsLocationListener(Manager,(float)UPDATE_DISTANCE,(int)UPDATE_TIME,providers.Where(Manager.IsProviderEnabled),finishedCallback: () =>{for(int i = 0; i < providers.Length; ++i){Manager.RemoveUpdates(singleListener);

}});

try{for (int i = 0; i < providers.Length; ++i){Manager.RequestLocationUpdates(providers[i],0, 0, singleListener);

}}catch (Java.Lang.SecurityException ex){ex.PrintStackTrace();

}

return singleListener.loc;}

Fragmento de Código 4.17: Implementación IGPS Android

4.5.1.3. Implementación iOS

Al igual que en el caso Android, crearemos la clase GPS, que implemen-tará la interfaz iGPS y obtendrá la posición del objeto CLLocationManager.A continuación se muestra un posible ejemplo de implementación del métodogetLocation.


Location IGps.getLocation(){

CLLocationManager locationManager = new CLLocationManager();Location location = new Location();location.Latitude =

locationManager.Location.Coordinate.Latitude;location.Longitude =

locationManager.Location.Coordinate.Longitude;

return location;}

Fragmento de Código 4.18: Implementación IGPS iOS

4.5.1.4. Registro y resolución del Contenedor de inyección de de-pendencias

Ya hemos creado la interfaz y sus implementaciones en cada una de lasplataformas. Ahora, necesitamos registrar la inyección de dependencias. AsíXamarin sabrá como resolverlas e inyectarlas en el contenedor. Para ello, de-bemos incluir la siguiente línea encima de cada implementación de la interfaziGPS.

[assembly: Xamarin.Forms.Dependency(typeof(Gps))]

Fragmento de Código 4.19: Registro de inyección de dependencias

Una vez registrada la dependencia, para poder llamar al método de la in-terfaz debemos comunicar a Xamarin que hay una dependencia que resolver.La conseguiremos mediante una llamada al DependencyService, indicándolela interfaz de la cual queremos que nos de la implementación.


public void getLocation(){

Location = DependencyService.Get<IGps>().getLocation();}

public StationsViewModel(){

getStations();getLocation();

}

Fragmento de Código 4.20: Resolución de dependencias en StationsViewMo-del

4.5.2. Inclusión del mapa

Para poder incluir el mapa en nuestra aplicación, primero debemos reali-zar una serie de acciones:

• Incluir el paquete NuGet Xamarin.Forms.Map en los proyectos.

• Registrar la aplicación en developers.google.com e incluir la API Keyobtenida en el fichero AndroidManifest.xml.

• Añadir los permisos Android necesarios en las opciones del proyectoDroid.

• Añadir las claves NSLocation necesarias en el archivo info.plist del pro-yecto iOS.

• Incluir Xamarin.FormsMaps.Init() en el método FinishedLaunching delAppDelegate del proyecto iOS, después de la inicialización de Xama-rin.Forms.

Ahora en nuestra vista raíz, vamos a incluir un AbsoluteLayout, paracolocar el mapa, así como el listado de estaciones. Una posible estructura dellayout sería la siguiente:

developers.google.com


<AbsoluteLayout HorizontalOptions="FillAndExpand"VerticalOptions="FillAndExpand">

<maps:Map WidthRequest="960" HeightRequest="100"x:Name="MyMap"IsShowingUser="true"

IsVisible="false"MapType="Street"

AbsoluteLayout.LayoutFlags="All"AbsoluteLayout.LayoutBounds="0,0,1,1"/>

<ListView x:Name="listView" ItemTapped="OnSelection"ItemsSource="{Binding Stations}"

AbsoluteLayout.LayoutFlags="All"AbsoluteLayout.LayoutBounds="0,0,1,1"><ListView.ItemTemplate>

<DataTemplate><TextCell Text="{Binding Name}"

Detail="{Binding Id}"TextColor="Black" DetailColor="Gray"/>


</ListView></AbsoluteLayout>

Fragmento de Código 4.21: Ejemplo de layout con Map

public Practica4Page(){

InitializeComponent();BindingContext = new StationsViewModel();var mapButton = new ToolbarItem{

Text = "Map",Command = new Command(this.toggleView)

};

this.ToolbarItems.Add(mapButton);MyMap.MoveToRegion(

MapSpan.FromCenterAndRadius(new Position(40.4165000, -3.7025600),

Distance.FromMiles(3)));}

Fragmento de Código 4.22: Ejemplo de Map en C#


Cada vista ocupará toda la pantalla y cambiaremos entre ellas con unToolbarItem que incluiremos en el constructor de nuestra vista raíz.

Por último, el método toggleView, donde invertiremos la visibilidad delas vistas y incluiremos las estaciones en el mapa, en caso de que no hayansido incluidas todavía.

private void toogleView(){listView.IsVisible = !listView.IsVisible;MyMap.IsVisible = !MyMap.IsVisible;

if (MyMap.Pins.Count == 0) {

foreach (Station station in ViewModel.Stations){

var position =new Position(station.Latitude, station.Longitude);

var pin = new Pin{Type = PinType.Place,Position = position,Label = station.Name,

};

pin.Clicked += (sender, args) =>{ContentPage page = new MeasuresPage(station.measures);page.Title = station.Name;Navigation.PushAsync(page);

};

MyMap.Pins.Add(pin);}

}}

Fragmento de Código 4.23: Método toggleView


Finalmente, el resultado de ejecutar la aplicación debería ser algo similara las siguientes figuras.






Capítulo 5

Conclusiones y trabajos futuros

5.1. ConclusionesEl objetivo principal de este proyecto fin de carrera era la creación de una

serie de lecciones prácticas incrementales para el aprendizaje del desarrollo deaplicaciones móviles en el entorno multiplataforma Xamarin.Forms, haciendoespecial énfasis en los aspectos fundamentales del desarrollo de aplicacionesmóviles nativas.

En el capítulo Marco Tecnológico hemos visto que los dispositivos mó-viles, y por ende las aplicaciones móviles, son una realidad presente en lavida cotidiana de nuestra sociedad. Además también hemos podido obser-var que los entornos multiplataforma han alcanzado grandes prestaciones yfacilidades para los desarrolladores.

Las lecciones prácticas han cubierto los aspectos básicos de una aplicacióncomercial, siendo el resultado de la última lección una aplicación perfecta-mente válida para su distribución a través de Google Play y de la AppStore.A lo largo de todas ellas se ha podido comprobar que a pesar de la sencillezy agilidad del desarrollo con Xamarin.Forms, las aplicaciones resultantes sonidénticas a las que podríamos haber obtenido en los entornos propios de cadaplataforma.

103

104 CAPÍTULO 5. CONCLUSIONES Y TRABAJOS FUTUROS

5.2. Trabajos futurosLas lecciones propuestas abarcan la práctica totalidad de las funcionalida-

des y herramientas de Xamarin.Forms. Sin embargo Xamarin, como Androide iOS, es un entorno cambiante y que requiere de actualizaciones y revisionesconstantes.

Por ello las siguientes propuestas pueden considerarse como lecciones ex-tra y/o continuaciones del presente Proyecto Fin de Carrera:

• Xamarin: la plataforma Xamarin es muy extensa. Se propone realizarun trabajo similar al presente PFC solo usando el SDK Xamarin.

• Titanium vs Xamarin: realizar un estudio comparativo del desarrolloen ambas plataformas.

• Xamarin vs Nativo: realizar un estudio de las diferencias de rendi-miento entre las plataformas nativas y Xamarin.

• Creación de paquetes NuGet: hemos visto como crear una PCL, elsiguiente paso sería una lección para crear un paquete NuGet, permi-tiendo así su distribución a través de Xamarin Studio.

Bibliografía

[1] Adobe.com. Adobe Announces Agreement to Acquire Nitobi, Crea-tor of PhoneGap. http://news.adobe.com/press-release/adobe-creative-cloud-dps/adobe-announces-agreement-acquire-nitobi-creator-phonegap.

[2] John Anderson. Appcelerator Titanium: Up and Running. O’Reilly,2013.

[3] Can Bilgin. Mastering Cross-Platform Development with Xamarin.PACKT Publishing, 2016.

[4] https://appcelerator.com. Appcelerator Blog. https://appcelerator.com/blog/, recuperado en Mayo de 2017.

[5] https://cordova.apache.org. Apache Cordova Architecture. https://cordova.apache.org/docs/en/latest/guide/overview/index.html,recuperado en Mayo de 2017.

[6] https://cordova.apache.org/. Apache Cordova License. https://cordova.apache.org, recuperado en Mayo de 2017.

[7] Xamarin Inc. Xamarin API. https://developer.xamarin.com/api/,recuperado en Abril de 2017.

[8] Xamarin Inc. Xamarin.Forms Guides. https://developer.xamarin.com/guides/xamarin-forms/, recuperado en Abril de 2017.

[9] A. Sillitti L. Corral and G. Succi. Mobile Multiplatform Development:An Experiment for Performance Analysis. The 9th International Con-ference on Mobile Web Information Systems, 10:736?743, 2012.

[10] Lex Li. A History of .NET/Mono/Xamarin. http://corefx.strikingly.com/, recuperado en Junio de 2017.

105

http://news.adobe.com/press-release/adobe-creative-cloud-dps/adobe-announces-agreement-acquire-nitobi-creator-phonegap



https://appcelerator.com/blog/

https://appcelerator.com/blog/

https://cordova.apache.org/docs/en/latest/guide/overview/index.html

https://cordova.apache.org/docs/en/latest/guide/overview/index.html

https://cordova.apache.org

https://cordova.apache.org

https://developer.xamarin.com/api/

https://developer.xamarin.com/guides/xamarin-forms/

https://developer.xamarin.com/guides/xamarin-forms/

http://corefx.strikingly.com/

http://corefx.strikingly.com/

106 BIBLIOGRAFÍA

[11] MSDN. The MVVM Pattern. https://msdn.microsoft.com/en-us/library/hh848246.aspx, recuperado en Junio de 2017.

[12] NASA. Rocket Evolution. https://www.nasa.gov/audience/foreducators/diypodcast/rocket-evolution-index-diy.html.

[13] Adam Pedley. Xamarin Forms Architectural Guidance. https://xamarinhelp.com/xamarin-forms-architectural-guidance/, recupe-rado en Junio de 2017.

[14] Charles Petzold. Creating Mobile Apps with Xamarin.Forms. MicrosoftPress, 2015.

[15] Ed Snider. Mastering Xamarin.Forms. PACKT Publishing, 2016.

[16] VV.AA. La Sociedad de la Información en España 2016. FundaciónTelefónica, 2016.

[17] Roy Want. When Cell Phones Become Computers. IEEE PervasiveComputing, 8(2):2–5, 2009.

[18] Wikipedia. Model?view?viewmodel. https://en.wikipedia.org/wiki/Model?view?viewmodel, recuperado en Abril de 2017.

[19] Michael Williams. Xamarin Blueprints. PACKT Publishing, 2016.

[20] Xamarin. The Xamarin Story. https://www.xamarin.com/about, recu-perado en Junio de 2017.

https://msdn.microsoft.com/en-us/library/hh848246.aspx

https://msdn.microsoft.com/en-us/library/hh848246.aspx

https://www.nasa.gov/audience/foreducators/diypodcast/rocket-evolution-index-diy.html

https://www.nasa.gov/audience/foreducators/diypodcast/rocket-evolution-index-diy.html

https://xamarinhelp.com/xamarin-forms-architectural-guidance/

https://xamarinhelp.com/xamarin-forms-architectural-guidance/

https://en.wikipedia.org/wiki/Model?view?viewmodel

https://en.wikipedia.org/wiki/Model?view?viewmodel

https://www.xamarin.com/about

Documents

oa.upm.esoa.upm.es/49303/1/PFC_ALBERTO_ESTEBAN_BLANCO.pdf · 2018-01-25 · Resumen En la última década, la tecnología incorporada a los teléfonos móviles ha provocado una disrupción