J’espère qu’il vous permettra également de vous faire comprendre comment Edje peut vous aider dans le développement de vos interfaces graphiques, et de considérer cette technologie comme l’un des outils les plus puissant des EFL plutôt que comme votre plus grand cauchemar.

Comment ?

En séparant la logique et le code d’une part et l’interface d’une autre, vos interfaces graphiques peuvent gagner en flexibilité.

Comme exemple concret permettant d’illustrer cette présentation, j’ai choisi le développement d’une interface (tactile) très simple.
Voici à quoi ressemblera l’interface à la fin de ce tutoriel :

Introduction

Edje est une des briques de base des EFL. Elle vous permet de décrire une interface graphique sans écrire une seule ligne de C. Ce qui permet, de facto, de réaliser l’une des choses les plus complexes lors du développement d’un programme avec une interface utilisateur : la séparation de l’interface et du code. Cette séparation est importante à plus d’un titre. Elle permet, d’une part, d’avoir la logique du programme et la gestion des données d’un côté et l’interface utilisateur de l’autre ; elle permet donc d’avoir deux équipes distinctes qui travaillent sur le projet, les graphistes, designers, ergonomes et les développeurs.

Parler de « Edje », c’est employer un terme générique pour trois concepts différents :

• le format de description, le format EDC, pour Edje Data Collection,
• le fichier binaire EDJ, résultante compilée de toutes les ressources décrites dans le fichier EDC,
• la bibliothèque de fonctions libedje.so, permettant de manipuler les objets décrits dans le EDC au niveau d’Evas.

Le schéma ci-dessous montre à quel moment ces trois concepts sont utilisés lors de la création d’une application utilisant Edje :

Edje Workflow

Les Bases

Dans cette partie, nous allons voir les bases du langage de description EDC.

Un fichier EDC (Edje Data Collection) minimal ressemble à ceci :

collections {
group {
name: "interface";
parts {
/* Rectangle Rouge */
part {
name: "Rectangle";
type: RECT;
description {
state: "default" 0.0;
color: 255 0 0 255;
}
}
}
}
}

Nous pouvons voir dans cet exemple le mot clef « collection » qui comme son nom l’indique est un ensemble. Pour un fichier Edje, c’est un ensemble de « groupes ».
Dans cet exemple nous avons un seul groupe, nommé « interface ».
Un groupe est lui-même un ensemble, et représente un objet, qui pourra être manipulé sur le canevas graphique plus tard dans notre programme ou réutilisé dans le fichier EDC.
Un groupe contient des « parts » qui sont les primitives que sait manipuler Evas.
Voici une liste exhaustive des « parts » que nous pouvons utiliser :

• les rectangles : RECT,
• les images : IMAGE,
• les textes : TEXT,
• les blocs de texte : TEXTBLOCK,
• les conteneurs : SWALLOW,
• les groupes : GROUP,
• les boites : BOX,
• les tables : TABLE,
• les objets externes : EXTERNAL.

Chaque type fera l’objet d’une étude plus approfondie dans la suite de ce tutoriel.

Dans notre exemple nous décrivons donc un Rectangle rouge, rien de bien original. Nous allons maintenant compiler ce fichier EDC en un fichier binaire EDJ :

edje_cc tut01.edc

Si la compilation a réussi, nous devrions trouver un fichier tut01.edj dans notre répertoire. Comme nous l’avons vu un peu plus haut, ce fichier EDJ doit être chargé par notre programme pour pouvoir être affiché. Dans un premier temps nous allons donc utiliser un outil très pratique proposé par Edje : edje_player.

edje_player tut01.edj

Et voici le résultat : un rectangle rouge affiché à l’écran ! Oui je sais, ça fait rêver… Les EFL sont vraiment une technologie qui permet de faire des choses hallucinantes…
Et je demanderai que tous ceux qui n’ont pas la chair de poule à ce moment précis arrêtent tout de suite la lecture !
Dans les prochaines articles nous verrons comment développer une interface (tactile) simple, qui nous permettra d’appréhender les différents concepts de Edje par la pratique.

À bientôt donc pour de nouvelles aventures… et merci pour la lecture de cette mise en bouche.

Extension composite, Compositeur

Oui, bon, j’y comprends rien, là, tu me parles d’un trucchose composite et…j’y comprend rien. Une explication serait la bienvenue.

Pas de panique. Il n’y a pas le feu(si vous en êtes à installer ça, c’est bien que vous avez du temps à perdre :P ).

X11, Xorg, ses extensions

Je vous passe les détails sur l’histoire de X11 et ses prédécesseurs, parce que je vais vous embrouiller avec tout ça, et ce n’est pas vraiment mon but(pour les curieux allez en bas de l’article…).
Le projet X11 dans ce nom avait commencé au sein du MIT, car, l’un des deux fondateurs avait besoin d’un système graphique pour déboguer le systeme Argus(ne me demandez pas ce que c’est), dans le courant de l’année 1984. X1 était né. Le développement était rapide et aboutissait à quelque chose de correct en 1985 avec X9. Il était le seul système de fenètrage qui affichait une certaine indépendance vis à vis de quelquonque vendeur. Le 15 Septembre 1987, c’était le désormais largement utilisé X11 qui sortait…il y a quand même 20 ans d’aujourd’hui. Et il est toujours en vogue.

X11, c’est le protocole. Il faut une Implémentation.

La plus utilisée en ce moment est Xorg.

Xorg supporte des extensions.
Ces extensions sont des ajouts de code servant à lui ajouter des fonctionnalités.

L’extension composite

Cette extension à un rôle simple: permettre à une application de «voir» le contenu d’une fenêtere et/ou de le modifier avant son affichage.

Compositeur

Le rôle d’un compositeur dans notre cas, c’est d’utiliser l’extension composite pour faire des tas de choses avec cette fameuse(fumeuse) extension composite.

Bling

Bling c’est le compositeur que nous allons utiliser.
Bling est un projet démarré par l’équipe d’enlightenment en vue de créer un compositeur entièrement basé sur les EFLs(ce qui veut dire que vous n’aurez pas à installer quelqu’autre dépendance). Pour le moment il ne gère que les transparences et les ombres mais prévoit aussi d’autres fonctionnalités selon sa TODO-list

Installation de Bling

cd e_modules/bling/
./autogen && make && make install

Allez dans le pannau de config des modules et activez bling.

:D

Vous voulez vos étagères transparentes?

Vous l’avez sans doute remarqué…si vous mettez un shelf transparent en avant-plan, vous n’obtiendrez pas grand chose.

Mais…avec une version de Enlightenment depuis le 13 novembre à 07:26 vous pouvez faire en sorte que vos shelves utilisent l’extension composite:

enlightenment_remote -use-composite-set 1

Références, liens externes

• L’histoire de X[en]: http://en.wikipedia.org/wiki/X_Window_System#History
• Elucence, un autre compositeur, mais que je n’ai pas réussi à faire fonctionner[en]: http://edevelop.org/node/2394
• Site de son auteur[en]: http://rabinath.org/
• Video de bling au pif: http://youtube.com/watch?v=ZovBpvhZbZM

Pour profiter des dernières versions de E17, un membre de la communauté anglophone tient un repo à jour et dès qu’une nouvelle version voit le jour il fait très vite le nécessaire pour que nous puissions en profiter aussi vite que possible. La démarche est très simple, suivez ce mini-howto ;-)

Repository

Ajoutez ce repo à votre fichier pacman.conf

$ sudo vi /etc/pacman.conf

# E17
[takhis]
Server = ftp://takhis.net/arch

# E17 for PPC
[takhis]
Server = ftp://takhis.net/arch/powerpc

Il est important de mettre ces repos avant [Community] pour éviter les conflits. Ensuite n’oubliez pas de mettre à jour vos repos :

$ sudo pacman -Sy

Installation

Vous pouvez commencer l’installation de e-cvs, e_modules-cvs :

$ sudo pacman -S e-cvs e_modules-cvs

Entrance

Accessoirement Entrance, le gestionnaire de démarrage de E :

$ sudo pacman -S entrance-cvs

Pour qu’ Entrance soit lancé à chaque démarrage, ajoutez le à votre fichier rc.conf:

$ sudo vi /etc/rc.conf

Cherchez la ligne suivante : DAEMONS=()

DAEMONS=(syslog-ng network nvidia netfs @alsa entranced)

Ajoutez entranced pour que celui-ci se lance à chaque démarrage.

Conclusion

Vous êtes un Archer et vous buvez de l’eau ! Bienvenue chez nous -_-
Si vous avez des questions, commentaires, réactions, … N’hésitez pas à réagir à l’article via les commentaires.

Pour éviter d’utiliser une carte video, certains ont codé des programmes pour faire ce boulot.

Mais j’avais essayé auparavant xvidcap, istanbul, byzanz et camstudio(à travers wine), et aucun de ceux-là n’a fonctionné correctement.

Jusqu’à ce que je découvre… enthrall (mode téléachat inside™)

Ne croyez pas que j’en parle ici par hasard.
Ça fonctionne grâce aux EFLs.

Il est assez simplet, mais fonctionne bien et rapidement…par contre je n’ai pas réussi à en faire grand chose avec un compositeur activé ou une application en 3D.

Mais passons maintenant à son installation…

edit: ah ça marche avec composite, et c’est même plus simple :)

Installation

1. Pour l’installer, allez à l’endroit où vous avez fait une copie du cvs d’enlightenment(chez moi ~/e17cvs)
   cd e17cvs/
2. Allez dans misc/enthrall/src/
   cd misc/enthrall/src/
3. Le train-train habituel
   make && sudo make install

Voilà pour son insallation.

Utilisation

$ enthrall --help
enthrall 0.0.2
Usage: enthrall
[options] Options:
-f, --fps=FPS frames per second (1-50, default: 25)
-o, --output-file=F output file
-p, --pointer=FILE path to pointer image file
-q, --quality=QUALITY video quality (0-100, default: 90)
-w, --window=WINDOW window to grab

les arguments requis sont -o et -w

pour récupérer l’id d’une fenetre, on peut utiliser le programme xwininfo(installez-le à l’aide de votre gestionnaire de paquets)

ouvrez un terminal et tappez xwininfo

$ xwininfo
xwininfo: Please select the window about which you
would like information by clicking the
mouse in that window.

Puis cliquez sur la fenêtre à capturer. Si vous voulez tout prendre, prenez comme id: 0x5d (the root window)
et il vous donne un foullis d’infos à propos de cette fenêtre

xwininfo: Window id: 0x1800005 "Terminal" Absolute upper-left X: 567
Absolute upper-left Y: 60
Relative upper-left X: 0
Relative upper-left Y: 0
Width: 564
Height: 340
Depth: 32
Visual Class: TrueColor
Border width: 0
Class: InputOutput
Colormap: 0x1800003 (not installed)
Bit Gravity State: ForgetGravity
Window Gravity State: NorthWestGravity
Backing Store State: NotUseful
Save Under State: no
Map State: IsViewable
Override Redirect State: no
Corners: +567+60 -149+60 -149-624 +567-624
-geometry 80x24+566+40


Voyez ce que j’ai mis en gras italique? C’est cela que nous cherchons.

Il ne vous reste plus qu’a faire

enthrall -w 0x600008 -o monbureau.ogg en remplaçant 0x600008 par ce qu'il vous a donné.Ah oui, ce que je ne vous avait pas dit tout à l’heure c’est qu’il encode directement en ogg à vitesse réelle s’il vous plaît!

Une fois que vous avez montré les joies de votre bureau enluminé…appuyez simultanément sur [ ctrl ] et [ C ] dans le terminal où vous l’avez lancé pour arrêter l’enregistrement.

Et voilà :D

Petite astuce: Pour vous souvenir du -o, pensez à l’argument -o de gcc ;)

Récupération des sources depuis le cvs.

$ cvs -z3 -d :pserver:anonymous@anoncvs.enlightenment.org:/var/cvs/e checkout e17

$ cvs -z3 -d :pserver:anonymous@anoncvs.enlightenment.org:/var/cvs/e checkout e_modules

Si vous voulez parcourir le cvs de e17, rendez-vous à cette adresse : http://e.kevb.net/cgi-bin/viewcvs.cgi/e17/

Précompilation ?Vous désirez compiler le cvs ? Il vous faudra plusieurs librairies et applications supplémentaires. Installez les dépendances suivantes :

• m4
• autoconf
• automake (1.7 ou plus récente)
• libtool
• pkg-config
• texinfo
• gettext

Ensuite, je vous suggère d’ajouter le path où seront installées les applications et librairies de enlightenment 17. Pour cela, exécutez cette commande dans un shell :

passez en root
$ echo "/usr/local/lib" >> /etc/ld.so.conf
$ ldconfig

Compilation des librairies

A ce moment là, il vous faut compiler les librairies dans le bon ordre que voici :

• 1. e17/libs/imlib2
• 2. e17/libs/edb
• 3. e17/libs/eet
• 4. e17/libs/evas
• 5. e17/libs/ecore
• 6. e17/libs/epeg
• 7. e17/libs/embryo
• 8. e17/libs/edje
• 9. e17/libs/epsilon
• 10. e17/libs/esmart
• 11. e17/libs/emotion (depend de xine-lib – version 1.1.1 maintenant !)
• 12. e17/libs/etox (utile uniquement pour e_utils)
• 13. e17/libs/ewl
• 14. e17/libs/engrave (utile seulement si vous désirez installer erss)

Les commandes pour compiler le cvs sont les suivantes,

$ cd e17/libs/la_librairie
$ ./autogen.sh (--options) (inutile, laissez ./autogen.sh si vous ne savez quoi mettre)
$ make
en root à présent,
$ make install

Poursuivez cette même démarche pour toutes les libraires dont vous avez besoin, ou pour toutes celles présentes sur le cvs.

Compilation des application

Les principales applications à compiler sont les suivantes :

• e17/apps/entice
• e17/apps/entrance
• e17/apps/e_modules
• e17/apps/e_utils
• e17/apps/elicit
• e17/apps/eclair
• e17/apps/e
• e_modules/calendar
• e_modules/flame
• e_modules/monitor
• e_modules/mount
• e_modules/rain
• e_modules/rss
• e_modules/screenshot
• e_modules/slideshow
• e_modules/snow
• e_modules/tclock
• e_modules/weather

Pour la compilation des applications vous devez procéder de la même manière que pour les librairies, c’est à dire :

$ cd e17/apps/l'application
$ ./autogen.sh (--options) (inutile, laissez ./autogen.sh si vous ne savez quoi mettre)
$ make
en root à présent,
$ make install

Voilà, à présent tout est installé et prêt à être utilisé!

TODO :

• configuration système, ld, ect…
• configuration avec options pour autogen.sh
• xsession