Verwenden von statischen Ressourcen

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

Erläutern, was statische Ressourcen sind und warum sie verwendet werden
Erläutern der Unterschiede zwischen einzelnen und gezippten statischen Ressourcen
Erstellen und Hochladen einer statischen Ressource
Hinzufügen von statischen Ressourcen zu einer Visualforce-Seite

Hinweis

Lernen Sie auf Deutsch? In diesem Badge ist für die praktischen Trailhead-Aufgaben Englisch als Bearbeitungssprache festgelegt. Übersetzungen werden zur Referenz in Klammern angegeben. Stellen Sie sicher, dass Sie die englischen Werte kopieren und einfügen und stellen Sie die Sprache Ihres Trailhead Playgrounds auf "English (Englisch)" und das Gebietsschema auf "United States (USA)" um. Die zugehörigen Anweisungen finden Sie hier.

Im Badge "Trailhead in Ihrer Sprache" erfahren Sie, wie Sie die übersetzte Trailhead-Umgebung nutzen.

Einführung in statische Ressourcen

Statische Ressourcen ermöglichen Ihnen das Hochladen von Inhalt, den Sie auf einer Visualforce-Seite referenzieren können. Bei Ressourcen kann es sich um Archive (wie ZIP- und JAR-Dateien), Bilder, Stylesheets, JavaScript und andere Dateien handeln.

Statische Ressourcen werden durch die Lightning-Plattform verwaltet und bereitgestellt, die als Inhaltsverteilungsnetzwerk (Content Distribution Network, CDN) für die Dateien fungiert. Die Zwischenspeicherung und Verteilung werden automatisch verarbeitet.

Statische Ressourcen werden mithilfe der globalen Variablen "$Resource" referenziert, die direkt durch Visualforce oder als ein Parameter zu Funktionen wie "URLFOR()" verwendet werden kann.

Erstellen und Hochladen einer einfachen statischen Ressource

Erstellen Sie eine einfache, eigenständige statische Ressource für unabhängige statische Objekte.

Wenn Ihr statisches Objekt nicht mit anderen Objekten verknüpft ist (d. h. kein Bestandteil einer Gruppe an ähnlichen Objekten ist, beispielsweise einer Gruppe von Symbolen), ist es am einfachsten, eine eigenständige statische Ressource zu erstellen.

Laden Sie die aktuelle Version der JavaScript-Bibliothek jQuery von http://jquery.com/download/ herunter.
Geben Sie in Setup im Feld "Quick Find (Schnellsuche)" den Text "Static Resources (Statische Ressourcen)" ein. Wählen Sie Static Resources aus und klicken Sie dann auf New (Neu).
Geben Sie "jQuery" unter "Name" ein.
Klicken Sie auf Datei auswählen und wählen Sie dann die zuvor heruntergeladene jQuery JavaScript-Datei aus.
Wenn Sie das Menü Cache Control (Cache-Steuerung) anzeigen können, wählen Sie "Public (Öffentlich)" aus. Dieses Element ist nicht in allen Organisationen sichtbar.
Klicken Sie auf Save (Speichern).

Sie verfügen nun über eine statische Ressourcenversion von jQuery, die Sie auf Ihren Visualforce-Seiten verwenden können, indem Sie darauf in einem Ausdruck verweisen, z. B. {!$Resource.jQuery }. Ein Vorteil besteht darin, dass Sie die statische Ressource bearbeiten und beispielsweise auf jQuery 3.1.2 aktualisieren können, ohne eine Ihrer Visualforce-Seiten ändern zu müssen. Der Verweis auf statische Ressourcen verarbeitet die Details.

Hinzufügen einer statischen Ressource zu einer Visualforce-Seite

Verwenden Sie die Globale Variable $Resource und die Punktnotation zum Referenzieren einer eigenständigen statischen Ressource.

Öffnen Sie die Developer Console und klicken Sie zum Erstellen einer neuen Visualforce-Seite auf File (Datei) | New (Neu) | Visualforce Page (Visualforce-Seite). Geben Sie "HelloJQuery" als Seitennamen an.

Ersetzen Sie im Editor jedes Markup durch Folgendes.

<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>

Klicken Sie auf Preview (Vorschau), um eine Vorschau Ihrer Seite anzuzeigen, die Sie anzeigen können, während Sie Änderungen vornehmen. Ein neues Fenster sollte sich öffnen, in dem eine kurze Meldung von jQuery angezeigt wird.

