Grundlagen wichtiger Betrachtungen zum visuellen Design

Lernziele

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

Beschreiben von zwei Möglichkeiten, die Formate integrierter Visualforce-Komponenten zu ändern
Beschreiben von zwei Unterschieden zwischen Salesforce Classic- und Lightning Experience-Formaten, die mit CSS-Stylesheets geändert werden können.
Beschreiben von zwei Konzepten, das Salesforce Lightning Design System auf Visualforce-Seiten anzuwenden.

Grundlagen wichtiger Betrachtungen zum visuellen Design

Visualforce-Seiten sehen unabhängig davon, ob sie in Salesforce Classic oder Lightning Experience ausgeführt werden, immer gleich aus, sofern Sie sie nicht für eine Anpassung an den entsprechenden Benutzeroberflächenkontext überarbeitet haben. Integrierte Visualforce-Komponenten, die Benutzeroberflächenelement anzeigen, können nicht ohne Weiteres dem Erscheinungsbild von Lightning Experience entsprechend umgestaltet werden.

Insbesondere wird der von den integrierten Visualforce-Komponenten gerenderte HTML-Code nicht geändert, wenn die Seite in Lightning Experience angezeigt wird. Weiterhin werden die für die betreffenden Komponenten verwendeten Salesforce Classic-Stylesheets standardmäßig von der Seite geladen. Dies führt dazu, dass Seiten, die die Komponenten <apex:inputField>, <apex:outputField> und <apex:pageBlock> sowie andere undifferenzierte und differenzierte Komponenten, die der visuellen Gestaltung von Salesforce Classic entsprechen, weiterhin diese visuelle Gestaltung aufweisen. Sie erhalten so ein Stück von Salesforce Classic mitten in Lightning Experience.

Im Allgemeinen wird empfohlen, für vorhandene Seiten keine Anpassungen vorzunehmen, damit sie der visuellen Gestaltung von Lightning Experience entsprechen. Lightning Experience wird ständig weiterentwickelt und eine eigenständige Anpassung der Gestaltung bedeutet, dass Sie ein bewegliches Ziel jagen. Das ist sehr aufwändig.

In einigen Fällen kann es jedoch wünschenswert sein, dass einige Seiten mehr der visuellen Gestaltung von Lightning Experience entsprechen. Für neue Seiten oder wenn Sie den Aufwand nicht scheuen, gibt es einige hervorragenden Tools zum Erstellen von Seiten, die sich perfekt in Lightning Experience einfügen.

Beeinflussen der Gestaltung von Standardkomponenten

Visualforce bietet eine Reihe von Möglichkeiten, um die Gestaltung von Standardkomponenten anzupassen oder zu überschreiben. Wenn Sie lediglich kleine und unbedeutende Änderungen am Erscheinungsbild dieser Komponenten vornehmen möchten, ist der entsprechende Aufwand recht überschaubar. Nachstehend werden einige verfügbare Tools behandelt, um die Gestaltung zu beeinflussen.

Gestalten einzelner Komponenten

Visualforce-Komponenten, die HTML erzeugen, verfügen über durchgängige style- und styleClass-Attribute. Diese Attribute bieten die Möglichkeit, eigene Stile und Stilklassen zu verwenden, um das Erscheinungsbild des resultierenden HTML-Codes zu steuern. style ermöglicht die direkte Festlegung von Stilen für eine Komponente. Demgegenüber bietet styleClass die Möglichkeit, Klassen für Stile einzubinden, die an anderen Stellen definiert sind. Der folgende Code legt beispielsweise die Klasse von <apex:outputText> fest und wendet einen Stil an.

<apex:page>
    <style type="text/css">
        .asideText { font-style: italic; }
    </style>
    <apex:outputText style="font-weight: bold;"
        value="This text is styled directly."/>
    <apex:outputText styleClass="asideText"
        value="This text is styled via a stylesheet class."/>
</apex:page>

Hinzufügen eines benutzerdefinierten Stylesheets

Sie können mithilfe von statischen Ressourcen und dem <apex:stylesheet>-Tag eigene benutzerdefinierte Stylesheets zu Visualforce-Seiten hinzufügen. Fügen wir nun als Beispiel die Stylesheet-Datei app-styles.css zu Ihrer Seite hinzu.

Wenn app-styles.css als eigenständige statische Ressource namens "AppStylesheet" hochgeladen wurde, fügen Sie Folgendes zu Ihrer Seite hinzu:

<apex:stylesheet value="{!$Resource.AppStylesheet}"/>

Wenn app-styles.css in eine statischen Ressourcenarchiv (wie etwa einer ZIP- oder JAR-Datei) namens "AppStyles" enthalten ist, verwenden Sie die URLFOR-Funktion. Geben Sie im ersten Parameter den Archivnamen und im zweiten Parameter den Pfad zur Datei app-styles.css innerhalb des Archivs an:

<apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'app-styles.css')}"/>

Anschließend können Sie alle im Stylesheet enthaltenen Stile verwenden und in styleClass-Attributen des Visualforce-Tags darauf weisen (wie zuvor im asideText-Stil).

Diese Vorgehensweise wird empfohlen, um CSS-Stildefinitionen zu Visualforce-Seiten hinzuzufügen, da das Stylesheet in Seiten gemeinsam genutzt und das Markup minimiert wird, das Sie zu den einzelnen Seiten hinzufügen müssen.

Die Ausnahme zu dieser Methode beim Hinzufügen eines Stylesheets ist das Salesforce Lightning Design System. Das Lightning Design System ist ein fantastisches vollkommen neues Toolkit für die Gestaltung Ihrer Seiten, das wir in Kürze ausführlich behandeln werden.

Sie können das Lightning Design System zwar als statische Ressource hochladen und es anhand von <apex:stylesheet> referenzieren, aber es gibt noch eine einfachere Lösung: Schließen Sie ganz einfach <apex:slds /> an einer beliebigen Stelle im Markup auf Ihrer Seite ein.

Verschiedene Stile in Lightning Experience

Verwenden Sie den folgenden Markup, um ein benutzerdefiniertes Stylesheet nur dann zu laden, wenn Ihre Seite in Lightning Experience ausgeführt wird. Das ist ähnlich wie beim Visualforce-Markup-Beispiel in der Lektion Gemeinsame Nutzung von Visualforce-Seiten zwischen Salesforce Classic und Lightning Experience.

<apex:page standardController="Account">
    <!-- Base styles -->
    <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'app-styles.css')}" />
    <!-- Lightning Desktop extra styles -->
    <apex:variable var="uiTheme" value="lightningDesktop"
        rendered="{!$User.UIThemeDisplayed == 'Theme4d'}">
        <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'lightning-styling.css')}" />
    </apex:variable>
    <!-- Rest of your page -->
</apex:page>

OK, dies sind Tools. Als nächstes werden einige Verwendungsmöglichkeiten behandelt.

Gestaltungsstrategien und Empfehlungen

Zum Erstellen von Visualforce-Seiten, die der visuellen Gestaltung von Lightning Experience entsprechen, verwenden Sie für die neuen Seiten das Lightning Design System. Es gibt mehrere Möglichkeiten zur Nutzung des Lightning Design System in Ihren Visualforce-Seiten.

Lassen Sie uns aus übergeordneter Sicht die verschiedenen Strategien untersuchen, um die Gestaltung von Lightning Experience auf Ihre Seiten zu übernehmen, bevor wir tiefer einsteigen. Dabei sollen insbesondere vorhandene Seiten betrachtet werden.

Es gibt zwei Möglichkeiten, um die Gestaltung vorhandener Seiten zu beeinflussen, damit sie Lightning Experience ähnlicher sehen.

Markup-Änderung, um die neue Gestaltung anzuwenden, d. h. Änderungen in Ihren Seiten vornehmen.
Änderung der Gestaltungsregeln für vorhandenes Markup, d. h. Änderungen in Ihren Stylesheets vornehmen.

Dabei gibt es kein Entweder-oder. Sie können sie einzeln oder zusammen verwenden.

Die korrekte Verwendung von Lightning Design System bedeutet die Verwendung der Lightning Design System-Stylesheets mit dem vollkommen neuen Markup für Ihre Visualforce-Seiten. Hierbei handelt es sich um die einzige unterstützte Methode für die Verwendung der visuellen Gestaltung von Lightning Experience.

Dazu können Sie entweder die Lightning Design System-Stylesheets von ihrer Website herunterladen und so wie jedes andere Stylesheet verwenden oder Sie fügen die Komponente <apex:slds> zum Markup Ihrer Visualforce-Seite hinzu. Die Komponente <apex:slds> ermöglicht Ihnen die Referenzierung von Lightning Design System-Stylesheets, ohne diese als statische Ressource hochladen zu müssen. So sorgen Sie dafür, dass die Grenze von 250 MB für statische Ressourcen nicht überschritten wird.

Bei Verwendung von <apex:slds> müssen Sie spezifische Richtlinien einhalten und Überlegungen anstellen. Weitere Informationen finden Sie im Abschnitt "Ressourcen" unter dem Link "Visualforce Developer Guide".

Es ist auch möglich, die Lightning Design System-Stylesheets hinzuzufügen und Ihre Seiten so zu überarbeiten, dass diese Stylesheets verwendet werden. Der jeweilige Aufwand dafür hängt davon ab, wie weit die Lightning Experience-Anpassung gehen soll, sowie vom jeweiligen Markup und von den verwendeten Komponenten in Ihrem Code. Obwohl auf diese Weise anständige Ergebnisse erzielt werden können, wird diese Vorgehensweise aber nicht empfohlen. Das Lightning Design System wurde für die Anwendung auf spezielles Markup konzipiert, dies ist aber einfach nicht das Ziel von Visualforce. Es besteht eine gewisse "Unverträglichkeit", die zwar nicht schwerwiegend ist, aber einige Steine in den Weg legt, wenn Sie diesen Weg gehen.

Darüber hinaus gibt es eine andere Vorgehensweise: Hinzufügen neuer Regeln und Stile zu vorhandenen (oder neuen) Stylesheets, damit Ihr vorhandenes Markup mehr Ähnlichkeit mit Lightning Experience aufweist. Wenn Ihre Seite bereits hauptsächlich mit eigenen Stylesheets gestaltet wurde, kommt diese Vorgehensweise für Sie möglicherweise infrage. Wenn Sie jedoch hauptsächlich die integrierten Visualforce-Komponenten und die Gestaltung von Salesforce Classic verwenden, müssen Sie die Stile des Salesforce Classic-Stylesheets überschreiben.

Dies ist zwar technisch möglich, dennoch wird von dieser Vorgehensweise abgeraten, da durch Abhängigkeiten in Ihrem Markup und in den Stilen entstehen, die Sie nicht haben wollen. Diese Abhängigkeiten betreffen Struktur, IDs und Klassen des HTML-Codes, der von den integrierten Visualforce-Komponenten gerendert wird. An dieser Stelle muss klar gesagt werden: das von den integrierten Visualforce-Komponenten gerenderte HTML ist ein internes Implementierungsdetail, das ohne Vorankündigung geändert werden kann. Falls in Ihren eigenen Stylesheets entsprechende Abhängigkeiten vorhanden sind, funktioniert Ihre Gestaltung irgendwann nicht mehr.

Das Salesforce Lightning Design System

Beim Lightning Design System handelt es sich um ein Design-Framework zum Erstellen von Unternehmensanwendungen, die aussehen wie Lightning Experience. Es enthält ein anspruchsvolles CSS-Framework, eine Sammlung von Grafiken und die Schriftart "Salesforce Sans". Mit dem Lightning Design System können Sie Seiten und Anwendungen mit einem beeindruckenden Erscheinungsbild erstellen, das perfekt zur Benutzeroberfläche von Lightning Experience passt.

Das Lightning Design System wurde speziell für Kunden und Partner konzipiert, die eine Anpassung an das Erscheinungsbild von Lightning Experience wünschen. Es enthält zudem Werkzeuge, mit denen Sie das Erscheinungsbild an die Farben Ihrer eigenen Marke anpassen können. Dabei bleibt das Gesamterscheinungsbild dennoch auch auf das Lightning Experience-Design abgestimmt.

Zunächst sollten Sie beachten, dass das Lightning Design System neue Markup-Strukturen und Stylesheet-Klassen verwendet. Daher wird es am besten gemeinsam mit neuen Seiten und Anwendungen verwendet. Es ist auf die Funktionen moderner Browser abgestimmt und nutzt die neuesten bewährten Methoden für Markup und Stylesheets. Das von allen vielgeliebte Visualforce gibt es nun auch schon eine ganze Weile. Da es HTML- und statischen Code in den Kundenseiten generiert, ist es für die meisten Organisationen wohl eher schwierig, das Lightning Design System auf vorhandene Seiten anzuwenden.

Ressourcen

Visualforce Developer Guide: Customizing the Appearance and Output of Visualforce Pages
Visualforce Developer Guide: Using the Lightning Design System
Lightning Design System für Entwickler: Überblick über die Komponenten
Lightning Design System für Entwickler: Überblick über die Komponenten: Schaltflächen