En esta ventana se utilizará un nuevo control (TabControl), y el DropDown DataWindow.

Transcripción

1 40. Crear una ventana como la siguiente: En esta ventana se utilizará un nuevo control (TabControl), y el DropDown DataWindow. El Drop Down DataWindow es útil en caso de que se requiera hacer referencia a datos de otras tablas. Ultima Fila Siguiente Fila Anterior Fila Primera Fila Ing. Ismael Castañeda Fuentes Página 27

2 La estructura de las páginas Departamentos y Niveles es la misma En la barra de herramientas: Botón Window New Con el botón derecho sobre la nueva ventana, o con doble click, modificar las propiedades de la ventana: Window Type: Popup. Las opciones Resizable y Maximize Box no deberán seleccionarse Insertar un control Tab en la ventana y darle el tamaño adecuado. Seleccionar el control insertado y hacer click con el botón derecho del mouse en el área superior que no está ocupada por el TabPage (Cada una de las páginas del control Tab recibe este nombre). Name: tab_actualizaciones Seleccionar Bold Selected Text (El texto de la página seleccionada se muestra en negrilla) OK Hacer click con el botón derecho dentro de la primera página (la que tiene el texto none) y elegir propiedades: Name: tabpage_empleados Tab Text: Empleados OK Insertar los demás controles en la ventana (como lo muestra la figura) Un DataWindow control (se usa el botón que se encuentra en la barra de herramientas junto con los demás controles. No confundir con el boton de DataWindow Object que se encuentra en la barra de herramientas Ing. Ismael Castañeda Fuentes Página 28

3 superior o PowerBar).En las propiedades del nuevo DataWindow elegir name: dw_act_empleados y seleccionar VscrollBar. Los botones Nuevo (cb_nuevo), Borrar (cb_borrar), Actualizar (cb_actualizar), Cargar Datos (cb_cargar). Los botones para desplazarse por las filas del DataWindow: Primero (cb_primero), Siguiente (cb_siguiente), Anterior (cb_anterior), Ultimo (cb_ultimo) Guardar el trabajo: File Save. El nombre de la nueva ventana será w_actualizaciones Modificar la opción actualizar del menú, para que se abra la nueva ventana: En la barra de herramientas oprimir el botón Menu. Seleccionar el menú ya realizado (p.ej. m_principal) OK Seleccionar la opción Actualizar en la ventana de edición del menú. Oprimir el botón Script en la barra de herramientas Escribir open(w_actualizaciones) Cerrar la ventana del editor de texto y la ventana de edición del menú. Guardar las modificaciones hechas al menú Correr la aplicación y probar el funcionamiento del menú y la nueva ventana Crear un DataWindow Object en el que se relacionen el código y nombre de los departamentos. (se usa el botón DataWindow de la barra de herramientas PowerBar) En la ventana Select DataWindow: New En la ventana New DataWindow: Ing. Ismael Castañeda Fuentes Página 29

4 Data Source SQL Select Presentation Style Grid En la ventana Select Tables seleccionar la tabla departamento. Open Seleccionar las columnas código de departamento y nombre de departamento. Pasar a diseño de salida: En la barra de herramientas es el ícono que dice "SQL" Colocar los encabezados apropiados. File Save. En la ventana Save DataWindow: Name: ddd_depto (será utilizado como DropDownDatraWindow) OK Cerrar la ventana de edición del DataWindow Crear un DataWindow Object para actualizar los datos relacionados con los empleados. En la ventana Select DataWindow: New En la ventana New DataWindow: Data Source SQL Select Presentation Style Tabular En la ventana Select Tables seleccionar la tabla Empleado. Open Seleccionar todas las columnas de la tabla empleado. Pasar a diseño de salida: En la barra de herramientas es el ícono que dice "SQL" Elegir Properties en el menu poup (con el botón derecho sobre el DataWindow): En la página General: Color ButtonFace OK Para los encabezados de todas las columnas: Elegir Properties en el menu poup (con el botón derecho): Ing. Ismael Castañeda Fuentes Página 30

5 En la página General: Border 3D Raised. Text modificar el texto En la página Font: Background ButtonFace. OK Para la columna dept_id (código de departamento): Elegir Properties en el menu poup (con el botón derecho): En la página General: Border 3D Lowered. En la página Font: Background WndBkrnd. En la página Edit: - Style DropDownDW - DataWindow ddd_depto (el que se creó en el paso ) - Display Column dept_nombre (nombre de departamento) - Data Column dept_id (códigode departamento) - Wdth of DropDown (ancho del DropDown) 300% - Seleccionar VscrollBar OK File Save. En la ventana Save DataWindow: Name: d_act_empleados OK Cerrar la ventana de edición del DataWindow Seleccionar el DataWindow dw_act_empleados en la página Empleados. Hacer click con el botón derecho y seleccionar la opción properties del menú poup. DataWindow Object Name browse... d_act_empleados (el que se OK creó en ) Para agregar una nueva página al control Tab, se hace click con el botón Ing. Ismael Castañeda Fuentes Página 31

6 derecho sobre el control. En el menú popup Insert Tab Page Hacer click con el botón derecho dentro de la nueva página (la que tiene el texto none) y elegir properties en el menú poup: Name: tabpage_actividades Tab Text: Actividades OK Insertar los demás controles en la ventana (como lo muestra la figura) Un DataWindow control. En las propiedades del nuevo DataWindow elegir name: dw_act_actividades y seleccionar VscrollBar. Los botones Nuevo (cb_nuevo_a), Borrar (cb_borrar_a), Actualizar (cb_actualizar_a), Cargar Datos (cb_cargar_a). Los nombres de los botones deben ser diferentes a los utilizados en la página Empleados. Los botones para desplazarse por las filas del DataWindow: Primero (cb_primero_a), Siguiente (cb_siguiente_a), Anterior (cb_anterior_a), Ultimo (cb_ultimo_a) Crear un DataWindow Object en el que se relacionen el código y nombre de los empleados. (se usa el botón DataWindow de la barra de herramientas PowerBar) En la ventana Select DataWindow: New En la ventana New DataWindow: Data Source SQL Select Presentation Style Grid En la ventana Select Tables seleccionar la tabla empleado. Open Ing. Ismael Castañeda Fuentes Página 32

7 Seleccionar las columnas código de empleado, nombre y apellido del empleado. Pasar a diseño de salida: En la barra de herramientas es el ícono que dice "SQL" Colocar los encabezados apropiados. File Save. En la ventana Save DataWindow: Name: ddd_empleado (será utilizado como DropDownDatraWindow) OK Cerrar la ventana de edición del DataWindow Crear un DataWindow Object en el que se relacionen el código y nombre de los niveles. En la ventana Select DataWindow: New En la ventana New DataWindow: Data Source SQL Select Presentation Style Grid En la ventana Select Tables seleccionar la tabla nivel. Open Seleccionar las columnas código de nivel y nombre de nivel. Pasar a diseño de salida: En la barra de herramientas es el ícono que dice "SQL" Colocar los encabezados apropiados. File Save. En la ventana Save DataWindow: Name: ddd_nivel (será utilizado como DropDownDatraWindow) OK Cerrar la ventana de edición del DataWindow Crear un DataWindow Object para actualizar los datos relacionados con los actividades de los empleados. Ing. Ismael Castañeda Fuentes Página 33

8 En la ventana Select DataWindow: New En la ventana New DataWindow: Data Source SQL Select Presentation Style Tabular En la ventana Select Tables seleccionar la tabla Actividad. Open Seleccionar todas las columnas de la tabla Actividad. Pasar a diseño de salida: En la barra de herramientas es el ícono que dice "SQL" Elegir Properties en el menu poup (con el botón derecho sobre el DataWindow): En la página General: Color ButtonFace OK Para los encabezados de todas las columnas: Elegir Properties en el menu poup (con el botón derecho): En la página General: Border 3D Raised. Text modificar el texto En la página Font: Background ButtonFace. OK Para la columna emp_id (código del empleado): Elegir Properties en el menu poup (con el botón derecho): En la página General: Border 3D Lowered. En la página Font: Background WndBkrnd. En la página Edit: - Style DropDownDW - DataWindow ddd_empleado (el que se creó en el paso ) - Display Column emp_id (código del empleado) - Data Column emp_id (código del empleado) - Wdth of DropDown (ancho del DropDown) 400% - Seleccionar VscrollBar OK Ing. Ismael Castañeda Fuentes Página 34

9 Para la columna niv_id (código del nivel): Elegir Properties en el menu poup (con el botón derecho): En la página General: Border 3D Lowered. En la página Font: Background WndBkrnd. En la página Edit: - Style DropDownDW - DataWindow ddd_nivel (el que se creó en el paso ) - Display Column niv_id (código del nivel) - Data Column niv_id (código del nivel) - Wdth of DropDown (ancho del DropDown) 250% - Seleccionar VscrollBar OK File Save. En la ventana Save DataWindow: Name: d_act_actividades OK Cerrar la ventana de edición del DataWindow Seleccionar el DataWindow dw_act_actividades en la página Empleados. Hacer click con el botón derecho y seleccionar la opción properties del menú poup. DataWindow Object Name browse... d_act_actividades (el que se OK creó en ) El procedimiento utilizado para agregar las dos páginas restantes (Departamentos y Niveles) es bastante similar al descrito anteriormente. Ing. Ismael Castañeda Fuentes Página 35

10 40.5. Hasta ahora no se han escrito los programas (scripts) para ninguno de los eventos de los controles creados En la ventana w_actualizar, seleccionar la página Empleados (tabpage_empleados) Hacer click con el botón derecho sobre la página y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento constructor del listbox de la parte superior izquierda de la ventana. El siguiente es el código para dicho evento: Evento: constructor Control: tabpage_empleados //Se selecciona el Transaction Object, que proporciona la //información para la comunicación con la base de datos y se //deshabilitan los botones de borrar y actualizar. dw_act_empleados.settransobject(sqlca) cb_borrar.enabled = false cb_actualizar.enabled = false Para compilar el script: en el menú; design compile; o también Ctrl+L ; o al cerrar la ventana del editor, se compila automáticamente. Para el botón que de desplazamiento hasta la primera fila (cb_primero): Evento: clicked Control: cb_primero dw_act_empleados.setfocus() // El datawindow toma el foco dw_act_empleados.scrolltorow(1) // Se desplaza hasta la fila No. 1 dw_act_empleados.setcolumn(1) // Se selecciona la primera columna Ing. Ismael Castañeda Fuentes Página 36

