Ejemplo de formulario
- 1.1 Template
- 1.2 Introducción
- 2 Pasos para crear proyectos
- 2.1 Crear Proyecto
- 2.2 Archivos que se generan por defecto en el proyecto
- 2.2.1 .SQL
- 2.2.2 .JS
- 2.2.3 Config.html
- 2.2.4 .HTML
- 2.3 Ejemplo de vista diseño HTML
- 2.4 Archivos del proyecto
- 2.4.1 Agregar archivos
- 2.4.1.1 Agregar al archivo .config
- 2.4.1.2 Agregar archivos .JSON
- 2.4.2 Eliminar archivos
- 2.4.3 Subir archivos
- 2.4.1 Agregar archivos
- 2.5 Editar proyecto
Template
Introducción
A continuación como modo de ejemplo se indicará como crear, editar y borrar un proyecto y sus archivos en el diseñador de formularios, paso a paso.
También veremos un ejemplo de lógica de como cargarle datos en un form a un control Combo Box y su vista en el portal.
Pasos para crear proyectos
Para abrir el diseñador de formularios es necesario ingresar al portal con permisos de supervisor, en el menú tendremos la opción de diseñador de formularios.
Crear Proyecto
Luego de entrar con credenciales de Supervisor al portal y abrir el diseñador, nos llevará a una pestaña como la siguiente.
Aquí se podrá crear una nueva Encuesta, nuevo Formulario o Abrir uno.
Para crear uno nuevo, el usuario deberá escribir el nombre del mismo y elegir una de las dos opciones.
Si el usuario quiere abrir un proyecto ya creado, solo debe buscarlo por su nombre y hacer clic sobre él.
Archivos que se generan por defecto en el proyecto
.SQL
Nos crea un archivo .SQL por defecto, la función que cumple este archivo es la de poder relacionar todo lo que necesita el formulario de una base de datos, desde creación de tablas, insert, etc.
.JS
Un archivo .JS que es donde irá la lógica del formulario en su lenguaje correspondiente JavaScript.
Config.html
Otro de los archivos que nos produce, es config.html, el mismo se encarga de relacionar toda la configuración del formulario, desde plug-ins necesarios, JS, hojas de estilo etc.
.HTML
También nos genera un HTML, que será la interfaz del formulario.
.JSON
Y por último, aparecerán dos archivos con esta extensión, los cuales se utilizan para internacionalizar el formulario. Aparte de estos dos en Inglés y Español, podrán producirse para otros idiomas.
Nota: Los únicos archivos que vendrán con contenido por defecto serán los HTML y JSON.
Ejemplo de vista diseño HTML
Por defecto con la opción de vista código del HTML.
Archivos del proyecto
Agregar archivos
Tenemos la opción de agregar archivos .JS .SQL .CSS y .JSON.
En este caso agregaremos un archivo .CSS haciendo clic en icono de Nuevo archivo.
Saltará un pop-up donde se le deberá completar el nombre y al elegir el tipo de archivo.
Una vez listo esto, se agregará el archivo .css.
Agregar al archivo .config
IMPORTANTE
Por cada archivo ingresado debe agregarse su link en casos de .css, o su script en caso de .js, al config.
Por motivos de evitar futuros errores o mal funcionamiento, añadirlo preferiblemente debajo de la línea que dice lo siguiente:
El resultado de nuestro cambio será el mostrado en la imagen de abajo y notaremos que el nombre del archivo se encuentra en color rojo, esto se debe a que se hicieron cambios que no han sido guardados.
Agregar archivos .JSON
Para crear otros archivos de traducción, el archivo debe llamarse NOMBREPROYECTO-es (español), NOMBREPROYECTO-en (inglés), NOMBREPROYECTO-pt (portugués).
Dentro del archivo debe contener las siguientes líneas:
{
“NOMBREPROYECTO”: {
"KEY1":"Value1",
"KEY2":"Value2"
}
}Una de las mayores ventajas que tiene el uso de JSON es que puede ser leído por cualquier lenguaje de programación. Como muestra nuestra estructura de código inicial, para asignar a un nombre un valor debemos usar los dos puntos ':', este separador es el equivalente al igual ('=') de cualquier lenguaje.
Por otro lado, los objetos JSON se identifican entre llaves.
En el archivo NOMBREPROYECTO.js aparecerán las siguientes líneas:
Para poder utilizar la internacionalización, se debe descomentar y borrar la primera línea.
Eliminar archivos
Para eliminar archivos debes tener seleccionado el archivo y seleccionar el icono de tacho de basura, saltará un pop-up para confirmar que realmente se quiera borrar el archivo.
De la misma forma, pero posicionado el proyecto, se puede eliminar el proyecto.
Subir archivos
También tenemos la opción de subir un archivo al proyecto.
Se podrán subir archivos .JS .CSS .SQL, y también imágenes (JPG, PNG, etc.).
Editar proyecto
Ejemplo Combo Box, Integra Framework y su vista en el portal
A continuación veremos un ejemplo de cómo agregar, en un combo, los agentes del sistema.
Agregamos un controlador Label para el título del formulario, debajo se agrega un combo box donde se aloja la lista de los agentes del sistema. Los controles se agregan arrastrándolos hacia el contenedor.
Automáticamente, cuando añadimos un elemento en la vista de diseño .html, se agregará su respectivo código, siendo este por cada elemento un div con su información.
Si seleccionamos un elemento y nos dirigimos a la vista de código HTML, nos mostrará seleccionada la línea en la cual se encuentra el código del elemento, como se muestra en la siguiente imagen.
Mediante esta vista también podremos agregar, editar y borrar elementos.
Volviendo a la vista anterior, dando doble clic sobre el combo box se abrirán las propiedades del mismo, le daremos un identificador, que llamaremos cmbAgentes, para poder alojar mediante código .js el listado de los agentes del sistema.
Ya teniendo el combo box con identificador, podremos empezar con la lógica del archivo JS del proyecto.
En el recuadro de traducción, añadimos el valor que fue escrito en el combo box traducido al idioma deseado.
Por defecto, el portal tiene un archivo JS que contiene métodos que se conectan con los webServices mediante llamadas ayax, el Nombre del JS es Integra Framework.
Los métodos del Integra Framework nos devolverán tipos de datos JSON.
Si desea ver ejemplos de los métodos deberá ir a la documentación de Funciones Integra Framework.
En la lógica de nuestro JS usaremos métodos del Integra Framework (UC_getAgents, UC_fullSelect), el getAgents nos devolverá los agentes, y el fullselect nos ayudará a agregar los agentes al combo.
Iniciaremos el combo preguntando si la variable de sesión posee datos (la variable de sesión nos sirve para no tener que consultar en el servidor cada vez), si tiene usaremos el fullselect con el array guardado en la sesión, si no llamaremos al método getAgents para traer los agentes.
Y con la respuesta del getAgents llenaremos el combo y guardaremos en la variable de sesión los datos.
Le daremos deploy para que los datos queden guardados en el servidor.
Vista desde el portal
Lo siguiente es asignar un formulario a una campaña para verlo desde el portal, se debe ingresar al portal mediante un usuario Supervisor, entrar a campañas y asignarle el formulario a una.
También debemos asignar a la campaña el agente con cuál vamos a ingresar a ver el formulario.
Para ver ejemplos de los demás controles, descargar el template que se encuentra al principio de la documentación.