Actualización a GX Ev3 Smart Devices

Transcripción

1 Actualización a GX Ev3 Smart Devices Ejercicios Prácticos

2 Copyright 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 y GeneXus 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. 2

3 1. LA APLICACIÓN: PASOS PREVIOS DISEÑO Y COMPORTAMIENTO... 6 Órdenes y filtros... 6 Imágenes... 6 Superposición de controles... 8 Opcional ipad: superposición con traslación (trasformation)... 9 Múltiples layouts por fila de un grid Opcional: Múltiples layouts por fila de un grid (carga dinámica) Opcional: Estilo de navegación Opciones de invocación (CallOptions) Opcional: abrir a la derecha para estilo de navegación Split CONVIRTIENDO LA APLICACIÓN A PARCIALMENTE OFFLINE Funcionamiento offline Send: Modificación de datos y sincronización con el server Conflictos por claves duplicadas en la sincronización Receive: Modificación de datos en el server y sincronización Receive: filtros en los datos enviados al dispositivo Avanzado: sesiones favoritas sólo en la base de datos del dispositivo Avanzado: manejo de errores en la sincronización

4 1. La aplicación: pasos previos A lo largo de este práctico se desarrollará una aplicación para trabajar con la agenda de un Evento (congreso/coloquio/encuentro) a realizarse en ciertos días. La realidad debe representar las distintas conferencias (sessions) con sus horas de inicio y fin, salas donde se llevarán a cabo (rooms), oradores o conferencistas (speakers) de distintos países (countries), y los tipos de conferencias (tracks). Permitirá marcar conferencias como favoritas (favoritesessions) así como agendarlas en el calendario del dispositivo o compartirlas, ver los tuits (tweets) relativos al HashTag que se haya definido en nuestro caso, para probar, será #GeneXus, y poder ingresar los propios, así como poder visualizar restaurantes (restaurants) cercanos al lugar del evento, con descuentos. Nota: La aplicación fue desarrollada poniendo el foco en Android, por contar con un emulador apto para toda máquina. Pero también atendimos a ios7, por lo que, si cuenta con un dispositivo con cualquiera de esas plataformas, podrá prototipar en él sin problemas. Deberá instalarse el KBN correspondiente al upgrade 1. 1) Crear una nueva Knowledge Base con ambiente de prototipo C# o ruby (si usa la versión Trial el Environment se configurará automáticamente con generador C#, interfaz Web y DataStore SQL Server). 2) Observe entre las propiedades de las plataformas SD (en el Folder View/Customization/SD Platforms), para Any Android, Blackberry Phone, Any ios, Any ios7, Any Windows 8 : a) La propiedad Theme: con SimpleAndroid, SimpleBlackBerry, SimpleIOS, SimpleIOS7 y SimpleWin8, respectivamente. b) La propiedad Navigation Style: con valor Default 3) Importe el xpz de nombre EventDay_Init.xpz (si está usando el u2; si está con el u1, entonces importe EventDay_Init_u1.xpz). Aquí tendrá implementada buena parte de la aplicación EventDay. Hágalo (le llevará unos minutos) mientras repara en lo siguiente: 4

5 a) Se importan los themes EventGXAndroid, EventGXiOS, EventGXiOS7, y se modifica la propiedad Theme de las plataformas Any Android, Any ios y Any ios7 y de sus herederas para utilizarlos, respectivamente. En estos themes se han agregado clases para ser utilizadas en diferentes objetos de esta aplicación. Se irán indicando oportunamente. Cuando finalice la importación, abra el theme EventGXAndroid, edite las propiedades de la clase TableColoredBlue y asegúrese de que tenga las propiedades de Background Color como siguen. En caso contrario (bug de versiones anteriores a u2), importe también ThemesForSD.xpz. b) El folder view mostrará las transacciones con los Work With for web y for Smart Devices ya creados y personalizados, el dashboard EventDay que será el punto de arranque de la aplicación móvil, y algunos folders como: EventTwitter, con todo para implementar esa parte de la aplicación; PanelsSD, con un panel que muestra los tipos de conferencia y las salas del evento (como vemos a la derecha) y tres paneles que se utilizarán para el práctico. ProcsDP, con procedimientos utilizados, por ejemplo, para obtener dada una session una lista de sus speakers, de sus tracks, si está marcada como favorita para ese dispositivo, y marcarla como favorita, o desmarcarla. También tendrá Data providers para inicializar todas las tablas con datos. En el folder GeneralWeb encontrará el web panel Home que permitirá inicializar con datos todas las tablas. Se ha agregado un folder WWSoltuions que contiene algunos work with solución. 4) Vamos a prototipar en la nube, por lo que la propiedad Deploy to Cloud debe tener el valor YES. a) Si está utilizando la versión Trial, no debe hacer nada, pues esta es la opción por defecto. Si está utilizando la versión full, vaya al Generador Web Default en las Preferences y cambie el valor de la propiedad Deploy to cloud bajo el grupo Execution, pasándola a True. Se le pedirá ingresar su usuario de GXTechnical. Cancele si no cuenta con uno. b) Si desea utilizar el emulador Genymotion, más veloz en máquinas Intel que el del SDK de Android, ábralo (se descarga gratuito de genymotion.com). 5

