commit 9391069f424ecb95054628059edf558a584b11aa
parent efce787d64fc9a93b048e58db8daf290d0b57662
Author: gduperon <gduperon@5d9ba3ac-444b-4713-9fb3-0b58e79229a2>
Date: Wed, 12 May 2010 22:31:58 +0000
Refactoring pour avoir un MVC plus propre, mini-exemple localStorage à la fin d'index.html (pour l'enregistrement)
git-svn-id: https://projetud.info-ufr.univ-montp2.fr/svn/flin607-2009-gduperon@45 5d9ba3ac-444b-4713-9fb3-0b58e79229a2
Diffstat:
5 files changed, 220 insertions(+), 159 deletions(-)
diff --git a/jside3/extensions-jQuery.js b/jside3/extensions-jQuery.js
@@ -22,6 +22,9 @@ String.prototype.appendTo = function() {
// Extensions de jQuery
jQuery.fn.extend({
+ scrollToLast: function(speed) {
+ return this.scrollTo(this.children().last(), speed);
+ },
addTo: function(collection) {
$.merge(collection, this);
return collection;
diff --git a/jside3/index.html b/jside3/index.html
@@ -45,13 +45,16 @@
<script type="text/x-jqote-template" id="vue-monde">
<![CDATA[
<div class="monde">
+ <div class="scratch"></div>
</div>
]]>
</script>
<script type="text/x-jqote-template" id="vue-barre-outils">
<![CDATA[
<div class="barre-outils fenetre">
- <h2 class="barre-outils titre">Barre d'outils</h2>
+ <!--<div class="log barre-titre">-->
+ <h2 class="barre-outils barre-titre titre">Barre d'outils</h2>
+ <!--</div>-->
<input type="button" value="Nouveau bloc" class="barre-outils nouveau-bloc"/>
<input type="button" value="Coucou"/>
</div>
@@ -60,8 +63,13 @@
<script type="text/x-jqote-template" id="vue-log">
<![CDATA[
<div class="log fenetre">
- <h2 class="log titre">Log</h2>
+ <div class="log barre-titre">
+ <input type="button" class="log pause" value="▌▌" style="padding-right: 0.1em;" />
+ <input type="button" class="log play" value="▶"/>
+ <h2 class="titre">Log</h2>
+ </div>
<div class="log messages">
+ <div><!-- Il faut au moins un message (vide). --></div>
</div>
</div>
]]>
@@ -69,12 +77,12 @@
<script type="text/x-jqote-template" id="vue-bloc">
<![CDATA[
<div class="bloc fenetre">
- <h2 class="bloc titre"><%= this.bloc.nom %></h2>
+ <h2 class="bloc barre-titre titre">Nom du bloc</h2>
<div class="bloc tabs titres">
<h3 class="définition titre">Définition A</h3>
<h3 class="définition titre">Définition B</h3>
<h3 class="définition titre">Définition C</h3>
- <input type="button" class="nouvelle-définition" value="+" />
+ <input type="button" class="nouvelle-définition" value="+"/>
</div>
<div class="bloc définitions">
</div>
@@ -88,5 +96,12 @@
</div>
]]>
</script>
+ <script type="x-exemple-local-storage">
+ if (!localStorage[window.location.href]) {
+ localStorage[window.location.href] = 0;
+ }
+ localStorage[window.location.href] = parseInt(localStorage[window.location.href]) + 1;
+ document.getElementById('count').textContent = localStorage[window.location.href];
+ </script>
</body>
</html>
diff --git a/jside3/modele.js b/jside3/modele.js
@@ -34,23 +34,25 @@ function Monde(nom) {
uid: singleton.uid(),
// Propriétés
nom: nom,
- // vue
- vues: $(),
// Parents
// Enfants
- log: new Log(this),
- barreOutils: new BarreOutils(this),
+ log: null,
+ barreOutils: null, // J'ai des doutes sur la présence de barreOutils…
blocs: [],
scratch: null,
// Ajout
- ajouterVue: function(v) {
- v.modèle = this;
- v.addTo(this.vues);
- },
ajouterBloc: function(b) {
b.monde = this;
this.blocs.push(b);
},
+ définirBarreOutils: function(bo) {
+ bo.monde = this;
+ this.barreOutils = bo;
+ },
+ définirLog: function(l) {
+ l.monde = this;
+ this.log = l;
+ },
// Suppression
supprimerBloc: function(b) {
this.blocs.remove(b);
@@ -60,32 +62,21 @@ function Monde(nom) {
this.ajouterBloc(this.scratch);
var iscratch = new InstanceBloc(this.scratch, {vues: this.vues}); // Attention, devrait utiliser une définition !!!
this.scratch.ajouterInstance(iscratch);*/
- this.scratch = {vues: this.vues};
+ this.scratch = new Définition(); // this.scratch.bloc == null;
}
-function BarreOutils(monde) {
+function BarreOutils() {
$.extend(this, {
- monde: monde,
- vues: [],
- ajouterVue: function(v) {
- v.modèle = this;
- this.vues.push(v);
- },
+ monde: null,
});
}
-function Log(monde) {
+function Log() {
$.extend(this, {
- monde: monde,
- vues: [],
+ monde: null,
messages: [],
cbMessage: [],
// Ajout
- ajouterVue: function(v) {
- v.modèle = this;
- this.vues.push(v);
- },
- // ?
envoiMessage: function(msg) {
this.messages.push(msg);
faireCallbacks(this.cbMessage, msg);
@@ -103,8 +94,6 @@ function Bloc(nom) {
// Propriétés
nom: nom,
description: '', // Est une définition ?
- // vue
- vues: [],
// Parents
monde: null,
// Utilisation
@@ -114,29 +103,18 @@ function Bloc(nom) {
portsEntree: [],
portsSortie: [],
// Ajout
- ajouterVue: function(v) {
- v.modèle = this;
- v.addTo(this.vues);
- },
- ajouterInstance: function(ib) {
+ /*ajouterInstance: function(ib) {
//ib.bloc = this;
this.instances.push(ib);
+ },*/
+ demanderInstance: function() {
+ var ib = new InstanceBloc();
+ ib.bloc = this;
+ this.instances.push(ib);
+ return ib;
},
- ajouterDéfinition: function(d) {
- d.bloc = this;
- this.définitions.push(d);
- },
- nouvelleDéfinition: function(nom) { définitions.push(new Définition(nom, this)); },
- nouveauPortEntree: function() { portsEntree.push(new Port('entree', this)); },
- nouveauPortSortie: function() { portsEntree.push(new Port('entree', this)); },
- //nouvelleInstance: function(destination) { instances.push(new InstanceBloc(this, destination)); },
- // Suppression
- supprimerDéfinition: function(def) { définitions.remove(def); },
- supprimerPortEntree: function(port) { portsEntree.remove(port); },
- supprimerPortSortie: function(port) { portsSortie.remove(port); },
- supprimerInstance: function(inst) { instances.remove(inst); },
// Modification
- déplacerDéfinition: function(def, position) {
+ /*déplacerDéfinition: function(def, position) {
var pos = définitions.remove(def);
if (pos < position) position--;
définitions.insert(def,position);
@@ -150,44 +128,41 @@ function Bloc(nom) {
var pos = portsSortie.remove(port);
if (pos < position) position--;
portsSortie.insert(port,position);
+ },*/
+ ajouterDéfinition: function(d) {
+ d.bloc = this;
+ this.définitions.push(d);
+ faireCallbacks(this.cbAjoutDéfinition, d);
},
- cbAjoutInstanceBloc: [],
- onAjoutInstanceBloc: function(callback) {
- this.cbAjoutInstanceBloc.push(callback);
+ cbAjoutDéfinition: [],
+ onAjoutDéfinition: function(callback) {
+ this.cbAjoutDéfinition.push(callback);
}
});
}
-function InstanceBloc(bloc, définitionParente) {
+function InstanceBloc() {
$.extend(this, {
uid: singleton.uid(),
// Propriétés
- bloc: bloc,
- // vue
- vues: [],
+ bloc: null,
// Parents
- définition: définitionParente,
+ définition: null,
// Enfants
//instancesPorts: [],
// Ajout
- ajouterVue: function(v) {
- v.modèle = this;
- v.addTo(this.vues);
- },
});
}
-function Définition(nom, blocParent) {
+function Définition(nom) {
$.extend(this, {
uid: singleton.uid(),
// Propriétés
nom: nom,
type: null,
//description: '',
- // vue
- vues: [],
// Parents
- bloc: blocParent,
+ bloc: null,
// Enfants
connexions: [],
instancesBlocs: [],
@@ -195,11 +170,16 @@ function Définition(nom, blocParent) {
ajouterInstanceBloc: function(ib) {
ib.définition = this;
this.instancesBlocs.push(ib);
+ faireCallbacks(this.cbAjoutInstanceBloc, ib);
},
ajouterConnexion: function(c) {
c.définition = this;
this.connexion.push(c);
},
+ cbAjoutInstanceBloc: [],
+ onAjoutInstanceBloc: function(callback) {
+ this.cbAjoutInstanceBloc.push(callback);
+ }
});
}
@@ -209,8 +189,6 @@ function Connexions(de, vers, définitionParente) {
// Propriétés
de: de,
vers: vers,
- // vue
- vues: [],
// Parents
définition: définitionParente,
// Enfants
@@ -231,8 +209,7 @@ function Port(sens, blocParent) {
sens: sens, /* entrée / sortie */
nom: '',
description: '',
- // vue
- vues: [],
+ // ?
instances: [],
// Parents
bloc: blocParent,
@@ -246,8 +223,6 @@ function Port(sens, blocParent) {
uid: singleton.uid(),
// Propriétés
port: port,
- // vue
- vues: [],
// Parents
instanceBloc: instanceBlocParente,
// Enfants
diff --git a/jside3/style.css b/jside3/style.css
@@ -52,6 +52,14 @@ body {
overflow: auto;
}
+.log.pause {
+ float: right;
+}
+
+.log.play {
+ float: right;
+}
+
/* Bloc */
.bloc.fenetre {
position: absolute;
@@ -102,11 +110,28 @@ body {
}
/* Fenêtres */
-.titre {
+.barre-titre {
background-color: #eef;
border-bottom: thin solid blue;
padding: .1em;
- margin: 0;
font-size: 100%;
text-align: center;
}
+
+h2.titre {
+ font-size: 100%;
+ margin: 0;
+}
+
+input {
+ background-color: white;
+ border: thin solid black;
+}
+
+input:hover {
+ border-color: slategray;
+}
+
+input[type=button]:hover {
+ color: slategray;
+}
diff --git a/jside3/vue.js b/jside3/vue.js
@@ -1,115 +1,159 @@
-function VMonde(m) {
- this.modèle = m;
- var elem = $.extend(this, (
+/* function MQuelqueChose() */
+/* function VQuelqueChose(vueParente) */
+/* function CQuelqueChose(modèle, vueParente) */
+
+/*
+Règles :
+Le modèle ne fait que des callbacks.
+La vue ne peut que s'ajouter à sa vue parente.
+Le contrôleur peut dialoguer avec son modèle, sa vue, et les enfants de sa vue.
+Le contrôleur peut transmettre la vue parente reçue en paramètre à sa vue.
+*/
+
+function VMonde(appendToElement) {
+ $.extend(this, (
$('#vue-monde')
- .jqote(m)
- .appendTo('#editeur')));
+ .jqote({})
+ .appendTo(appendToElement)));
- this.modèle.ajouterVue(this);
+ this.vBarreOutils = null;
+ this.vLog = null;
+ this.vScratch = this.find('.scratch');
+}
+
+function CMonde(mMonde, appendToElement) {
+ this.modèle = mMonde;
+ this.modèle.définirBarreOutils(new BarreOutils());
+ this.modèle.définirLog(new Log());
+ this.vue = new VMonde(appendToElement, mMonde);
+
+ this.vue.vBarreOutils = new CBarreOutils(this.modèle.barreOutils, this.vue);
+ this.vue.vLog = new CLog(this.modèle.log, this.vue);
- new VBarreOutils(m.barreOutils);
- new VLog(m.log);
+ var that = this;
+ this.modèle.scratch.onAjoutInstanceBloc(function(instanceBloc) {
+ var cib = new CInstanceBloc(instanceBloc, that.vue.vScratch);
+ })
}
-function VBarreOutils(b) {
- this.modèle = b;
- var elem = $.extend(this,(
+function VBarreOutils(vMondeParente) {
+ $.extend(this,(
$('#vue-barre-outils')
- .jqote(b)
- .appendTo(b.monde.vues)));
+ .jqote({})
+ .appendTo(vMondeParente)));
+
+ this.vBarreTitre = this.find('.barre-titre');
+ this.vTitre = this.find('.titre');
+ this.vBoutonNouveauBloc = this.find('.nouveau-bloc');
- (elem)
- .draggable()
- .resizable()
- .find('.nouveau-bloc')
+ this.draggable();
+ this.resizable();
+}
+
+function CBarreOutils(mBarreOutils, vMondeParente) {
+ this.modèle = mBarreOutils;
+ this.vue = new VBarreOutils(vMondeParente);
+
+ var that = this;
+ (this.vue.vBoutonNouveauBloc)
.click(function() {
- elem.modèle.monde.log.envoiMessage("Nouveau bloc.");
-
+ that.modèle.monde.log.envoiMessage("Nouveau bloc.");
var b = new Bloc("Bloc 2");
- elem.modèle.monde.ajouterBloc(b);
+ var ib = b.demanderInstance();
+ that.modèle.monde.scratch.ajouterInstanceBloc(ib);
- var ib = new InstanceBloc(b, elem.modèle.monde.scratch);
- b.ajouterInstance(ib);
- new VInstanceBloc(ib);
- })
- .end();
-
- this.modèle.ajouterVue(this);
+ /* new CInstanceBloc(null, ib); // TODO */
+ });
}
-function VLog(l) {
- this.modèle = l;
- var elem = $.extend(this,(
+function VLog(vMondeParente) {
+ $.extend(this,(
$('#vue-log')
- .jqote(this.modèle)
- .appendTo(this.modèle.monde.vues)));
+ .jqote({})
+ .appendTo(vMondeParente)));
+
+ this.vBarreTitre = this.find('.barre-titre');
+ this.vTitre = this.find('.titre');
+ this.vBoutonPause = this.find('.log.pause');
+ this.vBoutonPlay = this.find('.log.play');
+ this.vMessages = this.find('.messages');
+
+ this.doPlay = function() {
+ this.vMessages.stop().scrollToLast(200);
+ this.vBoutonPause.show();
+ this.vBoutonPlay.hide();
+ };
+ this.doPause = function() {
+ this.vMessages.stop();
+ this.vBoutonPause.hide();
+ this.vBoutonPlay.show();
+ };
+
+ this.draggable();
+ this.resizable();
+ this.vMessages.css('top', this.vBarreTitre.outerHeight());
+ this.doPlay();
+}
- (elem)
- .draggable()
- .resizable()
- .find('.log-pause')
+function CLog(mLog, vMondeParente) {
+ this.modèle = mLog;
+ this.vue = new VLog(vMondeParente);
+
+ var that = this;
+ this.vue.vBoutonPause.add(this.vue.vBoutonPlay)
.click(function() {
- if (elem.modèle.pause) {
- elem.modèle.pause = false;
- elem.find('.messages')
- .stop()
- .scrollTo(elem.find('.messages :last'), 200);
- elem.find('.log-pause').val("pause");
+ if (that.modèle.pause) {
+ that.modèle.pause = false;
+ that.vue.doPlay();
} else {
- elem.modèle.pause = true;
- elem.find('.messages').stop();
- elem.find('.log-pause').val("play");
+ that.modèle.pause = true;
+ that.vue.doPause();
}
- })
- .end();
-
- elem.modèle.onMessage(function(msg) {
- var m = elem.find('.messages');
- m.append($('<div/>').text(msg));
- if (!elem.modèle.pause) {
- elem.find('.messages')
- .stop()
- .scrollTo(elem.find('.messages :last-child'), 100);
+ });
+
+ this.modèle.onMessage(function(msg) {
+ that.vue.vMessages.append($('<div/>').text(msg));
+ if (!that.modèle.pause) {
+ that.vue.vMessages.stop().scrollToLast(100);
}
});
-
- elem.find('.messages')
- .css('top', elem.find('.titre').outerHeight());
-
- elem.modèle.ajouterVue(this);
}
-function VInstanceBloc(ib) {
- debug2 = ib;
- this.modèle = ib;
- var elem = $.extend(this,(
+function VInstanceBloc(vDéfinitionParente) {
+ $.extend(this,(
$('#vue-bloc')
- .jqote(ib)
- .appendTo(ib.définition.vues)));
-
- elem.draggable()
- .resizable()
- .find('.bloc.tabs.titres')
- .css('top', elem.find('.bloc.titre').outerHeight())
- .end()
- .find('.nouvelle-définition')
+ .jqote({})
+ .appendTo(vDéfinitionParente)));
+
+ this.vBarreTitre = this.find('.barre-titre');
+ this.vTitre = this.find('.titre');
+ this.vTitresTabs = this.find('.bloc.tabs.titres');
+ this.vBoutonNouvelleDéfinition = this.find('.nouvelle-définition');
+
+ this.draggable();
+ this.resizable();
+ this.vTitresTabs.css('top', this.vBarreTitre.outerHeight());
+}
+
+function CInstanceBloc(mInstanceBloc, vDéfinitionParente) {
+ this.modèle = mInstanceBloc;
+ this.vue = new VInstanceBloc(vDéfinitionParente);
+
+ (this.vue.vBoutonNouvelleDéfinition)
.click(function() {
elem.modèle.bloc.monde.log.envoiMessage("Nouvelle définition.");
var d = new Définition();
elem.modèle.bloc.ajouterDéfinition(d);
- })
- .end();
+ });
- elem.modèle.bloc.onAjoutInstanceBloc(function(instanceBloc) {
-
+ this.modèle.bloc.onAjoutDéfinition(function(définition) {
+ console.log("Ajout de définition", définition);
});
-
- elem.modèle.ajouterVue(this);
}
-function VDéfinition(d, vueInstanceBloc) {
+function VDéfinition(d, vInstanceBlocParente) {
this.modèle = d;
- this.vueInstanceBloc = vueInstanceBloc;
+ this.vInstanceBloc = vInstanceBlocParente;
var elem = $.extend(this,(
$('#vue-définition')
.jqote(d)
@@ -122,17 +166,16 @@ function VDéfinition(d, vueInstanceBloc) {
function test() {
var m = new Monde("Le Monde");
+ var cm = new CMonde(m, '#editeur');
- new VMonde(m);
-
- var b = new Bloc("Bloc 1");
+/* var b = new Bloc("Bloc 1");
m.ajouterBloc(b);
var ib = new InstanceBloc(b, m.scratch);
b.ajouterInstance(ib);
- new VInstanceBloc(ib);
-
+ new VInstanceBloc(null, ib); // TODO
+ */
testlog(m, 6);
}
