Comprender consideraciones de diseño visual importantes

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Describir dos maneras de cambiar el estilo de los componentes incorporados de Visualforce.
Describir dos diferencias entre los estilos de Salesforce Classic y Lightning Experience que pueden cambiarse utilizando hojas de estilo CSS.
Describir dos enfoques para aplicar Salesforce Lightning Design System a páginas de Visualforce.

Consideraciones de diseño visual importantes

Las páginas de Visualforce tienen la misma apariencia sin importar que se ejecuten en Salesforce Classic o Lightning Experience, a no ser que realice algunas tareas para adaptarlas al contexto apropiado de la interfaz de usuario. No se puede cambiar fácilmente el estilo de los componentes incorporados de Visualforce que muestran elementos de la interfaz de usuario para que coincidan con el aspecto y comportamiento de Lightning Experience.

De forma específica, el código HTML que se representa en los componentes incorporados de Visualforce no cambian cuando la página se visualiza en Lightning Experience, y las hojas de estilo de Salesforce Classic que esos componentes utilizan se cargan de forma predeterminada por la página. El efecto es que las páginas que utilizan los componentes <apex:inputField>, <apex:outputField>, <apex:pageBlock> y otros componentes de paso grueso y fino que coinciden con el diseño visual de Salesforce Classic, también coinciden con ese diseño visual. Hay una pequeña parte de Salesforce Classic en mitad de su Lightning Experience.

Nuestra recomendación general es que por ahora, para las páginas existentes, no intente adaptarlas para que coincidan con el diseño visual de Lightning Experience. Lightning Experience aún está evolucionando, por lo que hacer coincidir el estilo por usted mismo es como perseguir un blanco en movimiento. Esto implica mucho trabajo.

No obstante, en algunos casos deseará que algunas páginas se ajusten más al aspecto visual de Lightning Experience. Para nuevas páginas, o si no le importa dedicar algo de trabajo, hay algunas herramientas estupendas para crear páginas que se ajusten a la perfección a Lightning Experience.

Cómo afectar al estilo de los componentes estándar

Visualforce proporciona un abanico de opciones para ajustar o sustituir el estilo de los componentes estándar. Si su objetivo es realizar cambios modestos en el aspecto de estos componentes, el esfuerzo para utilizar estas opciones es modesto igualmente. Echemos un vistazo a las pocas herramientas que tiene disponible para afectar al estilo.

Componentes individuales de estilo

Los componentes de Visualforce que crean código HTML tienen una ventanilla de servir con los atributos style y styleClass. Estos atributos le permiten utilizar sus propios estilos y clases de estilos para controlar el aspecto y comportamiento del código HTML resultante. style le permite establecer estilos directamente en un componente, mientras styleClass le permite adjuntar clases para estilos definidos en otro lugar. Por ejemplo, el siguiente código establece la clase de <apex:outputText> y aplica un 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>

Incorporación de una hoja de estilo personalizada

Puede agregar sus propias hojas de estilo personalizadas a cualquier página de Visualforce empleando recursos estáticos y la etiqueta <apex:stylesheet>. Por ejemplo, agreguemos el archivo de hoja de estilo app-styles.css a su página.

Si app-styles.css se carga como un recurso estático independiente llamado “AppStylesheet”, agregue lo siguiente a su página:

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

Si app-styles.css está contenido en un archivo de recurso estático (como un archivo .zip o .jar) llamado “AppStyles,” use la función URLFOR. Especifique el nombre de archivo en el primer parámetro y la ruta a app-styles.css dentro del archivo en el segundo parámetro:

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

Luego puede hacer referencia a cualquiera de los estilos que contiene la hoja de estilos, y hacer referencia a ellos en los atributos de la etiqueta styleClass de Visualforce, como hicimos con el estilo asideText anteriormente.

Este es el método que se recomienda para agregar definiciones de estilos CSS a páginas de Visualforce, porque comparte la hoja de estilos entre páginas y minimiza las marcas que tiene que agregar a cada página.

La excepción en este método para agregar una hoja de estilo es el Salesforce Lightning Design System. Lightning Design System es un fantástico kit de herramientas completamente nuevo para asignar estilos a sus páginas, y hablaremos de él con detalle en breve.

Aunque puede cargar el Lightning Design System como un recurso estático y hacer referencia a él utilizando <apex:stylesheet>, existe una forma más sencilla aún: Solo incluya <apex:slds /> en cualquier parte del marcado de su página.

Estilos diferentes en Lightning Experience

Para cargar una hoja de estilo personalizada únicamente cuando su página se esté ejecutando en Lightning Experience, utilice las marcas siguientes. Este es similar al ejemplo de marcas de Visualforce en Compartir páginas de Visualforce entre Classic y 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>

Bien, estas son las herramientas. Echemos un vistazo a algunas técnicas para utilizarlas a continuación.

Estrategias y recomendaciones de estilo

Para crear páginas de Visualforce que coinciden con el diseño visual de Lightning Experience, cree nuevas páginas utilizando el Lightning Design System. Existen dos formas de utilizar el Lightning Design System en sus páginas de Visualforce.

Antes de que lleguemos a los datos específicos, pensemos a un nivel superior y consideremos las diversas estrategias para aplicar el estilo de Lightning Experience a sus páginas. En particular, hablemos de sus páginas existentes.

Existen dos formas para afectar al estilo de las páginas existentes para que tengan una apariencia similar a Lightning Experience.

Cambiando las marcas para aplicar el nuevo estilo, realizando cambios en sus páginas.
Cambiando las reglas de estilo de las marcas existentes, realizando cambios en sus hojas de estilo.

No se trata de reglas absolutas. Puede utilizarlas de forma individual o en combinación.

El correcto uso de Lightning Design System implica el uso de hojas de estilo de Lightning Design System con las marcas completamente nuevas para sus páginas de Visualforce. Debemos recalcar de nuevo que este es el único método admitido para coincidir con el diseño visual de Lightning Experience.

Para hacer esto, puede descargar las hojas de estilo del Lightning Design System desde su sitio web o utilizarlas como lo haría con cualquier otra hoja de estilo o bien puede agregar el componente <apex:slds> al marcado de su página de Visualforce. El componente <apex:slds> le permite hacer referencia a las hojas de estilo del Lightning Design System sin cargarlas como un recurso estático, simplificando la sintaxis de su página y evitándole alcanzar el límite de recurso estático de 250 MB.

El uso de <apex:slds> incluye su propio conjunto de directrices y consideraciones. Si desea obtener más información, siga el vínculo a la Guía del desarrollador de Visualforce en la sección Recursos.

Es también posible agregar las hojas de estilo de Lightning Design System y revisar sus páginas para que las utilicen. La cantidad de trabajo aparejado depende del grado de coincidencia con Lightning Experience así como las marcas y componentes específicos en su código. Aunque es posible alcanzar resultados decentes de esta manera, no es un enfoque que recomendemos. Lightning Design System se diseñó para aplicarse a marcas específicas, y eso no es sencillamente lo que emite Visualforce. Hay un “fallo de coincidencia de impedancia” que, aunque no es definitivo, resulta un escollo importante cuando toma esta ruta.

Finalmente, hay otro enfoque: la incorporación de nuevas reglas y estilos a su hoja de estilo existente (o nueva) para que sus marcas existentes se parezcan más a Lightning Experience. Si su página ya toma su estilo mayoritariamente de sus propias hojas de estilo, este enfoque puede irle bien. Si por el contrario utiliza mayoritariamente los componentes incorporados de Visualforce y el estilo de Salesforce Classic, tendrá que anular los estilos procedentes de la hoja de estilo de Salesforce Classic.

Aunque esto es técnicamente posible, le instamos a que no tome este enfoque. Introduce dependencias en sus marcas y estilos que no desea tener. Estas dependencias radican en la estructura, los Id. y las clases del código HTML representado en los componentes incorporados de Visualforce. Queremos se realmente claros aquí: el código HTML representado por los componentes incorporados de Visualforce es una detalle de implementación interno, sujeto a cambios sin previo aviso. Si tiene dependencias sobre él en sus propias hojas de estilo, su estilo se romperá en algún momento.

Salesforce Lightning Design System

Lightning Design System es un marco de trabajo de diseño para crear aplicaciones de negocio que tienen la apariencia de Lightning Experience. Incluye un sofisticado marco de trabajo CSS, una recopilación de activos gráficos, y el tipo de letra Salesforce Sans. Puede utilizar Lightning Design System para crear páginas y aplicaciones que tienen un aspecto excelente y que se ajustan perfectamente a la interfaz de usuario de Lightning Experience.

Lightning Design System se diseñó para facilitar a clientes y socios el ajuste al aspecto y comportamiento de Lightning Experience. También incluye herramientas que posibilitan la personalización del aspecto y comportamiento para que se ajuste a su propia marca (colores, etc.) manteniendo al mismo tiempo la coherencia con el diseño general de Lightning Experience.

Lo primero que hay que saber es que Lightning Design System da por sentado una nueva estructura de marcas y clases de estilo. Es por ello que su mejor uso es con nuevas páginas y aplicaciones. La herramienta está creada tomando las capacidades de los navegadores modernos, y se aprovecha de las mejores prácticas más recientes sobre marcas y estilo. Aunque nos encanta, Visualforce ha estado presente un tiempo. Entre el código HTML que genera y el código estático en páginas de clientes, para la mayoría de las organizaciones será un reto aplicar Lightning Design System a páginas existentes.

Recursos

Guía del desarrollador de Visualforce: Personalización del aspecto y resultado de páginas de Visualforce
Guía del desarrollador de Visualforce: Uso del Lightning Design System
Lightning Design System para desarrolladores: Descripción general de componentes
Lightning Design System para desarrolladores: Componentes: Botones