Application d'un style dans un widget

Version imprimable

Bonjour,

J'essaie de créer mon premier widget mais je n'arrive pas à appliquer le style nihilo à un bouton.

Code du sample:

Code:

1
2
3
<body class="nihilo">
    <div id="quizz"></div>  
  </body>

Code Quizz.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
dojo.provide("modleweb.widget.Quizz");
 
dojo.require("dijit._Templated");
dojo.require("dijit._Widget");
dojo.require("dijit.form.Button");
 
/* Class: Quizz */
dojo.declare("modleweb.widget.Quizz", [dijit._Widget,dijit._Templated], {
   /* String: templatePath
     chemin d'acces vers le template du widget */
  templatePath: dojo.moduleUrl("modleweb.widget", "template/Quizz.html"),
 
  /* Function: constructor     Constructeur */
  constructor: function(){
    console.log("modleweb.widget.Quizz::constructor");
    this.startQuizzButton = new dijit.form.Button({label: "Commencer"});
  },
 
 });

Code du template:

Code:

1
2
3
4
<div id="${id}Content">
Bonjour et merci de prendre le temps de répondre à ces quelques questions
<button id="start" dojoAttachPoint="startQuizzButton" dojoAttachEvent="onclick:_start">Commencer</button>
</div>

J'arrive pourtant à appliquer le style dans le fichier du sample en y insérant un bouton mais pas avec le widget. Quelqu'un aurait-il une idée sur le problème?

Merci

Salut,

Attention à ta façon de faire: tu ne peux pas changer ainsi un noeud, en remplaçant un button par un dijit.form.button. Ce n'est pas aussi simple (malheureusement). D'ailleurs le bouton que tu voyais s'afficher était le bouton button et non le bouton dijit. (un simple changement de libellé te le montrera).

L'idée plus simple est d'inclure directement ton bouton dans le template. Concernant les styles, il n'y a pas de souci, si tu ne le percevais pas c'était lié au problème de ton bouton.

Finalement, le template:
Code:

1 2 3 4 5 <div id="${id}Content"> Bonjour et merci de prendre le temps de répondre à ces quelques questions <div dojoType="dijit.form.Button" id="start" dojoAttachEvent= "onclick:_start"> Commencer </div> </div>
et le code associé:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 dojo.provide("modleweb.widget.Quizz"); dojo.require("dijit._Templated"); dojo.require("dijit._Widget"); dojo.require("dijit.form.Button"); /* Class: Quizz */ dojo.declare("modleweb.widget.Quizz", [dijit._Widget,dijit._Templated], { /* String: templatePath chemin d'acces vers le template du widget */ templatePath: dojo.moduleUrl("modleweb.widget", "template/Quizz.html"), widgetsInTemplate:true, /* Function: constructor Constructeur */ constructor: function(){ console.log("modleweb.widget.Quizz::constructor"); }, //ne pas oublier cette fonction que tu as déclarée _start: function() { alert('Vava voum ! '); } });
Bon dev,

ERE

PS: attention, je n'ai pas vérifié les chemins du template, css etc.

24/06/2009, 16h53
Tavarez59

Encore une fois tu me sauves ;). Je vais essayer ça dès que possible et je te tiens en courant. Merci
24/06/2009, 17h21
emmanuel.remy

Salut,

Avant de continuer ton Quizz tu devrais jeter un coup d'oeil au composant dijit.layout.StackContainer; je me demande si tu n'es pas en train de le réécrire en grande partie ;)

ERE
24/06/2009, 20h31
Tavarez59

Merci du tuyau,

Par contre lorsque j'ajoute

Code:

widgetsInTemplate:true

l'événement du clic ne fonctionne pas et fonctionne néanmoins lorsque j'enlève cette ligne. 8O

Je vois pas trop pourquoi!

Merci!
24/06/2009, 23h32
emmanuel.remy

Petite modif

Code:

<div dojoType="dijit.form.Button" id="start" dojoAttachEvent= "onClick:_start"> Commencer </div>

et pour info, ton code

Code:

<div id="${id}Content">

ne doit pas passer, Dojo ne recréera pas de DIV donc conservera ton id original.

ERE
24/06/2009, 23h57
Tavarez59

ça fonctionne, encore une fois, par contre dans ce cas quelqu'un s'est trompé sur un tuto que j'ai lu lorsqu'il dit que dans dojoAttachEvent on doit mettre onclick en minuscule ce qui m'a induit en erreur. En tout cas ça fait plaisir de voir que des gens sont prêts à aider des noobs dojo comme moi même s'il ne faut pas en abuser ;).

Merci encore
25/06/2009, 00h40
emmanuel.remy

Citation:

par contre dans ce cas quelqu'un s'est trompé sur un tuto que j'ai lu lorsqu'il dit que dans dojoAttachEvent on doit mettre onclick en minuscule

Cette personne a raison, mais dans ton cas tu attaches un événement sur un composant Dojo, donc il faut récupérer son événement propre et c'est onClick et non onclick :cry:

ERE

