Esempio di TagsInput

Introduzione

In questo articolo vediamo come integrare un componente di tipo TagsInput, nel motore grafico RD3, tipicamente usato per popolare i campi TO/CC/BCC di una mail utilizzando questo componente.
In allegato trovate anche il progetto di esempio per il motore grafico FLUID.
Vogliamo ottenere questo risultato:

Definizione nell'IDE

Per prima cosa, nel progetto è stata creata una libreria client chiamata TagsInput e sono state definite le sue proprietà:

È stata poi aggiunta una videata all'applicazione per comporre una mail ed la libreria è stata trascinata sul campo CC.

Classe wrapper lato client

Nella custom sono stati copiati i file tagger.js e tagger.css. Inoltre è stato creato un file javascript TagsInput.js contenente il codice della nostra classe wrapper.

Nota: Non abbiamo modificato i file Desktop.htm e Desktop_sm.htm perché il file TagsInput.js viene automaticamente caricato mentre i file tagger.js e tagger.css vengono caricati in fase di definizione della classe wrapper.

Nella classe javascript è stato definito il costruttore nel quale viene estesa la classe CustomElement.

Caricamento delle dipendenze

Sfruttando il metodo statico LoadRequirements della classe CustomElement carichiamo le risorse dipendenti.

Realizzazione del componente

E' stato definito il metodo Realize nel quale viene costruito l'elemento tramite le classi ed i metodi della libreria "nativa".
Siccome il componente nativo non notifica nessun evento quando si agggiunge o rimuove un tag attacchiamo un osservatore all'oggetto DOM per intercettare il cambio del valore e lo inviamo al server.

Siccome il componente viene usato in un campo di pannello occorre implementare il metodo GetDOMObj().

Funzionamento del componente

Ogni volta che il campo riceve un valore dal server viene invocato il metodo SetValue() overridando il quale andiamo a splittare il valore e creare/eliminare i tag di conseguenza.

Infine, visto che il componente nativo non gestisce lo stato disabled, implementiamo il metodo SetEnabled(enabled) per coprire l'oggetto con un div trasparente in modo da impedirne l'uso.