Twitter: raymondcamden


Address: Lafayette, LA, USA

ColdFusion 8: AJAX UI Windows

06-20-2007 75,972 views ColdFusion

I've been blogging about new ColdFusion UI controls in ColdFusion 8 and today I'm discussing CFWINDOW. First - CFWINDOW does not - as you might guess - create a popup window. Which is probably a good thing. The last thing this world needs is another popup window. Instead the tag creates a "virtual" window that appears on top of your page. Let's take a look at a few examples.

At the simplest level, all you need to for a window is:

view plain print about
1<cfwindow>
2This is a window.
3</cfwindow>

But if you run this, nothing shows up! Turns out that by default, windows are hidden. To make a window show up right away, you would do:

view plain print about
1<cfwindow initShow="true">
2This is a window.
3</cfwindow>

You can see an example of this here.

So this isn't terribly exciting so far, so let's add a bit of meat to it:

view plain print about
1<cfimage action="info" source="lolcat1.jpg" structName="cat">
2
3<cfwindow initShow="true" title="Welcome to &lt;CFWINDOW&gt;"
4         center="true" modal="true" resizable="true"
5         draggable="false" height="#cat.height#">

6<img src="lolcat1.jpg" align="left">
7This is a cat.
8</cfwindow>

So this example begins by using cfimage to get information about an image. I use that information to supply a height to my window. I'm also using a few more attributes:

  • Title - This sets the title of the window.
  • Center - This centers a window.
  • Modal - This makes the window have focus - it also does a cool "gray" effect on the rest of the page.
  • Resizable - This lets you resize the window.
  • Draggable - This lets you enable window moving (I turned it off)
  • Height (and Width) - This lets you size the window.

You can see an example of this here.

As with other UI controls, you have some options for changing the look of the window as well:

view plain print about
1<cfwindow initShow="true" title="Styling Window" center="true" height="400" width="400"
2         bodyStyle="font-family: verdana; color: ##ff0000;"
3         headerStyle="font-family: verdana; background-color: black; color: white">

4<p>
5This is a window with a bit more text in it. It is fairly
6interesting in a not-so-interesting way. A bit like Paris Hilton
7</p>
8</cfwindow>

You can see an example of this here.

You can also supply a source as well:

view plain print about
1<cfwindow initShow="true" title="My Cat" center="true" source="cat2.html" height="360" />

You can see an example of this here.

Again - like the other controls, there is a nice JavaScript API to work with the windows. For example, you an show and hide a window:

view plain print about
1<cfwindow initShow="false" title="Welcome to &lt;CFWINDOW&gt;"
2         center="true" resizable="true"
3         draggable="false" name="mywin">

4
5Hi, I'm a window.        
6
7<form>
8<input type="button" value="Close Me!" onClick="ColdFusion.Window.hide('mywin')">
9</form>
10
11</cfwindow>
12
13<p>
14<a href="javaScript:ColdFusion.Window.show('mywin')">Show Window</a><br />
15<a href="javaScript:ColdFusion.Window.hide('mywin')">Hide Window</a><br />
16</p>

This example uses the ColdFusion.Window.show/hide API to, well, show and hide my window. Also note I added a button inside the window itself. This gives the user 3 ways to close the window. The X button in the upper right hand corner of the window. The button in the form. Lastly - the link.

You can see an example of this here.

You may also register handlers for the show/hide event using ColdFusion.Window.onShow/onHide:

view plain print about
1<html>
2
3<head>
4<script>
5function showWindow(name) {
6    alert('You just showed ' + name);
7}
8
9function hideWindow(name) {
10    alert('You just hid ' + name);
11}
12
13setup = function() {
14    ColdFusion.Window.onShow('mywin1', showWindow);
15    ColdFusion.Window.onShow('mywin2', showWindow);
16    ColdFusion.Window.onHide('mywin1', hideWindow);
17    ColdFusion.Window.onHide('mywin2', hideWindow);
18}
19</script>
20</head>
21
22<body>
23<cfwindow initShow="false" title="Window 1" name="mywin1">
24Window 1
25</cfwindow>
26
27<cfwindow initShow="true" title="Window 2" name="mywin2">
28Window 2
29</cfwindow>
30
31<p>
32<a href="javaScript:ColdFusion.Window.show('mywin1')">Show Window 1</a><br />
33<a href="javaScript:ColdFusion.Window.hide('mywin1')">Hide Window 1</a><br />
34<a href="javaScript:ColdFusion.Window.show('mywin2')">Show Window 2</a><br />
35<a href="javaScript:ColdFusion.Window.hide('mywin2')">Hide Window 2</a><br />
36</p>
37
38</body>
39</html>

In this example, I simply register handlers for the show/hide event for my two windows. Only one argument is passed to the window, the name of the element. Note this is not the same as the name you provide. I'm assuming it is a random/unique ID that is used by ColdFusion.

You can see an example of this here.

Lasstly - this is the only UI control that can be completely created from within JavaScript. (The tab control lets you add a tab, but you can't create the entire control.) By using ColdFusion.Window.create, you can create a window with any option you choose. For my last example, I create a form and use the following JavaScript to create a window:

view plain print about
1<script>
2function makeWindow() {
3    
4    var title = document.getElementById("title").value;
5    var width = document.getElementById("width").value;
6    var height = document.getElementById("height").value;
7    var cbCentered = document.getElementById("centered");
8    if(cbCentered.checked) centered = true;
9    else centered = false;
10    
11    var config = new Object();
12    config.width = width;
13    config.height = height;
14    config.centered = centered;
15    ColdFusion.Window.create('main'+Math.random(),title,'cat2.html',config);
16}
17</script>

Note the use of a random number on the window name. Right now there is no (as far as I can tell) way to destroy a window. I was able to hide a window in the beginning of a function, but hiding it didn't destroy it. So if you changed settings and hit the button, you always got the first window back. I'm not doing any type of real validation, so be gentle on this You can see an example of this demo.

One JavaScript API I didn't cover is ColdFusion.Window.getWindowObject. This gives you access to the underlying JavaScript object.