MBC - Forms

© 2010 Juan Menéndez Crespo

MBC - Forms

MBC - FormsGenerador de formularios para páginas web

por Juan Menéndez Crespo

MBC-Forms es uno de los módulos de integración delsistema de creación y gestión de páginas web CMS - MBC.

El concepto ha sido desarrollado bajo ASP y MDB (Access),aprovechando las posibilidades que lenguajes como CSS,AJAX, XML y Javascript ofrecen al desarrollo de páginasWeb 2.0

All rights reserved. No parts of this work may be reproduced in any form or by any means - graphic, electronic, ormechanical, including photocopying, recording, taping, or information storage and retrieval systems - without thewritten permission of the publisher.

Products that are referred to in this document may be either trademarks and/or registered trademarks of therespective owners. The publisher and the author make no claim to these trademarks.

While every precaution has been taken in the preparation of this document, the publisher and the author assume noresponsibility for errors or omissions, or for damages resulting from the use of information contained in thisdocument or from the use of programs and source code that may accompany it. In no event shall the publisher andthe author be liable for any loss of profit or any other commercial damage caused or alleged to have been causeddirectly or indirectly by this document.

Printed: enero 2010 in Oviedo

MBC - Forms


PublisherSpecial thanks to:

Toda la gente que ha contribuido con este desarrollo ydocumentación, en especial a los clientes que a lo largo de 2008hicieron de beta-tester.Managing Editor

Technical Editors

Cover Designer

MASTERCAFE SL

Juan Menéndez Crespo

Enrique Menéndez Crespo

Iryna Ukhanova

Iryna Ukhanova

Production

Juan Menéndez Crespo

Team Coordinator

Mastercafe SL

MBC - Forms4


Tabla de Contenidos

Foreword 7

Part I Introducción 9

................................................................................................................................... 91 FAQ

................................................................................................................................... 112 Links recomendados

................................................................................................................................... 113 Historia de las versiones y revisiones

................................................................................................................................... 114 Mejoras y log de evolución

................................................................................................................................... 125 MBC-Forms frente a sus competidores

................................................................................................................................... 136 Bug's detectados y correcciones

Part II Como usarlo 16

Part III Diagrama general 19

Part IV Mantenimiento 21

Part V Mantenimiento de tablas 24

................................................................................................................................... 241 Métodos

................................................................................................................................... 242 Campos

................................................................................................................................... 253 Tipo Campos

Part VI Configuración general 28

Part VII Definición de formulario 32

................................................................................................................................... 361 Idioma en formulario

................................................................................................................................... 372 Columnas del formulario

................................................................................................................................... 383 Separador de campos

................................................................................................................................... 394 Question & Answer (Q-A)

................................................................................................................................... 395 Ejemplo de Formulario

.......................................................................................................................................................... 41Formularios incluidos de ejemplo

Part VIII Definición de campos 43

................................................................................................................................... 481 Idioma en campos

................................................................................................................................... 492 Acciones en campos

................................................................................................................................... 493 Campos encadenados

................................................................................................................................... 504 Definición de valores

.......................................................................................................................................................... 51Idiomas en valores

................................................................................................................................... 515 Ejemplos de campos

.......................................................................................................................................................... 52Campo oculto

.......................................................................................................................................................... 52Campos bloqueados

5Contenidos

5


.......................................................................................................................................................... 52Campo de texto

.......................................................................................................................................................... 53Ayuda en rótulo de campo

.......................................................................................................................................................... 54Campo de texto enriquecido

.......................................................................................................................................................... 55Campo de fecha

.......................................................................................................................................................... 55Campo de CheckBox o verificación

.......................................................................................................................................................... 56Campo de Radio o selección

.......................................................................................................................................................... 57Campo de Múltiple Radio-selección

.......................................................................................................................................................... 58Campo desplegable (SELECT)

.......................................................................................................................................................... 59Campo desplegable con OptGroup

.......................................................................................................................................................... 60Campo de archivo

.......................................................................................................................................................... 61Campo de agrupamiento FieldSet

.......................................................................................................................................................... 61Ayuda con JavaScript en celda de rótulo

.......................................................................................................................................................... 61Personalizar el rótulo

.......................................................................................................................................................... 62Personalizar el campo

.......................................................................................................................................................... 62Campo CAPTCHA (verificación humana)

.......................................................................................................................................................... 63Verificación humana

.......................................................................................................................................................... 63Doble campo de verificación de dato

.......................................................................................................................................................... 64Campo de imagen

.......................................................................................................................................................... 64Campo con imagen simple

.......................................................................................................................................................... 64Campo utilizando formato de presentación

.......................................................................................................................................................... 65Botones

.......................................................................................................................................................... 65Campo con operaciones

.......................................................................................................................................................... 65Cambiar el color del campo al foco

.......................................................................................................................................................... 66Campos encadenados

Part IX CSS en MBC-Forms 68

................................................................................................................................... 691 Ejemplos de CSS para personalización

Part X Eventos de un formulario 72

Part XI Javascript en MBC-Forms 74

Part XII Ajax en MBC-Forms 81

................................................................................................................................... 811 Validar complejidad de un password

................................................................................................................................... 812 Verificar existencia de un usuario

Part XIII Integración con MBC-SQL 83

................................................................................................................................... 831 Recomendaciones de integración

Part XIV Datos para desarrolladores 85

Part XV Utiles 87

................................................................................................................................... 871 Calendario

................................................................................................................................... 872 Filtro XSS

................................................................................................................................... 883 RTE Editor texto

.......................................................................................................................................................... 90Insertar Imágenes

.......................................................................................................................................................... 93Insertar Links

......................................................................................................................................................... 97Link de ancla

......................................................................................................................................................... 98Link de email

MBC - Forms6


.......................................................................................................................................................... 98Insertar Tabla

......................................................................................................................................................... 99Celdas

......................................................................................................................................................... 99Filas y Columnas

.......................................................................................................................................................... 100Navegar por el servidor

.......................................................................................................................................................... 100Insertar Flash

Part XVI Usando forms.asp externamente 105

Part XVII Formularios ejemplo 107

Index 108

Pagina intencionalmente en vacio

7Foreword


MBC - FormsEl generador de formularios web

Part

I

Introducción 9


1 Introducción

Bienvenidos a MBC-Forms la herramienta de creación de formularios en internet basado en ASP/JavaScript con datos MDB (Microsoft Access).

MBC-Forms permite la creación de cualquier tipo de formulario para incrustar en su página web, susistema de generación de código hace que la herramienta sea realmente fácil de utilizar para losusuarios que no disponen de conocimientos de código ASP/HTML/Javascript.

Se han incorporado funciones de Editor Dinámico (DHMTL) FCKEditor y el asistente de fechasCalendar-Jvs, ambas herramientas son de terceras partes y debe referirse a sus correspondientespáginas web para recopilar información adicional a la que se documenta en este manual.

Notas técnicas del manual:

Versión MBC-Forms 1.3.0911

Versión Web SQL

Revisión 0911.1.3

Utl. Actual. 14/01/2010

Autor Juan Menéndez Crespo

Diseño gráfico Iryna Ukhanova

Copyright Mastercafe SL - Oviedo'2010

Correcciones Enrique Menéndez Crespo

Descargas para uso Off-Line de documentación

Versión HLP Pulse aquíVersión CHM Pulse aquíVersión PDF Pulse aquíVersión EXE (e-Book) Pulse aquí

1.1 FAQ

Que es MBC?

MBC es un acrónimo de Model of Boxes and Containers o Modelo de Cajas y Contenedores.

Que es CMS?

CMS es el acrónimo de Content Management System o Sistema de Gestión de Contenidos

Porque el nombre MBC Forms?

Dado que la herramienta es solo utilizable desde MBC SQL como un módulo más de inclusión sudenominación pasaba por incluir el término MBC

Que puede incorporarse a MBC Forms?

Cualquier tipo de campo de texto, texto Dinámico, campos de verificación, campos de opción,desplegables, etc.. y todo ello permitiendo acciones en cada uno de los campos, verificación decontenidos, llamadas Ajax a otros programas para recuperar datos, etc...

Herramientas de terceras partes

MBC utiliza algunas herramientas de terceras partes como son: FCKEditor para facilitar la manipulaciónde contenidos y la adaptación a la norma UTF8 de aquellos caracteres especiales que se deseen

http://www.mastercafe.com/manualforms/download/mbcforms.hlp

http://www.mastercafe.com/manualforms/download/mbcforms.chm

http://www.mastercafe.com/manualforms/download/mbcforms.pdf

http://www.mastercafe.com/manualforms/download/mbcforms.rar

MBC - Forms10


cargar; CAPTCHA para asegurar la gestión de seguridad y habilitar un método que impida el acceso porfuerza bruta a los datos, AdobeSpry para la gestión del menú principal de mantenimiento, ShadowBoxcomo plugin extra para facilitar la gestión de medios adicionales en la web y la creación de galerias conun aspecto web 2.0, LightBox para la gestión de imágenes con aspecto web 2.0, YUI (Yahoo) en elbloque de mantenimiento para ganar en versatilidad de gestión de contenidos.

Parametrización de la aplicación

La utilidad se suministra con los formularios más habitualmente utilizados y remitiendo sus datos porcorreo electrónico a la dirección que se configure en cada uno de ellos.

Tecnologías y lenguajes que se usan

Básicamente MBC3c utiliza ASP, Javascript y CSS. No obstante se han habilitado espacios donde elusuario podrá agregar módulos y bloques nuevos que pueden cambiar la actual estructura o bienimplementar nuevas funcionalidades. El sistema está preparado para admitir librerias de Prototype,JQuery, Dojo, YUI, etc... hasta ahora no se han detectado problemas de compatibilidad con alguna deellas.

Compatibilidad con navegadores

Se han realizado pruebas en los siguientes exploradores: Internet Explorer 6.xx, 7.xx y 8.beta,Netscape Navigator 9, Opera 9.xx, FireFox 3.xx, Safari, K-Meleon, Flock, Maxthon, Google Chrome(beta). Actualmente está asegurada la compatibilidad con todos ellos y que el aspecto sea siempre elmismo. Solo se ve afectada la web cuando el cliente establece reglas propias de navegación comocambios de tipografía, colores, etc.. estableciendo su propia CSS de navegación. Tenga en cuenta quedeterminados campos y etiquetas como LABEL, BUTTON no están disponibles en exploradores comoIE6, así como ciertas características de las CSS que son interpretadas de forma diferente entre InternetExplorer, FireFox, Opera y Google Chrome/Safari.

Cuanto cuesta MBC-Forms

MBC-Forms es una herramienta que se integra solo en las páginas web alojadas en el servidor deISPActivo. Su coste es gratuito y solo debe abonar 5 euros/mensuales en concepto de actualización ysoporte. Su instalación y configuración se realiza desde el propio servidor, ofreciendo al cliente lamáxima facilidad posible en el uso e integración con su página web.

Que incorpora MBC-Forms

Según va evolucionando y se van realizando formularios de prueba, estos se entregan directamentecomo ejemplos de plantilla para los clientes siendo 100% operativos para integrar en suscorrespondientes páginas web.

Tengo problemas en la generación de un formulario da muchos errores

El generador ha querido ser lo más abierto y flexible posible, dejando al usuario poder mezclar eventos,propiedades, etc... a su criterio por todo el formulario. Eso implica que existan muchas posibilidades degenerar errores (especialmente en Javascript) en la creación del formulario. Si no ve documentado algúncampo o evento que precisa en su formulario le rogamos lo solicite para anexarlo a la documentaciónactual. El objetivo de este manual es ofrecer todas las opciones y ejemplos posibles para facilitar latarea de construcción de un formulario.

Introducción 11


1.2 Links recomendados

Actualmente no hay una web disponible que permita ver en funcionamiento los ejemplos, a lo largo de2009 estará disponible en www.mastercafe.com

1.3 Historia de las versiones y revisiones

MBC nació con la primera versión en Octubre'2008.

Rc1 - 12/2008 Versión inicial Release CandidateRc2 - 01/2009 Versión depurada lista para implementar1.0 - 02/2009 Oficialmente está publicada la primera versión de MBC Forms1.1 - 04/2009 Mejoras en los deplegables y mantenimiento general1.2 - 07/2009 Novedades en los parámetros de uso e implementación1.3 - 11/2009 Nuevos bloques de configuración, mejoradas las funciones de integración con otrasaplicaciones. Nueva versión de mantenimiento1.4 - 12/2009 Nuevos campos para integrar HTML del usuario sobre los campos y el formulario, atributosde campo del usuario y otras mejoras

1.4 Mejoras y log de evolución

Mejoras de la versión Beta 1.0rc1- Encadenar campos para crear bloques en la misma linea (Ejemplo cuenta de banco xxxx-xxxx-xx-xxxxxxxxxx)- Incorporada función de encriptado/desencriptado RC4- Inclusión de campos de control de aspecto de la tabla que configura el campo- Inclusión en campos la posibilidad de encriptar el contenido del mismo- Mantenimiento a través de ShadowBox con métodos DEBUG como en MBC-SQL/3c- Validar valores contra contenido infeccioso por XSS

Fecha 1/1/2009- Versión 1.0rc1- Nuevo campo en la definición de Campos para establecer el literal de error (resuelve necesidades paracampos encadenados)- Nueva variable para permitir configurar el aspecto del area DIV del Ajax de cada campo (AjaxPos)

Fecha 15/1/2009- Campos CAPTCHA- Encriptación de datos para texto de menos de 250 caracteres con la norma RC4- ID para mejorar la manipulación del DOM en las celdas, columnas y tablas, desde otros elementos delformulario

Fecha 1/6/2009- Asignación de respuestas o valoraciones con literales a las posibles respuestas de cuestionarios porRadio o Checkbox- Integrar varios campos/botones en la misma fila- Integración de avisos con SHBOX y/o AJAX en los campos- Mantenimiento con más ayudas en la generación de código y valores en campos- Validación de campos por tipos (email, número, texto, etc..) integrado en verificación de campos

Fecha 1/9/2009- Integración de herramientas de jQuery, así como plugins para la manipulación y gestión de campos,

http://www.mastercafe.com

MBC - Forms12


tooltips, fieldformat, etc..

Fecha 1/12/2009- Corregidos algunos bug menores en la gestión de imágenes- Agregada aplicación que abra directamente un formulario para usar en Javascript como elementoemergente o iframe

Fecha 1/1/2010- Nuevo panel de control y mantenimiento con más ayuda y campos reordenados- Nueva programación del mantenimiento basado en clases para mejorar el funcionamiento, seincorporan tooltips- Se incorpora valor de número de registros contenidos en cada subtabla para facilitar la visión de cadaformulario

Mejoras previstas en futuras versiones- Inclusión librerias Javascript para crear Sliders, TreeViews y otros nuevos elementos dinámicos paracampos- Campos desplegables del mantenimiento en tablas mantenibles por el usuario- Creación de archivos XML para integración con otras aplicaciones web

Si desea alguna mejora que no ha encontrado en la lista remita un correo a [email protected] consu solicitud lo más detallada posible.

1.5 MBC-Forms frente a sus competidores

