Quick links: Content - sections - sub sections
EN FR
Quick Search Advanced search
 
Page

  [Opened] [RESOLU] Menu et JZone

Posted by hello66 on 03/31/2013 17:44

Bonjour,

Je suis en train de développer un site internet entièrement à partie de Jelix ; j'ai quelques bases concernant le framework, mais sinon j'apprends au fur et à mesure. Chaque page de mon site est constituée de la même façon, un menu horizontal en haut, une barre latéral à gauche comprenant un module de connexion et un bloc principal contenant les informations voulues. Pour cela j'essai d'utiliser JZone ; les différents blocs principaux sont enregistrés en tant que template tout comme mon menu, et ma barre latéral. Le soucis c'esst que je n'arrive pas à faire de lien entre mon menu, et mon template main qui contient mon menu, ma barre latéral et le bloc choisi...

Voici mon template main

 
    {include 'site_internet~Amenu'}

<div class="corps">
    
     {include 'site_internet~AbarreLateral'}
     
<div class="principal">
   
    {$PRINCIPAL}
    
</div>

     {include 'site_internet~Afooter'}

</div>

Voici ma fonction index() qui pour l'instant renvoie seulement à la page d'accueil

    function index() {
        
        $rep = $this->getResponse('html');
        $rep->addCSSLink(jApp::config()->urlengine['basePath'].'css/menu.css');
        $rep->addCSSLink(jApp::config()->urlengine['basePath'].'css/reste.css');
        $rep->addCssLink(jApp::config()->urlengine['basePath'].'css/jquery-ui.css');
        $rep->addJSLink(jApp::config()->urlengine['basePath'].'js/jquery.min.js'); 
        $rep->addJSLink(jApp::config()->urlengine['basePath'].'js/jquery-ui.min.js');
        $rep->addJSLink(jApp::config()->urlengine['basePath'].'js/connexion.js');
        $rep->addJSLink(jApp::config()->urlengine['basePath'].'js/rejoindre.js');
        

        $rep->bodyTpl ="main";
        $rep->body->assignZone('PRINCIPAL', 'accueil');

        

        $equipeFactory = jDao::get("equipe");
        $listofAllEquipe = $equipeFactory->findAll();
        $rep->body->assign('ALLEQUIPE', $listofAllEquipe);
        
        return $rep;
    }

Et voicin mon template menu qui pour l'instant ne fonctionne pas...

<div id="barre"></div>
    <header>
    <img class="logo" alt="logo" src="img/logoban.png">
        <nav>
            <ul id="menuDeroulant">
                <li>
                    <a href="">Accueil</a>
                </li>
                <li>
                    <a href="'.jUrl::get('site_internet:accueil').'">Raid HEI 2013</a>
                        <ul class="sousMenu">
                            <li>
                                <a href="accueil">Evènement</a>
                            </li>
                            <li>
                                <a href="raidLieu">Lieu</a>
                            </li>
                            <li>
                                <a href="raidInfos">Infos pratiques</a>
                            </li>
                            <li>
                                <a href="raidMateriel">Matériel</a>
                            </li>
                            <li>
                                <a href="raidEpreuves">Epreuves</a>
                            </li>
                        </ul>
                </li>
                <li>
                    <a href="RELInfos">REL</a>
                        <ul class="sousMenu">
                            <li>
                                <a href="RELLieu">Lieu</a>
                            </li>
                            <li>
                                <a href="RELEcoles">Ecoles</a>
                            </li>
                            <li>
                                <a href="RELInfos">Infos</a>
                            </li>
                        </ul>
                </li>
                <li>
                    <a href="equipe.html">L'Association</a>
                        <ul class="sousMenu">
                            <li>
                                <a href="'.jZone::get('site_internet~equipe').'">L'équipe</a>
                            </li>
                            <li>
                                <a href="raidsprecedents">Raids précédents</a>
                            </li>
                            <li>
                                <a href="environnement">Environnement</a>
                            </li>
                        </ul>
                </li>
                <li>
                    <a href="partenaire">Partenaire</a>
                        <ul class="sousMenu">
                            <li>
                                <a href="partenaire">Nos partenaires</a>
                            </li>
                            <li>
                                <a href="devenirpartenaire">Devenir partenaire</a>
                            </li>
                        </ul>
                            </li>
                            <li>
                                <a href="photo">Multimédias</a>
                        <ul class="sousMenu">
                            <li>
                                <a href="photo">Photos</a>
                            </li>
                            <li>
                                <a href="video">Vidéos</a>
                            </li>
                        </ul>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>
    <p class="fil">
        <a href="#">Accueil</a>
    >
        <a href="#">Raid HEI 2013</a>
    > L'évènement
    </p>
    </header>

Si vous avez des idées, merci d'avance :)

  [Opened] Menu et JZone

Reply #1 Posted by foxmask on 03/31/2013 18:15

qu'est ce que vous voulez dire par faire le lien entre le menu et le tpl main ?


@GitHub - Forum HaveFnuBB! powered by Jelix - Le Booster Jelix !

  [Opened] Menu et JZone

Reply #2 Posted by hello66 on 03/31/2013 18:20

j'aimerai que lorsque l'utilisateur clique une rubrique "Evènement" par exemple, cela renvoi le template associée dans mon template principal main. En fait comme chaque page est conçue de la même façon, je voudrais que suivant le choix de l'utilisateur, seul le bloc principal soit rechargé... je sais pas si c'est clair, et si c'est possible...

  [Opened] Menu et JZone

Reply #3 Posted by EricD on 03/31/2013 19:05

Salut, a mon avis tu est pas forcement partie sur la voie la plus simple.

Par default les projet on une réponse définit pour le html. Définit dans {app}/responses/myHtmlResponse.class.php .

De base cette réponse à un attribut : $bodyTpl. Il définit le template "de base" de ta réponse type html de ton application. Dans ton cas tu l'appel "main". Il est dit dans la documentation qu'il vaut mieux utiliser les zones que de faire un include (un des avantage est que ceci permet de mettre du cache dessus).

{zone 'site_internet~Amenu'}
<div class="corps">
     {zone 'site_internet~AbarreLateral', array('foo'=>'bar')}
<div class="principal">
    {$PRINCIPAL}
</div>
     {zone 'site_internet~Afooter', array('foo'=>'bar')}
</div>

Le array te permet de faire passer des variable à ta zone. Attention néanmoins ce code appelle des zones et non plus des templates.

Si le "template" de ton site est toujours le même sur ton site. Il serait judicieux de mettre le chargement de tes fichiers css/js dans la methode __construct de la reponse.

    function __construct() {
        parent::__construct();
        // Include your common CSS and JS files here
        $this->addCSSLink(jApp::config()->urlengine['basePath'].'css/menu.css');
        $this->addCSSLink(jApp::config()->urlengine['basePath'].'css/reste.css');
        $this->addCssLink(jApp::config()->urlengine['basePath'].'css/jquery-ui.css');
        $this->addJSLink(jApp::config()->urlengine['basePath'].'js/jquery.min.js'); 
        $this->addJSLink(jApp::config()->urlengine['basePath'].'js/jquery-ui.min.js');
        $this->addJSLink(jApp::config()->urlengine['basePath'].'js/connexion.js');
        $this->addJSLink(jApp::config()->urlengine['basePath'].'js/rejoindre.js'); 
    }

Dans ton cas.

Ton template contenu est écrit en pseudo php. La syntaxe des templates est particulière. {jurl 'site_internet:accueil'}

Je rappelle ici que plus haut je t'ai fait passer par des zones donc tu aura ton fichier zone à lier à ton template.

