Personnalisation HTML avec InputString

Présentation

Lors du développement des templates d'édition/création (généralement edit.tpl.php), on utilise la méthode input(propName) de $ui pour afficher les différentes zones de saisies.

<?php
// Un simple template
<?php echo $ui->input('title') ?>
<?php echo $ui->input('description') ?>
?>

Le code HTML produit est normalisé par Sydonie afin d'en automatiser le traitement. Cependant, il peut être parfois nécessaire de modifier un partie de ce code (Ajouter des attributs à une balises, les modifier, obtenir l'identifiant en vu d'interaction javascript).

Pour cela, la méthode input décore le résultat dans un objet Aglae_InputString qui permet de manipuler le contenu HTML produit à travers quelques méthodes.

Utilisation

Obtenir des informations

Aglae_InputString propose des getters qui vont par défaut retourner les valeurs d'attribut de la première balise input trouvée dans la séquence HTML :

<?php
// Obtenir l'ID
$id = $ui->input('title')->getId();

// Obtenir le NAME
$name = $ui->input('title')->getName();

// N'importe quel attribut
$classCSS = $ui->input('title')->getAttribute('class');
?>

Modifier/ajouter des attributs

Aglae_InputString permet également de modifier/ajouter des attributs dans la première balise input trouvée en utilisant la méthode setAttribute(attribute, valeur) :

<?php
// Exemple
$input = $ui->input('title');

// Ajout un attribut 'data-foo' avec comme valeur 'bar'
$input->setAttribute('data-foo', 'bar'); 

echo $input;
?>

La méthode mergeAttribute(attribut, valeur) permet quant à elle de concaténer à une valeur d'attribut une autre valeur séparée par un espace (par défaut).

<?php
// Exemple
$input = $ui->input('title');

// Ajout d'une classe 'huge'
$input->mergeAttribute('css', 'huge'); 

echo $input;
?>

Enfin, les méthodes mergeAttribute(...) et setAttribute(...) sont dites chaînées (Elles retournent l'objet sur lesquelles elles sont appellées. Les exemples ci-dessus peuvent donc être simplifié ainsi :

<?php
// Ajout un attribut 'data-foo' avec comme valeur 'bar'
echo $ui->input('title')->setAttribute('data-foo', 'bar');

// Ajout d'une classe 'huge'
echo $input->mergeAttribute('css', 'huge');

// Plusieurs modifications
echo $input->mergeAttribute('class', 'huge')
           ->setAttribut('required', 'required')
           ->setAttribut('placeholder', 'Votre titre....');
?>

Modifier autre chose qu'un input

Il peut arriver que la modification souhaitée porte sur une autre balise que le input. Pour cela, la méthode setTarget(xPath) permet de sélectionner une autre cible dans la séquence HTML :

<?php
// Modification d'un textarea
echo $ui->input('description')->setTarget('//textarea[1]')
        ->mergeAttribute('class', 'ckeditor')
        ->setAttribut('required', 'required');

// Modfication de la div racine
echo $ui->input('title')->setTarget('/div[1]')
        ->mergeAttribute('class', 'form-control')
        ->setAttribut('style', 'display: none');
?>

Attention, la cible est exprimée au format XPath et DOIT retourner un seul élément (Si elle en retourne plusieurs, seul le premier sera affecté).