Sección Formulario

Este tipo de secciones permite incluir un formulario de HTML en una página o zona de Kanecode.
Tiene un par de pestañas con opciones de configuración que no son comunes al resto de las secciones, ellas son 'Opciones' y 'Formulario', y se describen a continuación:
Opciones
Aquí se definirán algunas características generales del formulario.

1372
De la pantalla anterior se pueden ver las siguientes secciones:
Guardar los cambios.
Enlace En este apartado se define a que zona, página o URL será enviado el formulario cuando se haga un "submit", en otras palabras, define la propiedad "action" del formulario.

Zona Se elige si el destino es una zona.

Página Se elige si el destino es una página.

URL Se elige si el destino es un recurso externo a Kanecode, o una carpeta virtual.

Abrir en ventana nueva Se marca si se quiere que el destino se muestre en otra ventana que se abra como un pop up.

Título Texto que aparecerá en el tooltip al poner el puntero del ratón encima del enlace.

Destino Se indica el Target de la página de destino si fuera aplicable.

URL amigable Desde aquí podemos modificar el path que generan las URLs amigables usando funciones Kanecode, valores de campos, o cualquier expresión valida. Si la expresión que se usa para este path empieza por '/', el valor del path se sustituirá por completo. Por el contrario, se añadirá la expresión al final del path definido por la URL amigable.

Versión simplificada Si me marca esta opción se utilizaran tablas HTML para desplegar los campos del formulario en la página resultante, por defecto los formularios se muestran en las páginas utilizando capas. Al utilizar tablas en este punto puede que se sacrifique algo de flexibilidad en el diseño, ya que no es posible posicionar los campos de manera exacta, pero permite desplegar el formulario sin problemas a navegadores limitados (como navegadores de alguna PDA por ejemplo).
Dos maneras de distribuir los mismos elementos en una forma, el de la izquierda más flexible en cuanto al posicionamiento si se compara con el de la izquierda (versión simplificada).


Eventos Define Acciones en JavaScript para cada posible evento que puede ocurrir sobre el formulario. Para definir las acciones debe elegirse el evento de entre la lista desplegable que se muestra y acto seguido agregar el código en el recuadro de texto, luego salvar. Lo más común para formularios es definir acciones para el evento OnSubmit.
1362
En la Pantalla de formularios se pueden encontrar los siguientes botones:
agregar etiquetas.
agregar un campo de texto.
crear un enlace.
agregar al formulario una imagen.
agregar un área de texto.
agregar un check box.
agregar una lista desplegable.
agregar botones al formulario.
agregar un "radio button".
Para Eliminar un elemento es necesario arrastrarlo hasta encima de la cesta de basura.
Mostrar cuadricula Muestra o Esconde la retícula sobre el área que ocupa el formulario.
Ajustar a cuadrícula Si se activa esta opción se desplazarán los controles agregados, hasta que los bordes izquierdos e inferiores coincidan con las líneas (de la retícula de ayuda al diseño) que estén más próximas.
Crear Z-index automático Define de manera automática los valores de esta propiedad para cada control. La propiedad z-index indica que control se mostrará sobre otro en caso de solapamiento.
Crear Tab-index automático Define de manera automática los valores de esta propiedad para cada control. Define el orden de navegación por los controles utilizando el tabulador.

*#Manejos de eventos

A continuación se mostrarán las pantallas para configurar cada tipo de elemento que puede agregarse al formulario, y se comentarán las opciones de cada pantalla. Hay una opción que parecerá en todas, esa es la definición de "handlers" o manejadores de evento, lo cual es definir una serie de acciones en javascript que permitirán responder ante acciones de los usuarios sobre los elementos de un formulario.

  • Eventos: Para agregarse código para manejar un evento debe primero seleccionarse el evento que se quiere capturar. Luego se agrega el código, que debe ser javascript.
    Se debe agregar sólo el cuerpo del manejador (la secuencia de instrucciones sin definición de funciones), Kanecode se encargará de meter esas acciones en funciones que se llamen cuando ocurra el evento.
    Cuando exista código definido para un evento se marcará en negritas el nombre del evento en la lista.

Select Editor

Se utiliza para definir propiedades de un elemento del tipo “Select” que despliega una lista de elementos. Al hacer doble clic sobre un elemento de este en el formulario, se abrirá una ventana como la siguiente, donde se podrán configurar algunas propiedades, eventos y valores de este objeto.

747
Propiedades
Atributo Nombre que tendrá el elemento “select” en el HTML.
Valor por defecto El valor que tendrá esta lista como valor seleccionado en caso de que no se seleccione ningún ítem.
Anchura Define el ancho que tendrá este elemento.
Z-Index El Orden de apilamiento en caso de los elementos se superpongan, es posible indicar el orden en que lo han de hacer, el Z-index mayor estará sobre un elemento con z-index menor.
Tooltip Muestra un pequeño recuadro con el texto que se especifique en este campo cuando el cursor pase sobre este elemento.
ID Asigna un identificador al elemento.
TabIndex Indica el orden de tabulación entre los elementos del formulario, es decir, define el orden en que se recorrerán los diferentes campos del formulario usando la tecla de Tabulación. Los valores de este campo han de ser números enteros y usando el tabulador el cursor se irá desplazando de los campos con menor índice de tabulación a los que tienen un mayor índice.
Múltiple Si se podrá seleccionar más de un ítem de la lista
Size Permite indicar cuantos ítems serán visibles a la vez, es decir cuántos ítems podrán ver el usuario sin utilizar las barras de scroll.
Fuente Permite definir Fuentes y estilos para los nombres de los elementos que se muestran en este control.

Valores

Esta opción permite elegir la fuente de donde se obtendrán los valores a mostrar en la lista.

  • Valores definidos en una tabla Si se elige esta opción los elementos que se listen se sacarán de una tabla que se haya configurado en la Kanecode. Se abrirá una ventana como la que se muestra a continuación. Hay dos formas de definir la consulta a la tabla, utilizando un asistente Kanecode (Estilo Kanecode) o consulta directa a bases de datos (Query SQL).

Si se usa el estilo Kanecode se tendrá la siguiente pantalla:

541

El Primer paso debe ser elegir la tabla fuente, luego guardar.
Una vez que se ha elegido la tabla se podrán ver los botones de agregar campo o quitar campo, agregar los campos que se necesiten para alimentar la lista, tanto los usados para valores como para descripciones. Guardar después de agregar los campos y cerrar esta ventana.

De vuelta en la ventana 'Select Editor' ahora se mostrarán dos etiquetas Valor y Descripción, y debajo de cada una de ellas una lista con los campos que se agregaron, ahí se debe elegir que campos se mostrarán en el valor y cuales en la descripción. Recordar grabar después agregar cada campo en alguna de las listas.
Si se utiliza el modo de Query SQL, se tendrá la siguiente pantalla:

Y se permitirá agregar una consulta en SQL, se deberá guardar y cerrar esta ventana. En el 'Select Editor' se mostrarán dos etiquetas Valor y Descripción, y debajo de cada una de ellas un lista con los campos que se usaron en la consulta.

527

#Button Editor

Al hacer doble clic sobre un elemento del tipo botón que se haya agregado al formulario, se abrirá una ventana como la siguiente, donde se podrán configurar algunas propiedades, eventos y valores de este objeto.

596
Podrás encontrar lo siguiente:
* Nombre El texto que aparecerá en el botón.
* Valor El valor que pasará este elemento a la página destino del formulario.
* Tooltip Muestra un pequeño recuadro con el texto que se especifique en este campo cuando el cursor pase sobre este elemento.
* ID Asigna un valor de identificación al elemento del formulario.
* Tab Index Indica el orden de tabulación entre los elementos del formulario, es decir, define el orden en que se recorrerán los diferentes campos del formulario usando la tecla de Tabulación. Los valores de este campo han de ser números enteros, y usando el tabulador el cursor se irá desplazando de los campos con menor índice de tabulación a los que tienen un mayor índice.
Tipo Define el tipo del botón. Puede ser de 3 tipos:

"Button": Un botón corriente.

"Submit": Al hacer clic sobre este tipo de botón se enviaría el formulario.

* "Reset": Al hacer clic sobre este tipo de botón se limpiaría los campos del formulario.
Z-Index El orden de apilamiento en caso de los elementos se superpongan, es posible indicar el orden en que lo han de hacer, el Z-index mayor estará sobre un elemento con z-index menor.
Fuente Define fuente y estilo para el botón.

Radio Editor

Ventana que se mostrará al hacer doble clic sobre un elemento de tipo radio que se encuentre en el formulario.

625
Podrás encontrar lo siguiente:
Atributo Nombre del elemento radio dentro del formulario, si se nombran dos o más radios con el mismo nombre, se estará diciendo que son exclusivos, es decir se estará obligando a seleccionar solo uno de ellos.
Valor Lo que se asignará al botón en la propiedad “Value”, al enviarse el formulario. Será el valor que se reciba en la URL de destino.
ID Asigna un valor de identificación al elemento del formulario.
Tooltip Muestra un pequeño recuadro con el texto que se especifique en este campo cuando el cursor pase sobre este elemento.
TabIndex Indica el orden de tabulación entre los elementos del formulario, es decir, define el orden en que se recorrerán los diferentes campos del formulario usando la tecla de Tabulación. Los valores de este campo han de ser números enteros, y usando el tabulador el cursor se irá desplazando de los campos con menor índice de tabulación a los que tienen un mayor índice.
¿Seleccionado? Indica si debe aparecer este control marcado como seleccionado por defecto o no.
Z-Index El Orden de apilamiento en caso de los elementos se superpongan, es posible indicar el orden en que lo han de hacer, el Z-index mayor estará sobre un elemento con z-index menor.

Check Editor

Ventana que se muestra al hacer doble clic sobre un elemento de tipo check en el formulario.

472
Podrás encontrar lo siguiente:
Texto Valor que se muestra en la etiqueta.
Valor El valor que tendrá este control y que enviará a la URL destino.
ID Asigna un valor de identificación al elemento del formulario.
Z-Index El Orden de apilamiento en caso de los elementos se superpongan, es posible indicar el orden en que lo han de hacer, el Z-index mayor estará sobre un elemento con Z-index menor.
Tab Index Indica el orden de tabulación entre los elementos del formulario, es decir, Define el orden en que se recorrerán los diferentes campos del formulario usando la tecla de Tabulación. Los valores de este campo han de ser números enteros, y usando el tabulador el cursor se irá desplazando de los campos con menor índice de tabulación a los que tienen un mayor índice.
¿Seleccionado? Si por defecto este control aparecerá como marcado.

Label Editor

Esta ventana se mostrará cuando se haga doble clic en un control del tipo label o etiqueta.

852
Podrás encontrar lo siguiente:
Texto El texto que se mostrará en los controles de tipo etiqueta.
For Asocia la etiqueta con un control específico. El valor de este atributo debe coincidir con el atributo "id" del control asociado.
Tooltip Texto que se mostrará al pasar el ratón sobre esta etiqueta.
Z-Index El Orden de apilamiento en caso de los elementos se superpongan, es posible indicar el orden en que lo han de hacer, el Z-index mayor estará sobre un elemento con z-index menor.
Fuente Definición de estilos para la etiqueta.

Field Editor

Esta ventana se mostrará al hacer doble clic sobre un campo en la pestaña formulario.

526
Podrás encontrar lo siguiente:
Atributo Nombre de este elemento dentro del formulario.

Valor por defecto Valor que aparecerá en el recuadro de texto al visualizar el formulario.
Tooltip Texto que se mostrará al pasar el ratón sobre esta etiqueta.
Id Asigna un valor de identificación al elemento del formulario.
Fuente Definición de estilos para este campo.
Z-Index El Orden de apilamiento en caso de los elementos se superpongan, es posible indicar el orden en que lo han de hacer, un Z-index mayor se mostrará sobre un elemento con Z-index menor.
Tab Index Indica el orden de tabulación entre los elementos del formulario, es decir, Define el orden en que el usuario recorrerá los diferentes campos del formulario usando la tecla de Tabulación. El valor de este campo ha de ser un número entero, y usando el tabulador el cursor se irá desplazando de los campos con menor índice de tabulación a los que tienen un mayor índice.
Tipo campo Hay tres posibles tipos de campos:

Texto: Habilita una caja de texto normal.

Contraseña: Cada carácter del texto que introduce el usuario se muestra en el recuadro con un asterisco, el uso más común es para solicitar algún tipo de contraseñas o algo parecido.

* Oculto: Si se define como campo oculto se mostrarán los valores siguientes.
Read Only Si se activa este atributo, se fuerza que el valor de este control no sea editable.
Anchura Se puede explicitar en este campo el número de píxeles que deberá tener este campo al mostrarse.
Max. Anchura Número máximo de caracteres que puede introducirse en este campo.

Textarea Editor

Ventana que se mostrará cuando se haga doble clic sobe un elemento del tipo "Text area".

473
Podrás encontrar lo siguiente:
Atributo Nombre de este elemento dentro del formulario.
Valor Por Defecto Valor inicial que se mostrará al visualizar el formulario.
Columnas Este campo indica la anchura del control, expresada en caracteres. Es un límite visual, es decir, la longitud del valor dentro del control no estará acotada por los valores de la propiedad columnas.

Filas Este campo indica el límite “visual” en cuanto al número de filas que se mostrarán. De la misma manera que pasa con el campo Columnas, este valor no es una cota del valor del control.
Fuente Permite definir un estilo para este control.
Tooltip Texto que se mostrará al pasar el ratón sobre esta etiqueta.
Id Asigna un valor de identificación al elemento del formulario.
Z-Index El Orden de apilamiento en caso de los elementos se superpongan, es posible indicar el orden en que lo han de hacer, un Z-index mayor se mostrará sobre un elemento con Z-index menor.
Tab Index Indica el orden de tabulación entre los elementos del formulario, es decir, define el orden en que el usuario recorrerá los diferentes campos del formulario usando la tecla de tabulación. El valor de este campo ha de ser un número entero, y usando el tabulador el cursor se irá desplazando de los campos con menor índice de tabulación a los que tienen un mayor índice.

Link Editor

Este tipo de control permitirá crear un enlace sobre el elemento. Esta ventana se mostrará al hacer clic sobre un control del tipo link.

455
Podrás encontrar lo siguiente:
Texto El texto que se mostrará al usuario y sobre el cual se creará el enlace.
Enlace URL destino del enlace que se muestra.
Z-Index El Orden de apilamiento en caso de los elementos se superpongan, es posible indicar el orden en que lo han de hacer, un Z-index mayor se mostrará sobre un elemento con z-index menor.
Tooltip Texto que se mostrará al pasar el ratón sobre esta etiqueta.
Fuente Permite definir el estilo que se aplicará al texto que tiene el enlace.