P4A3 framework: un widget orologio che utilizza jClock e jQuery

by: spadamar01-07-2008

Widget p4a clockHo approfittato della necessità di presentare un piccolo orologio in una maschera di un progetto al quale sto lavorando, per scrivere l’integrazione del plugin javascript jClock sviluppato con jQuery nel framework P4A 3.
Nulla di spettacolare, siamo d’accordo, ma la scelta è caduta su jClock perché P4A supporta nativamente jQuery, e mi è sembrata la cosa più logica seguire quella direzione.

Che cosa fa?

Mostra un orologio digitale con l’ora del client, configurabile nell’aspetto e nel comportamento attraverso opportuni metodi.

Elenco dei metodi:
NomeTipoDefaultNote
setTimeNotation()string24hValori possibili 12h o 24h. Determina il modo di visualizzazione dell’orario
setAm_pm()stringfalseSe impostato a “true”, mostra A.M./P.M. (Solo se timeNotation() = “12h”).
setUtc()stringfalseSe impostato a “true”, mostra il tempo utilizzando UTC.
setUtc_offset()integer0Valori possibili: da -12 a +12, imposta l’offset da UTC.
setFontFamily()stringNULLSe specificato, imposta il set di caratteri per lo stile CSS, altrimenti eredita.
setFontSize()stringNULLSe specificato, imposta la dimensione in pixel dei caratteri per il testo (p.e.: “14px“), altrimenti eredita.
setForeground()stringNULLSe specificato, imposta il colore del testo (p.e.: “white“), altrimenti eredita.
setBackground()stringNULLSe specificato, imposta lo sfondo del testo (p.e.: “#4b718a“), altrimenti eredita.

Il codice per inserire l’orologio in una maschera di esempio:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class test_clock extends p4a_base_mask
{
 public function __construct()
 {
   parent::__construct();
   $this->setTitle("test Clock");
   $clock = $this->build("P4A_jClock","clock");
   $clock->setStyleProperty("width","150px");
   $clock->setStyleProperty("float","none");
   $clock->setStyleProperty("margin","auto");
   $clock->setTimeNotation("12h");
   $clock->setAm_pm(true);
   $clock->setFontSize("14px");
   $clock->setForeground("white");
   $clock->setBackground("#4b718a");
   $this->frame->anchorCenter($clock);
  }
}

Il pacchetto completo della classe, della libreria javascript e della maschera di esempio è scaricabile qui

Note:

Al momento, il sistema di scrittura del codice detto “chainability” non funziona solo con i metodi che ho dichiarato nella classe P4A_jClock. Mi riprometto di individuare e correggere l’errore! Sarà molto gradito il feedback di tutti coloro che volessero utilizzare questo widget, per individuare e correggere eventuali altri errori e per apportare nuovi miglioramenti.

Conclusioni:

E’ interessante soprattutto capire come scrivere widget per P4A. Infatti, sebbene P4A framework, particolarmente nella nuova versione, offra già parecchie feature, capita comunque di aver necessità di qualcosa di particolare per le proprie applicazioni!
In futuro potrebbe essere interessante creare un widget per un orologio analogico, ne ho visti di molto belli qui: CoolClock – The Javascript Analog Clock. e già ci sto facendo un pensierino…

Riferimenti ed approfondimenti:


Fabrizio Balliano ha scritto:

Ciao Mario, per “abilitare” la chainability devi semplicemente aggiungere un “return $this” alla fine di ogni metodo della classe, tutto qui :-))) ottimo widget comunque soprattutto per l’utilizzo “non mascherato da p4a” di jquery!
02.07.08 09:00
Mario Spada ha scritto:

Grazie Fabrizio! Codice corretto, adesso funziona anche la chainability per i metodi dichiarati nel widget.
07.07.08 18:34