6 c) Luego haga F5 y Create para crear las tablas en la DB en la nube. Como no hemos especificado Startup object, se abrirá el Developer Menu web, además del KBN en el emulador con la url de la aplicación móvil. En el Developer Menu ejecute el web panel Home y allí presione el ícono para inicializar las tablas con datos. Ingrese a los distintos Work With de este Home para ver cómo quedaron inicializados. d) En el emulador (o en su dispositivo) pruebe la aplicación móvil, para familiarizarse con ella. 2. Diseño y comportamiento Órdenes y filtros Ejecutar el listado de Speakers. Observar que sale ordenado por nombre. Queremos modificar ese orden, para que salga por apellido-nombre (surname-name). También observar que se pueden filtrar los speakers, además de por nombre y apellido, por Curriculum Vitae, Address, . Eliminar estos últimos filtros. Para ello: En el WorkWithDevicesSpeaker, en el List, editar las propiedades del Grid, y ver las del grupo Data Recordar que los órdenes y filtros (comunes y avanzados) ahora se definen a nivel de grid y ya no en la solapa Conditions. Imágenes Ver en ejecución el detalle de un speaker. Si observa el layout en GeneXus, verá que el atributo SpeakerImage está ocupando la primera fila, de 150dips de alto, y la columna ocupa el 100% del ancho. Vea que la imagen se está escalando en ancho y largo para poder ser completamente visualizada, manteniendo las proporciones (las imágenes fuente tienen todas distintos tamaños). Esto es así porque el control SpeakerImage tiene la clase Image (que para la propiedad Scale Type asume el valor default, que es Fit ) 6

7 Deseamos modificar este diseño, para que ahora la imagen ocupe todo el espacio de la celda (es decir, los 150dips de height y el 100% de width) pero sin escalar (es decir, manteniendo el aspecto de la imagen): Para ello: Abrir el theme EventGXAndroid o el EventGXiOS7, y observar que se han definido las clases ImageFill, ImageFillKeepingAspectRatio, ImageFit, ImageTile que únicamente se apartan del default en el valor que sume la propiedad Scale Type. Cámbiele al control atributo SpeakerImage la clase por ImageFillKeepingAspectRatio y pruebe. Hágalo también para la imagen del List: 7

8 Superposición de controles Ahora queremos que en el detalle del speaker, el nombre completo aparezca encima de la imagen, y no debajo: Solución: Mover una fila para abajo el control SpeakerFullName y el SpeakerImage, de manera de que quede libre la primera fila. Insertar allí un control Canvas. Luego, arrastrar SpeakerImage dentro del Canvas y hacer lo mismo con SpeakerFullName. Eliminar la segunda fila de la MainTable, que ya no será necesaria. Observe que todos los controles dentro del Canvas entre sus propiedades habrán agregado las del grupo Absolute position, que son las que le permiten indicar la posición del control respecto al punto (0,0) del canvas (que es el superior, izquierdo). Asígnele los siguientes valores para cada control, pensando qué significan: 8

9 Para que el control SpeakerFullName salga con un fondo, cámbiele su clase por AttributeFontColorWhiteWithBackground que viene en los themes. Nota: recuerde que para poder trabajar con los controles dentro de un canvas, le será necesario utilizar la ventana del Document Outliner. Asimismo puede ocultar con los check boxes algunos de los contoles para poder hacer visibles los que están en las capas más profundas. Puede observar el panel solución Solution_WorkWithDevicesSpeaker del folder WWSolution para comparar. Opcional ipad: superposición con traslación (trasformation) Si cuenta con un ipad, ejecute la aplicación desde el KBN, como se indica en la siguiente imagen: 9

