Utilisation de ressources statiques

Objectifs de formation

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

Présenter les ressources statiques et pourquoi les utiliser
Présenter la différence entre des ressources statiques individuelles et compressées
Créer et charger une ressource statique
Ajouter des ressources statiques à une page Visualforce.

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. Veillez à copier/coller les valeurs en anglais, puis à définir la langue de votre Trailhead Playground sur Anglais et les paramètres régionaux sur États-Unis. Suivez les instructions ici.

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Présentation des ressources statiques

Les ressources statiques permettent de charger un contenu que vous référencez dans une page Visualforce. Les ressources peuvent être des archives (telles que des fichiers .zip et .jar), des images, des feuilles de style, un code JavaScript et d'autres fichiers.

Les ressources statiques sont gérées et distribuées par la plate-forme Lightning, qui agit comme un réseau de distribution de contenus (CDN) pour les fichiers. La mise en cache et la distribution sont gérées automatiquement.

Les ressources statiques sont référencées à l’aide de la variable globale $Resource, qui peut être utilisée directement par Visualforce, ou en tant que paramètre dans des fonctions telles que URLFOR().

Création et chargement d'une ressource statique simple

Créez une ressource statique simple et autonome pour des ressources statiques indépendantes.

Lorsque votre ressource statique n'est associée à aucune autre ressource, c.-à-d. qu'elle ne fait pas partie d'un ensemble de ressources similaires, par exemple un groupe d'icônes, la méthode la plus simple consiste à créer une ressource statique autonome.

Téléchargez la version actuelle de la bibliothèque JavaScript jQuery à l’adresse http://jquery.com/download/.
Dans Configuration, saisissez Ressources statiques dans la zone Recherche rapide, puis sélectionnez Ressources statiques et cliquez sur Nouveau.
Dans Nom, saisissez jQuery.
Cliquez sur Sélectionner un fichier, puis sélectionnez le fichier jQuery JavaScript que vous avez téléchargé précédemment.
Si le menu Contrôle du cache est affiché, sélectionnez Public. Cet élément n'est pas visible dans toutes les organisations.
Cliquez sur Enregistrer.

Vous disposez désormais d’une version de ressource statique jQuery, que vous pouvez utiliser dans vos pages Visualforce en la référençant dans une expression telle que {!$Resource.jQuery }. Pratique : vous pouvez modifier la ressource statique et la mettre à jour vers, par exemple, jQuery 3.1.2, sans modifier vos pages Visualforce. La référence de la ressource statique gère les détails.

Ajout d’une ressource statique à une page Visualforce

Utilisez la variable globale $Resource et une notation pointée pour référencer une ressource statique autonome.

Ouvrez la Developer Console, puis cliquez sur File (Fichier) | New (Nouveau) | Visualforce Page (Page Visualforce) pour créer une page Visualforce. Saisissez HelloJQuery en tant que nom de page.

Dans l'éditeur, remplacez le balisage par :

<apex:page>
    <!-- Add the static resource to page's <head> -->
    <apex:includeScript value="{!Resource.jQuery }"/>
    <!-- A short bit of jQuery to test it's there -->
    <script type="text/javascript">
        jQuery.noConflict();
        jQuery(document).ready(function() {
            jQuery("#message").html("Hello from jQuery!");
        });
    </script>
    <!-- Where the jQuery message will appear -->
    <h1 id="message"></h1>
</apex:page>

Cliquez sur Preview (Aperçu) pour prévisualiser la page à mesure que vous la modifiez. Une nouvelle fenêtre doit s’ouvrir, affichant un court message de jQuery.

Cette page se contente d’illustrer une ressource JavaScript dans votre page Visualforce. L'important est d'utiliser la variable globale $Resource. Utilisez la notation pointée pour combiner la variable avec le nom de la ressource dans une balise <apex:includeScript> (pour des fichiers JavaScript), <apex:stylesheet> (pour des feuilles de style CSS) ou <apex:image> (pour des fichiers graphiques) afin de l’ajouter à votre page.

Création et chargement d'une ressource statique compressée

Créez des ressources statiques compressées pour regrouper des fichiers associés, qui sont généralement mis à jour en même temps.

Lorsque vos ressources statiques forment un ensemble d'éléments associés, par exemple un ensemble d'icônes d'application ou une bibliothèque JavaScript complexe, il est préférable de créer une ressource statique compressée. Créez un fichier ZIP contenant tous les éléments à regrouper, puis chargez uniquement ce fichier ZIP sur la plate-forme Lightning.

Téléchargez la version actuelle de la bibliothèque JavaScript jQuery Mobile, au format ZIP, à l’adresse http://jquerymobile.com/download/.
Ouvrez le fichier ZIP et supprimez le répertoire /demos/ ainsi que son contenu.
Compressez le dossier et renommez-le jquery.zip.
Dans Configuration, saisissez Ressources statiques dans la zone Recherche rapide, puis sélectionnez Ressources statiques et cliquez sur Nouveau.
Dans Nom, saisissez jQueryMobile.
Cliquez sur Choisir un fichier, puis choisissez le fichier jquery.zip.
Si le menu Contrôle du cache est affiché, sélectionnez Public. Cet élément n'est pas visible dans toutes les organisations.
Cliquez sur Enregistrer.

Vous disposez désormais d’une version des ressources statiques jQuery Mobile, que vous pouvez utiliser dans vos pages Visualforce. Nous allons ensuite présenter comment référencer des fichiers individuels dans la ressource statique compressée.

Ajout de ressources statiques compressées à une page Visualforce

Utilisez la variable globale $Resource et la fonction URLFOR() pour référencer des éléments dans une ressource statique compressée.

La fonction URLFOR() peut combiner une référence à une ressource statique compressée et un chemin relatif vers un élément de cette ressource afin de créer une URL qui peut être utilisée avec des composants Visualforce qui référencent des ressources statiques. Par exemple, URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png') renvoie une URL menant à une ressource graphique spécifique dans la ressource statique compressée, qui peut être utilisée par le composant <apex:image>. Vous pouvez construire des URL similaires pour des fichiers JavaScript et les feuilles de style des composants <apex:includeScript> et <apex:stylesheet>.

Si vous n'avez pas encore téléchargé la version actuelle de la bibliothèque jQuery Mobile JavaScript, suivez les instructions de la section Création et chargement d'une ressource statique compressée. Ajoutez la version en tant que ressource statique.
Ouvrez la Developer Console, puis cliquez sur File (Fichier) | New (Nouveau) | Visualforce Page (Page Visualforce) pour créer une page Visualforce. Saisissez jQueryMobileResources en tant que nom de page.

Dans l'éditeur, remplacez le balisage par :

<apex:page showHeader=”false” sidebar=”false” standardStylesheets=”false”>
    <!-- Add static resource to page’s <head> -->
    <apex:stylesheet value=”{!
        URLFOR($Resource.jQueryMobile,’jquery.mobile-1.4.5.css’)}”/>
    <apex:includeScript value=”{!$Resource.jQueryMobile }”/>
    <apex:includeScript value=”{!
        URLFOR($Resource.jQueryMobile,’jquery.mobile-1.4.5.js’)}”/>
    <div style=”margin-left: auto; margin-right: auto; width: 50%”>
        <!-- Display images directly referenced in a static resource -->
        <h3>Images</h3>
        <p>A hidden message:
            <apex:image alt=”eye” title=”eye”
                url=”{!URLFOR($Resource.jQueryMobile, ‘images/icons-png/eye-black.png’)}”/>
            <apex:image alt=”heart” title=”heart”
                url=”{!URLFOR($Resource.jQueryMobile, ‘images/icons-png/heart-black.png’)}”/>
            <apex:image alt=”cloud” title=”cloud”
                url=”{!URLFOR($Resource.jQueryMobile, ‘images/icons-png/cloud-black.png’)}”/>
        </p>
    <!-- Display images referenced by CSS styles, all from a static resource. -->
    <h3>Background Images on Buttons</h3>
    <button class=”ui-btn ui-shadow ui-corner-all
        ui-btn-icon-left ui-icon-action”>action</button>
    <button class=”ui-btn ui-shadow ui-corner-all
        ui-btn-icon-left ui-icon-start”>star</button>
    </div>
</apex:page>

Cet exemple utilise la version 1.4.5 de la bibliothèque JavaScript jQuery Mobile. Si vous utilisez une version plus récente, mettez à jour le numéro de version dans les lignes 4 et 7 de votre code.

Cliquez sur Preview (Aperçu) pour prévisualiser la page à mesure que vous la modifiez. Une nouvelle fenêtre s’ouvre et affiche quelques images provenant de la ressource statique jQuery Mobile.

Par souci de simplification, cette page montre uniquement comment référencer des ressources statiques compressées dans votre page Visualforce. Pour plus d’informations sur la combinaison bibliothèques Visualforce et JavaScript, par exemple jQuery Mobile, reportez-vous aux ressources supplémentaires.

Ressources