4. Les styles CSS

Il existe différentes méthodes pour modifier l’apparence d’une application ou de certains de ses éléments.

Les styles par défaut

Il est possible de changer le style global par défaut d’une application avec une méthode simple. L’accès à la gestion des feuilles de style se fait depuis l’onglet Conception puis en cliquant sur (Gérer l’apparence de l’application). L’écran affiché est celui de l’éditeur de thème. Le cadre de gauche affiche toutes les pages CSS déjà créées. Le cadre de droite permet de visualiser rapidement les changements visuels. Enfin, le champ Thème de l’application situé sous la barre d’outil permet de choisir parmi quatre styles prédéfinis.

Créer son propre style

Il est possible de créer son propre style. Pour cela, il faut commencer par créer des pages CSS. Cliquer sur le bouton situé dans le cadre de gauche. Il est conseillé de créer une page pour chaque élément de l’application (dans notre exemple : le style de la page Login est séparé du style des tableaux). Renseigner un titre, puis cliquer sur Sauvegarder. Une fois le style créé, il est possible de l’éditer en cliquant sur Modifier. L’éditeur fonctionne de la même façon qu’un éditeur de code open source classique.

Pour faciliter la modification des éléments, des variables CSS ont été créées. Elles peuvent être observées et modifiées à l’aide de l’inspection du code de la page via un navigateur web (touche F12 sur Firefox notamment). Elles se trouvent tout en bas de la liste des styles CSS. Par exemple, pour changer la couleur des bords des boutons de la page, il n’y a qu’à modifier le style de la variable CSS –button-border-color pour pouvoir tout modifier en gagnant du temps.

Modifier le style d'un élément précis

Plusieurs solutions permettent de changer un élément unique d’une page. La première est d’appliquer directement le script CSS sur les contrôles ou sur l’écran.

L’inconvénient majeur est que le CSS écrit n’est alors pas réutilisable, et la maintenance est rendue difficile du fait de devoir passer dans chaque contrôle en cas de modification du style de l’application. Cette méthode est utile pour l’application ponctuelle d’un style sur un composant.

La deuxième solution est d’utiliser des feuilles de style, puis de les affecter aux contrôles concernés. L’accès à la gestion des feuilles de style se fait depuis l’onglet Conception puis en cliquant sur (Gérer l’apparence de l’application). L’édition des feuilles de styles se fait comme dans un simple fichier texte. Cliquer sur le bouton pour créer une feuille de style, et lui donner un nom.

Cliquer sur Modifier puis saisir le style. Cliquer sur Sauvegarder pour enregistrer.

Le style peut ensuite être appliqué au contrôle via le champ Classes de style CSS de l’onglet (Apparence). Plusieurs classes peuvent être affectées sur un contrôle en les séparant par des espaces.

Enfin, il est possible de changer le style en utilisant les ID des éléments inspectés via l’outil d’inspection du code du navigateur web évoqué plus haut (les ID sont précédés d’un #). Il est également possible de modifier certains paramètres visuels comme la taille ou la gestion du Responsive dans le tableau Apparence en mode Création.

Il est possible de désactiver une feuille de style et rendre ainsi inactives toutes les classes décrites dans cette feuille :

Les feuilles de style d’Ontomantics se basent sur le fonctionnement des feuilles de style classiques. Pour définir un style, il faut spécifier l’élément sur lequel il s’applique en utilisant soit une classe personnalisée, qui aura été affectée préalablement au contrôle, soit une classe par défaut qui est insérée automatiquement dans les contrôles par la plateforme.

Voici une liste non exhaustive des classe CSS par défaut des composants d’Ontomantics :

• Bouton : ontoSubmitButton

• Étiquette : ontoLabel

• Saisie de texte : ontoTextInput

• Saisie de texte formaté : ontoRichTextInput

• Saisie de mot de passe : ontoPasswordInput

• Zone de saisie de texte : ontoTextArea

• Texte à complétion assistée : ontoComboBoxGroup

• Sélection de date : ontoDatePicker

• Lien HTML : ontoHttpLink

• Image : ontoImage

• Liste déroulante : ontoDropDownList

• Liste : ontoListBox

• Case à cocher : ontoCheckBox

• Groupe de cases à cocher : ontoCheckBoxGroup

• Groupe de boutons radio : ontoRadioButtonGroup

• Tableau : ontoTable

• Tableau croisé : ontoCrossTable

• Cadre : ontoPanel

• GraphiquesMedia : ontoChart

• Upload : ontoUpload

• Code HTML : ontoHtmlCode

• Map : ontoMap

Il peut être également nécessaire de descendre dans la hiérarchie des éléments HTML qui composent le contrôle pour cibler précisément l’élément sur lequel un style doit être appliqué. Pour cela, il faut partir de la classe prédéfinie du contrôle, ou de la classe personnalisée, puis lister les différentes classes rencontrées jusqu’à l’élément souhaité.

Par exemple, pour colorer le texte d’une étiquette en vert :

.ontoText span {
  color: green;
}

Pour faciliter la découverte de cet ensemble de classes, nous recommandons l’utilisation des extensions Firefox Firebug et Web Developer qui permettent de cibler un élément choisi plus facilement qu’en lisant directement le code source de la page.

Dans certains cas, l’utilisation d’un chemin complet pour accéder à un élément ne suffit pas, la règle n’étant pas appliquée car une autre règle plus prioritaire est déjà appliquée par Ontomantics. Pour contourner ce problème, il est possible de spécifier un !important à la fin d’un élément de la règle qui ne fonctionne pas. Cela permet d’élever le niveau de priorité de cette règle afin de la faire passer avant celle d’Ontomantics.

La règle a alors la forme suivante :

.ontoText span {
  color: green !important;
}

L’ordre des feuilles de style est également important, car comme en CSS classique, les valeurs des règles lues en dernier écrasent celles des règles antérieures ciblant les mêmes éléments. Dans notre cas, les feuilles de style sont lues dans leur ordre d’apparition dans l’arbre. Il est possible de faire monter ou descendre une feuille de style à l’aide des menus contextuels Monter et Descendre afin de la placer à un endroit différent.

Importer une police ou une image

Pour pouvoir gagner du temps lors de l’insertion d’une image ou d’une police, l’outil Explorateur de ressources est disponible lors de la modification du contenu d’une feuille CSS, en dessous de la barre d’outil. Cliquer dessus puis indiquer le chemin contenant les polices ou les images à utiliser. Une fois sélectionné, il suffit de modifier le style CSS pour afficher le résultat.