Esempio di RangeSlider

Introduzione

In questo articolo vediamo come integrare un componente di tipo RangeSlider, nel motore grafico RD3, senza utilizzare librerie esterne. Vogliamo ottenere questo risultato:
In allegato trovate anche il progetto di esempio per il motore grafico FLUID.

Definizione nell'IDE

Innanzitutto nel progetto abbiamo creato una libreria client chiamata RangeSlider e definito proprietà, metodi ed eventi:

Le proprietà MinValue e MaxValue servono per impostare il range di possibili valori che tra cui può oscillare il valore.
La proprietà BackColor serve per impostare il colore dell'oggetto. In questo esempio lo cambieremo in base al valore del campo.
La proprietà RawValue serve per leggere il valore effettivo dello slider.
La proprietà Step serve per impostare la granularità del valore.
L'evento OnEvent viene notificato lato server quando cambia il valore del campo.

Poi è stata creata una videata con un pannelllo in lista su cui abbiamo trascinato la libreria client.
Nell'evento OnDynamicProperties viene impostato il tooltip e il colore dello slider in base al valore selezionato.

Classe wrapper lato client

Nella custom è stato creato un file javascript RangeSlider.js contenente il nostro codice e un file css range-slider.css con appena 3 classi CSS.

Nota: Non abbiamo modificato i file Desktop.htm e Desktop_sm.htm perché il file RangeSlider.js viene automaticamente caricato mentre il file range-slider.css viene caricato, al caricamento del javascript della classe RangeSlider.

Nella classe javascript è stato definito il costruttore nel quale sono stati impostati alcuni valori predefiniti per alcune proprietà ed è stata definita l'estensione della classe CustomElement.

Caricamento del CSS

Sfruttando il metodo statico LoadRequirements della classe CustomElement viene caricato il css.

Realizzazione del componente

E' stato definito il metodo Realize nel quale viene costruito l'elemento in modo completamente manuale (non si usano componenti di terze parti).

Nel metodo AttachEvents vengono gestiti gli eventi per intercettare la scelta dell'utente. Quando si rileva uno spostamento viene chiamato il metodo SetValue per impostare il valore e notificato il cambiamento al server chiamando il metodo OnChange. Questi due passaggi sono fondamentali per fare in modo che il campo acquisisca la modifica. E' importante sottolineare la necessità di implementare il metodo GetDOMObj che viene chiamato dal framework per avere il puntatore dell'oggetto DOM principale. In questo esempio resituiamo l'oggetto this.SliderBox.