Póngase cómodo

Empezamos en breve…

Inicio:
01:45 p.m.
 3 claves para entender el éxito de Nvidia, la compañía
cuyo valor sobrepasó al de Google y marcó un récord
en la bolsa
Si ya tenía a sus pies a Wall Street por sus buenos resultados y el gran
aumento del valor de sus acciones, ahora el frenesí llegó aún más lejos.

El fabricante estadounidense de procesadores Nvidia alcanzó este

viernes los US$2 billones de valor de mercado, una frontera que solo
habían conquistado en EE.UU. los gigantes tecnológicos Microsoft y
Apple.

Alphabet, cuya principal filial es Google, fue desplazada por Nvidia en

capitalización de mercado.

“Las condiciones son excelentes para seguir creciendo”, dijo el director

ejecutivo de la empresa, Jensen Huang, en una llamada con
inversionistas.
DISEÑO Y DESARROLLO DE APLICACIONES MÓVILES I

INST. RICHARD SALAS HIDALGO

OBJETIVO:

Con la información proporcionada y la

orientación del facilitador, el
participante será capaz de entender
de cómo se conecta a datos con
precisión y sin error.

6
www.senati.edu.pe
 Contenido:

• Data Binding en Xamarin Forms

• Usa Data Binding para desacoplar código detrás del UI
• Crea bindings en código
• Crea bindings en XAML
• Trabajando con BindingContext
• Use convertidores de valor para enlazar tipos
incompatibles
• Implementando notificaciones PropertyChange

7
www.senati.edu.pe
VIDEO:

8
www.senati.edu.pe
 PARTICIPANDO EN PADLET

• https://padlet.com/rmsalash20/wd4ss7v3dygq2nvu

9
www.senati.edu.pe
 Usa Data Binding para desacoplar código detrás
del UI

• La librería de Data Binding te ayuda a crear layouts

declarativos con el fin de minimizar el código necesario para
vincular la lógica de tu aplicación y los views.

• La idea es minimizar las asignaciones de valores de nuestros

views del código y personalizar la forma en que manejos
eventos de UI.

10
www.senati.edu.pe
• El enlace de datos es útil porque simplifica el desarrollo de
interfaces de usuario reemplazando un montón de código
reutilizable aburrido.

• El enlace de datos funciona manteniendo los objetos

sincronizados a medida que cambian sus valores enlazados.
En lugar de tener que escribir controladores de eventos cada
vez que cambia el valor de un control, se establece el enlace y
se habilita el enlace en el modelo de vista.

11
www.senati.edu.pe
 Crea bindings en código

• Enlazar celdas
• Las propiedades de las celdas (y los elementos secundarios de las celdas) se pueden
enlazar a las propiedades de los objetos de ItemsSource.
• Por ejemplo, ListView se podría usar para presentar una lista de empleados.

• La clase employee:

12
www.senati.edu.pe
• ObservableCollection<Employee> Se crea , se establece como ListViewItemsSourcey la
lista se rellena con datos:

13
www.senati.edu.pe
• En el fragmento de código siguiente se muestra un ListView enlazado a una lista de
empleados:

14
www.senati.edu.pe
• En este ejemplo xaml se define un
ContentPage objeto que contiene un
ListViewobjeto.
• El origen de datos del control ListView se
establece mediante el atributo
ItemsSource. El diseño de cada fila de
ItemsSource se define dentro del
elemento ListView.ItemTemplate. Esto da
como resultado las capturas de pantalla
siguientes:

15
www.senati.edu.pe
• Enlace selectedItem
• A menudo, querrá enlazar al elemento seleccionado de , ListViewen lugar de usar un
controlador de eventos para responder a los cambios. Para ello en XAML, enlace la
SelectedItem propiedad :

16
www.senati.edu.pe
 Crea bindings en XAML

• Binding es una extensión de marcado. Cuando utiliza la extensión de enlace

para declarar un enlace, la declaración consta de una serie de cláusulas que
siguen a la Binding palabra clave y están separadas por comas (,). Las cláusulas
de la declaración vinculante pueden estar en cualquier orden y hay muchas
combinaciones posibles.
• Las cláusulas son pares Nombre = Valor , donde Nombre es el nombre de la
propiedad Binding y Valor es el valor que está configurando para la propiedad.

• Al crear cadenas de declaración de vinculación en el marcado, deben adjuntarse

a la propiedad de dependencia específica de un objeto de destino. El siguiente
ejemplo muestra cómo enlazar la propiedad TextBox.Text usando la extensión de
enlace, especificando las propiedades Fuente y Ruta .

17
www.senati.edu.pe
 18
