Page Operations
Browse Space
JavascriptComponent Class
ViewComponent for inserting Javascript.
public class JavascriptComponent
Remarks
A block component for including Javascript files and script. Code included using this component is gathered together, and inserted at the location of the InsertJavascriptComponent. Blocks can be conditionally included based on the browser being used. JavascriptComponent can be used as either a block or line component. It takes three parameters, each of which may be optional depending on the context.
| Parameter | Description |
|---|---|
| id | A string that uniquely identifies the script block. Blocks with the same id as rendered only once. Required when used as a block component. (Pointless, when used as a line component) |
| File | The name of a javascript file to be included. If the string does not start with "http://", it is assume to be relative to $siteRoot/javascript/. |
| Std | A comma or space separated list of the standard Javascript files to include. Will automatically include needed prerequisite. Allowable values are based on the jslibraries.xml file. If no jslibraries.xml file is present, it will default to the following: |
| Keyword | Script |
| ajax | prototype.js |
| behavior or behaviour |
behaviour.js |
| scriptaculous or effects2 |
Script.aculo.us |
| effectsfat | effectsfat.js |
| validate | Validate.Config Validate.Core Validate.Validators Validate.Lang |
JavascriptComponent allows a number of subsections, to allow customizing the included Javascript to the requesting browser.
| Section | Description |
|---|---|
| all | Block is always rendered. Rendered at the site of InsertJavascriptComponent. |
| other | Block is rendered if no browser specific block is rendered. Rendered at the site of InsertJavascriptComponent. |
| noscript | Always rendered, within <noscript> tags. Rendered at the site of JavascriptComponent. |
| inline | Always rendered. Rendered at the site of InsertJavascriptComponent. |
| Browser Spec | Rendered if the requesting browser matches the given browsers specification. Rendered at the site of JavascriptComponent. |
Browser Spec is in the following form:
#{Browser name}[{version #}[U|D]]
where:
browser is "ie", "netscape", "firefox", "opera", "safari" or "wince"
Version is an optional integer version number.
and D or U indicates that version and lower, or that version and higher.
For example:
| Example | Meaning |
|---|---|
| #safari | Any version of Safari. |
| #firefox2 | Version 2 of FireFox. |
| #netscape5d | Version 5 or eariler of Netscape. |
| #ie6u | Version 6 or later of Internet Explorer. |
Note: It is assumed that the InsertJavascriptComponent will appear once in the layout template, while one or more JavascriptComponents will appear in the view. This will cause all blocks included in the view to be inserted in the layout. However, assuming the InsertJavascriptComponent is in the HTML <HEAD> section, any JavascriptComponent used in the layout will be rendered after the InsertJavascriptComponent. In this case, the new javascript code will be rendered in-place.
Example
Given the following code:
<html><head> #component (InsertJavascript with "Std=Behavior, scriptaculous") </head> <body> #blockcomponent (Javascript with "id=MyCode" "Std=Effects2, EffectsFat") #ie6D function Showit() { alert("This is IE 6 or lower"); #end #ie7 function Showit() { alert("This is IE 7"); #end #foxfire function Showit() { alert("This is Foxfire"); #end #inline ShowIt(); #end #noscript <DIV id="IfNoScript">Javascript not enabled.</DIV> #end </body></html>
Would generate the following code when requested by an IE5 browser
<html><head> <script type="text/javascript" src="/web/MonoRail/Files/AjaxScripts.rails?RC3_0006"></script> <script type="text/javascript" src="/web/MonoRail/Files/BehaviourScripts.rails?RC3_0006"></script> <script type="text/javascript" src="/web/MonoRail/Files/Effects2.rails?RC3_0006"></script> <script type="text/javascript" src="/web/MonoRail/Files/EffectsFat.rails?RC3_0006"></script> <script type="text/javascript"> function Showit() { alert("This is IE 6 or lower"); </script> </head> <body> <script type="text/javascript"> ShowIt(); </script> <noscript> <DIV id="IfNoScript">Javascript not enabled.</DIV> </noscript> </body></html>
See Also
JavascriptHelper | InsertJavascriptComponent