AgileApps Support Wiki

Static Resources

From AgileApps Support Wiki
Revision as of 22:25, 17 October 2011 by imported>Aeric (→‎Compressed Files)

Designer > Logic > Static Resources

Static resources are external files that can be uploaded and used in the platform.

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 for sample HTML code you can copy and use to apply these resources.

Working with Static Resources

View Static Resources

  1. Click Designer > Logic > Static Resources
    Static Resources are displayed in a View.
  2. Use standard Searching and Filtering operations to determine which records are displayed.
  3. 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: (a-z, A-Z, 0-9, and "_")
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

  1. Click Designer > Logic > Static Resources
  2. 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
  3. 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

View, Edit, Replace or Delete a Static Resource File

  1. Click Designer > Logic > Static Resources
  2. Click the name of the resource
  3. 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 Static Resources

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: 

<%@ taglib prefix="lj" uri="/LJTagLib" %>

Image

Here, the resource has been loaded under the name "Autumn_Leaves". The actual file might be falling_leaves.jpg or autumn_colors.gif, but the resource name is sufficient to access it. 

<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<body>
<img src='<lj:resource name="Autumn_Leaves"/>'/>
</body>
</html>

StyleSheet

In this example, a CSS stylesheet was uploaded under the name "AcmeStyles". The DarkText style it defines is then used in the body of the page. 

<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<link href='<lj:resource name="AcmeStyles"/>' rel="stylesheet" type="text/css" />
<body>
    <span class="DarkText">Helloooooooooooo</span>
</body>
</html>

External Java Script

In this example, a JavaScript file was uploaded under the name "functions". This example calls the verifyOrder function it contains. 

<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<script src='<lj:resource name="functions"/>'></script>
<body>
    <form name='mainform'>
        <input type='text' name='input' />
        <input type='button' onclick='javascript:verifyOrder();' />
    </form>
</body>
</html>

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. 

<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<link href='<lj:resource name="AcmeResources" path="acmestyles.css"/>' 
      rel="stylesheet" type="text/css" />
<script src='<lj:resource name="functions"/>'></script>
<body>
    <span class="DarkText">Helloooooooooooo</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>

Accessing Shared Service Provider Static Resources

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". 

<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<body>
    <img src='<lj:resource namespace="leapfrog" name="Jumping_Beans"/>' />
</body>
</html>

StyleSheet

In this example, the Service Provider uploaded a CSS stylesheet under the name "Shared_Stylesheet". The DataText style it defines is then used in the body of the page. 

<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<link href='<lj:resource namespace="leapfrog" name="Shared_Stylesheet"/>' 
      rel="stylesheet" type="text/css" />
<body>
    <span class="DataText">Helloooooooooooo</span>
</body>
</html>

External Java Script

In this example, the Service Provider uploaded a JavaScript file under the name "formProcessing". This example calls the calculateTax function it contains. 

<%@ taglib uri="/LJTagLib" prefix="lj" %>
<html>
<head></head>
<script src='<lj:resource namespace="leapfrog" name="formProcessing"/>'></script>
<script>
    function callFunction()
    {
        alert((document.mainform.input.value).length);
        alert(trim(document.mainform.input.value).length);
    }
</script>
<body>
    <form name='mainform'>
        <input type='text' name='input'/>
        <input type='button' onclick='javascript:calculateTax();'/>
    </form>
</body>
</html>

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. 

<%@ taglib uri="/LJTagLib" prefix="lj" %>
<html>
<head></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>
<body>
    <span class="DataText">Helloooooooooooo</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>
Retrieved from "https://agileappscloud.info/aawiki-src/index.php?title=Static_Resources&oldid=6429"