Salesforce Developer Visualforce Static Resources

salesforce-developer-visualforce

https://developer.salesforce.com/mobile/services/mobile-packs

// Salesforce - Developer - Visualforce - Static Resources:

The platform allow you to upload content that you can reference in a 
Visualforce page. Resources can be archives (such as .zip and .jar files), 
images, stylesheets, JavaScript, and other files.

Static resources are managed and distributed by Force.com, which acts as a 
content distribution network (CDN) for the files. Caching and distribution are 
handled automatically.

Static resources are referenced using the $Resource global variable, which can 
be used directly by Visualforce, or used as a parameter to functions such as 
URLFOR().

// Creating and Uploading a Simple Static Resource:

When your static asset is not related to other assets—that is, not part of a set 
of similar assets such as a group of icons—it’s easiest to create a stand-alone 
static resource.

1. From Setup, enter Static Resources in the Quick Find box, then select Static 
   Resources, and then click New.

2. Provide a name for the static resource

3. Click Choose File, and then choose the file you want to upload.

4. If you see the Cache Control menu, choose Public.  This item isn’t visible 
   in all organizations.

5. Click Save.

We can now access the static resource using:

{! $Resource.StaticResourceName}

You now have a static resource version of jQuery that you can use in your 
Visualforce pages by referencing it in an expression, such as 
{! $Resource.jQuery }. What’s really nice is that you can edit the static 
resource and update it without having to change any of your Visualforce pages. 
The static resource reference handles the details.

Use <apex:includeScript> (for JavaScript files), <apex:stylesheet> (for CSS 
stylesheets), or <apex:image> (for graphics files) tag to add it to your page.

// Creating and Uploading a Zipped Static Resource:

Create zipped static resources to group together related files that are usually 
updated together.  When your static assets are a set of related items—for 
example, a set of application icons, or a complex JavaScript library—it’s best 
to create a zipped static resource. Create a zip file containing all of the 
elements you want to group together, and upload only the one zip file to 
Force.com.

1. From Setup, enter Static Resources in the Quick Find box, then select Static
   Resources, and then click New.

2. Provide a name for the static resource

3. Click Choose File, and then choose the zip file that we want to upload.

4. If you see the Cache Control menu, choose Public. This item isn’t visible in 
   all organizations.

5. Click Save

// To use the Zipped Static Resources to a Visualforce Page:

Use the $Resource global variable and the URLFOR() function to reference items 
within a zipped static resource.

The URLFOR() function can combine a reference to a zipped static resource and a 
relative path to an item within it to create a URL that can be used with 
Visualforce components that reference static assets. For example:

URLFOR($Resource.jQueryMobile, 'images/icons-png/cloud-black.png') 

returns a URL to a specific graphic asset within the zipped static resource, 
which can be used by the <apex:image> component. You can construct similar URLs 
for JavaScript and stylesheet files for the <apex:includeScript> and 
<apex:stylesheet> components.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">

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

Static resources are often the best way to include design and script assets in 
your Force.com apps, and there are a multitude of ways to combine these assets 
with your Visualforce pages.

If you liked putting together a few static resources for jQuery and jQuery 
Mobile, you’ll love our pre-packaged collections of static resources. Salesforce 
Mobile Packs let you build web and hybrid apps that integrate with the 
Salesforce Platform using industry standard web technologies like HTML5, CSS3 
and JavaScript, and popular frameworks like jQuery Mobile, AngularJS and 
Backbone.js.
<apex:page >
    <apex:pageBlock>
        <apex:pageBlockSection>
            <apex:image url="{! URLFOR($Resource.vfimagetest, '/cats/kitten1.jpg')}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License