le ThumbnailPicker ne s'affiche pas

**keanowushu** · 29/12/2009, 17h31

Bonjour à tous,

Je viens vous demander un coup de pouce pour le toolkit dojo. Je suis totalement débutant avec ce toolkit, et je suis bloqué avec le dojox.image.ThumbnailPicker.
J'ai lu toutes les docs officielles, et j'ai suivi un tutoriel (même plusieurs) qui donnent tous à peu près la même chose. Mon souci est que rien ne s'affiche à l'écran. Je vois dans firebug que le script JSON est appelé, le résultat est bien affiché aussi (toujours dans firebug), mais je n'ai rien à l'écran.
Voilà mon code complet:

JAVASCRIPT

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
<script type="text/javascript" src="../dojo_toolkit/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
 
 <script type="text/javascript">
  dojo.require("dojox.image.ThumbnailPicker");
  dojo.require("dojo.data.ItemFileReadStore");
 
  function initImagePicker() {
   //Define the request, saying that 20 records should be fetched at a time,
   //and to start at record 0
   var request= {
       query: {},
       count:5
      };
 
   //Tell the widget to request the "thumb" parameter, as different
   //stores may use different parameter names
   var itemNameMap = {
        imageThumbAttr: "mini",
        imageLargeAttr: "full",
        thumbHeight: 45,
        thumbWidth: 60,
       };
 
   dijit.byId('photosPicker').setDataStore(imageItemStore, request, itemNameMap);
   dijit.byId('photosPicker').init();
  }
 
  dojo.addOnLoad(initImagePicker);
    </script>
 
HTML
<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="../scripts/links.json"></div>
 <div id="photosPicker" dojoType="dojox.image.ThumbnailPicker"></div>

JSON

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
{
   items:[
      {
 "thumb":"http://127.0.0.1/franskbostad/images/biens/NIC001/mini/exterieur9.jpg",
 "large":"http://127.0.0.1/franskbostad/images/biens/NIC001/big/exterieur9.jpg",
 "title":"",
 "link":""
      },
      {
 "thumb":"http://127.0.0.1/franskbostad/images/biens/NIC001/mini/203.jpg",
 "large":"http://127.0.0.1/franskbostad/images/biens/NIC001/big/203.jpg",
 "title":"",
 "link":""
      },
      {
 "thumb":"http://127.0.0.1/franskbostad/images/biens/NIC001/mini/chambre.jpg",
 "large":"http://127.0.0.1/franskbostad/images/biens/NIC001/big/chambre.jpg",
 "title":"",
 "link":""
      },
      {
 "thumb":"http://127.0.0.1/franskbostad/images/biens/NIC001/mini/chambre2.jpg",
 "large":"http://127.0.0.1/franskbostad/images/biens/NIC001/big/chambre2.jpg",
 "title":"", "link":""
      },
      {
 "thumb":"http://127.0.0.1/franskbostad/images/biens/NIC001/mini/chambre3.jpg",
 "large":"http://127.0.0.1/franskbostad/images/biens/NIC001/big/chambre3.jpg",
 "title":"",
 "link":""
      }
   ]
}

Merci d'avance pour votre temps !

**emmanuel.remy** · 29/12/2009, 17h53

Salut,

Tel quel c'est difficile à dire. Peux tu faire un zip de tes fichiers et le poster, je testerai l'ensemble.

ERE

**keanowushu** · 29/12/2009, 18h25

oui pas de problème, d'ailleurs j'ai oublié de préciser que j'ai la version 1.4 du dojo toolkit, merci d'avance de prendre du temps pour mon cas !

j'ai posté ça ici : http://dl.free.fr/jle1BDRME

et bravo pour la rapidité de réponse !

**emmanuel.remy** · 29/12/2009, 18h40

Re,

Je crois que tu fais quelques petites erreurs:

Attention car ta structure JSON est:

Code :

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

