ProxyEPN

Modifications publiées sur le svn (r337) :

Nouveau nom, nouveau look¶

L'application a été renommée en ProxyEPN, le code initial d'EPNadmin (/lib/epnadmin/) est définitivement supprimé, ainsi qu'une purge de tous les éléments graphiques et des CSS.

Une nouvelle charte graphique a été définie, dans les tons bleus, accompagnées d'un logo ProxyEPN (bye bye galago) et d'une feuille de styles CSS totalement nouvelle.

Une révision complète de la couche "view" a été effectuée :

• Réorganisation du layout principal et de ses includes partials (head meta, css, rss + body top, end) y compris ceux servant à l'intégration de javascripts (fichiers js et css avec jQuery et jQuery-UI)
• Habillage CSS des listes utilisant toutes jquery.tablesorter, ainsi que la box présentant les filtres et l'interface de pagination.
• Validation des formatters pour l'affichage des formulaires et amélioration de la disposition en deux colonnes (libellé / valeur), y compris pour la simple visualisation des fiches.
• Nouvelles versions des pages d'erreur personnalisées pour correspondre à la nouvelle charte graphique (pas spéciale "error 404" et page d'erreur générale).

Un nouveau Helper (ProxyepnHelper) est mis en place, chargé par défaut, pour apporter quelques fonctions utiles à l'affichage des templates telles que :

• format_phone : présentation d'un numéro de téléphone (format international)
• picto_web : pour afficher une url sous la forme d'un icone avec lien hypertexte
• picto_mel : pour afficher une adresse email sous la forme d'un icone avec lien mailto
• picto_boolean : pour représenter un booléen (0/1, y/n etc...) graphiquement
• image_thumb : pour présenter une image dans un cadre de vignette avec lien

Modifications publiées sur le svn (r337) :

Génération des menus¶

La gestion des menus a également été revue, essentiellement pour la manière de les constituer. Une classe myMenu est créé dans ce but, autant our le menu principal (horizontal dropdown 2 niveaux) que pour le menu contextuel (latéral 1 niveau) :

• L'objet dispose d'une structure interne stockant l'ensemble des items d'un menu, sous la forme d'un hachage de hachage
• Il n'y a pas de limite sur la profondeur des menus, chaque item contient une référence à son item parent
• Deux méthodes permettent d'ajouter des items au menu, l'une dédiée aux éléments de type "feuille" (terminaux, inutile de leur donner une clé particulière : id auto), l'autre aux noeuds parents (clé connue, parent facultatif : root par défaut)
• Des méthodes s'occupent enfin du rendu HTML de la structure, en spécifiant si besoin le noeud de départ (root par défaut)

Actuellement l'objet dispose de 2 méthodes de rendu :

• renderDyn() servant à la génération de listes de listes (<ul>) pour le menu principal (dropdown). Si un noeud parent n'a aucun enfant, alors il ne sera pas affiché (à moins d'être lui-même un lien).
• renderBox() servant à la génération de listes les unes à la suite des autres. Elles sont séparées graphiquement par une balise <hr>, le controle de liste vide évitant d'avoir 2 séparateurs collés. Une organisation de <div> est ajouté autour pour permettre un habillage CSS avec contours graphiques.

Cette classe est particulièrement utile pour la création du menu contextuel : celui-ci est propre à chaque page et contient généralement des conditions sur l'affichage ou non de chaque lien (selon les permissions de l'utilisateurs sur les actions ciblées). Il devient plus aisé de présenter ses liens en effectuant des regroupements, sans être embeter à tester si les séparateurs sont nécessaires (dans le cas de groupes vides).

Note : L'objet menu dispose aussi d'une méthode générique pour ajouter un lien correspondant à un bouton "submit". C'est en réalité un "faux" submit, un widget du type "button" simplement, puisqu'il se situera en dehors de tout formulaire. Mais il lui suffit de connaitre l'id du formulaire cible pour pouvoir y effectuer un appel submit() sur son evenement onclick().

Edit : Le système décrit dans la note précédente s'est étendu. L'objet menu dispose à présent d'une méthode générique addButton() permettant d'ajouter un bouton dans le menu relié à une action quelconque vers un formulaire. On indique toujours l'id du formulaire cible, ainsi que le nom de la méthode javascript à appeler. Le libellé est facultatif (utilisation du nom de la méthode par défaut). Cette méthode est utilisée par deux méthodes spécifiques : addSubmit() et addValidate().

Edit (22/02/2011)¶

Modifications publiées sur le svn (r364) :

La classe myMenu dispose désormais, en plus de sa liste arborescente d'items, d'une liste simple de champs extras. Leur intérêt est de pouvoir ajouter du contenu à afficher avec le menu, mais hors de celui-ci.
Un exemple d'utilisation est mis en place (r365) avec la présence de liens Atom (feed des sessions) juste en dessous du menu contextuel.

Modifications publiées sur le svn (r418 et r421) :

Menus et icones¶

La classe myMenu prend désormais en compte la présence d'icones accompagnant les liens.
Le nom de l'icone à utiliser est ajouté en paramètre optionnel aux méthodes setItem() et addItem().

Un simple nom court est utilisé pour désigner l'icone, il ne s'agit pas du nom complet du fichier. Une nouvelle fonction icon() fournie par le helper Proxyepn s'occupe d'afficher le tag image correspondant selon le modèle : /images/picto/icon_ nom donné en paramètre .png

L'image est contenue dans une balise span avec la classe 'icon'. Ceci laisse toute liberté à la feuille de style sur la manière de les présenter dans les menus (ou même de les masquer).

