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.

Enregistrement d'un thème

Les thèmes d'interface sont enregistrés dans le fichier "themes.properties" (ressource JNDI adeliaThemeConfig). Il s'agit d'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

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

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

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

Variable	Valeur par défaut	Description
@AdelSelectionBorderRadius	2px	Permet de définir un radius sur les sélections/effets de survol.
@AdelInactiveSelectionBackground	#d9d9d9	Couleur de fond des éléments sélectionnés dans les contrôles inactifs (sans focus).
@AdelInactiveSelectionText	#030303	Couleur du texte des éléments sélectionnés dans les contrôles inactifs.
@AdelPopupSelectionBackground	#91C9F7	Couleur de fond des éléments sélectionnés dans les popups (MENU, LISTE_VALEURS).
@AdelPopupSelectionText	#030303	Couleur du texte des éléments sélectionnés dans les popups.
@AdelSelectionBackground	#CCE8FF	Couleur de fond des éléments sélectionnés dans les listes et les arborescences (LISTE, ARBORESCENCE, ARBRE_LISTE, MENU ACCORDEON).
@AdelSelectionText	#030303	Couleur de fond du texte des éléments sélectionnés dans les listes et les arborescences.
@AdelHoverBackground	#E5F3FF	Couleur de fond des éléments en surbrillance dans les listes et les arborescences.
@AdelHoverText	#030303	Couleur du texte des éléments en surbrillance dans les listes et les arborescences.
@AdelMenuPadding	6px	Marges intérieures (padding) par défaut des éléments de menu des objets MENU BARRE et MENU ACCORDEON.

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.

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.

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.

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.

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

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

Enregistrement d'un thème

Fichier de description du thème

CSS du thème

Variables de base

Variables permettant de définir les couleurs de base

Variables permettant de définir les couleurs des éléments sélectionnés

Fenêtre et onglets

Bordures des contrôles statiques

Infobulles

Texte en surbrillance

Menus

Champs de saisie

Contrôles statiques

Cadres

Boutons radio

Objet Accordéon

Liste graphique

Calendrier

Barre de menu