Manuales de TuGa Página Principal

Crear una aplicación web en TuGa.

Palabras claves:

Pantalla: Formulario web que permite el ingreso y manipulación de datos.

Reporte: Consulta usada para obtener información

Página: Pagina web creada por el CMS incluido en TuGa.

La presente guía muestra cómo crear una aplicación web sencilla que nos permitirá funciones básicas cómo lo son insertar, modificar, eliminar y consultar datos. Para ello partiremos del siguiente modelo relacional:

La versión estándar de TuGa cuenta con la siguiente restricción en cuento al modelo de datos, las llaves primarias deben estar compuestas por solo una columna, es decir, tablas que tengan llaves primarias compuestas por dos campos no serían viables para crear pantallas en TuGa.

La idea del modelo expuesto anteriormente es obtener la siguiente pantalla con las operaciones mínimas (adicionar, consultar, modificar y eliminar)

TuGa creará las validaciones necesarias en el formulario para evitar que el usuario ingrese información que no sea compatible (según el campo) con la tabla en la base de datos.

Note que el campo ciudad corresponde a una lista que se llenará con los valores de la tabla tuga_ciudades (según el modelo expuesto anteriormente). Esta lista se denomina una colección de datos.

Generalidades de las ventanas flotantes en TuGa

Cuando se están creando campos, botones, acciones, etc., TuGa despliega ventanas flotantes con las diferentes opciones según el caso. Un ejemplo de dichas ventanas sería el siguiente:

Este tipo de ventanas cuenta con las siguientes opciones de control:

Opción para minimizar – restaurar la ventana.

Opción para cerrar la ventana sin guardar cambios

Opción para cerrar la ventana guardando los cambios realizados

Opción para cambiar el tamaño de la ventana por medio del arrastre con el ratón.

Para empezar la creación de la pantalla primero se tiene que crear la conexión con la base de datos que contiene el modelo anteriormente expuesto. Haga clic en la opción Menú Principal -> TuGa -> conexiones e ingrese la información de acuerdo como aparece en la grafica (Tenga en cuenta que el login, password y url de conexión varía según los datos del motor donde se hallan instalado las tablas).

Presione el botón Adicionar. Si desea consultar las conexiones creadas presione el botón Buscar, con lo cual obtendrá el siguiente reporte

Para modificar los datos de una conexión, haga clic sobre el icono con el lápiz. Si desea probar una conexión haga clic sobre el icono en forma de piñón.

A continuación crearemos la colección de datos correspondiente a la tabla tuga_ciudades. Haga clic en Menú Principal -> TuGa -> Colecciones de datos e ingrese la información de acuerdo a la siguiente imagen

El las colecciones de datos es mandatorio que la llave primaria de la tabla sea el primer campo a seleccionar dentro del SQL, el texto descriptivo de la información correspondería al segundo campo dentro del SQL.

Una vez creada la conexión y la colección de datos, ingrese a Menú Principal -> TuGa -> Pantallas. Y haga clic en la opción Nueva Pantalla.

Escoja la conexión y asigne un nombre a la pantalla, puede escribir también el nombre de un proyecto que servirá para agrupar dicha pantalla. A continuación se describirán las diferentes partes contenidas en la grafica para futuras referencias.

Querys de entrada.

Suponga que la pantalla ya se encuentra terminada y en ella puede hacer inserción de datos, ahora usted construye un reporte para consultar la información que ha ingresado y desea que ese reporte, al seleccionar un registro envíe la información a la pantalla para su edición (o eliminación de datos).

Con el query de entrada podemos obtener la información correspondiente a un registro para su edición. De acuerdo al modelo planteado, usaremos la siguiente sentencia SQL:

SELECT codigo, nombre, ciudad, to_char(fecha, 'dd-mm-yyyy') AS "fecha" FROM personas WHERE codigo = <<X>>