Tous les liens de tous les menus contextuels sont désormais paramétrés avec un nom d'icone.

Un jeu complet d'icones au format PNG 16x16 est intégré, les images utilisées proviennent essentiellement des thèmes d'icones libres Tango, Gnome et Gion.

Mises à jour du Helper Proxyepn¶

Au fil des révisions, ce helper propre à l'application s'est enrichi de plusieurs fonctions et paramètres... Il comprend à présent :

• gepn_link($structure_group)
  Affichage d'un lien "intelligent" vers un GEPN : selon les permissions de l'utilisateur, le lien pointera sur la fiche du GEPN, sinon sur sa page d'accueil

• format_phone($num, $format='', $html=false, $glue=' / ')
  Permet de formatter un ou plusieurs numéros de téléphone ($num pouvant être une liste). Si plusieurs numéros sont présents alors le paramètre $glue servira de séparateur.
  Par défaut le format français est utilisé (10 chiffres par groupes de 2 séparés par un espace), mais un autre choix de format peut être spécifié. Actuellement l'autre choix disponible est le format international ($format='inter'), selon le modèle : +33 1 22 33 44 (ex d'un numéro français).
  Si le paramètre $html est vrai, le retour se fera dans une balise span utilisant la classe nowrap afin d'empêcher une césure des numéros.

• format_seconds($seconds, $format='%d:%02d')
  Transformer un nombre de secondes en heures:minutes. Le paramètre $format permet de modifier la présentation des valeurs retournées.

• percent($value, $total, $prec=0)
  Effectue la règle de trois pour calculer le pourcentage de $value sur $total. Si $total est nul alors la fonction retourne simplement un tiret (pas de division par zéro).
  Le retour est une chaine formatée intégrant le sigle %, la précision décimale est spécifiée par le paramètre $prec (à noter que la localisation s'applique pour le choix du séparateur décimal).

• icon($name, $with_text=false, $options=array())
  Retourne le tag image correspondant au nom d'icone donné (modèle '/images/picto/icon_$name.png'), inclus dans une balise span avec la classe 'icon'. Un tableau facultatif $options permet de fournir des attributs pour le tag img ('alt' par exemple).
  Un texte peut être fourni pour accompagné l'image, il sera ajouté au sein de la balise span après l'image. Le span dispose aussi de la classe 'nowrap' pour empêcher une césure. Si $with_text vaut simplement true alors c'est le $name qui sera utilisé comme texte (avec application de la traduction dans tous les cas).

• picto_web($url, $with_text=false)
  Retourne une icone spécifique avec un lien vers l'url indiquée (ouverture ciblée vers une nouvelle page).
  Un texte peut accompagner l'icone, si $with_text vaut simplement true alors l'url sera utilisée.

• picto_mel($adr, $with_text=false)
  Retourne une icone spécifique avec un lien 'mailto:' vers l'adresse email indiquée.
  Un texte peut accompagner l'icone, si $with_text vaut simplement true alors l'email sera utilisée.

• picto_csv($idx, $with_text=false)
  Retourne une icone spécifique avec un lien vers l'action courante en y ajoutant un paramètre 'csv=$idx'.
  Ce type de liens est utilisé dans le module stats pour demander l'export CSV des tableaux présentés sur la page consultée.
  Un texte peut accompagner l'icone, si $with_text vaut simplement true alors le terme 'Export CSV' sera utilisé (application de la traduction).

• picto_feed($action='session', $filter='', $label='')
  Retourne une icone spécifique avec un lien vers le module 'feed' pour obtenir le flux de syndication correspondant à l'action demandée. Le paramètre $filter permet de spécifier les filtres souhaités sur le flux.
  'action courante en y ajoutant un paramètre 'csv=$idx'.
  Un texte peut accompagner l'icone, si $label vaut simplement true alors le terme 'Subscribe to the feed...' sera utilisé (application de la traduction).

• picto_boolean($value, $with_text=false)
  Retourne une représentation graphique d'une valeur booléenne.
  Est considéré 'yes' : true, 1 et tout mot commençant par les lettres 'y', 'o' ou 't'.
  Est considéré 'no' : false, null, '', 0 et tout mot commençant par les lettres 'n' ou 'f'.
  Si la valeur ne correspond à rien de vrai ou faux, la valeur est considérée 'unknown'.
  Un texte peut accompagner l'icone si $with_text vaut true, il sera constitué par le terme traduit de 'yes', 'no' ou 'unknown'.

• image_thumb($path, $thumb=NULL, $title="", $show_title=true)
  Retourne une vignette avec lien vers l'image indiquée. Si $thumb n'est pas fournit alors l'image elle-même sera utilisée comme vignette. Le tout est contenu dans une div avec la classe 'thumb'.
  Un titre peut être fournit, utilisé en 'title' et 'alt' du lien et ajouté dans une balise <p> après l'image (avec la classe 'title'). La traduction s'applique sur le titre, après une conversion humanisante (underscore en espace et majuscule sur la 1ère lettre).
  Si le titre est vide ou si $show_title vaut false, alors la balise <p> ne sera pas ajoutée.

• assets_path($filename="", $absolute=false)
  Retourne le chemin web pour accéder à un fichier du dossier assets.

• assets_file($filename)
  Retourne le chemin FS absolu pour accéder à un fichier du dossier assets.

• safeHashValue($hash, $keys=array(), $default='')
  Récupération d'une valeur dans un hachage en précisant sa ou ses clés (hachage de hachage avec une profondeur quelconque...). Si jamais une des clés n'est pas présente la fonction retourne la valeur $default.
  Utilisé dans les templates de tableaux statistiques à double et triple entrées.