General view
Once the new project is created, the following will be visible.
General Menu
On the left side of this screen, you can see the general menu, which is divided into five sections:
Current Project
It displays the files that the user opened, which can be closed by clicking on the "X" next to each of them. On the other hand, all the files within the current project will appear.
Controls
It contains all the elements that will be used in the creation of our project, such as buttons, labels, checkboxes, etc.
These elements are inserted using Drag&Drop, which makes it easier for the user. Simply drag one to the container in the Drawing section next to it, and upon releasing it, it will be inserted.
Search
At the top of this section, the user can perform a search across all project files. When clicking on one of them, the user is automatically taken to where the result is located.
Example of search:
You can see how the searched word is highlighted in the .js file for better visualization.
Changes
The user will have a history of changes made in the form. When clicking on one of them, the change will appear showing the before and after states. Next to each change, an arrow icon will appear, which will allow the file to return to the state it is in on the server.
Settings
Controls the font size and display style of the code in the files.
Files
On the top left of the screen, the following buttons can be observed:
From left to right:
New project
New file
Upload file
Delete
Synchronize
Next, the following panel of buttons located in the upper right corner.
From left to right:
Deploy: Saves the changes in the currently opened file.
Download: Downloads the last saved change of the file.
Tools
When opening the main .html file of our project (its layout), another panel of buttons will be displayed:
From left to right:
Change View: Change from design view to code view or vice versa.
Undo Changes: Reverts the changes made by the user.
Redo Changes: Restores the changes made by the user.
Delete Element: Deletes the selected element.
Show Hidden: Displays the elements that are hidden.
Hide Hidden: Stops displaying elements that have the hidden option enabled.
Align Left: This button will align all selected elements to the leftmost element.
Align Top: This button will align all selected elements to the topmost element.
Copy Elements: Copies the elements selected by the user.
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.