Ejercicios de entrenamiento de SmartDevicesPlus

Page |2

Resumen
Resumen ...................................................................................................................................... 2
El Problema.................................................................................................................................. 3
Parte 1 Themes & Templates: conceptos bsicos ........................................................................ 3
Parte 2 Themes & Templates: conceptos avanzados ................................................................. 13
Parte 3 User controls: NucliOs .................................................................................................. 19

Page |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 prctico se usar SmartDevicesPlus para desarrollar el sistema deseado.

Parte 1 Themes & Templates: conceptos basicos

1. Crear una nueva KB de nombre SDPTraining para comenzar con el desarrollo de la
aplicacin. Seleccionar C# como ambiente de prototipo y Web como tipo de aplicacin.
2. Crear la transaccin Category como se muestra a continuacin:

Observaciones:
- Crear los dominios:
o Id: numrico de 6.0, auto numrico
o Name: varchar de 40
3. Crear

la

transaccin

Product

como

se

muestra

continuacin:

Page |4

Observacin:
- Crear el dominio Price: numrico de 6.0 y en la propiedad Prefix agregar el
smbolo de ($)
4. Crear la transaccin Branch, que representa las filiales de la cadena, como se muestra
a continuacin:

5. Crear la transaccin Client que almacene los clientes de la empresa como se muestra
a continuacin:

6. Ahora se desea poder navegar en la aplicacin para crear categoras de

productos, productos, filiales y clientes. Cmo podemos hacerlo en GeneXus?
Solucin: 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 Categora, Producto, Filial y Cliente.

Page |5

Hacer clic derecho en el Dashboard creado Run para ejecutar la aplicacin SD y

adicionar desde el SmartPhone las categoras, productos, filiales y clientes. Usar las
imgenes 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 aplicacin web (haciendo F5 en
GeneXus) para seleccionar las imgenes de los clientes, productos y hacer ms gil la
insercin de datos.

Como puede ver las pantallas no tienen un buen look&feel y tendramos que trabajar
un tiempo para generar pantallas ms atrayentes. Qu podemos hacer para que
estas mismas pantallas se vean lindas y con un look estandarizado en toda la
aplicacin en poco tiempo?
Aplicar SD+ en todos los Work With creados, seleccionando el Theme SD+: FlatBlue
y solamente eligiendo la opcin para generar Android porque en este momento

Page |6

vamos a generar una aplicacin slo para Android. Ms adelante en el prctico,

vamos a generar para iOS.
Se desea generar usando los siguientes SD+ Templates para las transacciones:

Transaccin
Product

SD+ template a seleccionar

Image and amounts

Category
Client

Amount: precio del producto

Title
Image with title and subtitle

Branch

Title: nombre del producto

Subtitle: nombre de la categora
Image: foto del producto

Image: foto del cliente

Title: nombre completo

Subtitle: fecha de nacimiento de los clientes

Locations List
Image: foto de la filial
Title: nombre de la filial
Address: direccin de la filial

Para realizar esto, se debe hacer clic derecho en la transaccin SD+ Select SD+
template:

Page |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:

Page |8

7. Se desea tener un panel que solamente muestre los productos de cierta categora
en especial (Groceries). De cada producto en el listado se desea mostrar
solamente la imagen y la descripcin (tenga en cuenta que la descripcin puede
tener muchas lneas). 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 rpida y con un
look&feel atrayente?
Solucin: 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 ejecucin el usuario va a
visualizar lo mismo en cualquiera de estos paneles. Seleccione el template SD+ que
sea ms adecuado a lo que se desea mostrar en el listado.
Adems, cuando el usuario haga Tap en un registro de esas pantallas se desea
mostrar la informacin detallada de ese producto, de la siguiente forma:

Puede crear un nico panel de detalle para mostrar la informacin luego de realizar
Tap en los dos paneles del listado Productos, de una categora. Este nuevo Panel SD
se llamar ProductGroceriesDetail, y va a ser creado usando el SD+ Template que

Page |9

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

recibir el producto que desea visualizar:
parm(in:ProductId);

Para habilitar la accin Tap sobre un registro de la lista de verduras debe efectuar la
accin 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 recin 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 cdigo 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 continuacin:
Event 'OpenProduct'
ProductGroceriesDetail(&ProductSDTCollection.CurrentItem.ProductId)
Endevent

Realizar estos paneles y luego probar en ejecucin los resultados (para eso adicione
dos paneles al Dashboard con imgenes diferentes, y navegue por los dos realizando
Tap en un producto.)
8. Se desea mostrar informacin en un listado para que el gerente del
supermercado analice, pero esa informacin no est en ninguna tabla, es una
informacin fija (podra ser recibida, por ejemplo, de un Web Service). Cmo
hacemos para mostrar informacin 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 cdigo necesario en el Panel SD para que se cargue a partir del DataProvider
importado.
Luego testear en ejecucin los resultados:

P a g e | 10

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

seccin de la aplicacin, con un estilo diferente al anteriormente usado. En esta
seccin, desea mostrar los productos con estilos diferentes segn su categora.
Se desea visualizar la siguiente informacin para cada producto:
Title: nombre del producto
Subtitle: precio del producto
Image: foto del producto
Long Description: descripcin del producto
Y cada producto segn su categora se visualizar de la siguiente manera:
Category
Groceries

Style
Contact Cards

Electronics

Card with banner image and subtitle

Home

Postal Card, variant 2

El resto de las categoras se deberan mostrar con el estilo Cards.

P a g e | 11

Cmo podemos mostrar diferentes estilos para los registros de un grid en un mismo
listado?
Solucin: Usar el template denominado Cards with multiple layouts, que utiliza la
nueva funcionalidad de GeneXus que permite tener ms 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 cdigo
necesario para habilitar la seleccin del layout correspondiente para cada categora
del producto a cargar.
El cdigo 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

accin/evento (por ejemplo OpenProduct) y marcar esta accin como default action
del grid. Luego es necesario programar el llamado al panel ProductGroceriesDetail.
El cdigo a agregar es el siguiente:
Event 'OpenProduct'
ProductGroceriesDetail(ProductId)
Endevent

P a g e | 12

Luego probar lo desarrollado en ejecucin:

P a g e | 13

Parte 2 Themes & Templates: conceptos

avanzados
En esta seccin del entrenamiento usted va a modificar los Templates SD+ aplicados a un Panel SD,
crear Templates SD+, generar la aplicacin 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 continuacin:

P a g e | 14

Cmo 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+, cmo se modifica el
Template SD+ aplicado? Abra el panel ProductGroceries_Att, acceda a la opcin para
modificar el Template SD+ aplicado a ese Panel y luego cancele. Para qu nos sirve la
opcin: Disassociate from SD+ template?
2. Ahora se desea que para los clientes del listado, en lugar de mostrar los datos de los clientes
como informacin adicional, se muestre el hobby (usando el mismo Template SD+ y
solamente modificando sus propiedades).
Antes:

Ahora:

3. Adems se desea que solamente en modo edicin 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 automticamente (si lo acepta) en todos los Paneles SD y WW SD a los que haya
sido aplicado ese Template. Por el momento esa propagacin se realiza solamente en los
cambios realizados a las propiedades de los controles existentes en ese Template (en las
prximas versiones se va a aadir ms 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 aplicacin solicita que en las pantallas de edicin 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.
Cmo podemos lograrlo? Cul 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 ejecucin navegue a visualizar el listado de productos, acceda a un producto en particular

y luego edtelo.
Qu Template SD+ est siendo aplicado para la seccin general de los productos en los
layouts View y Edit? Visualizar las propiedades que lo definen en el Template SD+
correspondiente
Cmo podra hacer para modificar cierta seccin (en nuestro caso la seccin General del
producto) en el Template SD+ aplicado en el layout de View y Edit.
6. Si usted analiza el Template SD+ SDPDataDisplayForImageWithSection, cules 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 lnea de los paneles ProductGroceries_Att y ProductGroceries_SDT),
qu layouts estn creados? Por qu son diferentes? Cmo 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 modificacin porque se desea generar todo la
aplicacin tambin para iPhone (todas sus pantallas). Cmo hacemos para definir en SD+ que
deseamos generar todo la aplicacin en iOs?

P a g e | 17

