A representação HTML5 de um modelo de formulário baseado em XFA consiste em vários elementos HTML. Esses elementos são organizados em ordem. Cada elemento tem classes CSS bem definidas. Você pode usar essa classe CSS para selecionar e alterar a aparência de um elemento.
Nas classes CSS, não altere o valor da largura, altura, espessura da borda, parte superior, esquerda, direita, parte inferior, preenchimento, margem e outros atributos de posição e tamanho. Qualquer alteração na posição e nos atributos de tamanho traz alterações ao layout do formulário.
Cada elemento contém classes CSS bem definidas. Você pode modificar essas classes para alterar a aparência de um elemento. Cada elemento, exceto os elementos field e draw , tem duas classes CSS - classe Type e classe Name .
O Type class representa o tipo do campo XFA. Você pode substituir a classe type
para modificar os estilos de todos os elementos de um tipo específico.
O Name class corresponde ao nome do campo XFA. Você pode substituir a classe name
para modificar e aplicar um estilo personalizado a um elemento.
Alguns elementos XFA não têm um nome. Para alterar os estilos desses componentes, modifique todos os componentes desse tipo específico.
Para as páginas não nomeadas no AEM Forms Designer, as páginas em um formulário HTML5 são nomeadas na ordem crescente de seu número. Por exemplo, para um formulário HTML5 com duas páginas, as páginas são nomeadas Página1, Página2.
O elemento field contém dois elementos aninhados: widget e legenda.
Elemento de widget
O elemento de widget contém o elemento da interface do usuário para interação com usuários. Ele tem três classes 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>
Além do tipo e da classe de nome, o componente de campo também contém uma classe CSS adicional chamada subtype. Um subtipo identifica qual tipo de campo é, por exemplo, NumericField, DateField, TextField. É possível substituir a classe do subtipo para modificar o estilo de todos os campos do tipo , do subtipo .
Componente | Tipo | Nome |
Página | page | Nome definido pelo usuário ou Página<pageNumber> (padrão) |
Área de conteúdo | contentarea | Nome definido pelo usuário |
Subformulário | subformulário | Nome definido pelo usuário |
Grupo de exclusão | exclgroup | Nome definido pelo usuário |
Draw | draw | Nome definido pelo usuário |
Texto | campo | Nome definido pelo usuário |
Legenda | caption | ND |
Widget | widget | O desenvolvedor do widget o define (para widgets definidos pelo usuário, consulte a tabela na seção a seguir) |
O AEM Forms Designer oferece suporte a diferentes tipos de campos em um formulário como NumericField, DecimalField e Date Field. Todos esses campos em HTML contêm as classes CSS mencionadas acima. Eles também contêm algumas classes extras, dependendo do tipo de campo.
Cada campo tem um widget associado que representa o elemento da interface do usuário. As classes de cada campo e os widgets associados a cada campo são listados abaixo.
Tipo de campo | Subtipo | Nome do widget | Tipo de widget | Tag da interface HTML |
Botão |
ND | xfaButton |
buttonfieldwidget |
input type=button |
CheckButton |
checkboxfield |
XfaCheckBox |
checkboxfieldwidget |
tipo de entrada=caixa de seleção |
DateField |
datefield |
dateField |
datefieldwidget |
input type=text |
DateTimeField |
campo de texto |
textField |
textfieldwidget | input type=text |
DecimalField |
numericfield |
numericInput |
numericfieldwidget |
input type=text |
DropDown |
choicelist |
dropDownListWidget |
choicelistwidget |
select |
ListBox |
choicelist |
listBoxWidget |
choicelistwidget |
ol |
NumericField |
numericfield |
numericInput |
numericfieldwidget |
input type=text |
PasswordField |
passwordfield |
defaultWidget |
passwordfieldwidget |
input type=password |
RadioButton |
radiofield |
XfaCheckBox |
radifieldwidget |
tipo de entrada=rádio |
TextField |
campo de texto |
textField |
textfieldwidget |
input type=text |
TimeField |
campo de texto |
textField |
textfieldwidget |
input type=text |
É possível inserir elementos de desenho estático, como texto e imagens, usando o AEM Forms Designer. Para cada elemento draw , uma classe CSS separada é associada a esse elemento. A lista de classes CSS para elementos draw está listada abaixo. Cada elemento draw tem uma classe draw associada a ele.
Tipo de desenho | Classe CSS |
---|---|
Texto | texto |
Imagem | imagem |
Retângulo | rectangle |
Linha | line |
Além da aparência dos componentes da interface do usuário no formulário HTML, você pode alterar o estilo de elementos como Erros em linha, Avisos em linha e campos com erros de validação.
Styling Inline Errors
Quando a validação de um campo resulta em um erro, um erro em linha é exibido quando o campo está ativo. Para alterar o estilo dos erros em linha, substitua a ID CSS error-msg.
Styling Inline Warnings
Quando a validação de um campo resulta em um aviso, um aviso em linha é exibido quando o campo está ativo. Para alterar o estilo desses avisos em linha, substitua a ID de CSS warning-msg.
Styling Fields with Validation Errors
Quando a validação de um campo falha, o estilo do widget muda. Essa alteração de estilo é feita aplicando uma classe CSS widgetError no componente do widget. Para modificar o estilo padrão, substitua a classe widgetError.