Skip to main content

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

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y copie y pegue los valores en español (LATAM). Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

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 de jQuery de JavaScript desde http://jquery.com/download/. 
  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 File (Archivo) | New (Nuevo) | Visualforce Page (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 Preview (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 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 de jQuery Mobile de JavaScript (en formato .zip) desde http://jquerymobile.com/download/.
  2. Abra el archivo .zip y elimine el directorio /demos/ y su contenido.
  3. Comprima la carpeta y cámbiele el nombre a jquery.zip.
  4. 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.
  5. Ingrese jQueryMobile para el Nombre.
  6. Haga clic en Seleccionar archivo y, luego, seleccione el archivo jquery.zip. 
  7. Si ve el menú Control de caché, seleccione Público. Este elemento no es visible en todas las organizaciones.
  8. 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.
  2. Abra Developer Console y haga clic en File (Archivo) | New (Nuevo) | Visualforce Page (Página de Visualforce) para crear una nueva página de Visualforce. Ingrese jQueryMobileResources para el nombre de página.

En el editor, sustituya cualquier marca con lo siguiente.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
  <!-- Add static resource to page’s <head> -->
  <apex:stylesheet value="{!
    URLFOR($Resource.jQueryMobile,'jquery.mobile-1.4.5.css')}"/>
  <apex:includeScript value="{!$Resource.jQueryMobile }"/>
  <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>
Nota

En este ejemplo se utiliza la versión 1.4.5 de la biblioteca de jQuery Mobile de JavaScript. Si tiene una versión más reciente, actualice el número de versión en las líneas 4 y 7 del código.

Haga clic en Preview (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.

Recursos 

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios