Bonjour,
Il est question dans les articles précédents d’Interface homme Machine basée sur les technologies web que le framework Gnoga permet de relier à une application écrite dans le langage Ada de façon simple.
Dans ce qui suit, passé les considérations générales sur cette solution, nous décortiquerons les principes mis en œuvre pour équiper « Ada for Automation » d’une telle IHM Web.
Considérations générales
Les avantages des technologies web sont nombreux.
On peut citer rapidement :
- accès local ou distant et de manière sécurisée éventuellement via SSL,
- solution multiplateforme, indépendante donc du matériel ou de l’OS et du navigateur en théorie,
- interface statique et / ou dynamique,
- adaptabilité en fonction du terminal, ou responsive design,
- compétences requises disponibles chez de nombreux développeurs,
- pléthore de bibliothèques tierces pour tous usages, frameworks JavaScript ou CSS…
Gnoga permet de créer à partir d’un embryon de page web un site complet entièrement depuis l’application en Ada.
Le développeur principal, Monsieur David BOTTON, indique dans l’un des échanges que nous avons eus sur la liste comp.lang.ada qu’en théorie il n’est pas nécessaire de connaître les technologies web que sont HTML 5, CSS3, SVG et JavaScript mais que « la connaissance c’est le pouvoir ».
Je serai sans doute plus catégorique que lui : je pense qu’il est indispensable d’être familier avec ces technologies afin de pouvoir envisager un développement dépassant le stade de simple exercice.
Cependant, ces technologies sont maintenant incontournables et il est assurément profitable pour tout développeur d’en avoir une bonne connaissance.
Et puis ce n’est pas non plus très compliqué et c’est assez ludique !
Ce blog n’a pas vocation d’héberger un tutoriel sur ces technologies et d’autres le font très bien comme Monsieur Jenkov ou chez W3Schools.com.
C’est d’ailleurs chez eux que j’ai bien appris, je les en remercie bien.
Les technologies web ont été prévues au départ pour créer et distribuer des documents. C’est l’aspect interaction ajouté par la suite qui permet de rendre ce document vivant et de le transformer en Interface Homme Machine.
S’il est donc possible de créer l’interface web de toutes pièces depuis l’application Ada, je pense qu’une approche mixte, combinant développement web classique pour la structure générale, les feuilles de style et en général pour tout l’aspect statique et, pour les aspects dynamiques la modification du document depuis le code Ada, permet de profiter de tous les avantages de ce mix technologique.
Ce que j’apprécie particulièrement dans les technologies web c’est l’aspect déclaratif. On pose les éléments du document dans un simple fichier texte et on peut visualiser tout de suite le résultat dans son navigateur préféré. Pas besoin de code, de compilation…
Comme, quand c’est bien fait, on peut dissocier structure, contenu et mise en forme, on peut faire évoluer l’IHM séparément de l’application.
De même on pourra faire intervenir un designer pour l’ergonomie ou le style qui n’aura pas besoin d’apprendre Ada pour œuvrer.
Bien sûr, cela représente beaucoup de compétences à acquérir mais elles sont réutilisables dans nombre de contextes et passionnantes !
En fait, cela permet d’envisager tout type d’application depuis l’embarqué en passant par le PC et plus si besoin.
Et vous avez sans aucun doute entendu parler de l’Internet des Objets ou (IoT : Internet of Things) et autres buzz words comme Industry 4.0 je présume.
Principes de mise en œuvre
Dans l’exemple qui suit, un unique document intègre la structure (HTML 5), le contenu (HTML et SVG), la mise en forme (feuille de style CSS intégrée) et JavaScript pour un peu d’interactivité.
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400" >
<style type="text/css" >
<![CDATA[
.a4a-class-valve {
stroke: #ff0000;
stroke-width: 2px;
stroke-linejoin: round;
}
.a4a-class-valve:hover {
stroke-width: 5px;
}
.a4a-class-valve[status="open"] {
fill: #00ff00;
}
.a4a-class-valve[status="closed"] {
fill: #0000ff;
}
]]>
</style>
<rect id="my_valve" x="100" y="100" height="100" width="150"
class="a4a-class-valve" status="closed"
onclick="Thing_Clicked(evt)"/>
</svg>
</div>
<script>
function Thing_Clicked(evt) {
var thing = evt.target;
console.log("Thing " + thing.getAttribute("id") + " Clicked !");
var thing_status = thing.getAttribute("status");
if (thing_status == "closed")
thing.setAttribute("status", "open");
else
thing.setAttribute("status", "closed");
}
</script>
</body>
</html>
Notre contenu est un peu fruste mais vous pourrez imaginer bien plus complexe par la suite grâce à Inkscape.
C’est un simple rectangle qui pourra changer de couleur en fonction de son état, état piloté par la souris et un peu de JavaScript.
Avec Gnoga, l’interaction se fait en Ada, les fonctions JavaScript sont remplacées par l’équivalent en Ada.
On peut tester en direct :
rectangle0.html
A ce stade, normalement vous utilisez un bon navigateur comme Firefox et vous disposez des outils de développement intégrés qui permettent notamment de naviguer dans la structure du document, d’en sélectionner les éléments, voir la sortie console et autres.
Les feuilles de style permettent d’associer couleur, taille, position, animation… à des éléments du document en fonction de leur type, de leur classe ou autres caractéristiques comme les attributs.
En définissant une classe et un attribut « status » pour notre rectangle nous pouvons lui affecter des propriétés telles la couleur.
En faisant varier son statut notre rectangle va changer de couleur conformément à la définition.
Donc, depuis l’application Ada on va associer un objet View à un élément à animer comme notre rectangle grâce à son identifiant (id) et connecter des gestionnaires d’événements si besoin.
Ainsi par exemple dans le cas de « A4A_Piano », (cf. a4a-web-web_server.adb) :
App_Data.LED1_View.On_Click_Handler
(LED_Views.On_Click'Unrestricted_Access);
Je vous invite à en parcourir le code pour le détail d’implémentation.
Cordialement,
Stéphane