Diese Seite veranschaulicht nur, wie eine JavaScript-Ressource auf Ihrer Visualforce-Seite einbezogen wird. Der Schlüssel ist die Verwendung der globalen Variablen $Resource. Verwenden Sie die Punktnotation, um sie mit dem Namen der Ressource in einem <apex:includeScript>- (für JavaScript-Dateien), <apex:stylesheet>- (für CSS-Stylesheets) oder <apex:image>-Tag (für grafische Dateien) zu kombinieren, um sie zu Ihrer Seite hinzuzufügen.

Erstellen und Hochladen einer gezippten statischen Ressource

Erstellen Sie gezippte statische Ressourcen, um zugehörige Dateien zusammen zu gruppieren, die für gewöhnlich gemeinsam aktualisiert werden.

Wenn es sich bei Ihren statischen Objekten um eine Reihe verwandter Elemente handelt (beispielweise eine Reihe an Anwendungssymbolen oder eine komplexe JavaScript-Bibliothek), empfiehlt sich das Erstellen einer gezippten statischen Ressource. Erstellen Sie eine ZIP-Datei, die alle zu gruppierenden Elemente enthält, und laden Sie nur die eine Datei in die Lightning-Plattform hoch.

Laden Sie die aktuelle Version der JavaScript-Bibliothek jQuery Mobile im ZIP-Format von http://jquerymobile.com/download/ herunter.
Öffnen Sie die ZIP-Datei und entfernen Sie das Verzeichnis /demos/ und dessen Inhalt.
Komprimieren Sie den Ordner und benennen Sie ihn in jquery.zip um.
Geben Sie in Setup im Feld "Quick Find (Schnellsuche)" den Text "Static Resources (Statische Ressourcen)" ein. Wählen Sie Static Resources aus und klicken Sie dann auf New (Neu).
Geben Sie "jQueryMobile" unter "Name" ein.
Klicken Sie auf Choose File (Datei wählen) und wählen Sie dann die Datei jquery.zip aus.
Wenn Sie das Menü Cache Control (Cache-Steuerung) anzeigen können, wählen Sie "Public (Öffentlich)" aus. Dieses Element ist nicht in allen Organisationen sichtbar.
Klicken Sie auf Save (Speichern).

Sie verfügen nun über eine statische Ressourcenversion von jQuery Mobile, die Sie auf Ihren Visualforce-Seiten verwenden können. Sie erfahren als Nächstes, wie Sie einzelne Dateien in der gezippten statischen Ressource referenzieren.

Hinzufügen von gezippten statischen Ressourcen zu einer Visualforce-Seite

Verwenden Sie die globale Variable $Resource und die Funktion URLFOR(), um auf Elemente innerhalb einer gezippten statischen Ressource zu verweisen.

Die Funktion URLFOR() kann eine Referenz zu einer gezippten statischen Ressource und einen relativen Pfad zu einem Element darin kombinieren, um einen URL zu erstellen, der mit Visualforce-Komponenten verwendet werden kann, die statische Vermögenswerte referenzieren. Beispielsweise gibt URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png') einen URL zu einem bestimmten grafischen Vermögenswert in der gezippten statischen Ressource zurück, der durch die <apex:image>-Komponente verwendet werden kann. Sie können ähnliche URLs für JavaScript und Stylesheet-Dateien für die Komponenten <apex:includeScript> und <apex:stylesheet> erstellen.

Wenn Sie noch nicht die aktuelle Version der JavaScript-Bibliothek von jQuery Mobile heruntergeladen haben, befolgen Sie die Anweisungen im Abschnitt "Erstellen und Hochladen einer gezippten statischen Ressource". Fügen Sie sie als statische Ressource hinzu.
Öffnen Sie die Developer Console und klicken Sie zum Erstellen einer neuen Visualforce-Seite auf File (Datei) | New (Neu) | Visualforce Page (Visualforce-Seite). Geben Sie "jQueryMobileResources" als Seitennamen ein.

Ersetzen Sie im Editor jedes Markup durch Folgendes.

<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>

In diesem Beispiel wird Version 1.4.5 der JavaScript-Bibliothek jQuery Mobile verwendet. Wenn Sie eine neuere Version verwenden, ändern Sie die Versionsnummer in den Zeilen 4 und 7 Ihres Codes.

Klicken Sie auf Preview (Vorschau), um eine Vorschau Ihrer Seite anzuzeigen, die Sie anzeigen können, während Sie Änderungen vornehmen. Ein neues Fenster wird geöffnet und zeigt ein paar Bilder aus der statischen jQuery Mobile-Ressource an.

Zwecks Einfachheit zeigt diese Seite nur an, wie gezippte statische Ressourcen auf Ihrer Visualforce-Seite referenziert werden. Lesen Sie die zusätzlichen Ressourcen, wenn Sie weitere Informationen über das Kombinieren von Visualforce und JavaScript-Bibliotheken wie jQuery Mobile erhalten möchten.

Ressourcen