Laboratorio SD

Laboratorio GeneXus X Evolution 3
“Smart Devices Generator”

Copyright 1988 - 2014| 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.
Laboratorio GeneXus Evolution 3. “Aplicaciones Smart Device” | 2
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.

Contenido
Laboratorio GeneXus X Evolution 3 ...................................................................................... 1
Contenido .............................................................................................................................. 3
Objetivo ................................................................................................................................. 4
Preparación ........................................................................................................................... 4
Creando la Base de Conocimiento ................................................................................. 4
Paso 1 – Aplicación Web y Carga de datos Iniciales ............................................................. 6
Paso 2 – Aplicar Patterns y crear Dashboard ........................................................................ 9
Aplicación del Pattern Work With for Smart Devices .......................................................... 9
Creación del Dashboard .................................................................................................. 10
Ejecución de la aplicación en Android .............................................................................. 12
Paso 3 – Agregando Diseño ................................................................................................ 14
Anexo 1 – Ejecutando en el Device (Android) (Opcional) .................................................... 18
Lo que debemos hacer ahora es simplemente, con nuestro dispositivo, leer el código QR
generado para Android y automáticamente se nos va a descargar el archivo .apk generado
por GeneXus para instalar la aplicación. ............................................................................. 18
Nota: Debe tener permitido la instalación de aplicación de origen desconocido. Esto se puede
habilitar usualmente en la sección de seguridad de Ajustes. ............................................... 18
Anexo 2 – Múltiples Layouts per Row (Opcional) ................................................................ 19
Anexo 3 – SD Image Gallery (Opcional) .............................................................................. 21
¡Gracias por participar! ........................................................................................................ 24
Glosario ............................................................................................................................... 24
My First Android Application ......................................................................................... 24
Applying Work With Pattern for Smart Devices ............................................................. 24
Multiple Layouts per Row ............................................................................................. 24
Using SD Image Gallery Control ................................................................................... 24

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 3. 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 3 Upgrade 2.
El icono para llamarlo se encuentra en el desktop.
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.
Creando la Base de Conocimiento
Como primer paso, crear una nueva Base de Conocimiento configurando lo siguiente:
 Name = “LabSD<NroUsuario>” El nro de Usuario lo encuentra en el monitor.
 Directory = C:Models
 Prototyping Environment = C# Environment
 En Advanced, configurar Server = “SERVER2012-5GENEXUS”, y marcar la opción “Use
Windows NT integrated Security”

Ahora importaremos los objetos de la aplicación web en la que nos basaremos para realizar nuestra
aplicación para Smart Devices. Vamos a Knowledge Manager>Import, hacemos clic en el boton de
Examinar […] y seleccionamos el archivo GX24LabSD.xpz que se encuentra en G:labsdkblabsd.
Luego hacemos clic en Import >>.
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.

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 “LabSD” + Numero Maquina. Repasemos un poco sus partes antes de seguir adelante.
1. Toolbar: Proporciona acceso 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.
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, está unicamente implementada para Web, y será
nuestro trabajo crear su versión 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 .Net en Preferences (en el Knowledge Base Navigator):
 Deploy to cloud = yes
 Deploy Virtual Directory = LABSD<UsuarioGXtechnical>
 Deploy Server URL = http://apps5.genexus.com
Configurar tambien las propiedades del Data Store:
 Database name = LABSD<UsuarioGXtechnical>
 Server Name = apps5.genexus.com
Luego de hecho esto, hacemos Rebuild All y Run de la aplicación.
Se desplegara en el browser una pantalla de inicio como la siguiente:

Hacemos clic 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.