Hemos querido extraer lo mejor de cada una de las aplicaciones a comparar y crear una lista deaquellas funcionalidades que estimamos recomendables y/o necesarias en cualquier generador deformularios.

Características disponibles

Característica no disponible

Característica parcialmente

CARACTERÍSTICAS MBC-Forms

PForm

Caspio

Encuesta Fácil

Descarga e instalación en equipo necesaria

Licencia de uso gratuita

Insertable en página web del cliente

Código fuente modificable por cliente (HTML)

Código Javascript modificable por cliente

Compatibilidad con navegadores (IE, Opera, FireFox, Safari, Flock,etc...)

Generador de formularios independientes

Encadenar formularios

Almacenar datos en base de datos del formulario

Envío de datos por correo

Almacenar datos en base de datos del cliente

Estadísticas de uso

Configuración de formulario por Clases (CSS)

mailto:[email protected]

Introducción 13


CARACTERÍSTICAS MBC-Forms

PForm

Caspio

Encuesta Fácil

Configuración de formulario por Estilos (Style)

Tecla de acceso rápido en campos/formulario

Ordenar los campos

Rótulos de campos configurables por idiomas

Area de rótulos configurable en aspecto

Area de rótulos configurable por Clases (CSS)

Area de rótulos configurables por Estilos (Style)

Campos configurables por tipo

Campos configurables en aspecto por Clases (CSS)

Campos configurables en aspecto por Estilos (Style)

Area de campo configurable por Clases (CSS)

Area de campo configurable por Estilos (Style)

Ajax por campo

Acciones por campo

Encadenar campos en línea

Encriptar datos

Uso de varios idiomas simultáneamente

Ayuda en línea por campo

Link de acceso a ayuda externa del campo

Validación del formulario incluida

Botones automáticos de Envío / Borrar

Botones automáticos de Siguiente / Anterior

Filtro de texto para código maligno en campos de texto XSS

Campos obligatorios configurables

Validación de contenido de campos e-mail

Asistente de calendario en campos fecha

Campos de texto enriquecido con editor RTE

Generador de encuestas

Interface de configuración gráfica

1.6 Bug's detectados y correcciones

08/01/2009 Corregido problema con los valores por defecto en los campos input/texto09/01/2009 Corregido controles de autobotones (Siguiente/Anterior) según contenido podía perder lanavegación09/10/2009 Corregido campos encadenados que perdían en valor en navegación09/10/2009 Corregido campos Radio con múltiples valores internos que perdían el valor en navegación09/10/2009 Corregido campos Select Option/OptGroup (ComboBox o desplegables) que perdían el valoren navegación11/10/2009 Corregido no permite dar un target distinto para los formularios embebidos15/12/2009 Corregido campos Input/Image no utiliza correctamente src en lugar de Value05/01/2010 Corregido problema de idioma en valores de campos desplegables (Select / Option)

Configurar anchos de las columnas de valores

MBC - Forms14



Part

II

MBC - Forms16


2 Como usarlo

MBC-Forms está creado como un Procedimiento y funciones en un mismo archivo ASP.

Realice un INCLUDE del módulo ASP de MBC-Forms y desde su página haga una llamada alprocedimiento bdForms (parametros, estilorotulo, estilopie,ancho,estilo)

Si se realiza desde el propio MBC-SQL simplemente seleccione el patrón de módulo BDForms e insertelos datos necesarios en los campos de personalización.

Parámetros disponibles:

PARÁMETRO VALORES DESCRIPCIÓN

idform Número Asigna el número del formulario que se desea visualizar

pag Número Asigna el número de páginas correlativas que serán mostradas

tblborder Número Asigna el tamaño del borde del formulario en pixel

tblspacing Número Asigna el espacio entre celdas

tblpadding Número Asigna el espacio interior de las celdas

usestyle 1 / 0 Asigna el uso o no de estilos propios en el módulo

bdidx Número Indice principal de búsqueda para los datos vinculados al formulario, esimprescindible este dato para poder realizar actualizaciones sobre losdatos del cliente en las fichas originalesPuede ser remitido también como una variable en la URL ejemplo: ?bdidx=510 (use & en lugar de ? si tiene otros parámetros en la URL)

sndmail 1 Activar o cancelar el envío del formulario por mail

save 1 Activar o cancelar el envío de datos a bases de datos externas

noadd 0 Evita la grabación de la información en el temporal de BDFORMS

En el caso de uso externo a MBC-SQL será necesario la asignación de variables idm y web, ya queambas son utilizadas en algunos procesos.IDM establece el idioma en el que se utilizará el formulario (por defecto se recomienda es)WEB asigna el entorno correspondiente si es que usamos varias páginas anidadas, ponga zz paracualquiera

La no asignación de idioma y web puede hacer que no se recopilen ciertos datos del calendario y EditorHTML, no pudiendo presentarse de forma correcta.Estas son las claves de idioma disponibles:af (Africano), al (Albano), bg, big5, big5-utf8, br (Brasileño), ca (Catalá), cs-utf8, cs-win, da, de (Alemán),du, el, en (Inglés), es (Español), fi (Finés), fr (Francés), he-utf8, hr (Croata), hr-utf8 (Croata UTF8), lt(Lituano), lt-utf8 (Lituano UTF8), lv, nl, no (Noruego), pl (Polaco), pl-utf8 (Polaco UTF8), pt (Portugues),ro (Romania), ru (Ruso), ru-win_ (Ruso Windows), si, sk (Eslovako), sp (Español Moderno), sv (Sueco),tr,zh, cn_utf8 (Chino Tradicional UTF8)

Nota importante:

- La mayor parte de los campos son opcionales y no es necesario rellenarlos por completo.Observe que campos precisa en cada momento para generar el formulario que desea y eviteel exceso de valores que no aportan nada. Si tiene dudas consulte los ejemplos que se

Como usarlo 17


muestran en Ejemplos de campos


Part

III

Diagrama general 19


3 Diagrama general

Todo el bloque de creación de formularios se apoya en la tabla bdForm que aporta los datos básicos decreación/configuración del mismo.

Diagrama de tablas y relaciones

Esquema general de un campo en un formulario, la tabla que lo contiene y los diferentes apartados.

Toda la relación entre tablas es de integridad referencial, por lo que al eliminar un formulario se eliminasimultáneamente todos sus detalles y esa acción no es reversible.

Diagrama de los campos y los elementos disponibles

En cada una de las zonas de un campo podemos establecer la personalización de aspecto con STYLEy CLASS, la diferencia entre ambos reside en el origen de la secuencia CSS. STYLE permite el usodirecto de estilos CSS, mientras que CLASS necesita ser definido en una hoja de estilos archivo.css ydebe estar precedido por un punto ejemplo: .miestilo , dentro de este figuran las secuencias CSSadecuadas al campo.


Part

IV

Mantenimiento 21


4 Mantenimiento

Todos los formularios de las tablas disponen de los mismos botones y funciones operativas, veamos acontinuación cuales son estas.

En la parte superior figura el nombre del proyecto MBC-BDForms, seguido del nombre de la Tabla(TABLE) y botones de exportación. Estos botones exportarán los datos disponibles por filtro en losformatos de XLS (excel), XML y CSV (Excel campos separados por comas).

A continuación vemos el bloque de ayuda de búsquedas con el campo de búsqueda (bajo el el métodode búsqueda) y a su derecha el botón de enviar búsqueda (Search(*) ), Mostrar todos los elementos(Show All) o acceso a la Búsqueda avanzada (Advanced Search)

Toda esa información pertenece a lo que se denomina bloque de cabecera de formularios demantenimiento.

El siguiente bloque pertenece al propio listado de datos, en la parte superior e inferior se repiten losmismos accesos y útiles con el fin de facilitar su uso en listados largos. Entre ambos disponemos delpropio listado de registros, encabezados por el nombre de cada campo.

La primera línea de los bloques de utilidades corresponde a la paginación de la información, Página X deX con los botones nos permiten navegar por las páginas del listado, también podemos asignardirectamente el número de la página a la que se desea acceder.A su derecha el número de registros de la base de datos y los que son mostrados.En el extremo derecho el tamaño de registros por página, en este caso vemos que son 30, utilice eldesplegable para seleccionar otro valor, una vez cambiado la propia tabla cambiará automáticamente elnúmero de registros a mostrar.

En la segunda línea disponemos de los botones de función:Add - Agregar nuevo registro

MBC - Forms22


InLine Add - Agregar nuevo registro en líneaGrid Add - Agregar registros en rejillaGrid Edit - Editar registros en rejillaDelete Selected Records - Borrar los registros marcadosUpdate Selected Records - Función de actualizado simultáneo para los registros que cumplen ciertofiltro

En el bloque del listado que está en el centro disponemos de izquierda a derecha de los siguientesbotones:Lupa - Ver el registro de la líneaLapiz y Libreta - Editar el registro de la líneaHoja-Barra - Editar en línea el registro de la líneaDoble Hoja - Duplicar el registro de la líneaHoja-Barra Estrella - Duplicar en línea el actual registro

Los siguientes links pertenecen a accesos rápidos filtrando por el registro de los datos contenidos enotras tablas, en este caso vemos acceso a Columnas de Formularios, Idioma de Formularios y Camposde Formularios (pueden variar según la tabla).

El cuadro siguiente corresponde a la marca del campo, con este selector la siguiente operación (porejemplo Borrado) se realizará sobre aquellos que dispongan de marca en este campo.


Part

V

MBC - Forms24


5 Mantenimiento de tablas

La tablas de apoyo tienen como utilidad central el simplificar la selección de elementos a lo largo detodo el mantenimiento.

Es importante reseñar que estas tablas solo deben ser manipuladas por Expertos en HTML/Form yaque su modificación puede afectar al funcionamiento general de la aplicación.

A continuación detallamos las comunes a todas las versiones de MBC-Forms:

5.1 Métodos

Básicamente un formulario permite solo dos acciones GET o POST, la diferencia reside en sirecuperamos la información del servidor o bien simplemente la enviamos. Lo habitual de un formulario esel método POST o envío de datos.

5.2 Campos

Un campo de entrada (field) puede ser INPUT, TEXTAREA, SELECT, LABEL, BUTTON (no compatiblecon IE6)El campo más habitual es INPUT que suele ser utilizado para la mayor parte de las cargas de datos encualquier formulario.SELECT equivale a los desplegables donde se muestra una lista de valores para seleccionar uno deellosTEXTAREA es un bloque de texto libre (caja de texto) que se fija a base de un ancho y un altoLABEL es una etiqueta sencilla de texto, internamente se monta LABEL para los textos de rótulo decada campo, aunque puede ser agregado también en la columna del campo.BUTTON es solo compatible con los navegadores recientes y la forma de utilizarlo con versionesanteriores es por el INPUT Type="button", también existen otro métodos que se describen con ejemplosen los formularios de plantilla.FIELDSET es compatible solo con los navegadores recientes, no siendo un campo inicial para capturanos permite agrupar otros campos y mejorar el aspecto en pantalla

Mantenimiento de tablas 25


5.3 Tipo Campos

Según sea el campo que deseamos utilizar debemos seleccionar el Tipo adecuado, pese a que sedispone en el desplegable de todos los valores, es necesario un conocimiento mínimo de tipos decampos en formularios para realizar una correcta asociación.Se está preparando una mejora que filtraría los tipos según el campo seleccionado.

MBC - Forms26


Relación de Campos con Tipos

INPUT - BUTTON / CHECKBOX / FILE / HIDDEN / IMAGE / PASSWORD / RADIO / RESET / SUBMIT / TEXT

SELECT - OPTION / OPTGROUP

TEXTAREA - TEXT

FIELDSET - LEGEND


Part

VI

MBC - Forms28


6 Configuración general

La configuración se realiza sobre cada uno de los formularios, duplique los valores si son iguales o

modifique los correspondientes.

Variable MAILHOSTEstablece el servidor que utilizaremos para el envío de los datos de los formularios

Variable MAILFROMCuenta de correo que emite el e-mail en el servidor (verifique que dispone de esa cuenta en el servidor)

Variable MAILFROMNAMENombre de la cuenta de correo que aparecerá en el envío al destinatario

Variable MAILFROMSUBJECTCampo de objeto/subject/motivo en el correo

Variable MAILCOPYCuenta de correo para remitir una copia del formulario

Variable MAILMSGTexto HTML que construye el literal del e-mail que será enviado (ver documentación avanzada)

Variable GRAPHLiteral que se mostrará en los casos de los formularios concatenados (correlativos), puede utilizarse lalibrería de Google Chart (ver más información)Estos son algunos ejemplos de gráficos usando Google API-Chart

Variable DIVSTYLE

http://code.google.com/intl/es/apis/chart/

Configuración general 29


Crea un area DIV global con estilo personalizado por esta variable como STYLE=

Variable STRFINALEstablece el texto que será mostrado una vez completado el formulario y enviado, ya sea un formularioúnico o el último de una relación encadenada.

Variable POSBLOQUEEstablece con CSS (hoja de estilos) la posición del area DIV que muestra el literal de GRAPH

Variable HLPSHBOXAsigna la cadena de ayuda adicional a la etiqueta <A ... ></A> para la activación y uso de ShadowBox(incluida en MBC-SQL). La cadena mínima necesaria es rel="ShadowBox" pudiendo agregar parámetrosde Ancho y Alto a la caja de sombra o bien personalizar el estilo (vea documentación en MBC-SQL)

Variable ADDCODEAgrega el código que contenga al módulo de MBC-Forms, es habitual su uso en la inclusión de hojas deestilo del usuario para personalizar los formularios. Ejemplo: <link rel="stylesheet" type="text/css" media="all" href="css/misestilos.css"

title="MisCSS">

Variable SHASHCadena de números y/o letras que generan una clave de encriptación para los campos tipo password otext (no es posible su uso en Radio, Select, TextArea, File y Fecha , se recomienda su uso por temasde seguridad si la base de datos es accesible por otros métodos a la propia web.

Variable AJAXPOSEstablece la posición del area <DIV..> donde se sitúa el Ajax del campo. Los valores disponibles son"line" para fijar en la misma línea o "dblline" para fijar en una nueva línea.

Variable USEMAILReasignación de usabilidad de la función de envío de formulario por e-mail, por defecto su valor es 1

Variable USEDATAUtiliza la función de grabado de información en base de datos externa (si se define en el formulario y loscampos correspondientes), por defecto el valor es 0 (no usar datos).

MBC - Forms30


CAMPO DESCRIPCIÓN

Indice Número automático que fija el índice de valores

Variable Nombre de la variable a la que se refiere (solo están permitidas aquellas que seandocumentadas o bien las que se incorporen en futuras mejoras y personalizaciones)

Parámetro Literal que asigna valor a la variable, puede ser utilizado con etiquetas HTML(especialmente en GRPAH)

Descripción

Describe el uso y contenido de la variable

MBC-Form Formulario al que está relacionado esta variable

IDIOMA Idioma asignado a la variable

WEB Página web en la que se utilizará

Add(botón)

Botón de almacenado o grabado de la información contenida en este formulario


Part

VII

MBC - Forms32


7 Definición de formulario

Corresponde el término html <FORM></FORM>Es el bloque principal y quién establece todo el entorno que se visualizará, de esta tabla dependen elresto de tablas vinculadas (campos, idiomas, valores, columnas, etc...) En cierta forma será esteregistro quién además nos permita navegar entre otros formularios, así como establecer las referenciasde navegación automática.

Desde el listado de formularios disponible podemos acceder directamente a sus contenidos ydefiniciones:

Columna (ancho de las columnas que presentan los campos)Idioma (literales para usos en varios idiomas simultáneamente)Separador (espacio entre campos verticalmente)Q&A (Preguntas y respuestas realizadas en los formularios)Campos (definición de los campos del formulario y sus usos)

El formulario divide sus campos de control en 5 solapas o tabs que contienen cada una la información relativa

a su título

Definición de formulario 33


MBC - Forms34


CAMPO DESCRIPCIÓN

DOM Name Nombre del formulario, es imprescindible este campo para conocer realmente a quiéncorresponden los datos que dentro se carguen

Título Título de la página en formato texto plano, limitado a 250 caracteres. Permite la inclusiónde etiquetas HTML para mejorar su aspecto, si no dispone de suficiente tamaño paraalmacenar su título puede utilizar el Formulario Idioma con la asignación Titulo

Columnas Número de columnas que van a ser manejadas en las tablas de presentación delformulario

Bloque Número del formulario, es un texto que será mostrado en los contadores decuestionarios consecutivos



CAMPO DESCRIPCIÓN

De Bloques Número total de bloques al que pertenece el cuestionario y que fija la posición total deeste

Completado%

Número entero de 0 a 100 que establece el tanto por ciento realizado de loscuestionarios enlazados

Style= Estilo directo asociado al formulario (equivale a un <FORM STYLE=..> utilicenomenclatura CSS

Class= Estilo directo asociado al formulario (equivale a un <FORM CLASS=..>

Method= Desplegable de métodos para el formulario (GET/POST)

Tipo Acción Acción directa asociada al formulario (OnClick, OnSubmit, etc...)

Action= Acción relacionada con el tipo, se dispone de ValidaForm(this) para verificar los camposobligatorios

Tipo Tabla Identifica la forma de almacenar los datos en la tabla (campos independientes o bienuniforme)

CadenaConexión

Establece la cadena de conexión para datos remotos y almacenar el contenido de loscampos del formulario. Es necesario asignar los valores necesarios para conexión adatos Access o SQL-Server.En Access: A2|bd=datos.mdb|tbl=mitabla|user=usuario|pwd=xxxxx en los casos dearchivos de datos sin protección omita los campos de user= y pwd=. La ruta de la tabladebe ser dentro de su propio alojamiento indicando las carpetas ejemplo: miruta/datos/datos.mdbEn SQL-Server: SQL|bd=micatalogo|tbl=mitabla|user=usuario|pwd=xxxx|ip=88.225.150.160 en el caso de usar el propio servidor omita ip=, "micatalogo" indica elcatálogo de SQL donde están las tablas"tbl=" establece la tabla de destino de los datos, es necesario indicar el tipo de tabla(Uniforme o Campos) para establecer el método de grabación de datos.

Tabla deDatos

Nombre de la tabla que incorpora los datos del formulario

RedirectURL

Dirección URL a la que se envía automáticamente la página al terminar los procesossuyos internos

FIELDSET Crea un campo tipo FieldSet entorno del formulario (equivale a <FIELDSET>)

FieldsetStyle=

Establece los estilos STYLE asociados al Fieldset (equivale a <FIELDSET STYLE="..)utilizando lenguaje CSS

FieldsetClass=

Establece el estilo tipo class al Fieldset (equivale a <FIELDSET CLASS="..) Esnecesario que esté disponible en su hoja CSS de la página web

LEGEND Crea un literal de leyenda para el Fieldset (equivale a <LEGEND>...</LEGEND>)

LegendStyle=

Establece los estilos asociados con el Legend (equivale a <LEGEND STYLE="..)utilizando lenguaje CSS

LegendClass=

Establece el estilo tipo class al Legend (equivale a <LEGEND CLASS="..) Es necesarioque esté disponible en su hoja CSS de la página web

Access Key Tecla de acceso rápido al Fieldset (equivale a ACCESSKEY="..)

e-MailDestino

Correo electrónico de destino del contenido del formulario en el caso de no seralmacenado o desear una copia sobre los datos modificados en la tabla

Javascript Código Javascript que se incrusta por el usuario para realizar acciones en los campos y/o formulario

Add (botón) Botón de grabación del formulario en curso

MBC - Forms36


CAMPO DESCRIPCIÓN

Buttons Se dispone de 4 botones preconfigurados para el uso en los formularios, estos botonesdisponen de literales en Idioma en Formulario y tan solo es necesario marcar aquellosque deseamos se habiliten automáticamente. Todos los botones incorporan el eventoOnClick=ValidaForm(this) excepto RESET. El funcionamiento en el caso de los botonesde SIGUIENTE y ENVIAR es idéntico, si bien el aspecto varia en ambos casos.

ButtonsStyle=

Establece el estilo tipo STYLE utilizando lenguaje CSS

ButtonsClass=

Establece el estilo tipo CLASS al area <DIV> que contendrá los botones. Es necesarioque esté disponible en su hoja CSS de la página web

Add HTML Agrega código HTML del usuario al propio formulario. Esto es realmente útil cuandoprecisamos incorporar determinadas funciones de frameworks externos o bien gestionarareas DIV para posibles uso de Ajax en el formulario, así como agregar ciertos estilosCSS del usuario al propio formulario independiente del resto de la web.

7.1 Idioma en formulario

La principal ventaja del uso de esta tabla reside en la posibilidad de dar tamaños muy superiores a losque nos fija el propio formulario. Por otro lado esta es la forma de poder asignar literales adicionales alformulario, cada uno de ellos con ciertas especificaciones (estilos y/o textos) y además utilizar



diferentes idiomas si es que nuestra web así lo precisa.

CAMPO DESCRIPCIÓN

ID Form Número del formulario al que se hace referencia, este valor se carga automáticamente sihemos utilizado el acceso desde el formulario de referencia

Idioma Literal que establece el idioma para el literal, utilice la norma internacional de idiomas(es=Español, en=English, de=Alemán, etc...)

Texto Texto que se mostrará, puede utilizar todo tipo de etiquetas para este campo

Tipo Los textos están relacionados con el uso de los mismos, así Título equivale al título de laweb, Descripción (amplia el texto genérico del formulario o bien fija la pregunta de uncuestionario), Legend (leyenda opcional en idiomas), Anexo (literal que se muestra en laparte inferior del formulario como notas adicionales), el resto de tipos pertenece a lapersonalización de botones automáticos en los formularios.

Add(botón)


7.2 Columnas del formulario

Las columnas del formulario nos ayudan a establecer una norma en pixel para mejorar el aspecto delmismo.Tenga en cuenta que la suma de los anchos no puede superar el ancho del propio formulario usado enMBC. Por otro lado cada columna deberá disponer de un ancho suficiente para el contenido deinformación que se desea insertar en ellla.

MBC - Forms38


CAMPO DESCRIPCIÓN

ID Form Número del formulario al que se asocia este registro, al usar el acceso desde formularioseste campo se rellena de forma automática haciendo referencia al formulario origen

Columna Número de la columna, deben ser números correlativos comenzando en el 1

Ancho Número que indica los pixel que deben tener cada columna

Add(botón)


7.3 Separador de campos

El separador permite realizar un espaciado vertical entre los diferentes campos con el fin de mejorar suaspecto en pantalla.Es habitual en formularios tipo cuestionario donde se generan listas de opciones tipo Radio para unacuestión.

Cada formulario permite solo un registro de asignación de separador



CAMPO DESCRIPCIÓN

ID Form Número del formulario al que se asocia este registro, al usar el acceso desde formularioseste campo se rellena de forma automática haciendo referencia al formulario origen

Separador

Literal en etiquetas HTML para crear el espacio de separación

Str Situa Situación respecto de los campos ARRIBA (top), ABAJO (bottom), ARRIBA-ABAJO(topbottom)

Add(botón)


Ejemplo de separadores:

HTML Simple: <hr>DIV con CSS : <div style="width:100%;height:2px;background-color:#555500;margin-bottom:5px;"></div>

Puede utilizar cualquier tipo de elemento HTML, ya sean imágenes, areas div con estilos, tablas, etc.

7.4 Question & Answer (Q-A)

Es la base de datos de almacenamiento temporal de las preguntas y respuestas de los formularios.

Estos datos son utilizados para ser enviados por correo, mantener controles estadísticos delfuncionamiento de los formularios o bien como paso intermedio antes de lanzar la información a la basede datos definida por el usuario en su web.

Mantiene dos índices de control principal: el IDForm (número de formulario al que se hace referencia) yIDSesion (sesión del servidor en el que se realizaron la carga de los datos)

7.5 Ejemplo de Formulario

DOM Name : pruebaEstablezca siempre un nombre DOM sin espacios ni caracteres especiales, es recomendable el usouniforme de caracteres para simplificar las llamadas y referencias posteriores.

Título : Formulario de Pruebas y chequeo de camposEste sería el literal que aparecería en el formulario como Título del mismo, en este caso no hemosutilizado ninguna etiqueta HTML, no obstante veamos un ejemplo con etiquetas. Título : <spanstyle="font-size:16px;">Formulario de Pruebas y chequeo de campos</span>Recuerde que el límite son 250 caracteres. En caso de precisar una longitud mayor utilice la tabla deidioma y asigne correctamente el idioma del campo.

Columnas : 2Fijamos que las tablas donde serán colocados los campos deben disponer de 2 columnas, una seutilizará para el rótulo y otra para el campo.

Bloque : 3Indicaría que este es nuestro 3º formulario de una serie enlazada de formularios

De bloques : 8Número de formularios enlazados o totales.

MBC - Forms40


Completado % : 40Valor en % del formulario sobre el total, no tiene porque coincidir matemáticamente con el % de bloqueya que está pensado para los campos contenidos en ellos.

Style= : background-color:#cccccc;color:#000000;Utilizando la nomenclatura de las CSS en este ejemplo fijamos un fondo gris claro y un texto de colornegro, estos son los valores generales para el formulario

Class= : .formgenericNombre en la hoja de estilos CSS que tenemos en la web cargada de la clase que se asocia a esteformulario, puede ser incluso una clase que utilicemos de forma habitual en nuestra web.

Method= : POSTEn este caso necesitamos enviar al servidor nuestros datos del formulario para ser almacenados

Tipo Acción : OnSubmitFijamos que deseamos realizar un proceso al utilizar la acción en envío (OnSubmit)

Action= : return ValidaForm(this)En este caso utilizamos la propia función que incorpora el formulario para validar los camposobligatorios en el formulario

Cadena Conexion : Provider=SQLOLEDB;Persist Security Info=False;Data Source=192.168.0.33;Initial Catalog=mibbdd;User Id=invitado;Password=123456Establece como conectar a nuestra base de datos, en este caso es recomendable siempre el uso debases de datos SQL ya que para MDB de Access necesitará conocer exactamente la ruta de accesocompleta, no es posible actualmente una conexión almacenada con SERVER-MapPATH

Tabla de Datos : bdContactoClientesNombre de la tabla donde se van a almacenar los datos contenidos en el formulario, cada formulariohace referencia a una sola fuente de datos (tabla), en el caso de necesitar varias tablas utilice tantosformularios enlazados como tablas tenga y precise.

Redirect URL : index.asp?zona=miform4Una vez completados los procesos de este formulario vamos a ir de forma automática al siguienteformulario, en este caso hemos puesto una URL relativa a la propia web MBC-SQL, si desea una rutaabsoluta utilice la URL completa como: http://www.suweb.com/pagina.htm

FIELDSET : marcadoHemos decidido disponer de un marco basado en una línea que rodeará nuestro formulario

Fieldset Style : padding:4px;Para no dejar el texto pegado a los bordes asignamos un espaciado interior de 4px

Fieldset Class : .fldrojoAsignamos de nuestra tabla CSS la clase fldrojo a este objeto (es necesario que disponga de estaclase en las CSS cargadas en la página web

LEGEND : UN EJEMPLOVamos a poner en la esquina izquierda superior un rótulo sobre la línea del Fieldset con ese texto

Legend Style= : Padding-left:3px;padding-right:3px;Establecemos propiedades de estilo a nuestro texto metiendo 3px a izquierda y derecha para separarlo

http://www.suweb.com/pagina.htm



de la línea

Legend Class= : .fldlegendAsignamos de nuestra tabla CSS la clase fldlegend a este objeto (es necesario que disponga de estaclase en las CSS cargadas en la página web

Access-Key : PUsaremos la tecla ALT-P (en Macinstosh solo P) para acceder de la página al formulario y iniciar suproceso

e-Mail Destino : [email protected] vez terminado el formulario, e independientemente a su almacenamiento deseamos que nos remitaun correo de aviso con la información cargada

JavaScript :En este campo escribiríamos nuestro código Jvs estableciendo funciones y/o variables que seránllamadas en los campos y eventos de estos

7.5.1 Formularios incluidos de ejemplo

Formulario de Contacto simple

Formulario de Contacto ampliado

Formulario de Contacto con verificación de clave y Ajax de evaluación de complejidad de clave

Formulario de suscripción a newsletter

Formulario con campos calculados (ejemplo de compra simple)

Formulario de Satisfacción de Clientes

Cuestionario de 6 etapas

Cuestionario con evaluación de resultados



Part

VIII

Definición de campos 43


8 Definición de campos

Un campo es un valor que se contiene dentro de una tabla en uno de sus registros.

A la izquierda de la lista además de los tradicionales botones de Ver/Editar/Duplicar disponemos de losaccesos a Acciones de los campos, Personalización en idiomas, valores disponibles (para campos tipoSELECT y RADIO) y encadenar campos, etc...

La pantalla de carga de información de los campos se divide en cinco solapas o tabs que se definen porel título de la misma, agrupando así los campos relativos a este.

MBC - Forms44




CAMPO DESCRIPCIÓN

Id Form Número de formulario al que se le asigna este campo de carga

Id Name= Nombre del formulario (en HTML NAME=), debe ser un identificador único para poderrecopilar correctamente la información, solo se usarán nombres iguales cuando elcampo corresponda a un INPUT RADIO para ayudar a la selección/deselección del valorque se desea

Encadenado Campo con el que se encadena este. Solo seleccione este valor en caso de desearponer campos seguidos, en el resto de los casos deje sin selección este campo

AccessKey Tecla de acceso rápido, en Windows es necesario pulsar ALT+tecla en Macintoshsimplemente la letra

Obligatorio Establece que el campo es de obligada carga, internamente genera una función enJavascript ValidaForm() que verifica el contenido y avisa si estuviera vacío.

XSS Check Verifica que el contenido del campo no disponga de contenido maligno para almacenar ovisualizar en web. Los términos como script, embed, on(accion), layer, frame, ilayer,vbscript, javascript, applet, etc... son modificados directamente antes de seralmacenados en la base de datos y se incorporan caracteres que evitan su ejecución"<x>" así el término <script ...> se convierte en <s<x>cript> y no es interpretable niusable.

Orden Número que establece en que orden será mostrado el campo (en consecuenciaestablece el TABINDEX del HTML del formulario)

Presentación Desplegable que establece si el campo será visualizado a la derecha o la izquierda del

MBC - Forms46


CAMPO DESCRIPCIÓN

rótulo, es necesaria su asignación aún cuando este campo sea de una sola columna osin valor en el campo

Tipo Establece el tipo básico del campo (en HTML <TIPO valores>), cada tipo admite ciertascaracterísticas de contenido y subtipo de campo

Input Type= Establece el tipo de campo que se mostrará (Button, File, Text, etc...) Es imprescindibletras la declaración de Tipo para poder asignar un aspecto al mismo. (en HTML TYPE=)

Valor pordefecto

Asigna un valor predefinido al campo (en HTML VALUE=), siendo un valor opcional esmuy recomendable para campos del tipo Radio con el fin de poder establecer un valorinicial

Longitud Ancho previsto para la caja de texto, no implica que pueda añadir más texto (máximalng).En el caso de Tipo TEXTAREA debe escribirse la longitud como ancho,alto (encaracteres), el comportamiento de ancho y alto varia si esa TEXTAREA usa o no elEditor HTML incrustadoEn el caso de Tipo FIELDSET equivale al número de campos que se agrupan dentro deel, en caso de superior al número de campos restantes por incorporar al formulario secierra automáticamenteNo asigne valores en los casos de campos tipo SELECT y este se ajustará al ancho delvalor mayor

Máxima Lng. Asigna el número máximo de caracteres que se admiten en el campo, con el fin de evitarposibles pérdidas de información en el almacenamiento dentro de una base de datos, nosuele utilizarse en formularios de envío por e-mail

HTML Editor Activa el editor HTML (FCK-Editor) dentro de un campo TEXTAREA, no es utilizable porel resto de tipos de campos, activarlo en un campo de fecha o de texto corto puedeimplicar no visualizar los datos contenidos

Calendario Activa el botón del asistente de Calendario para facilitar la selección de una fechaconcreta

Ayuda Texto plano o HTML de ayuda. Puede utilizarse código similar a <img src"..." /> con elfin de visualizar una imágen como botón de acceso a la ayuda

Link Help Link que se asigna a Ayuda, siempre será en una nueva ventana y debe estar escrita laURL completa ejemplo: http://www.miweb.com/ayuda/archivoayuda.htm

Rótulo Texto que describe al campo como rótulo de este, puede ser utilizado sin asignación decampo, en cuyo caso se convierte en un literal de descripción dentro del formulario.En el caso de Tipo FIELDSET este valor construye el dato LEGEND de la caja

Texto error Literal que se muestra en la validación del campo si utiliza la función Javascript internaValidaForm(this), si no se indica se asigna por defecto el texto del rótulo. Se recomiendasu asignación en campos encadenados o bien en aquellos que utilicen caracteresespeciales como acentos, diéresis, eñes, etc...

BD Field Campo de destino de la base de datos donde será almacenada la información de estecampo

Conversión Asigna una posible conversión a los datos antes de ser almacenados ( a texto, a entero,a fecha, etc...) Tenga cuidado en la selección de conversión ya que un literal convertidoa número Entero o Largo puede significar almacenar un 0. En la versión Binaria solodebe ser utilizada en el caso de trabajar con un campo tipo FILE si este se desea grabarcomo Binario y no la cadena de texto del archivo subido. Por otra parte este campoaporta el filtro de validación de contenido para los campos, así una conversión a e-Mailverifica que el contenido dispone de una dirección válida, a entero y a largo verifica quesolo se han insertado números en el campo (no permite decimales), a texto permite todo

http://www.miweb.com/ayuda/archivoayuda.htm



CAMPO DESCRIPCIÓN

tipo de contenido, a booleano solo admite 1 o 0, a fecha valida que el dato contieneinformación válida para una fecha.

Aspecto Forma en la que se va a presentar el campo:En línea: muestra el rótulo seguido del campo (debe insertar espacios en el rótulo con para separar ambos)En doble línea: muestra el rótulo y con un simple retorno de carro el campo alineado a laizquierda del rótuloEn dos filas: separa el rótulo y el campo en dos filas de la tabla que construye elformularioEn dos columnas: crea tanto en rótulo como el campo en columnas separadas ycorrelativas

Formato Solo utilizable para campos que precisen formatos especiales como cuentas de bancoXXXX-XXXX-XX-XXXXXXXXXX, fechas dd/mm/yyyy, estos formatos son a nivel dealmacenamiento y para la presentación en los datos o bien pueden ser utilizados conJavascript del cliente tipo Mootools, Prototype o jQuery, ya que el propio HTML nopermite dar formato a los campos.

Rótulo CellAction

Acciones asociadas a la celda del rótulo (onMouseOver, OnMouseOut, etc...) con lasllamadas en Javascript correspondientes

Rótulo CellStyle=

Estilo CSS directo a la celda (en HTML STYLE=) asignable solo a la celda del rótulo

Rótulo CellClass=

Estilo tipo Clase (.class) de la hoja de estilos CSS incluida en la web (en HTMLCLASS=) asignable solo a la celda del rótulo

RótuloStyle=

Estilo CSS directo al contenido en este caso el rótulo

RótuloClass=

Estipo tipo Clase (.class) de la hoja de estilos CSS incluida en la web, en este casosolo para el rótulo

Campo CellAction

Acciones asociadas a la celda del campo (onMouseOver, OnMouseOut, etc...) con lasllamadas en Javascript correspondientes

Campo CellStyle=

Estilo CSS directo a la celda (en HTML STYLE=) asignable solo a la celda del campo

Campo CellClass=

Estilo tipo Clase (.class) de la hoja de estilos CSS incluida en la web (en HTMLCLASS=) asignable solo a la celda del campo

CampoStyle=

Estilo CSS directo al contenido en este caso el campo

CampoClass=

Estipo tipo Clase (.class) de la hoja de estilos CSS incluida en la web, en este casosolo para el campo

Ajax Div Genera un área DIV para recibir el contenido Ajax en el caso de realizar acciones. Lasareas DIV quedan denominadas como ID=ajax_IdName Ejemplo: IdName=MiCampo<DIV ID="ajax_MiCampo"></DIV>

Ajax Acción Acciones de Ajax que se incorporan (OnBlur, OnChange, OnFocus, etc...)

Valor Default Valor por defecto que se almacena en el caso de que no se cumplimente el formulario yno se disponga de información en este. Evita los posibles errores en carga de formularioque el usuario ha retirado el valor previo establecido solo para modificar.

Add (botón) Botón inferior del formulario para cargar o terminar de editar un campo, al pulsarlo sealmacena la información contenida en el mismo

Add HTML Agrega código HTML del usuario al propio formulario. Esto es realmente útil cuandoprecisamos incorporar determinadas funciones de frameworks externos o bien gestionar

MBC - Forms48


CAMPO DESCRIPCIÓN

areas DIV para posibles uso de Ajax en el formulario, así como agregar ciertos estilosCSS del usuario al propio formulario independiente del resto de la web.

Algunos valores de campos son asignados de forma interna, para evitar que afecten a la información queel usuario quiera generar disponen de claves prefijo, en el caso de los campos el que se utiliza es mbc_mbc_flgfrm para un campo oculto de gestión de datos y estado del formulariombc_sesion para la sesión del usuario en el formulario (o formularios encadenados)mbc_zonaorig para la zona origen o anterior al formulario actualajax_ de prefijo para las areas DIV de ajax de cada campo.

A los campos de tipo Password se ha incorporado una función que elimina letras como espacios ( ),apóstrofes (') y el carácter igual (=), con el fin de evitar posibles ataques con manipulación de carga decontenido. De la misma forma la cadena password es convertida a ASCII y codificada para evitar servisualizada externamente.

8.1 Idioma en campos

Nos permite personalizar los formularios según sea el idioma que corresponda al mismo, es un valoralternativo al que se fija en la Definición de campos como valor por defecto en el caso de no disponer deidioma

CAMPO DESCRIPCIÓN

ID Field Establece el número del índice relacionado con Campos, se rellena automáticamente sientramos desde la propia definición de campos

Idioma Idioma asignado al literal, utilice la norma internacional de textos para idioma(es=Español, en=English, fr=Francés, etc...)

Texto Literal que será mostrado sustituyendo al que se define en el campo según sea elidioma

Tipo Desplegable que nos ayuda a definir si el literal establecido es para el Rótulo del Campo,el Literal o el valor que debe tener por defecto en el campo, Comentarios añadidos alcampo, Texto de mensaje de error si es obligatorio

Add (Botón) Botón de almacenado o grabado de la información contenida en este formulario



8.2 Acciones en campos

Son acciones adicionales a las que se pueden fijar en la definición de campos en Ajax Acción.

Es necesario conocimientos medios/avanzados de Javascript para su utilización correcta. La diferenciabásica entre esta zona de acciones y la otra es la posibilidad de asociar acciones a elementos delDOM de nuestro formulario distintos del propio nombre DOM del campo en el que nos encontramos

CAMPO DESCRIPCIÓN

ID Field Número relacionado con los campos, si accede a este formulario desde el acceso directode Definición de Campos su valor se rellena de forma automática

Evento Evento propio del campo (OnFocus, OnBlur, OnChange, etc...)

JavascriptFn()

Nombre de la función Javascript a la que llamamos desde este campo con evento

DOMdestino

Nombre del objeto al que hacemos referencia en el evento

Add (botón) Botón de almacenado o grabado de la información contenida en este formulario

8.3 Campos encadenados

En ocasiones precisamos crear campos con varios tramos de valores, quizás los ejemplos máshabituales son la cuenta del banco XXXX-XXXX-XX-XXXXXXXXXX, o separar el Nombre en Nombre yApellidos.

La solución es la creación de campos encadenados, es decir que se mantienen uno a continuación delotro. Lo que MBC-Forms realiza es asignar por herencia ciertas propiedades del campo principal a loscampos encadenados.

Características:- Utilice para indicar espacios entre los campos como separador- Utilice <BR /> para realizar un retorno de carro entre los campos como separador- El campo de orden es interno y referido al campo al que se encadena

Limitaciones de los campos encadenados:- Solo es admisible encadenar campos de tipo INPUT (TEXT, BUTTON, HIDDEN, PASSWORD)- Los campos tipo INPUT RADIO/CHECKBOX pueden utilizar la columna de valores para realizar lamisma función

MBC - Forms50


- Si se activa Calendar se muestra al final de los campos encadenados, pero asigna el valor al primerode ellos- Solo se permite personalizar Rótulo y Campo por STYLE y CLASS- No es posible el uso en TEXTAREA, SELECT (OPTION/OPTGROUP)

8.4 Definición de valores

La definición de valores nos ayuda a colocar varios elementos como opciones para un solo campo, eshabitual su uso en campos de tipo SELECT, puede ser utilizado también para campos tipo RADIO eINPUT-BUTTON

CAMPO DESCRIPCIÓN

ID Field Número relacionado con los campos, si accede a este formulario desde el acceso directode Definición de Campos su valor se rellena de forma automática

Value= Valor que se asigna en el caso de seleccionar ese elemento, no asigne valor si corresponde



CAMPO DESCRIPCIÓN

a un Título de grupo y utilice / (barra de división) para las listas de OPTGROUP utilizandoasí ese registro como cierre de título de agrupado

Texto Literal que será mostrado en el desplegable de la SELECT o bien en los textos de RADIO y/o BUTTON. Este texto será el literal por defecto en el caso de no disponer de idiomas

Orden Orden forzado en el que se van a mostrar los elementos, caso de disponer de valoresiguales se fija por el índice propio de la tabla

Selected Asigna a ese valor la propiedad SELECTED dejándolo como valor por defecto en el campo

Add(botón)


8.4.1 Idiomas en valores

Nos permite personalizar los valores de los campos según sea el idioma que corresponda al mismo, esun valor alternativo al que se fija en la Definición de Valores de los campos como por defecto en el casode no disponer de idioma

CAMPO DESCRIPCIÓN

ID Field Número relacionado con Definición de Valores, si accede desde el vinculo de Definición devalores este campo se rellena de forma automática

Idioma Idioma asignado al literal, utilice la norma internacional de textos para idioma (es=Español,en=English, fr=Francés, etc...)

Texto Literal que se muestra según el idioma

DefaultValue

Valor por defecto que se asocia al campo y su valor según el idioma

Add(botón)


8.5 Ejemplos de campos

A continuación damos los ejemplos típicos y más habituales de los campos que son utilizados en unformulario, así como una breve descripción de como realizar el o los asientos para conseguir el efecto.

MBC - Forms52


Recuerde que las posibilidades de personalización y creación están sujetos a sus conocimientos deCSS y su capacidad de Diseño

En la pestaña de DATOS es importante identificar el Aspecto del campo (en linea, doble linea, doscolumnas, dos filas) ya que es un valor que no se asume por defecto y establece el método depresentación del campo. Se ha previsto en futuras versiones asignar por defecto el valor En Línea.

8.5.1 Campo oculto

Los campos ocultos son muy útiles para trasladar información que precisamos en la base de datos obien en el correo que se envíe sin falta de que el cliente vea esta información ya que es interna.Por defecto todos los formularios incorporan un campo oculto que tiene de IdName : mbc_flgfrm

PARÁMETRO VALOR DESCRIPCIÓN

ID Name micampo Nombre o texto sin espacios para definir el campo

Orden 10 Definir en el orden deseamos colocarlo, se recomienda al principio delformulario por temas de aspecto

Presentación Rotulo-Campo

Izquierda rotulo, derecha campo, realmente no importa que se asigne ya queno se muestra

Tipo INPUT Campo de entrada de información

Input Type= HIDDEN Establece que sea oculto

Valor porDefecto

V1 El valor que deseamos tener para trasladar a la base de datos

Notas: el resto de campos no afectan al uso o presentación del mismo ya que es oculto

8.5.2 Campos bloqueados

Una opción que podemos utilizar como alternativa a los campos ocultos y que mostraría la informaciónal usuario sin permitir que este pueda modificarla es el campo bloqueado o "locked".

La creación es simple ya que sería idéntico a cualquier campo que necesitemos, la variación reside enlas acciones del campo, en este caso en el campo Ajax Acción pondremos: OnFocus"this.blur()"readonly

El efecto que se consigue es un campo visible pero no modificable por el usuario. Recuerde que estacaracterística es independiente al resto de configuración del campo (aspecto, colores, tipo, etc...)pudiendo así bloquear la información que precisa no ser modificada.

8.5.3 Campo de texto

Es el tipo de campo más usado y versátil, permite la carga de cualquier contenido de texto y/onúmeros.


ID Name= mitxt Denominación única del campo para recuperar el valor

Orden 12 Número con el que vamos a fijar el orden




Presentación Rótulo-Campo Izquierda el rótulo, derecha el campo de texto para elcliente

Tipo INPUT Campo de entrada de datos

Input Type TEXT Tipo Texto

Longitud 50 Tamaño (ancho) que muestra el campo en pantalla

Máxima Lng 80 Máximo de caracteres que se admiten en el campo

Ayuda <img src="images/hlpbtn.gif"border="0" hspace="4"alt="HELP/AYUDA"/>

Hemos asignado una imagen utilizando etiquetas HTML,esta imagen esta en nuestra carpeta IMAGES bajo la rutade la página web, sin borde visible

Link Help http://www.mbc3c.com/manual/esquema_general_mbc3c.htm

Dirección web a la que remitimos para visualizar la ayuda

Rótulo Introduce un texto Texto a mostrar para indicar que debe ser escrito en elcampo

Conversion A TEXTO Es un dato opcional para convertir el dato antes de grabar

Aspecto Dos Columnas Usará en la tabla del formulario varios <TD> para mostrarRotulo y Campo

Pueden ser utilizados todos los campos de aspecto como Formato, Rótulo Cell Style, etc...Los campos de acción nos pueden servir para escribir pequeñas funciones que ajusten el texto, loconviertan en mayúsculas, o bien para procesar verificaciones sobre el valor cargado.

8.5.4 Ayuda en rótulo de campo

Esta funcionalidad puede ser insertada en cualquiera de los campos y es común en forma de uso yoperación






El campo ayuda fija el texto o bien con etiquetas HTML el objeto que presentamos, el link incorpora unvínculo al objeto anterior para dirigir la navegación. Puede ser utilizado un elemento FLASH insertandoun objeto embebido en ayuda.

Una versión alternativa puede ser el uso de JavaScript en los eventos del ratón sobre la celda (ocualquier otro elemento):

onMouseover="ddrivetip('Texto de ayuda dinamico con CSS y Jvs', 300)" onMouseout="hideddrivetip()"href="#"

En este caso hemos integrado algunos Javascript de DynamicDrive sobre nuestro formulario para

MBC - Forms54


agregar una funcionalidad de ayuda en el evento MouseOver de la casilla del rótulo

8.5.5 Campo de texto enriquecido



ID Name= mitxthtml Denominación única del campo para recuperar el valor




Input Type TEXTAREA Tipo Texto con area (rectangular de dos dimensiones)

Longitud 50,7 Tamaño (ancho,alto) que muestra el campo en pantalla

HTML Editor Marcado Activamos el editor HTML para este campo





Rótulo Introduce un texto Texto a mostrar para indicar que debe ser escrito en elcampo

Conversion A TEXTO Es un dato opcional para convertir el dato antes de grabar


Pueden ser utilizados todos los campos de aspecto como Formato, Rótulo Cell Style, etc...Los campos de acción nos pueden servir para escribir pequeñas funciones que ajusten el texto, loconviertan en mayúsculas, o bien para procesar verificaciones sobre el valor cargado.En este caso la personalización de estilos para el campo no operan ya que dependen de lapersonalización que disponga el Editor HTML.



8.5.6 Campo de fecha







Input Type TEXT Tipo Texto

Longitud 10 Tamaño (ancho) que muestra el campo en pantalla (dd/mm/yyyy)

Máxima Lng 10 Máximo de caracteres que se admiten en el campo

Calendario Marcado Activamos el botón Javascript de Calendario para ayudar ala carga del dato





Rótulo Seleccione Fecha Texto a mostrar para indicar que debe ser escrito en elcampo

Conversion A FECHA Es un dato opcional para convertir el dato antes de grabar


Pueden ser utilizados todos los campos de aspecto como Formato (en este caso dd/mm/yyyy), RótuloCell Style, etc...Los campos de acción nos pueden servir para escribir pequeñas funciones que ajusten el texto, loconviertan en mayúsculas, o bien para procesar verificaciones sobre el valor cargado.

8.5.7 Campo de CheckBox o verificación

Es el campo tipo donde solo esperamos un SI o NO a la pregunta o bien a la acción del cliente


ID Name= cb1 Denominación única del campo para recuperar el valor


MBC - Forms56



Presentación Rótulo-Campo

Izquierda el rótulo, derecha el campo de texto para el cliente


Input Type= CHECKBOX Marca de verificación (cuadrado blanco marcable)

Valor pordefecto

False Al ser un elemento booleano podremos asignar TRUE o FALSE (1 o 0)para establecerlo como marcado o no

Rótulo QuiereFactura?

Texto a mostrar para indicar que debe ser escrito en el campo

Conversión ABOOLEANO

Es un dato opcional para convertir el dato antes de grabar

Aspecto DosColumnas

Usará en la tabla del formulario varios <TD> para mostrar Rotulo y Campo

Un ejemplo habitual de uso para este campo es preguntar: Desea los mismos datos de Factura que deCliente S/NSe fija una acción (Ajax Acción) a este campo como: onClick='copyFields();'

En el Javascript del formulario habríamos creado nuestra función

función de copiado de campos

function copyFields() {

if(self.document.miform.cb1.checked==true) {

self.document.miform.x_facnif.value=self.document.miform.x_bgnif.value;

self.document.miform.x_facempresa.value=self.document.miform.x_bgempresa.value;

self.document.miform.x_facdireccion.value=self.document.miform.x_bgdireccion.value;

self.document.miform.x_facpoblacion.value=self.document.miform.x_bgpoblacion.value;

self.document.miform.x_facprovincia.value=self.document.miform.x_bgprovincia.value;

self.document.miform.x_facpostal.value=self.document.miform.x_bgpostal.value;

}

}

8.5.8 Campo de Radio o selección


ID Name radbtn Denominación única del campo para recuperar el valor


Presentación Rótulo-CampooCampoRótulo

Izquierda el rótulo, derecha el campo de texto para el cliente. Habitualmente utilizará el Campo-Rótulo ya que suele ser más cómoda lapresentación por la izquierda del campo de selección


Input Type RADIO Círculo de selección

Valor por v1 Asigne solo a uno de los campos este valor




defecto

Rótulo Seleccione


Aspecto DosColumnas


Nota Repita este campo las veces que sean necesarias como opciones para elcliente, entre las que debe seleccionar una

Cada campo de radio debe disponer de su propio ID Name, pero solo uno de los campos debe disponerdel valor por defecto el cual indicaría que campo estará marcado en este grupo de selección.

Es importante no fijar el campo longitud ya que este valor configura una forma de presentaciónalternativa (ver Multi-Radio Selección)

8.5.9 Campo de Múltiple Radio-selección


ID Name radbtn Denominación única del campo para recuperar el valor


Presentación Rótulo-CampooCampoRótulo

Izquierda el rótulo, derecha el campo de texto para el cliente. Habitualmente utilizará el Campo-Rótulo ya que suele ser más cómoda lapresentación por la izquierda del campo de selección


Input Type RADIO Círculo de selección

Valor pordefecto

No asigne ninguno en este caso

Longitud 3 Número de columnas en las que se presentan los valores múltiples deselección

Rótulo Seleccione


Aspecto DosColumnas


Nota Repita este campo las veces que sean necesarias como opciones para elcliente, entre las que debe seleccionar una

Cada campo de radio debe disponer de su propio ID Name, pero solo uno de los campos debe disponerdel valor por defecto el cual indicaría que campo estará marcado en este grupo de selección.

Es importante fijar el campo longitud ya que este valor configura una forma de presentación alternativa.

Establecido el bloque del campo pasamos a generar las líneas de selección dentro de valores del

MBC - Forms58


campo


Value= qst1 Valor que damos a esta selección, cada uno debe disponer de un valordistinto del resto

Texto Primeraopción

Literal que aparece para explicar la opción que se selecciona

Orden 10 Establezca el orden ascendente en el que deben ser mostrados losvalores

Selected Marque solo una de la lista de valores que ha puesto

8.5.10 Campo desplegable (SELECT)


ID Name despl1 Denominación única del campo para recuperar el valor




Tipo SELECT Campo de selección sobre una lista de valores

Input Type OPTION Opciones sucesivas en lista

Logitud No asigne valor para disponer del desplegable, si asigna alguno se convierteen lista de valores

Max. Longitud No asigne ninguno ya que el valor del campo está contenido en los valoresdisponibles para el campo

Valor pordefecto

No asigne valor alguno, se realiza desde la tabla de VALORES

Rótulo Escojaversión


Aspecto DosColumnas


Ajax Acción Es habitual el uso de este campo en el caso de utilizar desplegablesanidados que dependen del valor anterior para mostrar los correspondientes ala siguiente

Es importante que en los campos de longitud y máxima longitud no se ponga valor alguno, estos sonasignados de forma automática por el propio desplegable. Si se asigna algún valor creará una lista devalores en lugar de un desplegable.

Este tipo de campo no permite todas las propiedades que se puedan asignar en la hoja de estilos,incluso es propio aspecto varia según sea el navegador que se utilice (Internet Explorer, Opera, FireFox,Safari, Flock, Netscape, etc...)



Establecido el bloque del campo pasamos a generar las líneas de selección dentro de valores delcampo


Value= sel1 Valor que damos a esta selección, cada uno debe disponer de un valordistinto del resto





8.5.11 Campo desplegable con OptGroup


ID Name despl1 Denominación única del campo para recuperar el valor




Tipo SELECT Campo de selección sobre una lista de valores

Input Type OPTION Opciones sucesivas en lista

Valor pordefecto

No asigne valor alguno, se realiza desde la tabla de VALORES

Rótulo Escojaversión


Aspecto DosColumnas


Ajax Acción Es habitual el uso de este campo en el caso de utilizar desplegablesanidados que dependen del valor anterior para mostrar los correspondientes ala siguiente

Este tipo de campo no permite todas las propiedades que se puedan asignar en la hoja de estilos,incluso es propio aspecto varia según sea el navegador que se utilice (Internet Explorer, Opera, FireFox,Safari, Flock, Netscape, etc...)

Establecido el bloque del campo pasamos a generar las líneas de selección dentro de valores delcampo

MBC - Forms60



Value= sel1 Valor que damos a esta selección, cada uno debe disponer de un valordistinto del resto





Notas importantes:- No asigne Value= para establecer el OPTGROUP de una lista de valores (OPTION)- Establezca en Value= la barra de división ( / ) para indicar donde termina el grupo (</OPTGROUP>)

8.5.12 Campo de archivo

Es el tipo de campo es necesario cuando queremos facilitar la selección de un archivo del cliente parasubir posteriormente a la base de datos o bien al servidor (Upload File).




Presentación Rótulo-Campo Izquierda el rótulo, derecha el campo de texto para el cliente


Input Type FILE Tipo Texto

Longitud 50 Tamaño (ancho) que muestra el campo en pantalla

Máxima Lng 80 Máximo de caracteres que se admiten en el campo, solo lo usaremoscuando disponemos de una limitación de espacio en elalmacenamiento del texto del archivo, si es un archivo a incrustar enla base de datos este campo no es necesario.

Rótulo Seleccione suarchivo


Conversion Es un dato opcional para convertir el dato antes de grabar, solo lousaremos en caso de asignar un texto (como literal del archivo) enlugar de subir como BLOB el archivo seleccionado

Aspecto Dos Columnas Usará en la tabla del formulario varios <TD> para mostrar Rotulo yCampo

Pueden ser utilizados todos los campos de aspecto como Formato, Rótulo Cell Style, etc...Los campos de acción nos pueden servir para escribir pequeñas funciones que ajusten el texto, loconviertan en mayúsculas, o bien para procesar verificaciones sobre el valor cargado, en ocasiones seutiliza para mostrar una versión Thumbnail de la imagen que subiremos.

Nota: este campo no es utilizable en formularios continuos salvo almacenamiento del nombre delarchivo.



8.5.13 Campo de agrupamiento FieldSet

Agrupa varios campos con una línea rectangular, para mejorar su visualización en pantalla


ID Name= fldset Denominación única del campo para recuperar el valor

AccessKey F Normalmente este valor puede y se recomienda asignar a cualquier campopara facilitar su acceso por teclado



Utilice siempre este formato de presentación

Tipo FIELDSET Cuadro de grupo en presentación

Input Type= LEGEND Literal en el cuadro, no seleccione nada si no desea ver ese texto

Longitud 4 Número de campos que se agrupan bajo el FieldSet

Rótulo MIGRUPO

Literal que se fija como leyenda (LEGEND) en el borde del cuadro

Es muy habitual establecer estilos para este tipo de elemento (especialmente espaciado interno oPadding).Para fijar estilos al Fieldset debe utilizar los correspondientes al Campo, en el caso de Legend serán loscorrespondientes al Rótulo.

8.5.14 Ayuda con JavaScript en celda de rótulo

Una versión alternativa en ayuda puede ser el uso de JavaScript en los eventos del ratón sobre la celda(o cualquier otro elemento):

onMouseover="ddrivetip('Texto de ayuda dinamico con CSS y Jvs', 300)" onMouseout="hideddrivetip()"href="#"

En este caso hemos integrado algunos Javascript de DynamicDrive sobre nuestro formulario paraagregar una funcionalidad de ayuda en el evento MouseOver de la casilla del rótulo

Para ello aprovechamos las librerías que se cargan en el HEAD de la web:

<script type="text/javascript" src="jvs/ayuda.js"></script>

8.5.15 Personalizar el rótulo

La personalización del rótulo afecta a la zona donde se fije este en el formulario, si en Presentaciónselecciona Rótulo-Campo este corresponde a la izquierda, y al contrario en Campo-Rótulo.

La personalización es individual en el caso de Aspecto = Dos Columnas, ya que si fueran en 1 columna

MBC - Forms62


(en línea o doble línea) la personalización de rótulo para los valores CELL afecta también a los mismosdel Campo.


Rótulo CellAction

Acción o evento ligado a la celda

Rótulo CellStyle=

background-color:#0000FF;color:#FFFFFF;

Utilice cualquiera de los comandos CSS 2 para definir el estilo(ver CSS)

Rótulo CellClass=

miclasecelda Debe estar definida en la hoja CSS que se utilice en la webcomo .miclasecelda

Rótulo Style= text-align:right; Utilice cualquiera de los comandos CSS 2 para definir el estilo(ver CSS)

Rótulo Class= miclaserotulo Debe estar definida en la hoja CSS que se utilice en la webcomo .miclaserotulo

8.5.16 Personalizar el campo

La personalización del rótulo afecta a la zona donde se fije este en el formulario, si en Presentaciónselecciona Rótulo-Campo este corresponde a la izquierda, y al contrario en Campo-Rótulo.

La personalización es individual en el caso de Aspecto = Dos Columnas, ya que si fueran en 1 columna(en línea o doble línea) la personalización de rótulo para los valores CELL afecta también a los mismosdel Campo.


Campo CellAction

Acción o evento ligado a la celda

Campo CellStyle=

background-color:#0000FF;color:#FFFFFF;

Utilice cualquiera de los comandos CSS 2 para definir el estilo(ver CSS)

Campo CellClass=

miclasecelda Debe estar definida en la hoja CSS que se utilice en la webcomo .miclasecelda

Campo Style= text-align:right; Utilice cualquiera de los comandos CSS 2 para definir el estilo(ver CSS)

Campo Class= miclaserotulo Debe estar definida en la hoja CSS que se utilice en la webcomo .miclaserotulo

8.5.17 Campo CAPTCHA (verificación humana)

Los campos de CAPTCHA tienen como principal función la validación de que ha sido un humanoleyendo una imagen distorsionada quién procesa su contenido y escribe las letras que se encuentrandentro.

La librería CAPTCHA que se incluye construye una imagen que contiene letras y/o númeroshexadecimales (del 0 al 9 y de la A a la F), la presentación es única, siendo personalizable el aspectodel campo de carga y la celda del campo.Siempre se muestra en la celda asociada al campo y se recomienda el uso de un rótulo para indicarque debe realizarse con esa imagen.



Las acciones y validación se encuentran incluidas dentro del propio módulo de MBC-Forms por lo queno es necesario activar acción alguna por parte del usuario.

8.5.18 Verificación humana

Otro método también bastante extendido para evitar formularios rellenos por robots es la introducción deun texto con una respuesta simple como:Capital de Inglaterra >> londresEscriba la respuesta a esta pregunta 2 mas 3 >> 5

Para ello utilizaremos un campo de texto normal, marcaremos el campo como obligatorio y usaremosuna validación en Javascript con eventos como OnBlur o OnChange para verificar que el valor cargado esidéntico al que nosotros indicamos

Otras opciones simples de validación de usuario humano es la carga de una imagen creadamanualmente e insertada en el formulario, esa imagen llevará cargado un texto sencillo (dos a 6 letrasy/o números) y pediremos que se escriba el valor leído. En ocasiones se usa una simple operaciónaritmética en formato gráfico para validar esto mismo.

La verificación humana hoy en día se hace muy necesaria para evitar posibles ataques a su base dedatos, no obstante el propio sistema de MBC-Forms incorpora ciertos mecanismos de defensa contraJava Maligno incrustado en los campos.

8.5.19 Doble campo de verificación de dato

Consiste en un campo de texto introducido dos veces que utilizará una función Javascript para validarque el contenido es el mismo.

Suele ser habitual para validar contraseñas del cliente o bien correos electrónicos.

Su uso es simple, en el segundo campo de entrada (el de verificación) utilice una acción OnBlur ycompare las cadenas de ambos campos.

Ejemplo de código Javascript de validación de campos iguales:

Form NameDOM => MiForm

NameDom => CampoPwd1 (campo de carga de un password)

NameDOM => CampoVerifyPwd1 (campo de verificación que son idénticos)

Ajax Acción => OnClick=comprobarClave()

<script>

Function comprobarClave(){

clave1 = document.MiForm.CampoPwd1.value

clave2 = document.MiForm.CampoVerifyPwd1.value

If (clave1 == clave2)

alert("Las dos claves son iguales...\nRealizaríamos las acciones del caso positivo")

Else

alert("Las dos claves son distintas...\nRealizaríamos las acciones del caso negativo")

}

</script>

Veamos un código Javascript similar que realiza acciones sobre dos campos pwd1 y pwd2 del

MBC - Forms64


formulario prueba

<script>

function FldRepeat() {

var pw1 = document.prueba.pwd1.value;

var pw2 = document.prueba.pwd2.value;

if (pw1 != pw2) {

self.document.prueba.pwd2.value='';

alert('Los campos no coinciden');

return false;

}

}

</script>

En este caso realizamos un borrado del dato que no corresponde (pwd2) y a continuación damos elaviso del error.

8.5.20 Campo de imagen

Los campos de imagen se consideran botones de envío Submit sobre el formulario pero utilzando unaimagen como acceso directo.

En este caso la longitud del campo se usará como en TextArea pero referido al ancho y alto de laimagen en cuestión.


8.5.21 Campo con imagen simple

Si lo que se desea es realmente solo insertar una imagen seleccione en el Tipo base de entradaIMAGEN lo que equivale a sustituir:la etiqueta <INPUT .../> por <IMG .... />

Al variar este inicio de etiqueta el tamaño del campo que estaba siendo utilizado para fijar el ancho de laimagen se convierte en HEIGHT y WIDTH como parámetros del <IMG.../>

8.5.22 Campo utilizando formato de presentación





8.5.23 Botones

Sin lugar a dudas este campo siempre es necesario en todo formulario, sea cual sea su naturaleza, unavez completado necesitaremos realizar una acción.

Existen varias formas de utilizar y gestionar los botones de un formulario, si bien el generador utilizasiempre una metodología en el proceso de gestión (que puede ser alterado por usuarios con nivelavanzado de programación en Javascript).

Método 1

<input type="button" value="Enviar" Onclick="javascript:document.location.href='<% = URL %>'" />

Método 2

<input type="button" value="submit" />

Método 3 (borrado de contenido de campos)

<input type="button" value"reset" onclick="document.forms[0].reset()" />

8.5.24 Campo con operaciones

Una de las necesidades más habituales es la escritura automática de totales en base a cambios en loscampos del formulario, veamos una simple función de ejemplo para realizar esto

onchange="checkImpte(this)"

function checkImpte() {

var total1=self.document.miform.campo1.value*50>;

var total2=self.document.miform.campo2.value*10;

self.document.miform.subtot.value = total1+total2;

}

En este ejemplo hemos utilizado la acción Al Cambiar en un campo para realizar una operación primerode multiplicar el valor de un campo por 50, otro campo por 10, en ambos casos crear una variable paramantener el valor y a continuación sumar ambos y asignarlos al campo de SUBTOT que tenemosdefinido

8.5.25 Cambiar el color del campo al foco

Una de las ayudas visuales más comunes en el uso de formularios es el coloreado de un campo alestablecer el foco sobre el, esto ayuda a saber en donde se encuentra el cursor y que campo se estásolicitando.

Para ello usaremos dos acciones simultáneamente: OnFocus (al establecer el foco) y OnBlur (al perder

MBC - Forms66


el foco)

onfocus="this.style.background=('#ff0000');this.style.color=('#00ff00')" onblur="this.style.background=('#220000')"

Existe también un método alternativo usando CSS con a:focus {...}

8.5.26 Campos encadenados

Es el campo habitual para cuentas de banco separando Banco/Sucursal/DC/Cuenta y algunos otros deeste tipo (fechas DD/MM/AAAA).

Realice 4 campos de texto simple, cada uno de ellos con sus correspondientes rótulos y longitudes.

El primer campo de los encadenados será el referente para los demás, los otros tres campos asigne enencadenado el número de campo de referencia. Recuerde que el campo de rótulo será el literal queprecede a cada campo y en este caso sería más lógico poner un simple - (guión) para separar lascuentas.


Part

IX

MBC - Forms68


9 CSS en MBC-Forms

Estas son algunas de las cláusulas CSS más habitualmente utilizadas en la definición de campos yformularios.

Adicionalmente puede forzar a cargar una hoja CSS dentro del código del módulo utilizando una llamadadesde la configuración

Recomendamos a los usuarios de nivel bajo/medio que se documenten con cualquier libro que describade forma general las CSS o bien que consulte la web de W3C

Modelo de cajas en CSS

Margen=Margin Borde=border Relleno=padding Ancho=width Alto=height Contenido=espacio al que afectan

los anteriores

CSS DESCRIPCIÓN

font-family tipografía que deseamos utilizar

font-style estilo asignado a la tipografía (italica por ejemplo = italic)

font-weight Densidad del texto (negrita por ejemplo = bold)

font-size Tamaño del texto en pixel o em

font Permite el uso simultáneo de los valores anteriores

text-indent Indentación del texto

text-align Alineado del texto

text-transform Conversión del texto

word-spacing Espaciado entre palabras

letter-spacing Espaciado entre letras

color Color del texto

background-color

Color del fondo

background-image

Imagen de fondo

background-repeat

Repetir imagen

background- Posición de la imagen

http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo

CSS en MBC-Forms 69


CSS DESCRIPCIÓN

position

background Permite el uso simultáneo de los valores anteriores

padding-left Espaciado interno por la izquierda

padding-right Espaciado interno por la derecha

padding-top Espaciado interno superior

padding-bottom Espaciado interno inferior

padding Permite el uso simultáneo de los valores anteriores

margin-left Espaciado externo vacío por la izquierda

margin-right Espaciado externo vacío por la derecha

margin-top Espaciado externo vacío por arriba

margin-bottom Espaciado externo vacío por abajo

margin Permite el uso simultáneo de los valores anteriores

border-color Color del borde

border-style Estilo del borde

border-width Grosor del borde

border-left Borde izquierdo

border-right Borde derecho

border-top Borde superior

border-bottom Borde inferior

border Permite el uso simultáneo de los valores anteriores

#RRGGBB Notación RGB de 6 valores hexadecimales (habitualmente la notación utilizada)

#RGB Notación simplificada de RRGGBB siempre que los números de cada sean igualesCCFFAA=CFA

rgb(R,G,B) Notación de tres colores de valores 0 a 255

rgb (R%,G%,B%)

Notación de tres colores de valores porcentuales

cursor Especifica el curso sobre el elemento [ [http://.../cursor.ico,]* [ auto |crosshair | default | pointer | move | e-resize | ne-resize | nw-resize| n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait |help | progress ] ]

9.1 Ejemplos de CSS para personalización

A continuación estos son los ejemplos y preguntas más habituales de personalización tanto en rótuloscomo en campos.Hemos puesto el ejemplo gráfico usando un formulario de color blanco de fondo y como color apersonalizar el Rojo 100% (#FF0000;) con el fin de facilitar la visualización de los cambios.

Cambiar el fondo de un rótulo completoSeleccione el campo que desea modificar, pulse Editar y vaya al campo Rótulo Cell StyleEscriba: background-color:#FF0000; donde "#FF0000;" equivale al color que desea poner

Cambiar el fondo del texto de un rótuloSeleccione el campo que desea modificar, pulse Editar y vaya al campo Rótulo StyleEscriba: background-color:#FF0000; donde "#FF0000;" equivale al color que desea poner

MBC - Forms70


Cambiar el fondo de un campo (area de trabajo)Seleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell StyleEscriba: background-color:#FF0000; donde "#FF0000;" equivale al color que desea poner

Cambiar el fondo del area de un campo (zona de carga de datos)Seleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell StyleEscriba: background-color:#FF0000; donde "#FF0000;" equivale al color que desea poner

Cambiar el tamaño del textoSeleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell StyleEscriba: text-size=14px; donde "24px" equivale al tamaño en pixel de la fuente a cambiar

Alinear el rótulo a la izquierdaSeleccione el campo que desea modificar, pulse Editar y vaya al campo Rótulo Cell StyleEscriba: text-align:left; donde "left" equivale a la posición del texto, puede utilizar left-center-right entre otras opciones

Alinear arriba un rótuloSeleccione el campo que desea modificar, pulse Editar y vaya al campo Rótulo Cell StyleEscriba: vertical-align:top; donde "top" equivale ala posición del elemento en el area, puedeutilizar top-middle-bottom entre otras opciones

Alinear arriba y a la derecha un rótuloSeleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell StyleEscriba: text-align:right;vertical-align:top; donde "right y top" asignan la posición delelemento

Centrar completamente un rótuloSeleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell StyleEscriba: text-align:center;vertical-align:middle; donde "center y middle" asignan laposición del elemento horizontal y vertical repectivamente

Cambiar el color del texto de un rótulo

Cambiar el color del texto de un campo

Cambiar el color del texto de un campo y el color del fondo del mismo

Alinear el contenido de un campo al centro

Alinear el contenido de un campo a la derecha


Part

X

MBC - Forms72


10 Eventos de un formulario

La nomenclatura de exploradores es : FF - FireFox, N - Netscape y IE - Internet Explorer, en el caso deOpera, Safari, Flock, Google Chrome, etc... se supone que al menos manejan los eventos de FireFox.

EVENTO CUANDO OCURRE FF N IE

onabort Cargando una imagen es interrumpido 1 3 4

onblur Al perder el foco (relacionado con OnFocus) 1 2 3

onchange El usuario cambia el contenido de un campo 1 2 3

onclick El ratón hace click sobre el objeto 1 2 3

ondblclick El ratón hace doble click sobre el objeto 1 4 4

onerror Un error se ha producido al cargar un documento o una imagen 1 3 4

onfocus Un elemento toma el foco (relacionado con OnBlur) 1 2 3

onkeydown Una tecla es presionada 1 4 3

onkeypress Una tecla es presionada o esta presionada 1 4 3

onkeyup Una tecla se ha soltado 1 4 3

onload Una página o imagen se ha finalizado su carga 1 2 3

onmousedown Un botón del ratón se ha presionado 1 4 4

onmousemove El ratón se ha movido 1 6 3

onmouseout El ratón se ha movido fuera de un elemento 1 4 4

onmouseover El ratón se mueve sobre un elemento 1 2 3

onmouseup El botón del ratón se ha soltado 1 4 4

onreset El botón de reset se ha presionado 1 3 4

onresize Una ventana o frame se ha variado su tamaño 1 4 4

onselect Se ha seleccionado una parte de texto 1 2 3

onsubmit Se ha solicitado el envío o presionado un botón de envío 1 2 3

onunload El usuario sale o descarga la página 1 2 3

Manejar de forma correcta los eventos le permitirá controlar por completo las acciones de los usuariossobre sus formularios.


Part

XI

MBC - Forms74


11 Javascript en MBC-Forms

Recuerde que no es necesaria la inserción de las etiquetas <SCRIPT...></SCRIPT> para elcódigo javascript del formulario

Función de validación de campos que se construye al activar un campo como obligatorio

function ValidaForm(EW_this) {

if (EW_this.texto1 && !EW_hasValue(EW_this.texto1, "TEXT" )) {

if (!EW_onError(EW_this, EW_this.texto1, "TEXT", "Campo necesario/obligatorio sin rellenar"))

return false;

}

if (EW_this.dt1 && !EW_hasValue(EW_this.dt1, "TEXT" )) {

if (!EW_onError(EW_this, EW_this.dt1, "TEXT", "Campo necesario/obligatorio sin rellenar"))

return false;

}

if (EW_this.desple1 && !EW_hasValue(EW_this.desple1, "SELECT" )) {

if (!EW_onError(EW_this, EW_this.desple1, "SELECT", "Campo necesario/obligatorio sin rellenar"))

return false;

}

if (EW_this.desple2 && !EW_hasValue(EW_this.desple2, "SELECT" )) {

if (!EW_onError(EW_this, EW_this.desple2, "SELECT", "Campo necesario/obligatorio sin rellenar"))

return false;

}

return true;

}

Comprobación de un campo si dispone valor

function EW_hasValue(obj, obj_type) {

if (obj_type == "TEXT" || obj_type == "PASSWORD" || obj_type == "TEXTAREA" || obj_type == "FILE") {

if (obj.value.length == 0)

return false;

else

return true;

} else if (obj_type == "SELECT") {

if (obj.type != "select-multiple" && obj.selectedIndex == 0)

return false;

else if (obj.type == "select-multiple" && obj.selectedIndex == -1)

return false;

else

return true;

} else if (obj_type == "RADIO" || obj_type == "CHECKBOX") {

if (obj[0]) {

for (i=0; i < obj.length; i++) {

if (obj[i].checked)

return true;

}

} else {

return (obj.checked);

}

return false;

}

}

Javascript en MBC-Forms 75


Gestión de errores de validación de campo

function EW_onError(form_object, input_object, object_type, error_message) {

alert(error_message);

if (object_type == "RADIO" || object_type == "CHECKBOX") {

if (input_object[0])

input_object[0].focus();

else

input_object.focus();

} else if (!EW_isHiddenTextArea(input_object, object_type)) {

input_object.focus();

}

if (object_type == "TEXT" || object_type == "PASSWORD" || object_type == "TEXTAREA" || object_type == "FILE") {

if (!EW_isHiddenTextArea(input_object, object_type))

input_object.select();

}

return false;

}

Funciones básicas de gestión del Editor HTML

// DHTML editor

function ew_DHTMLEditor(name, f) {

this.name = name;

this.create = (f) ? f : function() { this.active = true; };

this.editor = null;

this.active = false;

}

// Create DHTML editor

function ew_CreateEditor(name) {

if (typeof ew_DHTMLEditors == 'undefined')

return;

for (var i = 0; i < ew_DHTMLEditors.length; i++) {

var ed = ew_DHTMLEditors[i];

var cr = !ed.active;

if (name) cr = cr && ed.name == name;

if (cr) {

if (typeof ed.create == 'function')

ed.create();

if (name)

break;

}

}

}

</script>

<script type="text/javascript" src="bdforms/fckeditor/fckeditor.js"></script>

<script type="text/javascript">

<!--

_width_multiplier = 16;

_height_multiplier = 60;

var ew_DHTMLEditors = [];

// update value from editor to textarea

function ew_UpdateTextArea() {

if (typeof ew_DHTMLEditors != 'undefined' && typeof FCKeditorAPI != 'undefined') {

MBC - Forms76


var inst;

for (inst in FCKeditorAPI.__Instances)

FCKeditorAPI.__Instances[inst].UpdateLinkedField();

}

}

// update value from textarea to editor

function ew_UpdateDHTMLEditor(name) {


var inst = FCKeditorAPI.GetInstance(name);

if (inst)

inst.SetHTML(inst.LinkedField.value)

}

}

// focus editor

function ew_FocusDHTMLEditor(name) {


var inst = FCKeditorAPI.GetInstance(name);

if (inst && inst.EditorWindow) {

inst.EditorWindow.focus();

}

}

}

Activación y creación del DHTML-Editor en el formulario

ew_CreateEditor();

Activación de DHTML-Editor en campo TextArea

var editor = New ew_DHTMLEditor("txtac1");

editor.create = Function() {

var sBasePath = 'bdforms/fckeditor/';

var oFCKeditor = New FCKeditor('txtac1', 40*_width_multiplier, 5*_height_multiplier);

oFCKeditor.BasePath = sBasePath;

oFCKeditor.ReplaceTextarea();

this.active = True;

}

ew_DHTMLEditors[ew_DHTMLEditors.length] = editor;

Código para disponer de el Calendario Javascript

<link rel="stylesheet" Type="text/css" media="all" href="bdforms/calendar/calendar-win2k-1.css" title="win2k-1"><script Type="text/javascript" src="bdforms/calendar/calendar.js"></script>

<script Type="text/javascript" src="bdforms/calendar/lang/calendar-es.js"></script>

<script Type="text/javascript" src="bdforms/calendar/calendar-setup.js"></script>

Código para activar en el campo el botón del calendario

Calendar.setup(

{

inputField : "dt1", // ID of the Input field

ifFormat : "%d/%m/%Y", // the Date format

button : "cx_dt1" // ID of the button



}

);

Validación de claves con tamaño, verificación y caracteresfunction validatePwd() {

var invalid = " "; // Invalid character is a space

var minLength = 6; // Minimum length

var pw1 = document.myForm.password.value;

var pw2 = document.myForm.password2.value;

// check for a value in both fields.

if (pw1 == '' || pw2 == '') {

alert('Please enter your password twice.');

return false;

}

// check for minimum length

if (document.myForm.password.value.length < minLength) {

alert('Your password must be at least ' + minLength + ' characters long. Try again.');

return false;

}

// check for spaces

if (document.myForm.password.value.indexOf(invalid) > -1) {

alert("Sorry, spaces are not allowed.");

return false;

}

else {

if (pw1 != pw2) {

alert ("You did not enter the same new password twice. Please re-enter your password.");

return false;

}

else {

alert('Nice job.');

return true;

}

}

}

Validar si el campo es e-mailEn el campo insertamos en Ajax acciones: onblur="ValidarMail(this)"

En el formulario agregamos este javascript:function echeck(str) {

var at="@"

var dot="."

var lat=str.indexOf(at)

var lstr=str.length

var ldot=str.indexOf(dot)

if (str.indexOf(at)==-1){

alert("E-mail No Valido")

return false

}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){


return false

}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){


return false

MBC - Forms78


}

if (str.indexOf(at,(lat+1))!=-1){


return false

}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){


return false

}

if (str.indexOf(dot,(lat+2))==-1){


return false

}

if (str.indexOf(" ")!=-1){


return false

}

return true

}

function ValidarMail(varmail){

var emailID=varmail

//document.reservas.txtEmail

if ((emailID.value==null)||(emailID.value=="")){

alert("Por favor entre un email valido")

emailID.focus()

return false

}

if (echeck(emailID.value)==false){

emailID.value=""

emailID.focus()

return false

}

return true

}

Desactivar la tecla ENTER de un campoEn el campo donde deseamos que no opere la tecla ENTER (chr=13) incorporamos este literal enAcciones

onkeypress="javascript:if(event.keyCode==13){return false;}"

Podemos reutilizar la misma función para asignar un tabulado (TAB chr=8) para cambiar al siguientecampo como alternativa al ENTER

onkeypress="javascript:if(event.keyCode==13){return (Escribir aqui la secuencia que se envia);}"

Acciones sobre un campo SELECTEn ocasiones disponemos de campos SELECT que deben refrescar la pantalla con los datos de laselección

Incorporamos en el formulario un código que usaremos como función

function CargarUrlBxtm(param) {

document.location = 'index.asp?bxtm=' + param;

}

function CargarUrlBxsr(param) {

document.location = 'index.asp?bxsr=' + param;

}



En el campo insertamos la función con el evento OnChange

onchange="CargarUrlBxtm(this.value)"

Función para eliminar ENTER reutilizableInsertamos en el formulario este código que luego vamos a incorporar como función en el evento delcampo que necesitemos

function blockEnter()

{

if (event.keyCode==13)

return false;

}


Part

XII

Ajax en MBC-Forms 81


12 Ajax en MBC-Forms

Se ha creado una función simple de petición Ajax a la URL que desee el cliente

function AjaxGet(esto,URL,destino)

{

var ajax = new ajaxFunction();

ajax.onreadystatechange=function()

{

if(ajax.readyState==4)

{

document.getElementById(destino).innerHTML=ajax.responseText;

//esto.focus();

}

}

ajax.open("GET",URL+"?campo="+esto.name+"&valor="+esto.value,true);

ajax.send(null);

}

Para utilizar la función Javascript indicada simplemente añada al campo que desea utilizar un eventocon la funciónEjemplo:

OnBlur="AjaxGet (this,'ruta/miprograma.asp','ajax_micampo')"

En este ejemplo hemos puesto el evento Blur (al salir/modificar) y dónde miprograma.asp será elprograma generado y subido al servidor por usted (con la ruta relativa a la web donde se ejecuta MBC-Forms) y que retorna el texto que será insertado tras la petición, ajax_micampo equivale al nombre delarea DIV que está predefinido para el campo.Recuerde que cada campo dispone de un area <DIV..></DIV> con el prefijo 'ajax_' en la ID= y será elsitio donde retorne el código pedido.

12.1 Validar complejidad de un password

Entre los módulos ASP que se incluyen en MBC-SQL existe uno que se denomina pwdcomplex.asp,este programa evalua la complejidad de una cadena de caracteres para su uso como password.Por ejemplo: 1234 será menos compleja que Ab1234 y aún se podría mejorar si usamos caracterescomo $ ( ! / ) etc... Esta función retorna un texto indicando el nivel de complejidad de esta clave.

En un campo que hemos definido como ID Name = pwd1 metemos en Ajax acción = onkeyup="AjaxGet(this,'asp/pwdcomplex.asp','ajax_pwd1')"

El resultado es que este campo escribe su nivel de complejidad avisando al usuario sobre la posibilidadde mejorar.

12.2 Verificar existencia de un usuario


Part

XIII

Integración con MBC-SQL 83


13 Integración con MBC-SQL

Módulo-Patrón: bdForms

Parámetros del contenedor:idform : número de formulario que se visualizarápag : paginacióntblborder : ancho del borde de las celdastblspacing : espaciado entre celdas de las tablastblpadding : espaciado interior de las tablasusestyle : activa el uso de estilos heredados del contenedor de MBC

13.1 Recomendaciones de integración

Son necesarios los siguientes archivos:

ARCHIVO RUTA DESDE ROOT-WEB DESCRIPCIÓN

bdforms.asp /sql/include Al estar en esta carpeta será usado desde lacarpeta /sql por el bloque index.aspDebe estar incluido en el maininclude.asp deMBCPatrón principal incluye procedimiento yfunciones necesarias. Incluye la cadena deconexión a /bdforms

bdforms (carpeta) /sql/bdforms Mantenimiento integral de la gestión de archivos

El archivo /sql/include/maininclude.asp debe contener estas líneas para poder admitir la llamada:

 <% 'modulo de generación de formularios %>

Case "bdforms" 'llamada al generador de formularios

Call bdforms(parametros, estilorotulo, estilopie, ancho, estilo)


Part

XIV

Datos para desarrolladores 85


14 Datos para desarrolladores

La información que a continuación se describe solo sirve para usuarios de nivel medio/avanzado, esnecesario conocimientos de HTML / DHTML, Javascript, CSS y ASP, para poder interpretar de formaadecuada.

Si tiene alguna duda, sugerencia o consulta, utilice el foro www.mastercafe.com/forum para generar supropio hilo y que otros usuarios puedan disponer también de esa información.

Descripción de como crear el texto para el Mail Msg (en desarrollo)

Como utilizar Class y Style simultáneamente (en desarrollo)

Creación de programas ASP externos que se utilizan con Ajax (en desarrollo)

http://www.mastercafe.com/forum


Part

XV

Utiles 87


15 Utiles

A continuación describimos algunas utilidades que se han incorporado a MBC-Forms y que pueden serpersonalizadas por el usuario de nivel medio/avanzado.

Recomendamos visitar la web de los creadores para obtener más detalles en su personalización yparametrización.

15.1 Calendario

Es un elemento emergente que nos ayuda a seleccionar de un calendario la fecha que deseamos poner,estableciendo el valor automáticamente en el campo.

Dispone de botones de avance y retroceso de año, mes y día.

15.2 Filtro XSS

Es una función que se ha incorporado para ser utilizada por el cliente de forma intencionada con el finde aportar seguridad en los contenidos de los campos de texto (especialmente textArea).

Estos son los términos a los que afecta el filtro XSS"javascript", "vbscript", "expression", "<applet", "<meta", "<xml", "<blink", "<link", "<style", "<script","<embed", "<object", "<iframe", "<frame", "<frameset", "<ilayer", "<layer", "<bgsound", "<title","<base", "onabort", "onactivate", "onafterprint", "onafterupdate", "onbeforeactivate", "onbeforecopy","onbeforecut", "onbeforedeactivate", "onbeforeeditfocus", "onbeforepaste", "onbeforeprint","onbeforeunload", "onbeforeupdate", "onblur", "onbounce", "oncellchange", "onchange", "onclick","oncontextmenu", "oncontrolselect", "oncopy", "oncut", "ondataavailable", "ondatasetchanged","ondatasetcomplete", "ondblclick", "ondeactivate", "ondrag", "ondragend", "ondragenter", "ondragleave","ondragover", "ondragstart", "ondrop", "onerror", "onerrorupdate", "onfilterchange", "onfinish", "onfocus","onfocusin", "onfocusout", "onhelp", "onkeydown", "onkeypress", "onkeyup", "onlayoutcomplete","onload", "onlosecapture", "onmousedown", "onmouseenter", "onmouseleave", "onmousemove","onmouseout", "onmouseover", "onmouseup", "onmousewheel", "onmove", "onmoveend", "onmovestart","onpaste", "onpropertychange", "onreadystatechange", "onreset", "onresize", "onresizeend","onresizestart", "onrowenter", "onrowexit", "onrowsdelete", "onrowsinserted", "onscroll", "onselect","onselectionchange", "onselectstart", "onstart", "onstop", "onsubmit", "onunload"

Cual es el efecto que se produce en el texto que es cargado tras el filtro XSS:

Antes: <script type="text/javascript">

MBC - Forms88


Después: <s<x>cript type="text/ja<x>vascript">

15.3 RTE Editor texto

Guía de referencia rápida de los botones disponibles en la barra de herramientas del Editor de Texto Enriquecido.

Funciones comunes de la barra de herramientas

Elemento (botón) Función

Ver o editar el documento en codigo fuente HTML (para usuarios avanzados.

Quitar todos los contenidos creando así una página en blanco.

Guarda la página que se está editando.

Previsualizar como quedaría el HTML visto por los usuarios.

Seleccionar una plantilla creada.

Cortar el texto seleccionado al clipboard.

Copiar el texto seleccionado al clipboard.

Pegar los datos copiados al clipboard (con o sin formato).

Pegar contenido copiado desde Microsoft Word o aplicaciones similares.

Imprimir el actual documento.

Chequear con el corrector ortográfico el documento (usa correctores externos).

Deshacer o rehacer la ultima acción realizada.

Buscar una palabra o frase dentro de un documento.

Buscar y reemplazar una palabra o frase en un documento.

Seleccionar todo el texto en el documento.

Quitar el formato en el texto seleccionado.

Aplicar remarcado, itá lica, subrayado o tachado al texto seleccionado.

Subíndice y supraíndice para el texto seleccionado.

Crear numeración o marcas de lista.

Incrementa o decrementa la indentación.

Utiles 89


Formatea un bloque de texto para identicar entre comillas (textos provenientes de otrasfuentes).

Establece el alineado del texto (izquierda, centrado, derecha o justificado).

Crear/editar o eliminar del texto los hipervínculos. También puede ser usado para manejar lassubidas de archivos y los vínculos con el servidor). (ver documentación ampliada)

Inserta o modifica un link tipo ancla.

Insertar imágenes en el documento. (ver documentación ampliada)

Insertar elementos de Adobe Flash en la página.

Crear una tabla con un número definido de columnas y filas (ver documentación ampliada)

Insertar una línea divisora horizontal.

Insertar emoticones como imagen (smiley faces, email icon, lightbulb, etc.).

Insertar símbolos y caracteres especiales (acentuados, marca, monedas, etc.).

Insertar un cambio de página para impresoras (solamente en las versiones de impacto).

Estilos y formatos que determinan la apariencia y el valor semántico del documento. Usteddeberá desplegar el campo y seleccionar un elemento para aplicar estilos, fuentes,configuración de la fuente, tamaños, etc. Para quitar estilos y/o formatos seleccione el mismoestilo de nuevo.

Cambia el color del texto en la zona seleccionada.

Cambia el color del fondo en la zona seleccionada.

Maximiza el tamaño del editor dentro del navegador.

Muestra los límites de los elementos de bloques en el texto.

Acerca de FCKeditor (acceso a la web en inglés).

Funciones de formularios

Barra deElementos

Función

Crear un nuevo bloque de formulario en la página.

Insertar un checkbox (marca de verificación) en la página.

Insertar un botón radio en la página.

MBC - Forms90


Insertar un campo de texto en la página.

Inserta una caja de texto multilineas en la página.

Insertar un campo de selección en la página.

Insertar un botón de formulario en la página.

Insertar como una imagen como botón para enviar los datos del formulario. No use este elemento parainsertar imágenes en el documento.

Insertar un campo oculto en la página.

Recopilado de "http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide/Quick_Reference"

15.3.1 Insertar Imágenes

Al insertar una nueva imagen obtenemos este formulario emergente para establecer los datos básicosnecesarios

En la solapa de Image Info (Información de la imagen) disponemos de los siguientes valores

Campo DescripciónURL Dirección donde se encuentra la imagen respecto del documento raizBrowse / Buscar Botón de acceso al navegador/buscador de imágenesAlternative text texto alternativo que se muestra al estar el ratón sobre la imagenWidth / Ancho Ancho en pixel (puede asignarse automáticamente)

Utiles 91


Height / Alto Alto en pixel (puede asignarse automáticamente)Border / Borde Border de la imagen en pixelHSpace / Espacio Hor. Espaciado horizontal respecto de otros elementos en pixelVspace / Espacio Vert. Espaciado vertical respecto de otros elementos en pixelAlign / Alinear Alineación de la imagen respecto del resto de contenido externo

Una segunda solapa nos ayuda a definir posibles links (vínculos) con otros elementos de la web oexternos

El campo URL establece el destino referido al link (src en términos HTML)El campo Target (destino) define que acción debe realizar el navegador al usar el link (_self , _blank,_parent) estas acciones van descritas en el propio desplegable.

La tercera solapa nos ayuda a subir directamente imágenes al servidor, si bien estas no quedaránregistradas en la tabla Imágenes (que se usa como referencia de la libreria), su utilidad reside en facilitarel mantenimiento y carga ocasional de algunos elementos gráficos.Pulse sobre el botón de Seleccionar para buscar el archivo a buscar y posteriormente subir al servidor.Una vez seleccionado pulse sobre el botón Enviar al servidor (send it...) para subirlo a su espacio web.Tenga en cuenta que el tiempo de subida siempre dependerá del tamaño del archivo que se sube y de ladisponibilidad de caudal de red que tenga su equipo.

MBC - Forms92


La cuarta solapa es la avanzada su uso suele estar orientado a usuarios con ciertos niveles deprogramación ya que permite usar lenguaje CSS.

Utiles 93


Los campos de imagen avanzada son:Id para establecer un identificador único en el DOMDirección de lenguajeCódigo de lenguajeDescripción larga de la URLClase definida para el objeto, es necesario que ya esté creada en las CSS genéricas de la web o bienen la personalización de CSS de la configuración web.Titulo de avisoEstilos personalizados, internamente agrega un style="estilos usuario"

15.3.2 Insertar Links

Existen tres tipos de Links o vínculos: URL, Ancla y e-Mail

A continuación describimos el genérico URL y en los apartados anexos tratamos el resto demodalidades.

MBC - Forms94


Tipo de LinkEstablece la definición que deseamos realizar al vínculo que insertamos, disponemos de tres modosURL (link tradicional), Ancla (Anchor o link contenido en texto) y por último eMail (mailto: )Protocolo es el prefijo que utilizará dicho link, habitualmente usaremos http:// para links absolutos(direcciones web completas) y Otros para links relativos al sitio web en el que estamos. Disponemos deotros protocolos como ftp://, https:// etc... pero estos siempre serán para links absolutos.URL define la ruta de destino del link, verifique este link si es posible antes de escribirlo o copie y pegueel texto desde la página web de destino.

Utiles 95


DestinoTarget o destino del link establece donde debe el navegador abrir el vínculo, puede ser en la páginaactual (_self), página nueva (_blank), etc... seleccione la opción deseada.En el caso de utilizar frames en la web debemos establecer el nombre del frame donde se destine elvínculo.

En los casos de selección de POPUP o ventana emergente disponemos de nuevos parámetros paraconfigurar dicho elemento (ventana).La mayoría de las opciones se basan en un disponible o no disponible para el usuario que vea estaventana.

Campo Descripción

Resizable Ajuste de la ventana por el usuario

Location Bar Barra de dirección URL visible

Menu Bar Barra de menú visible

Scroll Bars Barra de desplazamiento (horizontal o vertical) visible

Status Bar Barra de estado de ventana visible

Tool Bar Barra de herramientas visible

Full Screen (IE) Ver en pantalla completa (solo Internet Explorer)

Dependent (nets) Ventana dependiente (solo Netscape)

Width / Alto Ancho de la ventana en pixels

Height / Ancho Alto de la ventana en pixels

Left Pos./ Izquierda Posición absoluta en pantalla desde la izquierda (horizontal)

Right Pos / Derecha Posición absoluta en pantalla desde la derecha (vertical)

MBC - Forms96


Subida directa de archivos al servidor (utilidad anexa para facilitar trabajos intermedios de descarganecesaria en la web para el usuario, como PDF).Su funcionamiento es idéntico a la operativa que se describe en la inserción de imágenes.

Para los usuarios avanzados se ha dispuesto esta ventana que le permite re-asignar ciertos parámetrosespeciales. Es necesario algunos conocimientos de HTML y CSS para poder manejar correctamenteestos campos.

Campo Descripción

Utiles 97


Id Identificador para el DOM id=""LanguageDirection

Orientación (dcha a izda o de izda. a dcha.) dir=""

Access Key Tecla de acceso rápido al link accesskey=""Name Nombre del vínculo name=""Languaje Code Codigo de idioma lang=""Tab Index Número de tabulado dentro del total que se muestra en el navegador tabindex=""Advisory Title Titulo del link title=""Advisory Content Tipo de contenido del link type=""Stylesheet Class Nombre de la definición class en la hoja de estilos personalizada class=""Linked resource Codigo de caracteres vinculado charset=""Style Use directamente lenguaje CSS para establecer los valores style="suestilo"

15.3.2.1 Link de ancla

Inserción de un link tipo ancla (anchor) dentro del texto contenido. Recuerde que para poder utilizar estetipo de link necesitará previamente haber definido las diferentes anclas por el texto (ver uso)

Seleccione el nombre del ancla al que hace referencia, el desplegable le limitará los vínculosdisponibles. O bien si ha creado Id dispondrá en el desplegable de ellas.

MBC - Forms98


En la inserción de anclas es necesario fijar un literal, que se recomienda no contenga espacios pero que se

significativa al sitio de referencia para simplificar su uso.

15.3.2.2 Link de email

Equivale a automatizar el proceso de envío directo de un correo a través de la aplicación del cliente(Outlook, Express, Eudora, etc...) equivale a realizar en HTML un mailto:[email protected]

Indique la dirección de email del destinatario, si necesita poner varias utilice punto y coma (;) paraseparar los elementosIndique el objeto del envío de correo (equivale a Subject como parámetros)Indique el texto genérico que se incrustará en el correo electrónico (este texto es por defecto y elusuario podrá modificarlo, como el subject).

15.3.3 Insertar Tabla

Al hacer click sobre el botón de insertar tabla veremos emerger esta pantalla:


Utiles 99


Las propiedades que podemos utilizar en la creación de tablas son:

Campo Descripción

Filas Número entero que establece las filas de la tabla

Columnas Número entero que establece las columnas de la tabla

Anchura Número entero que establece el ancho total en pixel o porcentaje

Altura Número entero que establece el alto total en pixel o porcentaje

Medida Establece la medida de ancho y alto

Tamaño Borde Número entero que establece el número de pixels de borde

Alineación Ajuste del contenido de la celda (derecha, izquierda, centrado)

Esp. e/celdas Número entero que establece en pixel el espacio entre celdas

Esp. interior Número entero que establece en pixel el margen interior de las celdas

Título Nombre que fijamos a la tabla (area DOM para usos en Javascript)

Síntesis Descripción opcional de la tabla

Es importante reseñar que la tabla siempre está supeditada a la caja donde se vaya a mostrar, por loque no debe poner tamaños superiores a la caja destino de la misma. Se recomienda el uso de valoresporcentuales para simplificar la operación.

15.3.3.1 Celdas

Editar y cambiar propiedades de las celdas

Unir celdas (combinar)Insertar/Eliminar/Combinar/Dividir celdas

15.3.3.2 Filas y Columnas

Insertar / Eliminar filas y/o columnas

MBC - Forms100


15.3.4 Navegar por el servidor

Esta es la ventana que se muestra cuando deseamos navegar por el servidor para buscar una de lasimágenes subidas con anterioridad o bien queremos subir nuevos elementos.En la parte izquierda superior disponemos del tipo de recurso que estamos buscando o manipulando. Asu derecha nos mostrará la ruta en la que nos encontramos.Bajo el tipo de recurso veremos en formato de árbol la carpeta en uso, así como la opción deseleccionar otra carpeta contenida en esta en el servidor, movernos a la carpeta anterior, etc. En la zona central (bajo la ruta en la que estamos) disponemos de un listado de elementos encontradosque coinciden con el tipo de recurso, simplemente marque el archivo que desea usar en la ventanaanterior al navegador.

En la parte inferior se han dispuesto dos utilidades para el mantenimiento: creación de nuevas carpetas(con el fin de poder organizar los archivos subidos) y subida al servidor de nuevos elementos (imágenes,pdf, etc...). El uso de la subida es simple: seleccione con el botón examinar el archivo de su equipo, acontinuación pulse UPLOAD para subirlo a la carpeta en la que se encuentra.

15.3.5 Insertar Flash

La función de inserción de elementos flash pretende simplificar la codificación de estos ya que sonobjetos embebidos en la web.

Utiles 101


La URL establece el origen del archivo y podemos utilizar el botón de Ver servidor parasimplificar la selección del mismoConfigure el ancho y alto del elemento flash para forzar su visualización correcta, si omite estos camposla tendencia es crear un zoom a la caja contenida (siempre que este se habilitara en los comandos deflash).Dispone en la parte inferior de una vista previa de como quedaría este elemento en la web.

MBC - Forms102


Se ha incluido la utilidad de subir automáticamente archivos al servidor, para ello pulse el botónExaminar y seleccione el archivo de su equipo, a continuación pulse el botón de Enviar al Servidor parasubirlo.

Utiles 103


Para los usuarios avanzados y simplificar la tarea de insertar comandos o parámetros al objeto flash, sehan dispuesto estos campos.Es necesario disponer de conocimientos básicos de HTML y CSS para manipular los campos inferiores.


Part

XVI

Usando forms.asp externamente 105


16 Usando forms.asp externamente

Forms.asp es una aplicación externa que nos permite utilizar cualquier formulario como una páginadirecta sin necesidad de integrarla en una caja.Básicamente el objetivo es facilitar el uso de formularios en cajas de sombras (shadowbox) comoelemento emergente no obstructivo o bien como popup

Parámetros disponibles:IDFORM establece el número del formulario que deseamos utilizarHIDEFIELD agregar campos ocultos con información externa al formulario definidoUSER nombre del usuario autorizado para la utilización de la herramienta

Ejemplos de llamadas a Forms externas

http://www.miweb.com/forms.asp?idform=5&user=nombre

http://www.miweb.com/forms.asp?idform=5&hidefield=campo1:valor;campo2:valor;campo3:valor&user=nombre

http://www.miweb.com/forms




Part

XVII

Formularios ejemplo 107


17 Formularios ejemplo

Estos son los formularios que encontrará por defecto en su base de datos BD-Forms y que han sidocreados como ejemplos funcionales para integrar en su web

Formulario de ejemplos de camposFormulario simple de contactoFormulario extendido de contactoFormulario de contacto básicoFormulario de reservasFormulario de newsletter (basado en AJAX)Formulario de newsletter (conexión con datos y validación de clave)Formulario de acceso a webmail

MBC - Forms108


Index- A -Adobe Flash 100

Agrupar campos en pantalla 61

Ajax MBC 81

Anchor link 97

Asignar fecha con calendario 87

Ayuda en rótulo de campo 53

- B -Botones 65

Browse server 100

Buscar archivos en el servidor 100

- C -Calendario 87

Campo de archivo 60

Campo de fecha 55

Campo de selección agrupada 59

Campo de selección desplegable 58

Campo de selección tipo radio 56

Campo de seleccion tipo Radio-Múltiple 57

Campo de texto 52

Campo de verificación 55

Campo Oculto 52

Campos 24

Campos Acciones 49

Campos definición 43

Campos Idioma 48

Campos por tabla 19

Campos Valores definición 50

Campos Valores Idiomas 51

CAPTCHA 62

cms 9

Codificacion idiomas 16

Como usar 16

Compatibilidad 9

Configuración 28

CSS en MBC 68

- D -Datos del cliente (Q&A) 39

Desarrolladores 85

Desplegables del mantenimiento 24

DHTML Editor 54

Diagrama general 19

Dudas 9

- E -Editor 88

Editor texto enriquecido 88

ejemplo 11

Ejemplo de formulario 39

Ejemplos de Campos 51

- F -FAQ 9

Field Help 53

FIELDSET 61

FireFox Mozilla 9

Flock 9

Formulario Columnas 37

Formulario definición 32

Formulario Idiomas 36

- G -Gestion de archivos 100

Google Chrome 9

- H -HIDDEN 52

Historia 11

HTML Editor 54

- I -INPUT CHECKBOX 55

INPUT FILE 60

INPUT RADIO 56, 57

INPUT TEXT 52

Index 109


INPUT TEXT DATE 55

insertar email 98

Insertar Flash 100

Insertar imágenes 90

Insertar links 93

Insertar tabla 98

Integración con MBC-SQL 83

Internet Explorer 9

introduccion 9

- J -Javascript en Celda de rótulo 61

Javascript en MBC 74

- K -K-Meleon 9

- L -Link de email 98

Links de ancla 97

Links recomendados 11

- M -Macromedia Flash 100

Mantenimiento 21

Mantenimiento de tablas 24

Marcos en campos 61

mbc 9

Mejoras 11

Métodos 24

- N -Navegar por el servidor 100

Novedades 11

- O -Opera 9

Operaciones en campos con Javascript 65

- P -Personalización 61, 62

Preguntas frecuentes 9

- Q -Que es CMS 9

Que es MBC 9

- R -Recomendaciones 83

Rich Text Editor 88

RTE 88

RTE Field 54

- S -Safari 9

SELECT OPTGROUP 59

SELECT OPTION 58

Separador de campos en formulario 38

Subida de archivos 100

- T -Tabla 98

Tablas y relaciones 19

Tecnología que usa 9

TEXTAREA HTML 54

Tipo Campos 25

- U -Upload 100

Uso de CSS en Campos 62

Uso gráfico de CSS en rótulo 61

- V -Validación humana 62

MBC - Forms110


- W -web 2.0 9

Endnotes 2... (after index)

111


Contraportada

MBC - Forms

Documents

Transcript of MBC - Forms