—

—

# 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)

## Further reading ##

* [Edje Basic Concepts](/develop/legacy/program_guide/edje/basic_concepts)

* [Scaling Objects](/develop/legacy/program_guide/edje/scaling_objects)

* [Edje Swallow](/develop/legacy/program_guide/edje/edje_swallow) * [ELM Layout](/develop/legacy/program_guide/edje/elm_layout)

* [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)