Ejemplo Forms v5
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 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, editar y borrar Proyectos y sus archivos
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.
Crear Proyecto
Luego de entrar con credenciales de supervisor al portal y abrir el diseñador nos abrirá una pestaña como la siguiente, donde la pagina de inicio sera la de crear un nuevo form.
Tan sencillo como ponerle el nombre y dándole clic a crear nuevo ya tendremos un nuevo formulario.
Al darle Crear nuevo, nos mostrará en el menú una carpeta con el nombre del proyecto y sus archivos.
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.
.appcache
Y por ultimo un archivo appcache, el mismo permite que el desarrollador especifique los archivos (html, css, etc) que el browser debe almacenar en cache.
Mejorando su performance.
Los únicos archivos que vendrán con contenido por defecto serán los .html y el .appcache.
Ejemplo de Vista diseño HTML
Por defecto con la opción de Vista Código del HTML.
Agregar Archivos
A la hora de querer Agregar un archivo nos dará la opción de agregar archivos .js .sql y .css.
En este caso agregaremos un archivo .css haciendo clic en 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 config
IMPORTANTE: Por cada archivo ingresado deberá agregarse su link en casos de .css o su script en caso de .js al Config.
En la proxima imagen se verá que en el archivo donde estamos editando aparecerá en color rojo, eso quiere decir que no se han guardado las modificación del archivo.
Eliminar Archivos
Para eliminar archivos debes tener seleccionado el archivo a eliminar, y seleccionar el icono de tacho de basura, saltará un poppup 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.
Subiremos un CSS que realice en otra GUI y deseo tenerlo en este proyecto del diseñador.
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.
Si miramos en la vista de código html nos agregará por cada elemento un div, en este caso agregamos un label y un select (combo box), en la siguiente imagen
el código que nos agrego esta seleccionado.
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.
El portal por defecto contiene 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 metodos debera ir a a documentación del 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 session posee datos (la variable de session nos sirve para no tener que consultar en el servidor cada vez.), si tiene usaremos el full select con el array guardado en la session, 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 session 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.