Création d'un thème d'interface

Un thème d'interface permet de paramétrer l'apparence des applications Adélia Cloud. Les thèmes d'interface sont écrits en LESS, et compilés à la volée lors de leur utilisation.

Un thème utilisateur est une extension du thème de base fourni avec Adélia Studio, qui peut être modifié via des variables globales conditionnant les couleurs, dégradés et l'apparence des bordures des contrôles, ainsi que par l'introduction des règles plus complexes nécessitant une maîtrise à la fois du langage CSS et de la structure des CSS Adélia.

Un thème d'interface est fourni dans une arborescence contenant les éléments suivants :

MonTheme
css	Répertoire des fichiers .less.
images	Ressources image du thème (suggestion).
theme.properties	Fichier de description du thème.

Les éléments obligatoires sont le fichier "theme.properties" qui contient la description du thème et la sous-arborescence "css" qui contient les fichiers ajoutés lors de la compilation aux ressources css du thème par défaut. Le reste de l'arborescence est libre.

Le principe de base est de copier dans un répertoire temporaire l'ensemble des ressources du thème par défaut d'Adélia, d'y surimposer les ressources du thème et de compiler le thème résultant. Normalement, un thème utilisateur ne devrait fournir qu'un ou deux fichiers : "custom_variables.less" regroupant les redéfinitions des variables de base (couleurs / bordures) du thème par défaut, et optionnellement "custom_rules.less" regroupant des règles css explicites créés après les règles du thème par défaut.

↑ Haut de page

Enregistrement d'un thème

Les thèmes d'interface sont enregistrés dans le fichier "themes.properties" (ressource JNDI themeConfig) qui est un fichier properties java contenant des couples clé / valeur (nom interne du thème / répertoire de base relatif à la racine de l'application).

Exemple :

windows=themes/windows

adelia=themes/adelia

hardis=themes/hardis

reflex=themes/reflex

blue=themes/blue

rounded=themes/rounded

↑ Haut de page

Fichier de description du thème

Le fichier de description du thème contient les ressources internationalisées du thème (libellé, description) et peut également référencer les paramètres de l'image de fond du bureau.

Ce fichier doit s'appeler "theme.properties" et être installé à la racine de l'arborescence du thème.

Nom de la clé	Description
name[_codepays]	Nom externe du thème tel qu'affiché dans l'interface. La clé peut être suffixée par un code pays ce qui permet d'internationaliser le fichier.
description[_codepays]	Description du thème.
background	Nom du fichier d'image servant d'arrière plan au bureau. Le nom de fichier doit être fourni relativement à la racine de l'arborescence du thème (optionnel).
backgroundPos	Position de l'arrière-plan. Les valeurs possibles sont "cover", "contain", "mosaic", "center" et "stretch" - "stretch" par défaut. (optionnel).

↑ Haut de page

CSS du thème

Le sous-répertoire CSS contient l'ensemble des ressources qui seront copiés par dessus les ressources par défaut d'Adélia avant la compilation du thème.

Les thèmes Adélia sont écrits dans le langage LESS-CSS. Les thèmes utilisateur sont compilés à la volée après avoir été reconstitués en fusionnant les ressources du thème avec le thème de base fournit avec Adélia.

Bien que le concepteur du thème soit entièrement libre ici, il est conseillé d'étendre le thème Adélia en fournissant un des (ou les deux) fichiers de ressources prévus à cet effet, à savoir :

Fichier	Description
custom_variables.less	Fichier destiné à référencer les surcharges des variables du thème (essentiellement couleurs et description des bordures). Ce fichier peut également référencer des règles CSS spécifiques qui seront interprétées avant les règles de base associées aux contrôles Adélia.
custom_rules.less	Fichier destiné à référencer des règles CSS spécifiques qui seront interprétées après les règles de base associées aux contrôles Adélia (et seront donc prioritaires par rapport à celles-ci).

Ces deux fichiers sont présents mais vierges dans le thème par défaut. Leur destination prévue n'est qu'une recommandation, vous pouvez définir la destination de votre choix. L'un des fichiers est inclus en tête lors de la compilation, l'autre en fin.

Attention :

Le CSS final est fourni par un provider spécifique, et non chargé depuis l'arborescence du thème. Cela signifie que si le thème référence des ressources images dans des règles de type "url", cette URL ne doit pas être fournie en relatif au fichier CSS comme cela est fait usuellement.

Les variables @AdeliaResourcePath et @ThemeResourcePath sont fournies et pointent respectivement vers la racine des ressources du thème par défaut (/js/adelia) et vers la racine des ressources du thème (dépendant de la façon dont il est installé, si vous suivez les recommandations : /themes/internalthemename).

Par exemple, une règle classique <background-image: url("../images/img.gif")> doit être exprimée sous la forme <background-image: url("@{ThemeResourcePath}/images/img.gif")>.

↑ Haut de page

Variables de base

Ces variables définissent l'accès aux ressources du thème.

Variable	Valeur par défaut	Description
@AdeliaResourcePath	/js/adelia	Accès aux ressources de base du thème par défaut d'Adélia.
@ThemeResourcePath	n/a	Accès aux ressources du thème (pointe sur le répertoire de base).

Variables permettant de définir les couleurs de base

Ce jeu réduit de variables permet de définir globalement les couleurs des grandes classes d'éléments.

Variable	Valeur par défaut	Description
@Adel3DBackground	#f0f0f0	Couleur de fond des éléments 3D (dialogues, boutons, contrôles statiques, etc.)
@Adel3DText	#030303	Couleur du texte des éléments 3D.
@AdelWindowBackground	#ffffff	Couleur de fond des éléments de type input (champs de saisie, combo, listes, etc.)
@AdelWindowText	#030303	Couleur du texte des éléments de type input.
@AdelInfoBackground	#ffffe1	Couleur du fond des info-bulles.
@AdelInfoText	#030303	Couleur du texte des info-bulles.
@AdelHilight	#3399ff	Couleur de fond du texte sélectionné.
@AdelHilightText	#ffffff	Couleur du texte sélectionné.
@AdelGrayText	#808080	Couleur du texte d'un contrôle grisé.

L'ensemble des couleurs système du navigateur (couleurs renvoyées par VaToolBxGetSysColor) sont redéfinies sous la forme d'une variable LESS. Le thème par défaut garde une consistance entre les couleurs de base Adélia et les valeurs de ces variables (qui ne suivent donc plus forcément le système mais le thème Adélia). Par exemple, GrayText est remplacé par @GrayText.

Il n'est pas garanti qu'un thème redéfinissant les couleurs d'un groupe de contrôle particulier maintienne une cohérence entre les couleurs renvoyées par GetSysColor et les couleurs réellement affichées. Si seules les couleurs de base sont modifiées, cette cohérence sera maintenue.

Les variables décrites ci-dessous permettent de modifier l'apparence des éléments suivants :

Fenêtre et onglets
Bordures des contrôles statiques
Infobulles
Texte en surbrillance
Menus
Champs de saisie
Contrôles statiques
Cadres
Boutons radio
Menu accordéon
Calendrier

Fenêtre et onglets

Ces variables permettent de modifier les couleurs de base d'une fenêtre (active ou inactive).

