Débuter avec les Enlightenment Foundation Libraries (EFL)

Tout d'abord, un point sur l'affichage à l'écran d'un thème : les éléments sont affichés dans l'ordre de leur écriture dans le fichier Edje. Cela signifie que s'il y a lieu de superposition d'éléments, l'élément défini en dernier sera situé « au-dessus » des autres.

Puisque nous parlons de superposition, parlons de disposition : comment faire pour afficher un élément à une position donnée ? Comment faire pour que notre élément s'agrandisse et se rétrécisse selon la taille de la fenêtre ? Comment disposer un élément relativement à un autre ? Le positionnement et le comportement face aux redimensionnements forment sans aucun doute la partie la plus importante d'une interface utilisateur. Edje nous permet par le biais des propriétés des descriptions de la gérer, par de divers moyens.

Dans un premier temps, voyons l'alignement avec les balises « rel1 » et « rel2 ». La balise rel1 correspond au point situé en haut à gauche de l'élément à placer, et rel2 au point en bas à droite. Pour un placement relatif d'un élément à 50 % de l'axe des abscisses et à 0 % de l'axe des ordonnées par rapport à rel1, on va utiliser :

rel1 {
    relative: 0.5 0.0;
}

Comme vous avez dû le comprendre, 0 % d'un axe va correspondre à la valeur 0 tandis que 100 % va correspondre à 1. Pour un placement absolu à 200x300px de rel1, on va utiliser :

rel1 { 
    offset: 200 300; 
}

Qui est l'équivalent logique de :

rel1 { 
    relative: 0 0; 
    offset: 200 300; 
}

Tout en gardant en tête que les valeurs d'offset peuvent être négatives. Il est possible de combiner les propriétés « relative » et « offset ». Cela correspond tout simplement à un positionnement absolu à partir d'un point relatif.

On peut d'ailleurs aussi faire un placement relatif à un autre élément avec l'aide de la propriété « to » :

rel1 {
    ...
    to: "other part's name";
}

Qui est l'équivalent de :

rel1 {
    ...
    to_x: "other part's name";
    to_y: "other part's name";
}

Les propriétés « to_x » et « to_y » veulent respectivement dire que l'on souhaite placer notre élément relativement à la position des abscisses (to_x) ou bien des ordonnées (to_y). Utiliser les deux n'est bien entendu pas obligatoire, on peut utiliser l'un et/ou l'autre, ou tout simplement ne pas les utiliser du tout.

Edje laisse au développeur la possibilité de positionner un élément par rapport à la place qui lui est attribuée avec align. Par défaut, lorsqu'un élément est plus petit que l'espace dont il dispose, il va s'y placer au centre (align: 0.5 0.5). Exemple pour placer un élément en haut à gauche de l'espace lui étant alloué :

align: 0 0; // 0 pour 0 % et 1 pour 100 %

En ce qui concerne les propriétés liées au dimensionnement, on a le choix entre plusieurs éléments. Ci-dessous se trouvent trois des plus importants, en provenance de la documentation :

• fixed [longueur, 0 ou 1] [hauteur, 0 ou 1] : fixe ou non la longueur et la largeur de l'élément ;
• min [longueur, px] [hauteur, px] : fixe une taille minimale à l'élément (astuce : -1 pour ne pas fixer, 1 pour laisser Edje calculer la taille) ;
• max [longueur, px] [hauteur, px] : fixe une taille maximale à l'élément.

Pour le comportement face à un redimensionnement, on va plutôt utiliser aspect, le ratio entre la longueur et la hauteur, et aspect_preference, le comportement de redimensionnement (HORIZONTAL, VERTICAL ou BOTH). Ces deux propriétés sont liées. Exemple d'un rectangle se redimensionnant sur les deux axes tout en conservant ses proportions initiales :

collections { 
    group { 
        name: "interface"; 
        parts { 
            part { 
                name: "button"; 
                type: RECT; 
                description { 
                    state: "default" 0.0; 
                    aspect: 1.0 1.0; 
                    aspect_preference: BOTH; 
                } 
            } 
        } 
    } 
}

La documentation est suffisante pour comprendre comment définir un certain nombre d'éléments. Il peut tout de même s'avérer intéressant de s'arrêter sur les images afin de parler de certaines fonctionnalités en plus du type lui-même.

collections {
    group {
        name: "interface" ;
        images {
            image: "image_normal.png" COMP;
        }
        parts { 
            part { 
                name: "image"; 
                type: IMAGE; 
                description { 
                    state: "default" 0.0; 
                    aspect: 1 1; 
                    aspect_preference: BOTH; 
                    image { 
                        normal: "image_normal.png"; 
                    } 
                } 
            } 
        } 
    } 
}

