115 lines
7.2 KiB
Plaintext
115 lines
7.2 KiB
Plaintext
~~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 ===
|
|
|
|
* [[/program_guide/edje/basic_concepts|Basic Concepts]]
|
|
* [[/program_guide/edje/basic_concepts#What_is_an_EDC_File?|What is an EDC File?]]
|
|
* [[/program_guide/edje/basic_concepts#Compiling_EDC_File|Compiling EDC File]]
|
|
* [[/program_guide/edje/basic_concepts#Writing_Simple_EDC_File_|Writing Simple EDC File ]]
|
|
* [[/program_guide/edje/basic_concepts#Animating_Theme_Using_Programs|Animating Theme Using Programs]]
|
|
* [[/program_guide/edje/basic_concepts#Positioning_Basic_Parts|Positioning Basic Parts]]
|
|
* [[/program_guide/edje/basic_concepts#Adding_Offset_to_Relative_Positioning|Adding Offset to Relative Positioning]]
|
|
* [[/program_guide/edje/basic_concepts#Calculating_Edje_Object_Total_Size|Calculating Edje Object Total Size]]
|
|
* [[/program_guide/edje/basic_concepts#Using_Edje_Size_Hints|Using Edje Size Hints]]
|
|
* [[/program_guide/edje/scaling_objects|Scaling Objects]]
|
|
* [[/program_guide/edje/scaling_objects#Part_Scaling|Part Scaling]]
|
|
* [[/program_guide/edje/scaling_objects#Using_Image_Set|Using Image Set]]
|
|
* [[/program_guide/edje/scaling_objects#Resizing_Borders|Resizing Borders]]
|
|
* [[/program_guide/edje/edje_swallow|Edje Swallow]]
|
|
* [[/program_guide/edje/elm_layout|ELM Layout]]
|
|
* [[/program_guide/edje/elm_layout#Adding_Layout|Adding Layout]]
|
|
* [[/program_guide/edje/elm_layout#Signals|Signals]]
|
|
* Edje Parts and Blocks (Quick How-tos)
|
|
* [[/program_guide/edje/edje_blocks|Edje Blocks]]
|
|
* [[/program_guide/edje/group_block|Group Block]]
|
|
* [[/program_guide/edje/part_block|Part Block]]
|
|
* [[/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 [[/program_guide/edje/part_block|parts block]].
|
|
|
|
=== Using Image ===
|
|
|
|
List the image in the [[/program_guide/edje/edje_bloks#Image_Block|images
|
|
block]], make sure the [[/program_guide/edje/part_block|part]] has type
|
|
"IMAGE" and set the normal property inside
|
|
[[/program_guide/edje/part_block#Image|description.image]] of part.
|
|
|
|
=== Using Same Color Definitions Across Multiple Elements ===
|
|
|
|
Define a [[/program_guide/edje/edje_bloks#Color_classes_Block|color class]]
|
|
and set the
|
|
[[/program_guide/edje/part_block#Description|description.color_class]]
|
|
property.
|
|
|
|
=== Positioning or Resizing a Part (Relative and Absolute Positioning) ===
|
|
|
|
Fill in the [[/program_guide/edje/part_block#Rel1/rel2|rel1 and rel2]]
|
|
structures inside the [[/program_guide/edje/part_block#Description|description
|
|
block]].
|
|
|
|
=== Hiding Part ===
|
|
|
|
Set the [[/program_guide/edje/part_block#Description|visible property]] to 0.
|
|
|
|
=== Animating Part ===
|
|
|
|
Create several [[/program_guide/edje/part_block#Description|description
|
|
blocks]] inside your [[/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 [[/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 [[/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 [[/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 [[/program_guide/edje/group_block|Group Block]] with one
|
|
[[/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:
|
|
|
|
<code c>
|
|
items: "texts" "text_part_1 text_part_2";
|
|
items: "icons" "image_part_1 image_part_2";
|
|
</code>
|
|
|
|
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}}
|