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.
Buongiorno,
sono un "vecchiarello" che dopo 30 anni(!) di linguaggi imperativi
(xbase,clipper, visual dbase)sono rimasto affascinato dal P4A e trovato molto materiale qui mi sto dando da fare per capire di più, le chiedevo come. per esempio, chiamare questo widget da un'applicazione come la sua "gestione fatture" su cui ho messo i denti per studiare, in particolare sulla maschera default_mask.php.
La ringrazio per il tempo che vorrà dedicarmi.
Complimenti per la chiarezza del materiale pubblicato.
Ferdinando
Ciao Ferdinando, abbiamo alle spalle un percorso informatico simile (dbase, clipper)!!
L'inserimento di un qualsiasi widget per P4A in una maschera è molto semplice. E' sufficiente usare il metodo "build" nel costruttore. In questo modo verrà costruito l'oggetto. Il codice per la maschera di esempio può essere copiato e incollato così come è nel costruttore della default mask di gestione fatture, avendo cura di includere nella cartella "/objects" il file che contiene il widget: "P4A_jClock.php".
Ciao, difatti ci avevo provato, ecco come ho fatto:
public $clock = null;
public function __construct()
{
parent::__construct();
$this->setTitle('Gestione Fatture');
$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);
ho aggiunto jclock.js in libreries e P4A_jClock.php in objects,
però ottengo un comportamneto strano: devo "rinfrescare" la pagina (F5) per poterlo vedere e in explorer 7 o 8 il testo html viene spostato tutto a sinistra....(?)
sto facendo le prove con xamp, xp sp3, firefox.
macchina da produzione molto pulita.
Grazie.
Ferdinando
Il codice mi sembra corretto, ho fatto anch'io una prova sulla mia macchina di sviluppo, utilizzando Firefox, e tutto funziona a dovere. Il problema dello spostamento a sinistra del codice in IE dipende dalle impostazioni di stile (setStyleProperty) che ogni browser interpreta un po' a modo suo, IE in particolare fa come gli pare a lui! L'aggiornamento automatico della pagina deve funzionare se hai javascript abilitato. Controlla anche di avere attivo ajax nel file index.php dell'applicazione.