utiliser dojo ?

**Niolo** · 18/06/2009, 07h26

Bonjour à tous,

J'aimerais utiliser dojo pour faire des effets (bannière dynamique etc).
J'ai récupéré tout les dossiers qu'il faut ici: http://www.dojotoolkit.com/downloads
Les exemples de ce qu'on peut faire sont là: http://dojocampus.org/explorer/

Le test inclu dans les dossier téléchargés fonctionne. J'ai donc à priori tout ce qu'il faut. J'ai alors essayé de tester l'un des exemples du second lien, et là, ça ne fonctionne pas. Firebug me signal plusieurs erreurs. Mais je n'arrive pas à résoudre les erreurs. En plus je suis une tare en anglais et je ne comprend donc pas toujours ce que me dit firebug.

Voici la page de test (que je n'ai pas faite moi même) qui fonctionne:

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
 
<html>
<head>
<title>Dojo example</title>
<style type="text/css">
  @import "../dojo/dijit/themes/nihilo/nihilo.css";
</style>
 
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: false"></script>
 
<script>
    dojo.addOnLoad(function(){
        dojo.query("#showMe").onclick(function(e){
            var node = e.target;
 
            var a = dojo.anim(node, {
                backgroundColor: "#363636",
                color: "#f7f7f7"
            }, 1000);
 
            dojo.connect(a, "onEnd", function(){
                dojo.anim(node, { color: "#363636" }, null, null, function(){
                    node.innerHTML = "wow, that was easy!";
                    dojo.anim(node, { color: "white" });
                });
            });
        });
    });
</script>
</head>
<body class="nihilo">
<div id="showMe" style="padding: 10px;">
    click here to see how it works
</div>
</body>
</html>

Je voudrais obtenir l'effet que l'on peut voir ici. J'ai donc récupéré le code html sur le site, ce qui après la mise en page, donne 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
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
 
<html>
<head>
<title>Dojo example</title>
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: false"></script>
 
<script type="text/javascript">
  //Note that you have to require "dojo.fx" to use the wipe methods. 
  //These are not included in the base.
  dojo.require("dojo.fx");
  var wipeOut = dojo.fx.wipeOut({node: "animDiv",duration: 1000});
  var wipeIn = dojo.fx.wipeIn({node: "animDiv",duration: 1000});
  var currentAnimation;
 
  function doAnimation(index) {
    switch(index) {
      case 1:
        currentAnimation = wipeOut;
        break;
      case 2: 
        currentAnimation = wipeIn;
        break;
      case 3:
        //Chain two animations to run in sequence.
        //Note the array passed as an argument.
        currentAnimation = dojo.fx.chain([wipeOut, wipeIn, wipeOut, wipeIn]);
        break;
    }
    //Play the animation. Without this call, it will not run.
    currentAnimation.play();
  }
 
  function pauseAnimation(){
    if(currentAnimation && currentAnimation.status() == "playing"){
      currentAnimation.pause();
    }
  }
  function resumeAnimation(){
    if(currentAnimation && currentAnimation.status() == "paused"){
      currentAnimation.play();
    }
  }
</script>
<style type="text/css">
  .box {
    margin-top: 10px;
    color: #292929;
    width: 300px;
    border: 1px solid #BABABA;
    background-color: #ddd;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-bottom: 1em;
    -o-border-radius: 10px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0px 3px 7px #adadad;
    border-radius: 10px;
    -moz-box-sizing: border-box;
    -opera-sizing: border-box;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
  }
</style>
</head>
<body>
 
<button dojoType="dijit.form.Button" onClick="doAnimation(1);">Wipe Out</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(2);">Wipe In</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(3);">Wipe Out Then In</button>
<br/>
<button dojoType="dijit.form.Button" onClick="pauseAnimation(2);">Pause</button>
<button dojoType="dijit.form.Button" onClick="resumeAnimation(2);">Resume</button>
 
<div id="animDiv" class="box">
  <p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
  semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
  Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
  facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
  semper iaculis.  Sed molestie tortor at ipsum. Morbi dictum rutrum
  magna. Sed vitae risus.
  </p>
</div>
</body>
</html>

Voici les erreurs que me rapporte firebug:

failed loading ../dojo/dojo/./fx.js with error: [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "file:///C:/wamp/www/dojoo/dojo/dojo/dojo.js Line: 16"]

Could not load 'dojo.fx'; last tried './fx.js'

dojo.fx is undefined

dans tout les fichiers que j'ai de dojo je n'ai pas trouvé de dojo.fx

Bon, je fais quoi maintenant

**emmanuel.remy** · 19/06/2009, 11h06

Salut,

Quelle version de Dojo utilises tu ?

Dans le répertoire ./dojo/ tu dois avoir un fichier fx.js. Si ce n'est pas le cas c'est que ta distribution n'est pas complète.

Sinon, ton code fourni ne marcherait quand même pas

(tu fais référence à des id qui n'existent pas au moment de l'appel, et il te manque une référence à un bouton.

Voilà une version modifiée qui fera l'affaire:

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<html>
<head>
<title>Dojo example</title>
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug: false"></script>
 
<script type="text/javascript">
  //Note that you have to require "dojo.fx" to use the wipe methods. 
  //These are not included in the base.
  dojo.require("dojo.fx");
 dojo.require("dijit.form.button");
  //on déclare les variables et les affecte plus loin
  var wipeOut,wipeIn, currentAnimation;
  
  function doAnimation(index) {
    switch(index) {
      case 1:
        currentAnimation = wipeOut;
        break;
      case 2: 
        currentAnimation = wipeIn;
        break;
      case 3:
        //Chain two animations to run in sequence.
        //Note the array passed as an argument.
        currentAnimation = dojo.fx.chain([wipeOut, wipeIn, wipeOut, wipeIn]);
        break;
    }
    //Play the animation. Without this call, it will not run.
    currentAnimation.play();
  }
  
  function pauseAnimation(){
    if(currentAnimation && currentAnimation.status() == "playing"){
      currentAnimation.pause();
    }
  }
  function resumeAnimation(){
    if(currentAnimation && currentAnimation.status() == "paused"){
      currentAnimation.play();
    }
  }

  
//tout est chargé (page, dojo, ...) on peut affecter nos variables en faisant référence au DOM
dojo.addOnLoad(function() {
     wipeOut = dojo.fx.wipeOut({node: "animDiv",duration: 1000});
     wipeIn = dojo.fx.wipeIn({node: "animDiv",duration: 1000});

  });
</script>
<style type="text/css">
  .box {
    margin-top: 10px;
    color: #292929;
    width: 300px;
    border: 1px solid #BABABA;
    background-color: #ddd;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-bottom: 1em;
    -o-border-radius: 10px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0px 3px 7px #adadad;
    border-radius: 10px;
    -moz-box-sizing: border-box;
    -opera-sizing: border-box;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
  }
</style>
</head>
<body>
 
<button dojoType="dijit.form.Button" onClick="doAnimation(1);">Wipe Out</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(2);">Wipe In</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(3);">Wipe Out Then In</button>
<br/>
<button dojoType="dijit.form.Button" onClick="pauseAnimation(2);">Pause</button>
<button dojoType="dijit.form.Button" onClick="resumeAnimation(2);">Resume</button>
 
<div id="animDiv" class="box">
  <p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
  semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
  Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
  facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
  semper iaculis.  Sed molestie tortor at ipsum. Morbi dictum rutrum
  magna. Sed vitae risus.
  </p>
</div>
</body>
</html>

Bon dev,

ERE

**Niolo** · 19/06/2009, 12h00

Merci !!

Mon mari à trouvé la plus grosse erreur, je n'ouvrais pas la page dans localhost

A partir de là je pouvais mettre ce que je voulais, code bon ou pas il n'allait pas fonctionner...
Je vais tester ton code

utiliser dojo ? [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager