La creación de un widget en p4a se diferencia poco de la creación de una clase cualquiera pero existen unos cuantos puntos que tendremos que tener en cuenta.
En esta breve guía se comentan widgets realizados como extensión de la clase p4a_widget y que nos permite heredar métodos para activarlo, ocultarlo, etc..
En este micro-tutorial realizaremos un widget que nos permitirá visualizar un campo numérico en formato "termómetro". Haremos que para un número entre 0 y 10 nos aparezca una linea vertical con una escala de valores (0 verde y 10 rojo) que podremos utilizar, por ejemplo, para canviar mostrar una prioridad, un porcentaje de ocupación, ...
El constructor.
Lo primero que realizaremos será reescribir el constructor para poder efectuar ciertas inicializaciones propias de nuestro widget pondremos el valor por defecto ($this->_valor) aunque es superfluo puesto que lo podríamos haber hecho en la definición.
El constructor siempre tiene que recibir el nombre del widget por parámetro.
public function __construct($name)
{
parent::__construct($name);
$this->_value = 0;
return $this;
}
El método GetAsString
Este método es muy importante y lo que debemos conseguir es montar el código HTML, a partir de los valores de nuestro widget.
El código HTML del widget debe quedar incluido en un tag div en el que asignaremos la id del widget. Esta particularidad es indispensable porque serà cómo AJAX identificará el objeto. Para obtener el identificador utilizamos el método heredado $this->getId(). Una forma habitual de comenzar este método sería :
$id = $this->getId();
if (!$this->isVisible()) {
return "<div id='$id' class='hidden'</div>";
}
ya que si no es visible sólo hay que generar el tag <div> hidden
A continuación vendría, en nuestro caso, la generación de una tabla HTML de una fila y columna con los colores que toquen y creamos la variable local $temormetro con este código.
En este punto podríamos finalizar el método de una forma similar a:
return "< div id="$id">$termometro/div>";
pero no tendríamos las propiedades HTML y que nos proporciona el método heredado composeStringProperties():
$propietats = $this->composeStringProperties();
return "getWidth() . "; height: " . $this->Height() . "' $propietats >$termometro";
Métodos auxiliares
Necesitaremos realizar una serie de métodos para configurar el widget y, también para recoger información de él.
En nuestro caso realizaremos dos métodos uno para asignarle un valor (setValue) y otro para leerlo (getValue)
Cómo lo utilizamos
En la máscara que utilizemos el widget haríamos:
$this->build('Termometro','termo')
->setValue(2);
y
$this->termo->setValue(xxx);para modificarlo o
$x = $this->termo->getValue()para consultar que valor tiene.
Y ahora que...
- En el próximo post explicaremos cómo interactuar con el widget de forma que cuando clickemos sobre una valor del termómetro se dispare un evento...
- Para practicar: añade nuevos métodos para cambiar el ancho, informar el mapa de colores, indicar el mínimo y el máximo, que el termómetro sea vertical u horizontal...
El código del widget
class Termometro extends p4a_widget
{
// Escala de colores
private $_colores = array('darkgreen','green','lime','greenyellow','YellowGreen','yellow','gold','orange','OrangeRed','red','crimson');
// sin color
private $_sincolor = 'gray';
// ancho de la columna
private $_ancho = 25;
// Valor del widget
private $_valor = 0;
// Métodos auxiliares propios del widget
// Asignar un valor al widget
public function setValue($valor)
{
if ($valor <>_valor = 0;
elseif ($valor > 10) $this->_valor = 10;
else $this->_valor = round($valor,0);
return $this;
}
// Recuperar el valor del widget
public function getValue()
{
return $this->_valor;
}
// Constructor
public function __construct($name)
{
parent::__construct($name);
$this->_value = 0;
return $this;
}
// Generar el HTML del widget
public function getAsString()
{
$id = $this->getId();
if (!$this->isVisible()) {
return "";
}
// Aqui generamos la tabla con 1 columna y 10 filas
$termometro = '
| _ancho.'px"> |
// Las propiedades HTML del widget
$propietats = $this->composeStringProperties();
// Montamos el widget
$widget = "
getWidth() . "; height: " . $this->getHeight() . "' $ propietats >$termometro
";return $widget;
}
}