Paso 2 – Aplicar Patterns y crear Dashboard
Contamos con 3 Transacciones: Country, Speaker y Session, 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 clic sobre la transacción Country (dentro del folder Root Module > 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 clic entonces sobre la opción Patterns. Se nos desplegará entonces lo siguiente:
Primero, seleccionamos la pestaña que corresponde al pattern Work With for Smart Devices y luego
le damos clic 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.

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.
Para ello hacemos botón derecho sobre el nodo Items del Dashboard que creamos y agregamos una
nueva Action (Add>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í:

Ya estamos listos para ejecutar nuestra aplicación en Android. Para esto, solo nos resta especificar
que el Dashboard GeneXusMeeting será el punto de entrada de la aplicación. Esto se hace mediante
la propiedad Startup Object del .Net Environment:
Ejecución de la aplicación en Android
Hecho esto, ya podemos correr nuestra aplicación, haciendo clic 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.

En el emulador se carga el Startup Object que habíamos configurado previamente: el Dashboard
GeneXusMeeting.
(Cambio imagen)
Podemos ver entonces las tres opciones de entrada de nuestra aplicación (Country, Speaker y Session),
que son las que agregamos como Actions en el Dashboard.

Familiarícese con el Emulador:
- Vea la lista de Speakers, 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 Country, 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: Session y Speaker.
Tener en cuenta que para la property Image, usaremos unas imágenes pre cargadas en la KB,
llamadas: CountriesSD, SpeakersSD y SessionsSD, y las agregaremos de la siguiente forma:

Cambiaremos la información que se mostrara en el List de WorkWithDevicesSpeaker. Sustituimos
SpeakerName por SpeakerFullName y agregamos el atributo CountryName debajo para mostrar el
país del Speaker. Al insertar un atributo se muestran Labels con los nombres de los mismos. Para
quitarlas setear la propiedad Label Position en None.
Para mejorar la estética haremos que la foto del Speaker ocupe ambas filas. Ingresamos a las
propiedades de la imagen y para la propiedad Row Span, definimos el valor 2.
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 clic 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 clic 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:

Finalmente, damos Rebuild All y ejecutamos la aplicación para ver los cambios generados:
(F5).

Anexo 1 – 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 se nos va a descargar el archivo .apk generado por GeneXus para
instalar la aplicación.
Nota: Debe tener permitido la instalación de aplicación de origen desconocido. Esto se puede habilitar
usualmente en la sección de seguridad de Ajustes.

Anexo 2 – Múltiples Layouts per Row (Opcional)
Se quiere que cuando el usuario hace tap sobre un Speaker en el List, en lugar de ir directamente a
mostrar la información detallada del Speaker, se amplíe la propia línea, mostrando allí el Curriculum
Vitae.
Solución:
Accedemos a la sección List de WorkWithDevicesSpeaker. Hacemos clic en la flecha que se encuentra
en la parte superior derecha del Grid. Seleccionamos Add New Item Layout y le definimos el nombre
‘Select’.
En este nuevo layout insertaremos el atributo SpeakerCVMini debajo de la SpeakerImage. Le
setearemos las propiedades Label Position = None para que no se muestre la etiqueta y la propiedad
Col Span = 3 para que se extienda por 3 columnas.
Al Grid también le modificaremos las propiedades Default Selected Item Layout definiendo Select
como opción y la propiedad Default Action = <none>
Ahora seleccionamos la tabla dentro del Grid y definimos Columns Style = 64dip;85%;15%

Para ir al detalle, el usuario deberá hacer tap sobre una imagen de flecha hacia la derecha
(arrow_right). ¿Qué debe realizar para lograr dicho comportamiento?
Solución:
Hacemos clic derecho sobre la SpeakerImage que acabamos de colocar y elegimos Go to Event > Tap,
en el evento asociado insertar la siguiente línea de código (esta nos llevara al detalle del Speaker):
WorkWithDevicesSpeaker.Speaker.Detail(SpeakerId)
Para finalizar, ejecutamos la aplicación para ver los cambios generados: (F5).

Anexo 3 – SD Image Gallery (Opcional)
Crearemos un nuevo objeto de tipo Panel for Smart Devices. Vamos entonces a: File > New > Object
y creamos dicho objeto con el nombre: ImageGalleryCountry.
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 desplegará
un diálogo para especificar que atributo/variable vamos a poner en el Grid.
Seleccionamos CountryFlag y luego presionamos el botón OK.
Veremos entonces el Grid creado con el atributo dentro. Procedemos a indicarle ahora, que dicho Grid
lo queremos mostrar como un galería de imágenes. Para esto hacemos un clic sobre el Grid, y vamos
a sus propiedades.
Cambiaremos las propiedades:
 Control Type = SD Image Gallery
 Data Attribute = CountryFlag
 Grid Behavior = Show Full Image
 Enable Share Action = True

Paso 1
Asociamos este evento dentro del WorkWithDevicesCountry para poder invocarlo. Para esto nos
posicionamos en el nodo List y arrastramos desde el Toolbox un Button a la Application Bar y
nombramos al Evento “CountryFlags”.

Paso 2
Doble Clic al botón, o clic derecho>Go To Event, nos enviara al evento asociado a dicho botón. Aquí
llamaremos al panel que acabamos de crear con el siguiente código:
Event 'CountryFlags'
ImageGalleryCountry.Call()
Endevent
Para poder visualizar el panel anteriormente creado, damos clic en el botón menú del emulador, el
cual nos mostrará el botón que invocará a dicho panel.
Finalmente, damos Rebuild All y ejecutamos la aplicación para ver los cambios generados:
(F5).

¡Gracias por participar!
Glosario
My First Android Application
http://wiki.genexus.com/commwiki/servlet/hwikibypageid?14555
Applying Work With Pattern for Smart Devices
Multiple Layouts per Row
Using SD Image Gallery Control

Laboratorio SD

Más contenido relacionado

La actualidad más candente

Destacado

Similar a Laboratorio SD

Más de GeneXus

Último

Laboratorio SD