0

HTML est un langage génial car il est déclaratif: il suffit de poser un attribut sur un noeud HTML pour qu’il se comporte de la façon qu’on veut. Mais parfois, on a besoin d’un comportement non-standardisé, customisé pour notre jeu web. Dans ce cas, comment faire?

Un comportement customisé

Prenons un exemple avec Iamanoc: sur la page de login, un formulaire est présent. On souhaite qu’un message soit affiché au-dessus du formulaire en cas d’échec de la connexion de l’utilisateur (parce qu’il s’est trompé de login ou de mot de passe, ou encore parce que son compte aurait été bloqué). En cas de connexion réussie, il faut que l’utilisateur soit renvoyé sur sa page de dashboard.

La solution déclarative

La meilleure solution pour faire ce comportement consiste à rajouter un nouvel attribut au noeud form, par exemple data-js-submit. Si cet attribut est présent sur une balise form, alors celle-ci sera postée en AJAX et traitée comme décrit dans le processus ci-dessus. L’intérêt de cette approche est d’avoir un code très léger (1 attribut à rajouter sur votre balise pour avoir le comportement désiré), standard pour tout votre jeu web, et facilement altérable (vous pourrez facilement trouver les balises form[@data-js-submitted]).

Cette solution purement déclarative revient à rajouter de nouveaux comportements au standard HTML: vous pourriez vous faire votre propre extension au standard HTML5, et l’appliquer à votre jeu web.

L’implémentation de cette solution n’est pas du ressort de cet article. Commentez si vous la souhaitez.

De nouveaux attributs/éléments

La conséquence de cette approche est d’avoir de nouveaux attributs HTML (voire éléments), qui ne sont pas dans le standard du W3C. Du coup, NetBeans ne peut pas les connaitre, et il ne vous proposera pas d’auto-complétion. Pire, il pourrait considérer ces attributs comme non-standards, et les marquer comme des erreurs. Il faut donc déclarer ces nouveaux éléments et attributs dans NetBeans pour que ce dernier puisse vous les proposer en auto-complétion, et ne les marque pas en erreur.

NetBeans ne propose pas d’auto-complétion pour votre attribut custom (non-standard) et le considère même comme une erreur

Déclarer ces attributs/éléments

Pour dire à NetBeans que “l’élément form peut avoir l’attribut data-js-submitted“, il vous suffit de créer un fichier customs.json dans le dossier nbproject/ et de l’éditer. Dans ce fichier (format JSON), vous pouvez définir la liste des éléments customs (elements:{}) et la liste des attributs customs (attributes:{}) de votre projet.

Les éléments customs

En fait, je vous les déconseille car un élément custom sera totalement ignoré par le navigateur. Vous n’aurez donc aucun “fallback” possible si votre Javascript plante (par exemple, si le navigateur ne supporte pas une méthode JS que vous avez utilisé) ou si l’utilisateur a bloqué Javascript (n’allez pas dire “ouais, personne ne fait ça, osef!” car les moteurs de recherche ne comprenne pas forcément le JS…). La déclaration d’un élément custom se fait ainsi (dans votre customs.json):

{
    "elements": {
        "foo": {
            "context": "body",
            "attributes": {
              /*...*/
            },
            "elements": {
              /*...*/
            }
        }
    },
    "attributes": {
    }
}
Déclaration d’un élément custom foo pour NetBeans

Dans elements.foo.elements et elements.foo.attributes, vous pouvez déclarer de nouveaux éléments customs.

Attributs customs

Mieux vaut donc utiliser les éléments standards de HTML, et rajouter des attributs (data-* de préférence) pour les enrichir de nouveaux comportement (comme le fait de poster votre formulaire via XMLHttpRequest). De cette manière, en cas de plantage de votre JS ou de non-prise en charge du JS par le client, ce dernier aura quand même la possibilité d’utiliser votre site. Il aura juste un site “dégradé” et moins pratique, mais utilisable. La déclaration d’un élément custom se fait de la manière suivante:

{
    "elements": {
    },
    "attributes": {
        "data-js-submitted": {
            "type": "string",
            "description": "Poste le formulaire en AJAX",
            "doc": "Si cet attribut est présent, alors le formulaire sera posté en AJAX. En cas d'erreur, la réponse sera mise dans l'élément désigné par cet attribut.",
            "doc_url": "http://tests.localhost/...",
            "required": "false",
            "context": "form"
        }
    }
}
Déclaration de l’attribut custom data-js-submitted pour NetBeans

La valeur doc_url ne semble pas fonctionner sur NetBeans 8.2 et required est un booléen écrit… littéralement (en chaîne string)!

Maintenant, NetBeans vous proposera cet attribut sur les balises form, mais pas sur les autres balises! Et si vous revenez sur votre projet dans 6 mois, vous aurez la documentation de cet attribut custom, et l’auto-complétion qui va avec, vous évitant de l’oublier.

NetBeans propose l’auto-complétion de l’attribut custom

Malheureusement, NetBeans ne propose pas de documentation pour le fichier customs.json. Il vous faudra donc aller voir dans les sources correspondantes.

Et pourquoi pas une classe?

Une autre solution pour créer un “custom attribut” est de passer par une classe CSS. Cette solution est tout à fait faisable. Il vous faudra d’abord créer un fichier CSS “bidon”, dans lequel vous allez juste déclarer votre classe CSS. De cette manière, NetBeans pourra vous proposer l’auto-complétion… mais il vous la proposera sur tous les éléments HTML et SVG, et non pas juste sur les form! De plus, la classe CSS ne permet pas de passer une “valeur”: vous pourrez juste dire “cet élément est cliquable” (par exemple): impossible d’utiliser le data-js-submitted comme décrit précédemment, en indiquant le sélecteur CSS permettant de savoir où le message d’erreur doit être inséré.

Avec une classe CSS, NetBeans propose l’auto-complétion sur tous les éléments HTML et SVG, sans documentation (peu pratique)
0