Ridare vita ai vecchi form grazie a jQueryUI

jQueryUI è una libreria basta su jQuery, ed è dedicata interamente alla realizzazione di interfacce utente sul web. In questo articolo vedremo come essa sia in grado di migliorare sensibilmente le funzionalità dei vecchi form HTML, ridandogli vita senza doverli riscrivere da capo.

Il form originale, alla “vecchia maniera”

Quello che vi presentiamo ora è un classico form HTML per la ricerca di alberghi, dove è possibile specificare varie opzioni come la città di destinazione, il periodo, la categoria dell’albergo e così via. Form di questo genere ce ne sono in quantità, purtroppo però non sono sempre facili da usare per l’utente medio, che spesso sbaglia a inserire le date nel formato corretto, oppure non capisce se cliccare sulla label o sul radio button. Ecco il sorgente della pagina:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Esempio form senza jQueryUI</title>
</head>
<body>

<h3>Ricerca alberghi</h3>

<form id="form">

  <div id="form-search">
    <div class="ui-widget">
      <label for="city">Città</label>
      <input id="city" name="city" type="text" />
    </div>
    <h4>Periodo</h4>
    <p>
      <label for="dateFrom">Data di arrivo (gg/mm/anno)</label>
      <input id="dateFrom" name="dateFrom" type="text" />
    </p>
    <p>
      <label for="dateTo">Data di partenza (gg/mm/anno)</label>
      <input id="dateTo" name="dateTo" type="text" />
    </p>
  </div>

  <div id="form-options">
    <h4>Categoria minima:</h4>

    <div id="category">
      <input id="opzione_radio_1" name="opzione" type="radio" value="1" />
      <label for="opzione_radio_1">1 stella</label>

      <input id="opzione_radio_2" name="opzione" type="radio" value="2" />
      <label for="opzione_radio_2">2 stelle</label>

      <input id="opzione_radio_3" name="opzione" type="radio" value="3" />
      <label for="opzione_radio_3">3 stelle</label>

      <input id="opzione_radio_4" name="opzione" type="radio" value="4" />
      <label for="opzione_radio_4">4 stelle</label>

      <input id="opzione_radio_5" name="opzione" type="radio" value="5" />
      <label for="opzione_radio_5">5 stelle</label>
    </div>

    <h4>Opzioni:</h4>

    <div id="options">
      <p>
        <input id="option_flight" name="option_flight" type="checkbox" value="2" />
        <label for="option_flight">Ricerca volo</label>
        Cerca e prenota il volo attraverso il nostro sito
      </p>
      <p>
        <input id="option_car" name="option_car" type="checkbox" value="1" />
        <label for="option_car">Noleggio Auto</label>
        Includi le offerte di noleggio auto
      </p>
      <p>
        <input id="option_business" name="option_business" type="checkbox" value="3" />
        <label for="option_business">Includi offerte e servizi per le aziende</label>
      </p>
    </div>

  </div>

  <button id="submit" type="submit">Cerca</button>

</form>

</body>
</html>

 

Ed ecco come appare una volta caricato nel browser:

 

Non avendo applicato alcun CSS lo stile è davvero… inesistente! Ciò che ci preme far notare però in questo caso è l’assoluta non-intuitività dei campi di inserimento dati; anche se dotassimo la pagina di un design più gradevole i problemi di usabilità, in sostanza, rimarrebbero.

jQuery e jQueryUI: come funzionano

La filosofia base di jQuery, e di conseguenza anche di jQueryUI, è di essere il meno invadente possibile, ovvero:

  • rispettare il più possibile la struttura semantica delle pagine HTML;
  • evitare di aggiungere i gestori degli eventi javascript (come onclick, onmouseover eccetera) direttamente sugli elementi HTML;
  • fornire agli sviluppatori dei metodi semplici e soprattutto solidi per inizializzare tutti gli oggetti della pagina.

Come potrete facilmente verificare, tutti gli interventi che faremo rispetteranno appieno questi principi.

Migliorie del form

