Myslide.es Mbc Forms
-
Upload
carlos-arreola-serrato -
Category
Documents
-
view
242 -
download
5
description
Transcript of Myslide.es 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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
.......................................................................................................................................................... 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
© 2010 Juan Menéndez Crespo
.......................................................................................................................................................... 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
© 2010 Juan Menéndez Crespo
MBC - FormsEl generador de formularios web
Part
I
Introducción 9
© 2010 Juan Menéndez Crespo
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
MBC - Forms10
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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,
MBC - Forms12
© 2010 Juan Menéndez Crespo
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)
Introducción 13
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
MBC - FormsEl generador de formularios web
Part
II
MBC - Forms16
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
muestran en Ejemplos de campos
MBC - FormsEl generador de formularios web
Part
III
Diagrama general 19
© 2010 Juan Menéndez Crespo
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.
MBC - FormsEl generador de formularios web
Part
IV
Mantenimiento 21
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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.
MBC - FormsEl generador de formularios web
Part
V
MBC - Forms24
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
Relación de Campos con Tipos
INPUT - BUTTON / CHECKBOX / FILE / HIDDEN / IMAGE / PASSWORD / RADIO / RESET / SUBMIT / TEXT
SELECT - OPTION / OPTGROUP
TEXTAREA - TEXT
FIELDSET - LEGEND
MBC - FormsEl generador de formularios web
Part
VI
MBC - Forms28
© 2010 Juan Menéndez Crespo
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
Configuración general 29
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
MBC - FormsEl generador de formularios web
Part
VII
MBC - Forms32
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
MBC - Forms34
© 2010 Juan Menéndez Crespo
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
Definición de formulario 35
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
Definición de formulario 37
© 2010 Juan Menéndez Crespo
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)
Botón de almacenado o grabado de la información contenida en este formulario
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
© 2010 Juan Menéndez Crespo
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)
Botón de almacenado o grabado de la información contenida en este formulario
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
Definición de formulario 39
© 2010 Juan Menéndez Crespo
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)
Botón de almacenado o grabado de la información contenida en este formulario
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
© 2010 Juan Menéndez Crespo
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
Definición de formulario 41
© 2010 Juan Menéndez Crespo
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
MBC - FormsEl generador de formularios web
Part
VIII
Definición de campos 43
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
Definición de campos 45
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
Definición de campos 47
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
Definición de campos 49
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
- 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
Definición de campos 51
© 2010 Juan Menéndez Crespo
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)
Botón de almacenado o grabado de la información contenida en este formulario
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)
Botón de almacenado o grabado de la información contenida en este formulario
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
© 2010 Juan Menéndez Crespo
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.
PARÁMETRO VALOR DESCRIPCIÓN
ID Name= mitxt Denominación única del campo para recuperar el valor
Orden 12 Número con el que vamos a fijar el orden
Definición de campos 53
© 2010 Juan Menéndez Crespo
PARÁMETRO VALOR DESCRIPCIÓN
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
PARÁMETRO VALOR DESCRIPCIÓN
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
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
© 2010 Juan Menéndez Crespo
agregar una funcionalidad de ayuda en el evento MouseOver de la casilla del rótulo
8.5.5 Campo de texto enriquecido
Es el tipo de campo más usado y versátil, permite la carga de cualquier contenido de texto y/onúmeros.
PARÁMETRO VALOR DESCRIPCIÓN
ID Name= mitxthtml 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 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
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.En este caso la personalización de estilos para el campo no operan ya que dependen de lapersonalización que disponga el Editor HTML.
Definición de campos 55
© 2010 Juan Menéndez Crespo
8.5.6 Campo de fecha
Es el tipo de campo más usado y versátil, permite la carga de cualquier contenido de texto y/onúmeros.
PARÁMETRO VALOR DESCRIPCIÓN
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 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
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 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
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 (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
PARÁMETRO VALOR DESCRIPCIÓN
ID Name= cb1 Denominación única del campo para recuperar el valor
Orden 40 Número con el que vamos a fijar el orden
MBC - Forms56
© 2010 Juan Menéndez Crespo
PARÁMETRO VALOR DESCRIPCIÓN
Presentación Rótulo-Campo
Izquierda el rótulo, derecha el campo de texto para el cliente
Tipo INPUT Campo de entrada de datos
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
PARÁMETRO VALOR DESCRIPCIÓN
ID Name radbtn Denominación única del campo para recuperar el valor
Orden 50 Número con el que vamos a fijar el orden
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
Tipo INPUT Campo de entrada de datos
Input Type RADIO Círculo de selección
Valor por v1 Asigne solo a uno de los campos este valor
Definición de campos 57
© 2010 Juan Menéndez Crespo
PARÁMETRO VALOR DESCRIPCIÓN
defecto
Rótulo Seleccione
Texto a mostrar para indicar que debe ser escrito en el campo
Aspecto DosColumnas
Usará en la tabla del formulario varios <TD> para mostrar Rotulo y Campo
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
PARÁMETRO VALOR DESCRIPCIÓN
ID Name radbtn Denominación única del campo para recuperar el valor
Orden 50 Número con el que vamos a fijar el orden
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
Tipo INPUT Campo de entrada de datos
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
Texto a mostrar para indicar que debe ser escrito en el campo
Aspecto DosColumnas
Usará en la tabla del formulario varios <TD> para mostrar Rotulo y Campo
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
© 2010 Juan Menéndez Crespo
campo
PARÁMETRO VALOR DESCRIPCIÓN
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)
PARÁMETRO VALOR DESCRIPCIÓN
ID Name despl1 Denominación única del campo para recuperar el valor
Orden 90 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 el cliente
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
Texto a mostrar para indicar que debe ser escrito en el campo
Aspecto DosColumnas
Usará en la tabla del formulario varios <TD> para mostrar Rotulo y Campo
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...)
Definición de campos 59
© 2010 Juan Menéndez Crespo
Establecido el bloque del campo pasamos a generar las líneas de selección dentro de valores delcampo
PARÁMETRO VALOR DESCRIPCIÓN
Value= sel1 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.11 Campo desplegable con OptGroup
PARÁMETRO VALOR DESCRIPCIÓN
ID Name despl1 Denominación única del campo para recuperar el valor
Orden 90 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 el cliente
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
Texto a mostrar para indicar que debe ser escrito en el campo
Aspecto DosColumnas
Usará en la tabla del formulario varios <TD> para mostrar Rotulo y Campo
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
© 2010 Juan Menéndez Crespo
PARÁMETRO VALOR DESCRIPCIÓN
Value= sel1 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
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).
PARÁMETRO VALOR DESCRIPCIÓN
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 el cliente
Tipo INPUT Campo de entrada de datos
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
Texto a mostrar para indicar que debe ser escrito en el campo
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.
Definición de campos 61
© 2010 Juan Menéndez Crespo
8.5.13 Campo de agrupamiento FieldSet
Agrupa varios campos con una línea rectangular, para mejorar su visualización en pantalla
PARÁMETRO VALOR DESCRIPCIÓN
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
Orden 25 Número con el que vamos a fijar el orden
Presentación Rótulo-Campo
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
© 2010 Juan Menéndez Crespo
(en línea o doble línea) la personalización de rótulo para los valores CELL afecta también a los mismosdel Campo.
PARÁMETRO VALOR DESCRIPCIÓN
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.
PARÁMETRO VALOR DESCRIPCIÓN
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.
Definición de campos 63
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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.
PARÁMETRO VALOR DESCRIPCIÓ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
PARÁMETRO VALOR DESCRIPCIÓN
Definición de campos 65
© 2010 Juan Menéndez Crespo
PARÁMETRO VALOR DESCRIPCIÓ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
© 2010 Juan Menéndez Crespo
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.
MBC - FormsEl generador de formularios web
Part
IX
MBC - Forms68
© 2010 Juan Menéndez Crespo
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
CSS en MBC-Forms 69
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
MBC - FormsEl generador de formularios web
Part
X
MBC - Forms72
© 2010 Juan Menéndez Crespo
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.
MBC - FormsEl generador de formularios web
Part
XI
MBC - Forms74
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
var inst;
for (inst in FCKeditorAPI.__Instances)
FCKeditorAPI.__Instances[inst].UpdateLinkedField();
}
}
// update value from textarea to editor
function ew_UpdateDHTMLEditor(name) {
if (typeof ew_DHTMLEditors != 'undefined' && typeof FCKeditorAPI != 'undefined') {
var inst = FCKeditorAPI.GetInstance(name);
if (inst)
inst.SetHTML(inst.LinkedField.value)
}
}
// focus editor
function ew_FocusDHTMLEditor(name) {
if (typeof ew_DHTMLEditors != 'undefined' && typeof FCKeditorAPI != 'undefined') {
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
Javascript en MBC-Forms 77
© 2010 Juan Menéndez Crespo
}
);
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){
alert("E-mail No Valido")
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("E-mail No Valido")
return false
MBC - Forms78
© 2010 Juan Menéndez Crespo
}
if (str.indexOf(at,(lat+1))!=-1){
alert("E-mail No Valido")
return false
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("E-mail No Valido")
return false
}
if (str.indexOf(dot,(lat+2))==-1){
alert("E-mail No Valido")
return false
}
if (str.indexOf(" ")!=-1){
alert("E-mail No Valido")
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;
}
Javascript en MBC-Forms 79
© 2010 Juan Menéndez Crespo
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;
}
MBC - FormsEl generador de formularios web
Part
XII
Ajax en MBC-Forms 81
© 2010 Juan Menéndez Crespo
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
MBC - FormsEl generador de formularios web
Part
XIII
Integración con MBC-SQL 83
© 2010 Juan Menéndez Crespo
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:
<!--#include file="bdforms.asp"--> <% 'modulo de generación de formularios %>
Case "bdforms" 'llamada al generador de formularios
Call bdforms(parametros, estilorotulo, estilopie, ancho, estilo)
MBC - FormsEl generador de formularios web
Part
XIV
Datos para desarrolladores 85
© 2010 Juan Menéndez Crespo
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)
MBC - FormsEl generador de formularios web
Part
XV
Utiles 87
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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.
MBC - FormsEl generador de formularios web
Part
XVI
Usando forms.asp externamente 105
© 2010 Juan Menéndez Crespo
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
MBC - FormsEl generador de formularios web
Part
XVII
Formularios ejemplo 107
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
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
© 2010 Juan Menéndez Crespo
- W -web 2.0 9
Endnotes 2... (after index)
111
© 2010 Juan Menéndez Crespo
Contraportada