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 Forms, 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 Forms es necesario ingresar al portal con permisos de supervisor, en el menú tendremos la opción de diseñador de formularios.

Open

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 click sobre el.

Al crear un nuevo proyecto, la pantalla principal será de la siguiente manera.

Archivos que se crean por defecto en el proyecto.

.SQL

Nos creará un archivo .SQL por defecto, la función que cumple este archivo es la de poder relacionar todo lo que necesita el form de una Base de Datos, desde creación de tablas, Insert, etc.

.JS

Un archivo .JS que es donde irá la lógica del form en su lenguaje correspondiente JavaScript.

Config.html

Otro de los archivo que nos creará, es config.html, el mismo se encarga de relacionar toda la confguración del form, desde plugins necesarios, JS, hojas de estilo etc.

.HTML

También nos creará un HTML, que será la interfaz del form.

.JSON

Y por último, aparecerán dos archivos con esta extensión, los cuales se utilizan para internacionalizar el Form. Aparte de estos dos en Inglés y Español, podrán crearse 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

A la hora de querer Agregar un archivo nos dará 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á primero completar el nombre y al elegir el tipo ya lo creara.

Listo agregara el archivo .css.

Agregar al archivo .config

IMPORTANTE: Por cada archivo ingresado deberá 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 encontrará en color rojo, esto se debe a que se hicieron cambios y los mismos 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, un objeto puede ser en nuestro caso una fruta o una verdura.

En el archivo NOMBREPROYECTO.js aparecerán las siguientes líneas:

Para poder utilizar la internacionalización, se debe descomentar y borrar la primer línea.
Ejemplo:

Eliminar Archivos

Para eliminar archivos debes tener seleccionado el archivo a eliminar, y seleccionar el icono de tacho de basura, saltará un pop-up con la opción si se desea borrar. 

De la misma forma pero posicionado en 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, también imágenes, .JPG .PNG etc.

Por ejemplo, podemos subir un CSS que realice en otra GUI y deseo tenerlo en este proyecto del diseñador.

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 form, debajo se agregara un Combo Box donde se alojará la lista de los agentes del sistema, los controles se agregarán arrastrando 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 de este 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 el cual llamaremos cmbAgentes para poder alojar mediante código .js el listado de agentes del sistema.

Ya teniendo el combo box con identificador podremos empezar con la lógica en el archivo JS del proyecto.

En el recuadro de Traducción, el usuario añadirá el valor que fue escrito en el combo box traducido al idioma deseado.

El portal por defecto 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 Integra Framework. 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 ayudara a agregar los agentes al combo.

Es sencillo, 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, sino 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 lo datos queden guardados en el servidor. 

Vista desde el Portal

Lo siguiente será asignar un form a una campaña para verlo desde el portal, se deberá ingresar al portal mediante un usuario supervisor entrar a campañas y asignarle el form a una.

También deberemos asignar a la campaña el agente con cual vamos a ingresar a ver el form.

Para ver ejemplos de los demás controles descargar el Template que se encuentra al principio de la documentación.