Mese: Ottobre 2008

P4A3 framework: un widget conta tempo che utilizza il plugin jQuery Countdown

di

Widget p4a CountdownAvendo la necessità di inserire in una maschera di un progetto, un timer contatempo, ho provveduto all’integrazione nel framework P4A 3, del plugin Countdown sviluppato con jQuery da Keith Wood.
P4A 3 supporta nativamente jQuery e, come nel caso di jClock, il porting è alquanto semplificato.
Al momento ho reso disponibili solo alcuni dei metodi, mi riprometto di finire l’integrazione appena avrò un po’ più di tempo!

Che cosa fa?

Mostra un contatempo con avvio sia in count-down che in count-up, configurabile nell’aspetto e nel comportamento attraverso opportuni metodi.

Elenco dei metodi:
NomeTipoDefaultNote
setSince()integer“null“Imposta la data e l’ora di avvio in formato UNIX timestamp
setUntil()integer“null“Imposta la data e l’ora di stop in formato UNIX timestamp.
setDisplayFormat()string“dHMS“‘Y’ anni, ‘O’ mesi, ‘W’ settimane, ‘D’ giorni, ‘H’ ore, ‘M’ minuti, ‘S’ secondi. I caratteri minuscoli impostano la visualizzazione opzionale
setCompactFormat()string“false“Imposta il formato ridotto.
setDescription()string“”Imposta la descrizione del contatempo.
setLabels()string"['Years', 'Months', 'Weeks', 'Days', 'Hours', 'Minutes', 'Seconds']"Imposta il testo per le varie parti del contatempo.
setLabelsSingle()string“['Year', 'Month', 'Week', 'Day', 'Hour', 'Minute', 'Second']“Imposta il testo per le varie parti del contatempo se sono al singolare.
setCompactLabels()string“['y', 'm', 'w', 'd']“Imposta il testo in formato compatto.
setCompactLabelsSingle()string“['y', 'm', 'w', 'd']“Imposta il testo in formato compatto se è al singolare.
setTimeSeparator()string“:“Imposta il separatore per il tempo.
setServerTime()stringnullImposta l’offset per il fuso orario. Valori di esempio: ‘+1’, ‘+2’, ‘+3’, ‘-1’, ‘-2’, ‘-3’. etc.

Ecco il codice per inserire il contatempo in una maschera di esempio:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

class test_countdown extends p4a_base_mask
{
 public function __construct()
 {
   parent::__construct();
   $this->setTitle("test Countdown");
   $this->build("P4A_jCountdown", "countdown")
    ->setStyleProperty("width","400px")
    ->setStyleProperty("float","none")
    ->setStyleProperty("margin","auto")    
    //Se vogliamo impostare una data in particolare possiamo usare il
    //seguente formato:
    //->setSince($this->date2timestamp('2008-09-26 17:59:47'))
    //oppure per avviare il contatempo con l'orario attuale:
    ->setSince(time())
    //Se vogliamo visualizzare sempre solo ore, minuti e secondi:
    //->setDisplayFormat('HMS')
    ->setCompactFormat(false)
    //Per impostare un offset sul fuso orario:
    //->setServerTime('-1')
    ->setDescription("test countdown");
 
   $this->frame->anchorCenter($this->countdown);
  }
 
  //Questa funzione converte una data in formato date in UNIX timestamp
  public function date2timestamp($value)
  {
    $date_time = explode(' ',$value);
    $date_part = explode('-',$date_time[0]);
    $time_part = explode(':',$date_time[1]);
    $res = mktime($time_part[0],$time_part[1],$time_part[2],
           $date_part[1],$date_part[2],$date_part[0]);
    return $res;    
  }
 
}

Il pacchetto completo della maschera di esempio è scaricabile qui

Note:

Ho notato che impostando l’orario attuale attraverso l’istruzione:
...
->setSince(time())
...
può capitare che venga impostato un valore di tempo successivo a quello di caricamento nel browser della pagina, probabilmente a causa della asincronicità dovuta al “motore Ajax” di P4A 3. In questi casi, il contatore non parte subito, ma al primo nuovo reload del widget. Per evitare questo comportamento, è possibile impostare il tempo attuale decrementato di 1 o 2 secondi, p.e.:->setSince(time()-1)

Conclusioni:

L’integrazione di plugin jQuery in P4A 3 è abbastanza semplice, i passi principali sono:

  • Definire le proprietà e i metodi per impostarle nella classe che descrive il widget
  • Effettuare l’overload del metodo getAsString()
  • Importare nel metodo getAsString() le librerie ed eventuali CSS con i metodi: addJavascript() e addCSS()
  • Sempre in getAsString() scrivere l’eco del codice javascript necessario.

Riferimenti ed approfondimenti:

ag ha scritto:

Bel widget, complimenti :) Potresti aggiungerlo insieme al clock nella sezione contrib del wiki…