1. #1
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 232
    Points : 142
    Points
    142

    Par défaut POO, mise en place des méthodes

    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.
    Nom : badgeFull.png
Affichages : 64
Taille : 25,3 Ko
    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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 794
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 794
    Points : 25 223
    Points
    25 223

    Par défaut

    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.

  3. #3
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 232
    Points : 142
    Points
    142

    Par défaut

    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.

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 703
    Points : 21 041
    Points
    21 041
    Billets dans le blog
    39

    Par défaut



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

    Citation Envoyé par moimp Voir le message
    [...] Le résultat final est présenté sur l’image ci-dessous.
    Nom : badgeFull.png
Affichages : 64
Taille : 25,3 Ko
    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) ?

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 232
    Points : 142
    Points
    142

    Par défaut

    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:
    Nom : badgePdf.png
Affichages : 27
Taille : 6,4 Ko
    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.

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    5 703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 5 703
    Points : 21 041
    Points
    21 041
    Billets dans le blog
    39

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    FAQ JS Tutoriels JS

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  7. #7
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 232
    Points : 142
    Points
    142

    Par défaut

    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.

  8. #8
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    232
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 232
    Points : 142
    Points
    142

    Par défaut

    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.

Discussions similaires

  1. [POO] C'est quoi une classe en claire...???
    Par Spack dans le forum Langages de programmation
    Réponses: 5
    Dernier message: 26/01/2009, 15h53
  2. [langage] Pb POO perl
    Par loothoof dans le forum Langage
    Réponses: 4
    Dernier message: 26/05/2004, 12h08
  3. [XSL] Je galère avec un XSL...
    Par argyronet dans le forum XSL/XSLT/XPATH
    Réponses: 14
    Dernier message: 18/05/2004, 12h02
  4. lier un cube à un objet (POO)
    Par Hypnos dans le forum OpenGL
    Réponses: 12
    Dernier message: 26/08/2003, 21h46
  5. galère avec my2pg.pl
    Par fafet dans le forum PostgreSQL
    Réponses: 4
    Dernier message: 16/07/2003, 10h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo