laboratorio sd

Laboratorio GeneXus X Evolution 3

“Smart Devices Generator”

Laboratorio GeneXus Evolution 3. “Aplicaciones Smart Device” | 2

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.

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-5\GENEXUS”, 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:\labsd\kblabsd. 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

Technology