1
2
3
4
5
6
7
8
{
   items:[
      {
 "thumb":"http://127.0.0.1/franskbostad/images/biens/NIC001/mini/exterieur9.jpg",
 "large":"http://127.0.0.1/franskbostad/images/biens/NIC001/big/exterieur9.jpg",
 "title":"",
 "link":""
      },...

et elle n'est pas en accord avec ton code; de même tu n'as pas précisé de taille pour la zone, ce qui n'est pas bloquant mais génant.

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
<script type="text/javascript" src="../dojo_toolkit/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    
 <script type="text/javascript">
  dojo.require("dojox.image.ThumbnailPicker");
  dojo.require("dojo.data.ItemFileReadStore");
  
  function initImagePicker() {
   //Define the request, saying that 20 records should be fetched at a time,
   //and to start at record 0
   var request= {
       query: {},
       count:5
      };
   
   //Tell the widget to request the "thumb" parameter, as different
   //stores may use different parameter names
   var itemNameMap = {
        imageThumbAttr: "thumb", //ce sont ici les attributs du store
        imageLargeAttr: "large",  //ce sont ici les attributs du store
        thumbHeight: 45,
        thumbWidth: 60,
       };
  
   dijit.byId('photosPicker').setDataStore(imageItemStore, request, itemNameMap);
   //INUTILE ? dijit.byId('photosPicker').init();
  }
  
  dojo.addOnLoad(initImagePicker);
    </script>
 
HTML
<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="../scripts/links.json"></div>
 <div id="photosPicker" dojoType="dojox.image.ThumbnailPicker" 
size="500"></div>

ERE

**keanowushu** · 29/12/2009, 19h39

merci beaucoup ! maintenant mes images s'affichent, ce qui est déjà mieux merci

en revanche, peux-tu m'aider à aller un peu plus loin ? Pour le moment les images sont affichées en colonne (1 par ligne), j'aimerais comprendre un peu plus le fonctionnement de ce widget. Par exemple l'attribut size. Lorsque je le mets à 500 comme indiqué dans ton code, je m'attendais à ce que les photos se mettent les unes à côté des autres, mais elles restent en colonne.

Désolé, c'est surement quelque chose de très simple, mais j'suis vraiment paumé avec ce toolkit, j'ai du mal à comprendre la logique.

**emmanuel.remy** · 29/12/2009, 20h09

Re,

Peut-être est ce plus compliqué qu'il n'y parait mais il existe un attributt isHorizontal qui pourtant par défaut vaut true. Aurait il été modifié ?

EDIT: tes images "mini" le sont vraiment ? elles ne font pas une taille trop grande ?
--------

Je télécharge ton fichier et je te dis plus tard car je suis un peu loin de tout et l'adsl n'est ici qu'un lointain souvenir...

ERE

**keanowushu** · 29/12/2009, 21h48

Pour les photos mini oui, j'en suis sur, c'est au moins un domaine que je maitrise, je suis infographiste, elle font 1,5Ko chacune.
Ensuite pour la propriété, je vais essayer de farfouiller un peu pendant que tu télécharges mon zip. Encore merci beaucoup de m'aider.

**emmanuel.remy** · 29/12/2009, 22h53

Zut, je n'arrive pas à télécharger (RTC...) . Si tes photos sont bonnes, peux tu juste poster ton code HTML complet. Ayant le json, je vais reconstituer l'ensemble.

ERE

**keanowushu** · 29/12/2009, 23h28

ok pas de souci, j'ai reposté les fichiers test.html et links.json ici:
http://dl.free.fr/bkfGUiRg2
http://dl.free.fr/p2rAb5ijs

merci !

**emmanuel.remy** · 30/12/2009, 11h34

Re,

Enfin réussi à récupérer tes denriers fichiers.
Le problème n'est pas trop grave

Ton souci est que tu n'intègres pas la CSS image.css. Ci-joint ton code modifié, mais avec mes paths car j'ai testé

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
	<link rel="stylesheet" type="text/css" href="/dojotoolkit/dijit/themes/tundra/tundra.css" />
	<link rel="stylesheet" type="text/css" href="/dojotoolkit/dojox/image/resources/image.css" />
	
    <!--
        DOJO PART
    -->
	<script type="text/javascript" src="/dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
    
	<script type="text/javascript">
		dojo.require("dojox.image.ThumbnailPicker");
		dojo.require("dojo.data.ItemFileReadStore");
		
		function initImagePicker() {
			//Define the request, saying that 20 records should be fetched at a time,
			//and to start at record 0
			var request= {
							query: {},
							count:5,
							//start: 0
						};
			
			//Tell the widget to request the "thumb" parameter, as different
			//stores may use different parameter names
			var itemNameMap = {
								imageThumbAttr: "thumb", //ce sont ici les attributs du store
						        imageLargeAttr: "large",  //ce sont ici les attributs du store
								thumbHeight: 45,
								thumbWidth: 60,
							};
		
			dijit.byId('photosPicker').setDataStore(imageItemStore, request, itemNameMap);
			
		}
		
		dojo.addOnLoad(initImagePicker);
    </script>
    <!--
        END OF DOJO
	-->
</head>

<body>
	<!--<div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="../scripts/getPhotosFromRef.php?ref=NIC001"></div>-->
    <div jsId="imageItemStore" dojoType="dojo.data.ItemFileReadStore" url="links.json"></div>
	<div id="photosPicker" dojoType="dojox.image.ThumbnailPicker"  useHyperlink="true" 
        hyperlinkTarget="this"  size="600"  ></div>
</body>
</html>

Et attention il y a une notion un peu bizarre sur ce contrôle celle de Hyperlink (je vois que tu l'utilises...) . En aucun cas l'image "large" ne sert à quelque chose, c'est l'url qui est utilisée. Par contre toutes les infos (large, title, url etc...) sont accessible par abonnement

Code :

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

1
2
3
dojo.subscribe(dijit.byId('photosPicker').getClickTopicName(), function(data){
//accès ici à data.largeUrl, data.title...
});

Et pour être complet, l'attribut hyperlinkTarget ne connait que "new"; pour toute autre valeur c'est la fenêtre active qui est utilisée (donc tu peux utiliser aussi bien this que une chaine vide).

Bon dev,

ERE

**keanowushu** · 02/01/2010, 10h43

wouaw c'est toujours les erreurs les plus bêtes qu'on voit pas !

merci beaucoup de ton coup de main et des conseils !!

Très bonne année au passage

@ bientôt

le ThumbnailPicker ne s'affiche pas [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager