Laboratorio desarrollo para Smart Devices

1. Laboratorio GeneXus X Evolution 2
“Smart Devices Generator”

2. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 2
Copyright 1988 - 2013| Artech Consultores S. R. L.
Todos los derechos reservados. Este documento no puede ser reproducido en cualquier medio sin el
consentimiento explícito de Artech Consultores S.R.L. La información contenida en este documento es para uso
personal únicamente.
Marcas Registradas
Artech, GeneXus y GXquery son marcas registradas de Artech Consultores S.R.L. Todas las demás marcas
mencionadas en este documento son propiedad de sus respectivos dueños.

3. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 3
Contenido
Objetivo................................................................................................................................................ 4
Preparación ......................................................................................................................................... 4
Paso 1 – Aplicación Web y Carga de datos Iniciales ...................................................................... 5
Paso 2 – Aplicar Patterns y crear Dashboard ................................................................................. 8
Aplicación del Pattern Work With for Smart Devices ................................................................ 8
Creación del Dashboard ................................................................................................................ 9
Ejecución de la aplicación en Android .......................................................................................11
Paso 3 – Agregando Diseño ............................................................................................................13
Anexo 1 – GeoLocalización (Opcional)..........................................................................................16
Anexo 2 – Ejecutando en el Device (Android) (Opcional)............................................................18
Glosario..............................................................................................................................................19
My First Android Application...................................................................................................19
Applying Work With Pattern for Smart Devices....................................................................19

4. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 4
Objetivo
En este Laboratorio usted dispondrá de una guía paso a paso, para la construcción de una
aplicación simple para Smart Devices, utilizando GeneXus X Evolution 2. El objetivo de este
laboratorio, sin embargo, no es la capacitación, sino la familiarización con la simplicidad del
desarrollo de aplicaciones para dispositivos inteligentes con GeneXus.
Preparación
Para este laboratorio utilizaremos la versión de GeneXus X Evolution 2 Upgrade 3.
El icono para llamarlo se encuentra en el desktop.
Una vez abierto, se enfrentará a una KB de ejemplo, acotada para los fines específicos de
este laboratorio. Dicha KB contendrá una aplicación Web, la cual tomaremos como punto
de partida para crear nuestra versión Smart Devices de la misma.
También utilizaremos SQL Server para el manejo de la base de datos de la aplicación y el
SDK de Android, el cual también esta previamente instalado.

5. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 5
Paso 1 – Aplicación Web y Carga de datos Iniciales
La siguiente será la pantalla de bienvenida con la cual nos encontraremos al abrir en
GeneXus la KB llamada GeneXusMeetingLabSD. Repasemos un poco sus partes antes de
seguir adelante.
1. Toolbar: Sirve para acceder a todas las opciones de la Knowledge Base GeneXus.
2. Knowledge Base Navigator: Es un conjunto de menús contextuales para navegar sobre
objetos, ya sea en su vista por directorios (Folder View), categorías (Category View), o
también para visualizar la lista de últimos cambios (Latest Changes View) y Propiedades del
modelo (Preferences).
3. Principal: Aquí se despliega la Start Page y una pestaña por cada uno de los Objetos
abiertos.

6. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 6
4. Propiedades y toolbox: de controles, objetos y variables que estén seleccionadas.
5. Salida (Output): de las distintas operaciones (especificación, generación, compilación,
etc.).
Como podemos ver en el Folder View del Knowledge Base Navigator, contamos con una
aplicación pre cargada, la cual, como ya mencionamos, esta unicamente implementada
para Web, y sera nuestro trabajo crear su version Smart Devices. A continuación, vamos a
ejecutar la versión Web para ver de que se trata.
En este laboratorio ejecutaremos nuestra aplicación en la nube. Para lograrlo, vamos a
configurar las siguientes Propiedades del generador Ruby en Preferences (en el
Knowledge Base Navigator):
 Deploy to cloud = yes
 Deploy Virtual Directory = LABSD<UsuarioGXtechnical>
 Deploy Server URL = http://apps4.genexus.com
Configurar tambien las propiedades del Data Store:
 Database name = LABSD<UsuarioGXtechnical>
 Server Name = apps4.genexus.com
Luego de hecho esto, hacemos Rebuild All y Run de la aplicación.
Se nos desplegara en el browser una pantalla de inicio como esta:

7. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 7
Hacemos click sobre el vínculo Home y nos lleva a la pantalla inicial para Web:
Crearemos a continuación, una versión simple para Smart Devices de este modelo Web.
Siéntase libre de inspeccionar por unos instantes la aplicación Web si lo desea.

8. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 8
Paso 2 – Aplicar Patterns y crear Dashboard
Contamos con 3 Transacciones: Company, Contact y Meeting, las cuales tienen aplicado
actualmente el pattern Work With Web.
Aplicación del Pattern Work With for Smart Devices
Procederemos entonces a aplicarles el pattern para Smart Devices.
Hacemos doble click sobre la transacción Company (dentro del folder Objects >
Transactions). Se nos abrirá una pestaña para trabajar con dicha transacción. En la parte
inferior de la pantalla veremos la siguiente barra de tareas:
Hacemos click entonces sobre la opción Patterns. Se nos desplegará entonces lo siguiente:
Primero, seleccionamos la pestaña que corresponde a el pattern Work With for Smart
Devices y luego le damos click a la opción Apply this pattern on save.
Finalmente, guardamos los cambios, con el botón Save y repetimos el procedimiento
para las otras dos transacciones. Observe que en el Folder View bajo el nodo de cada
Transacción aparecerán los objetos creados por el pattern correspondiente a cada una de
ellas.

9. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 9
Creación del Dashboard
Crearemos a continuación un objeto Dashboard, que será el punto de entrada para
nuestra aplicación Smart Devices. Para hacerlo, vamos (en la ToolBar) a File > New >
Object (o utilizando el shortcut Ctrl + N).
Seleccionamos el objeto Dashboard de la lista de objetos y le damos un nombre, para este
ejemplo utilizaremos GeneXusMeeting. Luego presionamos sobre el botón Create.
Ya tenemos el punto de entrada a nuestra aplicación, ahora sólo nos resta agregar las
entradas correspondientes al Dashboard para ejecutar los WorkWithSmartDevices que
creamos previamente sobre nuestras transacciones.

10. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 10
Para ello hacemos botón derecho sobre el nodo Items del Dashboard que creamos y
agregamos una nueva Action, tal como lo muestra la siguiente imagen:
Se desplegará el diálogo de selección de objetos, en el cual vamos a tener que buscar los
WorkWithDevices de las tres transacciones que creamos y agregarlos uno por uno, luego
guardamos los cambios con el botón Save.
Luego de agregar los tres WorkWithDevices, nuestro Dashboard debería verse así:

11. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 11
Ya estamos listos para ejecutar nuestra aplicación en Android. Para esto, solo nos resta
especificar el objeto que será el punto de entrada de la aplicación. Esto se hace mediante
la propiedad Startup Object del Ruby Environment:
Ejecución de la aplicación en Android
Hecho esto, ya podemos correr nuestra aplicación, haciendo click en Run (F5).
Se abrirá una instancia del Emulador Android, que servirá para ejecutar nuestra
aplicación Smart Devices. La carga del emulador puede tardar varios minutos,
recomendamos no cerrarlo durante el transcurso del laboratorio.

12. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 12
En el emulador se carga el Startup Object que habíamos configurado previamente: el
Dashboard GeneXusMeeting.
Podemos ver entonces las tres opciones de entrada de nuestra aplicación (Company,
Contact y Meeting), que son las que agregamos como Actions en el Dashboard.

13. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 13
Familiarícese con el Emulador:
- Vea la lista de Contacts, y haga tap sobre una persona en particular.
- Verá los datos de la misma (por ejemplo le mostrará nombre, foto, Id, etc.)
- Presione el botón de back para volver al inicio
Tip: No cierre el Emulador
Paso 3 – Agregando Diseño
Agregaremos ahora un poco de diseño para que nuestra aplicación se vea mejor.
Para esto, volvemos al Dashboard, y seleccionamos el action correspondiente a Company,
y en sus propiedades, le cambiamos la forma que muestra su descripción y su imagen, de
la siguiente forma:
Hacemos lo mismo para las otras dos Actions del Dashboard: Meeting y Contact.

14. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 14
Tener en cuenta que para la property Image, usaremos unas imágenes pre cargadas en la
KB, llamadas: CompanySD, MeetingSD y ContactSD, y las agregaremos de la siguiente
forma:
Ahora, para mejorar aún más la estética de nuestra aplicación, pondremos una Launch
Image para que muestre cuando inicia la misma. También agregaremos un nuevo icono y
título.
Para cambiar el título, hacemos click sobre el nodo Dashboard y en la propiedad Title
modificamos y ponemos Lab SD, como muestra la imagen:
Luego, para agregar el nuevo icono y la imagen de inicio (Launch Image), hacemos click
sobre el objeto Dashboard en el Folder View y vamos a modificar las propiedades: Android
Application Icon y Android Portrait Launch Image, como muestra la imagen a
continuación:

15. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 15
Finalmente, damos RebuildAll y ejecutamos la aplicación para ver los cambios
generados: (F5).

16. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 16
Anexo 1 – GeoLocalización (Opcional)
Agregaremos una funcionalidad nueva a nuestra aplicación, en donde podamos ver en un
mapa, la ubicación de todas las Meetings disponibles.
Para esto debemos crear un nuevo objeto llamado Panel for Smart Devices.
Vamos entonces a: File > New > Object y creamos dicho objeto con el nombre:
MeetingsMap.
Una vez creado, vamos a la barra de herramientas ToolBox y creamos un grid en el layout.
Para lograrlo, hacemos drag & drop de la opción grid, sobre el layout de nuestro panel y se
nos desplegara un dialogo para especificar que atributo/variable vamos a poner en el grid.
Seleccionamos MeetingTitle y luego presionamos el botón OK.

17. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 17
Veremos entonces el grid creado con el atributo dentro. Procedemos a decirle ahora, que
dicho grid lo queremos mostrar como un mapa. Para esto hacemos un click sobre el grid, y
vamos a sus propiedades.
Cambiaremos las propiedades:
 Control Type = SD Maps
 Location Attribute = MeetingGeolocation
Por último, asociamos este nuevo panel creado al Dashboard, igual a como lo hicimos con
los WorkWithDevices y corremos la aplicación (F5).

18. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 18
Anexo 2 – Ejecutando en el Device (Android)
(Opcional)
Si lo desea, y usted posee un dispositivo Android, también puede instalarse la aplicación en
el mismo. Los pasos a seguir son los siguientes:
Volvemos al IDE de GeneXus, y vamos a la ToolBar: View > Show QR Codes.
Esto nos desplegara el browser con el siguiente contenido:
Lo que debemos hacer ahora es simplemente, con nuestro dispositivo, leer el código QR
generado para Android y automáticamente de nos va a descargar el archivo .apk generado
por GeneXus para instalar la aplicación.
¡Gracias por participar!

19. Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 19
Glosario
My First Android Application
http://wiki.gxtechnical.com/commwiki/servlet/hwiki?My+First+Android+Application,
Applying Work With Pattern for Smart Devices
http://wiki.gxtechnical.com/commwiki/servlet/hwiki?Applying+Work+With+Pattern+for+Sm
art+Devices,