Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/la-pieta/inc/i18n.inc.php on line 9

Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/la-pieta/inc/i18n.inc.php on line 10
La Pieta de Robert Hupka - Interactivité - Section : documentation
Home Map
Rechercher

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.
 
Portlets   
Librairies   
Composants   
Requetes   
Design Templates   
Interactivit√© :   Donations    Nouvelles du site    Le mot du Webmaster    Livres d'or    Les Blogs    Defauts   
 
Galleries Hupka Michel-Ange Expositions Librairie Vidéos Presse Livres d'or Realisation Découvertes