Visualforce Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
Dynamic References to Static Resources Using $Resource
Dynamic references to static resources can be very useful
for providing support for themes or other visual preferences.
To reference a static resource using the $Resource global variable, provide the name of the static resource in an expression: {! $Resource[StaticResourceName] }. For example, if you have a getCustomLogo method that returns the name of an image uploaded as a static resource, reference it like this: <apex:image value="{!$Resource[customLogo]}"/>.
This example illustrates how to switch between two different visual
themes. First, create a controller extension named ThemeHandler with the following code:
1public class ThemeHandler {
2
3 public ThemeHandler(ApexPages.StandardController controller) { }
4
5 public static Set<String> getAvailableThemes() {
6 // You must have at least one uploaded static resource
7 // or this code will fail. List their names here.
8 return(new Set<String> {'Theme_Color', 'Theme_BW'});
9 }
10
11 public static List<SelectOption> getThemeOptions() {
12 List<SelectOption> themeOptions = new List<SelectOption>();
13 for(String themeName : getAvailableThemes()) {
14 themeOptions.add(new SelectOption(themeName, themeName));
15 }
16 return themeOptions;
17 }
18
19 public String selectedTheme {
20 get {
21 if(null == selectedTheme) {
22 // Ensure we always have a theme
23 List<String> themeList = new List<String>();
24 themeList.addAll(getAvailableThemes());
25 selectedTheme = themeList[0];
26 }
27 return selectedTheme;
28 }
29 set {
30 if(getAvailableThemes().contains(value)) {
31 selectedTheme = value;
32 }
33 }
34 }
35}- It has an empty constructor, because there’s no default constructor for controller extensions.
- Add the name of your uploaded static resource files theme to the getAvailableThemes method. Using Static Resources provides details of how to create and upload static resources, in particular, zipped archives containing multiple files.
- The last two methods provide the list of themes and the selected theme for use in the Visualforce form components.
Now create a Visualforce page that uses this controller extension:
1<apex:page standardController="Account"
2 extensions="ThemeHandler" showHeader="false">
3
4 <apex:form >
5 <apex:pageBlock id="ThemePreview" >
6 <apex:stylesheet
7 value="{!URLFOR($Resource[selectedTheme], 'styles/styles.css')}"/>
8
9 <h1>Theme Viewer</h1>
10 <p>You can select a theme to use while browsing this site.</p>
11
12 <apex:pageBlockSection >
13 <apex:outputLabel value="Select Theme: " for="themesList"/>
14 <apex:selectList id="themesList" size="1" value="{!selectedTheme}">
15 <apex:actionSupport event="onchange" rerender="ThemePreview"/>
16 <apex:selectOptions value="{!themeOptions}"/>
17 </apex:selectList>
18 </apex:pageBlockSection>
19
20 <apex:pageBlockSection >
21 <div class="custom" style="padding: 1em;"><!-- Theme CSS hook -->
22
23 <h2>This is a Sub-Heading</h2>
24
25 <p>This is standard body copy. Lorem ipsum dolor sit amet, consectetur
26 adipiscing elit. Quisque neque arcu, pellentesque in vehicula vitae, dictum
27 id dolor. Cras viverra consequat neque eu gravida. Morbi hendrerit lobortis
28 mauris, id sollicitudin dui rhoncus nec.</p>
29
30 <p><apex:image
31 value="{!URLFOR($Resource[selectedTheme], 'images/logo.png')}"/></p>
32
33 </div><!-- End of theme CSS hook -->
34 </apex:pageBlockSection>
35
36 </apex:pageBlock>
37 </apex:form>
38</apex:page>- The page uses the Account standard controller, but has nothing to do with accounts. You have to specify a controller to use a controller extension.
- The first <apex:pageBlockSection> contains the theme selection widget. Using <apex:actionSupport>, changes to the selection menu re-render the whole <apex:pageBlock>. This is so that the <apex:stylesheet> tag gets the updated selectedTheme for its dynamic reference.
- The theme preference selected here is only preserved in the view state for the controller, but you could easily save it to a custom setting instead, and make it permanent.
- The zip files that contain the graphics and style assets for each theme need to have a consistent structure and content. That is. there needs to be an images/logo.png in each theme zip file, and so on.
There are only two dynamic references to the $Resource global variable on this page, but they show how to access both stylesheet and graphic assets. You could use a dynamic reference in every <apex:image> tag on a page and completely change the look and feel.
$Label and $Setup are similar to $Resource, in that they allow you
to access text values or saved settings that your organization administrator
or users themselves can set in Salesforce:
- Custom labels allow you to create text messages that can be consistently used throughout your application. Label text can also be translated and automatically displayed in a user’s default language.
- Custom settings allow you to create settings for your application, which can be updated by administrators or by users themselves. They can also be hierarchical, so that user-level settings override role- or organization-level settings.