Ho 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.
| Nome | Tipo | Default | Note |
|---|---|---|---|
setTimeNotation() |
string | "24h" |
Valori possibili 12h o 24h. Determina il modo di visualizzazione dell'orario |
setAm_pm() |
string | "false" |
Se impostato a "true", mostra A.M./P.M. (Solo se timeNotation() = "12h"). |
setUtc() |
string | "false" |
Se impostato a "true", mostra il tempo utilizzando UTC. |
setUtc_offset() |
integer | 0 |
Valori possibili: da -12 a +12, imposta l'offset da UTC. |
setFontFamily() |
string | NULL |
Se specificato, imposta il set di caratteri per lo stile CSS, altrimenti eredita. |
setFontSize() |
string | NULL |
Se specificato, imposta la dimensione in pixel dei caratteri per il testo (p.e.: "14px"), altrimenti eredita. |
setForeground() |
string | NULL |
Se specificato, imposta il colore del testo (p.e.: "white"), altrimenti eredita. |
setBackground() |
string | NULL |
Se specificato, imposta lo sfondo del testo (p.e.: "#4b718a"), altrimenti eredita. |
Il codice per inserire l'orologio in una maschera di esempio:
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:
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!
Grazie Fabrizio! Codice corretto, adesso funziona anche la chainability per i metodi dichiarati nel widget.