Personnalisation de l'affichage d'une propriété via @widget

Redirected from Widgets

	/**
	 * @widget Widget_Property_Class
	 */
	public $property_name;

Parfois l’affichage standard proposé par le framework pour une propriété ne convient pas, et l’on souhaitera personnaliser cet affichage.

Il est possible pour cela de créer un widget, composé :

d’une classe définissant la vue et préparant à l’enregistrement de données issues d’une vue formulaire,
d’une méthode pour préparer la vue, qui en général utilisera le template du widget,
d’un template pour la visualisation,
d’une méthode pour préparer les données pour l’enregistrement, qui utilise les données issues du template formulaire pour les stocker dans le type de donnée de la propriété.

Un widget n’est pas forcément développé spécifiquement pour une propriété unique : vous pouvez concevoir votre widget de manière générique pour qu’il puisse être réutilisé.

Exemple : saisie de date jour / mois / année

Without widget example! >

Le contrôle standard pour la saisie de date est une zone de saisie unique, accompagnée d’un calendrier.

Mettons que pour une propriété $date de votre objet métier, vous souhaitez que le formulaire de saisie propose la saisie du jour, du mois et de l’année dans trois zones de saisie séparées.

Nous créerons le widget Date_As_Inputs dans un dossier dédié à ce widget, dans votre application. Le dossier contiendra le template HTML et la classe du widget.

Commençons par développer un template html pour le formulaire de votre widget, dans un fichier nommé Date_As_Inputs_edit.html :

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Date as inputs</title>
</head>
<body>
<!--BEGIN-->
 
<input class="day" maxlength="2" name="{name}[day]" size="2" value="{?day}"> /
<input class="month" maxlength="2" name="{name}[month]" size="2" value="{?month}"> /
<input class="year" maxlength="4" name="{name}[year]" size="4" value="{?year}">
 
<!--END-->
</body>
</html>

La classe widget comportera le code pour préparer le découpage des données en jour, mois et année, et dans l’autre sens pour rassembler ces données une fois que le formulaire est validé. La classe est stockée dans le fichier Date_As_Inputs.php :

<?php
namespace iTRocks\Examples\Widget;
 
use ITRocks\Framework\Builder;
use ITRocks\Framework\Controller\Feature;
use ITRocks\Framework\Controller\Parameter;
use ITRocks\Framework\Tools\Date_Time;
use ITRocks\Framework\View\Html\Builder\Property;
use ITRocks\Framework\View\Html\Template;
 
/**
 * Widget example widget class
 */
class Date_As_Inputs extends Property
{
 
	//---------------------------------------------------------- Date as inputs input names constants
	const DAY   = 'day';
	const MONTH = 'month';
	const YEAR  = 'year';
 
	//---------------------------------------------------------------------------------------- $value
	/**
	 * @var Date_Time
	 */
	public $value;
 
	//------------------------------------------------------------------------------------- buildHtml
	/**
	 * Build date as inputs sub-form
	 *
	 * @return string
	 */
	public function buildHtml()
	{
		if (isset($this->parameters[Feature::F_EDIT])) {
			$value = $this->value ?: date('Y-m-d');
			$date = explode('-', substr($value, 0, 10));
			/** @var $template Template */
			$template = Builder::create(Template::class, [$this, null, Feature::F_EDIT]);
			$template->setParameters(array_merge($this->parameters, [
				'name'                 => $this->property->pathAsField(),
				Parameter::IS_INCLUDED => true,
				self::DAY              => $date[2],
				self::MONTH            => $date[1],
				self::YEAR             => $date[0]
			]));
			return $template->parse();
		}
		else {
			return $this->value;
		}
	}
 
	//------------------------------------------------------------------------------------ buildValue
	/**
	 * Build date with data coming from the sub-form
	 *
	 * @param $object        object
	 * @param $null_if_empty boolean
	 * @return Date_Time
	 */
	public function buildValue($object, $null_if_empty)
	{
		$date = $this->value;
		if ($null_if_empty && !($date[self::YEAR] || $date[self::MONTH] || $date[self::YEAR])) {
			return null;
		}
		return new Date_Time(
			sprintf('%04s-%02s-%02s', $date[self::YEAR], $date[self::MONTH], $date[self::DAY])
		);
	}
 
}

Une fois votre widget développé, vous l’activerez simplement pour la propriété de votre choix à l’aide de l’annotation @widget dont la valeur est le nom de la classe widget :

<?php
namespace ITRocks\Examples\Widget;
 
use ITRocks\Framework\Tools\Date_Time;
 
/**
 * Widget example stored data class
 *
 * @stored
 */
class Example_Class
{
 
	/**
	 * @var string
	 */
	public $name;
 
	/**
	 * @var Date_Time
	 * @widget Date_As_Inputs
	 */
	public $birth_date;
 
	/**
	 * @return string
	 */
	public function __toString()
	{
		return strval($this->name);
	}
 
}

Wiki - 1 output

Notifications

Connected user

Personnalisation de l'affichage d'une propriété via @widget

Exemple : saisie de date jour / mois / année