Edit Static resources via Force.com Eclipse IDE !

As a Apex & Visualforce developer, we create static resources for our custom javascript and css code. A general development practice is to keep javascript/css inline in visualforce in development and upload them as static resources when moving to production. This approach turns painful when we need to update the JavaScript file or change some styles in css. This requires you to either

• Download the file locally via the SFDC website and uploading back again once changes are done.

• Or move the JavaScript or CSS code inline again in Visualforce to do the updates.

Today I explored a really cool thing about force.com IDE. You know we can avoid the above hassle and work directly with static resources just like normal apex classes in Force.com IDE.

For ease of demo, I have created a sample Visualforce page that contains some “INLINE” CSS and Javascript markup, I named this page “StaticResourceInline”. This page uses CSS class to style a heading(h1) with huge red font and replaces contents of a div via javascript.

Following is the code for that page

<apex:page>
    <style type="text/css">
    /*
     Some inline CSS code
    */
    .customH1 {
       color: red;
       font-size:large;
    }
    
    #sample {
       font-size:medium;
       padding: 20px;
       margin: 10px;   
       clear : both;
    }
    
    </style>
    
    
        <h1 class="customH1">Congratulations, you must see this text in huge RED font</h1>
        
        <div id="sample">
         This will be replaced by script
        </div>
    
    
    <script type="text/javascript">
      // This is sample inline script that replaces a div's content
      document.getElementById('sample').innerHTML = 'This is updated by Script';
    </script>

</apex:page>

On execution this page will display something like this

Now to follow good practices, I moved the CSS and Javascript Markup as static resources. As shown below:

Now I changed the visualforce code to remove inline css/js references and use these static resources. Here is the sample code that shows this change

<apex:page>
<apex:stylesheet value="{!$Resource.SampleCSSResource}" />

    <h1 class="customH1">Congratulations, you must see this text in huge RED font</h1>

    <div id="sample">
     This will be replaced by script
    </div>
    

http://!$Resource.SampleJSResource   

</apex:page>

Now as before this visualforce page renders the same page. As we haven’t changed anything.

The Change Request

Now lets say there comes a requirement to “Change the heading text color to GREEN”.  For this change request one way is to download the static css resource “SampleCSSResource.resource” and upload it back again with changes. This might require a couple of download/upload iterations to get the pixel perfect style, obviously in case of complicated style changes.

Ease Alternate to test and fix

An easy alternate is to work directly on static resources in Force.com Eclipse IDE. I am assuming you have this visualforce project checked out in your Force.com IDE. All you need to do is to goto “Static Resources” under “classes” in Package Explorer.

As we need to update the CSS style, just open the “SampleCSSResource.resource” in default Eclipse editor (double click the SampleCSSResource.resource file in package explorer). You will see the CSS code directly available for editing, as shown below

That’s it man you are done, just go ahead and change the styles and do save(CTRL+S). Your static resource will be updated on salesforce servers like normal visualforce pages and apex classes etc.

For example I changed the heading style color to GREEN from RED as shown below. The updated page is also shown next.

Similar changes can be done directly on the javascript static resource i.e. “SampleJSResource.resource”. All the SAVE done via Eclipse will be directly applied to the visualforce page without any extra upload.

Important Note

The practice of using Static Resources via Eclipse is only applicable to static resources uploaded as text files i.e. with MIME type text/css or application/x-javascript. If you are uploading a zip file containing all your css, javascript and images this approach will not work.