Diseñador de Forms v5
- Daniel Olivera (Unlicensed)
- Anonymous
- 1 Introducción
- 1.1 Menú general
- 1.2 Menú de controles
- 1.3 Menú propiedades
- 1.4 Uso de Controles
- 1.4.1 Contenedor
- 1.4.2 Campo de Texto
- 1.4.3 Contraseña
- 1.4.4 Label
- 1.4.5 ComboBox
- 1.4.6 ListBox
- 1.4.7 TextArea
- 1.4.8 Tabla
- 1.4.9 CheckBox
- 1.4.10 Calendario
- 1.4.11 Botón
- 1.4.12 Subir Archivo
- 1.4.13 Imagen
- 1.4.14 Iconos
- 1.4.15 Personal
- 1.4.16 Contenedor Gráfica
Introducción
En este documento se explicarán los detalles del diseñador de formularios junto sus funciones.
Al ingresar se vera la pantalla de inicio donde se puede crear un nuevo proyecto o editar uno existente.
Para crear un nuevo proyecto basta con ingresar un nuevo nombre y presionar el botón "Crear nuevo"
Menú general
A la izquierda de esta pantalla se puede ver el menú general que se divide en tres sectores:
Controles
Contiene todos los elementos que se van a utilizar en la creación de nuestro proyecto como por ejemplo Botones, Labels, Checkbox etc.
Proyecto actual: Muestra el proyecto en el cual se esta trabajando actualmente con todos los archivos del mismo.
Proyectos
Muestra todos los proyectos del sistema. En caso de que haya un proyecto abierto actualmente se mostrará con una carpeta abierta.
Sobre la parte superior izquierda de la pantalla se pueden observar los siguientes botones:
De izquierda a derecha:
1- Nuevo proyecto.
2- Nuevo archivo.
3- Subir archivo.
4- Borrar archivo o proyecto.
A continuación el siguiente panel de botones ubicado en la parte superior derecha.
De izquierda a derecha:
1- Control de versiones del proyecto.
2- Guardar Archivo (Deploy).
3- Descargar proyecto.
Al abrir el archivo .html principal de nuestro proyecto (el maquetado del mismo) se visualizará otro panel de botones :
De izquierda a derecha:
1- Cambiar vista (cambiar vista de diseño a vista de código o viceversa).
2- Eliminar elemento.
3- Ver elementos ocultos.
4- Ver elementos no ocultos.
5- Alinear elementos a la izquierda (este botón alineará todos los elementos seleccionados hacia el elemento que esté más a la izquierda).
6- Alinear elementos hacia arriba (este botón alineará todos los elementos seleccionados hacia el elemento que esté mas arriba).
7- Copiar elementos.
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.
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.
Uso de Controles
Los controles se insertarán todos de la misma forma, arrastrándolos hasta nuestro formulario.
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
Contenedor Gráfica
El contenedor de Gráficas nos agregara un div en el html para poder crear gráficas.