Edje - Tuto 2 : Afficher une couleur uni dans la fenêtre

Dans ce billet je vais montrer un code simple en Edje qui permet d'afficher une couleur dans la fenêtre :

Nous allons partir du code du précédent billet :

collections {
    group {
          name: "First_Edje_windows";

        parts {

         ...
        }//fin des parts
    }//fin du group
}//fin de la collections

Ce code précédemment crée nous permet d'afficher une fenetre en Edje, mais toute noir.

Nous allons pour le moment voir les paramètres du group {

Nous avons déjà un paramètre qui s'appelle name : "..."

 ...

name: "First_Edje_windows";

...

Ce paramètre permet de donner un nom à la fenêtre, mais est aussi le nom du groupe qu'on pourras manipuler par la suite dans du code C.

Nous allons ajouter les lignes suivantes :

...

min, 500 500;

max, 500 500;

...

Voici la correspondances utilisées par ces paramétrés :

...

min, [Largeur] [Hauteur]

...
Correspond à la taille minimum de l'affichage du group

...

max, [Largeur] [Hauteur]

...
Correspond à la taille maximum de l'affichage du group
C'est à dire que si ont agrandi la fenêtre les proportions ce feront tout seul


ajoutons ces lignes dans notre code de départ :

collections {
    group {
        name: "First_Edje_windows";
        min, 500 500;

        max, 500 500;

        parts {

        }//fin des parts
    }//fin du group
}//fin de la collections

Donc maintenant on vas a jouter un part { qui vas nous permettre de créer un rectangle vert dans notre fenêtre.

...

 part {
            name: "part_one";
            type: RECT;
            scale: 1;
            description {
                    ...

            }//Fin de la description
         }// Fin du part "par_one"

...

Dans un premier temps on ajoute un part et dessous ce part on ajouteras une description :
Détails pour le part
...
name: "part_one";
...
Ce paramètre permet de donner un nom à la fenêtre, mais est aussi le nom du groupe qu'on pourras manipuler par la suite dans du code C.

...
Ligne  type, RECT; 
...


Désigne l’élément type qu'on affiche il existe :

• RECT : les rectangles ;
• TEXT : les textes ;
• IMAGE : les images ;
• SWALLOW : les conteneurs ;
• TEXTBLOCK : les blocs de texte ;
• GROUP : les groupes ;
• BOX : les boîtes ;
• TABLE : les tableaux ;
• EXTERNAL : les éléments externes.

Nous les verrons chaqu'un dans les prochains billet, pour le moment occupons nous du type, RECT;

...
scale: 1;
...
 Définit l’échelle de ce part, ce paramètre est obligatoire pour chaque part.


la description du part, nous allons définir les paramètres de notre part dans l'ensemble description.
...
description {

               state: "default" 0.0;
               color, 0 0 255 255; //affiche du Bleu
                rel1.relative: 0.0 0.0;
               rel2.relative: 0.2 0.2;
            }//Fin de la description
...

Détails des paramètres utilisés :
...
state: "default" 0.0;
...
Ce paramètre correspond à l'état de notre port au démarrage de l'application


Pour le moment nous avons juste défini une couleur :

...

color, 0 255 0 255; //affiche du vert

...

Voici comment choisir ça couleur :

• La quantité de rouge de la couleur
• La quantité de vert de la couleur
• La quantité de bleu de la couleur
• Un paramètre pour la transparence (paramètre dit 'alpha') 

...
rel1.relative: 0.0 0.0;
rel2.relative: 0.2 0.2;
...
Permet le positionner de notre "Part" rel1 correspond à la position en pourcentage du point en haut droite du carré et rel2 à la position en pourcentage du point en bas du droit du carré

ce qui donne au final :
collections {
   group {
      name: "First_Edje_windows";
      max: 500 500;
      min: 500 500;

      parts {
         part {
            name: "part_one";
            type: RECT;
            scale: 1;
            description {

               state: "default" 0.0;
               color: 0 0 255 255; /* blue */
               rel1.relative: 0.0 0.0;
               rel2.relative: 0.2 0.2;
            }//Fin de la description
         }// Fin du part "par_one"
          
        }//fin des parts

    }//fin du group "First_Edje_windows"

}//fin de la collections



Voici le résultat :

Nous avons donc écrit un programme qui affiche un carré Bleu en haut à droite de notre fenêtre de taille 500x500

Afin de finaliser la compréhension sur le positionnement de part de type RECT, je vous propose un petit exercie ou en utilisant que des part de type RECT de faire un damier, cela vas permetre de mieux comprendre le positionement relative, voila ce que ça donne :

Je vous propose la correction suivante : Ici