CHAPTER 10 Using Static Resources
Static resources allow you to upload content that you can reference in a Visualforce page, including archives (such as .zip and .jar files), images, style sheets, JavaScript, and other files.
Using a static resource is preferable to uploading a file to the Documents tab because:
•
You can package a collection of related files into a directory hierarchy and upload that hierarchy as a .zip or .jar archive.
•
You can reference a static resource by name in page markup by using the
$Resource
global variable instead of hard coding document IDs.
Tip: In addition, using static resources to refer to JavaScript or cascading style sheets (CSS) is preferable to including the markup inline. Managing this kind of content using static resources allows you to have a consistent look and feel for all your pages and a shared set of JavaScript functionality.
A single static resource can be up to 5 MB in size, and an organization can have up to 250 MB of static resources, total.
IN THIS SECTION:
Creating a Static Resource
Referencing a Static Resource in Visualforce Markup
Creating a Static Resource
To create a static resource:
1. From Setup, enter
Static Resources
in the
Quick Find
box, then select Static Resources.
2. Click New.
3. In the
Name
text box, enter the text that should be used to identify the resource in Visualforce markup. This name can contain only underscores and alphanumeric characters, and must be unique in your org. It must begin with a letter, not include spaces, not end with an underscore, and not contain two consecutive underscores.
Note: If you reference a static resource in Visualforce markup and then change the name of the resource, the Visualforce markup is updated to reflect that change.
4. In the
Description
text area, specify an optional description of the resource.
5. Next to the
File
text box, click Browse to navigate to a local copy of the resource that you want to upload.
A single static resource can be up to 5 MB in size, and an organization can have up to 250 MB of static resources, total.
6. Set the
Cache Control
:
•
Private
specifies that the static resource data cached on the Salesforce server shouldn’t be shared with other users. The static resource is only stored in cache for the current user’s session.
145
Using Static Resources Referencing a Static Resource in Visualforce Markup
Note: Cache settings on static resources are set to private when accessed via a Force.com site whose guest user's profile has restrictions based on IP range or login hours. Sites with guest user profile restrictions cache static resources only within the browser. Also, if a previously unrestricted site becomes restricted, it can take up to 45 days for the static resources to expire from the Salesforce cache and any intermediate caches.
•
Public
specifies that the static resource data cached on the Salesforce server be shared with other users in your organization for faster load times.
The W3C specifications on Header Field Definitions has more technical information about cache-control.
Note: This feature only works for Sites—enabled organizations that use the static resource.
7. Click Save.
Warning: If you are using WinZip be sure to install the most recent version. Older versions of WinZip may cause a loss of data.
Referencing a Static Resource in Visualforce Markup
The way you reference a static resource in Visualforce markup depends on whether you want to reference a stand-alone file, or whether you want to reference a file that is contained in an archive (such as a .zip or .jar file):
•
To reference a stand-alone file, use
$Resource.
<resource_name>
as a merge field, where
<resource_name>
is the name you specified when you uploaded the resource. For example:
<apex:image url= "{!$Resource.TestImage}" width= "50" height= "50" /> or
<apex:includeScript value= "{!$Resource.MyJavascriptFile}" />
•
To reference a file in an archive, use the
URLFOR
function. Specify the static resource name that you provided when you uploaded the archive with the first parameter, and the path to the desired file within the archive with the second. For example:
<apex:image url= "{!URLFOR($Resource.TestZip,
'images/Bluehills.jpg' )} " width=" 50 " height=" 50 "/> or
<apex:includeScript value= "{!URLFOR($Resource.LibraryJS, '/base/subdir/file.js')}" />
•
You can use relative paths in files in static resource archives to refer to other content within the archive. For example, in your CSS file, named styles.css
, you have the following style: table { background-image: url( 'img/testimage.gif' ) }
When you use that CSS in a Visualforce page, you need to make sure the CSS file can find the image. To do that, create an archive
(such as a zip file) that includes styles.css
and img/testimage.gif
. Make sure that the path structure is preserved in the archive. Then upload the archive file as a static resource named “style_resources”. Then, in your page, add the following component:
<apex:stylesheet value= "{!URLFOR($Resource.style_resources, 'styles.css')}" />
Since the static resource contains both the style sheet and the image, the relative path in the style sheet resolves and the image is displayed.
146
Using Static Resources Referencing a Static Resource in Visualforce Markup
•
Through a custom controller, you can dynamically refer to the contents of a static resource using the
<apex:variable >
tag.
First, create the custom controller: global class MyController { public String getImageName() { return 'Picture.gif' ; //this is the name of the image
}
}
Then, refer to the getImageName
method in your
<apex:variable >
tag:
<apex:page renderAs= "pdf" controller= "MyController" >
<apex:variable var= "imageVar" value= "{!imageName}" />
<apex:image url= "{!URLFOR($Resource.myZipFile, imageVar)}" />
</apex:page >
If the name of the image changes in the zip file, you can just change the returned value in getImageName
.
147
