ELEMENTOS GRÁFICOS


Se emplean diversos elementos gráficos para mejorar interfaz con usuario



CAMPO DE TEXTO (TEXT)

Es un elemento que permite escribir información. Es la forma más común para ingresar datos en el sistema. Dentro del recuadro aparece una breve indicación del contenido que acepta. 


Fig 82 Campo de Texto, con indicación de qué escribir.



Existen variante del Campo de Texto que permiten escribir 

  • Solo números
  • Contraseñas

etc..


CAMPO DE TEXTO CON AUTOCOMPLETADO

Funcionalidad adicional que se agrega al campo de texto mediante programación que permite seleccionar palabras a una consulta a la base de datos, 

Esto permite por un lado ingresar un nuevo valor o buscar uno existente de una manera muy simple. Al escribir un carácter, disminuye el numero de posibles elementos a seleccionar...


Fig 83 Ejemplo de cuadro de Texto con Auto completado.

CAMPO DE TEXTO PARA CONTRASEÑAS (PASSWORD)

Es un elemento que permite escribir información. Es la forma más comun para ingresar datos en el sistema. Dentro del recuadro aparece una breve indicación del contenido que acepta. 


Fig 84 Campo de Texto para contraseñas.




CUADRO COMBINADO (COMBOBOX)

Es un elemento que permite obtener información que está previamente almacenada en el sistema, al costado derecho hay un triángulo, que si se selecciona despliega en una lista una serie elementos y uno debe seleccionar alguno


Cuadro combinado no activo


Fig 85 Cuadro combinado activado y con opción seleccionada.


CUADRO COMBINADO DEPENDIENTE

Es posible sincronizar varios cuadros combinados de manera que información del segundo sea dependiente de la selección del primero y así sucesivamente.

Adicionalmente se utiliza la opción desactivar el/los cuadros combinados siguientes para indicar que su selección no es posible mientras no se seleccione el anterior. Luego que se hayan seleccionado todas las alternativas será posible realizar el siguiente paso.

Esta opción es de particular interés para permitirle al usuario seleccionar o tomar múltiples decisiones que son dependientes entre ellas.


Fig 86 Ejemplo de cuadros combinados dependientes.


En el ejemplo anterior, se desea recalcar que no es posible escoger el tipo de producto mientras no se escoja al cliente. Posteriormente será posible escojer la edad del producto si se han escogido las 2 anteriores.


CAMPO DE TEXTO MÚLTIPLES LINEAS (TEXTAREA)

Este elemento permite ingresar datos en múltiples lineas, pero no es posible cambiar el formato del texto ingresado.


Fig 87 Campo de Texto de múltiples líneas.




CAMPO DE TEXTO EDITOR

Es una extensión del campo de TEXTO MULTIPLES LINEAS en la que se ha agregado un editor de HTML. 

Fig 88 Campo de  Texto con Editor en momento de Edición (activo).



Fig 89 Extracto de campo de una tabla de datos con texto formateado.



Este elemento es de especial interés porque permite ingresar información con formato, es util para realizar listados, resaltar algo con color, emplear Diversos formatos de texto.






CAMPO DE TEXTO+CUADRO COMBINADO (TEXT+COMBOBOX)


La combinación de 2 elementos gráficos uno junto a otro, campo uno de texto (no permite selección de elementos) y el otro  tipo cuadro combinado (al seleccionarlo aparece una lista con valores posibles pero que no es posible agregar otro). 

Esta combinación de 2 campos permite realizar la siguiente acción, Si el valor para rellenar este campo está disponible en el objeto cuadro combinado,  se selecciona y el valor seleccionado se reflejará en el campo de texto. De lo contrario, si no es posible, habrá que escribir el valor en el campo de texto directamente. Esto representa una ayuda importante para ingreso de datos por dispositivos táctiles


Combinación campo de texto y cuadro combinado antes de asignarle un valor


Fig 90 Combinación campo de texto y cuadro combinado seleccionando valor desde cambo combinado.


Fig 91 Combinación campo de texto y cuadro combinado con el valor del campo combinado.



En el caso de que no esté un valor predefinido es posible escribirlo directamente en el campo de texto



Fig 92 Combinación campo de texto y cuadro combinado escribiendo en campo de Texto un nuevo valor.




CAMPO DE TEXTO+CALENDARIO



Fig 93 Campo de Texto con calendario.





TABLA DE DATOS (DATA TABLE)



Elementos gráficos especialmente concebidos para visualizar y  manipular tablas contenidas en las bases de datos


Por ejemplo se tiene el siguiente uso del elemento Tipo GRID (tabla de datos) para desplegar tabla de usuario

