Vista General

Una vez creado el nuevo proyecto se verá lo siguiente.

Menú General

A la izquierda lateral de esta pantalla se puede ver el menú general que se divide en cinco sectores:

• Proyecto Actual
  Muestra los archivos que el usuario abrió, los cuales podrá cerrar haciendo click en la cruz al costado de cada uno de ellos.
  Por otro lado, aparecerán todos los archivos que se encuentran dentro del proyecto actual.
  
  
  
• Controles
  Contiene todos los elementos que se van a utilizar en la creación de nuestro proyecto como por ejemplo Botones, Labels, Checkbox etc.
  Los mismos, se insertan utilizando Drag&Drop, lo cual le facilita el uso al usuario. Siemplemente arrastro uno al contenedor en la sección de Dibujo de al lado y al soltarlo, el mismo se habrá insertado.
  
  
  
• Búsqueda
  En la parte superior de esta sección, el usuario podrá realizar una búsqueda en todos los archivos del proyecto. Cuando se hace click sobre uno de ellos, automáticamente el usuario es llevado a donde el resultado se encuentra.
  
  
  Ejemplo de búsqueda:
  
  Se puede ver como la palabra buscada se encuentra resaltada en el archivo .js para una mejor visualización.
   
• Cambios
  El usuario tendrá un historial con los cambios hechos en el formulario, al hacer click en uno de ellos, aparecerá el cambio mostrando antes y después. Al lado de cada cambio, aparecerá el icono de una flecha, con la cual el archivo volverá al estado en el cual se encuentra en el servidor.
   
  
  
• Configuración
  Controla el tamaño de letra y estilo de visualización del código ce los archivos.

Archivos

Sobre la parte superior izquierda de la pantalla se pueden observar los siguientes botones:

De izquierda a derecha:

• Nuevo proyecto
• Nuevo archivo
• Subir archivo
• Eliminar

Sincronizar

A continuación el siguiente panel de botones ubicado en la parte superior derecha.

De izquierda a derecha:

• Deploy: Guarda los cambios en el archivo que se encuentra abierto actualmente.
• Descargar: Baja el último cambio guardado del archivo.

Herramientas

Al abrir el archivo .html principal de nuestro proyecto (el maquetado del mismo) se visualizará otro panel de botones :

De izquierda a derecha:

• Cambiar Vista: Cambiar vista de diseño a vista de código o viceversa.
• Deshacer Cambios: Deshace los cambios realizados por el usuario.
• Rehacer Cambios: Rehace los cambios realizados por el usuario.
• Borrar Elemento: Borra el elemento seleccionado.
• Mostrar Ocultos: Muestra los elementos que se encuentran ocultos.
• Ocultar Ocultos: Deja de mostrar los elementos que tienen la opción de oculto activada.
  
• Alinear Izquierda: Este botón alineará todos los elementos seleccionados hacia el elemento que esté más a la izquierda.
• Alinear Arriba: Este botón alineará todos los elementos seleccionados hacia el elemento que esté mas arriba.
• Copiar Elementos: Copia los elementos seleccionados por el usuario.

Controles

Menú de Controles

Este menú contiene una lista de todos los controles o elementos que son usados en los formularios. 

Para usar los mismos en los formularios se debe de hacer clic en el control deseado y arrastrarlo hacia el contenedor donde queremos que sea posicionado.
Cuando los controladores se encuentran insertados en el área de trabajo, los mismos pueden ser seleccionados para abrir sus propiedades, ajustar su tamaño utilizando Drag&Drop y moverlo para ubicarlo donde el usuario lo desee.
El usuario puede seleccionar más de un controlador haciendo click en ellos, y los mismos podrán ser movidos en conjunto. Para deseleccionarlos el usuario debe clickear en ellos. 

Menú Propiedades

El menú de propiedades del elemento se puede abrir haciendo doble clic sobre el elemento deseado o presionando la flecha en la parte superior derecha de la pantalla.

En este menú podemos modificar las propiedades o atributos del elemento seleccionado como sea su identificador, posición vertical u horizontal, ancho y alto entre otros.

Nota: Los controles a los cuales se les puede añadir un evento, para que lo rediriga al código utilizando el botón  debe llenarse el campo de al lado, señalando una función existente en el archivo NOMBREPROYECTO.js

Uso de Controladores

Contenedor

El control Contenedor son unos recuadros o espacios rectangulares. En ellas podemos insertar contenido HTML. Su utilidad principal es visual, permitiendo organizar y dar estructura y diseño al formulario.

Por defecto el nuevo proyecto ya posee un contenedor. En caso de querer agregar otro contenedor, el mismo se debe achicar o eliminar para dar espacio a otro.

El resultado de soltar el contenedor.

Campo de Texto

En si este controlador es un cuadro de texto.

Veremos que si le damos doble clic abrimos las propiedades (o con la flecha que se encuentra en la parte superior derecha), en ellas se le podrá dar un identificador, se le podrá cambiar posiciones y tamaño, asignar un placeholder, este lo que hace es poner una palabra por defecto en la caja de texto. También dar un tabindex, es un entero que indica si el elemento puede ser enfocable. Un texto tooltip, al situar el cursor en el elemento saltará un pequeño pop-up con el texto. Además en la propiedades tendremos un checkbox donde se podrá ocultar el elemento.

Otra de las funcionalidades de la propiedad de los elementos es poder asignarle un evento. En la siguiente imagen veremos los eventos que se le pueden asignar, siempre poniéndole un nombre de referencia.

Contraseña

Esto control lo que se diferencia con el campo de texto es que en el irá una contraseña y por lo tanto queremos que cuando el usuario vaya escribiendo en el se vean asteriscos(*) en lugar de la contraseña real.

Label

Representa una etiqueta para un elemento en una interfaz de usuario, en este caso se usará como texto.

ComboBox

El siguiente control es una lista de opciones, se utiliza para mostrar datos en un cuadro combinado desplegable.

En sus propiedades se podrá asignar, un identificador, cambiar posiciones y tamaño, Además tendremos un checkbox para ocultar el elemento. 

Otra de las funcionalidades de la propiedad de los elementos es poder asignarle un evento. En la siguiente imagen veremos los eventos que se le pueden asignar, siempre poniéndole un nombre de referencia.

ListBox

El control ListBox permite a los usuarios seleccionar uno o varios elementos de una lista predefinida. Se diferencia de un control combobox en que puede mostrar varios elementos a la vez y, de manera opcional, permite que el usuario pueda seleccionar varios elementos. 

En sus propiedades se podrá asignar, un identificador, se le podrá cambiar posiciones y tamaño,y además tendremos un checkbox para ocultar el elemento. 

Otra de las funcionalidades de la propiedad de los elementos es poder asignarle un evento. En la siguiente imagen veremos los eventos que se le pueden asignar, siempre poniéndole un nombre de referencia.

TextArea

Este control define un texto de múltiples lineas en un cuadro de texto. En sus propiedades se podrá asignar, un identificador, se le podrá cambiar posiciones y tamaño, asignar un placeholder, este lo que hace es poner una palabra por defecto en la caja de texto. Dar un tabindex, es un entero que indica si el elemento puede ser enfocable. También se podrá asignar un texto tooltip, al situar el cursor en el elemento saltara un pequeño pop-up con el texto. Además en la propiedades tendremos un checkbox para ocultar el elemento.

Tabla

El controlador Tabla nos formara una tabla en la cual podremos en sus propiedades asignar, un identificador, se le podrá cambiar posiciones y tamaño, además tendremos un checkbox para ocultar el elemento. En la parte inferior de las propiedades podremos asignar las columnas de la tabla.

CheckBox

Indica si una condición determinada está activada o desactivada. Normalmente se utiliza para presentar una selección Sí/No o Verdadero/Falso al usuario. El controlador vendrá chequeado por defecto, en caso de querer des chequear se deberá hacer mediante la vista de código y modificar su propiedad.

En sus propiedades se podrá asignar, un identificador, se le podrá cambiar posiciones y tamaño, se le podrá poner un texto por defecto y Ademas tendremos un checkbox para ocultar el elemento.

Calendario

El siguiente control nos cargará elemento tipo calendario.

En sus propiedades se podrá asignar, un identificador, se le podrá cambiar posiciones y tamaño, se le podrá poner un texto por defecto y Ademas tendremos un checkbox para ocultar el elemento.

Botón 

El siguiente control nos creará un botón.

En sus propiedades se le podrá asignar un identificador, cambiar posiciones y tamaño, un estilo con su valor(color) y un texto por defecto. Ademas tendremos un checkbox para ocultar el elemento, y un icono.

Otra de las funcionalidades de la propiedad de los elementos es poder asignarle un evento. En la siguiente imagen se podrá ver los eventos que se le pueden asignar, siempre poniéndole un nombre de referencia.

Subir Archivo

Su funcionalidad es la de subir archivos locales del usuario a la hora de usar el formulario.

En sus propiedades se podrá asignar, un identificador, se le podrá cambiar posiciones y tamaño, un placeholder, este lo que hace es poner una palabra por defecto en la caja de texto. Se podrá dar además en la propiedades tendremos un checkbox para ocultar el elemento.

Imagen

El siguiente control nos permitirá agregar un div para cargarle una imagen al formulario.

Iconos

El siguiente control nos permite agregar un div para insertar un icono al formulario.

Personal

Este componente ayuda al usuario a insertar, por ejemplo, plugins.  

Contenedor Gráfica

El contenedor de Gráficas nos agregara un div en el html para poder crear gráficas.

Proyecto Actual

Cuando el usuario crea un nuevo proyecto, nos mostrará en el menú una carpeta con el nombre del mismo y sus archivos.

Nota: Los que se encuentra en color rojo, son los archivos que fueron modificados y no guardados. 

Archivos que se crean por defecto en el proyecto

• 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.

• 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.

• 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.

• HTML

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

Nota: Los únicos archivos que vendrán con contenido por defecto serán los .html y .json.