Bon voilà, j'ai testé StackContent mais j'arrive pas à m'en servir correctement et je ne comprend vraiment pas pourquoi.
- Première question: dans un div de type StackContent (ou autre d'ailleurs) je n'arrive pas à mettre un dojoAttachPoint (lorsque je veux récupérer la valeur dans le JS je me retrouve avec un beau undefined), d'où vient le problème?
- Deuxième question: j'essaie d'utiliser le code suivant:
Code:

1 2 3 4 5 6 7 <div dojoType="dijit.layout.ContentPane"> <span dojoType="dijit.layout.StackController" containerId="quizzStackContainer" dojoAttachPoint="quizzStackController"></span> <div id="quizzStackContainer" dojoType="dijit.layout.StackContainer" dojoAttachPoint="_quizzStackContainer"> <div dojoType="dijit.layout.ContentPane" title="Welcome">Bonjour et merci de prendre le temps de répondre à ces quelques questions</div> <div dojoType="dijit.layout.ContentPane" title="Goodbye">Merci d'avoir répondu à ce questionnaire!</div> </div> </div>
Mais même si les boutons s'affichent correctement je n'ai pas le texte correspondant qui s'affiche au clic. C'est pourtant un exemple qui fonctionne hors widget.

Donc je comprend décidemment pas grand chose à ce framework mais j'éspère que ça viendra à force de bucher ;). Désolé d'abuser de ton temps et de ta gentillesse mais je ne comprend décidément pas ^^.

Merci

Salut,
Question à se poser:

As tu besoin de créer un Widget ? Est ce pour le réutiliser plus tard ?
La création d'un widget est quelque chose de spécifique, avec ses propres règles, et qui peut vite devenir instable sans une bonne connaissance de Dojo. Assure toi d'avoir bien compris les notions de jsID, dojoAttachEvent, dojoAttachPoint, et le cycle de création d'un Widget ?
De mon côté TON code fonctionne très bien, avec clic sur les boutons et récupération des dojoAttachPoint

Mon code (pas très propre, mais c'est un test...):

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
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="/dojotoolkit/dojo/dojo.js"
        djConfig="parseOnLoad:true, isDebug: false">
        </script>
 
        <style type="text/css">
            @import "/dojotoolkit/dijit/themes/soria/soria.css";
        </style>
 
<script type="text/javascript">
 
dojo.require("dijit._Templated");
dojo.require("dijit._Widget");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.StackContainer");
 
/* Class: Quizz */
dojo.declare("quizz", [dijit._Widget,dijit._Templated], {
  //templatePath: dojo.moduleUrl("modleweb.widget", "template/Quizz.html"),
  /* templateString : '<div style="color:red"> ' + 
 				  'Bonjour  et merci de prendre le temps de répondre à ces quelques questions' +
 				  '<div dojoAttachPoint="startQuizzButton" dojoAttachEvent="onClick:_start" dojoType="dijit.form.Button" id="Test">Coucou</div></div>',
  */
  templateString : '<div dojoType="dijit.layout.ContentPane"><span dojoType="dijit.layout.StackController" containerId="quizzStackContainer" dojoAttachPoint="quizzStackController" ></span>' +
	'<div id="quizzStackContainer" dojoType="dijit.layout.StackContainer"   dojoAttachPoint="_quizzStackContainer">' +
	'	<div dojoType="dijit.layout.ContentPane" title="Welcome">Bonjour et merci de prendre le temps de répondre à ces quelques questions</div>' +
	'	<div dojoType="dijit.layout.ContentPane" title="Goodbye">Merci d\'avoir répondu à ce questionnaire!</div>' +
	'</div></div>',
  widgetsInTemplate:true,
 				  /* Function: constructor     Constructeur */
  constructor: function(){
    console.log("modleweb.widget.Quizz::constructor");
  },
  /*
  // à utiliser avec le premier templateString (hors stack)
  _start: function() {
	  alert('click');
  }*/
 });
 
</script>
 
</head>
 
<body class="soria">
  <div dojoType="quizz" id="Perso" jsId="perso"></div>
 
</body>
</html>

ERE

28/06/2009, 17h24
Tavarez59

Désolé pour la réponse un peu tardive, j'étais absent quelques jours. Premièrement, oui j'ai réellement besoin des widgets et même si jamais je changeais d'avis sur un widget de quizz, j'en aurai à coup sûr besoin un peu plus tard pour d'autres choses car je travaille sur un gros projet. Je débute malheureusement avec DOJO et c'est un handicap certain, mais je compte bien apprendre au fur et à mesure de mon projet (qui n'a pour le moment aucun coût donc sans risque) et je pense qu'après avoir compris l'ensemble des techniques sur les widgets j'aurai déjà quelques notions solides pour débuter sérieusement mon projet.

Merci, je vais essayer ton code.
28/06/2009, 19h31
Tavarez59

Désolé mais ce code ne fonctionne pas chez moi (testé sous firefox et safari), il m'affiche toujours les 2 boutons mais pas de texte et rien ne se passe lorsque je clique sur l'un d'entre eux.
29/06/2009, 17h34
Tavarez59

Sous quelle version de DOJO travaille tu? Entre deux posts je me suis mis sur Aptana et celui-ci utilise encore la version 1.2 du framework et le code fonctionne avec celle-ci, je pense que le problème vient donc de là car lorsque je reviens à la version précédente ça fonctionne immédiatemment.
29/06/2009, 23h36
emmanuel.remy

Salut,

Citation:

Envoyé par Tavarez59

Sous quelle version de DOJO travaille tu? Entre deux posts je me suis mis sur Aptana et celui-ci utilise encore la version 1.2 du framework et le code fonctionne avec celle-ci, je pense que le problème vient donc de là car lorsque je reviens à la version précédente ça fonctionne immédiatemment.

J'ai testé sur la 1.2. Tu es avec la 1.3 ?

ERE
30/06/2009, 19h46
Tavarez59

Oui et apparemment le problème vient de la 1.3 car il ne se présente pas avec la 1.2
30/06/2009, 23h43
emmanuel.remy

SAlut,

Citation:

Envoyé par Tavarez59

Oui et apparemment le problème vient de la 1.3 car il ne se présente pas avec la 1.2

Je ferai un test avec la 1.3 ce we

ERE