Y en la opción parametro de entrada escribiremos el nombre de la variable que asignaremos a <<X>>, en el ejemplo seria codigo. Con lo anterior, cuanto la pantalla reciba un parámetro de nombre codigo, ella reemplazara el valor <<X>> por el del parámetro y calculará el resultado de la sentencia SQL. Lo siguiente es asignar el valor de cada campo obtenido por el SQL a cada uno de los campos que componen la pantalla

JS/CSS de Inicio.

En esta opción se puede ingresar código que será incluido antes del tag <body> de la pantalla, puede ser código Javascript (el cual debe iniciar con el tag <script language="javascript"> y finalizar con el tag </script>) o código de estilos (el cual debe iniciar con el tag <style type="text/css"> y finalizar con el tag </style>).

Cache.

La opción cache de páginas y reportes permiten almacenar contenido entre páginas cuando se usa el desplazamiento Adelante/atrás del navegador. Si esta opción esta deshabilitada, al hacer clic en la opción Atrás del navegador, el formulario anterior aparecerá vacio.

Para que esta opción funcione correctamente, además de tenerla activada (chuleada) el navegador debe tener el cache habilitado.

JS / CSS de pie.

En esta opción se puede ingresar código que será incluido después del tag </body> de la pantalla, puede ser código Javascript (el cual debe iniciar con el tag <script language="javascript"> y finalizar con el tag </script>) o código de estilos (el cual debe iniciar con el tag <style type="text/css"> y finalizar con el tag </style>).

Campos.

Los campos en tuga corresponden a los diferentes campos de un formulario que se pueden usar para que el usuario ingrese información. Utilice el botón Adicionar para agregar un campo. Utilice el botón derecho del ratón para editar sus propiedades o eliminar campos. Puede arrastrar los campos de arriba abajo para cambiar su orden.

· Nombre: Corresponde al nombre descriptivo del campo. Esta es la descripción del campo que el usuario podrá ver por pantalla.

· Variable: En esta opción se asigna una variable al campo. Con esta variable TuGa podrá hacer referencia al contenido del campo para las diferentes acciones a programar.

· Tipo: De acuerdo al tipo de campo, TuGa programará las validaciones en Javascript necesarias para evitar que el usuario ingrese información errónea en el campo. Se puede usar uno de los siguientes tipos :

o Archivo. Opción por medio de la cual se pueden cargar archivos que serán almacenados en base de datos (ver documentación especializada para este tema)

o Caja de chequeo. Con esta opción obtiene una caja de chequeo (campo de tipo check en HTML). Remítase a la documentación especializada de cómo usar este tipo de campo.

o Numero entero. Con esta opción se obtiene un campo que solo admite el ingreso de números enteros.

o Fecha. Con esta opción se obtiene un campo que solo admite el ingreso de fechas. Por defecto el formato de la fecha es dia – mes – año, para cambiar este formato edite el archivo de propiedades (formatoPaginas.properties) de TuGa y reinicie la aplicación

o Numero decimal. Con esta opción se obtiene un campo que solo admite el ingreso de números decimales.

o Campo oculto. Este campo se usa para guardar valores que serán invisibles para el usuario.