Solucin: 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
aplicacin. Si usted desea importar otro Theme, tiene que seleccionar la opcin Tools
SD+ Import SD+ Theme.
- Opcin Edit Default Layouts: esta opcin permite definir que usted desea generar
tambin los layouts de iOs para los paneles creados a partir de Templates SD+.
Por lo tanto, seleccionar la opcin para modificar los layouts por defecto y marcar la opcin
iOs, Any Size, Portrait. Al hacer esto se van a recorrer todos los paneles y WorkWith SD que
estn 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 ms rpida):
-

Generate Android: False

Generate iOs: True
MacHost, MacUser, MacPassword con los valores de la mquina MAC
correspondiente para conectar y hacer las pruebas.

7. SD+ provee varias formas de crear nuevos Templates SD+, cules 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 ttulo para cada registro), sin la descripcin marcada en la imagen a
continuacin:

En este caso, lo ms simple es identificar cual es el SD+ template aplicado a esta pantalla y
hacer un Save As del correspondiente SD+ template modificndolo. Aunque algunas veces es
ms 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 especficos para los SD+ templates:

Attribute/Variable
Attributes/Variables Region
Text Block

Cul es el propsito de cada uno de ellos?

Defina el nuevo SD+ template con dos layouts para Android Portrait (diferenciando entre un
telfono y una Tablet) y en la Tablet mostrar las imgenes de mayor tamao.

P a g e | 19

Parte 3 User controls: NucliOs e Iguana UI

En la siguiente seccin del prctico se utilizarn algunos SD+ templates que generan grficos
utilizando NucliOs para la aplicacin iOs e Iguana UI para la aplicacin Android.
1. Adems de la informacin que est siendo almacenada para cada producto, se desea
tener la informacin del peso y el volumen. Cree los atributos detallados a
continuacin:

ProductWeight: Numeric(4.0) y Nullable = Yes.

ProductVolume: Numeric(4.0) y Nullable = Yes.

El gerente de la cadena de supermercados desea tener la informacin de las ventas

de cada producto. Para simplificar el sistema solamente se salvarn los campos
nuevos en producto que sern la cantidad de ventas y la cantidad vendida para poder
tener un campo frmula global que calcule el monto ganado (precio x cantidad).
Entonces, cree tambin los siguientes atributos:
ProductAmountSales: Numeric(4.0) y Nullable= Yes
ProductTotal: Numeric(4.0), Frmula = ProductAmountSales * ProductPrice;
Luego edite las propiedades de las secciones de la transaccin Product en el
WorkWith para SD para que los atributos sean incluidos en el View y Edit del Detail.
Cmo 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 estn
siendo comercializados. Entonces desea ver informacin en formato de grfico. Cree
los siguientes grficos en GX (cada uno de ellos es un nuevo SD Panel basando en
algn SD+ template):
2.1. Grfico de StepArea mostrando los productos y los pesos (weight) para
poder comparar cuales son mucho ms pesados que los dems (iOs &
Android).
2.2. Grfico de StepArea mostrando para cada producto su peso, volumen y
precio para poder analizar cules son ms complicados de traer segn los
datos en cuestin (iOs & Android).

P a g e | 20

2.3. Grfico de Puntos mostrando para cada producto su precio de forma de

analizar los productos que son ms caros, baratos, etc. (solo iOs).
2.4. Grfico de barras (Bar), mostrando para cada producto su cantidad de
vendas (solo iOs).
2.5. Grfico de barras (Bar) mostrando para cada producto su precio, cantidad
y cantidad ganada para que el gerente pueda comparar cuales productos
es ms conveniente comercializar (iOs y Android).
2.6. Grfico de Pie (GXPie) que compara los productos las cantidades
obtenidas para cada producto (iOS y Android).
2.7. Grfico de rea que muestra la misma informacin mostrada en el SD
Panel ShowHistorialInfo. De esa informacin es necesario mostrar para
cada fecha las cantidades ganadas por el supermercado (iOs y Android).
2.8. Grfico de Timeline que muestra la misma informacin mostrada en el SD
Panel ShowHistorialInfo. De esa informacin 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
automticamente en los SD Panels que fueron criados a partir de dichos SD+
templates (propiedades del grfico, Theme del grfico, 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.
Tambin puede modificar directamente en los SD Panels si es un cambio que aplica
solamente a un solo SD Panel en particular.