Variable	Valeur par défaut	Description
@ActiveBorder	darken(@Adel3DBackground, 20)	Couleur de la bordure d'une fenêtre active.
@ActiveCaption	#99b4d1	Couleur du fond du titre d'une fenêtre active.
@CaptionText	#030303	Couleur du texte du titre d'une fenêtre active.
@ActiveCaptionGradient	0	Angle du dégradé appliqué au titre d'une fenêtre active.
@ActiveCaptionLighten	5	Pourcentage appliqué à l'éclairage du dégradé.
@InactiveBorder	lighten(@Adel3DBackground, 5)	Couleur de la bordure d'une fenêtre inactive.
@InactiveCaption	#bfcddb	Couleur du fond du titre d'une fenêtre inactive.
@InactiveCaptionText	#434e54	Couleur du texte du titre d'une fenêtre inactive.
@InactiveCaptionGradient	0	Angle du dégradé appliqué au titre d'une fenêtre inactive.
@InactiveCaptionLighten	5	Pourcentage appliqué à l'éclairage du dégradé.
@Window	@AdelWindowBackground	Couleur de fond d'une fenêtre.
@WindowFrame	@ActiveBorder	Couleur de la bordure d'une fenêtre active.
@WindowText	@AdelWindowText	Couleur du texte d'une fenêtre.
@WindowGradient	none	Angle du dégradé appliqué au fond d'une fenêtre.
@WindowLighten	5	Pourcentage appliqué à l'éclairage du dégradé.
@Dialog	@Adel3DBackground	Couleur de fond d'une boîte de dialogue.
@DialogMDIFrame	@AdelAppWorkspace	Couleur de fond d'une fenêtre MDI.
@DialogText	@Adel3DText	Couleur du texte d'une boîte de dialogue.
@DialogGradient	none	Angle du dégradé appliqué au fond d'une boîte de dialogue.
@DialogLighten	5	Pourcentage appliqué à l'éclairage du dégradé.
@PhantomResizeBorderWidth	4px	Largeur du cadre lors du redimensionnement d'une fenêtre en mode fantôme.
@PhantomResizeBorderStyle	solid	Style du trait lors du redimensionnement d'une fenêtre en mode fantôme.
@PhantomResizeBorderColor	darken(@ActiveBorder, 30)	Couleur du trait lors du redimensionnement d'une fenêtre en mode fantôme.
@TabButton	@Adel3DBackground	Couleur de fond d'un bouton d'onglet.
@TabButtonText	@Adel3DText	Couleur du texte d'un bouton d'onglet.
@TabButtonGradient	none	Angle du dégradé appliqué au fond d'un bouton d'onglet.
@TabButtonLighten	10	Pourcentage appliqué à l'éclairage du dégradé.
@TabButtonBorderRadius	0.2em	Arrondi de la bordure d'un bouton d'onglet.
@TabButtonBorderColor	@ThreeDFace	Couleur de la bordure d'un bouton d'onglet.
@TabButtonBorderSize	2px	Taille de la bordure d'un bouton d'onglet.
@TabButtonBorderStyle	outset	Style de la bordure d'un bouton d'onglet.
@TabButtonBoxShadow	none	Ombrage d'un bouton d'onglet.
@Tab	@Adel3DBackground	Couleur de fond d'un onglet.
@TabText	@Adel3DText	Couleur du texte d'un onglet.
@TabGradient	none	Angle du dégradé appliqué au fond d'un onglet.
@TabLighten	10	Pourcentage appliqué à l'éclairage du dégradé.
@TabBorderRadius	0.2em	Arrondi de la bordure d'un onglet.
@TabBorderColor	@ThreeDHighlight	Couleur de la bordure d'un onglet.
@TabBorderSize	2px	Taille de la bordure d'un onglet.
@TabBorderStyle	outset	Style de la bordure d'un onglet.
@TabBoxShadow	none	Ombrage d'un onglet.

Bordures des contrôles statiques

Ces variables fournissent les valeurs de base pour les bordures des contrôles statiques Windows. La valeur par défaut correspond à un contrôle ayant le style "WS_EX_STATICEDGE". Ces variables servent de base à l'implémentation des bordures des contrôles ayant les styles "Bord" et "Bord Statique" ou des styles équivalents.

Variable	Valeur par défaut	Description
@BaseBorderRadius	0	Arrondi d'une bordure de contrôle statique.
@BaseBorderStyle	ridge groove groove ridge	Style d'une bordure de contrôle statique.
@BaseBorderColor	@ThreeDShadow @ThreeDHighlight @ThreeDHighlight @ThreeDShadow	Couleur d'une bordure de contrôle statique.

Infobulles

Ces variables permettent de modifier les couleurs des infobulles (tooltips).

