Home Map
Cercare nella Pieta

Design Templates

Ce chapitre expose diverses solutions typiques pour résoudre des problèmes récurrents à travers la plate-forme. On dénombre :

  • Réalisation d'un résultat paginé
  • Réalisation d'un résultat avec gestion de sélection (par checkboxes)
  • Réalisation de commutateurs de sélection de tri sur un résultat mullicritère
  • "Portletisation" d'un état

Réalisation d'un résultat paginé

La réalisation d'un résultat paginé utilise la clause LIMIT de MySQL avec le passage en contexte d'une variable $offset (la taille de page - nombre d'éléments par page - est donnée par configuration). Elle utilise un portlet compact de pagination, fournissant les commandes d'accès aux pages découpées sur le résultat. L'exemple de code ci-dessous marque en bleu le code caractéristique de l'usage de ce template.

$offset = 0 + captureInSession('offset'); //1

...

$query = "
   SELECT
      m.*,
      COUNT(mi.Id) as totalObjectsInQuery                  //2
   FROM
      " . $_CFG['db']['prefix'] . "module as m,
      " . $_CFG['db']['prefix'] . "moduleitem as mi
   WHERE
      m.Id = mi.moduleId AND
      m.Id = '$thisModule'
   GROUP BY
      m.Id
";

...

$query = "
   SELECT
      *
   FROM
      " . $_CFG['db']['prefix'] . "moduleitem
   WHERE
      moduleId = '$thisModule'
   ORDER BY
      someColumn
   LIMIT $offset,{$_CFG['module']['objectsPerPage']}               //3
";

...

<?
// endroit d'implantation du bloc de contrôle utilisateur de la pagination
$portlet = new StdClass();                                                 //4
$portlet->pageSize = $_CFG['module']['objectsPerPage'];          //5
$portlet->total = $aModule->totalObjectsInQuery;                 //6
$portlet->offset = $offset;                                      //7
getPortlet('lib/pagingResults.portlet.php', $portlet);           //8
?>

Examen du code :

  1. La valeur du paramètre contextuel d'offset est capturé avant toute utilisation du système de pagination. Il est fixé à un 0 franc en cas d'absence.
  2. Il est nécessaire d'indiquer au pagineur le nombre total d'objets à paginer.
  3. La requête extrayant les éléments à paginer applique la clause LIMIT
  4. On efface tout ancien portlet préexistant
  5. La taille de la page est passée au portlet
  6. Le total d'éléments à paginer est passé au portlet.
  7. L'offset courant est passé au portlet
  8. Le portlet est invoqué.

Réalisation d'un résultat avec gestion de sélection

Le résultat avec gestion de sélection permet de sélectionner un sous-ensemble d'items du résultat et actionner des commandes de groupes. Les items résultats peuvent être paginés ou non. La façon de résoudre systématiquement ce cas de figure est d'utiliser un objet Javascript ObjectSelector qui encapsule les différents éléments qui permettent ce fonctionnement :

  • Une liste de sélection (textuelle) avec les méthodes d'ajout et de suppression d'une clef.
  • Un groupe de commandes (commandes par lots) pilotées par la liste de sélection (commandes activées ou déseactivées conformément à l'état de sélection)
  • Une case à cocher insérable dans le portlet "résultat", préprogrammé pour actionner la liste de sélection

La classe Javascript ObjectSelector est chargée par défaut dans les chargeurs de page.

La sélection de groupe pour une commande par lot suppose l'utilisation d'une liste d'identifiants d'items (identifiants textuels) et d'un mot de commande. Le mot de commande sert également à la recherche des icones (actives et non actives) correspondant à la commande. Ce qui suit donne un exemple de code d'une telle mise en place :

Dans l'affichage de résultat :

<script type="text/javascript">
var accountSelector;  //1
function __init(){
   accountSelector = new objectSelector('selection', 'accountSelector');  //2
}
</script>

<form name="selection" action="spage.php" method="get">
<input type="hidden" name="p" value="<?= $_CXT->level1 ?>/customers/viewAllCustomers">
<input type="hidden" name="items" value=""> //3
<input type="hidden" name="cmd" value="">
<table>
<tr class="customer">
   <td valign="top" class="columnHead">
       <?= getTranslation('Sél.') ?>
   </td>
   ... autres rangées de labels de colonnes ...

</tr>
<?
// boucle résultat par appel du portlet résultat
foreach ($customers as $portlet){
     $portlet->selector = 'accountSelector'; //4
     if ($portlet->billCount == 0) $emptyAccounts++;
         getPortlet('lib/customer/customerLine.portlet.php', $portlet);
}
?>
</table>
</form>
<table>
   <tr>
      <td align="left">
         <a id="selectall_link" 
           
href="Javascript:eval('accountSelector.selectall()')"> <img name="selectall_img" src="images/icons/selectall.gif" border="0" alt="<?= getString('selectAll') ?>"></a> <!-- //5 -->
         <a id="selectnone_link"
           href="Javascript:;"><img name="selectnone_img" src="images/icons/selectnone_shadow.gif" border="0" alt="<?= getString('selectNone') ?>"></a>
         <a id="deleteItems_link" 
           href="Javascript:;"><img name="deleteItems_img" src="images/icons/delete_shadow.gif" border="0" alt="<?= getString('deleteItems') ?>"></a>
      </td>
      <td align="right">
         <a href="<?= getUrl("spage.php?p={$_CXT->level1}/customers/newCustomer") ?>"><?= getTranslation('Nouveau compte client') ?></a>
      </td>
   </tr>
</table>

Examen du code :

  1. Une instance d'un sélecteur d'objets doit être déclarée.
  2. Cette instance est construite en enregistrant :
    • Le nom du formulaire pour qui elle travaille (selection)
    • Le nom de la variable sélecteur (son propre nom, comme définition réflexive)
  3. Le formulaire "client" doit avoir un champ "items" qui recevra la sélection courante au moment de la soumission
  4. L'identité du sélecteur doit être transmis au portlet résultat, pour une bonne assignation des checkboxes de sélection
  5. Les commandes "par lot" doivent être définies. Une commande est une méthode de la classe ObjectSelector qui peut être active (cas de selectall()) au repos ou non active (cas de selectnone()). Certaines commandes par lot sont standard : "sélectionner tout", "déselectionner tout", "supprimer le lot". D'autres peuvent être ajoutée contextuellement à l'instance ObjectSelector par la méthode bind(). Les commandes doivent être représentées par un jeu de deux icones <cmd>.gif et <cmd>_shadow.gif représentant les états "actif" et "désactivé" du lien de commande.

Dans le portlet résultat :

<tr class="customer">
   <td valign="top" class="customer sel">
<?
if ($portlet->billCount == 0){
?>
      <input type="checkbox" name="sel<?= $portlet->Id ?>" id="sel<?= $portlet->Id ?>" onclick="<?= $portlet->selector ?>.handleList('sel<?= $portlet->Id ?>','<?= $portlet->Id ?>');<?= $portlet->selector ?>.activateSelectionCommands();">
<?
}
?>
   </td>
   <td valign="top" class="customer id">
      <a class="activeLink" href="<?= getUrl("spage.php?p={$_CXT->level1}/customers/viewCustomer&customer=" . $portlet->Id) ?>"><?= $portlet->Id ?></a>
   </td>
   <td valign="top" class="customer firstname">
      <?= $portlet->firstname ?>
   </td>
   <td valign="top" class="customer firstname">
       <?= $portlet->lastname ?>
   </td>
   <td valign="top" class="customer count">
       <?= $portlet->billCount ?>
   </td>
   <td valign="top" align="right" class="customer amount">
       <b><?= sprintf("%.2f", $portlet->totalAccount) ?> <?= getString($_CFG['commerce']['defaultCurrency']) ?></b>
   </td>
   <td valign="top" align="right" class="customer amount">
<?
if ($portlet->billCount == 0){
?>
      <a class="activeLink" href="<?= getUrl("spage.php?p={$_CXT->level1}/customers/viewAllCustomers&customerId={$portlet->Id}&cmd=delete"); ?>"><img src="images/icons/delete.gif" border="0"></a>
<?
}
?>
      <a class="activeLink" href="<?= getUrl("spage.php?p={$_CXT->level1}/customers/editCustomer&customerId={$portlet->Id}"); ?>"><img src="images/icons/edit.gif" border="0"></a>
   </td>
</tr>

Examen du code :

L'actionneur de la sélection est une checkbox unique qui active la liste de sélection avec trois conséquences :

  1. L'ajout ou la suppression d'un identifiant (pattern OID noté par le paramètre en vert ci-dessus) dans la liste de sélection.
  2. La modification de l'attribut HREF de certaines commandes (celles qui s'activent ou se désactivent suivant la population de la liste)
  3. L'attribut SRC de l'image-icône qui représente la commande.
 
Design Templates   
Requetes   
Interactivita :   Defecti   
 
Galleria Robert Hupka Michelangelo Le esposizione Edittore Videos Stampa Libro delle visitante Produzione Discoverimenti