Introduction to EDC Programming

An EDC (Edje data collection) file is a text file that contains the code describing the position, size, and other parameters of graphical elements that compose the visual aspect of your application. In addition to graphical elements, it can also handle sounds. EDC is a description language where the objects of an interface are described by using a text description.

The EDC file has the .edc file extension. The syntax for the EDC files follows a simple structure of blocks that can contain properties and more blocks. For more information on the blocks and their content, see the extensive language references included in the EDC Reference documentation.

Writing a Simple EDC File

The following example shows the basic structure of an EDC file:

collections 
{
   group 
   {
      name: "my_group";
      parts {}
      programs {}
   }
}

An EDC file is a collection of groups that contain parts and programs:

A group can define the content of the entire screen of your application, or some smaller section of it. The group is identified with a name.
The parts within the group correspond to the graphical elements on the screen. Each part can have several states that describe a specific position, size, and visual aspect of the element.
The programs within the group contain the program code related to the graphical elements, such as interaction with the main application through signals. Animations are also defined within a program (for example, changing a part state using an animated transition).

The state of the part is defined in the description field:

part
{
   description 
   { 
      state: "default" 0.0;
   }
   description 
   { 
      state: "state1" 0.0;
   }
   description 
   { 
      state: "state2" 0.0;
   }
}

The following example shows an EDC file that contains only 1 part and 1 program. The part is a rectangle with a blue state and a red state, and the program changes the state from blue to red when the user clicks the rectangle:

collections 
{
   group 
   {
      name: "example";
      parts 
      {
         // Create the part
         part 
         { 
            name: "rectangle";
            // Set the type to RECT (rectangle)
            type: RECT;
            // Default state (blue color)
            description 
            { 
               state: "default" 0.0;
               align: 0.0 0.0;
               // Blue color
               color: 0 0 255 255;
            }
            // Second state (red color)
            description 
            { 
               state: "red" 0.0;
               align: 0.0 0.0;
               // Red color
               color: 255 0 0 255;
            }
         }
      }
      programs 
      {
         // Create a program
         program 
         { 
            name: "change_color";
            // The program is triggered on a mouse click
            signal: "mouse,clicked,*";
            source: "*";
            // Set the red state of the "rectangle" part
            action: STATE_SET "red" 0.0;
            target: "rectangle";
         }
      }
   }
}

The program is triggered when a signal arrives from a specific source (in the above example, all the sources are taken into account). When launched, the program does the action (changing the part state) on the target (the rectangle).

Compiling the EDC File

An EDC file needs to be compiled into a .edj file using the Edje library tools. After compiling, the .edj file can be used by a native Tizen application.

The following example shows how to compile the helloworld.edc file to create a helloworld.edj file using the edje_cc tool:

$ edje_cc helloworld.edc

The EDC file can use external files, such as sounds, images, or fonts. The path to these resources is passed to the edje_cc tool so that they are included in the final .edj file:

$ edje_cc -sd $SOUNDS_DIR -fd $FONTS_DIR -id $IMAGES_DIR

The SOUNDS_DIR, FONTS_DIR, and IMAGES_DIR are the paths for the sound, font, and image resources.

The Tizen SDK automatically calls the edje_cc tool during the project building, if it finds an EDC source file in the ./res/edje/ directory.

The following Tizen SDK compilation log extract shows that if your EDC file uses images, they must be copied to the ./edje/images directory. Fonts and sounds go to the ./edje/fonts and ./edje/sounds directories. The SDK builds the helloworld.edj file in the ./res/edje/ folder.

Building file: ../res/edje/helloworld.edc
Invoking: EDC Resource Compiler
edje_cc -sd ../edje/sounds -fd ../edje/fonts -id ../edje/images ../res/edje/helloworld.edc ../res/edje/helloworld.edj

Tips for Using EDC Blocks

See the following tips for using EDC blocks:

To add an element on the screen:
Add a new part inside the parts block.
To use an image:
List the image in the images block, make sure the part has the IMAGE type, and set the normal property inside the description.image of the part.
To use the same color definitions across multiple elements:
Define a color class and set the description.color_class property.
To position and resize a part with relative and absolute positioning:
Fill in the rel1 and rel2 structures inside the description block of the part.
To hide a part:
Set the visible property inside the description block of the part to 0.
To animate a part:
1. Create several description blocks inside the part, and give each of them a different state value. Set 1 description for the initial state and 1 for the end state.
2. Create a program with an action that is STATE_SET end_state 0.0; and with a target that is the name of the part. You can also set a non-default transition.
3. When defining the second description, inherit from the first part in order to re-use the values which are already defined.
4. 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.
To make a genlist item theme:
Create a group with one part for each list item part that can be filed from the C code and set the items properties inside the group:
```
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() callbacks are called respectively with text_part_1 and text_part_2, and image_part_1 and image_part_2.

To use the image masking effect:

EDC files support an image masking effect that applies the transparency of a mask image to a content object.

Figure: Masking effect

Masking effect

To use the image masking effect, add 2 new part blocks inside the parts block to be used as content and mask. Set the mask using the clip_to property in the content part.

part 
{
   name: "bg";
   type: RECT;
   description 
   {
      state: "default" 0.0;
   }
}
part 
{
   name: "text";
   type: TEXTBLOCK;
   clip_to: "mask";
   description 
   {
      state: "default" 0.0;
      align: 0.5 0.5;
      text 
      {
         style: "text_style";
         text: "TEXT<br>WITH<br>MASK";
      }
   }
}
part 
{
   name: "mask";
   type: IMAGE;
   description 
   {
      state: "default" 0.0;
      image.normal: "mask.png";
   }
}

The content part is cropped off in the mask shape, which depends on the alpha value per pixel. The content part type can be almost anything in the EDC files, but the mask part type can only be IMAGE.

Note
Except as noted, this content is licensed under LGPLv2.1+.