Mise en page régions

Version imprimable

Salut,

J'essaye de faire une mise en page avec des régions séparées (sidebar à gauche, et une région au centre pour le contenu), mais ça ne fonctionne pas, rien ne s'affiche.

Dans le doute, j'ai écrit un fichier test qui ne contient rien d'autre que la définition de cette mise en page, mais pareil, page blanche.

Pas d'erreur Firebug, l'affichage du code source dans le navigateur est bon.
J'ai testé sous Firefox et IE7, idem.

Je ne comprends pas.
En plus je l'ai déjà fait et ça fonctionnait, mais là non.
Je dosi avoir le nez trop près du tableau car je ne vois pas d'où vient le problème.

Le code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <html> <head> <style type="text/css"> @import "dojo/dojo-release-1.2.3/dijit/themes/soria/soria.css"; @import "dojo/dojo-release-1.2.3/dojo/resources/dojo.css" </style> <script type="text/javascript" src="dojo/dojo-release-1.2.3/dojo/dojo.js" djConfig="parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); </script> </head> <body class="soria"> <div dojoType="dijit.layout.BorderContainer" persist="true" liveSplitters="false"> <div dojoType="dijit.layout.ContentPane" region="center" id="milieu" minSize="400" maxSize="500"> <p>Centre</p> </div> <div dojoType="dijit.layout.ContentPane" region="left" id="gauche" minSize="160" maxSize="200"> <p>Sidebar </p> </div> </div> </body> </html>
Merci de votre aide,

EDIT
----

Un nouveau test dans IE fonctionne.

En revanche dans Firefox ça ne veut pas.
J'ai remarqué dans Firebug que j'ai un chargement qui se fait mais qui semble échouer:

Citation:

GET http://192.168.23.127:11000/intranet.../fr/loading.js
http://192.168.23.127:11000/intranet.../fr/loading.js

304 Not Modified
5ms dojo.js (ligne 16)

({"loadingState":"Chargement...","errorState":"Une erreur est survenue"})

Voici l'entête de cette requête
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 En-têtesPostPutRéponseCache Réponse Date Fri, 27 Mar 2009 10:54:51 GMT Server Apache/2.0.63 (Win32) PHP/5.2.8 Connection Keep-Alive Keep-Alive timeout=15, max=87 Etag "fbc9-49-4856a6c0" Requête Host 192.168.23.127:11000 User-Agent Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.7) Gecko/2009021910 Firefox/3.0.7 (.NET CLR 3.5 .30729) Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding gzip,deflate Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive 300 Connection keep-alive Referer http://192.168.23.127:11000/intranet/essais/test.htm
Malheureusement, je ne comprends pas pourquoi.

J'ai l'impression que ça vient du cache, mais j'ai déjà nettoyé le cache à plusieurs reprises sans succès...

Ajoute des dimensions au BorderContainer, je crois que c'est ce qui te manque.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
    <style type="text/css">
        @import "dojo/dojo-release-1.2.3/dijit/themes/soria/soria.css";
        @import "dojo/dojo-release-1.2.3/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="dojo/dojo-release-1.2.3/dojo/dojo.js"
        djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.layout.BorderContainer");
       dojo.require("dijit.layout.ContentPane");
       
     </script>
</head>
<body class="soria">
    
<div dojoType="dijit.layout.BorderContainer"
     persist="true"
     liveSplitters="false"
     style="width: 90%; height: 400px; "     >
        <div dojoType="dijit.layout.ContentPane"
             region="center"
             id="milieu"
             minSize="400"
             maxSize="500">
            <p>Centre</p>
        </div>
        <div dojoType="dijit.layout.ContentPane"
             region="left"
             id="gauche"
             minSize="160"
             maxSize="200">
            <p>Sidebar  </p>
        </div>
</div>
</body>
</html>

A+,

ERE

Effectivement, c'est ça qui manquait on dirait pour l'exemple.

IE7 arrive à afficher sans cette info, mais pas Firefox.

Maintenant, j'ai un autre problème sur mon développent réel.

J'ai un fichier index .htm avec un tabcontainer et plusieurs tabs.

Les tabs sont des ContentPane (dojox ou dijit suivant le besoin d'exécuter du code à l'intérieur)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <body class="soria"> <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width:100%;height:600px"> <div id="veille" dojoType="dojox.layout.ContentPane" title="Page 1" href="page1.htm"> </div> <div id="forum" dojoType="dijit.layout.ContentPane" title="Forum"> </div> <div id="modeles" dojoType="dijit.layout.ContentPane" title="Modèles"> </div> <div id="manuels" dojoType="dijit.layout.ContentPane" title="Manuels"> </div> <div id="gestionsites" dojoType="dijit.layout.ContentPane" title="Gestions des sites"> </div> </div> </body>
Pour l'instant, seul le premier tab contient quelque chose, via l'appel à page1.htm dans le href, mais à terme, chaque tab affichera une page différente.

C'est le pseudo-frame réinventé façon dojo, en quelque sorte.

Dans ma page 1, je veux avoir un Tree à gauche, et un contenu à droite.

J'ai donc fait ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div dojoType="dijit.layout.BorderContainer"> <div dojoType="dojox.layout.ContentPane" region="left"> <input type="text" dojoType="dijit.form.TextBox" id="conteneur" value="" style="display: none;" /> <div id="arbre"> </div> </div> <div dojoType="dojox.layout.ContentPane" region="center"> Centre : Ceci est le contenu de la page </div> </div>
Mais au lieu d'avoir mon tree à gauche et ma contenu au centre, j'ai le tree au-dessus du texte de la région centre, selon le flux classique...

J'ai essayé en remplaçant le tree par un texte, en ajoutant des width sur différents containers, et aussi en lançant page1.htm directement (des fois que ce soit le fait de l'appeler via le href du dojox.ContentPane), mais rien n'y fait.

Au final, je m'inspire beaucoup de l'appli démo de Mail de dojo

http://demos.dojotoolkit.org/demos/mail/ et c'est ce genre d'interface que je cherche à obtenir.

SOLUTION
----------

Décidément...

L'erreur était tout simplement qu'il manquait un style sur height dans le BorderContainer de la page1.htm....:aie: