Salesforce Static Resources y otras cosas graficas.

Una vez que te adentras en el mundo de salesforce y empiezas hacer salesforce sites te das cuenta de que necesitas algún lugar donde guardar tus css, js y por supuesto todo tipo de contenido estatico.


Es ahí cuando surgen las siguientes incógnitas:

¿Dónde guardo mis archivos js , css, imágenes , flash clips?
¿Cómo utilizo esos contenidos una vez subidos a la cloud?
¿Cómo los modifico?

Justo esa es la razón por la cual salesforce creó las Static Resources y es el tema en el que nos enfocaremos en este Post.

Static resources como su nombre lo dice son todos aquellos contenidos que puedan ser estáticos y necesiten ser alojados en la cloud para posterior mente utilizarlos ,
por ejemplo en lugar de crear un estilo css e incrustarlo dentro del cuerpo de una salesforce page , copiarlo una y otra vez dentro de todas las paginas que lo necesitemos ,
podemos simplemente crear un static resource con un archivo style.css con todo nuestro código css y nada mas mandarlo llamar cuando este sea necesitado, por ejemplo:

Digamos que tenemos la siguiente estructura en nuestra salesforce page:


<apex:page><br><!-- Begin Default Content REMOVE THIS --><br><h1>Congratulations</h1><br>This is your new Page<br><!-- End Default Content REMOVE THIS --><br></apex:page><br>

Necesitamos primero subir nuestro static resource para después utilizarlo,

en este ejemplo será style.css.
Para ello tenemos que ir en Setup >> App Setup >> Develop >> Static resources y hacer clic en New escribir un Nombre , Descripción si es necesario y seleccionar un archivo que será nuestra static resource ,
por ultimo asignar si deberá ser prívate o public este será el alcance que tendrá nuestro static resource.

Ahora si podemos utilizar nuestro static resource! Para ello solo deberemos mandarlo llamar en el código de nuestra visual force page, esto lo podemos hacer de dos maneras diferentes las cuales explicaremos a continuación.

Llamado a un static resource de un solo archivo:

{!URLFOR($Resource.nombre_de_static_resource)}

Esto funcionara si nuestro static resource es un simple archivo como podría ser style.css entonces si queremos llamarlo en nuestra salesforce page para que aplique los estilos css solo deberemos hacer:

<link rel="stylesheet" type="text/css" href=" {!URLFOR($Resource.micss)} " />;

Donde micss es el nombre que se le dio al static resource al crearlo y subir style.css

Ahora bien salesforce diseño algo que en lo personal considero más útil, la creación de static resource con contenidos multiples en ZIP.


Llamado a un static resource zip con multiples contenidos:


{!URLFOR($Resource.nameofresource,'myfolderinsidezip/myimage.gif ')}

De esta manera podemos crear un static resource en un archivo zip con todos los contenidos que necesitaremos para nuestra salesforce page por ejemplo podemos subir un archivo “misalesforcesite.zip” con la siguiente estructura:

- css
style.css
- images
header.jpg
logo.jpg
+photos
- js
jquery.js

Donde podemos llamar style css de la siguiente manera:

{!URLFOR($Resource.nameofresource,'miestaticresource/css/style.css ')}

y utilizarlo asi:

<link rel="stylesheet" type="text/css" href=" {!URLFOR($Resource.nameofresource,'miestaticresource/css/style.css ')} " />

y dentro de ese static resource podriamos mandar llamar el demás contenido por ejemplo, una imagen seria asi:

<img src =”{!URLFOR($Resource.nameofresource,'miestaticresource/images/logo.jpg ')} ”/>

Si en algun momento fuera necesario modificar el contenido solo sería necesario subir de Nuevo el static resource y listo !

Básicamente esta es la manera como un static resource debe ser utilizado, ahora usa tu imaginación y trabaja como a ti mejor te guste, como por ejemplo podrías tener varios static resources uno por sección y así subir el contenido de manera más organizada.

Espero esta información les sirva, hasta la próxima!