Variable	Valeur par défaut	Description
@Info	@AdelInfoBackground	Couleur de fond d'une infobulle.
@InfoGradient	0	Angle du dégradé appliqué au fond d'une infobulle.
@InfoLighten	5	Pourcentage appliqué à l'éclairage du dégradé.
@InfoText	@AdelInfoText	Couleur du texte d'une infobulle.
@InfoBorderRadius	0.2em	Arrondi de la bordure d'une infobulle.
@InfoBorderColor	@ThreeDDarkShadow	Couleur de la bordure d'une infobulle.
@InfoBorderSize	1px	Taille de la bordure d'une infobulle.
@InfoBorderStyle	Solid	Style de la bordure d'une infobulle.
@InfoBoxShadow	none	Ombrage d'une infobulle.

Texte en surbrillance

Variable	Valeur par défaut	Description
@Highlight	@AdelHighlight	Couleur de fond du texte en surbrillance (texte ou menu sélectionné).
@HighlightText	@AdelHighlightText	Couleur du texte en surbrillance (texte ou menu sélectionné).
@HighlightGradient	0	Angle du dégradé appliqué au fond du texte en surbrillance.
@HighlightLighten	5	Pourcentage appliqué à l'éclairage du dégradé.

Menus

Ces variables permettent de modifier les couleurs des menus.

Variable	Valeur par défaut	Description
@Menu	@Adel3DBackground	Couleur de fond d'un menu.
@MenuText	@Adel3DText	Couleur du texte d'un menu.
@MenuGradient	0	Angle du dégradé appliqué au fond d'un menu.
@MenuLighten	10	Pourcentage appliqué à l'éclairage du dégradé.
@MenuBoxShadow	none	Ombrage d'un menu de type "menu contextuel".

Champs de saisie

Ces variables permettent de modifier l'apparence des champs de saisie.

Variable	Valeur par défaut	Description
@Input	@AdelWindowBackground	Couleur de fond d'un champ de saisie.
@InputDisabled	@Adel3DBackground	Couleur du texte d'un champ de saisie.
@InputDisabledText	@AdelGrayText	Couleur de fond d'un champ de saisie désactivé.
@InputText	@AdelWindowText	Couleur du texte d'un champ de saisie désactivé.
@InputBorderRadius	0	Arrondi de la bordure d'un champ de saisie.
@InputBorderColor	#030303	Couleur de la bordure d'un champ de saisie.
@InputGradient	0	Angle du dégradé appliqué au fond d'un champ de saisie.
@InputLighten	1	Pourcentage appliqué à l'éclairage du dégradé.
@InputBoxShadow	none	Ombrage d'un champ de saisie.

Contrôles statiques

Ces variables permettent de modifier l'apparence des contrôles statiques.

Variable	Valeur par défaut	Description
@Static	@Adel3DBackground	Couleur de fond d'un contrôle statique.
@StaticText	@Adel3DText	Couleur du texte d'un contrôle statique.
@StaticBorderRadius	0	Arrondi de la bordure d'un contrôle statique.
@StaticGradient	none	Angle du dégradé appliqué au fond d'un contrôle statique.
@StaticLighten	5	Pourcentage appliqué à l'éclairage du dégradé.
@StaticBoxShadow	none	Ombrage d'un contrôle statique.

Cadres

Ces variables permettent de modifier l'apparence des cadres.

Variable	Valeur par défaut	Description
@Panel	@Adel3DBackground	Couleur de fond d'un cadre.
@PanelText	@Adel3DText	Couleur du texte d'un cadre.
@PanelBorderSize	2px	Taille de la bordure d'un cadre.
@PanelBorderRadius	0	Arrondi de la bordure d'un cadre.
@PanelBorderStyle	groove	Style de la bordure d'un cadre.
@PanelBorderColor	@Adel3DBackground	Couleur de la bordure d'un cadre.
@PanelGradient	none	Angle du dégradé appliqué au fond d'un cadre.
@PanelLighten	5	Pourcentage appliqué à l'éclairage du dégradé.
@PanelBoxShadow	none	Ombrage d'un cadre.

Boutons radio

Ces variables permettent de modifier l'apparence des boutons radio.

Variable	Valeur par défaut	Description
@ButtonFace	@Adel3DBackground	Couleur de fond d'un bouton.
@ButtonText	@Adel3DText	Couleur du texte d'un bouton.
@ButtonHighlight	lighten(@Adel3DBackground, 10)	Couleur de la bordure éclairée d'un bouton.
@ButtonShadow	darken(@Adel3DBackground, 10)	Couleur de la bordure assombrie d'un bouton.
@ButtonBorderRadius	0.2em	Arrondi de la bordure d'un bouton.
@ButtonBorderColor	darken(@ButtonShadow, 20)	Couleur de la bordure d'un bouton.
@ButtonBorderSize	1px	Taille de la bordure d'un bouton.
@ButtonBorderStyle	solid	Style de la bordure d'un bouton.
@ButtonGradient	0	Angle du dégradé appliqué au fond d'un bouton.
@ButtonLighten	10	Pourcentage appliqué à l'éclairage du dégradé.
@ButtonBoxShadow	none	Ombrage d'un bouton.

Objet Accordéon

Ces variables permettent de modifier l'apparence d'un objet Accordéon.

Variable	Valeur par défaut	Description
@AccordionTreePanelBackgroundColor	#efefef	Couleur de fond des panneaux non sélectionnés.
@AccordionTreePanelSelectedBackgroundColor	darken(@Adel3DBackground, 10)	Couleur de fond du panneau sélectionné.
@AccordionTreePanelBorderColor	#b5bcc7	Couleur de la bordure des panneaux non sélectionnés.
@AccordionTreePanelSelectedBorderColor	darken(@Adel3DBackground, 30)	Couleur de la bordure du panneau sélectionné.
@AccordionTreeBackgroundColor	#FFFFFF	Couleur de fond du contenu des panneaux.
@AccordionTreeTreeTreeNodeSelectedBackgroundColor	@Adel3DBackground	Couleur de fond du noeud d'un arbre survolé ou sélectionné.
@AccordionTreeTreeTreeNodeSelectedColor	#000000	Couleur du texte du noeud d'un arbre survolé ou sélectionné.
@AccordionTreeContainerBackgroundColor	none	Couleur de fond de l'accordéon.
@AccordionTreeTreeTreeNodeSelectedBorderColor	#759dc0	Couleur de la bordure du noeud d'un arbre survolé ou sélectionné.

Enfin, les quatre variables suivantes permettent de remplacer les images pour les nœuds et les feuilles de l'arbre sans passer par la méthode Adélia FIXER_IMAGE_ELEMENT :

Variable	Description
@AccordionTreeFolderImage	Url de l'image pour les répertoires des arbres. Par exemple: url("../themes/blue/css/newFolder.gif").
@AccordionTreeFolderImagePosition	Position de l'image @AccordionTreeFolderImage où récupérer l'image du répertoire. Par exemple : initial;
@AccordionTreeFileImage	Url de l'image pour les feuilles des arbres.
@AccordionTreeFileImagePosition	Position de l'image @AccordionTreeFileImage où récupérer l'image de la feuille.

Calendrier

Ces variables permettent de modifier les couleurs des calendriers.

Variable	Valeur par défaut	Description
@CalendarContainerBackgroundColor	@Window	Couleur de fond de l'arrière plan de l'objet.
@CalendarMonthBackgroundColor	@Window	Couleur de fond de l'arrière plan des zones d'affichage du ou des mois.
@CalendarHeaderBackgroundColor	@ActiveCaption	Couleur de la barre de titre, des noms des jours de la semaine, des numéros d'ordre des semaines (si NUMERO_SEMAINE vaut *VRAI) et de l'arrière plan des numéros de jour des dates sélectionnées.
@CalendarDayNumberColor	@WindowText	Couleur : du texte des numéros de jour, de la ligne horizontale séparant les numéros de jour des jours de la semaine, de la ligne verticale séparant les numéros de jour des numéros d'ordre des semaines (si NUMERO_SEMAINE vaut *VRAI), du texte décrivant la date du jour.
@CalendarPreviousNextMonthDayNumberColor	@GrayText	Couleur du texte des numéros des jours ne faisant pas partie du ou des mois affiché(s) par l'objet.
@CalendarHeaderColor	@Window	Couleur du texte du titre et des numéros de jours des dates sélectionnées.

↑ Haut de page