===== Text =====

**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|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:
\\ 
^  Nome Attributo ^ Valore Attributo  ^ 
| size  | 20    |
| maxlength   | 20                |
| class   | ita-decode                 |
| style   | font-style:italic;               |

\\ 
|      [[ tipi_di_elementi#Tipo_Elemento|Torna alla lista.]]   || [[Lista Analitica|Vai alla Lista Analitica]] | 

---------