Page MenuHomePhabricator

Edje Part
Updated 2,286 Days AgoPublic

Parts are used to represent the most basic elements of the theme, for example, a part can represent a line in a border or a label on a button.

Common Blocks and Properties

part {
  name:         "part_name";
  type:          TYPE; 
  mouse_events:  0-1;
  repeat_events: 0-1;
  precise_is_inside: 0-1;
  clip_to:      "another_part";

  description {
  }  

  dragable {
  }
}

All the different part types share a common set blocks and properties.

name: "part_name";
This is the part's identification, will serve as reference in several occasions like positioning and programs. Required property. Must be unique within the group.

type: TYPE;
Selects the type (all caps) from among the available types. The default value is IMAGE.

mouse_events: 0-1;
Boolean specifying whether the part accepts mouse events, 1, or not, 0. No signals are emitted by parts that do not accept mouse events. The default value is 1.

repeat_events: 0-1;
Boolean specifying whether a part echoes a mouse event to a part below it, 1, or not, 0.The default value is 0.

precise_is_inside: 0-1;
Enables precise point collision detection for the part, which is more resource intensive. Ignores the transparent areas of the image when deciding if the event occurred on the part. Disabled by default.

clip_to: "another_part";
When set, adjusts the container of the current part to the container of another part. Overflowing content will not be displayed. This currently only works on a rect-part.

Description

description {
  state:   "description_name" INDEX;
  inherit: "another_description" INDEX;
  visible: 0-1;
  min:     width     height;
  max:     width     height;
  align:   X-axis    Y-axis;
  fixed:   0-1       0-1;
  step:    width     height;
  aspect:  min       max;

  rel1 {
  }
  rel2 {
  }
}

Every part can have one or more description blocks. Each block is used to define style and layout properties of a part in a given "state".

state: "description_name" 0.0..1.0;
Sets a name used to identify a description inside a given part. Multiple descriptions are used to declare different states of the same part, like "clicked" or "invisible". All states declarations are also coupled with an index number between 0.0 and 1.0. All parts must have at least one description named "default 0.0".

inherit: "another_description" 0.0..1.0;
When set, the description will inherit all the properties from the named description, this reduces the amount of code necessary for simple state changes. Note: inheritance in Edje is single level only.

  • visible:0-1; Takes a boolean value specifying whether part is visible (1) or not (0). Non-visible parts do not generate events. The default value is 1.
  • min/max: width height; When set, these properties contrive the displayed object size between two fixed values in pixels, this doesn't affect the container size.
  • align: X-axis Y-axis; When the displayed object's size is smaller than it's container, this property moves it along both axis using the [EdjePartPositioning relative positioning] style. The default value is "0.5 0.5".
  • fixed: 0-1 0-1; When min or max are set, fixed sets a boolean value for each dimension (horizontal and vertical, respectively) that tells the application if it should be scaled on resize or not. The default value is "0 0"
  • step: width height; Takes two integer values in pixels for scaling, causing the width and/or height of the image always being divisible by its stepping value when scaled. Simply put, the size will jump form value to value. The default value is "0 0" disabling stepping.
  • aspect: min max; Sets the ratio of width to height to keep when the part is resized. When both values are the same, the ratio is fixed, when they differ, the part will be forced to keep the ratio between min and max when resized, a ratio smaller than min will cause a jump to max and vice versa. The default value is "0.0 0.0", disabling ratio.
  • aspect_preference: value; Sets the scope for the aspect property. Available options are BOTH, VERTICAL, HORIZONTAL and NONE.
Rel1 and Rel2
rel1 {
  to: "anotherpart";
  relative: 0.0 0.0;
  offset:     0   0;
}
rel2 {
  to_x: "anotherpart";
  to_y: "anotherotherpart";
}

Rel1 and Rel2 are used to define the position of the left-top and bottom-right corners of a part's container. A detailed explanation can be found in the Edje Part Positioning article.

Dragable

dragable {
  confine: "nameOfPart";
  events: "nameOfDragablePartToSendEventsTo";
  x: 0-1 0-1 0-1;
  y: 0-1 0-1 0-1;
}

The dragable block is used to define a set of properties in dragable objects. The first section defies if dragable is enabled in the direction (x/y). If enabled, 1 means left alignment and -1 means right alignment for x-direction. If enabled, 1 means top alignment and -1 means bottom alignment for y-direction.

This section is incomplete. Please help the wiki by expanding it.

Rect

part {
  name: "part_name";
  type:  RECT;

  description {
    state: "default" 0.0;
    color: 0-255 0-255 0-255 0-255;
    
    rel1 {
    }

    rel2 {
    }

  }

}

The rect is one of the most basic types of the Edje library, when set, it fills the whole part's container with the defined color. When the alpha channel is set to 0 the rect is invisible, but the rect still detect events and send signals. The default color is white.

Image

part {
  name: "part_name";
  type:  IMAGE;

  description {
    state:  "default" INDEX;

    image {
    }

    fill {
    }
    
    rel1 {
    }
    
    rel2 {
    }

  }
}

The image part type is one of the most feature full types of the Edje library, it's used to display images of any type supported by Evas inside an interface. Any part of the image type can include two additional blocks in it's description, image and fill, which are used to set the display properties of the image inside it's container.

Text

part {
  name: "part_name";
  type: TEXT;
  effect: TYPE;

  description {
    color:  0-255 0-255 0-255 0-255;
    color2: 0-255 0-255 0-255 0-255;
    color3: 0-255 0-255 0-255 0-255;

    text {
    }
  }
}

The text part type is used to display a given string of text in a single line. It's description block contains an additional block named "text" in which specific to the type are set.

Textblock

part {
  name: "partName";
  type: TEXTBLOCK;

  description {
    state: "default" 0.0;
    text {
      style: "styleName";
      min: 1 1;
    }
    rel1 {
    }
    rel2 {
    }
  }
}

The text block part types are defined in a similar fashion that the text parts but allows the designer to display multiple lines of text formatted using Edje Styles.

Gradient

part {
  name: "gradient";
  type: GRADIENT;

  description {
    state:  "default" 0.0;

    gradient {
    }
  
    fill {
    }

  }
}

The gradient type displays a combination of two or more colors as a gradient in many different directions and forms.

Swallow

part {
  name:        "partName";
  type:         SWALLOW;
  mouse_events: 0-1;
  
  description {
    state:    "default" 0.0;
    color: 0-255 0-255 0-255 0-255;
    rel1 {
    }
    rel2 {
    }
  }
}

The swallow type allows the application to insert Edje/Evas objects or even EWL widgets into the interface but contrived into the container of the swallow part.

Group

part {
  name:        "partName";
  type:         GROUP;
  mouse_events: 0-1;
  
  description {
    state:    "default" 0.0;
    source:   "groupName";
    color: 0-255 0-255 0-255 0-255;
    rel1 {
    }
    rel2 {
    }
  }
}

The swallow type allows the application to insert Edje/Evas objects or even EWL widgets into the interface but contrived into the container of the swallow part. Other then type:SWALLOW you could direct specify a group to swallow in the edje file. If you later access parts of this swallowed group do it with a part name like "partName:subPartName".

Imported from https://trac.enlightenment.org/e/wiki/EdjePart
History:
1 lebarjack 2010-09-01 12:50:26
2 jt_a 2011-05-03 21:19:01 restoring links
3 jt_a 2011-08-29 02:47:11 removed reference to old wiki

Last Author
beber
Last Edited
Sep 5 2013, 1:34 PM
Projects
None
Subscribers
None