Come usare il datepicker di jQueryUI

La libreria jQueryUI permette di realizzare notevoli effetti grafici, utili soprattutto nella definizione delle interfaccia utente, con pochissime righe di codice. I risultati sono davvero interessanti, ma non sempre otteniamo cio che viene promesso dalle demo disponibili sul sito di jQueryUI. Un esempio di possibili problemi riscontrabili nel passare dalla teoria alla pratica e discusso qui in riferimento all'implementazione dei menu accordion.

Dimensioni del font

Dimensioni del font

Il problema di pagina precedente riguarda la dimensione del widget. Quando copiamo il codice della demo all’interno di una pagina già esistente, ovvero nel contesto della nostra applicazione, sito o CMS, il risultato molto probabilmente sarà quello di figura 2. Avremo cioè un widget “enorme” rispetto alle nostre aspettative. Per nostra fortuna la soluzione è semplicissima, perché basta definire nel foglio di stile la dimensione del font della classe CSS usata del widget, ad esempio

Come mai è necessario questo intervento? Si tratta di un bug presente nella distribuzione della libreria jQueryUI? Ovviamente la risposta è no: il comportamento è “as designed”, cioè si tratta di una feature e non di un bug. Spieghiamo perché: quando definiamo le dimensioni delle proprietà CSS, come ad esempio la proprietà font-size, possiamo scegliere tra diverse unità di misura: i punti (pt), i pixels (px) oppure gli “em” (em). I punti non ci interessano perché riguardano la definizione della stampa cartacea. Finché lavoriamo sullo schermo ci interessano soltanto le unità “px” ed “em”. I pixel dovrebbero essere abbastanza intuitivi, perché descrivono semplicemente il numero di pixel da usare per quella dimensione. Usando i “px” diciamo al browser quanti pixel dev’essere spesso un bordo, largo un rettangolo oppure alto un font. Gli “em” rappresentano un caso a parte, perché sono una misura relativa. Ciò significa che assegnando la dimensione di 1em ad un font stiamo dicendo al browser di usare la normale dimensione definita come default in quel momento. Ad esempio, se la nostra pagina sta usando un font di dimensioni 14px, la misura 1em significa esattamente la stessa cosa, cioè 14px. Se invece la nostra pagina stesso usando un font di dimensioni 20px, allora tutto ciò che viene definito come 1em avrebbe dimensione 20px.

A cosa serve l’unità di misura “em”? Lavorando con gli “em” possiamo stabilire le dimensioni relative dei caratteri, cioè dimensioni che dipendono da quelle definite dagli elementi gerarchicamente superiori. Ad esempio, se un div avesse un font impostato a 20px, tutti i caratteri aventi 0.5em risulterebbero con dimensione 10px, cioè la metà. In questo modo, cambiando la dimensione del font nel div contenitore, tutti gli elementi definiti in “em” al suo interno verrebbero proporzionati automaticamente. Si capisce che questo comportamento risulta utile in moltissimi scenari. Nel nostro caso gli sviluppatori di jQueryUI hanno pensato che il widget dovesse avere dimensioni proporzionate a quelle dei nostri caratteri, quindi hanno definito le dimensioni del widget usando come unità di misura proprio gli “em”.

Ecco spiegata l’origine del problema: se la nostra pagina usa un font più grande di quello di default (che è pari a 16px), il widget risulterà più grande della norma. Se la nostra pagina usa un font più piccolo, il widget potrebbe risultare minuscolo. Per ovviare a questi problemi basta sovrascrivere la definizione della classe CSS ui-widget precisando la misura che ci interessa. Se invece vogliamo preservare la caratteristica che permette di proporzionale automaticamente il widget alla pagina, potremmo valutare la soluzione opposta, cioè cambiare le dimensioni del font dell’elemento che contiene il widget.