Module 5: Using Static Resources

In this module, you explore a different deployment option for the Conference app you created in the previous module. Instead of deploying it on your own server, you deploy it inside a Visualforce Page in your Salesforce instance.

Step 1: Upload the Application as a Static Resource

  1. In the salesforce-developer-advanced/client directory, select the css, fonts, js, and lib directories and zip them up (compress them).

    Important: Make sure you don't zip up the client directory itself. In other words, if you open the zip file, the css, fonts, js, and lib directories should be at the root level.

  2. In Setup, click Build > Develop > Static Resources

  3. Click New

  4. Specify ConferenceApp as the Name

  5. Click the Choose File button, and select the zip file you just created

  6. Click Save

Step 2: Create a Visualforce Page

  1. In the Developer Console, select File > New > Visualforce Page, specify ConferenceApp as the page name and click OK

  2. Implement the ConferenceApp page as follows:

    <apex:page sidebar="false" showHeader="false" docType="html" applyBodyTag="false">
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
        <link href="{!URLFOR($Resource.ConferenceApp,'css/ratchet.css')}" rel="stylesheet"/>
        <link href="{!URLFOR($Resource.ConferenceApp,'css/pageslider.css')}" rel="stylesheet"/>
        <link href="{!URLFOR($Resource.ConferenceApp,'css/styles.css')}" rel="stylesheet"/>
        <script src="{!URLFOR($Resource.ConferenceApp,'lib/jquery.js')}"></script>
        <script src="{!URLFOR($Resource.ConferenceApp,'lib/router.js')}"></script>
        <script src="{!URLFOR($Resource.ConferenceApp,'lib/pageslider.js')}"></script>
        <script src="{!URLFOR($Resource.ConferenceApp,'lib/force.js')}"></script>
        <script src="{!URLFOR($Resource.ConferenceApp,'js/app.js')}"></script>
            // Initialize forcejs here
  3. In the last script block (right after the Initialize forcejs here comment), initialize the force js library as follows:

    force.init({accessToken: '{!$Api.Session_ID}'});

    Note that because you are running inside an authenticated session, you don't have to login using OAuth like you had to do in the previous module. All you have to do is initialize ForceJS with the existing access token (or session id).

  4. Click the Preview button to test the application.

Note on Data Access Strategy

When an application is running inside a Visualforce page, it may be advantageous to use JavaScript Remoting or Remote Objects instead of the REST APIs because JavaScript Remoting or Remote Objects calls don't count towards your governor limits for API calls. Module 3 provides an example of using JavaScript Remoting.

comments powered by Disqus