Click to search Andy Jarrett.co.uk RSS feed

Loading Twitter

Adding Spry includes in a Model Glue template

As the Spry(and any Ajax framework) files aren't the smallest set of files to add to your page you don't want the user to download them if they don't need to. The way I add the Spry files to a display template in Model Glue is per event via a variable defined in the XML controller. For this example I'm going to include the SpryCollapsiblePanel.js file.

1. The first change we make is to your display(also known as Layout) template. At the very top of the template add the following:

view plain print about
1<!---
2    This sets up the variable needSpryCollapsiblePanel with the value of false if it
3    cannot be found in the viewState
4--->

5<cfset needSpryCollapsiblePanel = viewState.getValue('needSpryCollapsiblePanel', false) />

Then in the <head> section add the following

view plain print about
1<!---
2    If needSpryCollapsiblePanel is True then we include the SpryCollapsiblePanel.js
3    I have omitted the CSS files that also come with this widget as I add my own.
4--->

5<cfif needSpryCollapsiblePanel>
6    <script src="/includes/widgets/collapsiblepanel/SpryCollapsiblePanel.js" type="text/javascript"></script>
7</cfif>

2. In the ModelGlue.xml we are going to modify a basic event i.e Before:

view plain print about
1<event-handler name="page.index">
2    <broadcasts />
3    <views>
4        <inc1ude name="body" template="dspIndex.cfm">
5    </views>
6    <results>
7        <!--
8            Layout template
9        -->
        
10        <result do="view.template" />
11    </results>            
12</event-handler>

After: Using the above event we are going to add a variable to the ViewState

view plain print about
1<event-handler name="page.index">
2    <broadcasts />
3    <views>
4        <!--
5            dspIndex.cfm is the template which needs
6            to use the Spry files
7        -->

8        <inc1ude name="body" template="dspIndex.cfm">
9            <!--
10                This value will be available in the viewState
11            -->

12            <value name="needSpryCollapsiblePanel" value="true" />
13        </include>
14    </views>
15    <results>
16        <!--
17            Layout template
18        -->

19        <result do="view.template" />
20    </results>            
21</event-handler>

And thats it. When you go to index?event=page.index the <views> will include your file that needs Spry while setting a variable to tell your Layout <result> to add the line of script to the <head>

N.B. There is a deliberate spelling mistake in my MG events due to a small small bug in BlogCFC

Comments Comments (3) | Print Print | Send Send | 3140 Views

If you like what you see on the website and/or this post has helped you out in some way please consider donating to help keep me in beer vodka. The donations are made through Paypal, which accepts almost any credit card or eCheck.

(Comment Moderation is enabled. Your comment will not appear until approved.)
This is the same way I do it - except I use the viewState in the view. So I normaly have this in my view:

<cfset viewState.setValue("title", "Page title")>

Then my template view picks it up. So right next to I just add:

<cfset viewState.setValue("needSpry", true)>

Any particular reason why you felt the need to do it in the XML instead of the view?
@Ray I thinks Its just the way I work. I try to preset everything the view needs in the xml before getting into the view like eXit Events etc.
If you're going to do it in the ModelGlue.xml, you could also do it as a separate include.
<inc1ude name="javascript" template="spryincludes.cfm" />
You would then simply have a spot to plug in "javascript" in your template just like you have a spot for "body".
BlogCFC by Raymond Camden + Twitter @AndyJ + ColdFusion jobs + Contact Me + Snippets/Downloads + RSS .