Create a New Visualforce Page
Remarque
Vous souhaitez apprendre en français ? Dans ce badge, les validations de défi pratique Trailhead se font en anglais. Les traductions sont fournies entre parenthèses à titre de référence. Dans votre Trailhead Playground, veillez (1) à définir les États-Unis comme région, (2) à sélectionner l’anglais comme langue, et (3) à copier et coller uniquement les valeurs en anglais. Suivez les instructions ici.
Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.
Créer une page Visualforce
Ce que vous allez faire
- Créer une simple page Visualforce pour tester le fonctionnement de Design System
Étape 1 : Créer une page
- Dans votre organisation, accédez à Configuration.
- Dans le menu latéral gauche, dans la zone Quick Find (Recherche rapide), saisissez
pages.
- Dans le menu latéral, cliquez sur Visualforce Pages (Pages Visualforce), puis sur New (Nouveau).
Renseignez le formulaire comme suit :
- Dans Label (Étiquette) :
Trailhead_SLDS_Contacts
- Dans Name (Nom) : (devrait afficher par défaut
Trailhead_SLDS_Contacts)
- Cliquez sur Save (Enregistrer).
Étape 2 : Ajouter le balisage initial
Une fois la page créée, utilisez votre outil de création favori pour inclure le balisage suivant dans la page :
Astuce : Vous cliquez sur Copy (Copier) au-dessus de n’importe quel fragment de code dans Trailhead pour copier et coller facilement du code.
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0"> <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>Salesforce Lightning Design System Trailhead Module</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Import the Design System style sheet --> <apex:slds /> </head> <apex:remoteObjects > <apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/> </apex:remoteObjects> <body> <!-- REQUIRED SLDS WRAPPER --> <div class="slds-scope"> <!-- MASTHEAD --> <p class="slds-text-heading_label slds-m-bottom_small"> Salesforce Lightning Design System Visualforce Workshop </p> <!-- / MASTHEAD --> <!-- PAGE HEADER --> <!-- / PAGE HEADER --> <!-- PRIMARY CONTENT WRAPPER --> <div class="myapp slds-p-horizontal_medium"> <ul id="contact-list" class="slds-has-dividers_bottom-space"></ul> </div> <!-- / PRIMARY CONTENT WRAPPER --> <!-- FOOTER --> <!-- / FOOTER --> </div> <!-- / REQUIRED SLDS WRAPPER --> <!-- JAVASCRIPT --> <!-- / JAVASCRIPT --> </body> </html> </apex:page> La balise <apex:slds /> en tête du document : elle importe les styles du Design System et les évaluations dans votre page Visualforce
Le wrapper <div class="slds-scope"> externe : il est important d’emballer tout votre balisage Lightning Design System dans ce wrapper. Les styles du Design System s’appliquent uniquement aux éléments inclus dans ce wrapper.
Étape 3 : Prévisualiser
Enregistrez votre page, puis cliquez sur le bouton Preview (Aperçu). Un simple en-tête doit s’afficher avec la mention « Salesforce Lightning Design System Visualforce Workshop ».
Ce n'est pas beaucoup, mais cette page est la première pierre du projet.
En progressant dans ce projet, nous allons améliorer le balisage étape par étape avec des composants Design System supplémentaires. Par souci de clarté, nous n'allons pas expliquer en détail chaque structure de classe de composant Design System. Nous proposons toutefois des liens vers une documentation complémentaire sur le site Web Design System.
