Table of Contents

Edje Menu


Part Block

Table of Contents

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 &lt;step_size&gt; &lt;steps_count&gt;;
      // 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

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.

When inheriting any parts, descriptions without state names are not allowed.
This breaks program sequences if a program in the middle of the sequence is removed.

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 {}
   }
}

Draggable

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.

Box/table

Items
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.

Item
Must be -1 to get expand behavior.

Description

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”.

The textblock part is not affected by the color description. Set the color in the text style.
Rel1/rel2
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.

Image
description
{
   image
   {
      normal: "filename.ext";
      tween:  "filename2.ext";
      tween:  "filenameN.ext";
      border:  left right top bottom;
      middle:  0/1/NONE/DEFAULT/SOLID;
      fill {}
   }
}

Image.fill

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.

“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.

image
{
   fill
   {
      size
      {
         relative: 1.0 1.0;
         offset: -1 -1;
      }
   }
}

The size block defines the tile size of the content that are displayed.

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";
}
Box
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.

Table
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.

Map
map
{
   perspective: "name";
   light: "name";
   on: 1;
   smooth: 1;
   perspective_on: 1;
   backface_cull: 1;
   alpha: 1;
 
   rotation
   {
      ...
   }
}

Map.rotation

rotation
{
   center: "name";
   x: 45.0;
   y: 45.0;
   z: 45.0;
}

Rotates the part, optionally with the center on another part.

Perspective

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.

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";

Edje Menu