Difference between revisions of "Static Resources"
imported>Aeric |
imported>Aeric |
||
| Line 67: | Line 67: | ||
===StyleSheet=== | ===StyleSheet=== | ||
This example references a CSS stylesheet stored in the platform, in order to use of the DarkText style it defines. | |||
<syntaxhighlight lang="html4strict" enclose="div"> | <syntaxhighlight lang="html4strict" enclose="div"> | ||
<%@ taglib prefix="lj" uri="/LJTagLib" %> | <%@ taglib prefix="lj" uri="/LJTagLib" %> | ||
Revision as of 20:37, 17 October 2011
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
- Click Designer > Logic > Static Resources
- Static Resources are displayed in a View.
- Use standard Searching and Filtering operations to determine which records are displayed.
- 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
- Click Designer > Logic > 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
- The following information is displayed as a record of the upload:
View, Edit, Replace or Delete a Static Resource File
- Click Designer > Logic > 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
Usage
Use the custom tag library in Pages to invoke a static resource file.
Note that the following code is required, and is used to include this library in custom pages:
<%@ taglib prefix="lj" uri="/LJTagLib" %>
Image
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<body>
<img src='<lj:resource name="Autumn_Leaves"/>'/>
</body>
</html>
StyleSheet
This example references a CSS stylesheet stored in the platform, in order to use of the DarkText style it defines.
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<link href='<lj:resource name="fixedstylesheet"/>' rel="stylesheet" type="text/css">
<body>
<span class="DarkText">Helloooooooooooo</span>
</body>
</html>
External Java Script
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<script src='<lj:resource name="functions"/>'</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:callFunction();'/>
</form>
</body>
</html>
Compressed Files
In this example, the compressed file contains all the files above, including additional resource files. The 'path' parameter must be specified in the tag if the resources are bundled in .zip/.tar, so the path is used to distinguish the actual name of the resource.
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<link href='<lj:resource name="reszip" path="fixedstyle.css"/>' rel="stylesheet" type="text/css">
<script src='<lj:resource name="functions"/>'</script>
<script>
function callFunction()
{
alert((document.mainform.inp.value).length);
alert(trim(document.mainform.inp.value).length) ;
}
</script>
<body>
<span class="DarkText">Helloooooooooooo</span>
<img src='<lj:resource name="reszip" path="image1.gif"/>'/>
<img src='<lj:resource name="reszip" path="/img/image2.gif"/>'/>
<form name='mainform'>
<input type='text' name='inp'/>
<input type='button' onclick='javascript:callFunction();'/>
</form>
</body>
</html>
Service Provider Static Resources Available to All Tenants
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.)
To make use of platform-wide Static Resources, the Service Provider needs to inform the tenant that they exist.
Usage
Use the custom tag library in Pages to invoke a static resource file.
Image
<%@ taglib prefix="lj" uri="/LJTagLib" %>
<html>
<head></head>
<body>
<img src='<lj:resource namespace="leapfrog" name="Autumn_Leaves"/>' />
</body>
</html>
StyleSheet
<%@ taglib uri="/LJTagLib" prefix="lj" %>
<html>
<head></head>
<link href='<lj:resource namespace="leapfrog"/>' rel="stylesheet" type="text/css">
<body>
<span class="DarkText">Helloooooooooooo</span>
</body>
</html>
External Java Script
<%@ taglib uri="/LJTagLib" prefix="lj" %>
<html>
<head></head>
<script src='<lj:resource namespace="leapfrog" name="functions"/>'</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:callFunction();'/>
</form>
</body>
</html>
Compressed Files
In this example, the compressed file contains all the files above, including additional resource files. The 'path' parameter must be specified in the tag if the resources are bundled in .zip/.tar, so the path is used to distinguish the actual name of the 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>
<script>
function callFunction()
{
alert((document.mainform.inp.value).length);
alert(trim(document.mainform.inp.value).length) ;
}
</script>
<body>
<span class="DarkText">Helloooooooooooo</span>
<img src='<lj:resource namespace="leapfrog" name="reszip" path="image1.gif"/>'/>
<img src='<lj:resource namespace="leapfrog" name="reszip" path="/img/image2.gif"/>'/>
<form name='mainform'>
<input type='text' name='inp'/>
<input type='button' onclick='javascript:callFunction();'/>
</form>
</body>
</html>