Desarrollo de aplicaciones

mviles multiplataforma con

C# - Xamarin VS
2: Tcnicas bsicas de programacin
E.J. Hernndez Valdelamar
Marzo, 2016

Sesin 2 - Objetivo

Exponer las tcnicas bsicas de programacin

usando Xamarin Forms, mediante ejemplos
sencillos.
Integrar una gua con los principales elementos
de UI para su uso posterior.

Contenido

Qu se necesita para empezar?

Tcnicas bsicas de programacin

Interfaz de usuario

Estrategias para desarrollos multiplataforma

Desarrollo de una aplicacin mvil

Caso de estudio

Comentarios

Qu se necesita para empezar?

Contestar a esta sencilla pregunta puede tener muchas

implicaciones, dadas las capacidades de la plataforma.
Pero para el desarrollador, hay cuestiones bsicas que debe
conocer:

Cmo crear y controlar la interfaz de usuario

Cmo agregar funcionalidad

Cmo desplegar datos

Estas preguntas sern expuestas en forma de tcnicas de

programacin.

Caso de estudio

Se plantea el desarrollo de una app que

contenga:

Una forma de presentacin

Una forma "men"

Una forma con info "Acerca de" la app

Una forma capaz de mostrar una pgina web

Una forma capaz de consumir y desplegar entradas

de un blog

El objetivo es experimentar con los elementos

visuales y de comportamiento de la plataforma.

Mapa de navegacin

About
(xaml)

About Tab
(code)

Menu
(xaml)
Welcome
(code)

Web page
(code)

Blog
La idea es usar diferentes tcnicas para
crear cada una de las pantallas
propuestas.

(code)

Crear y controlar la UI

Para crear y controlar la interfaz de usuario, se

presentan las siguientes tcnicas:

Aadir pginas y elementos visuales (layouts y

controles)

Definir la UI en cdigo o
mediante XAML (+ cdigo)

Navegacin entre pginas

Adicionalmente, se agrega:

una gua de elemento UI.

Tcnica 1: aadir pginas y

elementos visuales

Para aadir una nueva pgina (forma) a la

aplicacin, puede aadirse un nuevo elemento:

Forms Content Page, que agregar un archivo .cs

donde puede definirse la interfaz usando cdigo,
asi como su comportaiento y eventos.
Forms Content Xaml, que agregar un archivo
.xaml donde se definen los elementos de la UI y
uno .cs donde puede definirse el comportamiento y
eventos.

Qu elementos de UI existen?

En Xamarin.Forms, los objetos que aparecen en la pantalla son denominados:

elementos visuales.
Pginas (Pages)

Diseos (Layouts)

una aplicacin de Xamarin.Forms puede ser de una o ms pginas y que

generalmente una pgina ocupa todo (o por lo menos un rea grande) de la
pantalla. Algunas aplicaciones consisten en solamente una sola pgina, mientras
que otras permiten navegar entre varias pginas.

Son diseos de algn tipo para organizar los elementos visuales.

Por ejemplo el StackLayout que arregla a sus hijos en una pila horizontal o
vertical.

Controles (widgets)

Son diversos tipos de objetos interactivos y de presentacin: texto, mapas de

bits, botones, campos de entrada de texto, deslizadores, interruptores, barras de
progreso, selectores de fecha y hora, etc.
https://vicenteguzman.mx/2015/10/21/paginas-diseno-y-vistas-xamarin-forms/

Pginas (Pages)

ContentPage: Contiene una sola vista. en la que podremos introducir los diferentes
controles que vayan a conformar la interfaz de usuario que queremos definir. Estas
pginas slo podrn tener un hijo, con lo que deberemos de establecer uno de los
contenedores disponibles dentro de Xamarin Forms (StackLayout, ScrollView, ListView).
NavigationPage: una pgina que tiene una barra de navegacin. Las pginas son
mantenidas en un stack y puede navegarse entre ellas.
TabbedPage: una pagina contenedora de pginas, organizadas por tabs.
MasterDetailPage: una pgina que tiene 2 paneles para la pgina.
CarouselPage: Una pgina que permite acceder a las subpginas haciendo un gesto de
swipe (scroll lateral).

