Empiece a realizar un seguimiento de su progreso
Inicio de Trailhead
Inicio de Trailhead

Utilizar recursos estáticos

Objetivos de aprendizaje

Después de completar esta unidad, podrá:
  • Explicar qué son los recursos estáticos y cómo utilizarlos.
  • Explicar la diferencia entre recursos estáticos individuales y comprimidos.
  • Crear y cargar un recursos estático.
  • Agregar recursos estáticos a una página de Visualforce.

Introducción a recursos estáticos

Los recursos estáticos le permiten cargar contenido al que puede hacer referencia en una página de Visualforce. Los recursos pueden ser archivos (como archivos .zip y .jar), imágenes, hojas de estilo, JavaScript y otros archivos.

Los recursos estáticos se gestionan y distribuyen por la Plataforma Lightning, que actúa como una red de distribución de contenidos (CDN) para los archivos. El almacenamiento en memoria caché y la distribución se gestionan automáticamente.

Se hace referencia a los recursos estáticos utilizando la variable global $Resource, que se puede utilizar directamente en Visualforce o como un parámetro en funciones como URLFOR().

Crear y cargar un recursos estático simple

Cree un recurso estático independiente y simple para activos estáticos independientes.

Cuando su activo estático no está relacionado con otros activos (o sea, no es parte de un conjunto de activos similares como un grupo de iconos), es más fácil crear un recurso estático independiente.

  1. Descargue la versión actual de la biblioteca jQuery de JavaScript. Actualmente es jQuery 3.1.0. Si el vínculo no funciona, o si desea asegurarse de descargar la última versión, vaya a http://jquery.com/download/ y descargue la última versión disponible aquí. Nota Haga clic con el botón derecho en el vínculo directo para descargar el archivo, en vez de abrirlo en una ventana del navegador.
  2. Desde Configuración, ingrese Recursos estáticos en el cuadro Búsqueda rápida, luego seleccione Recursos estáticos y luego haga clic en Nuevo.
  3. Ingrese jQuery para el Nombre.
  4. Haga clic en Seleccionar archivo y luego seleccione el archivo jQuery de JavaScript que descargó anteriormente. Creación de un recurso estático simple
  5. Si ve el menú Control de caché, seleccione Público. Este elemento no es visible en todas las organizaciones.
  6. Haga clic en Guardar.

Ahora tiene una versión de recurso estático de jQuery que puede utilizar en sus páginas de Visualforce haciendo referencia a él en una expresión, como {! $Resource.jQuery }. Lo realmente genial es que puede modificar el recurso estático y actualizarlo, jQuery 3.1.2, sin necesidad de cambiar ninguna de sus páginas de Visualforce. La referencia de recurso estático gestiona los detalles.

Agregar un recursos estáticos a una página de Visualforce

Utilice la variable global $Resource y la notación de puntos para hacer referencia a elementos en un recurso estático independiente.
  1. Abra Developer Console y haga clic en FileNew Visualforce Page (Archivo | Nuevo | Página de Visualforce) para crear una nueva página de Visualforce. Ingrese HelloJQuery para el nombre de página.
  2. En el editor, sustituya cualquier marca con lo siguiente.
    <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. Haga clic en Vista previa para abrir una vista previa de su página que podrá ver mientras realiza los cambios. Una nueva ventana se debe abrir, mostrando los elementos de barra lateral y encabezado de la página estándar de Salesforce y un breve mensaje de jQuery.

Esta página no hace mucho excepto ilustrar cómo incluir un recurso de JavaScript en su página de Visualforce. La clave es la utilización de la variable global $Resource. Utilice la notación de puntos para combinarlo con el nombre del recurso en una etiqueta <apex:includeScript> (para archivos JavaScript), <apex:stylesheet> (para hojas de estilos CSS) o <apex:image> (para archivos de gráficos) para agregarlo a su página.

Crear y cargar un recurso estático comprimido

Cree recursos estáticos comprimidos para agrupar archivos relacionados que se actualizan habitualmente juntos.

