So all of your friends are on ColdFusion 8 and your jealous of them. I don't blame you at all because CF8 is awesome but like you our production servers are still on 7. One of the cool new things about ColdFusion 8 is all the new Ajax UI stuff. One new feature I really like is cfwindow. CFWindow allows you to create a popup like dialog without actually creating a browser popup window. To me this is a more effective and stylish way of displaying popup content.

If you did not already know this ColdFusion makes use of the http://www.extjs.com JavaScript framework. This means that we can create our own popup windows with just a little bit of JS Knowledge. I am going to walk you through how to create your own popup windows. The first thing you need to do is head over and download the framework at http://extjs.com/download. After you have finished donwloading extract the contents to your project root so you have a structure similair to this.
+project_root
-ext-2.0
-index.cfm

Now that we are all setup go ahead and open our index.cfm page. The first thing we need to do is include the correct JavaScript files. I have to admit when I first got started with ext this would always bother me. I never understood what files were mandatory and what order they needed to go in. This is of course because I did not realize there was INCLUDE_ORDER.txt file right in the root. If you open up this file you will see the following text.

view plain print about
1All adapter related files below are located in
2/adapters/<lib name>/ of this zip file.
3
4Your include order should be:
5
6Ext Stand-alone
7-------------------------------------------------------------------
8ext-base.js
9ext-all.js (or your choice of files)
10
11
12Yahoo! UI (.12+)
13-------------------------------------------------------------------
14yui-utilities.js
15ext-yui-adapter.js
16ext-all.js (or your choice of files)
17
18
19jQuery (1.1+)
20-------------------------------------------------------------------
21jquery.js
22jquery-plugins.js // required jQuery plugins
23ext-jquery-adapter.js
24ext-all.js (or your choice of files)
25
26
27Prototype (1.5+) / Scriptaculous (1.7+)
28-------------------------------------------------------------------
29prototype.js
30scriptaculous.js?load=effects (or whatever you want to load)
31ext-prototype-adapter.js
32ext-all.js (or your choice of files)
33
34
35
36See the examples folders for more examples.
This file explains to us in what order and what files we need to include if we are using ext as a stand alone or using another framework like jquery as an adapter. More or that another time but for now we will just be using ext as a stand alone. In the head of your page use the following code based on our directory setup from above. We are using the base and and ext-all script. If we were moving to production we would probably want to just include the files we needed because all script is fairly large, but for example purposes we can just use that. We also have a link to the css file that provides our look and feel. Again, you can change this to only include what we need later but for testing this is fine.
view plain print about
1<!-- extjs includes -->
2<script type="text/javascript" language="javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
3<script type="text/javascript" language="javascript" src="ext-2.0/ext-all.js"></script>
4<link href="ext-2.0/resources/css/ext-all.css" type="text/css" rel="stylesheet"/>
We are all ready to go, now we can start coding. To create a window we use the Ext.Window() constructor.
view plain print about
1<script type="text/javascript" language="javascript">
2    var win = new Ext.Window();
3</script>
While the code above will work it really does not do much. We need to provide our window some attributes. We doing this by passing in an array of configuration options. At the very basic we should give our window a width, height and a title.
view plain print about
1<script type="text/javascript" language="javascript">
2    var win = new Ext.Window({
3        width:400,
4        height:200,
5        title:"Ext Window Example"
6    });
7</script>
And that is all there is to it, you have created a window. That is great except the fact that if you ran this example it would not do anything. Nope this example will not produce any output. First we need something to activate our window and we actually need to show our window. To accomplish this I am going to put a button on a page, when you click this button it will call a function showWindow. Inside of showWindow we will create our window and using a method show() our window will become visible. Below is the code to create our basic window as well as a quick demo.
Basic Window Example
view plain print about
1<html>
2<head>
3    <title>My Window Example</title>
4    <!-- extjs includes -->
5    <script type="text/javascript" language="javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
6    <script type="text/javascript" language="javascript" src="ext-2.0/ext-all.js"></script>
7    <link href="ext-2.0/resources/css/ext-all.css" type="text/css" rel="stylesheet"/>
8    
9    <script type="text/javascript" language="javascript">
10    function showWindow() {    
11        var win = new Ext.Window({
12            width:400,
13            height:200,
14            title:"Ext Window Example"
15        });
16        win.show();
17    }    
18    </script>
19</head>
20
21<body>
22
23    <div style="padding:20px;">
24        <input type="button" id="btnHello" value="Open My Window" onclick="showWindow();">
25    </div>
26    
27</body>
28</html>

