En essayant de modifier le code de mes widgets perso pour être compatible JeedomV4, je m’aperçois que dans les éditeurs de code que j’utilise, il m’est interdit d’utiliser le symbole # dans un nom de class.
Pourtant, dans le code Jeedom, ce type de syntaxe est utilisé un peu partout (ex : nomclass#uid#, …).
Je ne comprend plus rien. Ais-je loupé quelque chose ?
Je pensais que l’utilisation de #uid# permettait d’utiliser le code d’un widget pour plusieurs données différentes sur une même page.
Si vous pouviez m’éclairer.
J’utilise Microsoft Visual Sudio Code (mis a jour d’hier) et si j’essaie en ligne (sur le site w3schools.com par exemple), insérer un # dans un nom de class ne fonctionne pas.
Il doit y avoir un truc qui m’échappe ?
Je refais les #XXX# c’est interdit en css oui mais la tu fais un widget avec du css qui est remplacé au moment du rendu donc oui quand tu l’écris c’est pas autorisé mais au moment de l’afficher jeedom aura fait le necessaire. Regarde les documentations la notion de tag remplacé est bien expliqué.
Je comprend maintenant.
On ne peut donc pas travailler sur un éditeur de code en important directement du code natif de Jeedom pour le modifier et suivre l’évolution du rendu au fur et a mesure.
Pour travailler sur un éditeur, je vais donc utiliser l’astuce suivante :
Importer le code natif Jeedom dans l’éditeur
Faire un Find #uid# et Replace HuidH
Travailler sur le code
Puis faire un Find HuidH et Replace #uid#
Recopier le code modifié dans Jeedom
Remarques bienvenues si quelque chose vous choque.
Loic, j’espère que je ne te fais pas perdre ton temps pour un truc très gros que je ne vois pas.
Si je crée un bout de code HTML en créant une class=« abcde#uid# » et que je demande un preview dans un navigateur (Firefox en l’occurence), ce qui est affiché est rien ou au mieux des morceaux de texte du code.
Si je remplace le nom par class=« abcdeHuidH », le résultat s’affiche comme escompté.
J’ai testé avec les éditeurs, MS Visual Studio Code, Atom, Notepad++.
Voila ce que j’observe.
Je ne comprend pas que cela fonctionne ches les autres.
Tu ne peut affiché les #xxx# dans un navigateur, ce n’est que dans un contexte jeedom ou ils sont remplacés par jeedom avant de le passer a ton navigateur qui lui ne recoit pas #id# mais la valeur de #id# au moment de l’affichage
Merci Olive,
Oui cela je l’ai bien compris.
Mais comment faites vous pour développer du code HTML (widget Jeedom par exemple) en dehors du contexte Jeedom. En utilisant un éditeur comme Atom, Notepad++, … par exemple.
J’ai proposé une astuce ci-dessus mais ca peut paraitre lourd.
Si vous avez une meilleure idée, je suis preneur.
N’importe quel éditeur te permet de le faire y’a aucun soucis.
Le # n’est pas un caractere valide dans un nom de class css. Mais c’est pas grave car le core lit le fichier, remplace les #id# par 345 par exemple, et ensuite c’est interprété en html/js/css.
Donc vraiment, aucun soucis.
Ici sublimeText mais notepad++ ou autre c’est pareil.
Merci kiboost de ton intervention,
Mais il me semble qu’il faut que je précise ma question.
J’ai bien compris que le # n’est pas valide dans un nom de class CSS.
J’ai aussi compris que dans l’environement Jeedom, les tags du style #id# ou #uid# étaitent remplacés par leur valeur, 345 par exemple, avant que le code HTML/CSS soit interprété par le core Jeedom.
Donc si on développe du code dans l’environnement Jeedom, (en utilisant jeexplorer comme « olive » par exemple), on peut conserver les #uid# dans son code et voir le résultat (preview) directement.
Ce que j’aimerais faire, c’est écrire du code dans un éditeur externe et surtout voir le résultat (dans le preview) qui est un navigateur comme Firefox par exemple.
Dans ce cas, je ne passe pas par la moulinette Jeedom qui transforme les #uid# en valeur.
Et la évidement, ca ne fonctionne pas. D’ou l’astuce proposée ci dessus mais qui oblige a un Find/Replace (ce que fait Jeedom d’ailleurs).
Ce n’est à mon sens pas la bonne méthode.
Tu crée un fichier pour ton widget, tu l’applique à une commande, tu l’affiche sur ton dashboard, et tu développe, avec les outils dev du browser en parallèle.
Sinon tu n’aura jamais de truc fiable, entre les remplacements par le core, la fonction js update du core, les class css du core, etc.
C’est vrai que ce que tu proposes est le meilleur moyen pour être, en permanence,conforme à l’environnement Jeedom.
Du coup, ma question évolue vers celle-ci.
Lorsque je développe dans le browse Jeedom sous la fonction Outils/Widget/Code par exemple, pour voir le résultat des modifications apportées au code du widget, la seule chose que j’ai trouvé est de remonter dans la définition de la commande, faire enregsitrer de nouveau et revenir sur le dashboard.
Je trouve cela un peu lourd mais il y a peut être un moyen plus évident et plus rapide ?
Une idée ?
Merci Salvialf,
J’ai bien noté ta suggestion.
Je n’ai pas encore eu le temps de voir comment utiliser la fonction .find() JQuery mais je vais regarder.
Cela semble effectivement très élégant comme méthode.
