---
~~Title: Edje Programming Guide~~
~~NOCACHE~~
---

# 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](/develop/legacy/program_guide/edje/part_block).

## Using Image  ##

List the image in the [images block](/develop/legacy/program_guide/edje/edje_bloks#Image_Block). Make sure the [part](/develop/legacy/program_guide/edje/part_block) has type ``IMAGE`` and set the normal property in [description.image](/develop/legacy/program_guide/edje/part_block#Image).

## Using the Same Color Definitions Across Multiple Elements ##

Define a [color class](/develop/legacy/program_guide/edje/edje_bloks#Color_classes_Block) and set the [description.color_class](/develop/legacy/program_guide/edje/part_block#Description) property.

## Positioning or Resizing a Part (Relative and Absolute Positioning) ##

Fill in the [rel1 and rel2](/develop/legacy/program_guide/edje/part_block#Rel1) structures inside the [description bloc](/develop/legacy/program_guide/edje/part_block#Description) block.

## Hiding Parts ##

Set the [visible property](/develop/legacy/program_guide/edje/part_block#Description) to 0.

## Animating Parts ##

Create several [description blocks](/develop/legacy/program_guide/edje/part_block#Description) inside your [part](/develop/legacy/program_guide/edje/part_block) 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](/develop/legacy/program_guide/edje/program#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](/develop/legacy/program_guide/edje/part_block#Description), inherit from the first part in order to re-use the values which are already defined.

The after property of the [program block](/develop/legacy/program_guide/edje/program#Program) 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](/develop/legacy/program_guide/edje/group_block) with one [part element](/develop/legacy/program_guide/edje/part_block) for each part that can be accessed from the C code, then set the items properties inside the group element:

```c
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](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/Example_Edje_Basics.html) | [Edje Nested Part (hierarchy)](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_nested.html) | [Swallow](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_swallow.html) | [Swallow 2](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_swallow2.html) | [Edje Text](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_text.html) | [Table](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_table.html) |
| [Edje Color Class](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_color_class.html) | [Edje Signals and Messages](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/Example_Edje_Signals_Messages.html) | [Box - basic usage](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_box.html) | [Box - custom layout](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_box2.html) | [Draggable Parts](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_drag.html) | [Perspective](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_perspective.html) |
| [Edje Animations](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_animations.html) | [Multisense](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_multisense.html) | [Edje basics 2](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_basic2.html) | [Edge Signals 2](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_signals_2.html) | [Edje Animations 2 ](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_animations_2.html) 

## Further reading ##

* [Edje Basic Concepts](/develop/legacy/program_guide/edje/basic_concepts)
  * [What is an EDC File?](/develop/legacy/program_guide/edje/basic_concepts#What_is_an_EDC_File?)
  * [Compiling EDC Files](/develop/legacy/program_guide/edje/basic_concepts#Compiling_EDC_File)
  * [Writing a simple EDC File](/develop/legacy/program_guide/edje/basic_concepts#Writing_Simple_EDC_File_)
  * [Animating Theme Using Programs](/develop/legacy/program_guide/edje/basic_concepts#Animating_Theme_Using_Programs)
  * [Positioning Basic Parts](/develop/legacy/program_guide/edje/basic_concepts#Positioning_Basic_Parts)
  * [Adding Offset to Relative Positioning](/develop/legacy/program_guide/edje/basic_concepts#Adding_Offset_to_Relative_Positioning)
  * [Calculating Edje Object Total Size](/develop/legacy/program_guide/edje/basic_concepts#Calculating_Edje_Object_Total_Size)
  * [Using Edje Size Hints](/develop/legacy/program_guide/edje/basic_concepts#Using_Edje_Size_Hints)
* [Scaling Objects](/develop/legacy/program_guide/edje/scaling_objects)
  * [Part Scaling](/develop/legacy/program_guide/edje/scaling_objects#Part_Scaling)
  * [Using Image Set](/develop/legacy/program_guide/edje/scaling_objects#Using_Image_Set)
  * [Resizing Borders](/develop/legacy/program_guide/edje/scaling_objects#Resizing_Borders)
* [Edje Swallow](/develop/legacy/program_guide/edje/edje_swallow)
* [ELM Layout](/develop/legacy/program_guide/edje/elm_layout)
  * [Adding Layout](/develop/legacy/program_guide/edje/elm_layout#Adding_Layout)
  * [Signals](/develop/legacy/program_guide/edje/elm_layout#Signals)
* [Edje Blocks](/develop/legacy/program_guide/edje/edje_blocks)
* [Group Blocl](/develop/legacy/program_guide/edje/group_block)
* [Part Block](/develop/legacy/program_guide/edje/part_block)
* [Program](/develop/legacy/program_guide/edje/program)
* [Edje API](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/edje_main.html)
* [Edje Data Collection reference](https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/edcref.html)