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.

+

−

== TODO ==

+

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

−

* Add proper openmoko initialization example.

+

−

* Add text example

+

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

Maybe better to replace this example with ewl or elementary (instead of the gtk mimic of edje)

+

Python code: widget_embed.py

Python code: widget_embed.py

<pre>

<pre>

Line 372:

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 431:

Line 531:

}

}

</pre>

</pre>

+

+

== SmartObject ==

+

What is a smart object ?

+

+

<TODO>

+

+

== Scripting ==

+

Using the embreyo scripting language inside edc files.

+

+

<TODO>

+

+

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

+

+

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 ==

+

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>

+

+

== 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>

+

+

== Styles ==

+

<TODO>

+

+

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