Forms (formularios adaptables y formularios HTML5) utiliza bibliotecas jQuery, Backbone.js y Underscore.js para apariencia y secuencias de comandos. Los formularios también utilizan la arquitectura jQuery UI Widgets para todos los elementos interactivos (como campos y botones) del formulario. Esta arquitectura permite al desarrollador de formularios utilizar un completo conjunto de utilidades y complementos jQuery disponibles en Forms. También puede implementar lógica específica del formulario al capturar datos de usuarios como las restricciones de leadDigits/trackDigits o la implementación de cláusulas de imagen. Los desarrolladores de formularios pueden crear y utilizar apariencias personalizadas para mejorar la experiencia de captura de datos y hacerla más sencilla.
Este artículo está dirigido a los desarrolladores con suficiente conocimiento de las utilidades jQuery y jQuery. Proporciona una visión detallada del marco de trabajo de apariencia y permite a los desarrolladores crear un aspecto alternativo para un campo de formulario.
La estructura de aspecto se basa en diversas opciones, eventos (activadores) y funciones para capturar las interacciones del usuario con el formulario, y responde a los cambios del modelo para informar al usuario final. Además:
Las siguientes son las opciones globales definidas. Estas opciones están disponibles para cada campo.
Propiedad | Descripción |
---|---|
name | Identificador utilizado para especificar este objeto o evento en expresiones de secuencias de comandos. Por ejemplo, esta propiedad especifica el nombre de la aplicación host. |
seleccionado | Valor real del campo. |
displayValue | Se muestra este valor del campo. |
screenReaderText | Los Reader de pantalla utilizan este valor para contar información sobre el campo. El formulario proporciona el valor y puede sobrescribirlo. |
tabIndex | Posición del campo en la secuencia de tabulación del formulario. Sobrescriba el tabIndex sólo si desea cambiar el orden de tabulación predeterminado del formulario. |
role | Función del elemento, por ejemplo, Encabezado o Tabla. |
altura | Altura del widget. Se especifica en píxeles. |
Anchura | Ancho del widget. Se especifica en píxeles. |
access | Controles utilizados para acceder al contenido de un objeto de contenedor, como un subformulario. |
paraStyles | Propiedad para de un elemento XFA en la utilidad. |
dir | Dirección del texto. Los valores posibles son ltr (de izquierda a derecha) y rtl (de derecha a izquierda). |
Aparte de estas opciones, la estructura ofrece otras opciones que varían según el tipo de campo. A continuación se detallan las opciones específicas de los campos.
Para interactuar con la estructura de formularios, una utilidad activa algunos eventos para permitir que funcione la secuencia de comandos del formulario. Si la utilidad no emite estos eventos, algunas de las secuencias de comandos escritas en el formulario para ese campo no funcionan.
Evento | Descripción |
---|---|
XFA_ENTER_EVENTO | Este evento se activa cada vez que el campo está activo. Permite que la secuencia de comandos "enter" se ejecute en el campo. La sintaxis para activar el evento es (utilidad)._desencadenador(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENTO) |
XFA_EXIT_EVENTO | Este evento se activa cada vez que el usuario abandona el campo. Permite que el motor establezca el valor del campo y ejecute su secuencia de comandos "exit". La sintaxis para activar el evento es (utilidad)._desencadenador(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENTO) |
XFA_CHANGE_EVENTO | Este evento se activa para permitir que el motor ejecute la secuencia de comandos de "cambio" escrita en el campo. La sintaxis para activar el evento es (utilidad)._desencadenador(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENTO) |
XFA_CLICK_EVENTO | Este evento se activa cada vez que se hace clic en el campo. permite al motor ejecutar la secuencia de comandos de "clic" escrita en el campo. La sintaxis para activar el evento es (utilidad)._desencadenador(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENTO) |
La estructura de apariencia llama a algunas funciones de la utilidad que se implementan en las utilidades personalizadas. La utilidad debe implementar las siguientes funciones:
Función | Descripción |
---|---|
focus: function() | Centra la atención en el campo. |
haga clic en: function() | Centra la atención en el campo y llama a XFA_CLICK_EVENTO. |
markError:function(errorMessage, errorType) Nota: Aplicable solo para formularios HTML5. |
Envía un mensaje de error y un tipo de error a la utilidad. La utilidad muestra el error. |
clearError: function() Nota: Aplicable solo para formularios HTML5. |
Se llama si se corrigen los errores en el campo. La utilidad oculta el error. |
Todos los widgets personalizados deben cumplir las especificaciones anteriores. Para utilizar las funciones de distintos campos, la utilidad debe cumplir las directrices de ese campo concreto.
Opción | Descripción |
---|---|
multiline | True si el campo admite la introducción de un carácter de nueva línea; en caso contrario, false. |
maxChars | Número máximo de caracteres que se pueden introducir en el campo. |
limitLengthToVisibleArea Nota: Aplicable solo para formularios HTML5 |
Especifica el comportamiento del campo de texto cuando la anchura del texto supera la anchura del widget. |
Opción | Descripción |
---|---|
seleccionado |
Matriz de valores seleccionados. |
items |
Matriz de objetos que se mostrarán como opciones. Cada objeto contiene dos propiedades: save: valor para guardar, mostrar: valor para mostrar. |
editable Nota: Aplicable solo para formularios HTML5. |
Si el valor es true, la entrada de texto personalizada está habilitada en la utilidad. |
displayValue |
Matriz de valores para mostrar. |
multiselect |
True si se permiten varias selecciones, en caso contrario false. |
Función | Descripción |
---|---|
addItem: function(itemValues) |
Añade un elemento a la lista. |
deleteItem: function(nIndex) nIndex: índice del elemento que se va a quitar de la lista |
Elimina una opción de la lista. |
clearItems: function() |
Borra todas las opciones de la lista. |
Opciones | Descripción |
---|---|
dataType | Cadena que representa el tipo de datos del campo (entero/decimal). |
leadDigits | Número máximo de dígitos al principio permitidos en el número decimal. |
fracDigits | Dígitos de fracción máximos permitidos en el número decimal. |
zero | Representación de cadena de cero en la configuración regional del campo. |
decimal | Representación de cadena de decimales en la configuración regional del campo. |
Opciones | Descripción |
---|---|
values | Matriz de valores (activado/desactivado/neutro). Es una matriz de valores para los diferentes estados de checkButton. values[0] es el valor cuando el estado está activado, values[1] es el valor cuando el estado está desactivado, |
estados | Número de estados permitidos. Dos para formularios adaptables (activado, desactivado) y tres para formularios HTML5 (activado, desactivado, neutro). |
estado | Estado actual del elemento. Dos para formularios adaptables (activado, desactivado) y tres para formularios HTML5 (activado, desactivado, neutro). |
Opción | Descripción |
---|---|
días | Nombre localizado de días para ese campo. |
meses | Nombres de mes localizados para ese campo. |
zero | Texto localizado para el número 0. |
clearText | Texto localizado para el botón borrar. |