part { // inherit all the fields of another part inherit: "partname"; // name the part name: "partname"; // set the part type type: IMAGE; // enable mouse events on the part mouse_events: 0/1; // repeat mouse events to parts below the current one repeat_events: 0/1; ignore_flags: NONE; // whether the part sizes scale with the edje scaling factor scale: 0/1; // whether fully-transparent pixels are taken into account for collision detection precise_is_inside: 0/1; // only render the area of the part that coincides with the given part clip_to: "anotherpart"; // for group/textblock parts: swallow the given group (for textblock: goes below text) source: "groupname"; // same as source but goes on top of text source2: "groupname"; // for textblock parts: swallow the given group below the mouse cursor when it hovers over the part source3: "groupname"; // same as source3 but goes on top of the cursor source4: "groupname"; // for textblock parts: swallow the given group below text anchors (<a>...</a>) source5: "groupname"; // same as source5 but goes on to top of the anchor source6: "groupname"; // add a shadow effect to the part effect: SOFT_SHADOW (BOTTOM_RIGHT); // for textblock parts: makes the text editable, possibly with a specific behavior entry_mode: PASSWORD; // for textblock parts: change how the tex selection is triggered select_mode: EXPLICIT; // for editable textblock parts: where to draw the (blinking) cursor cursor_mode: UNDER; // for editable textblock parts: allow multiple lines multiline: 0/1; // for textblock parts: accessibility features will be used access: 0/1; // no-one uses that pointer_mode: AUTOGRAB; use_alternate_font_metrics: 0/1; // remove the given program; useful when it was inherited program_remove: "programname"; // remove the given part; useful when it was inherited part_remove: "partname"; // insert the current part below the given part, as if it were declared before insert_before: "partname"; // insert the current part above the given part, as if it were declared after insert_after: "partname"; // define a new part inside this one part { <part definition> } draggable { // confine the current part to the given part confine: "another part"; // only start drag when it would have moved enough to be outside of the given part threshold: "another part"; // forward drag events to the given part instead of handling them events: "another draggable part"; // enable horizontal drag of the part with steps each step_size or with steps_count steps x: 0/1 <step_size> <steps_count>; // same as x but vertical y: 1 0 100; } // for box or table parts box/table { // list of items items { item { // define item type, can only be GROUP type: GROUP; // name the item name: "name"; // set the source for this item, i.e. its contents source: "groupname"; // minimum horizontal and vertical item sizes (-1 for expand) min: -1 -1; // maximum horizontal and vertical item sizes (-1 for ignore) max: 100 100; // set the item padding in pixels padding: 2 2 2 2; spread: 1 1; // set the item alignment align: 0.5 0.5; // set a weight hint in the box for the given object weight: 1 1; // set the aspect ratio hint aspect: 1 1; aspect_mode: BOTH; // number of columns and rows the item will take span: 1 1; } } } description { // inherit another description inherit: "default" 1.0; // name the current description state: "default" 1.0; // use another part as content of the current "PROXY" part (This description only works in the PROXY part and the current part mirrors the rendering content of the source part) source: "partname"; // make the part (in)visible (invisible parts emit no signals) visible: 0/1; // emit a signal when the given dimension becomes zero or stops being zero limit: WIDTH; // horizontal and vertical alignment of the part inside its parent align: 0.5 0.5; // set that the part does not change size fixed: 0/1 0/1; // set the minimum size for the part min: 200 200; // forcibly multiply the minimum sizes by the given factors minmul: 1.2 1.2; // set the maximum size for the part max: 400 400; // make vertical and horizontal resizes happen in steps step: 0 0; // force aspect ratio to be kept between min and max between resizes aspect: 0.8 1.2; // the dimension to which the aspect ratio applies aspect_preference: BOTH; // use the given color class which can be used to factor font colors color_class: "colorclassname"; // set the text color color: 255 0 0 255; // set the color of the text's shadow color2: 0 255 0 255; // set the color of the text's outline color3: 0 0 255 255; // define the positions of the top-left (rel1) and bottom-right (rel2) corners rel1/rel2 { // make relative and offset use the given part for their positioning to: "partname"; // position the corner relative to the part given through to (0.0 being axis beginning, 1.0 being its end) relative: 0.1 0.1; // add an absolute offset (in pixels) along each axis offset: 10 10; // same as to but only for the x axis to_x: "partname"; // same as to but only for the y axis to_y: "partname"; } // settings specific to parts of type image image { // name (not path) of the regular image normal: "imagename"; // image to use while transitioning to the normal image; use several times to create animations tween: "imagename2"; // set the number of pixels that make up each border of the image, i.e. are not resized when the image is border: 4 4 4 4; // hide, strip from its alpha or show (default) the non-border part of the image middle: DEFAULT; border_scale_by: 1.0; // whether to scale the border or not border_scale: 0/1; scale_hint: STATIC; // set how the image is going to fill its part fill: { // whether to smooth the image when scaling it smooth: 0/1; spread: ??; // whether to scale or tile to fit when resizing the image is needed type: SCALE/TILE; // only display the part of the image that is below and to the right of the given point origin { // specify top-left point as relative coordinates relative: 0.1 0.1; // specify top-left point as a pixel offset offset: 10 10; } // specify bottom-right point as relative coordinates size { relative: 0.1 0.1; // specify bottom-right point as a pixel offset offset: 10 10; } } } // settings specific to parts of type text and textblock text { // set the part's text text: "some text"; // set the text's font font: "Sans"; // set the text's size size: 14; // set the text's class which can be used to factor font and font-size settings text_class: "classname"; // use the styles defined in stylename style: "stylename"; // for textblocks in password mode, replace characters to hide with this string repch: "*"; // set the min and max font sizes allowed when resizing (default is 0 0, i.e. unrestricted) size_range: 6 18; // increase font size as much as possible while still remaining in the container for both axis fit: 0/1 0/1; // make the min size of the container equal to the min size of the current text (0 0 by default) min: 0/1 0/1; // make the max size of the container equal to the max size of the current text (0 0 by default) max: 0/1 0/1; // set the vertical and horizontal alignments of the text align: 0.5 0.5; // re-use the text of another part text_source: "partname"; // when text is too long to fit, relative position at which to cut the text and put an ellipsis ("...") ellipsis: 0.9; } // settings specific to parts of type box box { // set how children while be arranged in the box layout: horizontal_homogeneous; // set the vertical and horizontal alignments of box align: 0.5 0.5; // set the padding between items of the box padding: 1 1; // make the box' min size be the min size of its elements (i.e. make it shrinkable as much as its items) min: 0 1; } table { // make items homogeneous homogeneous: NONE; // set the vertical and horizontal alignments of box align: 0.5 0.5; // set the padding between items of the box padding: 1 1; // make the table's min size be the min size of its elements (i.e. make it shrinkable as much as its items) min: 0 1; } map { perspective: "partname"; light: "partname"; on: 0/1; smooth: 0/1; alpha: 0/1; backface_cull: 0/1; perspective_on: 0/1; color: 0/1; rotation { center: "partname"; x: 45; y: 120; z: 90; } perspective { zplane: 0/1; focal: 20; } // simpler syntax to create transitions to the current part link { base: "edje,signal" "edje"; } } } }
part { name: "partname"; type: IMAGE; mouse_events: 1; repeat_events: 0; ignore_flags: NONE; clip_to: "anotherpart"; source: "groupname"; pointer_mode: AUTOGRAB; use_alternate_font_metrics: 0; dragable {} items {} description {} }
Parts are used to represent the most basic design elements of the theme, for example, a part can represent a line in a border or a label on a button.
inherit [part name]
program_remove [program name] (program name) (program name) …
part_remove [part name] (part name) (part name) …
name [part name]
type [TYPE]
RECT
: Rectangle object in the screenTEXT
: Simple textIMAGE
: Image areaSWALLOW
: Area where you can add the objectTEXTBLOCK
: Complex text with multiple lines, mark-up elements, and such.GROUP
: Part which can include other groups in the same group.BOX
: Container object as a container. It has a row or column.TABLE
: Container object as a container. It has a row and column.PROXY
: Clone of another part in the same group. It shares the memory of the source part.SPACER
: Rectangle object, but invisible. Recommended to padding because it does not allocate any memory.Nested parts adds hierarchy to Edje. Nested part inherits its location relatively to the parent part. To declare a nested part create a new part within current part declaration. Define parent part name before adding nested parts.
part { name: "parent_rect"; type: RECT; description {} part { name: "nested_rect"; type: RECT; description {} } }
insert_before [another part's name]
insert_before
and insert_after
. One part cannot refer more than one by insert_before
.insert_after [another part's name]
insert_before
and insert_after
. One part cannot refer more than one by insert_after
.mouse_events [1 or 0]
mouse_events
. Disabling it (0) prevents the part from emitting signal. It is set to 1 by default, or to the value set to mouse_events
at the group level, if any.repeat_events [1 or 0]
ignore_flags [FLAG] …
Specifies whether events with the given flags are ignored, i.e., do not emit signals to the parts. Multiple flags must be separated by spaces, the effect is ignoring all events with one of the flags specified. Possible flags are:NONE
: Event is handled properly (default value)ON_HOLD
: Event is not handled or passed in this partscale [1 or 0]
pointer_mode [MODE]
AUTOGRAB
, when the part is clicked and the button remains pressed, the part is the source of all future mouse signals emitted, even outside the object, until the button is released.NOGRAB
, the effect is limited to the part's container.precise_is_inside [1 or 0]
use_alternate_font_metrics [1 or 0]
clip_to [another part's name]
source [another group's name]
source2
is used for on top of the selected text, if source2
is specified.source2 [another group's name]
source
is used for under of the selected text, if source
is specified.source3 [another group's name]
source4
is used for over the cursor text, if source4
is specified.source4 [another group's name]
source3
is used for under the cursor text, if source4
is specified.source5 [another group's name]
source6
is used for over the anchors text, if source6
is specified.source6 [another group's name]
source5
is used for under the anchor text, if source6
is specified.effect [effect]
(shadow direction) PLAIN
OUTLINE
SOFT_OUTLINE
SHADOW
SOFT_SHADOW
OUTLINE_SHADOW
OUTLINE_SOFT_SHADOW
FAR_SHADOW
FAR_SOFT_SHADOW
GLOW
BOTTOM_RIGHT
):BOTTOM_RIGHT
BOTTOM
BOTTOM_LEFT
LEFT
TOP_LEFT
TOP
TOP_RIGHT
RIGHT
entry_mode [mode]
NONE
: PLAIN
: EDITABLE
: PASSWORD
: select_mode [mode]
DEFAULT
, selection mode is what you would expect on any desktop. Press mouse, drag and release to end.EXPLICIT
, this mode requires the application controlling the Edje object has to explicitly begin and end selection modes, and the selection itself is draggable at both ends.cursor_mode [mode]
UNDER
, the cursor draws below the character pointed at. That is the default.BEFORE
, the cursor is drawn as a vertical line before the current character, just like many other GUI toolkits handle it.multiline [1 or 0]
access [1 or 0]
dragable { confine: "another part"; threshold: "another part"; events: "another draggable part"; x: 0 0 0; y: 0 0 0; }
When this block is used the part can be dragged around the interface, do not confuse with external drag and drop. By default Edje (and most applications) attempts to use the minimal size possible for a draggable part. If the min property is not set in the description the part is (most likely) set to 0px width and 0px height, thus invisible.
x [enable/disable] [step] [count]
y [enable/disable] [step] [count]
confine [another part's name]
threshold [another part's name]
events [another draggable part's name]
box/table { items { item { type: GROUP; source: "some source"; min: -1 -1; max: 100 100; padding: 1 1 2 2; } item { type: GROUP; source: "some other source"; name: "some name"; align: 1.0 0.5; } } }
On a BOX part, this block is used to set other groups as elements of the box.
These can be mixed with external objects set by the application through the
edje_object_part_box*
API.
type [item type]
GROUP
(default)name [name for the object]
evas_object_name_set()
.source [another group's name]
min [width] [height]
spread [width] [height]
prefer [width] [height]
max [width] [height]
padding [left] [right] [top] [bottom]
align [x] [y]
weight [x] [y]
aspect [w] [h]
aspect_mode [mode]
NONE
NEITHER
HORIZONTAL
VERTICAL
BOTH
options [extra options]
position [col] [row]
span [col] [row]
description { inherit: "another_description" INDEX; state: "description_name" INDEX; visible: 1; min: 0 0; max: -1 -1; align: 0.5 0.5; fixed: 0 0; step: 0 0; aspect: 1 1; rel1 { ... } rel2 { ... } }
Every part can have one or more description blocks. Each description is used to define style and layout properties of a part in a given “state”.
inherit [another description's name] [another description's index]
source [another part's name]
state [name for the description] [index]
visible [0 or 1]
limit [mode]
NONE
WIDTH
HEIGHT
BOTH
align [X axis] [Y axis]
fixed [width, 0 or 1] [height, 0 or 1]
edje_object_size_min_calc()
and edje_object_size_min_restricted_calc()
. This tells the min size calculation routine that this part does not change size in width or height (1 for it does not, 0 for it does), so the routine does not try to expand or contract the part.min [width] [height] or SOURCE
minmul [width multiplier] [height multiplier]
max [width] [height] or SOURCE
step [width] [height]
aspect [min] [max]
aspect_preference [DIMENSION]
BOTH
VERTICAL
HORIZONTAL
SOURCE
NONE
color_class [color class name]
color_class
, these values can be overridden by the “color”, “color2” and “color3” properties.color [red] [green] [blue] [alpha]
color2 [red] [green] [blue] [alpha]
color3 [red] [green] [blue] [alpha]
description { rel1 { relative: 0.0 0.0; offset: 0 0; } rel2 { relative: 1.0 1.0; offset: -1 -1; } }
The rel1 and rel2 blocks are used to define the position of each corner of the part's container. With rel1 being the left-up corner and rel2 being the right-down corner.
relative [X axis] [Y axis]
offset [X axis] [Y axis]
to [another part's name]
to_x [another part's name]
to_y [another part's name]
description { image { normal: "filename.ext"; tween: "filename2.ext"; tween: "filenameN.ext"; border: left right top bottom; middle: 0/1/NONE/DEFAULT/SOLID; fill {} } }
normal [image's filename]
tween [image's filename]
border [left] [right] [top] [bottom]
middle [mode]
1/DEFAULT
. The available values are:0
or NONE
1
or DEFAULT
SOLID
(strip alpha from the image over the middle zone)border_scale_by [value]
border_scale [0/1]
scale_hint [mode]
0
or NONE
DYNAMIC
STATIC
image { fill { type: SCALE; smooth: 0-1; origin {} size {} } }
The fill method is an optional block that defines the way an IMAGE part is
going to be displayed inside its container. It can be used for tiling
(repeating the image) or displaying only part of an image. See
evas_object_image_fill_set()
documentation for more details.
smooth [0 or 1]
spread
type [fill type]
SCALE
, image is scaled accordingly the value of the parameters“relative” and “offset” from “origin” and “size” blocks.
TILE
, image is tiled accordingly parameters value “relative” and “offset” from “origin” and “size” blocks.image { fill { origin { relative: 0.0 0.0; offset: 0 0; } } }
The origin block is used to place the starting point, inside the displayed element, that is used to render the tile. By default, the origin is set at the element's left-up corner.
relative [X axis] [Y axis]
offset [X axis] [Y axis]
image { fill { size { relative: 1.0 1.0; offset: -1 -1; } } }
The size block defines the tile size of the content that are displayed.
relative [width] [height]
offset [X axis] [Y axis]
text { text: "some string of text to display"; font: "font_name"; size: SIZE; text_class: "class_name"; fit: horizontal vertical; min: horizontal vertical; max: horizontal vertical; align: X-axis Y-axis; source: "part_name"; text_source: "text_part_name"; style: "stylename"; }
text [a string of text, or nothing]
text_class [text class name]
font [font alias]
style [the style name]
repch [the replacement character string]
size [font size in points (pt)]
size_range [font min size in points (pt)] [font max size in points (pt)]
fit [horizontal] [vertical]
min [horizontal] [vertical]
max [horizontal] [vertical]
align [horizontal] [vertical]
Changes the position of the point of balance inside the container. The default value is 0.5 0.5.source [another TEXT part's name]
text_source [another TEXT part's name]
ellipsis [point of balance]
box { layout: "vertical"; padding: 0 2; align: 0.5 0.5; min: 0 0; }
A box block can contain other objects and display them in different layouts, any of the predefined set, or a custom one, set by the application.
layout [primary layout] (fallback layout)
some_other_custom_layout_set_by_the_application
edje_box_layout_register()
. If an unregistered layout is used, it defaults to horizontal.align [horizontal] [vertical]
padding [horizontal] [vertical]
min [horizontal] [vertical]
table { homogeneous: TABLE; padding: 0 2; align: 0.5 0.5; min: 0 0; }
A table block can contain other objects packed in multiple columns and rows, and each item can span across more than one column and/or row.
homogeneous [homogeneous mode]
NONE
: defaultTABLE
: available space is evenly divided between children (which overflows onto other children if too little space is available)ITEM
: size of each item is the largest minimal size of all the itemsalign [horizontal] [vertical]
padding [horizontal] [vertical]
min [horizontal] [vertical]
map { perspective: "name"; light: "name"; on: 1; smooth: 1; perspective_on: 1; backface_cull: 1; alpha: 1; rotation { ... } }
perspective [another part's name]
light [another part's name]
on [1 or 0]
smooth [1 or 0]
alpha [1 or 0]
backface_cull [1 or 0]
perspective_on [1 or 0]
edje_perspective_set()
and edje_perspective_global_set()
.color [point] [red] [green] [blue] [alpha]
rotation { center: "name"; x: 45.0; y: 45.0; z: 45.0; }
Rotates the part, optionally with the center on another part.
center [another part's name]
x [X degrees]
y [Y degrees]
z [Z degrees]
perspective { zplane: 0; focal: 1000; }
Adds focal and plane perspective to the part. Active if perspective_on
is
true. Must be provided if the part is being used by other part as it is
perspective target.
zplane [unscaled Z value]
focal [distance]
link { base: "edje,signal" "edje"; transition: LINEAR 0.2; in: 0.5 0.1; after: "some_program"; }
The link block can be used to create transitions to the enclosing part description state. The result of the above block is identical to creating a program with
action: STATE_SET "default""; signal: "edje,signal"; source: "edje";
base [signal] [source]