Allons, dans le feu de l'action, et regardons de plus prés un fichier
EDC, nous allons l'explorer sa conception et ses options.
Le fichier
EDC que nous allons étudier, ligne par ligne :
Code : c
// Sample EDC
images {
image, "background.png" LOSSY 95;
}
collections {
group {
name, "test";
min, 32 32;
max, 1024 768;
parts {
part {
name, "background";
type, IMAGE;
mouse_events, 0;
description {
state, "default" 0.0;
rel1 {
relative, 0.0 0.0;
offset, 0 0;
}
rel2 {
relative, 1.0 1.0;
offset, -1 -1;
}
image {
normal, "background.png";
}
}
}
part {
name, "button";
type, RECT;
mouse_events, 1;
description {
state, "default" 0.0;
min, 100 50;
max, 100 50;
align, 0.5 0.5;
color, 211 168 234 255;
rel1 {
relative, 0.0 0.0;
offset, 0 0;
}
rel2 {
relative, 1.0 1.0;
offset, -1 -1;
}
}
description {
state, "clicked" 0.0;
min, 100 50;
max, 100 50;
align, 0.5 0.5;
color, 170 89 214 255;
rel1 {
relative, 0.0 0.0;
offset, 0 0;
}
rel2 {
relative, 1.0 1.0;
offset, -1 -1;
}
}
}
part {
name, "text";
type, TEXT;
mouse_events, 0;
description {
state, "default" 0.0;
rel1 {
relative, 0.0 0.0;
offset, 0 0;
to, "button";
}
rel2 {
relative, 1.0 1.0;
offset, -1 -1;
to, "button";
}
text {
text, "Press Me";
font, "redensek";
size, 14;
align, 0.5 0.5;
}
}
}
} /* Close Parts */
programs {
program {
name, "button_click";
signal, "mouse,down,1";
source, "button";
action, STATE_SET "clicked" 0.0;
target, "button";
after, "do_me";
}
program {
name, "button_unclick";
signal, "mouse,up,1";
source, "button";
action, STATE_SET "default" 0.0;
target, "button";
after, "stop_doing_me";
}
program {
name, "do_me";
signal, "*";
source, "button_click";
action, SIGNAL_EMIT "PANTS ON" "button";
in, 1.0 0.0;
after, "do_me";
}
program {
name, "stop_doing_me";
signal, "*";
source, "button_unclick";
action, ACTION_STOP;
target, "do_me";
}
} /* Close Prog */
} /* Close Group */
} /* Close Coll */
La premiére chose que l'on remarque, est que le code à une structure ressemble à du code écrit en
C.
Ensuite on remarque deux sections et des sous sections :
Et enfin, que chaque directive est de la forme:
Code : c
mot-clé, arg1 arg2 ...;
Nous alllons maintenant parler du fichier
EDC, section par section.
Section Image
Extrait du code plus haut :
Code : c
...
// Sample EDC
images {
image, "background.png" LOSSY 95;
}
...
La section des
images est la première section à examiner. Elle contient simplement une liste d'
images que nous souhaitons inclure dans notre interface.
Chaque
image aura une ligne décrivant comment la conserver, sous la forme:
Code : c
image, "file-name" STORAGE_METHOD;
La méthode de stockage (
STORAGE_METHOD) est une description de la façon dont
Edje doit stocker le fichier dans l'
EET généré.
Les méthodes de stockage valides sont
- COMP (methode qui vas enregistré l'image sans perte lors de la compression),
- RAW (qui vas stocker l'image au format raw, cela ne signifie pas que le format sera modifié, par exemple un fichier png enregistré au fromat raw, sera décompréssé, donc si 'limage fait 1k alors elle sera stockés comme une image de 8 k),
- LOSSY (methode de compression d'image avec perte, cette méthode avec perte est suivie par un nombre entier compris entre 0 et 100, définissant le niveau de qualité).
Section collections
Nous allons voir la section suivante appellé
collections{}. Cette section contient un ou plusieurs
group{} Chaque section
group{} représente une
interface. En effet, un fichier .edj peut contenir plusieurs
interfaces, par exemple pour avoir un seul fichier pour plusieurs applications.
Alors maintenant une description ligne par ligne :
Code : c
...
collections {
group {
name, "test";
...
Chaque
group{} reçoit un nom, dans notre cas il est nommé "
test".
Toute les fois ou vous ferais référence à votre EET vous pourrez spécifier à la fois le nom du fichier EET, et le groupe à utiliser afin de choisir votre nom descriptif
Code : c
...
min, 32 32;
max, 1024 768;
...
Les deux lignes suivantes sont la
taille min et
max de notre
interface en
pixels. Les arguments de min et max sont de la taille horizontale puis la taille VERITAL. Donc, notre interface a une taille minimale et maximale de 32x32 de 1024x768.
Code : c
...
parts {
part {
name, "background";
...
Les groupes contiennent des parts et des programs. Chaque part est un élément particulier de votre interface, come une étiquette de texte, ou un rectangle, ou une image. Chaque partie a un nom individuel à titre de référence par rapport à d'autres parties de votre EDC, essayé de choisir ce nom le plus descriptif possible.
En regardant notre exemple
EDC, vous pouvez voir que notre première partie est une image nommée "background" :
Code : c
...
type, IMAGE;
...
Après le nom, nous pouvons définir notre type comme l'un des types suivants,
Code : c
...
mouse_events, 0;
...
Le mot-clé "
mouse_events" est une valeur booléenne définissant oui ou non cette partie accepte les événements de la souris (comme les clics, les reports de la souris, etc), 0 pour non et 1 pour oui. Plus options que simplement ces 3 peut être utilisé, s'il vous plaît se référer à la référence pour les autres options possible.
Note Traducteur : trouver ou est cette fameuse référence
Code : c
...
description {
state, "default" 0.0;
rel1 {
relative, 0.0 0.0;
offset, 0 0;
}
rel2 {
relative, 1.0 1.0;
offset, -1 -1;
}
...
Une PART contiendra une ou plusieurs sections description. Chaque description est un état différent de notre PART.
Le descriptions défini la manière dont notre part devrait examiner, quelles images ou du texte de la part utilise, où il doit être positionné, comment il doit être carrelé, etc Dans ce cas, notre expérience n'a besoin que d'un seul state (Etat), que nous appelons default, en utilisant le mot-clé de state. Le numéro suivant le nom de l'Etat définit une valeur d'index qui est actuellement non utilisés, il suffit d'utiliser 0.0. Ensuite, nous voyons deux sections définissant le positionnement de notre part, et REL1
REL2. Chaque section rel contiendra les mots-clés relatifs et offset, et éventuellement à. Si le mot-clé à
est omis, alors la position est relative à la taille complète de l'interface tels que décrits par min et max dans le
groupe de sections. REL1 est le positionnement de l'angle supérieur gauche de la pièce et REL2 est le positionnement de la
coin inférieur droit de la pièce. Le mot-clé relatif est suivi par deux doubles allant de 0,0 à
1.0. Comme avec min et max, la première valeur est l'horizontale et la seconde est la verticale. La SPE offset
cifies l'écart de pixels à partir du point relatif. Dans le cas de notre contexte, le haut à gauche (rel1) de notre
partie (image) est relative à l'angle supérieur gauche de l'interface, sans décalage. La partie inférieure droite (REL2) de
notre rôle est relative à la partie inférieure droite de l'interface, décalage de 1 pixel à gauche et 1 pixel en place. Par conséquent,
cette partie se remplit complètement l'interface. Plus d'informations sur le positionnement peut être retrouvé plus tard dans ce guide.
Code : c
...
image {
normal, "background.png";
}
...
La dernière section de description des pièces c'est la section de l'image. Cette section décrit les images à
utiliser. Une ou plusieurs images peut être spécifié, l'image qui est d'abord vu est désigné par le mot-clé normale.
Plus d'images peuvent être ajoutés en utilisant le mot clé "tween" pour former des animations, mais nous en discuterons dans une autre section.
Alors que certaines parties peut sembler confus et compliqué à première vue, nous l'espérons vous pouvez désormais regarder la partie que nous venons d'examiné et simplement dire que c'est une partie d'image de fond nommée qui n'accepte pas les événements de souris, et remplit complètement l'interface en utilisant les background.png image.
Nous allons voir le prochain
part :
Code : c
...
part {
name, "button";
type, RECT;
mouse_events, 1;
...
qui se nomme
bouton, qui est de
type RECT (rectangle) et qui accépte les événements de la souris (
mouse_events, 1). Cette
part contiens deux
descriptions :
Code : c
...
description {
state, "default" 0.0;
min, 100 50;
max, 100 50;
align, 0.5 0.5;
color, 211 168 234 255;
rel1 {
relative, 0.0 0.0;
offset, 0 0;
}
rel2 {
relative, 1.0 1.0;
offset, -1 -1;
}
}
...
Cette Premiére
description décris l'état par défaut(
state, "default" 0.0;) et donc défini l'apparence normale et le positionnement du rectangle nous allons utiliser comme un bouton, ou en Autrement dit, c'est l'état de nos unclicked.
Le deuxiéme description :
Code : c
...
description {
state, "clicked" 0.0;
min, 100 50;
max, 100 50;
align, 0.5 0.5;
color, 0 0 0 255;
rel1 {
relative, 0.0 0.0;
offset, 0 0;
}
rel2 {
relative, 1.0 1.0;
offset, -1 -1;
}
}
...
Le deuxième état est l'état cliqué. Vous remarquerez que la valeur par défaut et les États cliqué regard presque
identiques, le seul changement est la couleur et le nom. Cela signifie que lorsque nous changeons de défaut à l'Etat
état cliqué, la seule chose qui change est la couleur du rectangle. Les États sont modifiés à l'aide pro-
grammes, dont nous parlerons plus tard. Vous remarquerez que les descriptions et mots-clés contiennent min max,
Ils sont utilisés pour définir la taille de la pièce. S'ils sont omis, comme dans la partie de fond, la partie sera
combler le montant maximum de l'espace avalible (ie: toute l'interface, limité par les REL1 et REL2).
Le mot-clé spécifie l'alignement alignement de notre part au sein de l'espace disponible (conteneur). Les valeurs pour
aligner à nouveau l'alignement horizontal suivie par l'alignement verital, utiliser des doubles. Donc, dans ce cas, la
rectangle sera un 100x50 pixels absolue, avec un conteneur de la taille de toute l'interface (telle que définie
par rel1/rel2), et est positionné au milieu de ce conteneur. Peu importe comment grand ou petit de l'interface
est le rectangle 100x50 pixels restera toujours exactement dans le milieu de l'écran et ne jamais redimensionner. Le
mot-clé couleur est applicable uniquement aux rectangles et le texte, et décrit la couleur du rectangle dans le
forme: couleur, rouge vert bleu alpha.
Notre dernier
part :
Code : c
...
part {
name, "text";
type, TEXT;
mouse_events, 0;
description {
state, "default" 0.0;
rel1 {
relative, 0.0 0.0;
offset, 0 0;
to, "button";
}
rel2 {
relative, 1.0 1.0;
offset, -1 -1;
to, "button";
}
text {
text, "Press Me";
font, "redensek";
size, 14;
align, 0.5 0.5;
}
}
}
...
La dernière partie est une partie de texte, appelé texte. Il n'accepte pas les événements de souris. Il a un seul Etat, par défaut.
Notez que les sections REL1 et REL2 utiliser le mot clé d', cela modifie le sens de la relativité.
Cela signifie que le coin supérieur gauche (REL1) de la partie est relative à l'angle supérieur gauche (0,0 0,0) de la partie
nommé bouton (pour "bouton";). De même, le coin inférieur droit (REL2) de la partie est relative à la partie inférieure
pixel à droite (1,0 1,0) de la partie nommée bouton, mais de déplacer le coin inférieur droit de la partie par 1
vers la gauche et vers le haut de ce point. La section du texte décrit le texte lui-même. Le texte du mot clé de-
scribes le texte à afficher ("Me presse"), la police à utiliser («redensek"), la taille de cette police (14), et le
l'alignement du texte dans le conteneur tel que défini par rel1/rel2. La police spécifiée pour être utilisé doit être
ajoutée à la trajectoire de la police EVAS dans votre application, et le nom de la police est le nom moins c'est extention
(Ex:. Ttf).
Un mot sur les couches. Il n'ya pas de mot spécifique pour les couches de CDE sur une partie par partie de base. Chaque
nouvelle partie est en couches sur le dessus de la partie précédente. Par conséquent, dans notre échantillon EDC le texte est rendu sur le dessus
du bouton, qui se trouve sur l'arrière-plan. Si nous avions défini le bouton avant que le contexte, il
n'aurait pas été visible. Bien que ce soit de bon sens pour la mostpart, il peut être une cause fréquente de
confusion lors de la modification d'un grand EDC si vous ne faites pas attention. Chaque fois que vous modifier ou ajouter des composants à votre
Quoi de vérifier la CDE ci-dessus et en dessous.
PROGRAMS
La dernière partie de notre EDC est la section des
programs. Qui vas donnée vie aux programme static créer par l' interfaces (
group).
Les programmes sont en grande partie sur la
réception des signaux. Les signaux peuvent être générés par
interaction avec l'utilisateur,
Edje lui-même, ou une
force extérieure (généralement votre gestionnaire de fenêtres).
Par exemple un utilisateur qui pointe la souris sur une zone de l'
interface. Un signal généré Edje comprennent une charge de "signal"
(Charges Edje l'EET), ou «du programme, start" (quand un autre programme commence à courir). Un extérieur gen-
signal erated aurait pour effet d'ensemble de l'interface Edje, généralement à partir d'un gestionnaire de fenêtres, telles que «déplacer»
(La fenêtre de votre interface est déplacé) ou "show" (votre interface est affiché).
Code : c
...
programs {
program {
name, "button_click";
signal, "mouse,down,1";
source, "button";
action, STATE_SET "clicked" 0.0;
target, "button";
after, "do_me";
}
...
Le premier programme dans notre exemple est de changer l'état de notre part lorsque le bouton est cliqué. Le pro-
gramme est le nom "Button_Click". Le programme est exécuté quand il reçoit le signal "de la souris, en bas, 1", ce qui signifie
lorsque le bouton gauche de la souris est enfoncé sur votre partie qui accepte les événements de souris le programme est activé.
Les signaux sont globable, de sens que si nous voulions que le programme à exécuter quand un bouton de la souris est enfoncé sur
notre part, nous pourrions utiliser le signal "de la souris, en bas," *, en fait, nous pourrions utiliser le signal "*" qui signifie que tout
signal effectuer la partie serait d'exécuter le programme. Le mot clé est à la source, qui définit la partie (ou
programme) à partir duquel le signal sera reçu, dans ce cas le bouton. Les sources sont également globable. La prochaine
mot-clé est l'action, ce ce que le programme ne fait. Les actions peuvent changer d'état partie, arrêter l'action du
d'autres programmes, ou émettent des signaux. Dans ce cas, l'action STATE_SET changer d'état à "clicked". Le
suivantes double (0,0) est actuellement utilisé et doit simplement être mis à 0,0. L'argument cible qui sui-
bas est la partie ou le programme sur lequel agit l'action. Le mot-clé final, après, définit éventuellement un autre
programme à exécuter après le programme en cours se termine. Quand un signal est reçu tous les programmes qui
accepter le signal entrant et correspondre à la source sera exécuté, et ainsi très souvent le mot-clé
«Après» n'est pas nécessaire, mais il peut toujours être utilisé à certaines fins rusés que nous allons étudier plus tard.
Après peut également être utilisé comme un mécanisme de boucle, en précisant le programme en cours pour remettre en marche après
complète, mais il convient de noter que tout signal spécifié pour le programme doivent être respectées sur tous les
terme de ce programme, même si elle boucles sur lui-même.
Code : c
...
program {
name, "button_unclick";
signal, "mouse,up,1";
source, "button";
action, STATE_SET "default" 0.0;
target, "button";
after, "stop_doing_me";
}
...
En regardant le premier programme à nouveau, nous pouvons maintenant voir clairement que le programme "Button_Click" sera exécuté
lorsque le bouton gauche de la souris est enfoncé sur notre bouton "" rectangle. Il va changer l'état de la cible
"Bouton" à "cliqué" (ce qui va changer la couleur comme indiqué précédemment), et une fois qu'il termine se déroulera le
"Do_me programme". Ainsi, en regardant le prochain programme "button_unclick" nous pouvons voir que cela va changer la
État de la cible "bouton" par défaut "de l'État (retour à sa couleur d'origine) lorsque le bouton gauche de la souris est relâché au cours de la partie source" bouton ". Nous avons donc un bouton animé! Généralement les images seraient
utilisé au lieu de simples rectangles, ce qui serait tout simplement omettre le mot clé de couleur et ajouter une section sur l'image
pour les deux Etats, d'une image pour l'état par défaut et l'autre pour l'état cliqué. Enfin, nous voyons que l'après
mot clé est utilisé pour exécuter le programme "stop_doing_me" après "button_unclick" termine en cours d'exécution. Il
convient de noter que tous les programmes et les noms des pièces sont tout à fait arbitraire, il n'ya pas de restrictions sur les pro-
Descriptions des états de gramme ou partie à l'exception de l'état par défaut, qui doit toujours être nommé comme
tels. Les programmes doivent toujours contenir au moins les mots-clés nom, la source, du signal et de l'action, même si
source et le signal sont globbed pour correspondre à quelque chose ("*").
Code : c
...
program {
name, "do_me";
signal, "*";
source, "button_click";
action, SIGNAL_EMIT "PANTS ON" "button";
in, 1.0 0.0;
after, "do_me";
}
...
Le troisième programme qui est référencé par le "Button_Click programme". Ce programme accepte n'importe quel signal (comme
identifiées par un * pour le signal). La source est définie comme un programme dans ce cas, plutôt que d'une part, de sorte que le
programme sera exécuté lorsque aucun signal n'est acceptée par le "Button_Click programme". L'action est défini
SIGNAL_EMIT, qui enverra le signal indiqué, ici "Pants on", qui est généralement utilisé par
votre code d'application. Le troisième argument de l'action pour SIGNAL_EMIT est la source d'où
le signal est venu. Dans votre code de l'application de ce signal serait reçu par un gestionnaire de rappel, qui
appellerait une fonction déterminée sur la base des recipt d'un signal spécifié à partir d'une source spécifique. Nous allons
En savoir plus sur ces signaux lorsque nous discuse l'API Edje plus tard. Le mot-clé »dans« accepte deux arguments
ments, les deux doubles. Le "dans" mot-clé indique un retard sur l'exécution de votre programme, le premier argument est
le nombre de secondes à attendre avant de lancer le programme, et le deuxième argument spécifie le max-
Fond du retard aléatoire qui est ajouté au premier argument. Ceci est utile lorsque vous souhaitez que le programme
attendre un temps aléatoire qui est au moins une demi-seconde, mais pas plus de 3 secondes, ce qui
serait décrit comme «en, 0,5 3,0;». Les retards se produisent toujours avant l'action indiquée par le programme est
préformées. Notre mot final est après, qui se déroulera le programme "do_me" après le programme actuel
complète, qui dans ce cas est une boucle. Notez qu'il n'y a pas de cible visé par ce programme, parce que le
action n'est pas effectuée sur tout autre programme ou une partie. Comme il s'agit d'une boucle, on peut dire que ce programme
sera exécuté après la "Button_Click" programme se termine, et émettre le signal "Pants on" de l'
source "bouton" toutes les secondes.
Code : c
...
program {
name, "stop_doing_me";
signal, "*";
source, "button_unclick";
action, ACTION_STOP;
target, "do_me";
}
...
Le programme définitif est nommé «stop_doing_me", qui est lancé après le programme "button_unclick" com-
plète et accepte n'importe quel signal. L'action "ACTION_STOP" est utilisée pour briser une boucle en cours d'exécution ou d'autres pro-
gramme, comme spécifié par la cible, dans ce cas "do_me".
Vous devriez maintenant prendre les EDC exemple ci-dessus, et l'utilisation Edje_CC de construire un eet. Vous pouvez obtenir l'arrière-
image de fond ici: BACKGROUNDIMG. Utilisation de la construction edje_cc votre EET comme ceci: "edje_cc-v-id.
sample.edc sample.eet ", en mettant l'image dans le même répertoire avec la SEE. Vous devriez mettre la police
"Redensek.ttf" dans un répertoire nommé «fonts /" où votre EET sera vue avec edje (le spectateur). Vous
peut alors aperçu que EET avec Edje, en précisant le nom du fichier EET et le nom du groupe: "edje
test sample.eet ". Jouez avec la SEE un peu jusqu'à ce que vous pensez que vous êtes familier avec la syntaxe, l'agencement et
fonctionnalités de base du CDE Edje.