10 Verá que al hacer tap en la imagen Map (punto 3), se desplegará hacia abajo una imagen con un plano del piso donde se encuentra la sala, indicando su ubicación, por encima de la lista de conferencias que siguen quedando debajo (se ha utilizado un control canvas). Si vuelve a hacer tap (punto 4), se desplazará todo hacia arriba, dejando de verse el plano. Para ello, los contoles se desplazan hacia abajo o hacia arriba, haciendo uno de las transformaciones. Para observar la implementación en GeneXus: Vaya al WorkWithDevicesRoom, Detail/Section(Session), y elija ver el layout para ipad. Observe las clases TableMapCollapsed y TableMapExpanded del theme EventGXiOS7, que utilizan como Transformations las clases MapCollapse y MapExpand, bajo el folder Transformations del theme. 10

11 Múltiples layouts por fila de un grid Queremos modificar el List de Speakers, para que el color de fondo sea blanco y violeta el color del Font del nombre, y para que cuando el usuario haga tap sobre uno de los speakers, en lugar de llamar al Detail, se muestre una porción del Currículum Vitae (CV). Para poder invocar al Detail, agregaremos una imagen (arrow): Impleméntelo. Nota: encontrará varias imágenes arrow en la kb; existen las clases TableColoredWhite y AttributeFontColorViolet ; además de la clase AttributeDarkMargin10 que podrá utilizar para que el CV quede a 10 dips del borde izquierdo. Si no desea perder tiempo con el layout, abra el objeto solución Solution_WorkWithDevicesSpeaker, edite el layout Selected del grid, y cópielo en su layout. Solución: Deberá crear otro layout para el grid (clic sobre esquina superior derecha del grid/add new ítem layout) Creamos uno al que le llamamos Selected, personalizando el layout de la siguiente forma: Utilizamos variable &SpeakerCVMini para poder cortar el CV en 145 caracteres, en el evento Load del grid. Dejamos que el control se expanda para ocupar las 4 columnas y le especificamos el AutoGrow en True. Le cambiamos la clase por AttributeDarkMargin10 para que tenga un espacio izquierdo de 10 dips y no quede pegado al borde. Luego, debemos deshabilitar la Default Action del grid, para que cuando se haga tap sobre un elemento, no se haga nada, más que cargar el layout Selected : 11

12 Por último, programamos el evento Load, y el evento Tap asociado a la imagen de la flecha, a la que le hemos llamado arrow : Opcional: Múltiples layouts por fila de un grid (carga dinámica) De todas las conferencias, algunas son Keynotes. Eso está especificado en el atributo SessionIsKeynote. Deseamos que cuando una session es keynote, en el listado de conferencias se agregue su descripción (como se ve en la pantalla que sigue, para la primera conferencia GeneXus and the technology context que es la única keynote de las que se ven en esta pantalla). Cómo se implementa? Nota: Puede utilizar el Solution_WorkWithDevicesSession para copiar el layout keynote si no quiere perder tiempo en el diseño. Solución: Agregar un layout al grid, al que llamamos Keynote, con el siguiente diseño: 12

13 A la variable &SessionDescription le cambiamos la clase a AttributeDarkFont. Luego, en el evento Load agregamos al código que ya había, lo siguiente: If SessionIsKeynote Grid1.ItemLayout =!"Keynote" EndIf If SessionDescription.Length() > 145 &SessionDescription = substr(sessiondescription,1,145) + "..." Else &SessionDescription = SessionDescription EndIf Opcional: Estilo de navegación Modificar el estilo de navegación de la aplicación para Android, para que sea Slide. Observar que automáticamente se abre el List de Sessions, primer ítem del menú y que siempre puede acceder al menú desplazándolo desde la izquierda: 13

14 Solución: en el folder view/sd Platforms, editar las propiedades de Any Android. Allí cambiar la propiedad Navigation Style Si ahora desea que para el caso de usarse estilo de navegación Slide, o cuando el dashboard se utiliza como tabs (opción por defecto para iphones, como se muestra en la imagen de la derecha), en lugar de abrirse automáticamente la lista de Sessions, queremos que se abra una pantalla de bienvenida (observe el panel Welcome en el folder Panels SD), cómo lo implementa? Queremos obtener lo siguiente: 14

15 Solución: programe la invocación al panel Welcome en los eventos Slide.Start y Tabs.Start del objeto main (el dashboard EventDay). Si cuenta con un ipad, observe que allí no se abre el panel de bienvenida. Pruebe utilizar para ios el estilo Cascade, y vea que tampoco se abre el Welcome. Ahora vuelva a dejar en Default los estilos de navegación (para Android y para ios), y observe si se abre en ese caso el panel de bienvenida. Opciones de invocación (CallOptions) Cuando el usuario elige ver la lista de restaurantes hágalo mientras explicamos queremos darle la opción, a través de un botón Map, de que los pueda ver en un mapa. Pero antes de mostrárselos, queremos recordarle que los restaurantes tienen diferentes descuentos para los participantes del Evento. Además, queremos darle la posibilidad de mostrar sólo aquellos restaurantes que se comprometen a que el cliente almuerce en no más del tiempo del que dispone. Verá algo parecido a lo siguiente: 15

16 Observe que la primera pantalla, es el nodo List del Work With de Restaurants; la segunda es un panel de nombre RestaurantFilter (que se estará mostrando no como se ve aquí, sino como una pantalla independiente) y la tercera es un panel de nombre RestaurantsMap, cuyo layout es muy similar al del List de Restaurantes. La diferencia es que este grid tiene en la propiedad control type el valor SD Maps y que filtra en sus conditions por el tiempo del que dispone el cliente para almorzar (recibido por parámetro). Deseamos que la pantalla RestaurantFilter no se abra como una pantalla independiente, sino como una popup. Cómo modifica este comportamiento? Notas: 1. Recuerde que existen los dominios predefinidos CallType y CallTargetSize. 2. Para usar Google Maps en una aplicación Android, debe contar con una API Key de Google. De lo contrario, los mapas no se mostrarán. Para sabe cómo obtenerla, vaya a nuestro wiki: Solución: Event 'Map' Composite RetaurantFilter.CallOptions.Type = CallType.Popup RetaurantFilter.CallOptions.TargetSize = CallTargetSize.Small RetaurantFilter.Call(&timing, &ok) if &ok RestaurantsMap(&timing) endif endcomposite Endevent Si ahora desea que cuando se abra la pantalla con el mapa, al hacer back no se vuelva al List de Restaurantes, sino se vuelva al que lo llamó, cómo lo implementa? Solución: agregue antes de la invocación al panel RestaurantsMap, lo siguiente: RestaurantsMap.CallOptions.Type = CallType.Replace Recuerde que de esa manera se estará sobreescribiendo el stack de invocaciones. 16

17 Opcional: abrir a la derecha para estilo de navegación Split Si está prototipando en un ipad, observe que si desde el dashboard elige ver los tweets, en lugar de abrirse el panel en la propia ventana del dashboard, se abre en la de la derecha. Por qué? Solución: observe que en el dashboard, el evento asociado a los tweets es: Event 'EventTweets' composite EventTweets.CallOptions.Target = "right" EventTweets() endcomposite EndEvent 3. Convirtiendo la aplicación a parcialmente Offline Queremos que la aplicación pueda funcionar sin conexión a internet, salvo la pantalla que muestra los tweets, que queremos que funcione online, debido a la velocidad con la que cambia esa información. No hemos aplicado el GAM, para evitar demoras, por lo que no tenemos información de usuarios. Si la tuviéramos, indicaríamos que solamente aquellos usuarios con rol de administrador tendrían permitidas las pantallas de Detail en modo edit con las operaciones de CRUD (Create/Update/Delete) de Speakers y Restaurants. Para poder probar la sincronización con esas operaciones, las hemos dejado habilitadas sin restricción (lo que en verdad no tiene mucho sentido para un usuario que no sea administrador del backend). Salvo los tweets que serán consultados sólo online, la información cambiará muy poco. No obstante, para realizar las pruebas, le recomendamos que la sincronización, a la hora de recibir los cambios en el dispositivo, sea cada 60 segundos y que la granularidad sea por fila, no por tabla. Implemente estos requerimientos y realice las pruebas que indicamos más abajo. Solución: Observe el valor de la propiedad Connectivity Support para: 1) el Dashboard (que es main): Online 2) para las transacciones que tienen Business Components asociados, para los WorkWithDevices, para el panel EventTweets, y para los data providers y procedimientos del folder ProcsDP: Inherit Para que la aplicación sea Offline, en el Dashboard: Connectivity Support = Offline. Todos los objetos que se encuentren en el árbol de invocaciones de este main, y que tengan el valor Inherit para la propiedad, pasarán a implementarse Offline (serán codificados en java para Android, y en Objective C para ios). Queremos que el panel EventTweets muestre los tweets obtenidos por el servidor, es decir, debe ejecutarse online. Para ello, modificamos la propiedad Connectivity Support = Online. Haga un Rebuild all para que se cree el objeto OfflineDatabase (bajo el Dashboard), los programas de creación de la base de datos local en el dispositivo (tanto en Android como en ios), junto con los porgramas de sincronización y observe: 17

