Edje Programming Guide

This programming guide demonstrates the steps to write a basic EDC file, which can be used to apply a theme to an EFL application. You will learn about parts positioning and resizing as well as part animations.

Adding Elements Onscreen

Add a new part to the parts block.

Using Image

List the image in the images block. Make sure the part has type IMAGE and set the normal property in description.image.

Using the Same Color Definitions Across Multiple Elements

Define a color class and set the description.color_class property.

Positioning or Resizing a Part (Relative and Absolute Positioning)

Fill in the rel1 and rel2 structures inside the description bloc block.

Hiding Parts

Set the visible property to 0.

Animating Parts

Create several description blocks inside your part and give each of them a different state value. Set one description for the initial state and one for the end state.

Create a program with the action STATE_SET "end_state" 0.0; and a target with the name of the part. You can also set a non-default transition.

When defining the second description, inherit from the first part in order to re-use the values which are already defined.

The after property of the program block is used to trigger another program after the animation is done. It can be used to trigger another animation or to emit a signal to the C part of the program.

Making a Genlist Item Theme

Create a Group Block with one part element for each part that can be accessed from the C code, then set the items properties inside the group element:

items: "texts" "text_part_1 text_part_2";
items: "icons" "image_part_1 image_part_2";

On the C side, the text_get and content_get callback are called respectively with text_part_1 and text_part_2, and image_part_1 and image_part_2.

Edje Examples
Edje Basics Edje Nested Part (hierarchy) Swallow Swallow 2 Edje Text Table
Edje Color Class Edje Signals and Messages Box - basic usage Box - custom layout Draggable Parts Perspective
Edje Animations Multisense Edje basics 2 Edge Signals 2 Edje Animations 2

Further reading