Using Edje to preview your GUIs

Judging by the previous chapters, you should have reached the conclusion that Edje accomplishes a lot. What more could you ask from Edje? This question is easily answered. A GUI previewer for debugging and inspecting your Edje (.edj) themes.

You might have come across with Glade or QT Designer/Builder. These tools allow you to create your interface in a natural way by dragging components onto your application and setting their properties from dialogs. The only code that remains is the functionality. Such a tool would not really work with Edje, since the power of Edje is found in dynamic interfaces with components that move around and change their appearance. A visual GUI builder would work for EWL/ETK, the toolkit part of the EFL libraries.

Edje provides you with something more straightforward. A way to preview .edj files. Without writing a single C line of code in an executable you can launch the edje executable passing as argument the name of an .edj file. You will get an instant preview of the interface. See the figure below. You can resize the interface to your liking. Clicking, dragging, and scrolling works as in the finished application, but of course all signals go nowhere so you cannot get any functionality.

Figure 4.11. Preview an Edje Theme.

Preview an Edje Theme.

This preview program works really well for both themers and developers alike. Themers who have an existing application and change its theme (the .edj) file can concentrate on the interface and not on the application. Changing bit by bit the application theme they can preview it in a simpler way (decoupled from the application) so that they are sure that it works as expected. When finished they can run the application and see how their interface works once deployed.

The Edje preview program allows one to view individual groups inside an Edje file. So instead of loading a really big application every time they are changing the theme and going to a deep level menu in order to find what they have changed they can instantly preview only the interface part they are interested in.(Provided the application programmer has split the interface into many groups).

For developers, Edje debugging becomes easier with the Edje previewer. Apart from the fact that they can construct and test the interface without writing any C code, the Edje previewer has one additional benefit. Once you load the interface and start playing around with it, Edje will print on the console which signals are emitted while you are clicking around. You can see exactly which part of the interface receives the event and what event it actually handles. Then you can write your C code accordingly. That is, the Edje previewer tells you exactly what events you need to capture (and register callbacks) in order to respond to user actions. The next figure shows this:

Figure 4.12. Live signal testing in Edje.

Live signal testing in Edje.

Nothing more needs to be said here. The Edje previewer provides you with live testing for your themes/Interfaces.