So far so good but we have just scratched the surface on what we can do. If you look at the docs for Window you will see that there are a ton of configuration options that we can use to enhance our window. Here is list of the options I use often.

  • autoScroll: True to use overflow:'auto' on the panel's body element and show scroll bars automatically when necessary, false to clip any overflowing content (defaults to false).
  • modal: True to make the window modal and mask everything behind it when displayed, false to display it without restricting access to other UI elements (defaults to false).
  • html: An HTML fragment, or a DomHelper specification to use as the panel's body content (defaults to '').
  • animateTarget: Id or element from which the window should animate while opening (defaults to null with no animation).
  • autoLoad: A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt to load its contents immediately upon render. The URL will become the default URL for this panel's body element, so it may be refreshed at any time.
In our advanced example we will use many of these. The modal option is nice because it really brings focus to the window and does not allow the user to click anywhere else on the page. The html will be the content that the box is going to use. You could load and external url using the autoLoad feature but we will cover that in a later example. Finally the animate target allows us to create a nice animation of the window from an element to the window. This creates a nice fly in affect that is not necessary but sure does look nice. Here is the code to create our advanced example as well as a link to check it out. Advanced Example
view plain print about
1<cfsavecontent variable="htmlcontent">
2<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ante lectus, mollis eget, rutrum sit amet, venenatis quis, quam. Sed posuere massa et leo. Ut sodales arcu at nulla. Cras tempus sagittis ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam ante urna, vehicula eu, scelerisque ac, aliquam ac, magna. Etiam quis pede at est eleifend dapibus. Integer tristique, tellus sit amet malesuada iaculis, justo urna cursus nisl, a convallis lacus risus eget orci. Etiam elit arcu, pulvinar id, mollis in, mollis in, nibh. Quisque tincidunt. Proin dapibus tellus non nulla. Integer et metus. Praesent viverra, sapien id blandit tempor, est orci viverra diam, in molestie enim eros sed diam. Quisque dolor enim, fermentum sed, egestas eu, semper eget, sapien. Donec in diam. Morbi cursus gravida est. Donec eleifend metus eu purus. Nam mattis nisl ac lorem.</p>
3<br /><br />
4<p>Nam venenatis, pede vitae commodo tristique, eros diam rhoncus ante, ut porta dolor pede fringilla magna. Proin pretium euismod massa. Integer at dolor. In mollis risus sed arcu. Vestibulum tortor est, lobortis non, imperdiet a, mollis eget, libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus vel sapien. Ut facilisis convallis purus. Nulla facilisi. Quisque non lectus sit amet quam facilisis pharetra. Etiam dolor enim, auctor venenatis, dignissim a, scelerisque feugiat, erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
5<br /><br />
6<p>Etiam varius eros eu arcu egestas fringilla. Fusce dignissim lorem at felis. Aenean aliquet, tellus in adipiscing laoreet, elit nisl eleifend dui, et interdum turpis leo nec felis. Mauris at arcu vel ante ornare elementum. Ut vehicula arcu sed ligula. Vivamus sollicitudin dui. Nunc nec quam vel tortor molestie rutrum. Suspendisse quis eros ac elit luctus convallis. Cras malesuada. Cras ac orci.</p>    
7</cfsavecontent>
8
9<html>
10<head>
11    <title>My Window Example</title>
12    <!-- extjs includes -->
13    <script type="text/javascript" language="javascript" src="../ext-2.0/adapter/ext/ext-base.js"></script>
14    <script type="text/javascript" language="javascript" src="../ext-2.0/ext-all.js"></script>
15    <link href="../ext-2.0/resources/css/ext-all.css" type="text/css" rel="stylesheet"/>
16    
17    <script type="text/javascript" language="javascript">
18    <cfoutput>#toScript(htmlcontent,"html")#</cfoutput>
19    function showWindow() {    
20        var win = new Ext.Window({
21            width:400,
22            height:200,
23            title:"Ext Window Example",
24            autoScroll:true,
25            modal:true,
26            html:html,
27            animateTarget:"btnHello"
28        });
29        win.show();
30    }    
31    </script>
32</head>
33
34<body>
35
36    <div style="padding:20px;">
37        <input type="button" id="btnHello" value="Open My Window" onclick="showWindow();">
38    </div>
39    
40</body>
41</html>

There it is your very own window and lets be honest this one looks a little better than the default one in ColdFusion8. This may seem like a lot at first but once you understand what is going on here, it is pretty easy. As a side note I am using toScript in the example above, this makes sure our html string is javascript safe. I wrote an example of this today so check the archives. If anyone has any questions or comments I would love to hear them.

 

This entry was posted on January 6, 2008 at 6:24 PM and has received 32679 views. Comments 17 | Print this entry.