Page MenuHomePhabricator

Eflete v.0.5.0
Updated 1,828 Days AgoPublic

Eflete - EFL Edje Theme Editor

What is Eflete?

Efl Edje Theme Editor is a rich graphical tool, that provide UI for edc markup.
It is aimed to simplify creation and editing widgets styles. No one, for sure, want to learn EDC syntax. Eflete was designed with mind, that target users are not just programmers but also designers. Besides styles Eflete is also able to create and edit custom layouts. This is useful feature for developers which creates applications layouts.

Eflete projects

There are a lot of already existed projects, which are use edc collections for theming or layouting. Or binaries, that compiled by edje_cc tool. For both cases Eflete has import wizards to help in converting existing files into projects, that supported by theme editor.
For new projects it is possible to select predefined widget styles. All widgets in list contains a sets of groups, that required by Elementary library. User is free to modify those styles.
It is possible to open existing project by File Selection tool. List of recently opened projects provides fast one- mouse-click selection interface.

NOTE: Eflete creates a specific file for each opened edj or edc-file. More precisely - for new project or imported file Eflete creates a folder with project name, than copy imported file and create specific file. This file has a .pro extension and Eflete used it for manipulations.

Editor operates with binary edj files, but for developers, source code is the must have thing. Of course Eflete support exporting of the currently editing project into the *.edc files. Also it can be standalone group inside project. The export features could be found in main menu by path: FileExport as edcGroup (or Project). It is also possible to export resources, that is used inside project (or group). There is a shell script can be found inside folder, where data was exported to. It builds edc source code back to the binary file.

Resource management

Usually themes and layouts use a lot of images. Sometimes sounds, tones, fonts and other resources. Theme Editor include few manage tools, that provide natural way to add, delete or edit existed resources. It is also gives fast access to resource preview with additional info. Images, sounds, colorclasses and textblock style manager tools are represented as a pinned tabs.

Images and sounds could be added into project by using file selection dialog (it is possible to add a few files at the same time by holding Shift button and selecting necessary files in a dialog). Images preview and info block (file name, format, resolution, etc.) will be displayed on selection. Also list of styles which are used in selected images will be shown. Sound resources import is mostly same. Simple media player is used instead visual preview.

Next two tools used to manage internal text resources. First is a textblock style manager. All attributes being used inside textblock can be edited here. Tree-view for styles navigation and tags are very user-friendly. It's possible to create new styles and tags. Search bar will help to deal with huge amount of applied styles, which is impossible to handle manually. Another useful feature - changeable color of background preview. Simply change it by switching between colors preview at the bottom of manager view. Second text resource manager responsible for manipulation with colorclasses values. It has mostly the same controls as in TextblockStyle manager.


All navigation controls are represented by a tree-view lists. There are two main areas: groups and parts/programs lists.
The list of groups are placed on the left side of Eflete and holds all groups from loaded project. Items sorted alphabetically. On the top of navigation bar placed two icons, that provides ability to add new group into project or delete currently existing. In case of adding new group, simple dialog wizard will be shown. It will set name for new group and chose source group if it is required to create copy or alias.

Groups list structure is based on splitting group name by tokens, that separated one from another by '\' character. What kind of benefit from this way? For example take the default Elementary theme. This theme contain a lot of groups with styles for elementary widgets and styles for the E20 environment. By splitting root tokens from widget styles (for example: elm/check/base/default), all groups related to Elementary can be organized below "elm" entity. Next level of splitting will be widgets name (for example elm/check/base/default). And finally leafs of this tree will be styles names (for example elm/check/base/default). At the same time another root entity with name "e" will exist inside the groups navigation bar. There are two branches, that are visually separated, but still exists inside the same project.
For comfortable visual navigation tree leafs has "document" icon and nodes are represented by a "folder" icon.

If it is all so good with groups organization, then what about parts and programs inside groups? Eflete provides navigation bar for primitives, that are stored inside groups. The primitives are Parts and Programs. They are placed on the right side of main work area as two root nodes. Controls, that placed at the top of navigation bar, makes possible to add new primitives or change order of parts inside group. Press ADD button to see listed names of primitive types (part, state, item and program). Depending on selected context, some of entities might be disabled. For example: to add new state for existing part - select part name in list. Than, special wizard will guide you thru adding new primitives with necessary attributes, according to type of selected primitive.
By selecting primitive item in list - attributes properties will be updated. By double-click on state name, user is able to switch Parts state. New state will be updated workspace view.

NOTE: to explore tree - double-click on node or press on "right arrow" icon.


Finally the main work area. Workspace is placed in the middle of Eflete window. It enables visual representation of group being edited. Many groups can be opened at the same time. The tab bar, placed above the workspace area, is used for switching between workspaces.
Each workspace has its own background color. There are 3 predefined colors (black, white and "chess"). Click one of the color buttons, that placed at the bottom of workspace to change it.
Size of previewed group can be changed by container border. It has a small rectangle in the right bottom corner - use it to change size via mouse. Another way is to usage spinners, they are placed on the same line as a color buttons.
There are 3 possible behaviors, that can be demonstrated by workspace component: normal, code and demo. Lets describe them one by one.

Normal mode.
This mode is used to manipulate with group primitives on the development stage. All parts are represented on the workspace, including containers and spacers. Each of the non-visible primitives types has their own pattern and color. This makes possible to understand markup of group and dependencies between primitives. Text parts are bordered, this shows area from left top to right bottom corners. Also for a texts sets part name as a content.
Ability to select primitives directly on workspace presented here, of course still possible to select parts inside the part navigation panel. Selected part covered by the resizing control element, that change maximum size of primitive.

Demo mode.
In comparing with a Normal mode where happens all implementation process, the Demo mode is the best way to see result. Objects that displayed in this mode will looks same as in runtime application.
It is possible to type text into texts part or to set container parts content. Predefined widgets (button, check, slider, enty, progress bar) can be uses as content. Also it is can be a simple rectangle or an image, that stored in filesystem. It is possible to set different colors and minimum/maximum sizes for content. All this things requires adoption of demonstration view as closely as possible to real environment and context.
Of course this is not all about Demo mode. One more useful feature - ability to emit signals into the object. When programs inside group are created they will be good to check reaction of the object on those signals. List of signals, that are possible to emit is exclude programs that depends from mouse events, because it is easier to click (or mouse in/out, double click and etc) on real object.

IMPORTANT: Most of all Elementary widgets will be loaded as fully functional widgets. It means that behavior of the loaded widget is depends on Elementary source code. Group will be loaded as usual layout in cases when this group is not a Elementary widget style or still unsupported widget. List of supported widgets for a demo mode will be shared later.

Code mode.
It is mostly same as a Normal mode, except that it will display memo with Edc source code of currently editing group. Same code can be received by exporting current group into Edc project (FileExport as edcGroup). Source code view supporting syntax highlighting and refreshing code accordingly to changes in the editing group.

NOTE: Right now this mode is only for viewing code. As one of the big features planned to support Enventor library as a backend for edit group edc code directly. It should support most of features from Enventor.


Because Eflete is a editor tool, it means that managing changes is a necessary. For each group separated change history is stored. To discover changes list, open tab "History" in the right part of main screen. Of course hotkeys Ctrl+Z (for undo) and Ctrl+Y (for redo) exists and works, but user is able to undo or redo changes by clicking mouse on necessary item in the history list. Only group changes will be stored in history, all that related to other modules (like image manger or textblock styles manager) will be not stored.

Youtube channel

Source Download


efl and elementary v1.17.0


make && make install


Last Author
Last Edited
Aug 1 2016, 8:17 AM