Creazione di stili CSS per i moduli HTML5 creating-css-styles-for-html-forms

CAUTION
AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

Il rendering HTML5 di un modello di modulo basato su XFA è costituito da diversi elementi di HTML. Questi elementi sono disposti in ordine. Ogni elemento dispone di classi CSS ben definite. Puoi utilizzare queste classi CSS per selezionare e modificare l’aspetto di un elemento.

NOTE
Nelle classi CSS, non modificare il valore degli attributi di larghezza, altezza, spessore del bordo, superiore, sinistra, destra, inferiore, spaziatura, margine e altri attributi di posizione e dimensione. Qualsiasi modifica negli attributi di posizione e dimensione comporta modifiche al layout del modulo.

Classi CSS per gli elementi  css-classes-nbsp-for-elements-nbsp

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, dispone di due classi CSS: Classe Type e Classe Name.

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

  • La Classe Nome corrisponde al nome del campo XFA. È possibile ignorare le name per modificare e applicare uno stile personalizzato a un elemento.

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

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

Elemento del campo field-element

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

Elemento Widget

L'elemento widget contiene l'elemento dell'interfaccia utente per l'interazione con gli utenti. Ha 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 di interfaccia utente. Questa classe definisce il tipo di 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 tipo e nome, il componente campo contiene anche una classe CSS aggiuntiva denominata sottotipo. Un sottotipo identifica il tipo di campo, ad esempio NumericField, DateField, TextField. È possibile sostituire la classe di sottotipo per modificare lo stile di tutti i campi di tipo, sottotipo.

Classi CSS per diversi componenti css-classes-for-different-components

Componente
Tipo
Nome
Pagina
pagina
Nome definito dall'utente
o
Pagina<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
ND
Widget
widget
Lo sviluppatore di widget lo definisce (per i widget definiti dall’utente, consulta la tabella nella sezione seguente)

Classi CSS per campi diversi css-classes-for-different-fields

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

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

Tipo di campo
Sottotipo
Nome Widget
Tipo di widget
Tag HTML UI
Pulsante
ND
xfaButton
buttonfieldwidget
input type=button
CheckButton
campo di controllo
XfaCheckBox
checkboxfieldwidget
tipo di input=casella di controllo
DateField
datefield
dateField
datefieldwidget
input type=text
DateTimeField
campo di testo
textField
textfieldwidget
input type=text
CampoDecimale
campo numerico
numericInput
numericfieldwidget
input type=text
DropDown
sciolto
dropDownListWidget
choicelistwidget
select
CasellaDiRiepilogo
sciolto
listBoxWidget
choicelistwidget
ol
NumericField
campo numerico
numericInput
numericfieldwidget
input type=text
PasswordField
passwordfield
defaultWidget
passwordfieldwidget
input type=password
RadioButton
radiocampo
XfaCheckBox
radiofieldwidget
input type=radio
CampoTesto
campo di testo
textField
textfieldwidget
input type=text
TimeField
campo di testo
textField
textfieldwidget
input type=text

Classi CSS per diversi elementi di disegno css-classes-for-different-draw-elements

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

Tipo di disegno
Classe CSS
Testo
text
Immagine
immagine
Rettangolo
rectangle
Line
riga

Stile di altre parti del modulo styling-other-parts-of-the-form

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, sovrascrivi 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, sovrascrivi l’ID CSS warning-msg.

Styling Fields with Validation Errors

Quando la convalida di un campo non riesce, cambia lo stile del widget. Questa modifica allo stile viene eseguita applicando una classe CSS widgetError sul componente widget. Per modificare lo stile predefinito, sovrascrivi il widgetError classe.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da