Laboratorio desarrollo para Smart Devices
Upcoming SlideShare
Loading in...5
×
 

Laboratorio desarrollo para Smart Devices

on

  • 1,239 views

Laboratorio desarrollo para Smart Devices

Laboratorio desarrollo para Smart Devices

Statistics

Views

Total Views
1,239
Views on SlideShare
1,172
Embed Views
67

Actions

Likes
0
Downloads
47
Comments
0

1 Embed 67

http://www5.genexus.com 67

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Laboratorio desarrollo para Smart Devices Laboratorio desarrollo para Smart Devices Document Transcript

  • 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.
  • 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
  • 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.
  • 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.
  • 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:
  • 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.
  • 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.
  • 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.
  • 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í:
  • 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.
  • 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.
  • 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.
  • 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:
  • Laboratorio GeneXus X Evolution 2. “Smart Devices Generator” | 15 Finalmente, damos RebuildAll y ejecutamos la aplicación para ver los cambios generados: (F5).
  • 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.
  • 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).
  • 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!
  • 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,