Application d'un style dans un widget

**Tavarez59** · 23/06/2009, 20h37

Bonjour,

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

Code du sample:

Code :

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

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

Code Quizz.js:

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

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

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

**emmanuel.remy** · 24/06/2009, 00h39

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 :

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

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 :

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

**Tavarez59** · 24/06/2009, 16h53

Encore une fois tu me sauves

. Je vais essayer ça dès que possible et je te tiens en courant. Merci

**emmanuel.remy** · 24/06/2009, 17h21

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

**Tavarez59** · 24/06/2009, 20h31

Merci du tuyau,

Par contre lorsque j'ajoute

Code :

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

widgetsInTemplate:true

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

Je vois pas trop pourquoi!

Merci!

**emmanuel.remy** · 24/06/2009, 23h32

Code :

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

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

et pour info, ton code

Code :

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

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

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

ERE

**Tavarez59** · 24/06/2009, 23h57

ç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

**emmanuel.remy** · 25/06/2009, 00h40

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

ERE

**Tavarez59** · 25/06/2009, 02h24

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 :

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

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

**emmanuel.remy** · 25/06/2009, 10h54

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 :

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

**Tavarez59** · 28/06/2009, 17h24

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.

**Tavarez59** · 28/06/2009, 19h31

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.

**Tavarez59** · 29/06/2009, 17h34

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.

**emmanuel.remy** · 29/06/2009, 23h36

Salut,

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