Entender considerações de design visual importantes

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

Descrever duas maneiras de alterar o estilo dos componentes integrados do Visualforce.
Descrever duas diferenças entre o estilo do Salesforce Classic e do Lightning Experience que podem ser alteradas usando folhas de estilo do CSS.
Descrever duas abordagens para aplicar o Salesforce Lightning Design System às páginas do Visualforce.

Entendendo considerações de design visual importantes

As páginas do Visualforce têm a mesma aparência, sejam executadas no Salesforce Classic ou no Lightning Experience, a não ser que você as mude para adaptá-las ao contexto de interface de usuário pertinente. Os componentes integrados do Visualforce que exibem elementos da interface de usuário não podem ser remodelados facilmente para se parecerem com o Lightning Experience.

Mais especificamente, o HTML que é processado pelos componentes integrados do Visualforce não muda quando a página é exibida no Lightning Experience, e as folhas de estilo do Salesforce Classic que esses componentes usam são, por padrão, carregadas pela página. A consequência é que as páginas que usam <apex:inputField>, <apex:outputField>, componentes <apex:pageBlock> e outros componentes genéricos ou específicos que correspondem ao design visual do Salesforce Classic continuarão a corresponder àquele design visual. Você tem um pedaço do Salesforce Classic no meio do seu Lightning Experience.

Nossa recomendação geral é que, por enquanto e para páginas existentes, você não tente adaptá-las para corresponderem ao design visual do Lightning Experience. O Lightning Experience ainda está evoluindo, e fazer corresponder seu estilo significa atirar em um alvo móvel. Isso dá trabalho.

No entanto, em alguns casos você vai querer que algumas páginas se pareçam mais com a aparência do Lightning Experience. No caso de novas páginas, ou se você estiver disposto a ter muito trabalho, existem ótimas ferramentas para criar páginas que funcionam perfeitamente com o Lightning Experience.

Mudando o estilo dos componentes padrão

O Visualforce fornece uma gama de opções para ajustar ou substituir o estilo dos componentes padrão. Se seu objetivo for fazer mudanças discretas na aparência desses componentes, o trabalho para utilizar essas opções é pequeno. Vamos ver algumas ferramentas que você tem à disposição para mudar o estilo.

Criando o estilo de componentes individuais

Os componentes do Visualforce que produzem HTML têm atributos style e styleClass de passagem. Esses atributos permitem que você use seus próprios estilos e classes de estilo para controlar a aparência do HTML resultante. O estilo permite que você defina estilos diretamente em um componente, enquanto o styleClass permite anexar classes para estilos definidos em outro lugar. Por exemplo, o código a seguir define a classe de <apex:outputText> e aplica um estilo.

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

Adicionando uma folha de estilos personalizada

Você pode adicionar suas próprias folhas de estilos a qualquer página do Visualforce usando recursos estáticos e a marcação <apex:stylesheet>. Por exemplo, vamos adicionar o arquivo de folha de estilo app-styles.css à sua página.

Se app-styles.css for carregado como um recurso estático independente chamado “AppStylesheet”, adicione o seguinte à sua página:

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

Se app-styles.css estiver contido em um arquivo de recurso estático (como um arquivo .zip ou .jar) chamado "AppStyles", use a função URLFOR. Especifique o nome do arquivo no primeiro parâmetro e o caminho para app-styles.css dentro do arquivo no segundo parâmetro:

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

Você poderá consultar qualquer estilo contido na folha de estilos e fazer referência a eles nos atributos styleClass da marcação do Visualforce, como fizemos com o estilo asideText anteriormente.

Esse é o método recomendado para adicionar definições de estilo de CSS às páginas do Visualforce, já que ele divide a folha de estilos entre as páginas e minimiza a marcação que precisa ser adicionada a cada página.

A exceção do método de adicionar uma folha de estilo é o Salesforce Lightning Design System. O Lightning Design System é um conjunto de ferramentas fantástico e totalmente novo para configurar o estilo das suas páginas. Falaremos mais dele em breve.

Embora você possa carregar o Lightning Design System como um recurso estático e referenciá-lo usando o <apex:stylesheet>, há uma maneira mais fácil: Basta incluir <apex:slds /> em qualquer lugar na marcação de sua página.

Estilos diferentes no Lightning Experience

Para carregar uma folha de estilos personalizada somente quando sua página está sendo executada no Lightning Experience, use a marcação a seguir. Isso é semelhante ao exemplo de marcação Visualforce em Como compartilhar páginas do Visualforce entre o Classic e o 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, essas são as ferramentas. Agora vamos ver a seguir algumas técnicas para usá-las.

Estratégias e recomendações de estilo

Para criar páginas do Visualforce que correspondam ao design visual do Lightning Experience, crie novas páginas usando o Lightning Design System. Há algumas maneiras de usar o Lightning Design System em suas páginas do Visualforce.

Antes de entrarmos em detalhes, vamos pensar de forma mais abrangente e considerar as diversas estratégias para aplicar o estilo do Lightning Experience às suas páginas. Falemos das páginas que já existem, em particular.

Existem duas formas de afetar o estilo das páginas existentes para que elas se pareçam mais com o Lightning Experience.

Mudar a marcação para aplicar o novo estilo, alterando suas páginas.
Mudar as regras de estilo da marcação existente, alterando suas folhas de estilo.

Uma opção não exclui a outra. Você pode usar só uma delas ou combinar as duas.

Usar corretamente o Lightning Design System significa usar as folhas de estilo do Lightning Design System com a marcação totalmente nova para as suas páginas do Visualforce. Repetindo, esse é o único método compatível para que haja correspondência com o design visual do Lightning Experience.

Para fazer isso, você pode baixar as folhas de estilo do Lightning Design System do site e usá-las conforme você usaria qualquer outra folha de estilo, ou você pode adicionar o componente <apex:slds> à marcação de sua página do Visualforce. O componente <apex:slds> permite a você diferenciar folhas de estilo do Lightning Design System sem carregá-las como um recurso estático, simplificando a sintaxe de sua página e evitando que você atinja o limite de recurso estático de 250 mb.

O <apex:slds> vem junto com seu próprio conjunto de diretrizes e considerações. Se quiser saber mais, confira o link para o Guia do desenvolvedor do Visualforce na seção Recursos.

Também é possível adicionar as folhas de estilo do Lightning Design System e revisar suas páginas para usá-las. A quantidade de trabalho necessária depende de quanta equivalência com o Lightning Experience você quer, além da marcação e dos componentes específicos do seu código. Embora seja possível ter bons resultados dessa forma, contudo, não é o que recomendamos. O Lightning Design System foi desenvolvido para ser aplicado a marcações específicas e não é isso que o Visualforce faz. Quando você adota esse método, acontecem “problemas de adaptação de impedância” que, embora não sejam fatais, podem ser uma grande pedra no seu sapato.

E há outra abordagem: adicionar novas regras e estilos à sua folha de estilo existente (ou nova) para deixar a marcação existente mais parecida com o Lightning Experience. Se a maior parte do estilo da sua página já estiver definida pelas suas próprias folhas de estilo, esse método pode ser bem útil para você. Caso você use principalmente os componentes integrados do Visualforce e o estilo do Salesforce Classic, será necessário substituir os estilos da folha de estilo do Salesforce Classic.

Isso é tecnicamente possível, mas nós não recomendamos essa abordagem. Ela introduz dependências indesejadas na marcação e nos estilos. Essas dependências ficam na estrutura, nas IDs e nas classes do HTML renderizado pelos componentes integrados do Visualforce. Queremos deixar bem claro: o HTML renderizado pelos componentes integrados do Visualforce é um detalhe da implementação interna e está sujeito a alteração sem aviso prévio. Se as suas folhas de estilo tiverem dependências, seu estilo será desfeito mais cedo ou mais tarde.

O Lightning Design System do Salesforce

O Lightning Design System é uma estrutura de design para criar aplicativos empresariais que se parecem com o Lightning Experience. Ele contém uma estrutura CSS sofisticada, uma coleção de ativos gráficos e a fonte Salesforce Sans. Use o Lightning Design System para criar belas páginas e aplicativos que combinem perfeitamente com a interface de usuário do Lightning Experience.

O Lightning Design System foi criado para que os clientes e parceiros tenham mais facilidade para reproduzir a aparência e a experiência do Lightning Experience. Ele vem com ferramentas que permitem personalizar a aparência para que ela corresponda à da sua marca (por exemplo, as cores) sem deixar de lado a coerência com o design geral do Lightning Experience.

A primeira coisa a saber é que o Lightning Design System assume uma nova estrutura de marcação e novas classes de estilo. Por isso, é melhor usá-lo com páginas e aplicativos novos. Ele foi desenvolvido em torno dos recursos dos navegadores modernos e aproveita as melhores práticas mais atuais para a marcação e o estilo. Nós adoramos o Visualforce, mas ele foi lançado há um bom tempo. Entre o HTML gerado e o código estático nas páginas de cliente, a maioria das organizações considerará um desafio aplicar o Lightning Design System às páginas existentes.

Recursos

Guia do desenvolvedor do Visualforce: Customizing the Appearance and Output of Visualforce Pages
Guia do desenvolvedor do Visualforce: Using the Lightning Design System
Lightning Design System para desenvolvedores: Visão geral dos componentes
Lightning Design System para desenvolvedores: Components: Buttons