Communities • Développer une interface web avec le toolkit Atlas (1/2)

Li chevron_right

Développer une interface web avec le toolkit Atlas (1/2)

Claude SIMON · pubsub.eckmul.net / linuxfr_news · Friday, 1 January, 2021 - 12:02 · 57 minutes

<div>Le toolkit Atlas permet de programmer des interfaces d’applications web monopages (<a href="https://en.wikipedia.org/wiki/Single-page_application">SPA</a>). Il est léger (quelques dizaines de Ko), sans dépendances, ne nécessite pas de savoir programmer en JavaScript, et n’impose pas d’architecture logicielle de type <a href="https://fr.wikipedia.org/wiki/Mod%C3%A8le-vue-contr%C3%B4leur">MVC</a>. En outre, toute application développée avec le toolkit Atlas est, dès son lancement, instantanément et automatiquement accessible de n’importe quel dispositif (smartphone, tablette…) équipé d’un navigateur web moderne connecté à Internet. Cet accès est facilité par un <a href="https://fr.wikipedia.org/wiki/Code_QR">code QR</a> qui s’affiche dans l’application. Le toolkit Atlas a déjà fait l’objet de <a href="//linuxfr.org/tags/atlas_toolkit/public">quelques publications</a> ici même. Pour varier un peu les plaisirs durant ces longues soirées <s>d’hiver</s> de couvre-feu, voici la première partie d’un document qui devrait faciliter l’utilisation du toolkit Atlas. Il détaille le développement d’une application (très) basique de gestion de contacts, dont l’apparence est la suivante : <img src="//img.linuxfr.org/img/68747470733a2f2f7133372e696e666f2f732f33396472347463722e706e67/39dr4tcr.png" alt="Apparence de l'application faisant l'objet du tutoriel 'Contacts'" title="Source : https://q37.info/s/39dr4tcr.png"> Le toolkit Atlas est disponible pour Java, Node.js, Perl, Python et Ruby. C’est la version la plus populaire, à savoir Python, qui est utilisée pour ce document. Cependant, l’API étant la même pour toutes les versions, on peut facilement le transposer aux autres langages disponibles. </div><ul><li>lien nᵒ 1 : <a title="https://atlastk.org" hreflang="en" href="https://linuxfr.org/redirect/107573">Homepage</a></li><li>lien nᵒ 2 : <a title="https://github.com/epeios-q37/atlas-python" hreflang="en" href="https://linuxfr.org/redirect/107574">Sur GitHub</a></li><li>lien nᵒ 3 : <a title="https://repl.it/@AtlasTK/atlas-python" hreflang="en" href="https://linuxfr.org/redirect/107575">Sur Repl.it</a></li><li>lien nᵒ 4 : <a title="https://atlastk.org/api/fr" hreflang="fr" href="https://linuxfr.org/redirect/107613">API</a></li><li>lien nᵒ 5 : <a title="https://q37.info/s/jz9ttdjb" hreflang="fr" href="https://linuxfr.org/redirect/107614">Seconde partie</a></li></ul><div><h2 class="sommaire">Sommaire</h2> <ul class="toc"> <li><a href="#toc-%C3%80-propos-de-ce-document">À propos de ce document</a></li> <li> <a href="#toc-le-ficher-html-principal-mainhtml">Le ficher HTML principal (<code>Main.html</code>)</a><ul> <li><a href="#toc-structure-g%C3%A9n%C3%A9rale">Structure générale</a></li> <li><a href="#toc-d%C3%A9tail-dun-contact">Détail d’un contact</a></li> <li><a href="#toc-boutons-g%C3%A9n%C3%A9raux">Boutons généraux</a></li> <li><a href="#toc-boutons-de-saisie">Boutons de saisie</a></li> <li><a href="#toc-liste-de-contacts">Liste de contacts</a></li> </ul> </li> <li> <a href="#toc-le-fichier-html-des-m%C3%A9tadonn%C3%A9es-headhtml">Le fichier HTML des métadonnées (<code>Head.html</code>)</a><ul> <li><a href="#toc-apparence-de-lapplication">Apparence de l’application</a></li> <li><a href="#toc-visibilit%C3%A9-des-boutons">Visibilité des boutons</a></li> </ul> </li> <li> <a href="#toc-rendu-de-linterface-part1py">Rendu de l’interface (<code>part1.py</code>)</a><ul> <li><a href="#toc-affichage-de-la-page-html">Affichage de la page HTML</a></li> <li><a href="#toc-la-boucle-%C3%A9v%C3%A8nementielle">La boucle évènementielle</a></li> </ul> </li> <li> <a href="#toc-liste-des-contacts-part2py">Liste des contacts (<code>part2.py</code>)</a><ul> <li><a href="#toc-liste-fictive">Liste fictive</a></li> <li><a href="#toc-affichage">Affichage</a></li> </ul> </li> <li> <a href="#toc-d%C3%A9tail-dun-contact-part3py">Détail d’un contact (<code>part3.py</code>)</a><ul> <li><a href="#toc-affichage-1">Affichage</a></li> <li><a href="#toc-s%C3%A9lection">Sélection</a></li> </ul> </li> <li><a href="#toc-%C3%80-suivre">À suivre…</a></li> </ul> <h2 id="toc-À-propos-de-ce-document">À propos de ce document</h2> L’accent étant mis sur la mise en œuvre de l'API du toolkit Atlas, le lecteur est supposé posséder les connaissances (basiques) nécessaires à la compréhension du code HTML/CSS et Python présent dans ce document. Les fichiers sources associés à ce document sont disponibles dans un <a href="https://github.com/epeios-q37/atlas-python/tree/master/tutorials/Contacts">dépôt GitHub</a>, lui-même cloné <a href="https://repl.it/@AtlasTK/atlas-python">sur Repl.it</a>, un IDE en ligne. Si Python 3 est installé sur votre ordinateur, vous pouvez récupérer le dépôt GitHub et visualiser/exécuter directement sur votre machine le code associé aux différentes sections de ce document. Vous pouvez également, notamment si vous n’avez pas installé Python 3, visualiser/exécuter, éventuellement après modification, ce code directement dans votre navigateur en utilisant le lien Repl.it ci-dessus. Pour ne pas allonger outre mesure ce document, chaque section ne contiendra que les détails du code sur lequel elle porte. Néanmoins, au début de chaque section, il y aura un lien vers le code source complet tel que décrit dans cette section, ainsi que les instructions à lancer pour l’exécuter sur Repl.it et en local. Les lignes, dans les fichiers source, précédant la ligne <code>import atlastk</code> ne sont là que pour faciliter l’utilisation de ces fichiers dans le cadre de ce document et ne sont pas nécessaires à une utilisation courante du toolkit Atlas. <h2 id="toc-le-ficher-html-principal-mainhtml">Le ficher HTML principal (<code>Main.html</code>)</h2> <blockquote> Code source : <a href="https://github.com/epeios-q37/atlas-python/blob/master/tutorials/Contacts/Main.html">lien sur GitHub</a>. </blockquote> Le fichier <code>Main.html</code> est un fichier au format HTML décrivant l’interface. Ce fichier va prendre place dans la section body de la page HTML constituant l’interface de l’application. <h3 id="toc-structure-générale">Structure générale</h3> Voici un aperçu partiel du contenu de ce fichier, mettant en évidence sa structure générale : <pre><code class="html"><fieldset> <fieldset id="Contact">  </fieldset> <div style="display: table; margin: 10px auto auto auto;"> <div>  </div> <div class="Edition">  </div> </div> </fieldset> <div style="display: table; margin: 10px auto auto auto; border-collapse: collapse;">  </div></code></pre> Il est aisément compréhensible de celles et ceux qui sont familiers avec HTML. Ses différentes sous-parties, qui prennent la place de commentaires ci-dessus, vont être détaillées ci-dessous. <h3 id="toc-détail-dun-contact">Détail d’un contact</h3> Voici le code dédié à l’affichage du détail d’un contact : <pre><code class="html"><table style="margin: auto;"> <tr> <td> <label for="Name">Full name:</label> </td> <td> <input id="Name" size="50" /> </td> </tr> <tr> <td> <label for="Address">Address:</label> </td> <td> <input id="Address" size="50" /> </td> </tr> <tr> <td> <label for="Phone">Phone:</label> </td> <td> <input id="Phone" type="tel" size="50" /> </td> </tr> <tr> <td> <label for="Note">Note:</label> </td> <td> <textarea id="Note" style="width: 100%;"></textarea> </td> </tr> </table></code></pre> On y trouve un tableau, avec, pour chacun des champs constituant un contact, une ligne (chacune délimitée par <code><tr></code> et <code></tr></code>) accompagnée d’un libellé et d’un identifiant explicite. <h3 id="toc-boutons-généraux">Boutons généraux</h3> Ces boutons vont servir à créer/éditer/supprimer un contact. En voici le code : <pre><code class="html"><button class="Display" data-xdh-onevent="New">New</button> <span class="DisplayAndSelect"> <button data-xdh-onevent="Edit">Edit</button> <button data-xdh-onevent="Delete">Delete</button> </span></code></pre> À part l’attribut <code>data-xdh-onevent</code>, on n’a là que du HTML des plus classiques. Les différentes classes (valeurs <code>Display</code> et <code>DisplayAndSelect</code> des attributs <code>class</code>) ont cependant un rôle bien particulier, qui sera révélé dans les sections qui suivent. L’attribut <code>data-xdh-onevent</code> prend ici la place de l’habituel attribut <code>onclick</code>. L’attribut <code>onclick</code> prend habituellement pour valeur le code JavaScript à lancer lorsque l’on clique sur le bouton auquel il est affecté. Ici, à la place, on utilise l’attribut <code>data-xdh-onevent</code>, qui va prendre pour valeur un libellé d’action, libellé que l’on retrouvera dans le code Python. On va pouvoir ainsi coder les actions à réaliser lors d’un clic sur le bouton non plus en JavaScript, mais en Python. <h3 id="toc-boutons-de-saisie">Boutons de saisie</h3> Ces boutons sont affichés lors de la saisie d’un contact, et permettent de valider ou d’annuler cette saisie. Voici le code correspondant : <pre><code class="html"><button data-xdh-onevent="Cancel">Cancel</button> <button data-xdh-onevent="Submit">Submit</button></code></pre> Là encore, rien de particulier, mis à part l’attribut <code>data-xdh-onevent</code>, que l’on a déjà rencontré ci-dessus. Le contenu des attributs <code>data-xdh-onevent</code>, à savoir <code>Cancel</code> et <code>Submit</code>, va être utilisé dans le code Python de l’application. Notez qu’ici le nom du bouton (la valeur de l’élément <code>button</code>) est identique à la valeur de son attribut <code>data-xdh-onevent</code>. C’est uniquement par commodité ; ce n’est en rien obligatoire. <h3 id="toc-liste-de-contacts">Liste de contacts</h3> Cette partie affiche le tableau qui va accueillir la liste des contacts au sein de son élément <code>tbody</code>, dont le contenu va être généré par l’application. En voici le contenu : <pre><code class="html"><table id="Contacts" style="cursor: default; border-collapse: collapse;"> <thead> <th>Name</th> <th>Address</th> <th>Phone</th> <th>Note</th> </thead> <tbody id="Content" /> </table></code></pre> Notez l’identifiant <code>Content</code>, que l’on va retrouver dans le code Python. L’identifiant <code>Contacts</code> n’est, lui, utilisé que dans le fichier <code>Head.html</code> décrit ci-dessous. <h2 id="toc-le-fichier-html-des-métadonnées-headhtml">Le fichier HTML des métadonnées (<code>Head.html</code>)</h2> <blockquote> Code source : <a href="https://github.com/epeios-q37/atlas-python/blob/master/tutorials/Contacts/Head.html">lien sur GitHub</a>. </blockquote> Ce fichier, également au format HTML, prendra place dans la section head de la page HTML constituant l’interface de l’application. <h3 id="toc-apparence-de-lapplication">Apparence de l’application</h3> La première partie de ce fichier définit le titre, l’icône, et, à l’aide de quelques règles CSS, diverses retouches au niveau de l’apparence de l’interface. En voici le contenu : <pre><code class="html"><title>Address book</title> <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUEAvyEhsxERuS8urQsKuycnsRkYtzc2qwUFvRUVtysrrx0ctTs6qTMyrSUksQ0NuyciPBdAAABHklEQVR42mNgwAa8zlxjDd2A4POfOXPmzZkFCAH2M8fNzyALzDlzg2ENssCbMwkMOsgCa858YOjBKxBzRoHhD7LAHiBH5swCT9HQ6A9ggZ4zp7YCrV0DdM6pBpAAG5Blc2aBDZA68wCsZPuZU0BDH07xvHOmAGKKvgMP2NA/Zw7ADIYJXGDgLQeBBSCBFu0aoAPYQUadMQAJAE29zwAVWMCWpgB08ZnDQGsbGhpsgCqBQHNfzRkDEIPlzFmo0T5nzoMovjPHoAK8Zw5BnA5yDosDSAVYQOYMKIDZzkoDzagAsjhqzjRAfXTmzAQgi/vMQZA6pjtAvhEk0E+ATWRRm6YBZuScCUCNN5szH1D4TGdOoSrggtiNAH3vBBjwAQCglIrSZkf1MQAAAABJRU5ErkJggg==" /> <style> #Contact label { font-weight: bold; } #Contact span { text-align: left; } #Contacts th, #Contacts td { border: 1px solid black; padding: 0% 5px; } #Contacts td:nth-child(3) { text-align: right; } #Contacts tr:nth-child(even) { background: #CCC } #Contacts tr:nth-child(odd) { background: #FFF } #Contact *:disabled { background-color: snow; color: initial; } </style></code></pre> <h3 id="toc-visibilité-des-boutons">Visibilité des boutons</h3> La seconde partie du fichier permet de gérer la visibilité des boutons. En voici le contenu : <pre><code class="html"><style id="HideDisplay"> .Display { display: none; } </style> <style id="HideDisplayAndSelect"> .DisplayAndSelect { display: none; } </style> <style id="HideEdition"> .Edition { display: none; } </style></code></pre> On y voit des éléments <code>style</code> accompagnés d’un identifiant. Ces éléments vont permettre de cacher/afficher certains boutons. En effet, chaque élément <code>style</code> définit une règle pour une certaine classe. En activant/désactivant un de ces éléments, on ajoute/retire à cette classe la règle CSS contenu dans l’élément. Par conséquent, on agit ainsi sur les éléments, en l’occurrence des boutons, auxquels cette classe est affectée. On retrouvera les différents identifiants de ces éléments <code>style</code> dans le code Python détaillé dans les sections qui suivent. <h2 id="toc-rendu-de-linterface-part1py">Rendu de l’interface (<code>part1.py</code>)</h2> <blockquote> <ul> <li>Code source : <a href="https://github.com/epeios-q37/atlas-python/blob/master/tutorials/Contacts/part1.py">lien sur GitHub</a> ;</li> <li>exécution : <ul> <li>sur <a href="https://repl.it/@AtlasTK/atlas-python#tutorials/Contacts/part1.py">Repl.it</a> : bouton Run, <code>n1</code> + entrée, clic sur URL,</li> <li>en local : <code>python3 atlas-python/tutorials/Contacts/part1.py</code> </li> </ul> </li> </ul> </blockquote> On va ici afficher l’interface de l’application, dont, suite à une action de l’utilisateur, seules les parties qui le nécessitent seront modifiées. <h3 id="toc-affichage-de-la-page-html">Affichage de la page HTML </h3> En premier lieu, on va définir la fonction qui sera appelée à chaque ouverture de session : <pre><code class="python">def ac_connect(dom): dom.inner("",open("Main.html").read())</code></pre> <code>dom</code> est un objet fournit par le toolkit Atlas ; chaque session a sa propre instance de cet objet. Dans cette fonction, la méthode <code>inner(…)</code>va remplacer la totalité de la page web par le contenu du fichier <code>Main.html</code> précédemment décrit. Le premier paramètre de cette méthode est l’identifiant de l’élément dont on va remplacer le contenu. La chaîne vide est une valeur spéciale qui fait référence à l’élément racine de la page. À titre indicatif, il existe également les méthodes <code>before(…)</code>, <code>begin(…)</code>, <code>end(…)</code> et <code>after(…)</code> pour insérer le contenu respectivement juste avant, au début, à la fin ou juste après l’élément dont l’identifiant est passé en paramètre. On va ensuite affecter cette fonction à une action, à l’aide d’un dictionnaire nommé, par convention, <code>CALLBACKS</code> : <pre><code class="python">CALLBACKS = { "": ac_connect }</code></pre> Ici, <code>ac_connect</code> est affecté à une action dont le libellé est une chaîne vide. Cette valeur correspond à l’action qui est lancée à chaque nouvelle session. <h3 id="toc-la-boucle-évènementielle">La boucle évènementielle</h3> On va ensuite lancer la boucle évènementielle de l’application, en lui passant le dictionnaire des actions, ainsi que le contenu du fichier <code>Head.html</code> décrit précédemment : <pre><code class="python">atlastk.launch(CALLBACKS,None,open("Head.html").read())</code></pre> Le paramètre dont la valeur est <code>None</code> sera abordé plus tard. <h2 id="toc-liste-des-contacts-part2py">Liste des contacts (<code>part2.py</code>)</h2> <blockquote> <ul> <li>Code source : <a href="https://github.com/epeios-q37/atlas-python/blob/master/tutorials/Contacts/part2.py">lien sur GitHub</a> ;</li> <li>exécution : <ul> <li>sur <a href="https://repl.it/@AtlasTK/atlas-python#tutorials/Contacts/part2.py">Repl.it</a> : bouton Run, <code>n2</code> + entrée, clic sur URL,</li> <li>en local : <code>python3 atlas-python/tutorials/Contacts/part2.py</code> </li> </ul> </li> </ul> </blockquote> Dans cette section, nous allons programmer l’affichage de la liste des contacts. <h3 id="toc-liste-fictive">Liste fictive</h3> On va d’abord créer une liste de contacts fictive, histoire d’avoir quelque chose à afficher : <pre><code class="python">EXAMPLE = [ { "Name": "Holmes, Sherlock", "Address": "221B Baker Street, Londres", "Phone": "(use telegraph)", "Note": "Great detective!" }, { "Name": "Holmes, Mycroft", "Address": "Diogenes Club, Pall Mall, Londres", "Phone": "(use telegraph)", "Note": "Works for the British government.\nBrother of Holmes, Sherlock." }, { "Name": "Tintin", "Address": "Château de Moulinsart", "Phone": "421", "Note": "Has a dog named Snowy." }, { "Name": "Tournesol, Tryphon (prof.)", "Address": "Château de Moulinsart", "Phone": "421", "Note": "Creator of the Bianca rose." } ]</code></pre> On va affecter cette liste à une variable qui fera office de base de données : <pre><code class="python">contacts = EXAMPLE</code></pre> <h3 id="toc-affichage">Affichage</h3> Créons une fonction dédiée à l’affichage de cette liste : <pre><code class="python">def display_contacts(dom): html = "" for contactId in range(len(contacts)): contact = contacts[contactId] html += f'<tr id="{contactId}" data-xdh-onevent="Select" style="cursor: pointer;">' for key in contact: html += f'<td>{contact[key]}</td>' html += '</td>' dom.inner("Content", html)</code></pre> Dans cette fonction, on récupère chaque contact de la liste, et, pour chacun de ces contacts, le contenu de chacun de ses champs. On va s’en servir pour créer le contenu du corps du tableau dédié à l’affichage de la liste, contenu qui sera stocké dans la variable <code>html</code>. Le contenu de cette variable est ensuite injecté dans le corps de la table, plus précisément dans l’élément <code>tbody</code> d’identifiant <code>Content</code> (voir le fichier <code>Main.html</code>), grâce à la méthode <code>inner(…)</code>, que l’on a déjà rencontrée. Notez que le premier paramètre n’est plus, comme auparavant, une chaîne de caractères vide, mais bien l’identifiant de l’élément concerné, à savoir <code>Content</code>. Chaque ligne du tableau a son propre identifiant, et un attribut <code>data-xdh-onevent="Select"</code> qui fera l’objet de la prochaine section. Enfin, on ajoute l’appel à cette fonction dans la fonction <code>ac_connect(…)</code>, : <pre><code class="python">def ac_connect(dom): dom.inner("",open("Main.html").read()) display_contacts(dom)</code></pre> <h2 id="toc-détail-dun-contact-part3py">Détail d’un contact (<code>part3.py</code>)</h2> <blockquote> <ul> <li>Code source : <a href="https://github.com/epeios-q37/atlas-python/blob/master/tutorials/Contacts/part3.py">lien sur GitHub</a> ;</li> <li>exécution : <ul> <li>sur <a href="https://repl.it/@AtlasTK/atlas-python#tutorials/Contacts/part3.py">Repl.it</a> : bouton Run, <code>n3</code> + entrée, clic sur URL,</li> <li>en local : <code>python3 atlas-python/tutorials/Contacts/part3.py</code> </li> </ul> </li> </ul> </blockquote> Procédons maintenant à l’affichage des détails d’un contact sélectionné par l’utilisateur. <h3 id="toc-affichage-1">Affichage</h3> On va commencer par le remplissage des champs au sommet de l’interface avec les valeurs du contact sélectionné dans la liste. Voici la fonction correspondante : <pre><code class="python">def display_contact(contactId,dom): dom.set_values(contacts[contactId])</code></pre> La méthode <code>set_values(…)</code> prend un dictionnaire avec, pour clefs, des identifiants d’éléments, et, pour valeurs, le contenu que doivent prendre ces éléments. Comme, dans la page HTML, les identifiants des éléments sont identiques aux clefs correspondant aux champs d’un contact, le dictionnaire est déjà constitué et n’est plus à construire. On l’utilise donc tel quel dans l’appel de la méthode <code>set_values(…)</code>. <code>contactId</code> est l’index, dans la liste <code>contacts</code>, du contact à afficher. <h3 id="toc-sélection">Sélection</h3> On va maintenant définir la fonction que l’on va affecter à l’action <code>Select</code> définit dans l’attribut <code>data-xdh-onevent</code> du code HTML qui est crée dans la précédente section : <pre><code class="python">def ac_select(dom,id): display_contact(int(id),dom)</code></pre> Le paramètre <code>id</code> contient l’identifiant de l’élément recevant l’évènement à l’origine de l’action à laquelle cette fonction a été affectée. Ici, l’évènement est un clic sur une ligne du tableau contenant la liste des contacts, évènement auquel a été associée l’action <code>Select</code> via l’attribut <code>data-xdh-onevent</code>. Conformément à ce qui va être défini ci-dessous dans la variable <code>CALLBACKS</code>, cette action va lancer la fonction <code>ac_select</code>. Dans la section précédente, on a vu que, pour le tableau HTML contenant la liste des contacts, chaque ligne a pour identifiant l’index, dans la table <code>contacts</code>, du contact correspondant. On peut donc utiliser directement <code>id</code>, après l’avoir converti en entier (<code>id</code> est fourni sous forme d’une chaîne de caractères), pour le passer à la fonction <code>display_contact(…)</code> On met à jour la table <code>CALLBACKS</code>, en affectant cette fonction à l’action <code>Select</code> (définie comme valeur de l’attribut <code>data-xdh-onevent</code> dans le code HTML généré dans la précédente section) : <pre><code class="python">CALLBACKS = { … "Select": ac_select }</code></pre> <h2 id="toc-À-suivre">À suivre…</h2> Sur les recommandations de l’équipe de modération, ce document a été découpé en deux dépêches. Celle-ci présentait le fichier HTML principal, celui des métadonnées, ainsi que les principales fonctions relatives à l’affichage. La <a href="https://q37.info/s/jz9ttdjb">seconde dépêche</a> portera sur la gestion des évènements. </div><div><a href="https://linuxfr.org/news/developper-une-interface-web-avec-le-toolkit-atlas-1-2.epub">Télécharger ce contenu au format EPUB</a></div> Commentaires : <a href="//linuxfr.org/nodes/122684/comments.atom">voir le flux Atom</a> <a href="https://linuxfr.org/news/developper-une-interface-web-avec-le-toolkit-atlas-1-2#comments">ouvrir dans le navigateur</a>