wiki

Per quanto riguarda i Text i dati elemento utilizzabili sono:

• Nome Univoco Elemento
• Tipo elemento:
  • text→ generico: Imposta un campo di testo modificabile. Stile: generico,non arrotondato,grigio.
  • text→ita-edit: Imposta un campo modificabile. Con stile definito dal tema.
  • text→invisible: Imposta il campo di testo invisibile.
    • Struttura: E' praticamente una Label, impostata come text, ma il campo di testo è impostato come visibility: hidden(Se si scrive qualcosa nella label verrà visualizzata solo quella, e se si tenta di impostare il campo di testo non verrà visualizzato.)
    • Nota: Se si imposta un campo invisible e è sempre opportuno attribuirgli la classe ita-readonly, in quanto alcuni browser potrebbero avere problemi con il Tabulatore.
  • text→ ita-readonly: Imposta un campo di sola lettura, quindi non modificabile, anche se è possibile posizionarsi sopra col mouse(con il tabulatore il campo viene ignorato).Con stile definito dal tema.
    • Struttura: Text(ita-edit), ma con attributo readonly.
  • text→ ita-time:Impota un capo testo che accetta solo numeri. Più specificamente un orario.(HH:mm) Con stile definito dal tema.
    • Struttura: Text (ita-edit ita-time), ma dove viene impostato anche l'attributo ita-time, che accetta solo numeri.
  • text→ ita-decode: Imposta il campo in giallo e non selezionabile/puntabile. Di sola lettura. Con stile definito dal tema.
    • NOTA. Se si utilizza “text→ita-decode” i campi non vengono presi nel POST, vengono quindi ignorati.
  • Struttura: Text (ita-decode) di sola lettura.
  • text→ ita-datepicker: Imposta un campo testo che accetta solo numeri , in quanto richiesta una data.(AAAAMMGG) Aggiunge anche l'opzione di selezione della data.(Calendario) Con stile definito dal tema.
    • Struttura: Text (ita-datepicker ita-edit) che accetta solo numeri ed è in formato date.
    • Class Disponibili: è possibile definire la classe showOn:'focus/button/both' per definire se il calendario viene visualizzato al focus, al click sul bottone calendario o in entrambi i casi.
  • text→ ita-edit-upload: Campo di caricamento file.(Icona disck) Stile: definito dal tema.
    • Struttura: Text (ita-edit-upload)
  • text→ ita-edit-lookup: Campo di inserimento con icona “search”(Lente).
    • Struttura: Text (ita-edit-lookup)
  • text→ codfis2: Campo testo Stile: Grigio,generico,non arrotondato,predefinito.
    • Struttura: Text(ita-edit) di cui è impostata una massima lunghezza (maxlength) di 16 caratteri.(Impostato per i CodiciFiscali)
  • text→ ita-edit-time: Campo per input/output di orario con formato hh::mm::ss maschera configurabile da metadata:
    • Metadata: è possibile impostare la maschera utilizzando il metadato { format: “HI” } (case-insensitive).
      Valori disponibili: “HI”, “HIS”
      HI mostra e permette l'inserimento solo di ore e minuti.
      HIS mostra e permette l'inserimento di ore, minuti e secondi.
      Il dato trasmesso alle procedure server è normalizzato con il formato hh::mm::ss. Nel casto del formato HI i secondi sono forniti con il valore 00.
      Esempio:
      metadata=HI input/output= 10:25 trasmesso al server=10:25:00
      metadata=HIS input/output= 14:18:33 trasmesso al server=14:18:33
      

TextArea:

• textarea→ ita-edit-multiline: Imposta un'area di testo modificabile, ridimensionabile. Stile: definito dal tema.
• textarea → generico: Imposta un'area di testo modificabile, ridimensionabile. Stile: grgio,generico,predefinito.

Segui anche la guida sulle Textarea.

• Label elemento
• Classe label
• Posizione label
• Larghezza label
• Classe elemento
• Caratteristiche input elemento:
  • obbligatorio (Se la text utilizzata è un campo dove è obbligatorio inserire quel dato)

Verrebbero disabilitati quindi:

• access key
• testo alternativo
• colonne elemento

Attributi elemento più tutti quelli html possibili per una text:

• size: Se impostato è possibile definirne le dimensioni del campo testo
• maxlength: Se impostato è possibile definirne la massima lunghezza che può avere la text
• class: Le classi possibili sono:
  • ita-edit: Se impostato è possibile impostare il nostro elemento come una text modificabile.
  • ita-date: Permette l'inserimento di date (GG/MM/AAAA → AAAAMMGG), quindi controlla solo che gli input inseriti siano numerici. Per aggiungere il controllo di validità della data inserita, basta impostare il bottone che confermerà la modifica/aggiunta/aggiorna del campo, come un “ita-button-validate”.
  • ita-edit-upload: Se impostato è possibile definire l'elemento come un campo di caricamento file.
  • ita-time: Se impostato è possibile definire l'elemento come un campo data/ora (HH:mm) che accetta solo numeri.
  • ita-edit-lookup: Se impostato è possibile definire l'elemento come campo di inserimento con icona “search” (lentina).
  • ita-decode: Se impostato è possibile definire l'elemento come “readonly”, di sola lettura e non modificabile.
    • NOTA. Se si utilizza “ita-decode” i campi non vengono presi nel POST, vengono quindi ignorati.
  • ita-edit-multiline: Se impostato e' possibile definire l'elemento come una textarea con più righe e colonne.
  • ita-readonly: Se impostato è possibile definire l'elemento di sola lettura, non modificabile.
  • visibility: hidden: Se impostato è possibile definire il campo di testo invisibile
    • Nota. Se impostato è possibile definire anche visibility: hidden: come style.
  • ita-edit-uppercase: Tutti caratteri inseriti vengono automaticamente convertiti in maiuscolo
  • ita-edit-lowercase: Tutti caratteri inseriti vengono automaticamente convertiti in minuscolo
  • ita-edit-capitalize: La prima lettera dei caratteri inseriti viene modificata in maiuscolo.
  • ita-edit-onblur: Attiva l'effetto onblur. Premendo il tasto TAB, si viene reindirizzati direttamente al dettaglio dell'elemento considerato.
  • ita-edit-onchange: Attiva l'effetto onchange. Crea un evento per modificare il valore di un elemento già valorizzato.

• metadati, sempre raccchiusi tra {…}:
  • {autocomplete:{active:true}}: Gestito nell'applicazione,inserendo un minimo di 3 caratteri, suggerisce le possibili opzioni
  • { formatter: 'number', formatterOptions: { precision: 2, decimal: ',', thousand: '.', prefix: '', suffix: '' } }: Per i campi ita-edit. Permette la formattazione del testo in un numerico con n cifre decimali (definite con il parametro precision). I parametri in formatterOptions sono opzionali; i valori indicati sono predefiniti. Il campo con questo formatter tronca i valori che riceve ad n cifre decimali e ritorna sempre il dato con n cifre decimali. Il campo è sensibile solo ai caratteri numerici “0-9”, al punto “.” e alla virgola “,”.

• style(css):
  • font-size: Se impostato è possibile definire le dimensioni del testo
  • font-style: Se impostato è possibile definire lo stile utilizzato(Italic,Underscore,Bold)
  • margin-left:px/%/auto: Per definire la distanza dal margine sinistro.
  • margin-right:px/%/auto: Per definire la distanza dal margine destro.

Esempio: