Sujet : Formulaire XYL

Après visionnage de la vidéo, quelques questions :
Édition de Hywan : la vidéo au format WebM et au format MOV.

- si j'ai 10 zones obligatoires, avec le même message d'erreur "Merci de remplir patati ..." est ce qu'il faut que je definisse 10 id d'erreurs différents

- quand on a un formulaire dont le contenu n'apparait pas entier à l'ecran (très long ou dans des onglets) et que l'erreur se produit sur une zone "masquée" est-ce qu'il y a un mécanisme pour "démasquer" automatiquement la zone

- est ce qu'il ne serait pas envisageable d'ajouter un attribut au champ de saisie qui définirait à quel endroit le message d'erreur est affiché, voire en avoir un au niveau du <form> qui serait valable pour tous les champs (avec valeur  top/bottom pour afficher la liste des erreurs en haut/bas du formulaire, before/after pour afficher l'erreur au dessu/en dessous d'un champ, right, left, etc.)

- dans le cas où on a une liste d'erreurs "en vrac" est ce que XYL permet de rattacher automatiquement l'erreur à la zone (par un lien par exemple) ou est ce dans le message d'erreur on doit préciser "le champ gnagna doit contenir ...."

- la syntaxe pour tester la longeur d'une zone apha me semble un peu lourde, est ce qu'il n'est pas possible de la simplifier

2

Re : Formulaire XYL

Hey smile,

Merci pour les retours et les questions. J'y réponds dans l'ordre.

Si j'ai 10 zones obligatoires, avec le même message d'erreur "Merci de remplir patati ..." est ce qu'il faut que je definisse 10 id d'erreurs différents.

Non. Plusieurs attributs onerror peuvent avoir en liste les identifiants d'une même erreur. Exemple :

<input ... onerror="ecommon" />
<input ... onerror="ecommon e1" />
<input ... onerror="e3 ecommon" />
<input ... onerror="e42" />
...
<error id="ecommon"><p>Merci de remplir patati</p></error>

Quand on a un formulaire dont le contenu n'apparait pas entier à l'ecran (très long ou dans des onglets) et que l'erreur se produit sur une zone "masquée" est-ce qu'il y a un mécanisme pour "démasquer" automatiquement la zone

Question intéressante.
Si tu utilises le composant (pas encore codé) <tab>, XYL va pouvoir savoir si c'est l'onglet courant ou pas et réagir en conséquence. En revanche, si c'est bidouillé avec du CSS, XYL ne va pas interpréter CSS pour savoir si l'élément est visible ou pas, c'est trop compliqué.
C'est un problème intéressant mais qui n'a pas trop de sens finalement car on va toujours essayer de mettre les erreurs sur des zones visibles pour l'utilisateur wink. Me trompe-je ?


Est-ce qu'il ne serait pas envisageable d'ajouter un attribut au champ de saisie qui définirait à quel endroit le message d'erreur est affiché, voire en avoir un au niveau du <form> qui serait valable pour tous les champs (avec valeur  top/bottom pour afficher la liste des erreurs en haut/bas du formulaire, before/after pour afficher l'erreur au dessu/en dessous d'un champ, right, left, etc.)

