La representación HTML5 de una plantilla de formulario basada en XFA consta de varios elementos HTML. Estos elementos se organizan en orden. Cada elemento tiene clases CSS bien definidas. Puede utilizar esta clase CSS para seleccionar y cambiar el aspecto de un elemento.
En las clases CSS, no cambie el valor de los atributos width, height, border-thickness, top, left, right, bottom, padding, margin y otros atributos de posición y tamaño. Cualquier cambio en los atributos de posición y tamaño produce cambios en la presentación del formulario.
Cada elemento contiene clases CSS bien definidas. Puede modificar estas clases para cambiar el aspecto de un elemento. Cada elemento, excepto los elementos field y draw, tiene dos clases CSS: clase Type y clase Name.
La clase Type representa el tipo del campo XFA. Puede anular la clase type
para modificar los estilos de todos los elementos de un tipo concreto.
La clase Name corresponde al nombre del campo XFA. Puede anular la clase name
para modificar y aplicar un estilo personalizado a un elemento.
Algunos elementos XFA no tienen nombre. Para cambiar los estilos de dichos componentes, modifique todos los componentes de ese tipo concreto.
Para las páginas sin nombre en AEM Forms Designer, los nombres de las páginas de un formulario HTML5 se asignan en el orden creciente de su número. Por ejemplo, para un formulario HTML5 con dos páginas, las páginas se denominan Página1, Página2.
El elemento field contiene dos elementos anidados: y rótulo.
Elemento de utilidad
El elemento widget contiene el elemento de interfaz de usuario para interactuar con los usuarios. Tiene tres clases CSS:
<!--field with caption-->
<div class="field numericfield NumericField3 ">
<div class="caption">
caption content
</div>
<div class="widget numericfieldwidget numericInput">
widget content
</div>
</div>
<!--field without caption-->
<div class="widget numericfieldwidget numericInput">
widget content
</div>
Además de la clase type y name, el componente field también contiene una clase CSS adicional denominada subtype. Un subtipo identifica qué tipo de campo es, por ejemplo, NumericField, DateField, TextField. Puede anular la clase de subtipo para modificar el estilo de todos los campos de tipo subtipo.
Componente | Tipo | Nombre |
Página | page | Nombre definido por el usuario o Page<pageNumber> (predeterminado) |
Área de contenido | contentarea | Nombre definido por el usuario |
Subformulario | subform | Nombre definido por el usuario |
Grupo de exclusión | exclgroup | Nombre definido por el usuario |
Draw | draw | Nombre definido por el usuario |
Campo | field | Nombre definido por el usuario |
Pie de ilustración | caption | ND |
Widget | widget | El desarrollador de utilidades lo define (para las utilidades definidas por el usuario, consulte la tabla en la siguiente sección) |
AEM Forms Designer admite distintos tipos de campos en un formulario como NumericField, DecimalField y Date Field. Todos estos campos en HTML contienen las clases CSS mencionadas anteriormente. También contienen algunas clases adicionales en función del tipo de campo.
Cada campo tiene una utilidad asociada que representa el elemento UI. A continuación se enumeran las clases de cada campo y las utilidades asociadas con cada campo.
Tipo de campo | Subtipo | Nombre de utilidad | Tipo de utilidad | Etiqueta de IU HTML |
Botón |
ND | xfaButton |
utilidad de campo de botones |
input type=button |
CheckButton |
checkboxfield |
XfaCheckBox |
checkboxfieldwidget |
input type=check |
DateField |
datefield |
dateField |
datefieldwidget |
input type=text |
DateTimeField |
textfield |
textField |
textfieldwidget | input type=text |
Campo decimal |
Numericfield |
numericInput |
widget de campo numérico |
input type=text |
DropDown |
choicelist |
dropDownListWidget |
choicelistwidget |
select |
ListBox |
choicelist |
listBoxWidget |
choicelistwidget |
ol |
NumericField |
Numericfield |
numericInput |
widget de campo numérico |
input type=text |
Campo de contraseña |
paswordfield |
defaultWidget |
passwordfieldwidget |
input type=password |
RadioButton |
radiocampo |
XfaCheckBox |
utilidad de campo radioactivo |
input type=radio |
TextField |
textfield |
textField |
textfieldwidget |
input type=text |
TimeField |
textfield |
textField |
textfieldwidget |
input type=text |
Puede insertar elementos de dibujo estáticos como texto e imágenes mediante AEM Forms Designer. Para cada elemento de dibujo, se asocia una clase CSS independiente a ese elemento. La lista de clases CSS para elementos de dibujo se muestra a continuación. Cada elemento de dibujo tiene una clase de dibujo asociada.
Dibujar tipo | Clase de CSS |
---|---|
Texto | text |
Imagen | image |
Rectángulo | rectangle |
Línea | line |
Además del aspecto de los componentes de la interfaz de usuario en el formulario HTML, puede cambiar el estilo de elementos como Errores en línea, Advertencias en línea y campos con errores de validación.
Styling Inline Errors
Cuando la validación de un campo da como resultado un error, se muestra un error en línea cuando el campo está activo. Para cambiar el estilo de los errores en línea, sobrescriba el ID de CSS error-msg.
Styling Inline Warnings
Cuando la validación de un campo da como resultado una advertencia, se muestra una advertencia en línea cuando el campo está activo. Para cambiar el estilo de estas advertencias en línea, sobrescriba el ID de CSS warning-msg.
Styling Fields with Validation Errors
Cuando falla la validación de un campo, cambia el estilo de la utilidad. Este cambio de estilo se realiza aplicando una clase CSS widgetError en el componente de la utilidad. Para modificar el estilo predeterminado, sobrescriba la clase widgetError.