11 Para el botón de desplazamiento a la siguiente fila (cb_siguiente): Evento: clicked Control: cb_siguiente long l_fila_actual dw_act_empleados.setfocus() l_fila_actual = dw_act_empleados.getrow() //el número de la fila //seleccionada actualmente dw_act_empleados.scrolltorow(l_fila_actual + 1) //se desplaza a la //fila siguiente dw_act_empleados.setcolumn(1) //se seleccona la primera columna Para el botón de desplazamiento a la fila anterior(cb_anterior): Evento: clicked Control: cb_anterior long l_fila_actual dw_act_empleados.setfocus() l_fila_actual = dw_act_empleados.getrow() //el número de la fila //seleccionada actualmente dw_act_empleados.scrolltorow(l_fila_actual - 1) //se desplaza a la //fila anterior dw_act_empleados.setcolumn(1) //se seleccona la primera columna Para el botón que de desplazamiento hasta la ultima fila (cb_ultimo): Evento: clicked Control: cb_ultimo long l_numfilas dw_act_empleados.setfocus() l_numfilas = dw_act_empleados.rowcount() //se obtiene el número de //filas en el datawindow dw_act_empleados.scrolltorow(l_numfilas) //se desplaza hasta la última dw_act_empleados.setcolumn(1) //se selecciona la primera columna Ing. Ismael Castañeda Fuentes Página 37

12 Para el botón Cargar Datos (cb_cargar): Evento: clicked Control: cb_cargar long l_numfilas //se recibe la información de la base de datos en el datawindow // dw_act_empleados dw_act_empleados.retrieve() l_numfilas=dw_act_empleados.rowcount() dw_act_empleados.scrolltorow(l_numfilas) //Si el número de filas en el datawindow es 0 entonces se deshabilita //el botón de borrar, de lo contrario, se habilita. if l_numfilas = 0 then cb_borrar.enabled = false else cb_borrar.enabled = true end if Para el botón de insertar un nuevo empleado (cb_nuevo) Evento: clicked Control: cb_nuevo dw_act_empleados.settransobject(sqlca) long fila_nueva //la nueva filase inserta al final del datawindow fila_nueva = dw_act_empleados.insertrow(0) //el datawindow toma el foco dw_act_empleados.setfocus() //se desplaza hasta la nueva fila dw_act_empleados.scrolltorow(fila_nueva) dw_act_empleados.setcolumn(1) cb_actualizar.enabled = true Ing. Ismael Castañeda Fuentes Página 38

13 Para el botón de borrar un empleado (cb_borrar) Evento: clicked Control: cb_borrar long l_fila_actual dw_act_empleados.setredraw (false) //se guarda el número de la fila seleccionada, que es la que se //eliminará l_fila_actual = dw_act_empleados.getrow() //se elimina la fila seleccionada dw_act_empleados.deleterow (l_fila_actual) //si después de borrarla no quedan filas en el datawindow, //se deshabilita el botón de borrar if dw_act_empleados.rowcount()=0 then cb_borrar.enabled = false else dw_act_empleados.setcolumn(1) dw_act_empleados.setfocus() end if cb_actualizar.enabled = true dw_act_empleados.setredraw (true) Para el botón de actualización de datos, después de haber realizado inserciones y/o borrados (cb_actualizar) Evento: clicked Control: cb_actualizar dw_act_empleados.setredraw (false) //si la actualización de la base de datos no es exitosa, se dehacen //todos los cambios con la orden rollback. //De locontrario, se realizan todos los cambios con la orden commit. if dw_act_empleados.update() = -1 then rollback; else commit; end if dw_act_empleados.setredraw (true) //Si después de actualizar la base de datos no quedan filas en el //datawindow, se deshabilita el botón de actualizar. if dw_act_empleados.rowcount() = 0 then cb_actualizar.enabled = false else cb_actualizar.enabled = true end if Ing. Ismael Castañeda Fuentes Página 39

14 40.6. Los scripts para los eventos de los controles de las páginas restantes (actividades, niveles y departamentos) son similares a los descritos en 40.5, modificando los nombres de los controles y los datawindows Se agregará un nuevo botón, que permitirá exportar los datos del datawindow a diferentes formatos. La apariencia de la ventana será la siguiente: Agregar un nuevo botón, hacer click derecho sobre él y elegir la opción properties del menú popup. Name cb_exportar Text Exportar. OK Hacer click derecho sobre el botón Exportar y elegir la opción Script del menú popup Elegir el evento clicked en la parte superior izquierda de la ventana del editor y escribir el siguiente programa: Ing. Ismael Castañeda Fuentes Página 40

15 integer i_tab i_tab = tab_actualizaciones.selectedtab //la función SelectedTab retorna el número del tabpage seleccionado. CHOOSE CASE i_tab CASE 1 //el tabpage seleccionado es el 1 (empleados) w_actualizaciones.tab_actualizaciones.tabpage_empleados.dw_act_empleados. SaveAs("", EXCEL!, TRUE) //la función SaveAs permite guardar los datos que están en un datawindow //en diferentes formatos de archivo. Esta función utiliza el cuadro de //diálogo "guardar archivo" y permite al usuario elegir el formato al que //desea exportar los datos. En este caso el formato por defecto es el de //la hoja de cálculo EXCEL CASE 2 //el tabpage seleccionado es el 2 (actividades) w_actualizaciones.tab_actualizaciones.tabpage_actividades.dw_act_actividades. SaveAs("", EXCEL!, TRUE) CASE 3 //el tabpage seleccionado es el 3 (departamentos) w_actualizaciones.tab_actualizaciones.tabpage_departamento.dw_act_deptos. SaveAs("", EXCEL!, TRUE) CASE 4 //el tabpage seleccionado es el 4 (niveles) w_actualizaciones.tab_actualizaciones.tabpage_niveles.dw_act_niveles. SaveAs("", EXCEL!, TRUE) END CHOOSE De manera similar, agregar un botón adicional para cerrar la ventana de actualizaciones (w_actualizaciones) Properties Name cb_cancelar Properties Text Cancelar OK El script para el evento clicked de este botón es: Close (parent) Ing. Ismael Castañeda Fuentes Página 41

