Création et modification de pages Visualforce

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Présenter une page Visualforce et ses principaux attributs
  • Citer et ouvrir des pages Visualforce existantes dans votre organisation
  • Créer et modifier une page Visualforce en utilisant la Developer Console.
  • Identifier, ajouter et personnaliser des balises et des attributs Visualforce dans l’éditeur

Introduction à la création de pages Visualforce

Les pages Visualforce sont des blocs de construction de base destinés aux développeurs d’applications. Une page Visualforce est semblable à une page Web standard, mais dotée de fonctionnalités puissantes qui permettent d’accéder, d’afficher et de mettre à jour les données de votre organisation. Les pages peuvent être référencées et invoquées via une URL unique, de la même façon que dans un serveur Web traditionnel.

Visualforce utilise un langage de balisage similaire au langage HTML. Chaque balise Visualforce correspond à un composant à gros grain ou à grain fin, tel qu’une section de page, une vue de liste ou un champ individuel. Visualforce regroupe près de 150 composants intégrés et permet aux développeurs de créer leurs propres composants. Le balisage Visualforce peut être librement combiné à un balisage HTML, à des styles CSS et à des bibliothèques JavaScript, ce qui offre une souplesse considérable dans la mise en œuvre de l’interface utilisateur de votre application.

Vous pouvez afficher, créer et modifier des pages Visualforce de plusieurs façons dans Salesforce. Il est également possible de créer et de modifier des pages Visualforce à l’aide des API Salesforce, qui activent une variété d’outils externes.

Création de pages Visualforce dans la Developer Console

Utilisez la Developer Console pour créer et modifier des pages Visualforce, et accédez aux autres outils de développement puissants de Lightning Platform. La Developer Console fournit la mise en évidence automatique de la syntaxe, la correspondance de paire de balises, la suggestion automatique et la saisie automatique, la mise en retrait intelligente, et d'autres fonctionnalités de modification du balisage et du code. Cet outil intégré est le plus utile lorsque vous travaillez sur la même page depuis un certain temps, ou sur des pages Visualforce qui contiennent des contrôleurs personnalisés, un code plus long, plus complexe, etc.

Pour créer une page Visualforce dans la Developer Console, procédez comme suit :

  1. Ouvrez la Developer Console sous Your Name (Votre nom) ou le menu d’accès rapide (Icône d’engrenage de configuration). La Developer Console s'ouvre dans une nouvelle fenêtre.
  2. Cliquez sur File (Fichier) | New (Nouveau) | Visualforce Page (Page Visualforce).
  3. Saisissez HelloWorld pour nommer la nouvelle page, puis cliquez sur OK. Une page Visualforce vide s’ouvre dans la Developer Console.
  4. Dans l'éditeur, saisissez le balisage ci-dessous pour la page.
    <apex:page>
        <h1>Hello World</h1>
    </apex:page>
  5. Cliquez sur File (Fichier) | Save (Enregistrer).
  6. Pour afficher votre nouvelle page, cliquez sur Preview (Aperçu). La page restituée s'ouvre dans une nouvelle fenêtre. Notez que l'aperçu présente votre page sans style Salesforce. Pour voir votre page dans le contexte de Lightning Experience, revenez à la fenêtre principale de Lightning Experience dans votre navigateur. Ouvrez la console JavaScript de votre navigateur et saisissez le code suivant. N’oubliez pas de remplacer pageName par le nom de votre page :
    $A.get("e.force:navigateToURL").setParams(
        {"url": "/apex/pageName"}).fire();
    Ce code JavaScript déclenche l’événement Lightning Experience navigateToURL et équivaut à la saisie de l’URL /apex/PageName classique (vous pouvez même constater la présence de ce modèle d’URL dans le code).
  7. Dans l'éditeur, ajoutez un texte à votre page, puis enregistrez-la. La Developer Console La fenêtre d’aperçu est automatiquement actualisée pour refléter vos modifications lorsque vous enregistrez la page. Nous supprimerons plus tard l'instruction d'enregistrement, mais vous devez enregistrer vos pages entre chaque étape.

Cliquez sur File (Fichier) | Open (Ouvrir) pour afficher la liste des pages Visualforce existantes. Double-cliquez sur une page pour l'ouvrir. Vous pouvez également ouvrir d’autres entités de Salesforce, notamment des classes et des déclencheurs Apex, des composants Visualforce, etc.

Ajout d'attributs à l'aide de la suggestion automatique

Définissez des attributs dans des composants Visualforce afin de personnaliser leur comportement. Utilisez la suggestion automatique pour ajouter rapidement des attributs et des valeurs à des balises de composant Visualforce.

Pour ajouter et modifier des attributs dans une balise Visualforce, procédez comme suit :

  1. Sur votre page HelloWorld, cliquez sur la balise ouvrante <apex:page>, avant le caractère fermant >. Insérez un espace, puis saisissez s. La suggestion automatique présente une liste de fins possibles correspondant à votre saisie. À mesure que vous saisissez des caractères, la liste de suggestions diminue et indique uniquement les valeurs correspondantes. Suggestion automatique de valeurs d'attribut Visualforce
  2. Appuyez sur la touche flèche vers le bas jusqu’à ce que menu latéral soit sélectionné. Appuyez sur la touche Retour. L’attribut Menu latéral est ajouté à la balise <apex:page> dans votre balisage, et la suggestion automatique présente des valeurs possibles correspondantes.
  3. Utilisez les touches fléchées ou saisissez f pour sélectionner false, puis appuyez sur la touche Retour. Votre code doit se présenter comme suit :
    <apex:page sidebar="false">
        <h1>Hello World</h1>
    </apex:page>
  4. Enregistrez vos modifications.
  5. Répétez les étapes ci-dessus pour ajouter showHeader="false" à la balise <apex:page>, puis enregistrez vos modifications. Votre code doit se présenter comme suit :
    <apex:page sidebar="false" showHeader="false">
        <h1>Hello World</h1>
    </apex:page>

La suggestion automatique est très utile lorsque vous connaissez les composants à utiliser, leur nature et leur fonction. Si vous découvrez Visualforce, reportez-vous régulièrement au document Référence des composants standard pour connaître les composants disponibles, leur fonction, leur utilisation et comment les personnaliser.

Au-delà des concepts de base

Notez que les attributs sidebar et showHeader sont sans effet dans Lightning Experience, et qu'il n'est pas possible de supprimer l'en-tête de Lightning Experience. Bien que la valeur de showHeader soit true, elle est sans effet dans Lightning Experience.

La page contient quelques feuilles de style Salesforce qui permettent d’adapter les choix de police, de taille, etc., de Salesforce. Pour supprimer tous les choix standard de Salesforce, ajoutez standardStylesheets="false" pour désactiver également les styles.

Ajout et organisation des composants pour structurer la page

Ajoutez des composants à votre page Visualforce et organisez-les pour structurer la page.

Pour ajouter de nouvelles balises Visualforce à votre page pour structurer la page, procédez comme suit :

  1. Dans votre page HelloWorld, ajoutez un composant <apex:pageBlock> sous le texte « Hello World ». <apex:pageBlock> est un élément d’interface utilisateur structuré qui regroupe des éléments associés sur une page. Utilisez la suggestion automatique pour l’ajouter, puis définissez la valeur de l’attribut title sur « Titre d’un bloc ».
  2. Ajoutez un composant <apex:pageBlockSection> dans le composant <apex:pageBlock>. Définissez la valeur de l’attribut title sur « Titre d’une section ». <apex:pageBlockSection> est un autre composant qui ajoute une structure et une hiérarchie à une page. Dans la page affichée, l’utilisateur peut réduire les éléments <apex:pageBlockSection> pour tout masquer à l’exception du titre de la section.
  3. Ajoutez un texte dans le composant <apex:pageBlockSection>, par exemple « J’utilise trois composants ! » dans le code ci-dessous. Votre code doit se présenter comme suit :
    <apex:page>
        <h1>Hello World</h1>
        <apex:pageBlock title="A Block Title">
            <apex:pageBlockSection title="A Section Title">
                I'm three components deep!
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:page>
    Votre page affiche une structure, avec un titre général, une section réductible avec un titre, et du texte brut. Une page simple avec des composants imbriqués
  4. Ajoutez un autre <apex:pageBlockSection> après le premier, puis définissez la valeur de l’attribut title sur « Une nouvelle section ». Ajoutez un texte au corps du composant, comme avec le premier <apex:pageBlockSection>. Votre code doit se présenter comme suit :
    <apex:page>
        <h1>Hello World</h1>
        <apex:pageBlock title="A Block Title">
            <apex:pageBlockSection title="A Section Title">
                I'm three components deep!
            </apex:pageBlockSection>
            <apex:pageBlockSection title="A New Section">
                This is another section.
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:page>
    Remarquez la manière dont les balises <apex:pageBlockSection> sont imbriquées dans la balise <apex:pageBlock>. Vous ne pouvez pas utiliser une balise <apex:pageBlockSection> enfant sans la placer dans une balise <apex:pageBlock> parent.
Vous connaissez maintenant les principes fondamentaux de la construction d'une page, notamment la création, l'ajout d'attributs et de composants, et l'organisation des composants pour structurer et concevoir votre page.

En savoir plus...

La Developer Console est l’outil le plus puissant avec les fonctionnalités les plus complètes pour le développement de Lightning Platform depuis votre organisation Salesforce.
Il existe deux autres méthodes intégrées de création et de modification de pages Visualforce dans Salesforce.
  • Le mode de développement « quick fix » et pied de page est une méthode qui permet de créer rapidement une page ou d'apporter des modifications rapides à une page existante. Cette méthode est idéale pour des modifications rapides ou créer une petite page afin de tester un tout nouveau code, avant de les incorporer aux pages de votre application.
  • L’éditeur Configuration, disponible dans Configuration en saisissant Pages Visualforce dans la zone Recherche rapide, puis en sélectionnant Pages Visualforce, est certes l’éditeur de base, mais il permet d’accéder à des paramètres de page qui ne sont pas disponibles dans la Developer Console ou dans le pied de page du mode de développement.

Plusieurs outils externes sont également disponibles, notamment le plug-in IDE Lightning Platform pour Eclipse. Ils peuvent se connecter à votre organisation Salesforce et servir au développement Visualforce.

Les composants <apex:pageBlock> et <apex:pageBlockSection> que vous ajoutez à votre page affichent une interface utilisateur qui correspond aux éléments habituels de l’interface de Salesforce Classic. D’autres composants permettent également de reproduire le style visuel de la plate-forme, notamment <apex:pageBlockSectionItem> et <apex:pageBlockButtons>. Pouvez-vous deviner lequel s’incorpore dans un <apex:pageBlockSection> ?

Visualforce comprend presque 150 composants intégrés qui offrent une grande diversité d’éléments et de comportements pour l’interface utilisateur. Le document Visualforce Standard Component Reference répertorie ces composants et présente leurs attributs, avec un exemple de code qui montre comment utiliser les composants.

Formez-vous gratuitement !
Créez un compte pour continuer.
Qu’est-ce que vous y gagnez ?
  • Obtenez des recommandations personnalisées pour vos objectifs de carrière
  • Mettez en pratique vos compétences grâce à des défis pratiques et à des questionnaires
  • Suivez et partagez vos progrès avec des employeurs
  • Découvrez des opportunités de mentorat et de carrière