Comment construire un nouveau menu

Quelle utilité de vouloir construire un nouveau menu ?

PhpGedView vous permet de donner une vie à votre généalogie grâce aux différents événements qui ont tracé la vie de vos ancêtres.
Parmi ces événements, les plus intéressants sont souvent les petites histoires:

• les anecdotes, les rumeurs,...
  
• les photos ou les dessins qui retracent ces histoires ainsi que les vrais photos.

Avec ce tutoriel, vous serez capable de construire un nouveau menu qui vous permettra d'afficher le contenu que vous voudrez.
Vous permettrez ainsi à PhpGedView de donner vie à toutes les histoires de votre famille...!

Ajouter un nouveau Menu

Avant d'effectuer toute modification, sauvegardez le thème "Cloudy" et travaillez uniquement sur une copie avec un nom différent.

Vous trouverez le code PHP qui devra être modifié dans le fichier "header.html".
Parce que chaque thème a son propre type de menu, nous vous montrerons les modifications principales à apporter à partir de l'exemple du thème "Cloudy".
Dans ce cas, dans le fichier de configuration du GEDCOM, rubrique "utilisateurs", nous avons paramétré l'option "Affichage d'une liste de choix pour changer le thème" à "Non" et nous avons choisi "Cloudy" comme "thème Standard".

Vous trouverez le fichier "header.html" du thème "Cloudy" dans ce répertoire de votre installation de PhpGedView:

/phpGedView/themes/cloudy/header.html

Ouvrez ce fichier avec un simple éditeur de texte et cherchez la ligne suivante:

$my_temp_menu= array();

Les lignes suivantes construisent la première partie du menu de PGV, visible sur la page d'accueil de PGV par l'icône "Page d'accueil".
Tout ce qui figure dans ce menu (ainsi que dans les sous-menus) est encapsulé entre des balises "<td>" et "</td>".
Chaque bloc "<td>...</td>" contient une icône du menu avec ses sous-menus.
Une douzaine de rubriques du menu sont encapsulées dans un bloc "<table>...</table>".<br/ La "structure générale du menu" ressemble à ceci:

 <table>
    <tr>
       <td>
          1. rubrique 1 du menu (avec toutes les rubriques des sous-menus)
       </td>
    </tr>
    <tr>
       <td>
          2. rubrique 2 du menu (avec toutes les rubriques des sous-menus)
       </td>
    </tr>
    </tr>
       <td>
          peut-être votre propre rubrique (avec toutes les rubriques des sous-menus)
       </td>
     </tr>
     <tr>  
       <td>
          dernière rubrique du menu (avec toutes les rubriques des sous-menus)
       </td>
    </tr>
 </table>

Les codes pour le menu et les sous-menus ressemblent à ceci:

        <?php
            $menu = array();
            $menu["label"] = "...............";
            $menu["labelpos"] = "none";
            $menu["icon"] = "...............";
            $menu["class"] = "menuitem";
            $menu["hoverclass"] = "menuitem_hover";
            $menu["flyout"] = "down";
            $menu["submenuclass"] = "submenu$ff";
            $menu["items"] = array();

            $submenu = array();
            $submenu["label"] = "...............";
            $submenu["labelpos"] = "right";
            $submenu["icon"] = "...............";
            $submenu["link"] = "...............";
            $submenu["class"] = "submenuitem$ff";
            $submenu["hoverclass"] = "submenuitem_hover$ff";

            print_menu($menu);
        ?>

Avec un "copier coller" copiez les lignes de code ci-dessus et placez-les entre deux blocs "<td>...</td>" , là où vous voulez mettre en place la rubrique de votre menu, en prenant en compte la structure générale du menu décrite plus haut.

Maintenant vous allez apprendre à modifier les principales lignes de code qui vous permettront de modifier votre menu.

Vous avez le -bloc $menu, qui construit l'icône supérieure qui apparaît sur la page de PhpGedView et le -bloc $submenu-block, qui construit le menu popup avec les entrées du sous-menu the submenu-entries sur la page de PhpGedView.

Vous pouvez copier le bloc $submenu autant de fois que vous le souhaitez, il y a un bloc pour chacune des entrées du sous-menu.
Le menu d'impression (print_menu-line) imprime le contenu des rubriques du menu (en incluant les roubriques du sous-menu).

Trouvez un nom de label pour chaque entrée du menu et du sous-menu, par exemple "ma Famille" et "d'où nous venons" et écrivez les lignes de code suivantes: $menu["label"] = "ma Famille"; $submenu["label"] = "d'où nous venons";

Dessinez une nouvelle icône pour ce menu avec un programme de dessin ou cherchez en une avec Google.

Enregistrez cette icône avec un nouveau nom par exemple "nouvelleicônemenu.gif" dans le répertoire suivant: /phpGedView/themes/cloudy/images/nouvelleicônemenu.gif et placez-là dans votre code comme suit: $menu["icon"] = "themes/cloudy/images/nouvelleicônemenu.gif; "

Ouvrir des liens extérieurs

Vous pouvez avoir envie de créer dans votre menu, des rubriques qui renvoient vers des pages web externes, c'est à dire vers des pages situées sur d'autres sites web que celui de votre logiciel PhpGedView. Prenons l'exemple de votre père qui a fait son propre site de généalogie. Ce site se situe à l'adresse "http//www.généalogie_de_mon_papa.fr".

Pour ouvrir à partir du menu une fenêtre vers le site de généalogie de votre papa, et si vous voulez que ce site s'affiche dans la même fenêtre que la page affichée, il vous suffit de rentrer la ligne de code suivante:

            $submenu["link"] = "http://www.généalogie_de_mon_papa.fr";

Si vous voulez que cette page s'affiche dans une nouvelle fenêtre, il vous suffit de rentrer la ligne de code suivante:

            $submenu["link"] = "http://www.généalogie_de_mon_papa.fr\" target=\"_blank\"";

Si vous voulez que ce site s'affiche dans une fenêtre popup, il vous suffit de rentrer la ligne de code suivante:

            $submenu["link"] = "#\" onclick=\"window.open('http://www.généalogie_de_mon_papa.fr','','
               left=50,top=50,width=600,height=320,resizable=1,scroll bars=1'); \"";

"left" correspond à la distance de la fenêtre d'affichage à partir du bord gaucha
"top" correspond à la distance de la fenêtre d'affichage à partir du bord supérieur
"width" correspond à la largeur de la fenêtre
"height" correspond à la hauteur de la fenêtre
"scrollbars = 1" si vous voulez faire apparaître un ascenseur sur la partie droite de votre fenêtre
"scrollbars = 0" si vous ne voulez pas faire apparaître d'ascenseur