Show Menu
TEMAS×

Creación de apariencias personalizadas en formularios HTML5

Puede conectar widgets personalizados a formularios móviles. Puede ampliar las utilidades de jQuery existentes o desarrollar sus propias utilidades personalizadas mediante el marco de apariencias. El motor XFA utiliza varios widgets; consulte Marco de apariencia para formularios adaptables y HTML5 para obtener información detallada.
predeterminada y personalizada Figura: Ejemplo de utilidad predeterminada y personalizada

Integración de widgets personalizados con formularios HTML5

Crear un perfil

Puede crear un perfil o elegir un perfil existente para agregar un widget personalizado. Para obtener más información sobre la creación de perfiles, consulte Creación de Perfiles personalizados.

Creación de una utilidad

Los formularios HTML5 proporcionan una implementación de la estructura de utilidades que se puede ampliar para crear nuevas utilidades. La implementación es una utilidad jQuery abstractWidget que se puede ampliar para escribir una nueva utilidad. La nueva utilidad solo puede funcionar si amplía o anula las funciones mencionadas a continuación.
Función/Clase Descripción
procesar La función de procesamiento devuelve el objeto jQuery para el elemento HTML predeterminado del widget. El elemento HTML predeterminado debe ser de tipo seleccionable. Por ejemplo, <a>, <input> y <li>. El elemento devuelto se usa como $userControl. Si $userControl especifica la restricción anterior, las funciones de la clase AbstractWidget funcionan según lo esperado; de lo contrario, algunas de las API comunes (focus, click) requieren cambios.
getEventMap Devuelve un mapa para convertir eventos HTML en eventos XFA. { desenfocar: XFA_EXIT_EVENTO, } Este ejemplo muestra que el desenfoque es un evento HTML y XFA_EXIT_EVENTO es el evento XFA correspondiente.
getOptionsMap Devuelve un mapa que proporciona detalles sobre qué acción realizar al cambiar una opción. Las claves son las opciones que se proporcionan al widget y los valores son las funciones a las que se llama cada vez que se detecta un cambio en esa opción. La utilidad proporciona controladores para todas las opciones comunes (excepto value y displayValue)
getCommitValue La estructura Widget carga la función cada vez que se guarda el valor de la utilidad en el modelo XFAM (por ejemplo, en el evento de salida de un objeto textField). La implementación debe devolver el valor guardado en la utilidad. El controlador se proporciona con el nuevo valor para la opción.
showValue De forma predeterminada, en XFA en el evento enter, se muestra el valor rawValue del campo. Se llama a esta función para mostrar el valor de rawValue al usuario.
showDisplayValue De forma predeterminada, en XFA en el evento de salida, se muestra el valor formateado del campo. Se llama a esta función para mostrar el formattedValue al usuario.
Para crear su propia utilidad, en el perfil creado anteriormente, incluya referencias del archivo JavaScript que contiene funciones sustituidas y funciones recientemente agregadas. Por ejemplo, sliderNumericFieldWidget es una utilidad para campos numéricos. Para utilizar la utilidad en el perfil en la sección del encabezado, incluya la línea siguiente:
window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

Registro de utilidades personalizadas con el motor de secuencias de comandos XFA

Cuando el código de la utilidad personalizada esté listo, registre la utilidad con el motor de secuencias de comandos mediante registerConfig API para Form Bridge . Toma widgetConfigObject como entrada.
window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject

La configuración de la utilidad se proporciona como un objeto JSON (una colección de pares de valor clave) donde la clave identifica los campos y el valor representa la utilidad que se utilizará con esos campos. Se muestra una configuración de ejemplo:
{
"identifier1" : "customwidgetname", "identifier2" : "customwidgetname2", .. }
donde "identificador" es un selector CSS de jQuery que representa un campo en particular, un conjunto de campos de un tipo en particular o todos los campos. La siguiente lista el valor del identificador en diferentes casos:
Tipo de identificador
Identificador
Descripción
Campo particular con nombre de campo
Identificador:"div.fieldname"
Todos los campos con el nombre ‘nombre de campo’ se representan con la utilidad.
Todos los campos de tipo ‘type’(donde type es NumericField, DateField, etc.):
Identificador: "div.type"
Para Campo de tiempo y Campo de tiempo, el tipo es campo de texto, ya que estos campos no son compatibles.
Todos los campos
Identificador: "div.field"