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.

Einführung zu statischen 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.

  1. Laden Sie die aktuelle Version der jQuery JavaScript-Bibliothek herunter. Zum Zeitpunkt der Erstellung dieses Dokuments ist es jQuery 3.1.0. Wenn der Link nicht funktioniert oder wenn Sie sicherstellen möchten, dass Sie die neueste Version herunterladen, wechseln Sie zu http://jquery.com/download/ und laden Sie die neueste dort verfügbare Version herunter. Hinweis Klicken Sie mit der rechten Maustaste auf den Direktlink, um die Datei herunterzuladen, anstelle sie in einem Browserfenster zu öffnen.
  2. Geben Sie in Setup im Feld "Schnellsuche" den Text "Statische Ressourcen" ein, wählen Sie Statische Ressourcen aus und klicken Sie dann auf Neu.
  3. Geben Sie "jQuery" unter "Name" ein.
  4. Klicken Sie auf Datei auswählen und wählen Sie dann die zuvor heruntergeladene jQuery JavaScript-Datei aus. Erstellen einer einfachen statischen Ressource
  5. Wenn Sie das Menü Cache-Steuerung anzeigen können, wählen Sie "Öffentlich" aus. Dieses Element ist nicht in allen Organisationen sichtbar.
  6. Klicken Sie auf 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.
  1. Öffnen Sie die Developer Console und klicken Sie zum Erstellen einer neuen Visualforce-Seite auf File | New | Visualforce Page. Geben Sie "HelloJQuery" als Seitennamen an.
  2. 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>
  3. Klicken Sie auf Vorschau, um eine Vorschau Ihrer Seite anzuzeigen, die Sie anzeigen können, während Sie Änderungen vornehmen. Es sollte ein neues Fenster geöffnet werden, in dem die standardmäßige Salesforce-Seitenkopfzeile und -Randleistenelemente sowie eine kurze Meldung aus jQuery angezeigt werden.

Diese Seite veranschaulicht nur, wie eine JavaScript-Ressource auf Ihrer Visualforce-Seite einbezogen wird. Der Schlüssel besteht in der 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.

  1. Laden Sie die aktuelle Version der jQuery Mobile JavaScript-Bibliothek im ZIP-Format herunter. Zum Zeitpunkt der Erstellung dieses Dokuments ist es jQuery Mobile 1.4.5. Wenn der Link nicht funktioniert oder wenn Sie sicherstellen möchten, dass Sie die neueste Version herunterladen, wechseln Sie zu http://jquerymobile.com/download/ und laden Sie die neueste Version der dort verfügbaren ZIP-Datei herunter. Wenn die jQuery Mobile ZIP-Datei größer als 5 MB ist, bearbeiten Sie die ZIP-Datei, um das Verzeichnis "/demo/" und dessen Inhalte zu entfernen, und laden Sie das kleinere ZIP-Archiv hoch.
  2. Geben Sie in Setup im Feld "Schnellsuche" den Text "Statische Ressourcen" ein, wählen Sie Statische Ressourcen aus und klicken Sie dann auf Neu.
  3. Geben Sie "jQueryMobile" unter "Name" ein.
  4. Klicken Sie auf Datei auswählen und wählen Sie dann die zuvor heruntergeladene jQuery Mobile-ZIP-Datei aus. Erstellen einer gezippten statischen Ressource
  5. Wenn Sie das Menü Cache-Steuerung anzeigen können, wählen Sie "Öffentlich" aus. Dieses Element ist nicht in allen Organisationen sichtbar.
  6. Klicken Sie auf 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 Elemente innerhalb einer gezippten statischen Ressource zu referenzieren.

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.

  1. 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. Wenn die Datei größer als 5 MB ist, stellen Sie sicher, dass Sie die ZIP-Datei so bearbeiten, dass das Verzeichnis "/demo/" und sein Inhalt entfernt werden. Laden Sie das kleinere ZIP-Archiv hoch.
  2. Öffnen Sie die Developer Console und klicken Sie zum Erstellen einer neuen Visualforce-Seite auf File | New | Visualforce Page. Geben Sie "jQueryMobileResources" als Seitennamen ein.
  3. Ersetzen Sie im Editor jedes Markup durch Folgendes.
    <apex:page showHeader="false" sidebar="false" standardStylesheets="false">
        <!-- Add static resources to page's <head> -->
        <apex:stylesheet value="{!
              URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.css')}"/>
        <apex:includeScript value="{! $Resource.jQuery }"/>
        <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-star">star</button>
        </div>
    </apex:page>
  4. Klicken Sie auf 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. jQuery-Schaltflächen über statische Ressourcen

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.

Weitere Infos

Statische Ressourcen sind oftmals die beste Möglichkeit, Entwurfs- und Skriptobjekte in Ihre Anwendungen der Lightning-Plattform einzubeziehen. Zudem gibt es eine Vielzahl an Möglichkeiten, diese Objekte mit Ihren Visualforce-Seiten zu kombinieren.

Wenn Sie das Zusammenführen von ein paar statischen Ressourcen für jQuery und jQuery Mobile gemocht haben, werden Sie die vordefinierten Sammlungen an statischen Ressourcen lieben. Mit Salesforce Mobile Packs können Sie Web- und Hybridanwendungen erstellen, die in der Salesforce-Plattform mithilfe von Branchenstandard-Webtechnologien wie HTML5, CSS3 und JavaScript sowie häufig verwendeten Frameworks wie jQuery Mobile, AngularJS und Backbone.js integriert werden können.