<div id="barre"></div>
    <header>
    <img class="logo" alt="logo" src="img/logoban.png">
        <nav>
            <ul id="menuDeroulant">
                <li>
                    <a href="">Accueil</a>
                </li>
                <li>
                    <a href="{jurl 'site_internet:accueil'}">Raid HEI 2013</a>
                        <ul class="sousMenu">
                            <li>
                                <a href="accueil">Evènement</a>
                            </li>
                            <li>
                                <a href="raidLieu">Lieu</a>
                            </li>
                            <li>
                                <a href="raidInfos">Infos pratiques</a>
                            </li>
                            <li>
                                <a href="raidMateriel">Matériel</a>
                            </li>
                            <li>
                                <a href="raidEpreuves">Epreuves</a>
                            </li>
                        </ul>
                </li>
                <li>
                    <a href="RELInfos">REL</a>
                        <ul class="sousMenu">
                            <li>
                                <a href="RELLieu">Lieu</a>
                            </li>
                            <li>
                                <a href="RELEcoles">Ecoles</a>
                            </li>
                            <li>
                                <a href="RELInfos">Infos</a>
                            </li>
                        </ul>
                </li>
                <li>
                    <a href="equipe.html">L'Association</a>
                        <ul class="sousMenu">
                            <li>
                                <a href="{jurl 'site_internet~equipe'}">L'équipe</a>
                            </li>
                            <li>
                                <a href="raidsprecedents">Raids précédents</a>
                            </li>
                            <li>
                                <a href="environnement">Environnement</a>
                            </li>
                        </ul>
                </li>
                <li>
                    <a href="partenaire">Partenaire</a>
                        <ul class="sousMenu">
                            <li>
                                <a href="partenaire">Nos partenaires</a>
                            </li>
                            <li>
                                <a href="devenirpartenaire">Devenir partenaire</a>
                            </li>
                        </ul>
                            </li>
                            <li>
                                <a href="photo">Multimédias</a>
                        <ul class="sousMenu">
                            <li>
                                <a href="photo">Photos</a>
                            </li>
                            <li>
                                <a href="video">Vidéos</a>
                            </li>
                        </ul>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>
    <p class="fil">
        <a href="#">Accueil</a>
    >
        <a href="#">Raid HEI 2013</a>
    > L'évènement
    </p>
    </header>

Maintenant on passe au code de ton controleur :

function index() {

        $rep = $this->getResponse('html');
        
        $rep->assign('PRINCIPAL', 'accueil');

        $equipeFactory = jDao::get("equipe");
        $listofAllEquipe = $equipeFactory->findAll();
        $rep->assign('ALLEQUIPE', $listofAllEquipe);
        
        return $rep;
    }

En espérant t'avoir aidé. Et ne pas avoir dit de bêtise :p

  [Opened] Menu et JZone [Résolu]

Reply #4 Posted by hello66 on 04/10/2013 21:52

Merci EricD, ce que tu m'as donné m'a beaucoup aidé à mieux comprendre jelix.

  [Opened] Menu et JZone [Résolu]

Reply #5 Posted by EricD on 04/10/2013 22:53

Pas de soucis. Peut tu me dire quels points de mon explication n’étaient pas assez clair ?

  [Opened] Menu et JZone [Résolu]

Reply #6 Posted by hello66 on 04/10/2013 22:56

C'est juste que par rapport à mon menu et à mon index, tu n'as pas vraiment répondu à ma question (mais je pense que je m'étais peut être pas assez bien expliquée)

  [Opened] Menu et JZone [Résolu]

Reply #7 Posted by EricD on 04/10/2013 23:54

J'ai juste expliqué comment ton code devrait être organisé (avec ma vision), de manière simple.

Ta fonction index est juste la fonction appeler par Default par ton controlleur.

Ta réponse elle chargera le Template globale de ta page. Ce qui te fera gagner un certain nombre de ligne de code et de temps.

essaye de cree une app pour suivre le tutoriel http://jelix.org/articles/fr/tutoriels/minitutoriel/1.4.x

Et tu verras tu comprendras mieux.

 
Page
  1. Menu et JZone [Résolu]