Ecco quindi l’elenco delle migliorie che intendiamo apportare:

  • il campo città sfrutterà l’auto-completamento;
  • Data di arrivo e Data di partenza saranno realizzate con un controllo di tipo date picker, ovvero un selettore stile pop-up;
  • i radio button e i checkbox saranno sostituiti da bottoni più grandi e facili da cliccare.

Tutto ciò, ci teniamo a sottolinearlo, sarà fatto senza nemmeno spostare una virgola del HTML visto sopra! Tutto ciò che dobbiamo fare è scaricare la libreria jQueryUI dal sito, piazzare i contenuti dell’archivio (ovvero le directory css e js) all’interno del nostro progetto, e inserire queste poche righe all’interno della sezione <head>:

  <link type="text/css" href="css/smoothness/jquery-ui-1.8.18.custom.css" rel="Stylesheet" />
  <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
  <script>
var $cities = ["Agrigento", "Alessandria", "Ancona", "Andria", "Aosta", "Arezzo",
  "Ascoli Piceno", "Asti", "Avellino", "Bari", "Barletta", "Belluno", "Benevento",
  "Bergamo", "Biella", "Bologna", "Bolzano", "Brescia", "Brindisi", "Cagliari",
  "Caltanissetta", "Campobasso", "Carbonia", "Caserta", "Catania", "Catanzaro",
  "Chieti", "Como", "Cosenza", "Cremona", "Crotone", "Cuneo", "Enna", "Fermo",
  "Ferrara", "Firenze", "Foggia", "Forlì", "Frosinone", "Genova", "Gorizia",
  "Grosseto", "Iglesias", "Imperia", "Isernia", "La Spezia", "L'Aquila",
  "Lanusei", "Latina", "Lecce", "Lecco", "Livorno", "Lodi", "Lucca", "Macerata",
  "Mantova", "Massa", "Matera", "Messina", "Milano", "Modena", "Monza", "Napoli",
  "Novara", "Nuoro", "Ogliastra", "Olbia", "Oristano", "Padova", "Palermo",
  "Parma", "Pavia", "Perugia", "Pesaro", "Pescara", "Piacenza", "Pisa", "Pistoia",
  "Pordenone", "Potenza", "Prato", "Ragusa", "Ravenna", "Reggio Calabria",
  "Reggio Emilia", "Rieti", "Rimini", "Roma", "Rovigo", "Salerno", "Sanluri", "Sassari",
  "Savona", "Siena", "Siracusa", "Sondrio", "Taranto", "Tempio Pausania",
  "Teramo", "Terni", "Torino", "Tortolì", "Trani", "Trapani", "Trento", "Treviso",
  "Trieste", "Udine", "Urbino", "Varese", "Venezia", "Verbania", "Vercelli",
  "Verona", "Vibo Valenzia", "Villacidro", "Vicenza", "Viterbo"];

$(document).ready(function() {
  $('#city').autocomplete({
    source: $cities
  });

  $dateFormat = 'dd/mm/yy';
  $("#dateFrom").datepicker({ dateFormat: $dateFormat});
  $("#dateTo").datepicker({ dateFormat: $dateFormat });
  $("#category").buttonset({
      icons: {
        primary: "ui-icon-gear",
        secondary: "ui-icon-triangle-1-s"
      }
  });
  $("#options input").each(function(index, elem) {
      $(elem).button();
  });
});
  </script>

 

Un paio di osservazioni sono d’obbligo:

  • l’inizializzazione dei controlli sulla pagina deve essere effettuata all’interno della funzione callback passata a $(document).ready();
  • i controlli vengono applicati in base all’ID dell’elemento HTML da modificare, utilizzando la sintassi dei selettori CSS;
  • per l’autocompletamento delle città abbiamo inizializzato a mano un array di stringhe, ma (cfr. documentazione) è possibile definire sorgenti di dati di tipo AJAX, che comunicano quindi con un server.

Ecco il form come appare dopo la “cura”:

 

L’auto-completamento in funzione:

 

I selettori delle date:

 

Links