Ejercicios de entrenamiento de SmartDevicesPlus

P a g e | 2

Resumen

Resumen ...................................................................................................................................... 2

El Problema .................................................................................................................................. 3

Parte 1 – Themes & Templates: conceptos básicos ........................................................................ 3

Parte 2 – Themes & Templates: conceptos avanzados ................................................................. 13

Parte 3 – User controls: NucliOs .................................................................................................. 19

P a g e | 3

El Problema

Una cadena de supermercados lo contrata para que desarrolle un sistema SmartDevices para que

permita gestionar las filiales, productos, clientes y proveedores. Este sistema va a ser accedido por el

personal desde dispositivos Android y iOS.

En este práctico se usará SmartDevicesPlus para desarrollar el sistema deseado.

Parte 1 – Themes & Templates: conceptos ba sicos

1. Crear una nueva KB de nombre “SDPTraining” para comenzar con el desarrollo de la

aplicación. Seleccionar ‘C#’ como ambiente de prototipo y Web como tipo de aplicación.

2. Crear la transacción Category como se muestra a continuación:

Observaciones:

- Crear los dominios:

o Id: numérico de 6.0, auto numérico

o Name: varchar de 40

3. Crear la transacción Product como se muestra a continuación:

P a g e | 4

Observación:

- Crear el dominio Price: numérico de 6.0 y en la propiedad Prefix agregar el

símbolo de ($)

4. Crear la transacción Branch, que representa las filiales de la cadena, como se muestra

a continuación:

5. Crear la transacción Client que almacene los clientes de la empresa como se muestra

a continuación:

6. Ahora se desea poder navegar en la aplicación para crear categorías de

productos, productos, filiales y clientes. Cómo podemos hacerlo en GeneXus?

Solución: Aplicar Work With para Smart Devices para todas las transacciones (sin

usar SD+, si aparece una ventana para seleccionar Theme presionar Skip)

Crear un objeto Dashboard de nombre ‘Supermarket’ y adicionar las acciones que

llamen a los Work With de Categoría, Producto, Filial y Cliente.

P a g e | 5

Hacer clic derecho en el Dashboard creado Run para ejecutar la aplicación SD y

adicionar desde el SmartPhone las categorías, productos, filiales y clientes. Usar las

imágenes disponibles en el material brindado para crear los productos y clientes.

Recordamos que se debe cambiar la propiedad ‘Services Url’ con el valor de su IP

para ejecutar localmente.

Pueden crear un registro en el SD y luego otros en la aplicación web (haciendo F5 en

GeneXus) para seleccionar las imágenes de los clientes, productos y hacer más ágil la

inserción de datos.

Como puede ver las pantallas no tienen un buen look&feel y tendríamos que trabajar

un tiempo para generar pantallas más atrayentes. ¿Qué podemos hacer para que

estas mismas pantallas se vean lindas y con un look estandarizado en toda la

aplicación en poco tiempo?

Aplicar SD+ en todos los ‘Work With’ creados, seleccionando el Theme SD+: FlatBlue

y solamente eligiendo la opción para generar Android porque en este momento

P a g e | 6

vamos a generar una aplicación sólo para Android. Más adelante en el práctico,

vamos a generar para iOS.

Se desea generar usando los siguientes SD+ Templates para las transacciones:

Para realizar esto, se debe hacer clic derecho en la transacción SD+ Select SD+

template:

Transacción SD+ template a seleccionar

Product Image and amounts

Title: nombre del producto

Subtitle: nombre de la categoría

Image: foto del producto

Amount: precio del producto

Category Title

Client Image with title and subtitle

Image: foto del cliente

Title: nombre completo

Subtitle: fecha de nacimiento de los clientes

Branch Locations List

Image: foto de la filial

Title: nombre de la filial

Address: dirección de la filial

P a g e | 7

Luego de seleccionar un SD+ template para cada una de las transacciones hacer lo

siguiente:

a. Cambiar la propiedad Android Base Style del Dashboard para Light

b. Clic derecho Run en el Dashboard Supermarket y visualizar los resultados:

P a g e | 8

7. Se desea tener un panel que solamente muestre los productos de cierta categoría

en especial (Groceries). De cada producto en el listado se desea mostrar

solamente la imagen y la descripción (tenga en cuenta que la descripción puede

tener muchas líneas). Para este punto no se permite usar el objeto Work With

para Smart Devices.

¿Qué otra forma provee SD+ para generar la pantalla de forma rápida y con un

look&feel atrayente?

Solución: Crear los paneles basados en SD+, utilizando atributos o usando SDT.

En este ejercicio es necesario crear dos paneles para probar las dos opciones

(ProductListGroceries_Att y ProductListGroceries_SDT). En ejecución el usuario va a

visualizar lo mismo en cualquiera de estos paneles. Seleccione el template SD+ que

sea más adecuado a lo que se desea mostrar en el listado.

Además, cuando el usuario haga ‘Tap’ en un registro de esas pantallas se desea

mostrar la información detallada de ese producto, de la siguiente forma:

Puede crear un único panel de detalle para mostrar la información luego de realizar

Tap en los dos paneles del listado Productos, de una categoría. Este nuevo Panel SD

se llamará ProductGroceriesDetail, y va a ser creado usando el SD+ Template que

P a g e | 9

genere la pantalla mostrada anteriormente. Debe asignarle la regla ‘parm’ para

recibir el producto que desea visualizar:

parm(in:ProductId);

Para habilitar la acción ‘Tap’ sobre un registro de la lista de verduras debe efectuar la

acción de Add new Action/Event, por ejemplo ‘OpenProduct’ y luego desde ambos

SD Panels (ProductListGroceries_Att y ProductListGroceries_SDT) asignar la

propiedad Default Action del grid con el evento recién creado. Luego es necesario

hacer el llamado al panel ProductGroceriesDetail panel para ambos SD Panels (el

implementado con atributos y el implementado con SDTs).

En el SD Panel PoductListGroceries_Att el código asociado a la default action será el

siguiente:

Event 'OpenProduct'

ProductGroceriesDetail(ProductId)

Endevent

Y en el SD Panel ProductListGroceries_SDT tomará el ítem seleccionado del SDT,

como se muestra a continuación:

Event 'OpenProduct'

ProductGroceriesDetail(&ProductSDTCollection.CurrentItem.ProductId)

Endevent

Realizar estos paneles y luego probar en ejecución los resultados (para eso adicione

dos paneles al Dashboard con imágenes diferentes, y navegue por los dos realizando

Tap en un producto.)

8. Se desea mostrar información en un listado para que el gerente del

supermercado analice, pero esa información no está en ninguna tabla, es una

información fija (podría ser recibida, por ejemplo, de un Web Service). ¿Cómo

hacemos para mostrar información que no está disponible en ninguna tabla?

Usamos un panel basado en un SDT. El SDT puede ser cargado a partir de un Data

Provider.

Por lo tanto, importe el XPZ: “XPZ_HistoricalInfo”, luego cree un Panel

(ShowHistorialInfo) basado en un Template SD+ ‘Title With Amounts’ y adicione

el código necesario en el Panel SD para que se cargue a partir del DataProvider

importado.

Luego testear en ejecución los resultados:

P a g e | 10

9. El gerente del supermercado require visualizer todos los productos en otra

sección de la aplicación, con un estilo diferente al anteriormente usado. En esta

sección, desea mostrar los productos con estilos diferentes según su categoría.

Se desea visualizar la siguiente información para cada producto:

Title: nombre del producto

Subtitle: precio del producto

Image: foto del producto

Long Description: descripción del producto

Y cada producto según su categoría se visualizará de la siguiente manera:

Category Style

Groceries Contact Cards

Electronics Card with banner image and subtitle

Home Postal Card, variant 2

El resto de las categorías se deberían mostrar con el estilo “Cards”.

P a g e | 11

¿Cómo podemos mostrar diferentes estilos para los registros de un grid en un mismo

listado?

Solución: Usar el template denominado ‘Cards with multiple layouts’, que utiliza la

nueva funcionalidad de GeneXus que permite tener más de un estilo (layout) para un

mismo grid.

En este ejercicio necesita crear un Nuevo SDPanel (por ejemplo ‘ProductList’) usando

el template antes mencionado.

Luego de aplicar el template, es necesario editar el evento load y agregar el código

necesario para habilitar la selección del layout correspondiente para cada categoría

del producto a cargar.

El código a agregar en el evento load es el siguiente:

Event Load

//By default layout is "Cards"

DataGrid.ItemLayout = "Card"

if CategoryName= "Groceries"

DataGrid.ItemLayout = "ContactCards"

endif

if CategoryName= "Electronics"

DataGrid.ItemLayout = "BannerSubtitle"

endif

if CategoryName= "Home"

DataGrid.ItemLayout = "PostalInfo"

endif

Endevent

Para habilitar el tap de un producto de la lista es necesario agregar una nueva

acción/evento (por ejemplo ‘OpenProduct’) y marcar esta acción como default action

del grid. Luego es necesario programar el llamado al panel ProductGroceriesDetail.

El código a agregar es el siguiente:

Event 'OpenProduct'

ProductGroceriesDetail(ProductId)

Endevent

P a g e | 12

Luego probar lo desarrollado en ejecución:

P a g e | 13

Parte 2 – Themes & Templates: conceptos avanzados

En esta sección del entrenamiento usted va a modificar los Templates SD+ aplicados a un Panel SD,

crear Templates SD+, generar la aplicación en iOs, entre otras funcionalidades.

1. Se desea modificar la pantalla mostrada para listar las filiales del supermercado. En

lugar de mostrar la pantalla que estaba siendo visualizada con las localizaciones de

cada sucursal:

Se desea mostrar un mapa donde cada punto del mapa se corresponda a una filial, como se

muestra a continuación:

P a g e | 14

¿Cómo podemos hacerlo? Modificar el Template SD+ asignado al objeto List de Filial para

conseguir lo solicitado y luego haga Run del Dashboard para testear los cambios realizados.

Para el caso de un Panel SD creado a partir de un Template SD+, ¿cómo se modifica el

Template SD+ aplicado? Abra el panel ProductGroceries_Att, acceda a la opción para

modificar el Template SD+ aplicado a ese Panel y luego cancele. ¿Para qué nos sirve la

opción: ‘Disassociate from SD+ template’?

2. Ahora se desea que para los clientes del listado, en lugar de mostrar los datos de los clientes

como información adicional, se muestre el hobby (usando el mismo Template SD+ y

solamente modificando sus propiedades).

Antes: Ahora:

3. Además se desea que solamente en modo edición de un registro de un cliente, no sea visible

el campo Full Name (modificar eso desde las propiedades del Template SD+ aplicado):

P a g e | 15

4. La idea de SD+ es que usted pueda modificar un Template SD+ y luego los cambios sean

propagados automáticamente (si lo acepta) en todos los Paneles SD y WW SD a los que haya

sido aplicado ese Template. Por el momento esa propagación se realiza solamente en los

cambios realizados a las propiedades de los controles existentes en ese Template (en las

próximas versiones se va a añadir más inteligencia a este proceso).

Entonces, si usted desea modificar, por ejemplo, alguna propiedad de un Textblock que se

encuentra en un Template SD, para que se propague en todos los Paneles SD, debe abrir el

Template y realizar el cambio deseado.

En este caso el usuario de la aplicación solicita que en las pantallas de edición de un registro

de cualquier entidad (producto, cliente, filial, etc.) el texblock se muestre centrada

horizontalmente (como se muestra debajo) en lugar de mostrarla alineada a la izquierda.

¿Cómo podemos lograrlo? ¿Cuál es el Template SD+ que es necesario modificar? Realice ese

cambio y luego haga Run en el Dashboard Supermarket para verificar que el cambio fue

realizado de forma correcta.

P a g e | 16

Antes: Ahora:

5. En ejecución navegue a visualizar el listado de productos, acceda a un producto en particular

y luego edítelo.

Qué Template SD+ está siendo aplicado para la sección ‘general’ de los productos en los

layouts View y Edit? Visualizar las propiedades que lo definen en el Template SD+

correspondiente

Cómo podría hacer para modificar cierta sección (en nuestro caso la sección ‘General’ del

producto) en el Template SD+ aplicado en el layout de View y Edit.

6. Si usted analiza el Template SD+ ‘SDPDataDisplayForImageWithSection’, cuáles son los

layouts que tiene disponibles? Si abre un Panel SD que fue creado seleccionando ese

Template SD+ (por ejemplo, el panel SD ‘ProductGroceriesDetail’ que usted creó para llamar

al hacer Tap desde una línea de los paneles ProductGroceries_Att y ProductGroceries_SDT),

¿qué layouts están creados? ¿Por qué son diferentes? Cómo puede hacer para crear

solamente en este Panel SD (no es todos los paneles basados en este Template SD+) los

layouts para generar en iOs.

En este caso no es necesario hacer esta modificación porque se desea generar todo la

aplicación también para iPhone (todas sus pantallas). Cómo hacemos para definir en SD+ que

deseamos generar todo la aplicación en iOs?

P a g e | 17

Solución: En las propiedades generales de SD+ (Preferences SmartDevicesPlus) puede

visualizar lo siguiente:

- Propiedad SDPlus Theme: muestra el Theme SD+ que está siendo utilizado en esta

aplicación. Si usted desea importar otro Theme, tiene que seleccionar la opción Tools

SD+ Import SD+ Theme.

- Opción ‘Edit Default Layouts’: esta opción permite definir que usted desea generar

también los layouts de iOs para los paneles creados a partir de Templates SD+.

Por lo tanto, seleccionar la opción para modificar los layouts por defecto y marcar la opción

‘iOs, Any Size, Portrait’. Al hacer esto se van a recorrer todos los paneles y WorkWith SD que

estén basados en Templates SD+ y se van a crear los layouts necesarios a partir de los

Templates SD+ correspondientes.

Luego, modificar las siguientes propiedades en el generador de SmartDevices para que

genere solamente iOs (para generar y compilar de forma más rápida):

- Generate Android: False

- Generate iOs: True

- MacHost, MacUser, MacPassword con los valores de la máquina MAC

correspondiente para conectar y hacer las pruebas.

7. SD+ provee varias formas de crear nuevos Templates SD+, ¿cuáles son?

a. Crear un nuevo objeto SD+ template y comenzar desde una pantalla en blanco.

b. Crear un template SD+ a partir de otro template SD+.

c. Crear un template SD+ a partir de un panel SD: esto es útil cuando usted modificó a

mano un panel SD.

P a g e | 18

En este caso es necesario tener un SD+ template nuevo que tenga el mismo formato que el

SD+ template aplicado al List de Clientes pero sin datos (o sea un SD+ template que permita

mostrar una imagen y un título para cada registro), sin la descripción marcada en la imagen a

continuación:

En este caso, lo más simple es identificar cual es el SD+ template aplicado a esta pantalla y

hacer un Save As del correspondiente SD+ template modificándolo. Aunque algunas veces es

más conveniente hacer un nuevo SD+ template a partir de un SD Panel que ya se hubiera

verificado que se está mostrando correctamente de acuerdo a las necesidades.

En la toolbox existen controles que son específicos para los SD+ templates:

Attribute/Variable

Attributes/Variables Region

Text Block

¿Cuál es el propósito de cada uno de ellos?

Defina el nuevo SD+ template con dos layouts para Android Portrait (diferenciando entre un

teléfono y una Tablet) y en la Tablet mostrar las imágenes de mayor tamaño.

P a g e | 19

Parte 3 – User controls: NucliOs e Iguana UI

En la siguiente sección del práctico se utilizarán algunos SD+ templates que generan gráficos

utilizando NucliOs para la aplicación iOs e Iguana UI para la aplicación Android.

1. Además de la información que está siendo almacenada para cada producto, se desea

tener la información del peso y el volumen. Cree los atributos detallados a

continuación:

ProductWeight: Numeric(4.0) y Nullable = Yes.

ProductVolume: Numeric(4.0) y Nullable = Yes.

El gerente de la cadena de supermercados desea tener la información de las ventas

de cada producto. Para simplificar el sistema solamente se salvarán los campos

nuevos en producto que serán la cantidad de ventas y la cantidad vendida para poder

tener un campo fórmula global que calcule el monto ganado (precio x cantidad).

Entonces, cree también los siguientes atributos:

ProductAmountSales: Numeric(4.0) y Nullable= Yes

ProductTotal: Numeric(4.0), Fórmula = ProductAmountSales * ProductPrice;

Luego edite las propiedades de las secciones de la transacción Product en el

WorkWith para SD para que los atributos sean incluidos en el View y Edit del Detail.

¿Cómo lo hace?

Ejecute el aplicativo en el SD para poder navegar a los listados de productos y

adicionar valores a estos nuevos campos.

2. El gerente de la cadena de supermercado necesita analizar los productos que están

siendo comercializados. Entonces desea ver información en formato de gráfico. Cree

los siguientes gráficos en GX (cada uno de ellos es un nuevo SD Panel basando en

algún SD+ template):

2.1. Gráfico de StepArea mostrando los productos y los pesos (weight) para

poder comparar cuales son mucho más pesados que los demás (iOs &

Android).

2.2. Gráfico de StepArea mostrando para cada producto su peso, volumen y

precio para poder analizar cuáles son más complicados de traer según los

datos en cuestión (iOs & Android).

P a g e | 20

2.3. Gráfico de Puntos mostrando para cada producto su precio de forma de

analizar los productos que son más caros, baratos, etc. (solo iOs).

2.4. Gráfico de barras (Bar), mostrando para cada producto su cantidad de

vendas (solo iOs).

2.5. Gráfico de barras (Bar) mostrando para cada producto su precio, cantidad

y cantidad ganada para que el gerente pueda comparar cuales productos

es más conveniente comercializar (iOs y Android).

2.6. Gráfico de Pie (GXPie) que compara los productos las cantidades

obtenidas para cada producto (iOS y Android).

2.7. Gráfico de Área que muestra la misma información mostrada en el SD

Panel ShowHistorialInfo. De esa información es necesario mostrar para

cada fecha las cantidades ganadas por el supermercado (iOs y Android).

2.8. Gráfico de Timeline que muestra la misma información mostrada en el SD

Panel ShowHistorialInfo. De esa información es necesario mostrar como

evolucionaron las cantidades ganadas por el supermercado para que el

gerente pueda tomar decisiones para el futuro.

Luego de crear todos los SD Panels correspondientes debe crear un Dashboard

denominado Charts y llamar a todos ellos desde un Dashboard. Puede hacer Run de este

objeto o criar un nuevo ítem en el Dashboard Supermarket que llame a este nuevo

Dashboard.

3. Todos estos SD+ templates pueden ser modificados y se van a propagar los cambios

automáticamente en los SD Panels que fueron criados a partir de dichos SD+

templates (propiedades del gráfico, Theme del gráfico, etc.):

P a g e | 21

Como fue mencionado anteriormente, por el momento solamente se propagan los

cambios en las propiedades de los controles ya existentes.

También puede modificar directamente en los SD Panels si es un cambio que aplica

solamente a un solo SD Panel en particular.