Journal Toolkit Atlas : ajouter une GUI à un programme.

Posté par (page perso) . Licence CC by-sa.
10
3
mai
2019

Ce journal fait suite à cette dépêche, dans laquelle je présentais le toolkit Atlas comme un outil d'accompagnement pour l'apprentissage de la programmation. L'idée est de permettre à un débutant de doter ses programmes d'une GUI alors qu'il n'a pas encore acquis les connaissances nécessaires à l'utilisation des frameworks traditionnellement utilisés pour cela. Accessoirement, les applications utilisant le toolkit Atlas sont automatiquement et instantanément accessibles de tout l'internet, ce qui permet au débutant de se la péter facilement montrer ses réalisations.

Quelques modifications viennent d'être apporter à la version Python du toolkit Atlas qui facilitent sa mise en œuvre dans Repl.it, un IDE en ligne, qui permet de programmer dans différents langages juste en utilisant un navigateur web, sans rien avoir à installer. À noter que les programmes utilisant le toolkit Atlas doivent impérativement être forkés avant de les lancer, soit en cliquant sur le bouton dédié, soit en modifiant le code source, faute de quoi ils ne fonctionneront pas.

À titre d'exemple, voici un "Hello, World!" codé avec le toolkit Atlas et placé sur Repl.it (n'oubliez pas de le forker avant de le lancer) : http://q37.info/s/vhnb3q3v. C'est plus sympa qu'un programme qui affiche "Hello, World!" dans une console, mais ça reste spartiate. Voici donc un exemple un peu plus élaboré, sous la forme d'un jeu de taquin (encore une fois, à forker avant de le lancer) : http://q37.info/s/mdghbt3n.

Le toolkit Atlas n'est pas censé être utilisé tel quel par le débutant, mais servir d'outil à ceux qui dispensent des cours de programmation, en leur permettant de rajouter une GUI aux exercices et exemples qu'ils ont l'habitude d'utiliser dans leurs cours, pour les rendre plus attrayants. C'est un exemple d'un tel ajout d'une GUI à un programme existant qui est présenté ici.

Le pont de départ est jeu de Reversi (plus connu sous le nom d'Othello dans nos contrées), équipé d'une CLI donc, que voici : http://q37.info/s/q4kzrdb3. Après mise en œuvre du toolkit Atlas, voici ce que cela donne (là encore, n'oubliez pas de le forker avant de le lancer) : http://q37.info/s/jhv7dtsp.

Bon, sur ce coup-là, je me suis un peu lâché, et le résultat est peut-être un peu difficile à comprendre à cause de la façon d'utiliser les CSS. Aussi, voici une version plus légère, avec moins de CSS (bla-bla-bla forker bla-bla-bla) : https://q37.info/s/kwck3t7n. Les CSS présentes dans cette version, contrairement à la précédente, ne servent qu'à la mise en forme et ne sont pas indispensables au fonctionnement du programme.

Je passe sur la définition de la classe Reversi, qui contient la logique du programme, et qui n'a été que légèrement modifiée par rapport à la version du programme d'origine. Le plus intéressant est la fonction drawBoard() qui dessine le plateau en fonction de l'état du jeu. Elle construit un arbre HTML en utilisant un objet retourné par la fonction du toolkit Atlas createHTML(…). Cet objet stocke les différents éléments de l'arbre sous une forme simplifiée, sa transformation en HTML étant réalisée par le navigateur web.

L'arbre ainsi obtenu est injecté dans l'interface grâce à la fonction setLayout(…). Dans ce programme, je lui passe un objet représentant l'arbre HTML, mais on pourrait également lui passer une chaîne de caractères contenant de l'HTML pur, généré à la main ou par votre moteur de templates préféré. L'attribut data-xdh-onevent permet d'associer une action à un élément HTML. En l’occurrence, Play est l'action qui va être lancée lorsque l'utilisateur clique sur une case du plateau.

Le setContents(…) permet de mettre à jour l'affichage du score. Le contenu de la fonction acPlay(…), qui est lancée lorsque l'utilisateur clique sur une case autorisée du plateau, est fortement inspirée de la version originale du programme. L'objet callbacks fait le lien entre les différents libellés d'action et leur callbacks. Tous les éléments statiques de l'interface sont directement placés dans le fichier Main.html. Le contenu du fichier Head.html est placé dans le section head de la page HTML de l'interface. On y place habituellement les éventuelles déclarations de styles et de fichiers JavaScript nécessitées par le programme.

Il existe une version XSL de ce programme (le projet tu forkeras, sinon le programme fonctionner ne pourra pas) : https://q37.info/s/3cbd7w9n. Le principe est de générer un arbre XML décrivant le statut de chacune des cases du plateau (vide, blanc, noir), arbre que le navigateur web transforme en HTML grâce à un fichier XSL. La particularité de cette version est que l'on peut basculer entre deux présentations différentes, d'où la présence de deux fichiers XSL.

J'espère avoir donné un meilleur aperçu de ce qu'est le toolkit Atlas avec ce petit journal sans prétention. Si vous avez des exemples de programmes (qui devront être disponibles sous une licence permettant d'en modifier le code source et d'en distribuer les modifications), jeux ou autres, qui gagneraient à se voir doter d'une GUI telle que fournie par le toolkit Atlas, n'hésitez pas à les mentionner. Ça me donnera matière à formaliser la mise en œuvre du toolkit Atlas pour l'élaboration d'une GUI, que je pourrais alors présenter ici même. À noter que CLI et GUI peuvent coexister au sein d'un même programme, donnant ainsi à l'utilisateur le choix de l'interface qu'il désire utiliser.

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.