Cela affiche l'image « image_normal.png » s'adaptant à l'écran tout en conservant son ratio d'origine.

#define IMAGE_NORMAL "image_normal.png" 
collections {
    group {
        name: "interface";
        images {
            image: IMAGE_NORMAL COMP;
        }
        parts { 
            part { 
                name: "image"; 
                type: IMAGE; 
                description { 
                    state: "default" 0.0; 
                    image { 
                        normal: IMAGE_NORMAL; 
                    } 
                } 
            } 
        } 
    } 
}

Le code identique avec l'utilisation d'une macro IMAGE_NORMAL, dans l'unique but d'informer que les macros existent et s'écrivent tout comme en C.

Afin d'utiliser une image, il est nécessaire de passer au préalable par images pour la définir :

images { 
    image: "image_normal.png" COMP;
}

Un certain nombre de formats sont supportés par Edje (JPEG, PNG, etc.), qui permet également une compression de l'objet image. COMP, utilisé dans l'exemple, correspond à une compression sans perte, RAW à aucune compression, LOSSY[x] à une compression de qualité x (x variant entre 0 et 100), comparable à la qualité JPEG, et USER à une image non intégrée au Edje, lue depuis le disque. Il est souvent préférable d'utiliser COMP plutôt que USER dans le sens où il est plus pratique de ne pas avoir à la charger depuis le disque.

Attention : dans le cas de la qualité RAW, il reste nécessaire de faire attention à la taille finale que peut avoir le fichier binaire.

Puisqu'il est question de compression, et donc de qualité, une question se pose : nous avons une image donnée que l'utilisateur peut redimensionner. Comment faire pour qu'elle ne soit pas floue pour les grands écrans ? Une réponse possible serait de joindre une grande image plutôt qu'une image de qualité moyenne. Dans ce cas, la question inverse se poserait : comment faire pour qu'il n'y ait pas de baisse de la qualité pour les petits écrans ? Edje propose une solution : set.

collections { 
    group { 
        name: "interface"; 
        images { 
            set { 
                name: "my_image"; 
                image { 
                    image: "image-32.png" COMP; 
                    size: 0 0 32 32; 
                } 
                image { 
                    image: "image-64.png" COMP; 
                    size: 33 33 64 64; 
                } 
                image { 
                    image: "image-128.png" COMP; 
                    size: 65 65 128 128; 
                } 
            } 
        } 
        parts { 
            part { 
                name: "image"; 
                type: IMAGE; 
                description { 
                    state: "default" 0.0; 
                    aspect: 1 1; 
                    aspect_preference: BOTH; 
                    image { 
                        normal: "my_image"; 
                    } 
                } 
            } 
        } 
    } 
}

Dans ce code, on définit un set d'images de différentes tailles, avec « my_image » comme valeur de la propriété « name ». Au moment de la définition de l'élément IMAGE, on va utiliser la valeur de la propriété « name » de notre set :

image { 
    normal: "my_image"; 
}

De là, Edje va déterminer quelle image choisir selon la taille de la fenêtre à l'exécution à l'aide des propriétés « size » de chaque image du set. Dans le cas où, lors de l'exécution, la taille de la fenêtre ne serait pas incluse dans l'intervalle des propriétés « size », l'image ayant un min-size à 0 sera utilisée jusqu'à la nécessité d'un changement menant à l'utilisation d'une autre image.

La solution des set d'images est très pratique pour éviter d'avoir à passer par une solution bien plus lourde telle que l'utilisation de SVG.

Tout ce qu'on a vu jusque-là est certes assez instructif, mais n'est pas vraiment impressionnant. Cette partie va donc donner l'occasion d'aborder un point que vous attendiez : les animations, les effets, et donc la gestion des évènements, tout cela dans un fichier de description Edje sans la moindre ligne de C.

On appelle « programme » une action effectuée par Edje, généralement en réponse à un signal (un clic de la souris, par exemple). Ces programs peuvent être intégrés à un group et effectuer diverses choses sur divers éléments, comme changer l'état d'un ou plusieurs éléments.

Voyons un exemple simple. On souhaite faire en sorte qu'un élément TEXT affiché à l'écran laisse sa place à un élément IMAGE lorsqu'on clique dessus, et inversement. Ainsi, nous allons devoir définir deux « programmes » : le premier correspondra à la réaction à un clic sur l'élément TEXT et le second à un clic sur l'élément IMAGE.

La méthode n'est pas très compliquée. Chacun des deux éléments, TEXT et IMAGE, va être doté de deux descriptions : une pour l'état par défaut et une autre pour l'état après un clic. Lorsque l'utilisateur va cliquer sur l'élément TEXT, le programme associé à cette interaction va changer l'état des deux éléments à l'état « après un clic » afin de repositionner l'élément TEXT hors de la fenêtre et de repositionner l'élément IMAGE à l'intérieur. Pour un clic sur l'élément IMAGE, l'action est réciproque.

