laboratorio desarrollo para smart devices

Laboratorio GeneXus X Evolution 2

“Smart Devices Generator”

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.


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


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.


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.


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:


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.


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.


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, 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 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.


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.


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.


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:


Finalmente, damos RebuildAll y ejecutamos la aplicación para ver los cambios

generados: (F5).


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.


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).


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!


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,

laboratorio desarrollo para smart devices

Documents

aplicacin y

aplicacin en android

abrir en genexus

smart devices generator

ejecutando en

para lograrlo

utilizando genexus x

aplicacin web y carga