Compréhension d'importantes considérations relatives à l'apparence visuelle

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

Décrire deux façons de changer le style des composants intégrés Visualforce.
Décrire deux différences entre les styles Salesforce Classic et Lightning Experience pouvant être modifiés en utilisant les feuilles de style CSS.
Décrire deux approches pour adapter Salesforce Lightning Design System aux pages Visualforce

Compréhension d'importantes considérations relatives à l'apparence visuelle

Les pages Visualforce ont la même apparence, qu’elles soient exécutées dans Salesforce Classic ou Lightning Experience, sauf si vous les retravaillez afin de les adapter au contexte adéquat pour l’interface utilisateur. Les composants Visualforce intégrés qui affichent les éléments de l’interface utilisateur ne sont pas facilement reproduits pour s’adapter à la présentation de Lightning Experience.

Plus particulièrement, le code HTML obtenu avec les composants Visualforce intégrés ne change pas lorsque la page est affichée avec Lightning Experience. De plus, les feuilles de style Salesforce Classic utilisées par ces composants sont par défaut chargées par la page. Par conséquent, les pages qui utilisent les composants <apex:inputField>, <apex:outputField>, <apex:pageBlock>, ainsi que d’autres composants à granularité fine et élevée qui respectent le style de Salesforce Classic, continuent à respecter ce style. Vous avez une petite touche de Salesforce Classic dans votre Lightning Experience.

Nous vous recommandons (actuellement, avec les pages existantes) de ne pas essayer de les adapter à l'apparence visuelle de Lightning Experience. Lightning Experience évolue en permanence et s’adapter à son style revient à viser une cible mobile. Tâche difficile.

Néanmoins, dans certains cas, vous souhaiterez que des pages aient davantage l'apparence de Lightning Experience. Pour les nouvelles pages, ou si vous êtes prêt à y passer un peu de temps, il existe de très bons outils pour créer des pages parfaitement adaptées à Lightning Experience.

Modification du style des composants standard

Visualforce offre de nombreuses options pour ajuster ou ignorer le style des composants standard. Si votre but est d'apporter de légers changements à l'apparence de ces composants, le travail requis pour l'utilisation de ces options sera tout aussi limité. Intéressons-nous à quelques-uns des outils à votre disposition pour modifier les styles.

Styles de composants individuels

Les composants Visualforce qui produisent du HTML ont des attributs transmis style et styleClass. Ceux-ci vous permettent d’utiliser vos propres styles et classes de style afin de contrôler la présentation du HTML qui en résulte. Style vous permet de définir directement les styles sur un composant, tandis que styleClass vous permet de lier des classes à des styles définis ailleurs. Ainsi, le code suivant définit la classe de <apex:outputText> et applique un style.

<apex:page>
    <style type="text/css">
        .asideText { font-style: italic; }
    </style>
    <apex:outputText style="font-weight: bold;"
        value="This text is styled directly."/>
    <apex:outputText styleClass="asideText"
        value="This text is styled via a stylesheet class."/>
</apex:page>

Ajout d'une feuille de style personnalisée

Vous pouvez ajouter vos feuilles de style personnalisées à toute page Visualforce utilisant des ressources statiques et la balise <apex:stylesheet>. Par exemple, ajoutons le fichier de feuille de style app-styles.css à votre page.

Si app-styles.css est chargé en tant que ressource statique autonome nommée « AppStylesheet », ajoutez ce qui suit à votre page :

<apex:stylesheet value="{!$Resource.AppStylesheet}"/>

Si app-styles.css est contenu dans une archive de ressources statiques (comme un fichier .zip ou .jar) nommée « AppStyles », utilisez la fonction URLFOR. Spécifiez le nom de l’archive dans le premier paramètre et le chemin d’accès à app-styles.css au sein de l’archive dans le deuxième paramètre :

<apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'app-styles.css')}"/>

Vous pouvez alors vous référer à n’importe quel style de la feuille de style et en faire référence dans les attributs styleClass, de la balise Visualforce comme nous l’avons auparavant fait avec le style asideText.

Il s’agit de la méthode recommandée pour ajouter des définitions de style CSS aux pages Visualforce, car elle partage la feuille de style entre les pages et minimise le balisage que vous devez ajouter à chaque page.

L’exception à cette méthode pour l’ajout d’une feuille de style est Salesforce Lightning Design System. Salesforce Lightning Design System est une trousse à outils innovante permettant de mettre vos pages en forme avec des styles. Nous l’examinerons en détail plus loin.

Vous pouvez charger Salesforce Lightning Design System en tant que ressource statique et le référencer en utilisant <apex:stylesheet>. Il existe toutefois une méthode plus simple : Il suffit d’insérer <apex:slds /> n’importe où dans le balisage de votre page.

Styles différents dans Lightning Experience

Pour charger uniquement une feuille de style personnalisée lorsque votre page est exécutée dans Lightning Experience, utilisez le marquage suivant. Il est comparable à l’exemple de marquage Visualforce dans Partage de pages Visualforce entre Classic et Lightning Experience.

<apex:page standardController="Account">
    <!-- Base styles -->
    <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'app-styles.css')}" />
    <!-- Lightning Desktop extra styles -->
    <apex:variable var="uiTheme" value="lightningDesktop"
        rendered="{!$User.UIThemeDisplayed == 'Theme4d'}">
        <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'lightning-styling.css')}" />
    </apex:variable>
    <!-- Rest of your page -->
</apex:page>

OK, ce sont des outils. Nous verrons par la suite quelques techniques pour les utiliser.

Stratégies et recommandations relatives aux styles

Pour créer des pages Visualforce qui reflètent la conception visuelle de Lightning Experience, utilisez Salesforce Lightning Design System. Il existe plusieurs méthodes d’utilisation de Salesforce Lightning Design System dans vos pages Visualforce.

Avant d'aborder les détails, restons à un niveau général et pensons aux différentes stratégies d'application du style Lightning Experience à vos pages. Parlons plus particulièrement de vos pages existantes.

Il existe deux manières de jouer sur le style des pages existantes, afin qu'elles ressemblent davantage à Lightning Experience.

Changer le balisage pour appliquer un nouveau style : vous faites les modifications dans vos pages.
Changer les règles de style pour le balisage existant : vous faites les modifications dans vos feuilles de style.

Vous n'avez pas à choisir l'une de ces options. Vous pouvez les utiliser ensemble ou de manière individuelle.

Une utilisation correcte de Salesforce Lightning Design System implique l’utilisation de ses feuilles de style avec un tout nouveau balisage pour vos pages Visualforce. Encore une fois, il s’agit de la seule méthode prise en charge pour obtenir l’apparence visuelle de Lightning Experience.

Pour cela, téléchargez les feuilles de style de Lightning Design System depuis le site Web et utilisez-les comme n’importe quelle autre feuille de style, ou ajoutez le composant <apex:slds> au balisage de votre page Visualforce. Le composant <apex:slds> permet de référencer les feuilles de style de Lightning Design System sans les charger en tant que ressources statistiques, ce qui simplifie la syntaxe de votre page et évite d’atteindre la limitation en ressources statiques de 250 Mo.

L’utilisation de <apex:slds> est soumise à des consignes et des considérations spécifiques. Pour en savoir plus, suivez le lien vers le guide du développeur Visualforce dans la section Ressources.

Vous pouvez également ajouter les feuilles de style de Lightning Design System et revoir vos pages pour les utiliser. La quantité de travail utile dépend du niveau souhaité de ressemblance à Lightning Experience, ainsi que du balisage et des composants spécifiques à votre code. Vous pouvez obtenir des résultats corrects en procédant ainsi. Cependant, nous ne recommandons pas cette approche. Lightning Design System a été conçu pour être appliqué à un balisage spécifique et ce n’est tout simplement pas ce que Visualforce produit. Il y a une « désadaptation d'impédance » qui, bien qu'elle ne soit pas fatale, sera comme un caillou dans votre chaussure si vous empruntez cette voie.

Enfin, il existe l'autre approche : ajouter des règles et des styles totalement nouveaux à votre feuille de style existante (ou nouvelle), afin que votre balisage actuel ressemble davantage à Lightning Experience. Si votre page est déjà conçue en grande partie avec vos propres feuilles de style, cette approche devrait vous convenir. En revanche, si vous utilisez principalement les composants Visualforce intégrés et les styles Salesforce Classic, vous devrez remplacer les styles de la feuille de style Salesforce Classic.

Bien que cette approche soit techniquement réalisable, nous vous déconseillons de l'utiliser. Celle-ci introduit des dépendances non souhaitables dans vos styles et dans votre balisage. Ces dépendances se trouvent dans la structure, les ID et les classes du HTML rendu par les composants Visualforce intégrés. Soyons très clairs sur ce point : le HTML rendu par les composants Visualforce intégrés est un détail d’implémentation interne susceptible d’être modifié sans avis préalable. Si vous avez des dépendances dans vos feuilles de style, ces dernières seront endommagées.

Salesforce Lightning Design System

Lightning Design System est une infrastructure de conception qui permet de créer des applications d’entreprise semblables à Lightning Experience. Il comprend une infrastructure CSS sophistiquée, un ensemble de ressources graphiques et la police Salesforce Sans. Utilisez Lightning Design System pour créer de superbes pages et applications qui reflètent parfaitement l’interface utilisateur de Lightning Experience.

Lightning Design System a été conçu pour permettre aux clients et aux partenaires de recréer facilement la présentation de Lightning Experience. Il comprend également des outils permettant de personnaliser la présentation afin de l'adapter à votre marque (couleurs, etc.), en cohérence avec l'aspect global de Lightning Experience.

La première chose à savoir est que Lightning Design System suppose une nouvelle structure de marquage et des classes de style. C'est la raison pour laquelle il s'utilise de préférence avec de nouvelles pages et applications. Il se développe autour des capacités des navigateurs modernes et tire profit des dernières pratiques exemplaires relatives au marquage et au style. Même si nous l’apprécions beaucoup, Visualforce existe depuis longtemps. Entre le code HTML qu’il génère et le code statique des pages de clients, la majorité des organisations rencontreront des difficultés pour appliquer Lightning Design System aux pages existantes.

Ressources

Guide du développeur Visualforce Customizing the Appearance and Output of Visualforce Pages
Guide du développeur Visualforce Utilisation de Lightning Design System
Lightning Design System pour les développeurs : Aperçu des composants
Lightning Design System pour les développeurs : Components: Boutons