Introduzione alla libreria AJAX Control Toolkit

3 pagine in totale: <<Indietro 1 2 [3]

SliderExtender

Lo SliderExtender permette di cambiare un valore in funzione del trascinamento di un elemento all'interno di un limitatore con un comportamento simile a quello delle scrollbar delle finestre. Per utilizzare lo SliderExtender occorre disporre di un contenitore dove inserire il valore, che può essere una Label, una TextBox o qualsiasi altro controllo.

Per capirne meglio l'utilità, si provi a pensare alla paginazione di una DataGrid. Sarebbe molto bello uscire dai canoni comuni della classica paginazione che utilizza il pager con i numeri delle pagine. Utilizzando uno SliderExtender sarebbe possibile creare un pager dove il numero di pagina corrente venga determinato dalla posizione dello slider del controllo.

Il seguente esempio mostra un semplice caso d'utilizzo.

<asp:TextBox ID="ValueTextBox" runat="server" Text="0" />
<ajaxToolkit:SliderExtender
  runat="server"
  ID="TheSliderExtender"
  TargetControlID="ValueTextBox"
  Minimum="-30"
  Maximum="30"
  Steps="5" />

La proprietà TargetControlID indica l'ID univoco del controllo TextBox che l'extender utilizza per realizzare lo slider, le proprietà Minimum e Maximum indicano il valore minimo e massimo del range di valori ammessi ed infine Step rappresenta l'incremento del valore. Sono inoltre disponibili altre proprietà tra cui Orientation per specificare se lo slider deve disporsi orizzontalmente o verticalmente rispetto alla pagina.

Tabs

Il Tabs è un controllo che si rivela utile nelle pagine che hanno bisogno di separare tra loro i vari step di una sequenza articolata di azioni come, per esempio, nel caso dell'immissione di dati tramite un form particolarmente complesso oppure nel caso della visualizzazione di informazioni diversificate.

Il controllo è composto da un container (TabContainer) e da una serie di pannelli (TabPanel) in esso inseriti da mostrare singolarmente e in modo esclusivo rispetto agli altri.

<ajaxToolkit:TabContainer runat="server" ID="Tabs">

  <ajaxToolkit:TabPanel runat="Server" ID="TabPanel1">
    <HeaderTemplate>
      Titolo tab 1
    </HeaderTemplate>
    <ContentTemplate>
      Contenuto del tab 1
    </ContentTemplate>
  </ajaxToolkit:TabPanel>

  <ajaxToolkit:TabPanel runat="Server" ID="TabPanel2">
  ...
  </ajaxToolkit:TabPanel>

...

</ajaxToolkit:TabContainer>

Come si può notare nel codice di esempio, il funzionamento del controllo è basato sull'utilizzo dei template come avviene anche per altri controlli di ASP.NET come il Repeater o la GridView. Potendo generare i template a piacere, diventa molto semplice ed immediato personalizzare l'aspetto di ciascun tab. In ogni caso l'output generato dai vari TabPanel presenti nel container si limita ad un semplice div.

Il TabPanel presenta diverse caratteristiche di funzionamento, tra cui una delle più interessanti è sicuramente la possibilità di renderlo scrollabile fissando altezza e larghezza tramite le proprietà Width e Height e impostando la proprietà ScrollBars con un valore tra Auto, Both, Horizontal, Vertical, None.

TextBoxWatermarkExtender

Il compito del TextBoxWatermarkExtender è quello di impostare per una TextBox un testo di default. Nel momento in cui viene impostato il focus sulla TextBox, il testo scompare per lasciar spazio all'inserimento da parte dell'utente. Nel caso in cui non venga inserito alcun valore da parte dell'utente, il testo iniziale viene ripristinato allo scatenarsi dell'evento onBlur.

Questo comportamento può essere implementato direttamente utilizzando Javascript, intercettando per la casella di testo gli eventi client-side onFocus e onBlur e cambiando la proprietà value a seconda dei casi. Utilizzando il TextBoxWatermarkExtender possiamo peraltro evitare di scrivere il codice client, dal momento che è il controllo stesso che inietta il comportamento descritto sopra in modo del tutto trasparente.

<asp:TextBox ID="TheTextBox" runat="server" />
<ajaxToolkit:TextBoxWatermarkExtender
  runat="server"
  ID="TheTextBoxWatermarkExtender"
  TargetControlID="TheTextBox"
  WatermarkText="Scrivi qui il tuo nome" />

Come si può vedere nell'esempio proposto, il controllo è semplicissimo da usare e si limita a poche proprietà, ma il suo utilizzo può venir molto comodo per fornire all'utente informazioni sul tipo di dato da immettere in una TextBox, anche in alternativa all'etichetta testuale.

Conclusioni

Considerando che ASP.NET AJAX è appena uscito e si sta evolvendo e diffondendo così rapidamente, è sicuramente una buonissima cosa che escano controlli compatibili con questo framework. Anche AJAX Control Toolkit è in continua espansione e il supporto offerto dal team di sviluppo è molto buono. Inoltre non è da dimenticare che la libreria è totalmente gratuita e che il pacchetto scaricabile da CodePlex include anche il codice sorgente.

Come si è avuto modo di vedere nel corso dell'articolo, uno dei punti di forza di questa libreria è rappresentato dal fatto che essa sfrutta i controlli già esistenti per aggiungere loro funzionalità nuove tramite gli extender. Questo aspetto facilita di molto l'utilizzo dei controlli in essa contenuti e la loro integrazione in applicazioni già esistenti.

Riferimenti utili

3 pagine in totale: <<Indietro 1 2 [3]

Contenuti dell'articolo

Commenti
Dai un voto a questo articolo, ci aiuterà a migliorare il nostro sito (1 è il voto minimo, 5 il massimo).

Per procedere al rating dell'articolo devi essere autenticato.

Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.


TUTORIALS
TOP TEN ARTICOLI
NOTIFICHE

Iscriviti alla nostra newsletter nuoviarticoli per ricevere e-mail le notifiche!

Indirizzo e-mail:
PROVIDER ASP.NET 2.0

Seleziona il database per avere il web.config pronto per Membership, Roles e Profile API.



IN EVIDENZA
MISC