~~Title: Edje Programming Guide~~ {{page>index}} ===== Edje Programming Guide ===== This programming guide shows you how to write an EDC file that can be used to theme a EFL application. It describes concepts about parts positioning and resizing. It also explains part animations that can be done through programs. === Table of Contents === * [[/develop/legacy/program_guide/edje/basic_concepts|Basic Concepts]] * [[/develop/legacy/program_guide/edje/basic_concepts#What_is_an_EDC_File?|What is an EDC File?]] * [[/develop/legacy/program_guide/edje/basic_concepts#Compiling_EDC_File|Compiling EDC File]] * [[/develop/legacy/program_guide/edje/basic_concepts#Writing_Simple_EDC_File_|Writing Simple EDC File ]] * [[/develop/legacy/program_guide/edje/basic_concepts#Animating_Theme_Using_Programs|Animating Theme Using Programs]] * [[/develop/legacy/program_guide/edje/basic_concepts#Positioning_Basic_Parts|Positioning Basic Parts]] * [[/develop/legacy/program_guide/edje/basic_concepts#Adding_Offset_to_Relative_Positioning|Adding Offset to Relative Positioning]] * [[/develop/legacy/program_guide/edje/basic_concepts#Calculating_Edje_Object_Total_Size|Calculating Edje Object Total Size]] * [[/develop/legacy/program_guide/edje/basic_concepts#Using_Edje_Size_Hints|Using Edje Size Hints]] * [[/develop/legacy/program_guide/edje/scaling_objects|Scaling Objects]] * [[/develop/legacy/program_guide/edje/scaling_objects#Part_Scaling|Part Scaling]] * [[/develop/legacy/program_guide/edje/scaling_objects#Using_Image_Set|Using Image Set]] * [[/develop/legacy/program_guide/edje/scaling_objects#Resizing_Borders|Resizing Borders]] * [[/develop/legacy/program_guide/edje/edje_swallow|Edje Swallow]] * [[/develop/legacy/program_guide/edje/elm_layout|ELM Layout]] * [[/develop/legacy/program_guide/edje/elm_layout#Adding_Layout|Adding Layout]] * [[/develop/legacy/program_guide/edje/elm_layout#Signals|Signals]] * Edje Parts and Blocks (Quick How-tos) * [[/develop/legacy/program_guide/edje/edje_blocks|Edje Blocks]] * [[/develop/legacy/program_guide/edje/group_block|Group Block]] * [[/develop/legacy/program_guide/edje/part_block|Part Block]] * [[/develop/legacy/program_guide/edje/program|Program]] === Related Info === * [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/edje_main.html|Edje API]] * [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/edcref.html|Edje Data Collection reference]] ^ [[ https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/edje_examples.html|Edje Examples]] ^^^^^^ | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/Example_Edje_Basics.html|Edje basics]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_nested.html|Edje Nested Part (hierarchy)]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_swallow.html|Swallow]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_swallow2.html|Swallow 2]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_text.html|Edje Text]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_table.html|Table]] | | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_color_class.html|Edje Color Class]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/Example_Edje_Signals_Messages.html|Edje signals and messages]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_box.html|Box- basic usage]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_box2.html|Box - custom layout]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_drag.html|Dragable parts]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_perspective.html|Perspective]] | | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_animations.html|Edje Animations]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_multisense.html|Multisense]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_basic2.html|Edje basics 2]] || [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_signals_2.html|Edje Signals 2]] | [[https://build.enlightenment.org/job/nightly_efl_gcc_x86_64/lastSuccessfulBuild/artifact/doc/html/tutorial_edje_animations_2.html|Edje animations 2]] | ==== Quick How-tos ==== === Adding Element on Screen === Add a new part inside the [[/develop/legacy/program_guide/edje/part_block|parts block]]. === Using Image === List the image in the [[/develop/legacy/program_guide/edje/edje_blocks#Images_Block|images block]], make sure the [[/develop/legacy/program_guide/edje/part_block|part]] has type "IMAGE" and set the normal property inside [[/develop/legacy/program_guide/edje/part_block#Image|description.image]] of part. === Using Same Color Definitions Across Multiple Elements === Define a [[/develop/legacy/program_guide/edje/edje_bloks#Color_classes_Block|color class]] and set the [[/develop/legacy/program_guide/edje/part_block#Description|description.color_class]] property. === Positioning or Resizing a Part (Relative and Absolute Positioning) === Fill in the [[/develop/legacy/program_guide/edje/part_block#Rel1/rel2|rel1 and rel2]] structures inside the [[/develop/legacy/program_guide/edje/part_block#Description|description block]]. === Hiding Part === Set the [[/develop/legacy/program_guide/edje/part_block#Description|visible property]] to 0. === Animating Part === Create several [[/develop/legacy/program_guide/edje/part_block#Description|description blocks]] inside your [[/develop/legacy/program_guide/edje/part_block|part]] and give each of them a different value for state. Set one description for the initial state and one for the end state. Create a [[/develop/legacy/program_guide/edje/program#Program|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. When defining the second [[/develop/legacy/program_guide/edje/part_block#Description|description ]], inherit from the first part in order to re-use the values which are already defined. The after property of the [[/develop/legacy/program_guide/edje/program#Program|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 Genlist Item Theme === Create a [[/develop/legacy/program_guide/edje/group_block|Group Block]] with one [[/develop/legacy/program_guide/edje/part_block|part element]] for each part that can be filed from the C code and 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''. \\ ---- {{page>index}}