www.senati.edu.pe
• Sintaxis del elemento de objeto
• La sintaxis del elemento de objeto es una alternativa a la creación de la
declaración vinculante. En la mayoría de los casos, no hay una ventaja
particular en usar la extensión de marcado o la sintaxis del elemento de
objeto. Sin embargo, cuando la extensión de marcado no es compatible
con su escenario, como cuando el valor de su propiedad es de un tipo que
no es una cadena para el cual no existe una conversión de tipo, debe usar
la sintaxis del elemento de objeto.

• La sección anterior demostró cómo enlazar con una extensión XAML. El

siguiente ejemplo demuestra cómo hacer el mismo enlace pero usa la
sintaxis del elemento de objeto:

19
www.senati.edu.pe
 Trabajando con BindingContext

• ¿Qué es el binding context?

• Contamos con la propiedad BindingContext que actúa
como contexto de datos del elemento. Si la propiedad
fuese nula en el elemento, se buscaría de forma
ascendente en la jerarquía de elementos. Es decir, si la
propiedad BindingContext del elemento visual es nula,
buscará en el elemento padre inmediato, etc

20
www.senati.edu.pe
 Use convertidores de valor para enlazar tipos
incompatibles

• Los convertidores de tipos y extensiones de marcado son dos

técnicas que los sistemas de tipos XAML y escritores de XAML
utilizan para generar componentes de gráfico de objeto.
Aunque comparten algunas características, los convertidores
de tipos y las extensiones de marcado se representan de forma
diferente en una secuencia de nodo XAML. En este conjunto de
documentación, en ocasiones nos referimos colectivamente a
los convertidores de tipos, las extensiones de marcado y
construcciones similares como convertidores de valores.

21
www.senati.edu.pe
 Convertidores de valores

• En XAML, los convertidores de valores se utilizan para varios escenarios.

La lista siguiente muestra los distintos tipos de convertidores de valores
en XAML:

• Convertidor de tipos
• Extensión de marcado
• Serializador de valor
• Clase relacionada o clase de compatibilidad que proporciona la lógica
para una sintaxis de texto XAML

22
www.senati.edu.pe
• Convertidores de tipos
• En la definición de los servicios XAML de .NET los convertidores de tipo son
clases que derivan de la clase TypeConverter de CLR.
• TypeConverter es una clase que se encontraba en .NET antes de que existiera
XAML. Su propósito original era admitir ventanas de propiedades y metáforas
similares de edición basada en texto para las propiedades de IDE. La
introducción de XAML en .NET usa TypeConverter para convertir una sintaxis de
texto (tal como se encuentra en un valor de atributo o en un nodo de valor
XAML) en un objeto.
• TypeConverter también se puede utilizar para serializar el valor de un objeto en
sintaxis de texto. TypeConverter también se usaba en anteriores
implementaciones XAML específicas del marco en Windows Presentation
Foundation (WPF) y Windows Communication Foundation (WCF).

23
www.senati.edu.pe
Desarrollando el TEST

https://forms.gle/DNpgHnuJ93G6zSyp7

24
www.senati.edu.pe
 Trabajo en equipo:

• ¿En qué consiste el DATA BINDING?

25
www.senati.edu.pe
OBJETIVO:

Con la información proporcionada y la

orientación del facilitador, el
participante será capaz de conocer
como usar el ListView con precisión y
sin error.

26
www.senati.edu.pe
 Contenido:

• Usando ListView en Xamarin Forms

• Muestreando una colección en el ListView
• Maneja la selección en un ListView
• Agrega o elimina ítems dinámicamente
• Agrega, elimina o actualiza datos dinámicamente
• Hacer tu UI segura con los cambios de la colección
• Modificar colección en el background
• Personaliza las filas del ListIVew
• Usa DataTemplates
• Usa plantillas de celdas incorporadas

27
www.senati.edu.pe
VIDEO:

28
www.senati.edu.pe
 PARTICIPANDO EN PADLET

• https://padlet.com/rmsalash20/wd4ss7v3dygq2nvu

29
www.senati.edu.pe
 Muestreando una colección en el ListView

• ListView es una vista para presentar listas de datos, especialmente listas largas
que requieren desplazamiento.

• Se puede usar un ListView control en cualquier situación en la que se muestren

listas de datos desplazables. La ListView clase admite acciones de contexto y
enlace de datos.

• El ListView control no debe confundirse con el TableView control . El TableView

control es una opción mejor siempre que tengas una lista no enlazada de
opciones o datos porque permite especificar opciones predefinidas en XAML.
Por ejemplo, la aplicación de configuración de iOS, que tiene un conjunto
predefinido de opciones, es más adecuado para usar que TableView un ListView.
30
www.senati.edu.pe
• La ListView clase no admite la definición de elementos de lista en XAML,
debes usar la propiedad o el ItemsSource enlace de datos con para
ItemTemplate definir elementos de la lista.

• Es ListView más adecuado para una colección que consta de un único