16 41. Crear una ventana como la siguiente: En esta ventana se utilizará un nuevo control: TreeView. El TreeView es un control que permite desplegar información jerarquicamente. Cada item en un TreeView consiste de texto y una imagen, los cuales pueden ser manipulados durante una rutina de programa. El aspecto de la ventana será similar al siguiente: Como puede verse, este TreeView tendrá cuatro niveles. El primer nivel solo constará de un ítem con el texto empresa. Los ítems del segundo nivel corresponden a los departamentos de la empresa, el tercero a los empleados de cada departamento, y el cuarto a las actividades asignadas a los empleados En la barra de herramientas: Botón Window New Ing. Ismael Castañeda Fuentes Página 42

17 Con el botón derecho sobre la nueva ventana, o con doble click, modificar las propiedades de la ventana: Window Type Popup. Las opciones Resizable y Maximize Box no deberán seleccionarse Insertar un control TreeView en la ventana y darle el tamaño adecuado. Seleccionar el control insertado y hacer click con el botón derecho del mouse sobre él. Name tv_depto_empleado Seleccionar la opción Lines at Root Indentation 10 OK Insertar los demás controles en la ventana (como lo muestra la figura) Tres botones: Expandir Todo (cb_expandir), Contraer todo (cb_contraer), Cerrar (cb_cerrar) Guardar el trabajo: File Save. El nombre de la nueva ventana será w_explorador Modificar la opción actualizar del menú, para que se abra la nueva ventana: En la barra de herramientas oprimir el botón Menu. Seleccionar el menú ya realizado (p.ej. m_principal) OK Agregar la opción Explorar en el menú Personal Oprimir el botón Script en la barra de herramientas Escribir open(w_explorador) Cerrar la ventana del editor de texto y la ventana de edición del menú. Guardar las modificaciones hechas al menú. Ing. Ismael Castañeda Fuentes Página 43

18 Correr la aplicación y probar el funcionamiento del menú y la nueva ventana Crear un DataWindow Object en el que se relacionen el nombre de los departamentos. (se usa el botón DataWindow de la barra de herramientas PowerBar) En la ventana Select DataWindow: New En la ventana New DataWindow: Data Source SQL Select Presentation Style Tabular En la ventana Select Tables seleccionar la tabla departamento. Open Seleccionar las columnas código de departamento y nombre de departamento. Pasar a diseño de salida: En la barra de herramientas es el ícono que dice "SQL" File Save. En la ventana Save DataWindow: Name: d_depto OK Cerrar la ventana de edición del DataWindow Crear un DataWindow Object en el que se relacionen el nombre de los empleados de un departamento determinado. (se puede usar uno de los ya existentes si cumple con esta condición) En la ventana Select DataWindow: New En la ventana New DataWindow: Data Source SQL Select Presentation Style Tabular Ing. Ismael Castañeda Fuentes Página 44

19 En la ventana Select Tables seleccionar la tabla empleado. Open Seleccionar las columnas código de empleado, apellido y nombre de empleado. En el menú Design elegir la opción Retrieval Arguments... En la ventana Specify Retrieval Arguments: name dept_id, type number OK Oprimir el Tab "Where" en la parte inferior de la pantalla: Column "empleado"."dept_id" (Al hacer click en el espacio en blanco se puede elegir la columna deseada) Operator = (Al hacer click en el espacio en blanco se puede elegir el operador deseado) Value : Hacer click con el boton derecho sobre el espacio en blanco, elegir arguments en el menú popup, y luego elegir :dept_id, que es el mismo argumento que se definión en Retrieva Arguments Pasar a diseño de salida: En la barra de herramientas es el ícono que dice "SQL" File Save. En la ventana Save DataWindow: Name: d_empleados_por_depto OK Cerrar la ventana de edición del DataWindow Crear un DataWindow Object en el que se puedanalmacenar las actividades de un empleado dado. (se puede usar uno de los ya existentes si cumple con esta condición) En la ventana Select DataWindow: New En la ventana New DataWindow: Data Source SQL Select Presentation Style Tabular Ing. Ismael Castañeda Fuentes Página 45

20 En la ventana Select Tables seleccionar la tabla actividad y la tabla empleado. Open Seleccionar las columnas código de empleado (de la tabla empleado), y descripción de la actividad (de la tabla actividad). En el menú Design elegir la opción Retrieval Arguments... En la ventana Specify Retrieval Arguments: name emp_id (código del empleado), type number OK Oprimir el Tab "Where" en la parte inferior de la pantalla: Column "empleado"."emp_id" (Al hacer click en el espacio en blanco se puede elegir la columna deseada) Operator = (Al hacer click en el espacio en blanco se puede elegir el operador deseado) Value : Hacer click con el boton derecho sobre el espacio en blanco, elegir arguments en el menú popup, y luego elegir :emp_id, que es el mismo argumento que se definión en Retrieva Arguments Pasar a diseño de salida: En la barra de herramientas es el ícono que dice "SQL" File Save. En la ventana Save DataWindow: Name: d_activ_por_empleado OK Cerrar la ventana de edición del DataWindow Guardar el trabajo adelantado hasta el momento File Save Declaración de variable de instancia ids_datos En el menú Declare Instance Variables. En la ventana Declare Instance Variables hacer click en el cuadro de texto y escribir: datastore ids_datos[4]. OK Ing. Ismael Castañeda Fuentes Página 46

21 La variable ids_datos es un array de cuatro posiciones de tipo DataStore, en el que se almacenarán los datos de cada nivel del TreeView. Estos datos se obtendrán de los DataWindow creados en y Crear las Funciones lf_agregar_items y lf_config_item Función lf_agregar_items En el menú Declare Window Functions En la ventana Select Function in Window New En la ventana New Function : Name lf_agregar_items Access Public Return Integer Arguments: Name al_parent, Ttype Long, Pass By Value Oprimir Add Name ai_nivel, Type Integer, Pass By Value Oprimir Add Name ai_filas, Type Integer, Pass By Value OK Se abre la ventana del editor. El código para esta función es el siguiente: Ing. Ismael Castañeda Fuentes Página 47

22 ////////////////////////////////////////////////////////////////////// // Función para agregar los items al TreeView usando los datos en el // DataStore // Los argumentos de la función son: // - long al_parent // - integer ai_nivel (el nivel en el que se agregarán los items) // - integer ai_filas (el número de items que se agregarán) ////////////////////////////////////////////////////////////////////// Integer li_cont //se declara un objeto TreeViewItem para manipular los valores del item //que se agregará TreeViewItem ltvi_nuevo // Se agrega cada item For li_cont = 1 To ai_filas // Se llama a la función lf_config_item para asignar los valores //del nuevo item a partir de los datos almacenados en el //DataStore lf_config_item(ai_nivel, li_cont, ltvi_nuevo) // Se agrega el item después del último hijo Next If tv_depto_empleado.insertitemlast(al_parent, ltvi_nuevo) < 1 Then // Si hay Error MessageBox("Error", "Error al insertar item", & Exclamation!) Return -1 End If Return ai_filas Cerrar la ventana del editor y guardar el trabajo adelantado Nota: Si se quieren modificar los argumentos de una función ya declarada, se debe abrir la ventana de edición del código de la función (la que se usó en el paso anterior) y elegir la opción Function Declaration del menú Design. Si la ventana del editor no está abierta no se puede acceder a esta opción Función lf_config_item En el menú Declare Window Functions Ing. Ismael Castañeda Fuentes Página 48

23 En la ventana Select Function in Window New En la ventana New Function : Name lf_config_item Access Public Return (None) Arguments: Name ai_nivel, Type Integer, Pass By Value Oprimir Add Name ai_fila, Type Integer, Pass By Value Oprimir Add Name atvi_nuevo, Type TreeViewItem, Pass By Reference OK Se abre la ventana del editor. El código para esta función es el siguiente: ///////////////////////////////////////////////////////////////////// // // Se configuran los atributos para el nuevo item a partir de los datos // en el DataStore. // Los atributos de TreeViewItem que se usan son: // Label (el texto que se despliega en el TreeView) // Data (es la información que contiene dicho item) // Los argumentos de esta función son: // integer ai_nivel = el nivel del TreeViewItem en el TreeView // integer ai_fila = # de la fila del DataStore de la que se obtendrá // la información // atvi_nuevo = TreeViewItem que se agrega al TreeView. Los valores de // sus atributos. (Label y Data) son los que se determinan a // continuación // /////////////////////////////////////////////////////////////////////// Choose Case ai_nivel Case 1 // El único item de primer nivel tiene como Label la // palabra "empresa", en este caso no se usa niungún // DataStore atvi_nuevo.label = "Empresa" atvi_nuevo.data = "Empresa" //Continúa en la siguiente página... Ing. Ismael Castañeda Fuentes Página 49

24 Case 2 // Label = nombre del departamento // Data = codigo de departamento atvi_nuevo.label= ids_datos[2].object.dept_nombre[ai_fila] atvi_nuevo.data = ids_datos[2].object.dept_id[ai_fila] Case 3 // Label = apellido + nombre del departamento // Data = codigo de empleado atvi_nuevo.label = ids_datos[3].object.emp_apellido[ai_fila]& + ", " + ids_datos[3].object.emp_nombre[ai_fila] atvi_nuevo.data = ids_datos[3].object.emp_id[ai_fila] Case 4 // Label = descripción de la actividad // Data = código del empleado atvi_nuevo.label = ids_datos[4].object.actividad_act_descripcion[ai_fila] atvi_nuevo.data = ids_datos[4].object.empleado_emp_id[ai_fila] End Choose If ai_nivel < 4 Then atvi_nuevo.children = True Else // Si el nivel es 4 (actividades) los items no tienen hijos) atvi_nuevo.children = False End If atvi_nuevo.pictureindex = ai_nivel atvi_nuevo.selectedpictureindex = ai_nivel Cerrar la ventana del editor y guardar el trabajo adelantado Escribir los scripts para los controles creados En la ventana w_explorador: Hacer click con el botón derecho sobre la ventana y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento open del listbox de la parte superior izquierda de la ventana. El siguiente es el código para dicho evento: Ing. Ismael Castañeda Fuentes Página 50

