Discussion :

[mamax29]

Bonjour,

Dans une application web j'ai un ensemble de boutons cliquables définit comme suit:

Code :

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

1
2
3
4
5
 
<div id="A001" class="bouton">Bouton 1</div>
<div id="A002" class="bouton">Bouton 2</div>
<div id="A003" class="bouton">Bouton 3</div>
...

Je souhaiterais pourvoir traduire une expression logique du style: (1 OU 2) ET 3 en un comportement qui serait dans l'exemple:

1. si on clique sur le bouton 1, on lui ajoute une class "presse"
2. si ensuite on clique sur le bouton 2, on enlève la class "presse" du bouton 1 , et on l'ajoute au bouton 2
3. si on clique sur le bouton 3, on ajoute la class "presse" a ce bouton, en laissant les autres

=> En conclusion les boutons séparés par des "OU" ne peuvent pas avoir la class "presse" simultanément, les bouton séparés par des "ET" eux, le peuvent.

Mon problème est que cette expression logique est crée par l'utilisateur de l'application, et que celle-ci peux inclure 999 bouton et n'est pas limitée à un seul niveau d'indentation OU/ET

C'est plus une question d’algorithmie qu'autre chose, mais si quelqu'un avait une idée

[NoSmoking]

Bonjour,
- peux tu confirmer que tu reçoit cela sous forme de chaine.
- peux tu fournir un exemple d'expression complexe.

c'est juste pour voir

[mamax29]

Pour l'expression logique, je pensais:

• soit la recevoir directement sous forme de chaine de caractère et la traiter avec les REGEX
• soit forcer un formatage avec un formulaire "dynamique"

Et une expression logique "complexe" pourrais être:

((1 OU 2) ET (3 OU 4 OU 5)) OU ((6 OU 7 OU 8 OU (9 ET 10)) ET 11)
On aura dans ce cas 10 bouton

[NoSmoking]

- A vue de nez, il te faut construire un arbre logique à partir de la commande.
- Peut-il y avoir des doublons de numéro dans la commande, cela influera sûrement sur la structure des nœuds de l'arbre ?
- Au final lorsque tu cliques sur un bouton il te faut remettre à jour l'affichage ?

PS : pas d'idée à priori, voire de méthode à te proposer.

[mamax29]

Salut,

- Peut-il y avoir des doublons de numéro dans la commande, cela influera sûrement sur la structure des nœuds de l'arbre ?

Non, un bouton ne peut apparaitre qu'une seule fois dans l'expression logique

- Au final lorsque tu cliques sur un bouton il te faut remettre à jour l'affichage ?

Oui

En fait, j'ai fait un truc qui fonctionne mais uniquement avec une "profondeur de 3" (qui suffit dan beaucoup de cas), sans utiliser d'expression logique mais avec une notion de groupe et sous-groupe. Mais du coup cela complique la compréhension de l'outil vis à vis de l'utilisateur.

L'utilisation d'une expression logique me semble donc plus approprié.

Peux-tu m'en dire plus sur la construction d'arbre logique?

[Tober]

Je pense que ce qu'il veut dire par arbre logique, c'est que tu peux définir une expression booléenne par un arbre :

Code :

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

1
2
3
4
5
6
 
       ET
       / \
    OU  Val3
    / \
Val1 Val2

C'est équivalent à (Val1 OU Val2) ET Val3

[Watilin]

Oh, pas banal comme problème ça, j'aime bien
En fait tu définis une sorte de langage d'expressions, il te faut donc construire quelque chose qui ressemble à un analyseur de langage.

Je me garde ça sous le coude pour quand j'aurai le temps, je vais essayer de faire ça
En attendant voilà déjà la partie analyse lexicale (le « lexer »).

Code JS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function lexer( text ) {
	var tokens = [];
 
	// tokens: '(', ')', 'ET', 'OU', entiers (\d+)
	var regex = /(\()|(\))|(ET)|(OU)|(\d+)/g;
	var matches;
	while (matches = regex.exec(text)) {
		var token = matches[5] // si c'est un nombre
			? matches[5] * 1 // conversion en type int
			: matches[0]; // sinon pas de conversion
		tokens.push(token);
	}
 
	return tokens;
}

Exemple :

Code console :

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

1
2
>>> lexer('((1 OU 2) ET (3 OU 4 OU 5)) OU ((6 OU 7 OU 8 OU (9 ET 10)) ET 11)')
["(", "(", 1, "OU", 2, ")", "ET", "(", 3, "OU", 4, "OU", 5, ")", ")", "OU", "(", "(", 6, "OU", 7, "OU", 8, "OU", "(", 9, "ET", 10, ")", ")", "ET", 11, ")"]

Ça renvoie une liste de tokens qu'on passera les uns après les autres à la fonction analyse syntaxique. Qui pourra être, comme le font remarquer NoSmoking et Tober, basée sur un arbre logique.

Voir sur le Web : analyseur lexical, analyseur syntaxique, arbre de syntaxe abstraite, etc.

C'est peut-être un peu trop lourd pour valoir le coup, mais trop tard, je suis lancé Je vous tiens au courant !

[Watilin]

Re,
j'ai eu le temps de commencer un petit bout. J'ai quelques questions pour toi mamax29 :

Code :

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

((1 OU 2) ET (3 OU 4 OU 5)) OU ((6 OU 7 OU 8 OU (9 ET 10)) ET 11)

Dans cet exemple, tu n'as pas mélangé les ET et les OU. Mais prenons celui-ci :

Code :

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

1 OU 2 ET 3

Il faut considérer un ordre de priorité. Par exemple, les ET seront résolus avant les OU. Ou bien, on utilise l'ordre de déclaration (de gauche à droite). Ou encore, on décrète que cette situation est interdite et on oblige à mettre des parenthèses.
La structure de mon parseur va pas mal dépendre de la réponse à cette question.

Pour l'instant, voilà comment je vois les choses :
– Un clic sur un bouton qui est dans un groupe ET n'a pas d'effet sur les autres boutons du groupe.
– Un clic sur un bouton qui est dans un groupe OU décoche les autres boutons du groupe.
– On traite les sous-groupes de la même manière que les boutons (récursivité).
– On n'a pas besoin de propager les effets d'un ET si un élément du groupe était déjà coché.

Dis-moi si je fais bonne route

De plus, la propagation des OU se fait dans l'autre sens : quand on « dé-presse » un bouton. Est-ce que cette action est possible ? Si oui, il faudra gérer ça également.