Fig 94 Elemento tipo TABLA DE DATOS.


 



PESTAÑA


Permiten agrupar vistas y niveles de decisión. Cada vez que se selecciona una determinada Pestaña, el recuadro inmediatamente posterior cambia.

Esto permite variar rápidamente el contenido y/o Agrupar la información de acuerdo a la selección dada

El empleo del Elemento tipo PESTAÑA es muy útil cuando se emplea dispositivos móviles.


La siguiente imagen muestra una serie de opciones agrupadas en 3 niveles de decisión. 

Fig 95 Elemento tipo PESTAÑA con distintos niveles de decisión.


PANEL


El panel es un elemento gráfico que permite envolver otros. Generalmente tiene un encabezado de otro color y una línea rodea lo que abarca el panel. El panel como tal tiene una serie de opciones que permiten, tales como:

  • Cerrar , al presionar el ícono el panel se cierra y su contenido desaparece de tamaño
  • Aumentar , al presionar el ícono el panel aumenta de tamaño alcanzando la pantalla, se usa para resaltar el contenido
  • Disminuir , al presionar el ícono el panel se disminuye a solo ícono con el título del panel
  • Refrescar , al presionar el ícono se refresca el contenido del panel. util para restablecer a un valor inicial si se ha cambiado su contenido con opciones
  • Desprender , al presionar el ícono desprende el pantalla el panel, tomando una forma como de "Flotante". Esto permite por ejemplo ajustar el tamaño de su contenido en el caso de gráficos.

Fig 96 Extracto de pantalla mostrando panel disminuido


Fig 97 Extracto de pantalla mostrando panel "flotante".




PERSIANA


El elemento  tipo "PERSIANA" permite agrupar de manera compacta la información. 

En un comienzo de muestran los Ítems principales. Al seleccionar uno de ellos, éste se expande y se podrá ver el contenido respectivo. Seleccionando otro se podrá ver otro contenido 



Un ejemplo práctico, lo constituye las opciones de Configuración de una Orden de Trabajo se emplea para agrupar los parámetros de esta. En la primera imagen se aprecia la FAMILIA DE INSPECCIÓN "contraída"


Fig 98 Elemento PERSIANA todos los  elementos contraídos.





 En la segunda imagen se aprecia la FAMILIA DE INSPECCIÓN "expandida", en donde se aprecian los parámetros de esta.


Fig 99 Elemento PERSIANA con un elemento expandido.




EDITOR DE TEXTOS


Amplia la capacidad de ingresar un texto ya que permite el uso de formato como por ejemplo una lista


Fig 100 Editor de textos con lista de descripción.

 




TOMAR FOTOS, SUBIR ARCHIVOS

Con Objeto de Tomar fotos y/o subir multimedia se emplea una serie de librerías que permiten cargar en el servidor la información que se captura por medio de una Cámara, o se cargue al servidor

Cada vez que se desee tomar fotos, aparecerá la siguiente interfaz

Fig 101 Interfaz para subir archivos.


Para subir archivos se emplea

Hay que destacar que la interfaz para subir archivos, 



GRÁFICOS


Para realizar gráficos se emplean librerías de gráficos especializadas, disponibles generalmente en Java Script y que lean resultados de bases de datos.


Hay muchas maneras de hacer un gráfico, con series, con constantes. etc.

Por ejemplo los gráficos de control de avance de una determinada orden de trabajo pueden verse en la siguiente imagen


Fig 102 Ejemplo de gráfico generado.




MENU DE OPCIONES GRÁFICA


Los gráficos empleados generalmente tienen un menú gráfico que lo aporta la misma librería gráfica y que permite realizar algunas acciones con los gráficos, las mas comunes.


Fig 103 Extracto de pantalla con opciones menú Gráfico.






Icono

Descripción

Junto al gráfico se muestra una tabla con datos, dependiendo del permiso de usuario es posible modificar datos en esa tabla para visualizar tendencias.

Se representa la información en Gráfico de Líneas

Se representa la información en Gráfico de Barras

Se restauran cambios si los hubo (se vuelve a leer del origen)

Permite Descargar imagen del Gráfico en formato PNG.



SERIES DE DATOS

Es posible agrupar series de datos en un gráfico, a lo que se muestra con un recuadro de las series


Fig 104 Extracto de pantalla con opciones de Series de Datos.


Cada serie de datos tiene un nombre y un símbolo con un color, que representa la linea del gráfico empleada. Al seleccionar sobre el icono es posible desactivar la serie, el icono será gris y el contenido del gráfico cambiará