18 Las tablas que se crearán locales en el dispositivo. Por qué aparecen todas las tablas, salvo la de EventPreferences? (ésta no se encuentra en el árbol que parte del dashboard) En el Navigation View, vea por ejemplo que: EventExplore aparece 2 veces: para environment Android y para ObjectiveC. EventTweets aparece 1 vez, con environment Default (C# o ruby, dependiendo de la plataforma que usted eligió para web) Speaker_BC aparece 3 veces: con environment Default (C# o ruby) para cuando se utiliza en la aplicación web, Android y ObjectiveC para cuando se utiliza en la aplicación mobile. Observe también las listas de selección. Modifique las propiedades del grupo Receive. Recuerde que debe compilar el main para que se pueda generar la aplicación offline (código nativo). Para ello, haga Run sobre el dashboard. Funcionamiento offline Observe que cuando se ejecuta la aplicación en el dispositivo, se ejecutan los programas de creación de la DB, y se realiza la primera sincronización (receive) donde se cargan esas tablas con los datos. Estando conectado a internet, vea las Sessions, y luego vea los Tweets. Desconéctese (utilizando el modo Airplane) e intente ver los Tweets. Con las Sessions no tendrá problema. Nota: para usar el modo Airlplane usando genymotion: 18

19 Send: Modificación de datos y sincronización con el server Pruebe modificar el dato de un speaker desde el dispositivo, estando conectado. Observe desde el web panel Home si ese dato fue automáticamente modificado en la base de datos central (observe la propiedad Send Changes del objeto OfflineDatabase). Pruebe ahora desconectar de internet el dispositivo (póngalo en modo aeroplano), y hacer lo mismo (insertando, modificando o eliminando un speaker). Luego conéctese y vea si ocurre inmediatamente la sincronización. Conflictos por claves duplicadas en la sincronización Desconecte el dispositivo de internet. Ahora ingrese un restaurant a través del dispositivo. Observe el ID que se le asignó. Simultáneamente, ingrese un restaurant a través del web panel Home y observe el ID (recuerde que es autonumerado). Conecte el dispositivo a internet, espere 60 segundos y observe qué sucedió con los dos restaurantes ingresados. Qué identificador les quedó? Receive: Modificación de datos en el server y sincronización Actualice algún dato desde el web panel Home, teniendo el dispositivo desconectado de Internet. Luego conéctelo y espere 60 segundos. Observe qué sucede. Receive: filtros en los datos enviados al dispositivo Si ahora desea que en caso de que el dispositivo esté en inglés, se envíen a la base de datos local solamente los datos correspondientes a USA, y en caso contrario, se envíen sólo los de Uruguay? Pruébelo Solución: Tendrá que programar en el objeto OfflineDatabase el evento Start Event Start &language = ClientInformation.Language If &language = "en-us,en" &Country = "USA" else &Country = "Uruguay" endif Endevent Y en las conditions del objeto especificar: CountryName = &country; 19

20 Avanzado: sesiones favoritas sólo en la base de datos del dispositivo Al no tener registro de usuario, las sesiones favoritas sólo se registran por dispositivo. Eso hace innecesario que esa información esté en la base de datos centralizada. Alcanzará con que esté en la base de datos local del dispositivo. Cómo lo consigue? Solución: Es el procedimiento SetFavoriteSession el que ingresa un registro para marcar la sesión como favorita, o para borrarla. Tiene Connectivity Support = Inherit, por lo que, como es invocado desde un evento del cliente (el evento SessionFavorite del WorkWithDevicesSession/Detail/Section(General)) de un objeto que se ejecuta offline (pues hereda este modo del dashboard), entonces el procedimiento se ejecutará offline. Recuerde que si en un objeto offline se ingresa información a la base de datos local a través de new/delete/for each es decir, no a través de un business component, esos cambios no seán llevados en el Send a la base de datos centralizada. Avanzado: manejo de errores en la sincronización Si le sobra tiempo, puede observar los procedimientos GxOnPendingEventFailed (llamado cuando falla un evento en la sincronización; devuelve variable booleana que indica si continuar o no la sincronización) y GXAfterEventReplicator (llamado luego de terminar de procesar todos los eventos), para manejar los errores que puedan haber surgido en la sincronización. 20