Mise en page régions

*.Har(d)t · 27/03/2009, 12h35

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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:

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**emmanuel.remy** · 27/03/2009, 16h34

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

*.Har(d)t · 30/03/2009, 10h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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....

Mise en page régions [Dojo]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager