Contenido
| Table of Contents |
|---|
...
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
Actualactual
click
Muestra los archivos que el usuario abrió, los cuales podrá cerrar haciendoclic 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
click
En la parte superior de esta sección, el usuario podrá realizar una búsqueda en todos los archivos del proyecto. Cuando se haceclic 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
click
El usuario tendrá un historial con los cambios hechos en el formulario, al hacerclic 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
Vistavista: Cambiar vista de diseño a vista de código o viceversa.
Deshacer
Cambioscambios: Deshace los cambios realizados por el usuario.
Rehacer
Cambioscambios: Rehace los cambios realizados por el usuario.
Borrar
Elementoelemento: Borra el elemento seleccionado.
Mostrar
Ocultosocultos: Muestra los elementos que se encuentran ocultos.
Ocultar
Ocultosocultos: Deja de mostrar los elementos que tienen la opción de oculto activada.
Alinear
Izquierdaizquierda: Este botón alineará todos los elementos seleccionados hacia el elemento que esté más a la izquierda.
Alinear
Arribaarriba: Este botón alineará todos los elementos seleccionados hacia el elemento que esté mas arriba.
Copiar
Elementoselementos: 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 clic en ellos, y los mismos podrán ser movidos en conjunto. Para deseleccionarlos el usuario debe clickear clicar 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.
...
...
| Info |
|---|
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.
...
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 control ListBox permite a los usuarios seleccionar uno o varios elementos de una lista predefinida. Se diferencia de un control combobox en 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 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.
...
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.
...