Cuando sus recursos estáticos son un conjunto de elementos relacionados, como un conjunto de iconos de aplicación o una biblioteca compleja de JavaScript, es mejor crear un recurso estático comprimido. Cree un archivo comprimido que contenga todos los elementos que desea agrupar juntos y cargue solo el archivo zip en la Plataforma Lightning.

  1. Descargue la versión actual de la biblioteca jQuery Mobile de JavaScript, en el formato ZIP. Actualmente es jQuery Mobile 1.4.5. Si el vínculo no funciona o si desea asegurarse de descargar la última versión, vaya a http://jquerymobile.com/download/ y descargue la última versión del archivo ZIP disponible aquí. Si el archivo ZIP jQuery Mobile es superior a 5 MB, modifique el archivo zip para eliminar el directorio /demo/ y su contenido y cargue el archivo zip más pequeño.
  2. Desde Configuración, ingrese Recursos estáticos en el cuadro Búsqueda rápida, luego seleccione Recursos estáticos y luego haga clic en Nuevo.
  3. Ingrese jQueryMobile para el Nombre.
  4. Haga clic en Seleccionar archivo y luego seleccione el archivo ZIP jQuery Mobile que descargó anteriormente. Creación de un recurso estático comprimido
  5. Si ve el menú Control de caché, seleccione Público. Este elemento no es visible en todas las organizaciones.
  6. Haga clic en Guardar.

Ahora tiene una versión de recurso estático de jQuery Mobile que puede utilizar en sus páginas de Visualforce. Aprenderá después cómo hacer referencia a archivos individuales en el recurso estático comprimido.

Agregar recursos estáticos comprimidos a una página de Visualforce

Utilice la variable global $Resource y la función URLFOR() para hacer referencia a elementos en un recurso estático comprimido.

La función URLFOR() puede combinar una referencia con un recurso estático comprimido y una ruta relativa a un elemento en él para crear una URL que se puede utilizar con componentes de Visualforce que hacen referencia a activos estáticos. Por ejemplo, URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png') devuelve una URL a un activo gráfico específico en el recurso estático comprimido, el cual puede utilizar el componente <apex:image>. Puede crear URL similares para archivos de hoja de estilos y para los componentes <apex:includeScript> y <apex:stylesheet>.

  1. Si aún no descargó la versión actual de la biblioteca jQuery Mobile de JavaScript, siga las instrucciones en la sección Crear y cargar un recurso estático comprimido para hacerlo. Agréguelo como un recurso estático. Si el archivo es de más de 5 MB, asegúrese de modificar el archivo zip para eliminar el directorio /demo/ y su contenido. Cargue el archivo zip más pequeño.
  2. Abra Developer Console y haga clic en FileNew Visualforce Page (Archivo | Nuevo | Página de Visualforce) para crear una nueva página de Visualforce. Ingrese jQueryMobileResources para el nombre de página.
  3. En el editor, sustituya cualquier marca con lo siguiente.
    <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. Haga clic en Vista previa para abrir una vista previa de su página que podrá ver mientras realiza los cambios. Una nueva ventana se abre y muestra algunas imágenes desde el recurso estático jQuery Mobile. Botones jQuery a través de recursos estáticos

Para simplificar, esta página solo muestra cómo hacer referencia a recursos estáticos comprimidos en su página de Visualforce. Consulte recursos adicionales si desea obtener más información acerca de cómo combinar bibliotecas de JavaScript y Visualforce como jQuery Mobile, por ejemplo.

Más información...

Los recursos estáticos son habitualmente la mejor forma de incluir activos de diseño y secuencia de comandos en sus aplicaciones de la Plataforma Lightning y existe una multitud de formas de combinar esos activos con sus páginas de Visualforce.

Si le gustó poner algunos recursos estáticos juntos para jQuery y jQuery Mobile, le encantarán nuestros conjuntos de recursos estáticos incluidos previamente en paquetes. Los Paquetes móviles de Salesforce le permiten crear aplicaciones Web e híbridas que se integran con la plataforma de Salesforce utilizando tecnologías Web estándar de la industria como HTML5, CSS3 y JavaScript, así como marcos populares como jQuery Mobile, AngularJS y Backbone.js.