Marco de aspecto para formularios adaptables y HTML5

Forms (formularios adaptables y formularios HTML5) utiliza jQuery, Backbone.js y Guión bajo.js bibliotecas para apariencia y secuencias de comandos. Los formularios también utilizan la variable Interfaz de usuario de jQuery 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 restricciones de leadDigits/trackDigits o la implementación de cláusulas de imagen. Los desarrolladores de formularios pueden crear y utilizar funciones personalizadas para mejorar la experiencia de captura de datos y hacerla más fácil de usar.

Este artículo es para desarrolladores con suficiente conocimiento de las utilidades jQuery y jQuery. Proporciona una perspectiva del marco de trabajo de aspecto visual y permite a los desarrolladores crear un aspecto alternativo para un campo de formulario.

El marco de trabajo de aspecto visual se basa en diversas opciones, eventos (déclencheur) 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:

  • La estructura proporciona un conjunto de opciones para el aspecto de un campo. Estas opciones son pares de clave-valor y se dividen en dos categorías: opciones comunes y opciones específicas de tipo de campo.
  • El aspecto, como parte del contrato, déclencheur un conjunto de eventos como entrar y salir.
  • El aspecto es necesario para implementar un conjunto de funciones. Algunas de las funciones son comunes, mientras que otras son específicas de las funciones de tipo de campo.

Opciones comunes

A continuación se muestran las opciones globales definidas. Estas opciones están disponibles para cada campo.

Propiedad Descripción
name Identificador utilizado para especificar este objeto o suceso en expresiones de secuencia de comandos. Por ejemplo, esta propiedad especifica el nombre de la aplicación host.
value Valor real del campo.
displayValue Se muestra este valor del campo.
screenReaderText Los Reader de pantalla utilizan este valor para narrar información sobre el campo. El formulario proporciona el valor y puede anularlo.
tabIndex Posición del campo en la secuencia de tabulación del formulario. Anule el tabIndex solo si desea cambiar el orden de tabulación predeterminado del formulario.
role Función del elemento, por ejemplo, Encabezado o Tabla.
height Altura del widget. Se especifica en píxeles.
width Ancho del widget. Se especifica en píxeles.
access Controles utilizados para acceder al contenido de un objeto contenedor, como un subformulario.
paraStyles Propiedad para de un elemento XFA del widget.
dir Dirección del texto. Los valores posibles son ltr (de izquierda a derecha) y rtl (de derecha a izquierda).

Aparte de estas opciones, el marco proporciona otras opciones que varían según el tipo de campo. A continuación se enumeran los detalles de las opciones específicas de los campos.

Interacción con el marco de formularios

Para interactuar con la estructura de formularios, una utilidad déclencheur algunos sucesos para permitir que funcione la secuencia de comandos de formulario. Si la utilidad no desencadena estos sucesos, algunas de las secuencias de comandos escritas en el formulario para ese campo no funcionan.

Eventos activados por la utilidad

Evento Descripción
XFA_ENTER_EVENT Este evento se activa cada vez que el campo está seleccionado. Permite que la secuencia de comandos "enter" se ejecute en el campo. La sintaxis para activar el evento es
(utilidad)._déclencheur(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT)
XFA_EXIT_EVENT 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)._déclencheur(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)
XFA_CHANGE_EVENT Este suceso se activa para permitir que el motor ejecute la secuencia de comandos "change" escrita en el campo. La sintaxis para activar el evento es
(utilidad)._déclencheur(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT)
XFA_CLICK_EVENT Este evento se activa cada vez que se hace clic en el campo. permite al motor ejecutar la secuencia de comandos "click" escrita en el campo. La sintaxis para activar el evento es
(utilidad)._déclencheur(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)

API implementadas por widget

El marco de apariencia llama a algunas funciones del widget que se implementan en los widgets personalizados. La utilidad debe implementar las siguientes funciones:

Función Descripción
enfoque: function() Centra la atención en el campo.
haga clic en: function() Centra la atención en el campo y llama a XFA_CLICK_EVENT.

markError:function(errorMessage, errorType)

erorrMessage: string representación del error
errorType: string ("warning"/"error")

Nota: Aplicable solo para formularios HTML5.

Envía un mensaje de error y un tipo de error al widget. La utilidad muestra el error.

clearError: function()

Nota: Aplicable solo para formularios HTML5.

Se llama a si se corrigen los errores en el campo. La utilidad oculta el error.

Opciones específicas del tipo de campo

Todos los widgets personalizados deben cumplir las especificaciones anteriores. Para utilizar las funciones de diferentes campos, la utilidad debe ajustarse a las directrices de ese campo en particular.

TextEdit: Campo de texto

Opción Descripción
multiline True si el campo admite la introducción de un carácter de nueva línea, si no es false.
maxChars Número máximo de caracteres que se pueden introducir en el campo .

limitLengthToVisibleArea

Nota: Aplicable únicamente a los formularios HTML5

Especifica el comportamiento del campo de texto cuando el ancho del texto supera el ancho del widget.

ChoiceList: DropDownList, ListBox

Opción Descripción
value
Matriz de valores seleccionados.
items
Matriz de objetos que se van a mostrar como opciones. Cada objeto contiene dos propiedades:
guardar: valor que desea guardar, mostrar: para mostrar.

editable

Nota: Aplicable solo para formularios HTML5.

Si el valor es true, la entrada de texto personalizado está habilitada en el widget.
displayValue
Matriz de valores que se van a mostrar.
selección múltiple
True si se permiten varias selecciones, de lo contrario false.

API

Función Descripción

addItem: function(itemValues)
itemValues: objeto que contiene el valor de visualización y guardado
{sDisplayVal: <displayvalue>, sSaveVal: <save value="">}

Agrega un elemento a la lista.
deleteItem: function(nIndex)
nÍndice: índice del elemento que se va a eliminar de la lista


Elimina una opción de la lista.
clearItems: function() Borra todas las opciones de la lista.

NumericEdit: Campo numérico, Campo decimal

Opciones Descripción
dataType Cadena que representa el tipo de datos del campo (entero/decimal).
leadDigits Máximo de dígitos al principio permitidos en el número decimal.
fracDigits Dígitos de fracción máxima permitidos en el número decimal.
zero Representación de cadena cero en la configuración regional del campo.
decimal Representación de cadena del decimal en la configuración regional del campo.

CheckButton: RadioButton, CheckBox

Opciones Descripción
values

Matriz de valores (encendido/apagado/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,
values[2] es el valor cuando el estado es NEUTRAL. La longitud de la matriz de valores es igual a la opción valor de estado .

state

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).

DateTimeEdit: (CampoFecha)

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 de borrado.

En esta página