Creazione di stili CSS per i moduli HTML5

La rappresentazione HTML5 di un modello di modulo basato su XFA è costituita da diversi elementi HTML. Questi elementi sono disposti in ordine. Ogni elemento ha classi CSS ben definite. Potete utilizzare questa classe CSS per selezionare e modificare l'aspetto di un elemento.

Nota

Nelle classi CSS, non modificate il valore di larghezza, altezza, spessore del bordo, in alto, a sinistra, a destra, in basso, spaziatura, margini e altri attributi di posizione e dimensione. Qualsiasi modifica negli attributi posizione e dimensione comporta modifiche al layout del modulo.

Classi CSS per gli elementi 

Ogni elemento contiene classi CSS ben definite. È possibile modificare queste classi per modificare l'aspetto di un elemento. Ogni elemento, ad eccezione del campo e degli elementi di disegno, ha due classi CSS - Classe Type e Classe Name.

  • La classe ​Type rappresenta il tipo del campo XFA. È possibile ignorare la type classe per modificare gli stili di tutti gli elementi di un particolare tipo.

  • La classe ​Name corrisponde al nome del campo XFA. È possibile ignorare la name classe per modificare e applicare lo stile personalizzato a un elemento.

Nota

Alcuni elementi XFA non hanno un nome. Per modificare gli stili di tali componenti, modificate tutti i componenti di quel particolare tipo.

Per le pagine senza nome in AEM Forms Designer, le pagine in un modulo HTML5 vengono denominate in ordine crescente rispetto al numero corrispondente. Ad esempio, per un modulo HTML5 con due pagine le pagine sono denominate Pagina1, Pagina2.

Elemento field

L'elemento campo contiene due elementi nidificati: widget e didascalia.

Widget, elemento

L'elemento widget contiene l'elemento dell'interfaccia utente per l'interazione con gli utenti. Sono disponibili tre classi CSS:

  • Widget: Ogni widget ha questa classe.
  • name: Tutti i widget forniti con AEM contengono la classe del nome del widget. Per i widget personalizzati, lo sviluppatore di widget fornisce la classe Widget name.
  • type: Ogni widget ha un elemento interfaccia utente. Questa classe definisce il tipo dell'elemento dell'interfaccia utente.
<!--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>

Oltre alla classe type e name, il componente field contiene anche una classe CSS aggiuntiva denominata subtype. Un sottotipo identifica il tipo di campo, ad esempio NumericField, DateField, TextField. È possibile ignorare la classe di sottotipo per modificare lo stile di tutti i campi di tipo, sottotipo.

Classi CSS per diversi componenti

Componente Tipo Nome
Pagina page Nome
o
pagina definito dall'utente<pageNumber> (predefinito)
Area contenuto contentarea Nome definito dall’utente
Sottomodulo sottomodulo Nome definito dall’utente
Gruppo di esclusione exclgroup Nome definito dall’utente
Draw draw Nome definito dall’utente
Campo o in un altro campo Nome definito dall’utente
Didascalia caption NA
Widget widget Lo sviluppatore di widget lo definisce (per i widget definiti dall’utente, consultate la tabella nella sezione seguente)

Classi CSS per campi diversi

AEM Forms Designer supporta diversi tipi di campi in un modulo come NumericField, DecimalField e Date Field. Tutti questi campi in HTML contengono le suddette classi CSS. Contiene inoltre alcune classi aggiuntive a seconda del tipo di campo.

A ogni campo è associato un widget che rappresenta l’elemento dell’interfaccia utente. Le classi di ciascun campo e i widget associati a ciascun campo sono elencati di seguito.

Tipo campo Sottotipo Nome widget Tipo di widget Tag HTML UI
Pulsante
NA xfaButton
buttonfieldwidget
input type=button
CheckButton
checkboxField
XfaCheckBox
checkboxfieldwidget
tipo di input=casella di controllo
DateField
datefield
dateField
datefieldwidget
input type=text
DateTimeField
textfield
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
radiocampo
XfaCheckBox
radiofieldwidget
input type=radio
TextField
textfield
textField
textfieldwidget
input type=text
TimeField
textfield
textField
textfieldwidget
input type=text

Classi CSS per diversi elementi di disegno

È possibile inserire elementi di disegno statici come testo e immagini utilizzando AEM Forms Designer. Per ciascun elemento draw, è associata a tale elemento una classe CSS separata. L'elenco delle classi CSS per gli elementi di disegno è riportato di seguito. A ogni elemento draw è associata una classe draw.

Tipo di disegno Classe CSS
Testo testo
Immagine immagine
Rettangolo rectangle
Linea line

Attribuzione dello stile ad altre parti del modulo

Oltre all'aspetto dei componenti dell'interfaccia utente nel modulo HTML, è possibile modificare lo stile di elementi quali Errori in linea, Avvisi in linea e campi con errori di convalida.

Styling Inline Errors

Quando la convalida di un campo genera un errore, quando il campo è attivo viene visualizzato un errore in linea. Per modificare lo stile degli errori in linea, ignorate l'ID CSS error-msg.

Styling Inline Warnings

Quando la convalida di un campo genera un avviso, quando il campo è attivo viene visualizzato un avviso in linea. Per modificare lo stile di questi avvisi in linea, sovrascrivere l’ID CSS warning-msg.

Styling Fields with Validation Errors

Quando la convalida di un campo ha esito negativo, lo stile del widget cambia. Questa modifica di stile viene eseguita applicando un widgetError classe CSS sul componente widget. Per modificare lo stile predefinito, ignorate la classe widgetError .

In questa pagina