tipo de datos. Este requisito se debe a que solo se puede usar un tipo de
celda para cada fila de la lista.

• El TableView control puede admitir varios tipos de celda, por lo que es una
mejor opción cuando necesita mostrar varios tipos de datos.

31
www.senati.edu.pe
• Componentes
• El ListView control tiene una serie de componentes disponibles
para ejercer la funcionalidad nativa de cada plataforma. Estos
componentes se definen en las secciones siguientes.

32
www.senati.edu.pe
• Encabezados y pies de página
• Los componentes de encabezado y pie de página se muestran al principio
y al final de una lista, separados de los datos de la lista. Los encabezados
y pies de página se pueden enlazar a un origen de datos independiente
del origen de datos de ListView.

• Grupos
• Los datos de un ListView objeto se pueden agrupar para facilitar la
navegación. Los grupos suelen estar enlazados a datos. En la captura de
pantalla siguiente se muestra un ListView elemento con datos agrupados:

33
www.senati.edu.pe
 34
www.senati.edu.pe
• Celdas
• Los elementos de datos de un ListView elemento se denominan celdas. Cada celda
corresponde a una fila de datos. Hay celdas integradas entre las que elegir o puede
definir su propia celda personalizada. Tanto las celdas integradas como las
personalizadas se pueden usar o definir en XAML o código.

• Las celdas integradas, como y TextCellImageCell, corresponden a controles nativos y

son especialmente eficaces.
• Muestra TextCell una cadena de texto, opcionalmente con texto detallado. El texto
detallado se representa como una segunda línea en una fuente más pequeña con un
color de énfasis.
• Muestra ImageCell una imagen con texto. Aparece como con TextCell una imagen a
la izquierda.
• Las celdas personalizadas se usan para presentar datos complejos. Por ejemplo, una
celda personalizada podría usarse para presentar una lista de canciones que incluye
el álbum y el artista.
35
www.senati.edu.pe
• En la captura de pantalla siguiente se muestra un ListView elemento con elementos
ImageCell:

36
www.senati.edu.pe
• Funcionalidad
• La ListView clase admite una serie de estilos de interacción.

• La extracción para actualizar permite al usuario extraer el ListView

contenido para actualizar el contenido.
• Las acciones de contexto permiten al desarrollador especificar
acciones personalizadas en elementos de lista individuales. Por
ejemplo, puede implementar acciones de deslizamiento a acción en
iOS o acciones de pulsación larga en Android.
• La selección permite al desarrollador adjuntar la funcionalidad a
eventos de selección y de selección en elementos de lista.

37
www.senati.edu.pe
• En la captura de pantalla siguiente se muestra un ListView elemento con acciones de
contexto:

38
www.senati.edu.pe
 Maneja la selección en un ListView

• Seleccionar mediante programación un elemento en un control ListView de Windows

Forms.
• La selección de un elemento mediante programación no cambia automáticamente el foco
al control ListView. Por ello, normalmente también será conveniente establecer el foco en
el elemento cuando ese elemento se seleccione.

39
www.senati.edu.pe
 Agrega o elimina ítems dinámicamente

• La clase Xamarin.Forms ListView admite la interacción del usuario con los datos que
presenta.

• Selección y grifos
• El ListView modo de selección se controla estableciendo la ListView.SelectionMode
propiedad en un valor de la ListViewSelection Mode enumeración:

• Single indica que se puede seleccionar un solo elemento, con el elemento seleccionado
resaltado. Este es el valor predeterminado.
• None indica que los elementos no se pueden seleccionar.

40
www.senati.edu.pe
• Cuando un usuario toca un elemento, se activan dos eventos:

• ItemSelected se dispara cuando se selecciona un nuevo

elemento.
• ItemTapped se dispara cuando se toca un elemento.

41
www.senati.edu.pe
• Cuando la SelectionMode propiedad se establece en , se
pueden seleccionar Single elementos en el , se activarán los
eventos y la propiedad se establecerá en el valor del elemento
seleccionado.ListViewItemSelectedItemTappedSelectedItem

• Cuando la SelectionMode propiedad se establece en None, los

elementos de ListView no se pueden seleccionar, el
ItemSelected evento no se activará y la SelectedItem propiedad
permanecerá null. Sin embargo, ItemTapped los eventos aún se
dispararán y el elemento tocado se resaltará brevemente
durante el toque.
42
www.senati.edu.pe
• Cuando se ha seleccionado un elemento y la
SelectionMode propiedad se cambia de Single
a None, la SelectedItem propiedad se
establecerá en nully el ItemSelected evento se
activará con un null elemento.

• Las siguientes capturas de pantalla muestran

un ListView modo de selección
predeterminado:

43
www.senati.edu.pe
 Agrega, elimina o actualiza datos dinámicamente

