****************************************************************** * PROGRAMA: GRIDTUTORIAL.cbl * PROPOSITO: Tutorial completo para crear una grilla/lista * con Mobile COBOL * * Este programa demuestra paso a paso como crear una lista * scrolleable con tres columnas: Nombre, Email y Pais * * CONCEPTOS CLAVE QUE SE DEMUESTRAN: * 1. Crear una pagina con layout (Grid) * 2. Agregar un CollectionView para mostrar items * 3. Poblar el CollectionView con datos (ADDITEM) * 4. Definir un Data Template para el formato visual * 5. Usar bindings para conectar datos con controles UI * 6. Manejar eventos de seleccion ****************************************************************** IDENTIFICATION DIVISION. PROGRAM-ID. GRIDTUTORIAL. ENVIRONMENT DIVISION. DATA DIVISION. WORKING-STORAGE SECTION. * Incluir el copybook de Mobile COBOL con todas las funciones API COPY "MOBILECOBOL.WS". ****************************************************************** * SECCION DE DATOS - Aqui definimos la informacion que queremos * mostrar en la grilla ****************************************************************** * Variable para construir argumentos dinamicamente 01 ARG-VALUE PIC X(500). * Contador para el numero total de contactos 01 NUM-CONTACTOS PIC 9(2) VALUE 5. * Subscript para iterar sobre los contactos 01 CONTACTO-IDX PIC 9(2). * Variable para almacenar el indice del item seleccionado 01 IDX-SELECCIONADO PIC 9(10). ****************************************************************** * AREA DE DATOS - Aqui guardamos la informacion de cada contacto * En un sistema real, estos datos vendrian de un archivo o DB ****************************************************************** 01 AREA-CONTACTOS. 02 DATOS-RAW. * Contacto 1 03 FILLER PIC X(30) VALUE "Juan Perez". 03 FILLER PIC X(40) VALUE "juan.perez@empresa.com". 03 FILLER PIC X(20) VALUE "Argentina". * Contacto 2 03 FILLER PIC X(30) VALUE "Maria Gonzalez". 03 FILLER PIC X(40) VALUE "maria.gonzalez@empresa.com". 03 FILLER PIC X(20) VALUE "Mexico". * Contacto 3 03 FILLER PIC X(30) VALUE "Carlos Rodriguez". 03 FILLER PIC X(40) VALUE "carlos.rodriguez@empresa.com". 03 FILLER PIC X(20) VALUE "Espa¤a". * Contacto 4 03 FILLER PIC X(30) VALUE "Ana Martinez". 03 FILLER PIC X(40) VALUE "ana.martinez@empresa.com". 03 FILLER PIC X(20) VALUE "Uruguay". * Contacto 5 03 FILLER PIC X(30) VALUE "Pedro Silva". 03 FILLER PIC X(40) VALUE "pedro.silva@empresa.com". 03 FILLER PIC X(20) VALUE "Brasil". * REDEFINES permite acceder a los datos de forma estructurada 02 TABLA-CONTACTOS REDEFINES DATOS-RAW. 03 CONTACTO-ENTRY OCCURS 5 TIMES. 05 CONTACTO-NOMBRE PIC X(30). 05 CONTACTO-EMAIL PIC X(40). 05 CONTACTO-PAIS PIC X(20). ****************************************************************** * PROCEDURE DIVISION - Aqui comienza la logica del programa ****************************************************************** PROCEDURE DIVISION. MAIN-LOGIC. ************************************************************** * PASO 1: Crear la pagina principal con la grilla ************************************************************** PERFORM CREAR-PAGINA-PRINCIPAL. ************************************************************** * PASO 2: Entrar en el loop de eventos * Este loop mantiene la aplicacion activa esperando * interacciones del usuario ************************************************************** PERFORM MANEJAR-EVENTOS UNTIL MC-EVENT = "QUIT". GOBACK. ****************************************************************** * MANEJAR-EVENTOS * Loop principal que captura y procesa eventos del usuario ****************************************************************** MANEJAR-EVENTOS. * GETEVENT espera y retorna el siguiente evento CALL MC USING GETEVENT MC-EVENTINFO. * Evaluar que tipo de evento ocurrio EVALUATE MC-EVENT WHEN "SelectionChanged" PERFORM MOSTRAR-DETALLE-CONTACTO END-EVALUATE. ****************************************************************** * CREAR-PAGINA-PRINCIPAL * Aqui construimos toda la estructura visual de la grilla ****************************************************************** CREAR-PAGINA-PRINCIPAL. ************************************************************** * PASO 1: Crear la pagina * Toda aplicacion Mobile COBOL empieza creando una pagina ************************************************************** CALL MC USING CREATEPAGE "Name=PaginaPrincipal|". ************************************************************** * PASO 2: Agregar un Grid para organizar el layout * Un Grid nos permite dividir la pantalla en filas y columnas * En este caso usamos: * - Fila 1: Auto (tama¤o automatico) para el titulo * - Fila 2: Star (expande) para la lista ************************************************************** PERFORM AGREGAR-GRID-LAYOUT. ************************************************************** * PASO 3: Agregar el titulo de la pantalla ************************************************************** PERFORM AGREGAR-TITULO. ************************************************************** * PASO 4: Agregar el CollectionView (la grilla en si) * CollectionView es el control que muestra listas scrolleables ************************************************************** PERFORM AGREGAR-COLLECTION-VIEW. ************************************************************** * PASO 5: Poblar el CollectionView con datos * IMPORTANTE: Los items deben agregarse ANTES del template ************************************************************** PERFORM AGREGAR-ITEMS-A-LISTA. ************************************************************** * PASO 6: Definir como se ve cada item (Data Template) * El template define la estructura visual de cada fila ************************************************************** PERFORM AGREGAR-TEMPLATE-A-LISTA. ************************************************************** * PASO 7: Mostrar la pagina ************************************************************** PERFORM MOSTRAR-PAGINA. ****************************************************************** * AGREGAR-GRID-LAYOUT * Crea la estructura de layout usando un Grid de 2 filas ****************************************************************** AGREGAR-GRID-LAYOUT. * Crear el contenedor Grid CALL MC USING ADDCHILD "Type=Grid;Name=GridPrincipal|". * Definir Fila 1: Auto (se ajusta al contenido - para el titulo) CALL MC USING ADDCHILD "Type=RowDefinition;Height=GridLength.Auto|". * Definir Fila 2: Star (ocupa el espacio restante - para la lista) CALL MC USING ADDCHILD "Type=RowDefinition;Height=GridLength.Star|". ****************************************************************** * AGREGAR-TITULO * Agrega un Label con el titulo de la pantalla en la fila 0 ****************************************************************** AGREGAR-TITULO. * Crear Label con texto y tama¤o de fuente CALL MC USING ADDCHILD "Type=Label;FontSize=28;Text=Directorio de Contactos|". * Hacerlo negrita y centrado CALL MC USING SETPROP "FontAttributes=Bold|". CALL MC USING SETPROP "HorizontalTextAlignment=Center|". CALL MC USING SETPROP "Padding=20|". * NOTA: Por defecto, el Label va a Grid.Row=0 * Si quisieramos ponerlo explicitamente en otra fila: * CALL MC USING DOMETHODNORET * "Name=GridPrincipal;Method=SetRow;ObjName=TituloLabel; * RowNum=0|". ****************************************************************** * AGREGAR-COLLECTION-VIEW * Este es el control que mostrara la lista scrolleable ****************************************************************** AGREGAR-COLLECTION-VIEW. ************************************************************** * Crear el CollectionView * - Name: le damos un nombre para referenciarlo despues * - SelectionMode: permite seleccionar items (Single o Multiple) ************************************************************** CALL MC USING ADDCHILD "Type=CollectionView;Name=ListaContactos|". * Configurar que permita seleccion de un solo item CALL MC USING SETPROP "SelectionMode=Single|". * Registrar el evento que se dispara cuando se selecciona un item CALL MC USING SETPROP "Event=SelectionChanged|". ************************************************************** * Posicionar el CollectionView en la Fila 1 del Grid * Usamos DOMETHODNORET para llamar al metodo SetRow del Grid ************************************************************** CALL MC USING DOMETHODNORET "Name=GridPrincipal;Method=SetRow; - "ObjName=ListaContactos;RowNum=1|". ****************************************************************** * AGREGAR-ITEMS-A-LISTA * Aqui poblamos el CollectionView con los datos * Cada item se crea como un ExpandoObject con propiedades ****************************************************************** AGREGAR-ITEMS-A-LISTA. ************************************************************** * Iterar sobre todos los contactos en nuestra tabla ************************************************************** PERFORM VARYING CONTACTO-IDX FROM 1 BY 1 UNTIL CONTACTO-IDX > NUM-CONTACTOS ************************************************************** * Para cada contacto, construir un string con sus propiedades * Formato: Type=ExpandoObject;Prop1=Valor1;Prop2=Valor2| * * Las propiedades que definimos aqui (Nombre, Email, Pais) * son las que luego usaremos en el Binding del template ************************************************************** MOVE SPACE TO ARG-VALUE STRING "Type=ExpandoObject" ";Nombre=" CONTACTO-NOMBRE (CONTACTO-IDX) ";Email=" CONTACTO-EMAIL (CONTACTO-IDX) ";Pais=" CONTACTO-PAIS (CONTACTO-IDX) "|" DELIMITED BY SIZE INTO ARG-VALUE ************************************************************** * ADDITEM agrega el item al CollectionView más reciente ************************************************************** CALL MC USING ADDITEM ARG-VALUE END-PERFORM. ****************************************************************** * AGREGAR-TEMPLATE-A-LISTA * Define como se visualiza cada item en la lista * Esto es lo que da el formato "grilla" con columnas ****************************************************************** AGREGAR-TEMPLATE-A-LISTA. ************************************************************** * PASO 1: Iniciar la definicion del template * Todo lo que agreguemos despues de esto hasta ENDTEMPLATE * define la apariencia de cada item ************************************************************** CALL MC USING CREATETEMPLATE. ************************************************************** * PASO 2: Crear un Frame para cada item * Esto da un fondo y bordes a cada fila ************************************************************** CALL MC USING ADDCHILD "Type=Frame;CornerRadius=10;Padding=12;Margin=5|". CALL MC USING SETPROP "BackgroundColor=#F5F5F5|". ************************************************************** * PASO 3: Dentro del Frame, crear un Grid de 3 columnas * Esto nos permite organizar Nombre, Email y Pais en columnas ************************************************************** CALL MC USING ADDCHILD "Type=Grid|". * Definir 3 columnas con anchos proporcionales * Star = toma espacio proporcional * 2.5Star = toma 2.5 veces el espacio de Star CALL MC USING ADDCHILD "Type=ColumnDefinition;Width=2.5*|". CALL MC USING ADDCHILD "Type=ColumnDefinition;Width=3*|". CALL MC USING ADDCHILD "Type=ColumnDefinition;Width=1.5*|". ************************************************************** * PASO 4: Agregar Labels para cada columna ************************************************************** * COLUMNA 1: Nombre CALL MC USING ADDCHILD "Type=Label;FontSize=16|". ************************************************************** * BINDING CRÃTICO: * "Binding=Text to Nombre" significa: * - Toma la propiedad "Text" de este Label * - Asignale el valor de la propiedad "Nombre" del item * El "Nombre" viene del ExpandoObject que creamos en ADDITEM ************************************************************** CALL MC USING SETPROP "Binding=Text to Nombre|". CALL MC USING SETPROP "FontAttributes=Bold|". CALL MC USING SETPROP "VerticalTextAlignment=Center|". * Posicionar en columna 0 CALL MC USING SETPROP "Grid.Column=0|". * COLUMNA 2: Email CALL MC USING ADDCHILD "Type=Label;FontSize=14|". CALL MC USING SETPROP "Binding=Text to Email|". CALL MC USING SETPROP "VerticalTextAlignment=Center|". CALL MC USING SETPROP "TextColor=#555555|". * Posicionar en columna 1 CALL MC USING SETPROP "Grid.Column=1|". * COLUMNA 3: Pais CALL MC USING ADDCHILD "Type=Label;FontSize=14|". CALL MC USING SETPROP "Binding=Text to Pais|". CALL MC USING SETPROP "VerticalTextAlignment=Center|". CALL MC USING SETPROP "HorizontalTextAlignment=End|". CALL MC USING SETPROP "TextColor=#0066CC|". * Posicionar en columna 2 CALL MC USING SETPROP "Grid.Column=2|". ************************************************************** * PASO 5: Cerrar los contenedores ************************************************************** * Cerrar el Grid interno (el de 3 columnas) CALL MC USING ENDCONTAINER. * Cerrar el Frame CALL MC USING ENDCONTAINER. ************************************************************** * PASO 6: Finalizar el template ************************************************************** CALL MC USING ENDTEMPLATE. ****************************************************************** * MOSTRAR-DETALLE-CONTACTO * Se ejecuta cuando el usuario selecciona un item de la lista ****************************************************************** MOSTRAR-DETALLE-CONTACTO. ************************************************************** * Obtener el indice del item seleccionado (base 0) ************************************************************** CALL MC USING GETPROP "Name=ListaContactos;Property=SelectedIndex|" IDX-SELECCIONADO. ************************************************************** * Ajustar el indice para COBOL (base 1) ************************************************************** ADD 1 TO IDX-SELECCIONADO. ************************************************************** * Crear una nueva pagina de detalle ************************************************************** CALL MC USING CREATEPAGE "Name=PaginaDetalle|". * Agregar un StackLayout vertical con espaciado CALL MC USING ADDCHILD "Type=StackLayout;Padding=30;Spacing=20|". * Titulo de la pagina de detalle CALL MC USING ADDCHILD "Type=Label;FontSize=24;Text=Detalle del Contacto|". CALL MC USING SETPROP "FontAttributes=Bold|". CALL MC USING SETPROP "HorizontalTextAlignment=Center|". * Separador visual CALL MC USING ADDCHILD "Type=BoxView;HeightRequest=2;BackgroundColor=#CCCCCC|". ************************************************************** * Mostrar los datos del contacto seleccionado ************************************************************** * Campo Nombre MOVE SPACE TO ARG-VALUE. STRING "Type=Label;FontSize=18;Text=Nombre: " CONTACTO-NOMBRE (IDX-SELECCIONADO) "|" DELIMITED BY SIZE INTO ARG-VALUE. CALL MC USING ADDCHILD ARG-VALUE. * Campo Email MOVE SPACE TO ARG-VALUE. STRING "Type=Label;FontSize=16;Text=Email: " CONTACTO-EMAIL (IDX-SELECCIONADO) "|" DELIMITED BY SIZE INTO ARG-VALUE. CALL MC USING ADDCHILD ARG-VALUE. CALL MC USING SETPROP "TextColor=#0066CC|". * Campo Pais MOVE SPACE TO ARG-VALUE. STRING "Type=Label;FontSize=16;Text=País: " CONTACTO-PAIS (IDX-SELECCIONADO) "|" DELIMITED BY SIZE INTO ARG-VALUE. CALL MC USING ADDCHILD ARG-VALUE. * Boton para volver CALL MC USING ADDCHILD "Type=Button;Text=Volver a la Lista|". CALL MC USING SETPROP "BackgroundColor=#0066CC|". CALL MC USING SETPROP "TextColor=White|". CALL MC USING SETPROP "CornerRadius=8|". CALL MC USING SETPROP "Margin=20,40,20,0|". CALL MC USING SETPROP "Event=Clicked|". * Cerrar el StackLayout CALL MC USING ENDCONTAINER. * Mostrar la pagina de detalle PERFORM MOSTRAR-PAGINA. ****************************************************************** * RUTINAS AUXILIARES REUTILIZABLES ****************************************************************** MOSTRAR-PAGINA. CALL MC USING SHOWPAGE. ****************************************************************** * RESUMEN DE CONCEPTOS CLAVE: * * 1. ESTRUCTURA BASICA: * - CREATEPAGE crea una pagina * - ADDCHILD agrega controles * - SHOWPAGE muestra la pagina * * 2. COLLECTIONVIEW: * - Control ideal para listas scrolleables * - Soporta seleccion de items * - Dispara eventos como SelectionChanged * * 3. EXPANDOOBJECT: * - Tipo especial para items de lista * - Las propiedades que defines (Nombre, Email, Pais) * se usan en los Bindings * * 4. DATA TEMPLATE: * - Define el aspecto visual de cada item * - Se crea con CREATETEMPLATE...ENDTEMPLATE * - Usa Bindings para conectar datos con UI * * 5. BINDING: * - Formato: "Binding=PropiedadUI to PropiedadDatos" * - Ejemplo: "Binding=Text to Nombre" * - Conecta automaticamente los datos del ExpandoObject * con las propiedades de los controles UI * * 6. GRID LAYOUT: * - Permite organizar controles en filas y columnas * - RowDefinition y ColumnDefinition definen tama¤os * - Auto, Star, numero fijo son opciones de tama¤o * * 7. EVENTOS: * - GETEVENT captura eventos del usuario * - MC-EVENT contiene el tipo de evento * - MC-EVENT-CONTROL contiene el nombre del control * ******************************************************************