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 recurso estático.
Agregar recursos estáticos a una página de Visualforce.

Nota

¿Su idioma de aprendizaje es español? En esta insignia, las validaciones de los retos prácticos de Trailhead funcionan en inglés. Las traducciones se incluyen entre paréntesis a modo de referencia. Asegúrese de copiar y pegar los valores en inglés, y después cambie el idioma de su Trailhead Playground a inglés y la configuración regional a Estados Unidos. Siga las instrucciones descritas aquí.

Consulte la insignia Trailhead en su idioma para saber cómo disfrutar de la experiencia traducida de Trailhead.

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 recurso 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 forma parte de un conjunto de activos similares como un grupo de iconos), es más fácil crear un recurso estático independiente.

Descargue la versión actual de la biblioteca de jQuery de JavaScript desde http://jquery.com/download/.
Desde Configuración, escriba Recursos estáticos en el cuadro Búsqueda rápida, seleccione Recursos estáticos y haga clic en Nuevo.
Escriba jQuery para el Nombre.
Haga clic en Choose File (Seleccionar archivo) y, a continuación, seleccione el archivo jQuery de JavaScript que descargó anteriormente.
Si ve el menú Control de caché, seleccione Público. Este elemento no es visible en todas las organizaciones.
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 recurso estático 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.

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. Escriba HelloJQuery para el nombre de página.

En el editor, sustituya cualquier marcado 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>

Haga clic en Preview (Vista previa) para abrir una vista previa de su página, que podrá ver mientras realiza cambios. Se debe abrir una nueva ventana que muestra 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 normalmente se actualizan 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.

Descargue la versión actual de la biblioteca de jQuery Mobile de JavaScript (en formato .zip) desde http://jquerymobile.com/download/.
Abra el archivo .zip y elimine el directorio /demos/ y su contenido.
Comprima la carpeta y cámbiele el nombre a jquery.zip.
Desde Configuración, escriba Recursos estáticos en el cuadro Búsqueda rápida, seleccione Recursos estáticos y haga clic en Nuevo.
Escriba jQueryMobile para el Nombre.
Haga clic en Seleccionar archivo y seleccione el archivo jquery.zip.
Si ve el menú Control de caché, seleccione Público. Este elemento no es visible en todas las organizaciones.
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. Más tarde aprenderá a 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>.

Si aún no ha descargado 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.
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. Escriba jQueryMobileResources para el nombre de página.

En el editor, sustituya cualquier marcado 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-start”>star</button>
    </div>
</apex:page>

Este ejemplo 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 cambios. Se abre una nueva ventana que muestra algunas imágenes del recurso estático jQuery Mobile.

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