Layouts
Los layouts son contenedores de otros layouts o vistas. Lo utilizamos para posicionar los
controles dentro de las pginas.

Layouts (2)

StackLayout: Un diseo que posiciona los elementos hijo en una sola lnea que
puede ser orientada verticalmente u horizontalmente. En este diseo se ajustar
automticamente los lmites de los hijos durante un ciclo del layout.

RelativeLayout: es un Layout que usa Constraints para distribuir sus elementos.

Grid: un diseo que contiene vistas dispuestas en renglones y columnas.

AbsoluteLayout: Coloca los elementos secundarios en las posiciones absolutas

solicitadas. Las anclas y los lmites asignados por el usuario definen la posicin y el
tamao del control.
ScrollView: es un elemento capaz de hacer scrolling de su contenidosi se requiere.
Frame: un elemento que contiene un solo elemento secundario, con algunas
opciones de framing.
ContentView: un element con un solo contenido. Sirve de clase base para vistas
compuestas definidas por el usuario.

Controles

BoxView: Control para pintar un rectngulo relleno de

color.
Button: Control tipo botn.
DatePicker: Control para seleccionar fechas.
Entry: Control para editar texto en una sola lnea.
Editor: Control para editar texto mltiples lneas.
Image: Control para mostrar imgenes.
Label: Control para mostrar texto de solo lectura.
ListView: Control para mostrar una lista.
OpenGLView: Control para mostrar contenido OpenGL.
Picker: Control para seleccionar un elemento de una
lista.
ProgressBar: Control de barra de progreso.

ActivityIndicator : Control visual para avisar

que algo est en curso sin informar el
progreso.
SearchBar: Control de bsqueda.
Slider: Control visual para la captura de un
valor lineal.
Stepper: Control para incrementar o reducir un
valor numrico.
Switch: Control visual para la seleccin on-off.
TableView: Estructura contenedora de
columnas y celdas.
TimePicker: Control visual para la entrada de
horas y minutos.
WebView: Control contenedor de HTM

Renders

Xamarin.Forms utiliza abstracciones para definir los

elementos. Posteriormente se transforma cada
abstraccin ofreciendo una implementacin y
mecanismos en cada plataforma.
Si la apariencia por defecto de un elemento no es
suficiente, dicha apariencia puede modificarse.

Element y Renderer

Todos los elementos de Xamarin.Forms se componen de dos partes

diferenciadas:
Element:

Renderer:

Es una clase que define al control. Conjunto de propiedades y eventos

que permitirn gestionar tanto la apariencia, contenido y
comportamiento del mismo. La clase Element define el conjunto de
propiedades de contenido (Text), como las de apariencia (TextColor) y
eventos.
El elemento definido se renderiza (transforma) en cada plataforma a un
elemento 100% nativo.

Podemos crear nuestra propia clase Renderer para modificar la apariencia o

comportamiento del elemento.
http://geeks.ms/jsuarez/2015/06/23/xamarin-forms-custom-renders/

Content Page
La distribucin de la UI se realiza
manualmente usando cdigo.
Los elementos de UI definidos se
asignan la propiedad Content para que
se puedan desplegar.

Xaml Page
La distribucin de la UI se realiza
manualmente usando tags Xaml que
representen objetos visuales de
Xamarin.
El comportamieno de los elementos de
la pgina se define en un .cs asociado.

Y... cmo se ve lo que hice?

Si la UI es definida por cdigo, solo ser posible ver el

resultado compilando y ejecutando la app en un
emulador.
Si la UI es definida mediante XAML, al menos en el
VS, NO abre el editor grfico, por lo que es
recomendable usar algun visor de XAML.
De hecho, NO hay soporte para ver el diseo de un
Xaml Xamarin*
En conclusin, el desarrollador debe desarrollar la
capacidad de crear una imagen mental del diseo (al
menos, en este momento).

Kaxaml prueba de despliegue

El problema ser que el ContentPage no se identifica como un

tag vlido.
He aqu una oportunidad para hacer un proyecto interesante.

http://www.kaxaml.com

Y si no hay... pues hago el mo

Tcnica 2: navegando entre pginas

Para navegar entre ContentPage's, hay varias

opciones, complementarias entre s:

En el punto de arranque App.cs, puede definirse

que las pginas sean contenidas por un
NavigationPage. Esto aade de forma
transparente, un elemento < junto al icono de
Xamarin, que permite regresar a la pgina anterior.
Agregar botones que, al ser presionados, incluyan
llamadas del tipo

Navigation.PushAsync(new MyPage());
Navigation.PopAsync();

Navegacin pginas con tabs

Una opcin adicional es el uso de TabbedPage's.

Este tipo de pginas nos van a permitir definir
contenido que se mostrar diferenciado por pestaas
con diferente ttulo e icono. Ser til, como en
cualquier aplicacin mvil, para aglutinar diversa
informacin de una misma fuente de contenido.
Se agregan a la pgina hijos, que son otras Page's.

Navegacin con botones

El mecanismo que se encarga del control de la

navegacin se llama NavigationStack.
Cuando se hace una operacin Push (para ir a
una pgina), la aplicacin introduce una nueva
pgina en el stack, y la nueva pgina se vuelve
la activa.
Cuando se hace una operacin Pop (para
regresar a la pgina anterior), la aplicacin
saca la pgina del stack y la pgina en el tope
del stack se vuelve la pgina activa.

Push & Pop

https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/hierarchical/

Definicin de operaciones ejemplos

Definiendo el botn en cdigo,
se define un comando, al cual
se le especifica la operacin a
realizar

Usando un evento, se define el mtodo

donde se define la operacin, y en el
Xaml se hace referencia a dicho mtodo

App con NavigationPage

TabbedPage

Despliegue de datos y contenido

A continuacin se presentan las siguientes

tcnicas:

Despliegue de texto con Label's

Despliegue de mensajes pop-up

Despliegue de pginas web

Despliegue de datos usando Bindings

Loggeo

Tcnica 3: despliegue de texto

Un texto bsico que debe mostrarse es el titulo

de la pgina, lo cual se logra asignando una
cadena a la propiedad Title.
Mostrar texto en la UI puede realizarse con el
control Label, ya sea:

Definiendo el label como un tag de Xaml

Declarando en cdigo el control

La otra es captar texto con el control Entry

(equivalente a un TextBox)

Usando Title y Label

Sintxis de elementos XAML

Hay 2 formas de especificar las
propiedades de un elemento XAML de
Xamarin, ya sea usando atributos del
tag del elemento visual, o expandiendo
para propiedad como un tag de la forma
Elemento.Propiedad

Sintaxis propiedad como

atributo

Sintaxis propiedad-elemento

https://developer.xamarin.com/guides/xamarin-forms/user-interface/xamlbasics/essential_xaml_syntax/

OnPlatform detalles especficos

Para declarar variantes
especficas a una plataforma en
especfico, se tiene la clase
OnPlatform.
En este caso para variar el o los
valores de una propiedad, se
incrustan llamadas OnPlatform,
una para la propiedad especfica
y otras tantas para cambiar los
valores en funcin de la
plataforma objetivo (iOS, Android,
Win).
Las sintxis de atributos o
elemento-atributo aplican
tambin en este caso.

Tcnica 4: desplegando mensajes

Para mostrar un mensaje pop-up se tienen las

siguientes opciones:

Usar el mtodo DisplayAlert() del Page

Crear un objeto AlertDialog, inicializarlo y mostrar la
caja de diloo con el mensaje.

Esta tcnica es muy socorrida incluso al estar

depurando algna parte del cdigo en
especfico.

Tcnica 5: desplegar una pgina

web

Receta:

Crear un Content Page

En el constructor, asignar al
contenido una nueva instancia
del objeto WebView
Especificar en la propiedad
Source del WebView la URL
deseada
Activar el permiso INTERNET
enel manifiesto del proyecto
Droid (se encuentra en las
propiedades del proyecto)
https://developer.xamarin.com/guides/xamarin-forms/working-with/webview/

Tcnica 6: despliegue de datos en

un ListView

Las listas son elementos omnipresentes en casi todas la

apps.
Para usar un ListView requerimos:

Un conjunto de datos a desplegar y su tipo (clase)

Un template para desplegar los datos las celdas de la
lista
Agregar el ListView al Content de la pgina
Ligar (binding) la coleccin de datos con el ListView
usando la propiedad ItemSource
Ligar el template de datos con el ItemTemplate de la
lista

ListView - Componentes

Header & footers: texto o vista a desplegar al inicio o

al fin de la lista
Groups: los datos de la lista pueden ser agrupados
Cells: los datos en un ListView se representan con
celdas. Cada celda corresponde a un registro.

TextCell: despliegan una cadena de texto, y

opcionalmente pueden desplegar un texto de
detalle.

ImageCell: Despliega una imagen con texto.

Built-In:

CustomCell: se pueden ajustar para presentar

datos complejos
https://developer.xamarin.com/guides/xamarin-forms/user-interface/listview/

Caso: Lista de blogs

Para la plantalla de Blogs que se propuso,

tendremos una lista de blogs, que consistir en
el nombre del blog y su Url.

Tcnica 7: lanzar evento para una

celda de la lista

Ya que se tiene una lista, es muy probable que

se requiera que al seleccionar una celda,
suceda algo.
Usando la Propiedad ItemTapped, se define el
evento que se lanza al seleccionar un elemento
de la lista.
En este caso, se busca que al seleccionar un
blog de la lista, se abra una nueva pgina que
contendr las entradas del blog, por lo que
habr que pasar como parmetro la url.

Asociando un evento a un listItem

En este caso, al ItemTapped se le indica
que hay que abrir una nueva pgina.
La nueva pgina ajusta su titulo de
acuerdo al contenido del item
seleccionado.

Versin 2
Ajustes de navegacin
Uso de ListViews

Tcnica 8: desplegando mensajes

de loggeo

Cuando se hace depuracin de cdigo, es importante

mostrar en que parte de la secuencia del proceso
estamos.
Aunque puede hacerse con mensajes de alerta, esto
es invasivo a la UI de la app, por lo que es mejor que
se desplieguen en otro lugar.
Usando el viejo Console.Writeline, Visual Studio
provee un panel de salida (Output) en el IDE donde
pueden desplegarse estos mensajes.
El objeto Console se supone que viene en System.
https://developer.xamarin.com/recipes/cross-platform/ide
/debugging/output_information_to_log_window/

No funciona en VS 2013

Lstima pero no funciona en VS 2013. Parece que el System no tiene

Console.

Comentarios

No es posible dar un salto inmediato a la arquitectura

recomendada en varios artculos. Es prerrequisito
saber que se puede hacer con la plataforma, y adquirir
las habilidades bsicas.
El tema de no tener un soporte visual para el diseo
de UI no es una limitante, pero no agiliza el trabajo.
Aunque hice un visor sencillo, a nivel didctico es til,
pero implementar todo el soporte de los elementos de
UI es una tarea complicada.
Aunque hay mucha documentacin bsica disponible,
no toda es confiable (ej. Console)

Rascando la superficie

Al momento, usando una

solucin de tipo Xamarin
Forms Portable, solo se ha
explorado la parte de
cdigo de UI compartido y
algunas particularidades
para Android.
Falta descubrir todo lo que
implica la base del
tempano.

Referencias

Pginas en Xamarin Forms Comenzando con Xamarin *

Xamarin Forms uno para todos !!! *

Pginas, Diseo y Vistas Xamarin.Forms *

Navigation with Xamarin Forms *

Xamarin.Forms Layouts *

Xamarin.Forms - Write Once, Run Everywhere, AND Be

Native? *

Xamarin.Forms Kickstarter 2.0 *

Tag samples *

Referencias (2)

INTRODUCCIN A #XAMARIN PARTE 2

ALERTDIALOG CROSS PLATFORM *
Output Information to Log Window *
[Cross Platform] Introduccin a Xamarin.Forms
(1/2) *
Xamarin.Forms Controls: ListView *
XAMARIN.FORMS : 6 WAYS TO CREATE
LISTVIEWS AND TABLEVIEWS WITH
CUSTOM CELLS *

Referencias (3)

Data Binding a Custom Cell in Xamarin.Forms

ListView *