Page MenuHomePhabricator

Edje Basics
Updated 3,285 Days AgoPublic

NOTE: I (@dresb) will write this, in fact, I already wrote most of it on the old wiki, I will simply copy, paste and rewrite some of it. Images included. The content will be basic and straightfoward. Link to the EDC Refrence.

The EDC File Structure

An Edje Data Collection, its a plain text file (normally identified with the .edc extension),consisting of instructions for the Edje Compiler.


The display and layout system uses an structure known as containers to layout the graphical elements to display. The syntax for the edje data collection files follows a simple structure of blocks { .. } that can contain properties: ..;, more blocks, or both.

Foundational Blocks


images {
  image: "filename_a.ext" RAW;
  image: "filename_b.ext" COMP;
  image: "filename_c.ext" LOSSY 99;

This block contains a list of image filenames and their compression method (if one is required).
Edje Image Compression method's:

  • RAW stores the image in raw format, note that this doesn't mean unmodified format, a RAW stored PNG will be uncompressed and stored as the raw image, thus your tidy 1K PNG may be stored as an 8K raw image.
  • COMP method will use lossless compression on your image.
  • LOSSY method will use lossy compression and is followed by an integer between 0 and 100, defining the quality level.

Every image used in the interface needs to be declared inside an images block first.
The image filenames should never contain an absolute directory structure since its supposed to be setup at compile time.


fonts {
  font: "filename1.ext" "fontname";
  font: "filename2.ext" "otherfontname";
  font: "filename3.ext" "yetanotherfontname";

This block contains a list of filenames representing a supported font type alongside an abstract name that will be used later in the theme. As with "images", the fonts directory structure can be changed at compile time.

Color Classes:

	name:  "colorclassname";
	color:  0-255 0-255 0-255 0-255;
        color2: 0-255 0-255 0-255 0-255;;
        color3: 0-255 0-255 0-255 0-255;

The color_classes block contains a list of one or more color_class blocks. Each color_class block allows the designer to pair up one color set with one abstract name, like "background" or "title text". The abstract name can be used later by the application to change the color values at runtime without having to update the theme file.


spectra {
  spectrum {
    name: "colorspectrumname";
    color: 0-255 0-255 0-255 0-255 1;
    color: 0-255 0-255 0-255 0-255 1;

The spectra block contains a list of one or more spectrum blocks. A spectrum block allows the designer to create a color spectrum of two or more colors, and label the combination with an abstract name for future reference by the gradient parts.


styles {
  style {
    name: "styleName"; 
    base: "generalStyleProperties";

    tag:  "tagName" "styleProperties";

The styles block contains a list of one or more style blocks, which allow the designer to set the properties for advanced text formatting.


collections {
  group {
  group {

This block must be unique in the EDC and its used to declare a list of group blocks (usually declared in different files to simplify readability).

Using multiple EDC files
Some interfaces can consist of a big number of groups and parts, in order to keep your data collections manageable, it's recommended to use multiple EDC files.
To use multiple EDC files, you need to use the #include keyword.
You can divide your main EDC file like this for example:

fonts {
#include "fonts.edc"

images {
#include "images.edc"

collections {
#include "collection1.edc"
#include "collection2.edc"

Compiling and Decompiling

The Edje Compiler is in charge of creating your Edje interface files, by compiling your EDC code, and compressing it alongside the images and fonts into a single ready-to-use file.

The compiler will normally be included inside your distribution's edje package under the edje_cc (compiler) name alongside the decompiler, named edje_decc.

Using the Compiler

Example file structure:


Example command:
Assuming we want to compile the main.edc and that we located inside "theme" on the example file structure, the command would look like this:

edje_cc -id images -fd fonts main.edc theme.edj

Which in generic terms minds:

edje_cc [OPTIONS] input_file.edc [output_file.edj]

This will create a file named theme.edj inside the "theme" folder, all you have to do now is load it into your program?.

Compiler Options

We can also use the compiler to override some of the settings in our [Edje Data Collection | EDC]] file.
Where OPTIONS is one or more of (edje_cc -h):

-w files.txtDump all sources files path into files.txt
-anotateAnotate the dumped files.
-id image/directoryAdd a directory to look in for relative path images
-fd font/directoryAdd a directory to look in for relative path fonts
-sd sound/directoryAdd a directory to look in for relative path sounds samples
-dd data/directoryAdd a directory to look in for relative path data.file entries
-td temp/directoryDirectory to store temporary files
-vVerbose output
-no-lossyDo NOT allow images to be lossy
-no-compDo NOT allow images to be stored with lossless compression
-no-rawDo NOT allow images to be stored with zero compression (raw)
-no-saveDo NOT store the input EDC file in the EDJ file
-min-quality VALDo NOT allow lossy images with quality < VAL (0-100)
-max-quality VALDo NOT allow lossy images with quality > VAL (0-100)
-Ddefine_val=toCPP style define to define input macro definitions to the .edc source
-fastcompUse a faster compression algorithm (LZ4) (mutually exclusive with -fastdecomp)
-fastdecompUse a faster decompression algorithm (LZ4HC) (mutually exclusive with -fastcomp)
-threadsCompile the edje file using multiple parallel threads (by default)
-nothreadsCompile the edje file using only the main loop

Part Types

Relative Size and Positioning

Transitions and Animations


Imported from
1 dresb 2010-02-16 13:49:57

Last Author
Last Edited
Nov 30 2013, 1:00 PM