This page is meant for developers who are totally new enlightment and wish to have the simplest examples possible. These are my first steps to getting started and are tested on the host machine.

+

This page is meant for developers who are totally new enlightenment and wish to have the simplest examples possible. These are my first steps to getting started and are tested on the host machine. This page does not describe howto setup a build environment or how to deploy on openmoko (which is just a matter of copying files).

−

This page does not describe howto setup a build environment or how to deploy on openmoko (which is just a matter of copying files).

+

+

Edje user interface design is simular to designing for the web (relative, sort a box model, use of images). Graphical tools used for designing web components can almost be reused for edje (buttons, background and other graphical artifacts).

+

+

For more references, check [[Edje_examples#Further_resources|Further resources]]

Note you also need an image 'image.png' which must be located in the same directory as image.edc.

Note you also need an image 'image.png' which must be located in the same directory as image.edc.

−

−

Python source: image.py

−

<pre>

−

#!/usr/bin/env python

−

−

import evas

−

import ecore

−

import ecore.evas

−

import edje

−

import sys

−

import os

−

−

ee = ecore.evas.SoftwareX11(w=400, h=400)

−

edje_file = os.path.join(os.path.dirname(sys.argv[0]),"image.edj")

−

−

c = edje.Edje(ee.evas,file=edje_file,group="test")

−

c.size = ee.evas.size

−

−

c.show()

−

ee.show()

−

ecore.main_loop_begin();

−

</pre>

Edje source: image.edc

Edje source: image.edc

Line 247:

Line 238:

}

}

</pre>

</pre>

+

== Signals ==

== Signals ==

This examples makes using signal in edje very clear.

This examples makes using signal in edje very clear.

Line 478:

Line 470:

== Video ==

== Video ==

+

Including video in edje is no different than including other external content with swallow part type and smart objects, in fact emotion is a smart object.

+

Not sure howto setup gstreamer because this would be the preferred method.

Not sure howto setup gstreamer because this would be the preferred method.

Line 549:

Line 543:

== Transitions ==

== Transitions ==

+

* If clicked on the red box the blue will enlarge en get transparant.

+

* If clicked on the green box tje blue box will return to it's original state.

+

* On mouse in red box they will get highlighted (sort of), on mouse they will get dehighlighted.

−

<TODO>

+

Some observations:

+

* It seems not to be possible to goto a intermediated index (0.5 if 0 and 1 are defined).

+

* It seems not to be possible to handle signals depeding on state (e.g: only trigger a certain program if a part is in state x x).

+

* It seems not to be possible to apply generic signal handlers which target there source objects (not related to transitions).

+

+

+

Edje source:

+

<pre>

+

