Discussion :

[moimp]

Je galère depuis des mois sur un projet de composition de badges.
J’ai initialement tenté un code procédural qui en plus d’être lourd présente quelques bugs.
Mon application me paraît être un cas d’école pour le recours à la POO. Les badges sont composés sur une paire de lignes (2 balises <tr>) du corps d’un tableau (tbody).
La première ligne sert à la définition du style de la ligne.
La seconde ligne sert à la composition du contenu avec des textes constants (balises <input>) et des données extraites de la base de données (balises <select>). Cette composition peut être dans une seule cellule de la ligne.
Le résultat final est présenté sur l’image ci-dessous.

Mon problème est de savoir quels constructeurs prévoir et comment les utiliser (méthodes) pour intégrer les objets les uns dans les autres.

Informations complémentaires:
Le projet doit permettre l’effacement d’une paire de lignes (une ligne de badge) ou d’un élément de contenu (balises input ou select).
Chaque configuration doit pouvoir être enregistrées soit dans un fichier xml ou en cookie.
Ces développements complémentaires ne font pas l’objet de ma question mais peuvent être utiles pour les réponses.

[NoSmoking]

Bonjour,
il existe, sur DVP, quelques articles sur le sujet : Programmation objet.

Les badges sont composés sur une paire de lignes (2 balises <tr>) du corps d’un tableau (tbody).

pour moi cela ne veux rien dire, tu as un objet d'un coté et sa présentation à l'utilisateur de l'autre.

[moimp]

Je n'ai pas encore étudié ces articles mais c'est une information qui semble intéressante. L'article de Thierry Templier apporte un éclairage plus touffu mais complémentaire aux tutoriels que j'ai étudié jusqu'ici. Merci.

[danielhagnoul]

C'est la deuxième discussion que vous créez sur le même sujet, il est toujours aussi nébuleux !

[...] Le résultat final est présenté sur l’image ci-dessous.

On ne peut pas travailler sur une image de TABLE, il nous faut les codes CSS et HTML.

Par contre, on aimera voir l'image d'un "badge", pour se rendre compte de son aspect et savoir à quoi il peut servir (je crois le deviner, mais je n'en suis pas certain. Une référence vers un article serait le bienvenu.)

Il serait bon aussi de préciser si vous voulez de l'aide pour de la POO ES5 (compatible IE8) ou de la POO ES2015 (classes). La version ES2015 pouvant être convertie en ES5 (IE9) par Babel.

La POO JS sera utilisée uniquement côté client ou aussi côté serveur (node.js) ?

[moimp]

Il m'est difficile de donner ce qui ne marche pas encore ou pas bien mais voici un début avec le code HTML généré en PHP:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
	<p>
		<input type='button' id="addLine" value='Ajouter une ligne' />
	</p>
	<table>
		<thead>
			<tr>
				<th>Style</th><th><strong>G</strong></th><th><i>I</i></th><th><u>S</u></th><th>Police</th><th>Taille</th><th>Couleur</th>				<th><img src="/_images/del.png" alt="del.png" /></th>
			</tr>
			<tr><th>Ligne</th><th colspan="7">Eléments</th></tr>
		</thead>
		<tbody id="tbody">
		</tbody>
	</table>

Le CSS ne fait que gérer les couleurs de fond des lignes.
Toutes les lignes de tbody et leur contenu doivent être générées en javascript.

Le but est d'obtenir une planche d'étiquettes à coller sur les badges comme ceci:

Je veux réaliser un constructeur 'ligne de badge' comprenant deux lignes du tableau: une pour le style, une autre pour définir le contenu.
Je pense qu'il me faut ensuite:

• un constructeur pour créer un objet ligne pour la ligne de définition du style avec 8 cellules et un objet ligne de contenu avec une seule cellule;
• un constructeur de cellule;
• un constructeur de contenu de cellule

Tous les éléments du contenu sont concaténer dans la même cellule.
Chaque élément du contenu comprend lui même 3 objets formant un ensemble:

• Un champ input pour les textes fixes (ex. "Mon Asso") OU un champ select pour sélectionner une colonne de table de base de données; (1)
• un champ select pour définir un séparateur de champs; (2)
• une image pour supprimer l'ensemble 1+2+3; (3)

Cet ensemble peut être répété à volonté (2ème ligne de badge)

Ma difficulté est de réaliser les constructeurs nécessaires et de les organiser pour créer l'arborescence nécessaire où chaque objet doit représenter un élément du DOM.

Suis-je suffisamment clair? Je n'en suis pas sûr.

[danielhagnoul]

Voir : Exemple contenant un formulaire, une classe et un objet Badge

[moimp]

Bonjour et merci!
C'est vraiment très gentil de me fournir cet exemple. A quelques adaptations près, c'est, en moins sophistiqué, l'idée de ce que je veux faire. Il ne me reste plus qu'à décortiquer ce code pour le comprendre et l'adapter mais là je constate que j'ai encore des lacunes. C'est la raison pour laquelle je ne marque pas encore le sujet comme résolu.

[moimp]

Merci encore pour votre aide.

L’analyse de votre code m’oblige à approfondir mes connaissances et c’est tant mieux. Je retiens l’idée de commencer les noms des constantes par k et celles des classes par c, etc. Elle suscite aussi un certain nombre de questions :
1) A quoi servent les deux écouteurs du début ?
2) Est-ce que les API (ici FormData) sont automatiquement intégrés à JavaScript ou faut-il faire quelque chose pour les inclure.
3) Y a-t-il un intérêt particulier à écrire un maximum de choses (fonctions, propriétés sous forme de constantes const ?
4) Pourquoi à l’intérieur de la classe les méthodes ne sont pas précédées du mot clef function ?

A propos de mon projet qui, malgré certaines similitudes, ne correspond pas à votre exemple.

Comme on peut le voir sur l’image de ma question le formulaire en forme de tableau ne sert pas à composer un seul badge mais une planche de badge (étiquettes collées sur un badge).
La configuration issue du formulaires est envoyée à un fichier php pour traitement (génération d’un pdf) et éventuellement enregistrement de la configuration en cookie ou dans un fichier utilisateur.
Il s’agit donc de définir non pas uniquement les valeurs mais aussi leur origine (saisie ou base de données) et une chaîne de séparation (séparateur) entre les différents éléments constitutifs de la ligne.
Chaque élément peut être soit une donnée de base de données sélectionné par une balise select, soit un champ défini en remplissant un élément input.
C’est pourquoi chaque ligne de badge est configurée par une paire de lignes du corps de tableau (balise tbody) : Une ligne pour le style et une ligne pour le contenu.

Exemple de ligne de contenu :
Civilité (database), espace (séparateur), prénom (database), espace (séparateur), nom (database)

Autre exemple :
Texte fixe (input), ‘ – ‘ (séparateur), pays (database), trait d’union (séparateur), code postal (database)

Une différence importante par rapport à votre exemple est que les champs de formulaire sont créés de façon dynamique au fur et à mesure des besoins.

Je vais donc essayé d’adapter votre code pour arriver à mes fins.