AgileApps Support Wiki

Difference between revisions of "Static Resources"

From AgileApps Support Wiki
imported>Aeric
 
imported>Aeric
Line 1: Line 1:
'''Designer > Logic > 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]]:
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.)
*Images (.gif, .jpg, etc.)

Revision as of 00:49, 3 June 2011

Designer > Logic > 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.

Resource Attributes

Name
Name of the resource, used by developers to reference this resource in a page
Name must 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
    Back
    Cancel the operation and return to the resource list

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 uri="/WEB-INF/tlds/StaticResources.tld" prefix="statres" %>

Image

<syntaxhighlight lang="html4strict" enclose="div"> 

<%@ taglib uri="/WEB-INF/tlds/StaticResources.tld" prefix="statres" %>
<html>
<head></head>
<body>
<img src='<statres:resource name="Autumn_Leaves"/>'/>
</body>
</html>

</syntaxhighlight>

StyleSheet

<syntaxhighlight lang="html4strict" enclose="div"> 

<%@ taglib uri="/WEB-INF/tlds/StaticResources.tld" prefix="statres" %>
<html>
<head></head>
<link href='<statres:resource name="fixedstylesheet"/>' rel="stylesheet" type="text/css">
<body>
Helloooooooooooo
</body>
</html>

</syntaxhighlight>

External Java Script

<syntaxhighlight lang="html4strict" enclose="div"> 

<%@ taglib uri="/WEB-INF/tlds/StaticResources.tld" prefix="statres" %>
<html>
<head></head>
<script src='<statres: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>

</syntaxhighlight>

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.

<syntaxhighlight lang="html4strict" enclose="div"> 

<%@ taglib uri="/WEB-INF/tlds/StaticResources.tld" prefix="statres" %>
<html>
<head></head>
<link href='<statres:resource name="reszip" path="fixedstyle.css"/>' rel="stylesheet" type="text/css">
<script src='<statres:resource name="functions"/>'</script>
<script>
     function callFunction()
     {
          alert((document.mainform.inp.value).length);
          alert(trim(document.mainform.inp.value).length)    ;
     }
</script>
<body>
Helloooooooooooo
<img src='<statres:resource name="reszip" path="image1.gif"/>'/>
<img src='<statres:resource name="reszip" path="/img/image2.gif"/>'/>
<form name='mainform'>
<input type='text' name='inp'/>
<input type='button' onclick='javascript:callFunction();'/>
</form>
</body>

</html> </syntaxhighlight>

Global Resources

Static Resources, when created by Service Providers, are called Global Resources.


Usage

Use the custom tag library in Pages to invoke a static resource file.


Image

<syntaxhighlight lang="html4strict" enclose="div"> <%@ taglib uri="/LJTagLib" prefix="lj" %> <html> <head></head> <body> <img src='<lj:resource namespace="leapfrog" name="Autumn_Leaves"/>' /> </body> </html> </syntaxhighlight>

StyleSheet

<syntaxhighlight lang="html4strict" enclose="div"> <%@ taglib uri="/LJTagLib" prefix="lj" %> <html> <head></head> <link href='<lj:resource namespace="leapfrog"/>' rel="stylesheet" type="text/css"> <body> Helloooooooooooo </body> </html> </syntaxhighlight>

External Java Script

<syntaxhighlight lang="html4strict" enclose="div"> <%@ 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> </syntaxhighlight>

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.

<syntaxhighlight lang="html4strict" enclose="div"> <%@ 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> Helloooooooooooo <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> </syntaxhighlight>

Retrieved from "https://agileappscloud.info/aawiki-src/index.php?title=Static_Resources&oldid=6397"