Template

ProyectoPrueba.zip

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.

Open

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

Open

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

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:

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.

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.