Depuis maintenant un peu moins d’un an, Free offre la possibilité d’exécuter sur la Freebox des applications écrites en JavaScript utilisant les Enlightenment Foundation Libraries pour réaliser l’interface graphique.
1. Enlightenment et les EFL
Les EFL, Enlightenment Foundation Libraries, sont les bases d'un toolkit développé par l'équipe du projet Enlightenment depuis un peu plus de 10 ans, principalement pour le gestionnaire de fenêtres E17. Le projet E17 visant à fournir un gestionnaire de fenêtres à la fois joli, léger et rapide a donc mis de très gros efforts dans la réalisation d'une base saine, légère et rapide. Les EFL ont évolué dans le temps et sont maintenant destinées à la réalisation de tout type d'application ; à tel point qu'aujourd'hui, l'objectif est d'en faire un concurrent dans l'embarqué face aux poids lourds tels que QT ou GTK.
C'est ainsi que les EFL viennent de passer en version alpha, ce qui garantira une compatibilité API/ABI la plus longue possible dans le temps. La version 1.0 devrait être disponible d'ici peu, et l'objectif est que la version 2.0 (permettant éventuellement de " casser " l'ABI) ne sorte pas avant plusieurs années. Avec cette sortie, les EFL entrent définitivement dans la cour des grands et cassent un peu plus ce mythe de vaporware. D'ailleurs, pour le clin d'œil, Free a inclus Duke Nukem 3D dans le même firmware mettant à disposition Elixir, ce framework JavaScript qui utilise les EFL.
Les EFL ont été découpées en morceaux logiques pour en faciliter la compréhension et la maintenance :
Eina est la base de toutes les EFL. Une bibliothèque de types de données qui essaye de rendre le plus simple possible la manipulation efficace de ces types. Dans le cadre du projet Elixir et sur la Freebox, celle-ci n'est pas du tout exposée aux utilisateurs car le JavaScript a déjà , contrairement au C, ces fonctionnalités dans le langage.
Eet fournit une mécanique robuste et efficace pour sérialiser et enregistrer des données dans un fichier ou les envoyer sur le réseau. Cela inclut n'importe quelle structure mémoire, des images ou encore les scripts JavaScript d'Elixir.
Evas est un canvas graphique stateful. C'est réellement le cœur des EFL car c'est Evas qui est en charge de la gestion et de l'affichage des objets sur le canvas graphique. C'est cette bibliothèque qui optimise toutes les requêtes au système graphique pour tirer au mieux parti des performances du matériel.
Ecore est chargé de gérer tous les événements, qu'ils soient liés aux fenêtres graphiques (redimensionnement, déplacement, ...) ou au réseau.
Edje permet quant à elle de définir indépendamment du code de l'application son look & feel. Cela permet, par exemple, d'aussi bien définir le layout des menus d'une application que les animations d'un sprite. L'intérêt étant de pouvoir avoir plusieurs versions d'un thème s'adaptant le mieux possible au terminal cible, une véritable abstraction entre le code et l'interface
Sur ces bases vient se poser Elixir, qui expose directement l'API C des EFL en JavaScript grâce à la bibliothèque SpiderMonkey du projet Mozilla. Ce qui fait de cette solution un framework entièrement libre et ouvert, portable et intégrable facilement sur des plates-formes même très limitées. Pour pouvoir bénéficier d'un maximum d'exemples, de documentation et d'aide, il a été préféré de ne pas faire une API orientée objet : cela permet de réutiliser quasi directement les exemples en C.
2. Elixir
Il existe plusieurs manières de récupérer les EFL et SpiderMonkey. Ainsi, il existe un PPA pour Ubuntu, de Cédric Schieli, ppa:cschieli/freebox-elixir, des paquets sont aussi disponibles dans AUR pour Arch et il est bien entendu possible de tout compiler à la main en partant des sources. Pour ce dernier cas, nous vous laisserons consulter la documentation disponible sur http://code.google.com/p/freebox-elixir/wiki/InstallerElixir Free met aussi à disposition une image pour machine virtuelle VirtualBox à l'adresse : ftp://ftp.free.fr/pub/elixir/Elixir_virtualbox.tar.gz Ceci doit permettre de démarrer à développer sans trop perdre de temps sur des détails de compilation et d'installation.
Essayons donc, pour commencer, de réaliser un classique Hello World!. Tout d'abord, il faut charger les bindings nécessaires à notre exemple, c'est-à -dire Evas, Ecore et Ecore_Evas. Chaque module pouvant exister de manière optionnelle, il est considéré comme étant une bonne pratique de vérifier la valeur de retour de la fonction elx.load.
|
|
var test = true; test &= elx.load("evas"); test &= elx.load("ecore"); test &= elx.load("ecore-evas"); |
Maintenant que les bindings sont activés, il faut initialiser les EFL, créer une fenêtre, ajouter le texte au canvas, puis enfin, attendre que l'utilisateur presse sur une touche avant de quitter. Il va donc falloir utiliser Ecore puis Evas. Regardons ce que cela donne :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var background; var obj; ecore_init(); ecore_evas_init(); // Création de la fenêtre var ee = ecore_evas_new(null, 0, 0, 720, 576, "name=Hello World;"); // Obtention du canvas lié à la fenêtre var evas = ecore_evas_get(ee); // Définition des contraintes sur le canvas evas_image_cache_set(evas, 10 * 1024 * 1024); evas_font_path_prepend(evas, "/.fonts/"); evas_font_cache_set(evas, 512 * 1024); // Création d'un background noir opaque obj = evas_object_rectangle_add(evas); evas_object_resize(obj, 720, 576); evas_object_color_set(obj, 0, 0, 0, 255); evas_object_show(obj); background = obj; // Création de l'objet texte obj = evas_object_text_add(evas); evas_object_text_text_set(obj, "Hello World!"); evas_object_text_font_set(obj, "Vera", 30); evas_object_text_style_set(obj, EVAS_TEXT_STYLE_SOFT_SHADOW); evas_object_text_shadow_color_set(obj, 128, 128, 128, 255); evas_object_color_set(obj, 128, 64, 0, 180); evas_object_resize(obj, 200, 50); evas_object_move(obj, 100, 100); evas_object_show(obj); |
Comme Evas est un canvas stateful, nous créons les objets qui seront affichés à l'écran, puis on en change les propriétés pour obtenir le résultat voulu. Par contre, vous noterez la présence d'un rectangle noir explicitement défini pour le fond. Il est nécessaire, car Evas n'a pas de notion d'initialisation du fond d'écran avec une valeur quelconque. Donc, sans cet objet, Evas ne saurait pas quoi mettre comme contenu dans les pixels composant le fond. Vous pouvez tester en désactivant juste l'appel à evas_object_show, qui correspond au fond d'écran (par défaut, les objets ne sont pas visibles). Ce bout de code a aussi introduit deux types d'objets gérés par Evas : les rectangles et le texte. Evas gère aussi des images, des blocs de texte, des tables, des listes fixes (appelées box) et des objets composés de toutes ces primitives (appelés smart objects).
Ajoutons maintenant la gestion du clavier pour quitter l'application :
|
|
evas_object_event_callback_add(background, EVAS_CALLBACK_KEY_UP, key_up_cb, null); evas_object_focus_set(background, 1); ecore_evas_show(ee); ecore_main_loop_begin(); |
Voilà ! Nous avons maintenant attaché une callback sur l'objet background et défini qu'il recevrait les événements clavier puisqu'il possède le focus (evas_object_focus_set). Enfin, la fenêtre a été affichée juste avant de démarrer la boucle principale du programme. C'est cette boucle qui déclenchera au moment opportun la mise à jour du rendu à l'écran et transmettra les événements clavier à Evas sans bloquer l'interactivité de l'application.