25 ///////////////////////////////////////////////////////////// // Se crean los DataStore que contendrán los // // datos almacenados en los datawindows espacificados // //////////////////////////////////////////////////////////// //d_depto se hace mediante un select a la tabla departamento. //En este datawindow se almacena la lista de los departamentos //de la empresa. Estos datos aparecerán en el segundo nivel //del treeview. ids_datos[2] = Create DataStore ids_datos[2].dataobject = "d_depto" ids_datos[2].settransobject(sqlca) //d_empleados_por_depto contiene los empleados que trabajan en un //departamento. Para esto, se debe escoger la columna código //de departamento (dept_id) como argumento de recuperación (retrieval //arguments) //Los datos aquí recuperados serán los del tercer nivel del treeview ids_datos[3] = Create DataStore ids_datos[3].dataobject = "d_empleados_por_depto" ids_datos[3].settransobject(sqlca) //d_activ_por_empleado contiene las actividades asignadas a un //empleado. De forma similar, el retrieval argument para este //datawindow es la columna código de empleado (emp_id) //Los datos aquí recuperados serán los del cuarto nivel del treeview ids_datos[4] = Create DataStore ids_datos[4].dataobject = "d_activ_por_empleado" ids_datos[4].settransobject(sqlca) //Se agrega el primer item (el único) del primer nivel del treeview. //Los parámetros que se pasan son: parent = 0, nivel = 1, filas = 1 lf_agregar_items(0, 1, 1) Compilar el script: en el menú Design Compile Script (Ctrl+L). Seleccionar el evento close. El script para este evento es: Evento: close Control: w_explorador Integer li_cont // Se destruyen los DataStores usados en el ejemplo For li_cont = 1 To 4 Destroy ids_datos[li_cont] Next Show(w_principal) Ing. Ismael Castañeda Fuentes Página 51

26 Compilar el script (Ctrl + L) y cerrar la ventana del editor En el TreeView tv_depto_empleado: Hacer click con el botón derecho sobre el TreeView y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento itempopulate. El siguiente es el código para dicho evento: Evento: itempopulate Control: tv_depto_empleado /////////////////////////////////////////////////////////////////////// // Se expande el árbol con los hijos de cada item. // p.ej. los hijos de un item de departamento son los nombres de los // empleados /////////////////////////////////////////////////////////////////////// Integer li_nivel, li_parametro, li_deptid, li_empid, li_filas // Se declara un TreeViewItem para el item actual TreeViewItem ltvi_actual SetPointer(HourGlass!) // Se determina el nivel del item que se encuentra seleccionado // actualmente en el TreeView GetItem(handle, ltvi_actual) li_nivel = ltvi_actual.level + 1 // Departamentos if li_nivel = 2 then ids_datos[li_nivel].settransobject(sqlca) ids_datos[li_nivel].reset() ids_datos[li_nivel].settransobject(sqlca) // Se cargan los datos en el DataStore li_filas = ids_datos[li_nivel].retrieve() End if // Empleados X Departamento if li_nivel = 3 Then li_deptid = Integer(ltvi_actual.Data) ids_datos[li_nivel].reset() ids_datos[li_nivel].settransobject(sqlca) // Se cargan los datos en el DataStore usando el argumento código de //departamento li_filas = ids_datos[li_nivel].retrieve(li_deptid) End if //Continúa en la siguiente página... Ing. Ismael Castañeda Fuentes Página 52

27 // Actividades X Empleado If li_nivel = 4 Then End If li_empid = Integer(ltvi_actual.Data) ids_datos[li_nivel].reset() ids_datos[li_nivel].settransobject(sqlca) // Se cargan los datos en el DataStore usando el argumento código // de empleado li_filas = ids_datos[li_nivel].retrieve(li_empid) lf_agregar_items(handle, li_nivel, li_filas) Compilar el script (Ctrl + L) y cerrar la ventana del editor En el botón Expandir Todo (cb_expandir): Hacer click con el botón derecho sobre el botón y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento clicked. El siguiente es el código para dicho evento: Evento: clicked Control: cb_expandir Long ll_handle ll_handle = tv_depto_empleado.finditem ( RootTreeItem!, 0 ) tv_depto_empleado.expandall ( ll_handle ) Compilar el script: en el menú Design Compile Script (Ctrl+L). Cerrar la ventana del editor. Ing. Ismael Castañeda Fuentes Página 53

28 En el botón Contraer Todo (cb_contraer): Hacer click con el botón derecho sobre el botón y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento clicked. El siguiente es el código para dicho evento: Evento: clicked Control: cb_contraer Long ll_handle ll_handle = tv_depto_empleado.finditem ( RootTreeItem!, 0 ) tv_depto_empleado.collapseitem ( ll_handle ) Compilar el script: en el menú Design Compile Script (Ctrl+L). Cerrar la ventana del editor Para el botón Cerrar (cb_cerrar) Evento: clicked Control: cb_cerrar close(w_explorador) Compilar el script: en el menú Design Compile Script (Ctrl+L). Cerrar la ventana del editor Guardar el trabajo adelantado y correr la aplicación para comprobar el funcionamiento del TreeView. Ing. Ismael Castañeda Fuentes Página 54

29 42. Modificar la ventana creada en el paso 41 de la siguiente forma: El control que se añadirá se denomina ListView. Un ListView muestra información en forma de lista al usuario. Cada ítem del ListView consiste de texto y un dibujo. En este caso, el ListView mostrará los ítems del nivel inferior al que se encuentre seleccionado en el árbol. Los botones Lista, Detalles e Iconos Grandes, cambian la forma de presentación de los ítems en el ListView. Cuando el usuario haga doble click sobre uno de los ítems del ListView, se desplegarán los ítems del nivel inferior, y se expandirá la porción correspondiente en el árbol. Los ítems se ordenarán de acuerdo cuando el usuario oprima las cabeceras de las columnas, de forma similar a como ocurre, por ejemplo, en el explorador de windows. Ing. Ismael Castañeda Fuentes Página 55

30 42.1. Insertar un control ListView en la ventana y darle el tamaño adecuado. Seleccionar el nuevo control y hacer click con el botón derecho del mouse sobre él. Name lv_dept_empleados Seleccionar la opción Show header View Report (Detalles) Sort Unsorted OK Insertar los demás controles en la ventana (como lo muestra la figura) Tres botones: Lista (cb_lista), Detalles (cb_detalles), Iconos Grandes (cb_grandes) Guardar el trabajo adelantado: File Save Declaración de variable de instancia ii_columnas En el menú Declare Instance Variables. En la ventana Declare Instance Variables hacer click en el cuadro de texto y escribir: integer ii_columnsas. OK La variable ii_columnas es un entero que se utilizará para contar el número de columnas que se agregan al ListView dependiendo del nivel actual del árbol Crear las Funciones lf_agregar_items y lf_config_item De ahora en adelante se utilizarán los DataWindow y DataStore creados durante el paso 41 en los nuevos scripts. (ids_datos[], d_depto, d_empleados_por_depto y d_activ_por_empleado) Ing. Ismael Castañeda Fuentes Página 56

31 Función wf_agregar_lv_items En el menú Declare Window Functions En la ventana Select Function in Window New En la ventana New Function : Name wf_lv_agregar_items Access Public Return Integer Arguments: Name ai_nivel, Type Integer, Pass By Value Oprimir Add Name ai_filas, Type Integer, Pass By Value OK Se abre la ventana del editor. El código para esta función es el siguiente: función wf_agregar_lv_items /////////////////////////////////////////////////// // //Función para agregar items al ListView //usando los datos del DataStore // // Argumentos: // integer ai_nivel (el nivel en que se insertará) // integer ai_filas (número de items a insertar) // /////////////////////////////////////////////////// Integer ListViewItem llvi_nuevo li_cont // Se borran todas las columnas existentes en el // ListView For li_cont = 1 To ii_columnas lv_dept_empleados.deletecolumn(1) Next Continúa en la siguiente página... Ing. Ismael Castañeda Fuentes Página 57

32 ...continuación función wf_lv_agregar_items // Se agregan las columnas al ListView Choose Case ai_nivel Case 2 lv_dept_empleados.addcolumn("nombre", Left!, 500) lv_dept_empleados.addcolumn("id", Right!, 150) ii_columnas = 2 Case 3 lv_dept_empleados.addcolumn("apellido", Left!, 700) lv_dept_empleados.addcolumn("nombre", Left!, 700) lv_dept_empleados.addcolumn("id", Right!, 150) ii_columnas = 3 Case 4 lv_dept_empleados.addcolumn("descripción", Left!, 900) lv_dept_empleados.addcolumn("id Nivel", Right!, 250) ii_columnas = 2 End Choose // Se agrega cada item al ListView For li_cont = 1 To ai_filas // Se llama a la fución para configurar los valores de los // items del ListView a partir de los datos del DataStore wf_config_lv_item(ai_nivel, li_cont, llvi_nuevo) // Se agrega cada item after the last child If lv_dept_empleados.additem(llvi_nuevo) < 1 Then MessageBox("Error", "Error al agregar item", Exclamation!) Return -1 End If Next Return ai_filas Compilar el script (Ctrl + L) y cerrar la ventana del editor Función wf_config_lv_item En el menú Declare Window Functions En la ventana Select Function in Window New En la ventana New Function : Name wf_config_lv_item Access Public Return (None) Arguments: Ing. Ismael Castañeda Fuentes Página 58

33 Name ai_nivel, Type Integer, Pass By Value Oprimir Add Name ai_fila, Type Integer, Pass By Value Oprimir Add Name alvi_nuevo, Type ListViewItem, Pass By Reference OK Se abre la ventana del editor. El código para esta función es el siguiente: función wf_config_lv_item //////////////////////////////////////////////////////////// // Se configuran los atributos Label y Data para el nuevo // item del ListView a partir de los datos en el DataStore. // // Argumentos: // integer ai_nivel (el nivel del ítem a configurar) // integer ai_fila (el número del item a configurar) // listviewitem alvi_nuevo (el item a configurar) //////////////////////////////////////////////////////////// Choose Case ai_nivel Case 2 // Label = nombre del departamento código dedepartamento // Data = codigo de departamento alvi_nuevo.label = ids_datos[2].object.dept_nombre[ai_fila]+"~t"+ & string(ids_datos[2].object.dept_id[ai_fila]) alvi_nuevo.data = ids_datos[2].object.dept_id[ai_fila] Case 3 // Label = apellido empleado nombre empleado código empleado // Data = codigo de empleado alvi_nuevo.label = ids_datos[3].object.emp_apellido[ai_fila]+"~t"+ & ids_datos[3].object.emp_nombre[ai_fila] + "~t" + & string (ids_datos[3].object.emp_id[ai_fila]) alvi_nuevo.data = ids_datos[3].object.emp_id[ai_fila] Case 4 // Label = descripción de actividad código del nivel // Data = codigo de empleado (no se utiliza) alvi_nuevo.label = ids_datos[4].object.actividad_act_descripcion[ai_fila] + "~t" + & string(ids_datos[4].object.actividad_niv_id[ai_fila]) alvi_nuevo.data = ids_datos[4].object.empleado_emp_id[ai_fila] End Choose alvi_nuevo.pictureindex = ai_nivel Compilar el script (Ctrl + L) y cerrar la ventana del editor. Ing. Ismael Castañeda Fuentes Página 59