o Html. Este campo habilita el ingreso de texto formateado en HTML por medio del editor fckeditor (http://www.fckeditor.net).

o Texto de información. Campo útil para mostrar información que no puede ser editada.

o Javascript. Este campo se usa ejecutar funciones Javascript cuando se haga clic sobre el icono (generado por este campo).

o Lista. Con esta opción se despliega una lista de datos ya sea dinámica o estática. Si es dinámica la lista corresponde a una de las colecciones de datos de TuGa; si es una lista estática entonces es una cadena separada por comas (,) donde cada una de las cadenas corresponderá a un valor en la lista (por ejemplo : Si, No )

o Lista múltiple. Permite utilizar una lista de valores donde cada valor tiene una caja de chequeo asociada, de tal forma será posible seleccionar uno o más valores (ver documentación especializada para este tema).

o Password. Este campo se usa para guardar valores tipo contraseña (el valor digitado por el usuario será oculto por medio de unos caracteres especiales).

o Campo de texto. Con esta opción se obtiene un campo que admite el ingreso de una cadena de texto sin importar los caracteres.

o Área de texto. Funciona igual que en el campo de texto, la diferencia es que este campo lo hace por medio de un área (no de una línea). Muy útil cuando se quiere ingresar mucha información (por ejemplo, una carta). Por defecto su cantidad de filas es 8 y el de columnas es de 3 (para cambiar este valor altere la opción longitud del campo)

o Sentencia SQL. Este campo habilita el ingreso de sentencias SQL formateadas usando un editor especializado.

o Definido por el usuario. Es un campo donde el usuario puede meter cualquier tipo de código, ya sea Javascript, HTML, etc.

Para una mayor claridad sobre los diferentes tipos de campo, ejecute y revise la parametrización de la pantalla GUI prueba # 1 incluida como ejemplo en TuGa.

· Obligatorio: Si el contenido del campo es obligatorio o no antes de ejecutar una acción.

· Longitud: En los campos de texto, corresponde al máximo número de caracteres que se pueden escribir en el campo; en el Área de texto corresponde a la cantidad de columnas del área.

· Valor por Query: De acuerdo a la idea expuesta en Querys de Entrada, esta opción corresponde a la columna dentro del query que le asignará el valor al campo cuando la pantalla reciba un parámetro

· Valor por parámetro: El valor del campo se obtendrá por medio de un parámetro que recibirá la pantalla. Se puede usar una de las siguientes opciones :

o SYS Login. Variable del sistema por medio de la cual se obtiene el usuario que está usando la pantalla.

o SYS Rol. Variable del sistema por medio de la cual se obtiene el rol del usuario que está usando la pantalla.

o SYS IP. Variable del sistema por medio de la cual se obtiene la dirección IP del usuario que está usando la pantalla.

o SYS Nombre. Variable del sistema por medio de la cual se obtiene el nombre de la persona asociada al usuario que está usando la pantalla.

o Otro. Con esta opción se puede escribir el nombre del parámetro que recibirá la pantalla

Cuando las ambas opciones (Valor por Query y Valor por parámetro) están parametrizadas, Valor por parámetro es mandatario sobre Valor por Query.

Ingrese los siguientes campos con la información detallada a continuación (los campos restantes déjelos en blanco):

Nombre	Nombre
Variable	nombre
Tipo	Campo de Texto
Obligatorio	Si
Valor por Query	nombre

Nombre	Ciudad
Variable	ciudad
Tipo	Lista
Tipo de Lista	Dinámica
Colección de Datos	Colección de Ciudades SP BN 1
Obligatorio	Si
Valor por Query	ciudad

Nombre	Fecha
Variable	fecha
Tipo	Fecha
Obligatorio	Si
Valor por Query	fecha

Nombre	codigo
Variable	codigo
Tipo	Campo Oculto
Obligatorio	No
Valor por Query	codigo

Botones

Por medio de los botones se programan las acciones que se deben hacer con la información contenida en los campos. Utilice el botón Adicionar para agregar un botón. Utilice el botón derecho del ratón para editar sus propiedades o eliminar botones. Puede arrastrar los botones de izquierda a derecha para cambiar su orden.

· Nombre. Nombre descriptivo del botón (Nombre que el usuario visualiza en el botón cuando se trata de un botón estándar HTML).

· Imagen. En vez de usar un botón tipo HTML, se puede hacer una imagen que ejecute las funciones programadas cuando se hace clic en ella. Utilice Seleccionar para escoger la imagen o Limpiar para eliminar la selección. Las imágenes están contenidas en la carpeta /Tuga/imágenes/img.

· Tipo. Acción que ejecutará el botón una vez sea presionado :

o Ejecuta un script. Por medio de esta opción al presionar el botón se ejecutará acciones tipo Javascript (las cuales se escriben en la caja de texto que aparece cuando se usa esta opción).

o Ejecuta un Reporte. Al hacer clic sobre el botón se ejecutara un reporte asociado a esta pantalla (ver más adelante como se crea el reporte).

o Envía información a una URL. Envía la información contenida en los campos a una URL las cual se escribe en la caja de texto que aparece cuando se usa esta opción.

o Limpia el formulario. Con esta opción al presionar el botón, el formulario quedará vacío.

o Ejecuta las siguientes Acciones. Permite agregar una o más acciones que se ejecutaran de arriba a abajo (se puede alterar el orden arrastrando las acciones). Las acciones disponibles son las siguientes :

§ Almacena Archivos Adjuntos

§ Ejecuta Update con validación de datos

§ Ejecuta Update con los datos de un vector

§ Ejecuta Update sin validación de datos

§ Ejecuta una aplicación

§ Ejecuta una sentencia SQL

§ Envía un e-mail

§ Envía un mensaje a la pantalla inicial

§ Invoca la pantalla inicial

§ Invoca una URL

§ Invoca una pantalla de TuGa

Cada acción tiene su propia parametrización, para editar sus opciones o eliminar la acción utilice el botón derecho del ratón haciendo clic sobre la acción.

Remítase a la documentación donde se detalla cada una de las acciones para mayor información

· Script (Solo aparece cuando tipo es Ejecuta un reporte o ejecuta las siguientes acciones). Antes de ejecutar el tipo de acción del reporte se ejecutara el script (Javascript) contenido en esta opción. Si el script retorna falso, la acción del botón no tendrá validez y por lo tanto no se ejecutará nada. Un ejemplo para esta opción es el siguiente :

if(!vrfyPasswd()){return false;}

Quiere decir que si la función vrfyPassword() (La cual debe estar programada en CSS / JS de Inicio ) retorna falso, entonces se retornara falso.

Ingrese los siguientes botones con la información detallada a continuación (los campos restantes déjelos en blanco):

Nombre	Adicionar
Tipo	Ejecuta las siguientes Acciones
Acciones	· Ejecuta un Update con validación de datos o Sentencia Update o Insert : INSERT INTO personas (codigo, nombre, ciudad, fecha) VALUES (nextval('seccodigo'),?,?, to_date('<<fecha>>','dd-mm-yyyy')) o Parámetros : Cadena=<<nombre>> Entero=<<Ciudad>> · Invoca la pantalla inicial o Envía los parámetros Originales (S o N): No

Nombre	Consulta
Tipo	Ejecuta un Reporte

Permisos de Acceso

De acuerdo a cada botón, por medio de esta opción se puede programar que Roles de la aplicación puede operar cada uno de ellos.

En el momento tenemos una pantalla que nos permite ingresar información, pero no consultar lo que hemos ingresado. Para ver la pantalla podemos hacer clic en la opción Vista preliminar o ir al Menú Principal de TuGa y escoger la opción Pantallas (Menú Principal -> TuGa -> Pantallas) y dar clic en el botón que aparece al lado de la pantalla que acabamos de crear.

Para crear el Reporte a esta pantalla, ingresamos a Y hacemos clic sobre la opción Nuevo Reporte. Un Reporte puede depender o no de una pantalla; Cuando depende de una pantalla es necesario que la pantalla tenga un botón de tipo Ejecuta un Reporte lo cual va de acuerdo con el ejemplo que estamos haciendo. Ingrese los datos del reporte de acuerdo a la información que se muestra en la gráfica.

A continuación haga clic en la opción Agregar Contenido donde armara el reporte con diferentes opciones, entre las cuales están:

· Sentencia SQL: Sentencia SQL con el cual se obtendrá información de la base de datos de acuerdo a la información digitada en los campos de la pantalla. Para obtener los campos disponibles haga clic con el botón derecho del ratón en la opción [Campos] y seleccione el que usted desee.

· SQL de Archivos: Con esta opción se podrán obtener los archivos que han sido subidos ala base de datos. Consulta la documentación respectiva sobre como operar con esta opción.

· Código HTML: Puede ingresar con ayuda de un editor especializado, contenido de tipo HTML en el reporte.

· Pantalla Incluida: Con esta opción puede hacer que una pantalla sea empotrada en un reporte.

· Grafico (Línea, Pie, Barra Horizontal, Barra Vertical): Construye un grafico según la selección. El formato del SQL para generar el grafico debe ser de la siguiente forma :

SELECT etiqueta, valor_numerico FROM ….

EL primer campo debe ser el texto descriptivo del valor numérico, el segundo campo debe ser el valor numérico. Ejemplo: SELECT nombre, valor FROM prueba WHERE valor IS NOT NULL.

Ingrese la información solicitada de acuerdo a lo que se indica a continuación (los campos restantes déjelos en blanco):

Tipo	Corresponde al tipo de contenido para el reporte
Nombre	SQL Principal
SQL	SELECT p.codigo AS "CODIGO", p.nombre AS "NOMBRE", c.nombre AS "CIUDAD", to_char(fecha,'dd-mm-yyyy') AS "FECHA" FROM personas p, tuga_ciudades c WHERE p.ciudad = c.codigo AND p.ciudad = <<Ciudad>>
Genera reporte en Excel	Si
Enumera los resultados	No
Muestra el total de resultados	Si
Envía varios datos	No
Orientación	Horizontal
Destino	Pantalla de TuGa Pantalla : Demo lista desplegable Parámetros del destino : código Valores para los parámetros : 1
Icono en la primer Columna.	No

Finalmente ingrese a la pantalla y presione el botón consultar. Podrá notar que cuando selecciona una ciudad en la pantalla la consulta arrojará solo los registros con esa ciudad mientras si la deja vacía, se mostrarán todos los registros.

Le recomendamos leer las diferentes guías de TuGa donde se explica cómo hacer otro tipo de operaciones. Igualmente revise los ejemplos incluidos en la aplicación.

Listado de Ejemplos:

· Demo - Información usuario Actual. Ejemplo que muestra cómo obtener datos del sistema. (en este caso, el login del usuario que se encuentra usando la aplicación). Ensaye este DEMO obteniendo datos como el rol, la IP y la persona dueña del usuario (El demo no tiene botones en la pantalla). Vea también el reporte Ejemplo de Datos Especiales.

· Demo Armar mensaje. Ejemplo que muestra como usando Javascript puedo armar un mensaje con valore de una lista desplegable (El demo no tiene botones en la pantalla).

· Demo BD Alterna. Este Demo muestra como ingresar información a dos bases de datos diferentes

· Demo Lista desplegable. Muestra cómo usar una lista desplegable sencilla para ingresar valores en una base de datos y luego consultarlos.

· Demo Lista desplegable que depende de otra. Muestra como enlazar dos listas desplegables de tal forma que alterando la selección de una, me cambia los valores de la otra. El reporte generado por esta pantalla muestra como en el reporte se puede empotrar una pantalla.

· Demo Pantalla que invoca otra. Muestra como al hacer clic sobre un botón, se puede invocar otra pantalla.

· Demo ejecuta Comando S.O. Muestra como al hacer clic sobre un botón se puede ejecutar un programa mediante un llamado al sistema operativo.

· Demo enviar parámetros a la pantalla inicial (mensaje de texto). Este ejemplo muestra cómo se pueden devolver mensajes a la pantalla inicial.

· Demo insertar múltiples datos (Lista Múltiple de Checks). Muestra como ingresar valores de una lista múltiple a una base de datos. El reporte de este ejemplo muestra como un reporte puede tener varias sentencias SQL en él.

· GUI prueba # 1. Este es el demo maestro de la aplicación donde se muestran diferentes funcionalidades de TuGa. Revise este reporte para tener una idea de las funcionalidades del aplicativo.