• Crear, actualizar y eliminar datos con el enlace de modelos. Establecerá

las siguientes propiedades:
• DeleteMethod
• InsertMethod
• UpdateMethod
• Estas propiedades reciben el nombre del método que controla la
operación correspondiente. Dentro de ese método, se proporciona la
lógica para interactuar con los datos.

44
www.senati.edu.pe
 Hacer tu UI segura con los cambios de la
colección

• En el inicio rápido se describe cómo

aplicar estilo a una aplicación
Xamarin.Forms multiplataforma con estilos
XAML. Además, la guía de inicio rápido
usa la Recarga activa de XAML para
actualizar la interfaz de usuario de la
aplicación en ejecución, sin tener que
recompilar la aplicación.

45
www.senati.edu.pe
 Modificar colección en el background

• Un tema se define como una colección de objetos de recursos almacenados en

.ResourceDictionary
• En el ejemplo siguiente se muestra desde LightTheme la aplicación de ejemplo:

46
www.senati.edu.pe
• En el ejemplo siguiente se muestra desde DarkTheme la aplicación de ejemplo:

47
www.senati.edu.pe
• Establecer un tema predeterminado
• Una aplicación requiere un tema predeterminado para que los controles tengan valores
para los recursos que consumen. Se puede establecer un tema predeterminado
combinando el tema ResourceDictionary en el nivel ResourceDictionary de aplicación
definido en App.xaml:

48
www.senati.edu.pe
 Personaliza las filas del ListView

• La apariencia de un control ListView viene determinada

por el diseño de las filas que se muestran. Para
cambiar la apariencia de, ListViewuse un diseño de fila
diferente.

49
www.senati.edu.pe
• Vistas de fila integradas
• Hay doce vistas integradas a las que se puede hacer referencia mediante
Android.Resource.Layout:
• TestListItem: una sola línea de texto con formato mínimo.
• SimpleListItem1: una sola línea de texto.
• SimpleListItem2: dos líneas de texto.
• SimpleSelectableListItem: una sola línea de texto que admite una o varias selecciones
de elementos (agregadas en el nivel de API 11).
• SimpleListItemActivated1: similar a SimpleListItem1, pero el color de fondo indica
cuándo se selecciona una fila (se agrega en el nivel de API 11).
• SimpleListItemActivated2: similar a SimpleListItem2, pero el color de fondo indica
cuándo se selecciona una fila (se agrega en el nivel de API 11).
• SimpleListItemChecked: muestra las marcas de verificación para indicar la selección.
50
www.senati.edu.pe
• SimpleListItemMultipleChoice: muestra casillas para indicar la selección de varias
opciones.
• SimpleListItemSingleChoice: muestra botones de radio para indicar la selección
mutuamente exclusiva.
• TwoLineListItem: dos líneas de texto.
• ActivityListItem: una sola línea de texto con una imagen.
• SimpleExpandableListItem: agrupa filas por categorías y cada grupo se puede expandir
o contraer.

51
www.senati.edu.pe
• Cada vista de fila integrada tiene un estilo integrado asociado. Estas capturas de pantalla
muestran cómo aparece cada vista:

52
www.senati.edu.pe
 53
www.senati.edu.pe
 54
www.senati.edu.pe
 Usa DataTemplates

• Un escenario de uso común para a DataTemplate es mostrar datos de una colección de

objetos en un archivo ListView. La apariencia de los datos para cada celda en el ListView
puede administrarse configurando la ListView.ItemTemplate propiedad en un
DataTemplate. Hay una serie de técnicas que se pueden utilizar para lograr esto:

• Creación de una plantilla de datos en línea .

• Creación de una plantilla de datos con un tipo .
• Creación de una plantilla de datos como recurso .

55
www.senati.edu.pe
Independientemente de la técnica que se utilice, el resultado es que la apariencia de cada celda
ListView está definida por un DataTemplate, como se muestra en las siguientes capturas de
pantalla:

56
www.senati.edu.pe
 Usa plantillas de celdas incorporadas

• La ListView.ItemTemplate propiedad se
puede establecer en una línea
DataTemplate. Se debe usar una plantilla
en línea, que se coloca como elemento
secundario directo de una propiedad de
control adecuada, si no hay necesidad
de reutilizar la plantilla de datos en otro
lugar. Los elementos especificados en
DataTemplate definen la apariencia de
cada celda, como se muestra en el
siguiente ejemplo de código XAML:

57
www.senati.edu.pe
Desarrollando el TEST

https://forms.gle/fbYPH71XNMHZewev9

58
www.senati.edu.pe
 Trabajo en equipo:

• ¿En qué consiste el DATATEMPLATE?

59
www.senati.edu.pe
Conclusiones:

60
www.senati.edu.pe
Conclusiones:

61
www.senati.edu.pe
www.senati.edu.pe