Oui on pourrait l'envisager mais ce serait inutile.
D'une part, on se limite trop en faisant ça. D'autre part, ça nous obligerait à modifier le DOM dynamiquement (j'entends, Hoa devrait le faire) pour pas grand chose.
En revanche, CSS peut très bien répondre à ce problème. Les propriétés display, dir, float et box-orient sont potentiellement chacunes tes amies.
Si tu écris :

<input /><error>...</error>

Tu peux très bien t'en sortir avec du CSS pour ajuster les boîtes les unes par rapport aux autres sans toucher à XYL mais seulement avec du CSS.


Dans le cas où on a une liste d'erreurs "en vrac" est ce que XYL permet de rattacher automatiquement l'erreur à la zone (par un lien par exemple) ou est ce dans le message d'erreur on doit préciser "le champ gnagna doit contenir ...."

Actuellement, l'erreur ne sait pas par qui elle a été déclenchée, mais c'est très intéressant. On devrait être capable de faire ça. Je vais l'ajouter en feature, bien vu !
Tu aimerais que ça se passe comment ? Tu aimerais faire quoi ? Simplement un lien hyper-texte ou alors un truc plus CSS ou encore Javascript (quand on :hover ou :focus l'erreur, l'input s'highlight ou quelque chose du genre ?).


La syntaxe pour tester la longeur d'une zone apha me semble un peu lourde, est ce qu'il n'est pas possible de la simplifier

J'ai précisé dans la vidéo que XYL utilise Praspel pour exprimer des contraintes, mais XYL ne sait pas encore déduire les équivalences entre les contraintes Praspel et les mécanismes de contraintes côté navigateurs. Par exemple : string(boundinteger(0, 12)) revient à écrire maxlength="12", tout comment string(boundinteger(4, 12)) revient à écrire maxlength="12" mais on pert le "minlength" en quelque sorte. Les contraintes côté navigateurs sont faibles (malgré XForms 2.0/HTML5 Forms). C'est quelque chose sur lequel je vais travailler. Peut-être même imaginer une implémentation de Praspel côté client (en Javascript) qui permettrait plus de dynamicité. Je dois encore y réfléchir.
Il y a également des champs avec des contraintes implicites. Par exemple :

<input type="text" validate="email()" />

est équivalent à

<input type="email" />

si le domaine réaliste email existe bien sûr (mais il va exister wink).


Ai-je répondu à toutes tes questions ? En es-tu satisfait ?

« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »

3

Re : Formulaire XYL

J'avais bien vue qu'on pouvait spécifier plusieurs id dans le onerror, mais comme il n'y a qu'un <error id="e1"> comment fait-on pour afficher le message en dessous (ou à côté, ou etc)  de chaque <input> fautif ?

C'est un problème intéressant mais qui n'a pas trop de sens finalement car on va toujours essayer de mettre les erreurs sur des zones visibles pour l'utilisateur wink. Me trompe-je ?

Perso, je pense qu'il faut mettre les messages d'erreur le plus prés possible de l'erreur, ou alors avoir un système de liaison (cf la feature que tu propose). Avec les interfaces "tabbées" ou "ongletées" les champs en erreur ne me semble pas toujours simples à repèrer si l'élément se retrouve dans un bloc caché suite à la manip de l'utilisateur ou à la conception de l'interface (merci de ne pas répondre que dans ce cas c'est parce que l'interface est mal conçue lol)

string(boundinteger(4, 12)) revient à écrire maxlength="12"

OK, mais les attributs côté navigateur ne sont pas fiables, dans le sens où il suffit d'utiliser les "add-ons" développeur qu'on trouve maintenant dans tous les navs pour les modifier et envoyer n'inporte quoi non validé au serveur. C'est entre autre pour ça que je trouve que les validations XForms 2.0 / HTML5 forms sont bien jolies, mais ne résolvent rien quant à la sécurité.
Y-aura-t-il des "contraintes Praspel" prédéfinies, style validation d'email, anti-injection sql, etc, ou devra-t-on se faire sa propre bibli ?

Dernière fois dit par fpiat (12 Jan. 2011 17:02)

4

Re : Formulaire XYL

J'avais bien vue qu'on pouvait spécifier plusieurs id dans le onerror, mais comme il n'y a qu'un <error id="e1"> comment fait-on pour afficher le message en dessous (ou à côté, ou etc)  de chaque <input> fautif ?

J'écris un code qui je pense va résoudre ton problème :

<form …>
  <yield name="my_common_error">
    <error id="ecommon"><p>Hopla</p></error>
  </yield>

  <p>Test error1: <input type="text" … />
        <my_common_error /></p>
  <p>Test error2: <input type="text" … />
        <my_common_error /></p>
   <p>Test error3: <input type="text" validate="…" onerror="ecommon" />
        <my_common_error /></p>
  <p>…

De cette façon, si l'erreur intervient sur le dernier champ, tous les champs auront l'erreur qui va apparaître. Je ne vois pas trop le but mais je pense que je n'ai pas compris ton problème en fait. Me trompe-je ?

Perso, je pense qu'il faut mettre les messages d'erreur le plus prés possible de l'erreur, ou alors avoir un système de liaison (cf la feature que tu propose).

C'est évident. Si on a des onglets, on peut toujours mettre un onglet avec des contours rouges et le nombre d'erreur à l'intérieur. Mais mettre un formulaire dans plusieurs onglets est déjà un peu étrange …

OK, mais les attributs côté navigateur ne sont pas fiables, dans le sens où il suffit d'utiliser les "add-ons" développeur qu'on trouve maintenant dans tous les navs pour les modifier et envoyer n'inporte quoi non validé au serveur. C'est entre autre pour ça que je trouve que les validations XForms 2.0 / HTML5 forms sont bien jolies, mais ne résolvent rien quant à la sécurité.

Les XForms2.0/HTML5 Forms ne sont pas là pour sécuriser le serveur mais pour améliorer l'interface graphique et l'expérience utilisateur (respectivement UI et UX). Et surtout l'UX !
Si on ajoute une vérification côté serveur, c'est évidemment pour contrôler les requêtes HTTP qui ne proviennent pas forcément du navigateur wink. curl sera ton premier ami.


Y-aura-t-il des "contraintes Praspel" prédéfinies, style validation d'email, anti-injection sql, etc, ou devra-t-on se faire sa propre bibli ?

Y aura-t-il des domaines réalistes tu veux dire wink ? Oui bien sûr. Pour les emails, ça va arriver. Il faudrait faire le domaine réaliste regex qui est loin d'être facile. Une fois ce dernier fait, on va pouvoir faire une tripotée d'autres domaines réalistes de type chaîne de caractères.
Contre les injections SQL, ça ne dépend pas du formulaire mais de ton gestionnaire de base de données. Je fais la distinction. PDO protège naturellement contre les injections SQL si on utilise des requêtes préparées.

Est-ce que l'implémentation des formulaires dans XYL répond à toutes tes besoins actuels ou pas ? Si non, qui sont les résistants précisémment ?

« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »

5

Re : Formulaire XYL

Salut tout le monde smile

La vidéo montre une manière de faire que je trouve tout à fait inspirante : ne plus devoir écrire autant de PHP en ayant les éléments directement dans le code Xyl, c'est énormément de temps gagné.

Je m'interroge cependant sur un problème : comment gérer les champs ou groupes de champs dynamiques ? Exemple :
Je construis pas mal de formulaire depuis pas mal de temps et il peut arriver que je souhaite avoir des zones avec des champs dynamiques dont je ne connais pas le nombre nécessaire. Pour illustrer, mettons que je veuille enregistrer les interlocuteurs d'une entité quelconque. Pour chaque interlocuteur, j'aurai un nom et un prénom. Selon l'entité traitée, j'aurai entre 0 et n interlocuteurs. Par défaut, j'aurai donc de toutes façons un groupe de champs nom/prénom, mais si je modifie une fiche existante qui comporte trois interlocuteurs, je devrai avoir les trois groupes de champs plus un groupe me permettant d'en ajouter un quatrième. En option, je veux pouvoir aussi en ajouter un sans rechargement : pour l'instant, je gère ça en JavaScript (pour simplifier) et j'en ajoute autant que nécessaire.

Autre détail qui pour l'instant me poserait problème : tu indiques au départ le chargement d'un interpréteur HTML5 : et si mes formulaires doivent être en XHTML 1.0 Strict, existe-t-il l'interpréteur approprié  ou bien je devrai étendre ou surcharger quelque chose ?

Pour la zone des messages d'erreur, je gère ça selon la validation : en instantané coté client, le message à coté du champ peut me convenir, mais si c'est une validation coté serveur, il m'apparait plus rationnel d'avoir un bloc d'erreurs avant le formulaire. Cependant, je ne souhaite pas voir ce bloc vide au chargement initial de ma page : Donc, l'idée d'une section pour le bloc d'erreurs et une autre pour le formulaire me vont bien, mais as-tu prévu une manière simple de n'afficher le bloc d'erreurs exclusivement que s'il y a un contenu à y insérer ?

Enfin, une confirmation : la vidéo évoque la possibilité de l'ajout automatisé d'une validation coté client ? Basé sur quoi ? JQuery, Mootools, un HoaJs, autre ?

Sinon, ben je suis toujours aussi rétif devant une fenêtre de ligne de commande pour éditer quoi que ce soit, d'autant plus que je travaille sous Windows, donc ni Vim ni Emacs ni autre du genre et on va oublier la ligne de commande Windows que je n'utilise que pour le SQL et pour mettre à jour les quelques rares librairies PEAR que j'ai dans mon environnement. J'ai une notable préférence pour un IDE avancé avec mes fichiers dans des onglets.

Je sens que je progresse à ceci que je recommence à ne rien comprendre à rien (Ramuz)

6

Re : Formulaire XYL

Hey Jean smile,

Comment gérer les champs ou groupes de champs dynamiques ?

Une problématique tout à fait intéressante. Je vais y réfléchir.
Mais une petite note : tout gestionnaire de formulaire côté serveur a cette faiblesse. Je pense avoir une solution mais je dois l'expérimenter (et voir l'impact que ça peut avoir sur des performances HTTP ; je pense que ce sera ridicule).

Tu indiques au départ le chargement d'un interpréteur HTML5 : et si mes formulaires doivent être en XHTML 1.0 Strict, existe-t-il l'interpréteur approprié  ou bien je devrai étendre ou surcharger quelque chose ?

Si tu utilises XYL, il va tout générer de lui-même. Le document sera HTML5 compatible avec la plupart des navigateurs (même ceux ne supportant pas l'HTML5). L'HTML5 n'a rien de difficile à rendre compatible. Rappelons tout de même que pas loin de 50% des navigateurs sur le marché supportent HTML5 smile.
Au final, pourquoi s'imposer XHTML 1.0 strict ? Si ton document est compatible comme tu le souhaites, plus de soucis.

Pour la zone des messages d'erreur […]

Là encore, intéressante problématique. Je n'y avais pas pensé. Je fais un test, 2mn.
Pour l'instant (mais je vais améliorer ça), tu peux écrire :

<input … onerror="etop e1" />

<error id="etop">
  <section1>
    <title>Errors</title>

    <error id="e1"><p>…</p></error>
  </section>
</error>

Ça fonctionne. Le mieux serait quelque chose du genre :

<error id="e1" onerror="etop">

Le nom est mal choisi mais c'est l'idée. Ou mieux encore (qui respecterait une belle logique) :

<form action="…" method="…" onerror="etop">

Ça c'est bien smile. Je pense que je vais partir là-dessus. T'en penses quoi ?

La vidéo évoque la possibilité de l'ajout automatisé d'une validation coté client ? Basé sur quoi ? JQuery, Mootools, un HoaJs, autre ?

L'idée d'un « HoaJS » a été débattue. Le débat n'est pas clos.
La validation côté client se fera à travers HTML5. La compatibilité vers les autres navigateurs est attendues. Ou alors, Praspel côté client. C'est une autre idée également à creuser.

Je suis toujours aussi rétif devant une fenêtre de ligne de commande pour éditer quoi que ce soit

C'est gênant à quel niveau (sans être offensant) ?

Merci pour tes remarques smile.

« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »

7

Re : Formulaire XYL

Voilà c'est codé. Changeset c3c4cc50c072.

On peut maintenant faire :

<form … onerror="…">

Si le formulaire est invalide, alors les erreurs dans l'attribut @onerror seront levées. Du coup tu peux faire :

<error id="etop">
  <section1>
    <title>Errors</title>
    …
  </section1>
</error>

<form … onerror="etop">
  …
</form>

Cela te plaît-il ? Est-ce élégant ?

« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »

8

Re : Formulaire XYL

C'est simple et ça me va très bien comme solution smile

C'est gênant à quel niveau ?

Question d'habitude. Je sais que pas mal de geeks sont à fond sur des outils du type vim, mais d'abord sous Windows, je ne crois pas que cet outil soit disponible, ensuite, je travaille plus rapidement au clavier avec un système d'onglets plutôt que d'ouvrir les fichiers et de les refermer pour en ouvrir un autre. Ça fait maintenant une douzaine d'années que j'utilise un IDE avancé et retomber dans une invite de commande me hérisse le poil.

Comment gérer les champs ou groupes de champs dynamiques ?

Une problématique tout à fait intéressante. Je vais y réfléchir.
Mais une petite note : tout gestionnaire de formulaire côté serveur a cette faiblesse.

Je ne trouve pas, mais peut-être que nous ne voyons pas le problème avec la même approche.

Dans un premier temps, pour l'aspect codage de XYL, ça voudrait à priori dire qu'on a besoin d'une notion de boucle et de variable dans le langage. Si c'est un langage de structure et non un langage de programmation, on est devant un problème.

Dans un second temps, je reviens sur mon idée générale (que je t'ai probablement déjà plus ou moins exposée à titre privé) à propos de la gestion des formulaires dans un framework quel qu'il puisse être.  Il y a deux aspects dans un formulaire : l'aspect gestion, validation et traitement des données, et l'aspect visuel. Ces deux aspects peuvent être tous deux disponibles mais à mon sens doivent impérativement être dissociables et je veux pouvoir n'utiliser que la partie gestion des données et validation en gérant autrement la mise en forme. C'est du reste la raison majeure qui m'a fait exclure le Zend Framework du développement sur lequel je bosse depuis presque un an et que je me suis résolu à compléter un package personnel complet de gestion de formulaire. Dans son fonctionnement, il est assez proche de PEAR::Html_QuickForm en ce sens que j'ai un template et le package de gestion qui intercepte et traite les données. Mes templates sont le plus souvent des blocs de HTML dans une syntaxe HEREDOC et je peux arranger le code HTML absolument selon mes besoins les plus précis sans devoir tripatouiller dans une documentation de package PHP pour trouver comment reproduire en HTML tel ou tel élément. Comme mes templates sont en PHP, je peux parfaitement gérer des boucles pour construire à la volée des groupes de champs multiples.
Je t'accorde que mon système est peut-être moins simple encore que le système hoa::xyl mais je peux monter les formulaires les plus tordus, et crois moi j'en ai un ou deux assez gratinés dans mon application.

Ceci m'inspire d'ailleurs une autre question : pour la validation, mon système comporte à la base une classe de méthodes de validation génériques. Cependant, je peux avoir besoin de validations spécifiques pour un élément ou un autre, par exemple, je veux pouvoir vérifier la validité d'une donnée par rapport aux données d'un ou plusieurs autres valeurs du même formulaire. Exemple : dans un formulaire de gestion d'une fiche de collaborateur, j'ai des champs sur la civilité, le nom, le prénom, la date et le lieu de naissance et plus loin un champ ou j'inscris le numéro de sécurité sociale dudit collaborateur. Pour valider en partie ce numéro, je vais ainsi valider le premier chiffre, 1 si la civilité est « Monsieur », 2 si c'est « Madame » ou « Mademoiselle », ensuite je fais un explode sur la date de naissance inscrite et je récupère le mois et l'année pour valider les chiffres 2 à 5, etc... Avec mon propre système, j'écris une classe étendue de la classe de validation générique et j'y ajoute la méthode de validation spécifique. Comment gères-tu ça avec hoa::xyl ?

<mode style="goguenard">
Comment ça je fous la zone ? lol
</mode>

Dernière fois dit par Cyrano (14 Jan. 2011 16:23)

Je sens que je progresse à ceci que je recommence à ne rien comprendre à rien (Ramuz)

9

Re : Formulaire XYL

Je sais que pas mal de geeks sont à fond sur des outils du type vim, mais d'abord sous Windows, je ne crois pas que cet outil soit disponible, ensuite, je travaille plus rapidement au clavier avec un système d'onglets plutôt que d'ouvrir les fichiers et de les refermer pour en ouvrir un autre. Ça fait maintenant une douzaine d'années que j'utilise un IDE avancé et retomber dans une invite de commande me hérisse le poil.

Dans mes démos, je ne ferme pas Vim, je l'endors : <Ctrl-Z>, je suspends le processus. Ensuite, tu as des onglets dans ton terminal et dans Vim. Tu peux aussi splitter ton écran. Tu as également screen et tmux.

Dans un premier temps, pour l'aspect codage de XYL, ça voudrait à priori dire qu'on a besoin d'une notion de boucle et de variable dans le langage. Si c'est un langage de structure et non un langage de programmation, on est devant un problème.

 Absolument pas. XYL gère les boucles et ce genre de chose, grâce au Y de XYL, pour Yielding. On est hors-sujet par rapport à ce thread mais j'en parlerais, ne t'en fait pas. Pour les conditions, pareil, le problème est résolu et de manière très très élégante smile.

Ceci m'inspire d'ailleurs une autre question : pour la validation, mon système comporte à la base une classe de méthodes de validation génériques. Cependant, je peux avoir besoin de validations spécifiques pour un élément ou un autre, par exemple, je veux pouvoir vérifier la validité d'une donnée par rapport aux données d'un ou plusieurs autres valeurs du même formulaire. Exemple : dans un formulaire de gestion d'une fiche de collaborateur, j'ai des champs sur la civilité, le nom, le prénom, la date et le lieu de naissance et plus loin un champ ou j'inscris le numéro de sécurité sociale dudit collaborateur. Pour valider en partie ce numéro, je vais ainsi valider le premier chiffre, 1 si la civilité est « Monsieur », 2 si c'est « Madame » ou « Mademoiselle », ensuite je fais un explode sur la date de naissance inscrite et je récupère le mois et l'année pour valider les chiffres 2 à 5, etc... Comment gères-tu ça avec hoa::xyl ?

Tu as plusieurs solutions. La première qui va mutualiser tes efforts : faire ton propre domaine réaliste sécurité sociale par exemple. Tu pourras l'utiliser pour tes tests qui plus est, d'où ma référence à la mutualisation des efforts.
Sinon, tu peux toujours faire une post-validation des données si Praspel n'est pas suffisant. <form /> va valider les données en fonction de tes contraintes placées dans le attributs @validate mais rien ne t'oblige à les mettre. Tu peux en mettre des simplistes et faire des validations plus balèzes après dans ton contrôleur (si tu adoptes un modèle MVC), ou plus génériquement, dans le code qui va recevoir ton formulaire.
En revanche, tu soulignes un problème : la dépendance entre les variables (Monsieur => 1, Madame => 2 etc.). Praspel va bientôt répondre à ce problème et je vais l'étendre au formulaire avec la construction d'un contrat Praspel complet dynamiquement.

« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »

10

Re : Formulaire XYL

Hywan a écrit:

En revanche, tu soulignes un problème : la dépendance entre les variables (Monsieur => 1, Madame => 2 etc.). Praspel va bientôt répondre à ce problème et je vais l'étendre au formulaire avec la construction d'un contrat Praspel complet dynamiquement.

Ha ben j'irais même plus loin : je peux avoir besoin de faire un accès en base de données pour valider une donnée et ce en fonction du choix sur un autre champ, on peut tout imaginer à ce niveau, mais en restant simple, si les règles de validation impliquent la récupération de valeurs dans une source externe (base de données, fichiers de paramètres ou de configuration, voire, pourquoi pas, vers un web-service, il serait peut-être intéressant de pouvoir étendre Praspel pour ajouter une méthode spécifique pour un formulaire donné. Je ne sais pas trop en fait comment est structuré Praspel, je n'ai pas eu le temps d'y mettre le nez pour l'instant, je suis le nez dans le guidon et j'ai en principe même pas le temps de venir ici big_smile

Je sens que je progresse à ceci que je recommence à ne rien comprendre à rien (Ramuz)