collections {

+

group {

+

name: "test";

+

parts {

+

part {

+

name: "bg";

+

type: RECT;

+

mouse_events: 1;

+

description {

+

state: "default" 0.0;

+

color: 255 255 255 255;

+

rel1 {

+

relative: 0 0;

+

}

+

rel2 {

+

relative: 1 1;

+

}

+

}

+

}

+

part {

+

name: "main";

+

type: RECT;

+

mouse_events: 1;

+

description {

+

state: "default" 0.0;

+

color: 128 255 255 255;

+

rel1 {

+

relative: 0.25 0.25;

+

offset: 10 10;

+

}

+

rel2 {

+

relative: 0.75 0.75;

+

offset: -10 -10;

+

}

+

}

+

description {

+

state: "default" 1.0;

+

color: 128 255 255 50;

+

rel1 {

+

relative: 0.0 0.0;

+

offset: 10 10;

+

}

+

rel2 {

+

relative: 1.0 1.0;

+

offset: -10 -10;

+

}

+

}

+

}

+

+

part {

+

name:"button_open";

+

type:RECT;

+

mouse_events:1;

+

description {

+

state: "default" 0.0;

+

color: 255 128 128 255;

+

rel1 {

+

relative: 0.0 0.90;

+

}

+

rel2 {

+

relative: 0.25 1;

+

}

+

}

+

description {

+

state: "default" 1.0;

+

color: 255 0 0 255;

+

rel1 {

+

relative: 0.0 0.90;

+

}

+

rel2 {

+

relative: 0.25 1;

+

}

+

}

+

}

+

+

part {

+

name:"button_close";

+

type:RECT;

+

mouse_events:1;

+

description {

+

state: "default" 0.0;

+

color: 0 255 0 128;

+

rel1 {

+

relative: 0.25 0.90;

+

}

+

rel2 {

+

relative: 0.50 1;

+

}

+

}

+

+

description {

+

state: "default" 1.0;

+

color: 0 255 0 255;

+

rel1 {

+

relative: 0.25 0.90;

+

}

+

rel2 {

+

relative: 0.50 1;

+

}

+

}

+

}

+

}

+

+

programs {

+

program {

+

name: "complete";

+

source: "button_open";

+

signal: "mouse,clicked,1";

+

+

action: STATE_SET "default" 1.0;

+

target:"main";

+

transition:SINUSOIDAL 1;

+

}

+

program {

+

name: "reverse";

+

source: "button_close";

+

signal: "mouse,clicked,1";

+

+

action: STATE_SET "default" 0.5;

+

target:"main";

+

transition:ACCELERATE 1;

+

}

+

+

program {

+

name:"button_open_mouse_in";

+

source:"button_open";

+

signal:"mouse,in";

+

action: STATE_SET "default" 1;

+

target:"button_open";

+

transition:ACCELERATE 0.5;

+

}

+

+

program {

+

name:"button_open_mouse_out";

+

source:"button_open";

+

signal:"mouse,out";

+

action: STATE_SET "default" 0;

+

target:"button_open";

+

transition:LINEAR 1;

+

}

+

program {

+

name:"button_close_mouse_in";

+

source:"button_close";

+

signal:"mouse,in";

+

action: STATE_SET "default" 1;

+

target:"button_close";

+

transition:ACCELERATE 0.5;

+

}

+

+

program {

+

name:"button_close_mouse_out";

+

source:"button_close";

+

signal:"mouse,out";

+

action: STATE_SET "default" 0;

+

target:"button_close";

+

transition:LINEAR 1;

+

}

+

}

+

}

+

+

}

+

+

+

</pre>

== Macros ==

== Macros ==

+

Edje uses C style macro's:

+

* #include "filename"

+

* #define(PARM,PARM2)

+

Note: define requires that everything is on the same line, newlines must be escaped.

<TODO>

<TODO>

== Text ==

== Text ==

+

* Both "font" and "size" are required but if font doesn't exist there is fallback to a default.

+

+

+

<pre>

+

part {

+

name:"text_part";

+

type:TEXT;

+

+

description {

+

state: "default" 0.0;

+

rel1 {

+

relative: 0 0;

+

}

+

rel2 {

+

relative: 1 1;

+

}

+

text {

+

text: "Hello World";

+

font: "Sans";

+

size:20;

+

}

+

}

+

}

+

</pre>

+

== Gradients ==

<TODO>

<TODO>

== Styles ==

== Styles ==

+

<TODO>

== Color classes ==

== Color classes ==

+

<TODO>

+

+

== Timers ==

+

+

== Further resources ==

+

* http://docs.enlightenment.org/api/edje/html/edcref.html

+

* http://www.cuddletech.com/edje/docs/pdf/edje_book.pdf (outdated?)

+

+

[[Category:Middleware]]

Latest revision as of 07:11, 19 July 2009

This page is meant for developers who are totally new enlightenment and wish to have the simplest examples possible. These are my first steps to getting started and are tested on the host machine. This page does not describe howto setup a build environment or how to deploy on openmoko (which is just a matter of copying files).

Edje user interface design is simular to designing for the web (relative, sort a box model, use of images). Graphical tools used for designing web components can almost be reused for edje (buttons, background and other graphical artifacts).

I personally use eclipse with the pydev plugins, with an extra script which compiles edc files.
A external builder can be defined to execute the script on modification, following setting are used in the builder.

Location: ${workspace_loc:/edje/build_edje.sh}

Arguments: ${build_files:f}

Next step would be to copy the files to neo with ssh and execute them.

Views

Personal tools

This page is meant for developers who are totally new enlightment and wish to have the simplest examples possible. These are my first steps to getting started and are tested on the host machine.
This page does not describe howto setup a build environment or how to deploy on openmoko (which is just a matter of copying files).