This month’s Bodhi Corner is written by Stefan (aka @the_waiter). I will try to introduce my way of theming for Moksha desktop. First important facts: • Moksha or E themes are based on edje layer which is a part of EFL widget tool. • It is almost impossible to create a theme from scratch! The theme structure is predefined and strictly related to Moksha or modules code! • Moksha theme covers only Moksha widgets! • Edje theme has nothing to do with GTK or other themes, so applications like Thunar can not be themed with Moksha theme. Thunar is a GTK app so it needs the GTK theme.
Le Coin Bodhi de ce mois-ci est écrit par Stefan (alias @the_waiter).
Je vais vous présenter ma méthode de création de thèmes pour Moksha Desktop.
Premiers points importants :
••Les thèmes Moksha ou E sont basés sur la couche edje, intégrée à l'outil de widgets EFL. ••Créer un thème de toutes pièces est quasiment impossible ! La structure du thème est prédéfinie et strictement liée au code de Moksha ou des modules ! ••Le thème Moksha ne couvre que les widgets Moksha ! ••Le thème Edje n'a rien à voir avec GTK ni avec d'autres thèmes. Par conséquent, des applications comme Thunar ne peuvent pas être thématisées avec le thème Moksha. Thunar est une application GTK, elle nécessite donc le thème GTK.
Let's get started The script is saved as an edc file. An EDC (Edje data collection) file is a text file that contains the code describing the position, size, and other parameters of graphical elements that compose the visual aspect of your application. In addition to graphical elements, it can also handle sounds. EDC is a description language where the objects of an interface are described by using a text description. Basic EDC file structure: color_classes {} styles {} collections { group { name: “my_group”; parts {} programs {} } } OK, enough theory. My workflow now. The best practice of modifying themes is to choose one you like and want to change. The theme is compiled as an edj file and you need to decompile it: edje_decc theme_name.edj
Commençons
Le script est enregistré au format edc. Un fichier EDC (Edje data collection) est un fichier texte contenant le code décrivant la position, la taille et d'autres paramètres des éléments graphiques qui composent l'aspect visuel de votre application. Outre les éléments graphiques, il peut également gérer les sons. EDC est un langage de description où les objets d'une interface sont décrits par une description textuelle. Structure de base du fichier EDC :
color_classes {} styles {} collections {
group {
name: "my_group";
parts {}
programs {}
}
}
Bon, assez de théorie. Passons maintenant à mon workflow. La meilleure pratique pour modifier les thèmes est de choisir celui qui vous plaît et que vous souhaitez modifier. Le thème est compilé au format edj et vous devez le décompiler :
edje_decc theme_name.edj
This command will decompile the whole theme and create a folder with edc files, png or jpg pictures, and sound files. It is great to try to compile theme back if no warnings or errors this way: Use ./build.sh bash with predefined compiling commands (example: Zentithal theme): edje_cc $@ -id . -fd . default-dm.edc -o ../MokshaZenithal.edj This command will build the theme according to the default-dm.edc file where there’s a list of other referenced edc files. If the compilation process is successful, you need to change the part you need. For example, we can start with the theme background. Look up the background.edc file where the BG picture should be included. If not, you need to grep “e/desktop/background“ group. Once you find the suitable file, look at the picture name that is used as wallpaper. In the case of the Zenithal theme, it is “e_wallpaper.png”. Use another wallpaper picture you like and save as e_wallpaper.png. That's all. Compile the theme and copy the edj file to folder .e/e/themes. Check the result.
Cette commande décompile l'intégralité du thème et crée un dossier contenant les fichiers edc, les images png ou jpg et les fichiers audio. Si aucun avertissement ni erreur ne s'affiche, essayez de recompiler le thème de cette manière :
Utilisez le bash ./build.sh avec des commandes de compilation prédéfinies (exemple pour le thème Zentithal) :
edje_cc $@ -id . -fd . default-dm.edc -o ../MokshaZenithal.edj
Cette commande compile le thème à partir du fichier default-dm.edc, qui contient la liste des autres fichiers edc référencés.
Si la compilation réussit, vous devrez modifier la partie souhaitée. Par exemple, nous pouvons commencer par l'arrière-plan du thème. Recherchez le fichier background.edc où l'image d'arrière-plan doit être incluse. Sinon, exécutez grep dans le groupe « e/desktop/background ». Une fois le fichier approprié trouvé, vérifiez le nom de l'image utilisée comme fond d'écran. Dans le cas du thème Zenithal, il s'agit de « e_wallpaper.png ». Utilisez une autre image de fond d'écran que vous aimez et enregistrez-la sous le nom e_wallpaper.png. C'est tout. Compilez le thème et copiez le fichier edj dans le dossier .e/e/themes. Vérifiez le résultat.
In case you need to change windows decorators (borders), look up border.edc file or find e/widgets/border/default/border group in edc files. Change the top part, bottom part, controls, etc, and compile the theme again. This method applies to any widget you want to change. Of course there is much more info about GROUP, PARTS and PROGRAM parts. For example, a part block consists of many other components like RECT, IMAGE, CLIP, TEXTBLOCK, TEXT with their parameters like: visibility, rel adjust, offset, color, min/max limits, align, etc, etc. More info here: https://docs.tizen.org/application/native/guides/ui/efl/learn-edc-intro/ https://docs.tizen.org/application/native/guides/ui/efl/learn-edc-part/ This was just a brief introduction to Moksha theming. For more info study EDC reference.
Si vous devez modifier les décorateurs de fenêtres (bordures), recherchez le fichier border.edc ou le groupe e/widgets/border/default/border dans les fichiers edc. Modifiez la partie supérieure, la partie inférieure, les contrôles, etc., puis recompilez le thème. Cette méthode s'applique à tous les widgets que vous souhaitez modifier. Bien sûr, il existe de nombreuses autres informations sur les parties GROUP, PARTS et PROGRAM. Par exemple, un bloc de partie est composé de nombreux autres composants tels que RECT, IMAGE, CLIP, TEXTBLOCK, TEXT, avec leurs paramètres : visibilité, ajustement relatif, décalage, couleur, limites min/max, alignement, etc. Plus d'informations ici :
https://docs.tizen.org/application/native/guides/ui/efl/learn-edc-intro/
https://docs.tizen.org/application/native/guides/ui/efl/learn-edc-part/
Ceci n'était qu'une brève introduction à la création de thèmes Moksha. Pour plus d'informations, consultez la référence EDC.