collections { 
    group { 
        name: "interface"; 
        images { 
            image: "image.png" COMP; 
        } 
        parts { 
            part { // Notre élément TEXT
                name: "text"; 
                type: TEXT; 
                mouse_events: 1; 
                description { // État par défaut
                    state: "default" 0.0; 
                    text { 
                        text: "Cliquez ici !"; 
                        size: 12; 
                        font: "Sans"; 
                    } 
                } 
                description { // État clicked
                    state: "clicked" 0.0; 
                    inherit: "default" 0.0; 
                    rel1.offset: -1000 0; 
                } 
            } 
            part { // Notre élément IMAGE
                name: "image"; 
                type: IMAGE; 
                mouse_events: 1; 
                description { // État par défaut
                    state: "default" 0.0; 
                    max: 128 128; 
                    aspect: 1 1; 
                    aspect_preference: BOTH; 
                    image.normal: "image.png"; 
                    rel1.offset: -1000 0; 
                } 
                description { // État clicked
                    state: "clicked" 0.0; 
                    inherit: "default" 0.0; 
                    rel1.offset: 0 0; 
                } 
            } 
        } 
        programs { 
            program { // Programme déclenché par le TEXT
                name: "text_clicked"; 
                signal: "mouse,clicked,1"; 
                source: "text"; 
                action: STATE_SET "clicked" 0.0; 
                target: "text"; 
                target: "image"; 
            } 
            program { // Programme déclenché par l'IMAGE
                name: "image_clicked"; 
                signal: "mouse,clicked,1"; 
                source: "image"; 
                action: STATE_SET "default" 0.0; 
                target: "text"; 
                target: "image"; 
            } 
        } 
    } 
}

Avec la propriété mouse_events mise à 0, on dit qu'on n'accepte pas les événements de la souris, tandis qu'avec cette même propriété mise à 1, on dit qu'on les accepte. C'est pour cela que nos deux éléments ont la propriété définie à 1 :

mouse_events: 1; // On accepte les évènements de la souris

Note : par défaut, la propriété mouse_events est déjà à 1. L'intérêt de la définir à 1 dans le code n'a donc qu'une utilité, vous avertir que cela existe.

L'utilisation de la propriété inherit sur les descriptions clicked de nos éléments avec pour argument default est un moyen d'éviter de devoir écrire deux fois la même chose. Cela permet de dire à Edje « cette description a les mêmes propriétés et valeurs que la description default ». À partir de là, il ne nous reste plus qu'à placer les propriétés divergeant de l'état par défaut :

description { // Description de 
    state: "clicked" 0.0; // État clicked
    inherit: "default" 0.0; // Hérite de default
    rel1.offset: 0 0; // On change uniquement le placement
}

Dans chacun de nos programmes, nous définissons :

• name, le nom du programme ;
• signal, le signal qui va déclencher le programme ;
• source, le nom de l'élément source du signal (au plus, une seule source par programme) ;
• action, l'action à effectuer lors du déclenchement du programme ;
• target, la cible de l'action (il peut y avoir plusieurs cibles).

program { // Programme déclenché par le TEXT
    name: "text_clicked"; 
    signal: "mouse,clicked,1"; // Appelé par un clic de la souris
    source: "text"; // En provenance de l'élément TEXT
    action: STATE_SET "clicked" 0.0; // Change l'état à clicked
    target: "text"; // ... pour le TEXT
    target: "image"; // ... et pour l'IMAGE
}

Si vous testez ce code, vous vous rendez compte que l'image apparaît immédiatement après un clic sur l'élément TEXT, qui va quant à lui disparaître. Avec la propriété transition de chaque programme, on va pouvoir passer d'un simple effet à une petite animation, et cela en une seule ligne.

La propriété transition a la syntaxe suivante :

transition: TYPE paramètre;

Avec TYPE faisant partie des types de transition suivants :

• NONE ;
• LINEAR ;
• SINUSOIDAL ;
• ACCELERATE ;
• DECELERATE ;

Et paramètre correspondant au temps de transition en secondes. Plus la valeur passée sera élevée, plus l'animation sera longue.

Par exemple, si on met pour chacun de nos programmes :

transition: ACCELERATE 1;

On pourra voir une animation lors d'un clic sur l'image ou le texte. L'élément présent va sortir de l'écran en l'espace d'une seconde avec une vitesse s'accélérant, puis l'élément non présent va entrer dans l'écran par un effet identique.

Note : les actions des programmes ne se limitent pas aux simples changements d'état. À l'heure où j'écris cet article, un programme peut également envoyer un signal pouvant par exemple être capté et géré par le code C (nous verrons cela par la suite), ainsi que stopper l'exécution d'un autre programme.

Consulter la documentation des programmes Edje.

Notez avant tout que l'on peut aussi bien écrire des scripts Edje avec Embryo qu'avec du code LUA.

Edje est basé sur Evas pour la gestion des éléments graphiques, sur Ecore pour la gestion de tout ce qui concerne la boucle évènementielle et Eet pour tout ce qui concerne les opérations core. Il peut également utiliser Embryo pour utiliser les scripts dans une description de thème. Les scripts Edje fonctionnent en continuité avec les programmes. En réalité, ce sont les programmes qui les appellent par le biais de leur propriété script.

Afin de donner un aperçu des scripts avec Embryo dans un fichier de description Edje, on va remodeler l'exemple précédent pour appeler les programmes non pas avec la méthode énoncée plus haut, mais plutôt avec un script.

collections { 
    group { 
        images { 
            image: "image.png" COMP; 
        } 
        name: "interface"; 
        script { // Notre script
            public callPrograms() { 
                new buf[16]; 
                new Float:val; 
                get_state(PART:"text", buf, sizeof(buf), val); // Récupération de l'état dans buf
                if(!strcmp(buf, "default")) { // Si l'état de notre TEXT est default
                    run_program(PROGRAM:"hide_text"); // Appel du programme hide_text
                    run_program(PROGRAM:"show_image"); // Appel du programme show_image
                } 
                // Sinon :
                else { 
                    run_program(PROGRAM:"show_text"); // Appel du programme show_text
                    run_program(PROGRAM:"hide_image"); // Appel du programme hide_image
                } 
            } 
        } 
        parts { 
            part { 
                name: "text"; 
                type: TEXT; 
                mouse_events: 0; 
                description { 
                    state: "default" 0.0; 
                    text { 
                        text: "Cliquez ici !"; 
                        size: 12; 
                        font: "Sans"; 
                    } 
                } 
                description { 
                    state: "hidden" 0.0; 
                    inherit: "default" 0.0; 
                    rel1.offset: -1000 0; 
                } 
            } 
            part { 
                name: "image"; 
                type: IMAGE; 
                mouse_events: 0; 
                description { 
                    state: "default" 0.0; 
                    max: 128 128; 
                    aspect: 1 1; 
                    aspect_preference: BOTH; 
                    image.normal: "image.png"; 
                    rel1.offset: -1000 0; 
                } 
                description { 
                    state: "shown" 0.0; 
                    inherit: "default" 0.0; 
                    rel1.offset: 0 0; 
                } 
            } 
            part { 
                name: "event_handler"; 
                type: RECT; 
                mouse_events: 1; 
                description { 
                    state: "default" 0.0; 
                    color: 0 0 0 0; 
                } 
            } 
        } 
        programs { 
            program { 
                name: "show_text"; 
                action: STATE_SET "default" 0.0; 
                transition: ACCELERATE 1; 
                target: "text"; 
            } 
            program { 
                name: "hide_text"; 
                action: STATE_SET "hidden" 0.0; 
                transition: ACCELERATE 1; 
                target: "text"; 
            } 
            program { 
                name: "hide_image"; 
                action: STATE_SET "default" 0.0; 
                transition: ACCELERATE 1; 
                target: "image"; 
            } 
            program { 
                name: "show_image"; 
                action: STATE_SET "shown" 0.0; 
                transition: ACCELERATE 1; 
                target: "image"; 
            } 
            program { 
                name: "event_clicked"; 
                signal: "mouse,clicked,1"; 
                source: "event_handler"; 
                script { 
                    callPrograms(); 
                } 
            } 
        } 
    } 
}

Pour simplifier la gestion des signaux, on a utilisé un élément RECT invisible dont le rôle est de récupérer les signaux qui nous intéressent - ici, le signal clicked en provenance d'un clic de souris. À savoir que cette manière de récupérer les signaux est très utilisée. Par conséquent, nos éléments TEXT et IMAGE n'ont pas besoin de récupérer les évènements de la souris :

mouse_events: 0;

On peut noter que le code des scripts ressemble furieusement à du code C tel qu'on a l'habitude de l'écrire. Toutefois, la liste des fonctions pouvant être utilisées est assez restreinte. La documentation d'Embryo étant également assez limitée au moment où l'article est en train d'être écrit, la solution pour accéder à une liste exhaustive de ces fonctions est d'aller directement consulter les sources, donc le fichier edje_embryo.c.

Pour ce type d'usage, il n'est pas nécessaire d'utiliser un script. Par contre, dès qu'il s'agit de vérifier un état avec get_state, de définir le texte d'un élément avec set_text, etc. sans pourtant vouloir passer par du code C, les scripts forment une solution idéale.