34 42.4. Escribir los scripts para los nuevos controles En el TreeView tv_depto_empleado: Hacer click con el botón derecho sobre el TreeView y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento selectionchanged. El siguiente es el código para dicho evento: control: tv_depto_empleado evento: selectionchanged /////////////////////////////////////////////////// // Este evento se ejecuta cuando cambia el ítem // selecionado en el árbol. // Se cargan los datos desde el DataStore y // se agregan los items del nivel inferior al // ListView ///////////////////////////////////////////////// Integer li_nivel, li_deptid, li_empid, li_filas // Se declara un TreeViewItem para el item actual TreeViewItem ltvi_actual SetPointer(HourGlass!) // Se determina el nivel del item que se // encuentra seleccionado actualmente en el TreeView GetItem(newhandle, ltvi_actual) li_nivel = ltvi_actual.level + 1 // Departamentos if li_nivel = 2 then ids_datos[li_nivel].settransobject(sqlca) ids_datos[li_nivel].reset() ids_datos[li_nivel].settransobject(sqlca) // Se cargan los datos del DataStore li_filas = ids_datos[li_nivel].retrieve() End if Coninúa en la siguiente página... Ing. Ismael Castañeda Fuentes Página 60

35 control: tv_depto_empleado evento: selectionchanged continuación // Empleados X Departamento if li_nivel = 3 Then End if li_deptid = Integer(ltvi_actual.Data) ids_datos[li_nivel].reset() ids_datos[li_nivel].settransobject(sqlca) // Se cargan los datos del DataStore usando //el argumento código de departamento li_filas = ids_datos[li_nivel].retrieve(li_deptid) // Actividades X Empleado If li_nivel = 4 Then End If li_empid = Integer(ltvi_actual.Data) ids_datos[li_nivel].reset() ids_datos[li_nivel].settransobject(sqlca) // Se cargan los datos del DataStore usando // el argumento código de empleado li_filas = ids_datos[li_nivel].retrieve(li_empid) // Se borran todos los items del ListView lv_dept_empleados.deleteitems() // La función wf_agregar_lv_items agrega un número // de items igual a "li_filas" en el ListView, que // pertenecen al nivel "li_nivel" wf_agregar_lv_items(li_nivel, li_filas) Cerrar la ventana del editor y guardar el trabajo adelantado En el ListView lv_dept_empleados: Hacer click con el botón derecho sobre el ListView y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento doubleclicked. El siguiente es el código para dicho evento: Ing. Ismael Castañeda Fuentes Página 61

36 control: lv_dept_empleados evento: doubleclicked Long Boolean TreeViewItem ListViewItem ll_padre, ll_item lb_encontrado ltvi_item llvi_actual If index <= 0 Then Return // Error // Se toma el ítem sobre el que se hizo doble click If GetItem(index, llvi_actual) = -1 Then Return // Se toma el item actualmente seleccionado en el TreeView. // Este debe ser el padre del item seleccionado en el ListView ll_padre = tv_depto_empleado.finditem(currenttreeitem!, 0) tv_depto_empleado.getitem(ll_padre, ltvi_item) tv_depto_empleado.expanditem(ll_padre) // Se busca el item del ListView en el árbol lb_encontrado = False ll_item = tv_depto_empleado.finditem(childtreeitem!, ll_padre) Do Until (lb_encontrado Or ll_item < 1) tv_depto_empleado.getitem(ll_item, ltvi_item) If Pos(ltvi_Item.Label, llvi_actual.label) > 0 Then // Se ha encontrado el item lb_encontrado = True Else // Se revisa el siguiente item ll_item = tv_depto_empleado.finditem(nexttreeitem!, ll_item) End If Loop If lb_encontrado Then End If // Al cambiar el elemento seleccionado en el TreeView, // se ejecuta el código del evento SelectionChanged // para el TreeVier tv_depto_empleado tv_depto_empleado.selectitem(ll_item) Compilar el script (Ctrl + L) y cerrar la ventana del editor. Ing. Ismael Castañeda Fuentes Página 62

37 En el ListView lv_dept_empleados: Hacer click con el botón derecho sobre el ListView y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento columnclick. El siguiente es el código para dicho evento: control: lv_dept_empleados evento: columnclick // Los items en el ListView se ordenan ascendentemente // por la columna presionada por el usuario // "column" es el argumento del evento columnclick // es el número de la columna sobre la que se ha hecho click lv_dept_empleados.setredraw(false) lv_dept_empleados.sort(ascending!, column) lv_dept_empleados.setredraw(true) Compilar el script (Ctrl + L) y cerrar la ventana del editor En el botón Lista (cb_lista): Hacer click con el botón derecho sobre el botón y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento clicked. El siguiente es el código para dicho evento: Evento: clicked Control: cb_lista // Muestra los ítems del ListView en forma de una lista sencilla lv_dept_empleados.view = ListViewList! Compilar el script: en el menú Design Compile Script (Ctrl+L). Cerrar la ventana del editor. Ing. Ismael Castañeda Fuentes Página 63

38 En el botón Detalles (cb_detalles): Hacer click con el botón derecho sobre el botón y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento clicked. El siguiente es el código para dicho evento: Evento: clicked Control: cb_detalles // Muestra los ítems del ListView en forma de una lista detallada. // Esta es la forma de presentación por defecto que se escogió al // crear el control ( en propiedades de lv_dept_empleados: view = // report ) lv_dept_empleados.view = ListViewReport! Compilar el script: en el menú Design Compile Script (Ctrl+L). Cerrar la ventana del editor En el botón Iconos grandes (cb_grandes): Hacer click con el botón derecho sobre el botón y seleccionar la opción script en el menú popup. En el editor, seleccionar el evento clicked. El siguiente es el código para dicho evento: Evento: clicked Control: cb_grandes // Muestra los items del ListView en forma de íconos grandes lv_dept_empleados.view = ListViewLargeIcon! Compilar el script: en el menú Design Compile Script (Ctrl+L). Cerrar la ventana del editor Correr la aplicación y probar su funcionamiento. Ing. Ismael Castañeda Fuentes Página 64