URL: https://linuxfr.org/users/epeios/journaux/toolkit-atlas-ajouter-une-gui-a-un-programme Title: Toolkit Atlas : ajouter une GUI à un programme. Authors: Claude SIMON Date: 2019年05月03日T15:58:46+02:00 License: CC By-SA Tags: gui, python, repl et atlas_toolkit Score: 10 Ce journal fait suite à cette [dépêche](https://linuxfr.org/news/les-jeunes-et-la-programmation-atlas-toolkit-v0-7), dans laquelle je présentais le [*toolkit* *Atlas*](https://atlastk.org) 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*](http://q37.info/s/mxmgq3qm), 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!"](http://fr.wikipedia.org/wiki/Hello_world) codé avec le *toolkit* *Atlas* et placé sur *Repl.it* (n'oubliez pas de le *forker* avant de le lancer) : . 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](https://fr.wikipedia.org/wiki/Taquin) (encore une fois, à forker avant de le lancer) : . 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*](https://fr.wikipedia.org/wiki/Othello_(jeu)) dans nos contrées), équipé d'une CLI donc, que voici : . 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) : . 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](https://fr.wikipedia.org/wiki/Feuilles_de_style_en_cascade). Aussi, voici une version plus légère, avec moins de CSS (bla-bla-bla *forker* bla-bla-bla) : . 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) : . 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.

AltStyle によって変換されたページ (->オリジナル) /