View source for Static Resources

'''[[File:GearIcon.png]] > Customization > Developer Resources > Static Resources'''

Static resources are external files that can be uploaded and used in JSP [[Pages]].

==About Static Resources==
In a web application, programmers need to refer to resources such as static images, stylesheets and external JavaScripts to build powerful applications. This functionality allows developers and designers to package and upload the following resources and invoke them programmatically in [[Pages]]:
:*Images (.gif, .jpg, etc.)
:*Stylesheets (.css)
:*JavaScript files (.js)
:*Compressed files (.zip, .tar)

===How it Works===
Add Static Resource files to the platform, which can then be used to build [[Pages]].

Detailed instructions are provided here to Add, View, Edit, Replace or Delete Static Resources. See [[#Usage|Usage]] for sample HTML code you can copy and use to apply these resources.

==Working with Static Resources==

===View Static Resources===
#Click '''[[File:GearIcon.png]] > Customization > Developer Resources > Static Resources'''
{{SearchFilterView|Static Resources}}
# The following columns are displayed in the view:
:;Name:Name of the resource, used by developers to reference this resource in a page
::Name can contain only alphanumeric characters and underscores: <tt>(a-z, A-Z, 0-9, and "_")</tt>
:;Description: Description of the resource
:;File Size: Size of the resource
::Displayed after a resource is loaded
:;MIME Type: Type of the resource (GIF, PDF, JPG, CSS, etc.)
::Displayed after a resource is loaded

===Add a Static Resource File===
#Click '''[[File:GearIcon.png]] > Customization > Developer Resources > Static Resources'''
#Click the '''[New Resource]''' button to add a new resource. Complete the following information for each resource that is added:
#:;Name:Name of the resource
#:;File:Click the '''[Browse]''' button to navigate to the file
#:;Description: Enter a simple description of the file
#Click '''[Save]'''
#: The following information is displayed as a record of the upload:
#:;File Size: Size of the resource
#:;MIME Type: The type of the resource
{{Note|If the {{^MIME}} type is incorrect for the resource, the file may not be handled properly when sent to a user's browser. In that case, the platform must be configured to recognize it.<br>''Learn more:'' [[Adding MIME Types]]}}

===View, Edit, Replace or Delete a Static Resource File ===
#Click '''[[File:GearIcon.png]] > Customization > Developer Resources > Static Resources'''
#Click the name of the resource
#Choose from any of the following:
#;Edit:Edit the Name or Description of the resource
#;Replace:Replace the resource (load a new resource in place of the current resource)
#;Delete:Delete the resource

==Accessing a JavaScript Resource from an Object Form==
It is possible to use JavaScript resource in an Object form.<br> 
To do so:
# Upload the JavaScript file as a static resource.
#:
# In your browser, use the REST Static Resource API to list the available resources:
#: https://{yourDomain}/networking/rest/staticResource 
#:
# Copy the resource ID for the JavaScript file (a long string of numbers and letters):
#:<tt><platform>
#::<staticResource>
#:::<id></tt><font style="background-color:yellow"><tt>{resourceID}</tt></font><tt></id>
#:::<name>HelpButton_js</name>
#:::<resource_file_name>HelpButton.js</resource_file_name>
#:::...</tt>
#:
# Put the following code into your [[Form Script]], and insert the resource ID:
#:<tt><nowiki>$.get( "https://{yourDomain}/networking/rest/staticResource/</nowiki></tt><font style="background-color:yellow"><tt>{resourceID}</tt></font><tt>?getFile=true", 
#: function( data ) { 
#:: eval(data); 
#:: yourFunction(); 
#:});</tt>

That code uses the REST API to get the contents of the file in the <tt>data</tt> string. That string is passed to an anonymous function that does an <tt>eval</tt> to make function definitions in the file available to the current script. Finally, the code calls the function defined in the file.

{{Important|When you have a new version of the JavaScript file to upload, go to the existing static resource and click '''[Replace]'''. That operation preserves the record ID, so references to it get the updated version.}}

==Accessing Static Resources in a JSP Page==
The examples below use the custom tag library in [[Pages]] to access static resource files. The examples assume that the "Acme" company is building the application.

Note that the following code is required, and is used to include this library in custom pages:
:<syntaxhighlight lang="java" enclose="div">
<%@ taglib prefix="lj" uri="/LJTagLib" %> 
</syntaxhighlight>

===Image===
Here, the resource has been loaded under the name "Autumn_Leaves". The actual file might be <tt>falling_leaves.jpg</tt> or <tt>autumn_colors.gif</tt>, but the resource name is sufficient to access it.
:<syntaxhighlight lang="java" enclose="div">
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head>
</head>
<body>
    <img src='<lj:resource name="Autumn_Leaves"/>'/>
</body>
</html>
</syntaxhighlight>

===StyleSheet===
In this example, a CSS stylesheet was uploaded under the name "AcmeStyles". The <tt>FormHeader</tt> style it defines is then used in the body of the page.
:<syntaxhighlight lang="java" enclose="div">
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head>
    <link href='<lj:resource name="AcmeStyles"/>' rel="stylesheet" type="text/css" />
</head>
<body>
    <span class="FormHeader">Place Your Order:</span>
</body>
</html>
</syntaxhighlight>

===External Java Script===
In this example, a JavaScript file was uploaded under the name "functions". This example calls the <tt>verifyOrder</tt> function it contains.
:<syntaxhighlight lang="java" enclose="div">
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head>
    <script src='<lj:resource name="functions"/>'></script>
</head>
<body>
    <form name='mainform'>
        <input type='text' name='input' />
        <input type='button' onclick='javascript:verifyOrder();' />
    </form>
</body>
</html>
</syntaxhighlight>

===Compressed Files===
In this example, the compressed .zip/.tar file containing all the files above was uploaded under the name "AcmeResources". The 'path' parameter must be specified in that case, to identify the file contained in that resource.

:<syntaxhighlight lang="java" enclose="div">
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head>
    <link href='<lj:resource name="AcmeResources" path="acmestyles.css"/>' 
          rel="stylesheet" type="text/css" />
    <script src='<lj:resource name="functions"/>'></script>
</head>
<body>
    <span class="FormHeader">Place Your Order:</span>
    <img src='<lj:resource name="AcmeResources" path="image1.gif"/>'/>
    <img src='<lj:resource name="AcmeResources" path="/img/image2.gif"/>'/>
    <form name='mainform'>
        <input type='text' name='inp'/>
        <input type='button' onclick='javascript:verifyOrder();'/>
    </form>
</body>
</html>
</syntaxhighlight>

==Accessing Shared Service Provider Resources in a JSP Page==
Static Resources uploaded by a [[Service Provider]] are available to all tenants on that instance of the platform. (Static Resources uploaded by a tenant are available only to that tenant.)

However, such resources are not ''displayed'' in the tenant's list. (They only see the resources they have loaded.)

For tenants to make use of platform-wide Static Resources, the Service Provider needs to provide the name of the resource, the service provider's namespace (as declared in the [[Developer Configuration]]. For a zip file or similar archive, they also need to provide the file path.

In the examples that follow, "leapfrog" is the Service Provider's namespace.

===Usage===
These examples use the custom tag library in [[Pages]] to access static resource files uploaded by the Service Provider.
        
====Image====
Here, the Service Provider has uploaded an image under the name, "Jumping_Beans".
:<syntaxhighlight lang="java" enclose="div">
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head>
</head>
<body>
    <img src='<lj:resource namespace="leapfrog" name="Jumping_Beans"/>' />
</body>
</html>
</syntaxhighlight>

====StyleSheet====
In this example, the Service Provider uploaded a CSS stylesheet under the name "Shared_Stylesheet". The <tt>LabelText</tt> style it defines is then used in the body of the page.
:<syntaxhighlight lang="java" enclose="div">
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head>
    <link href='<lj:resource namespace="leapfrog" name="Shared_Stylesheet"/>' 
          rel="stylesheet" type="text/css" />
</head>
<body>
    <span class="LabelText">Order Item: </span>
</body>
</html>
</syntaxhighlight>

====External Java Script====
In this example, the Service Provider uploaded a JavaScript file under the name "formProcessing". This example calls the <tt>calculateTax</tt> function it contains.
:<syntaxhighlight lang="java" enclose="div">
<%@ taglib uri="/LJTagLib" prefix="lj" %>
<html>
<head>
    <script src='<lj:resource namespace="leapfrog" name="formProcessing"/>'></script>
</head>
<body>
    <form name='mainform'>
        <input type='text' name='input'/>
        <input type='button' onclick='javascript:calculateTax();'/>
    </form>
</body>
</html>
</syntaxhighlight>

====Compressed Files====
In this example, the compressed .zip/.tar file containing all the files above was uploaded under the name "SharedResources". The 'path' parameter must be specified in that case, to identify the file contained in that resource.

:<syntaxhighlight lang="java" enclose="div">
<%@ taglib uri="/LJTagLib" prefix="lj" %>
<html>
<head>
    <link href='<lj:resource namespace="leapfrog" name="reszip" path="fixedstyle.css"/>'
          rel="stylesheet" type="text/css" />
    <script src='<lj:resource namespace="leapfrog" name="functions"/>'></script>
</head>
<body>
    <span class="LabelText">Order Item: </span>
    <img src='<lj:resource namespace="leapfrog" name="SharedResources" path="image1.gif"/>'/>
    <img src='<lj:resource namespace="leapfrog" name="SharedResources" path="/img/image2.gif"/>'/>
    <form name='mainform'>
        <input type='text' name='inp'/>
        <input type='button' onclick='javascript:calculateTax();'/>
    </form>
</body>
</html>
</syntaxhighlight>
<noinclude>

[[Category:Logic| 5]]
</noinclude>