Basic CFWINDOW Tutorial

ColdFusion Tutorial #6

Gone are the days of cumbersome javascript popup windows. Enter CF8's CFWINDOW!

We all use, at some time or another, popup windows; CFWINDOW is a very simple yet affective way of achieving these. Let’s break down the CFWINDOW tag and see how simple this tag really is.

demo.cfm

The first example is a modal type window with nearly all attributes enabled.

First we name the window.
The title attribute will be displayed in the title bar of the popup window.
As this windows source is external to the tag, here we enter the name of the source file.
The height and width attributes define the size of the window and these are referenced as pixels.
The resizable attribute defines weather the user can resize the window.
If the centre attribute is set to true, the window will be automatically be XY centred. Sweet!
The closable and dragable attributes allow the user to drag the window around and also close it via the X button.
Want the window to be modal style? No problem, set this attribute to true.(modal stops the user interacting with other pages until window is closed)
If you require the window to display on page load set initshow attribute to true.
The min height and width attribute sets the maximum size the window can be resized to.
If refresh onshow is set to true, the source page is forcibly refreshed on execution of the tag.

This next example is very similar to the first except we have set the attributes to disallow the user any control over the window
This example also uses 'static' content. This means the content between the opening and closing tags mak up the body of the window.

The other noticeable difference is the omission of the initshow attribute. This means this window must be called with the ColdFusion.Window.show('myWindow2') function
i.e. <input type="button" value="Open Window 2" onClick="ColdFusion.Window.show('myWindow2')">

Closing a window is very simple with the ColdFusion.Window.hide() function.
i.e. <input type="button" value="Hide Window 2" onClick="ColdFusion.Window.hide('myWindow2')">

The third example shows the use of the ColdFusion.Window.create() function.
This method allows the call of a window using just javasctipt. This function takes all the same attributes as the tag example.

windowContentA.cfm

Content of Window 1

windowContentB.cfm

Content of Window 3

Demo

See this code running!

Download

Download this code as a zip!

Comments

This is just Great, thanks for taking the time to teach us! Here is a request, it seems that no one is teaching web services, or that it is hard to find out about it, I did a tutorial from Adobe,s web site the Coldfusion article but Matt Brown (Coldfusion components and web services) it was an old tutorial and there was a reference that you had to have CF MX installed, I upgraded to CF8 and the tutorial was calling for a "CompanyInfo" database, this is not in CF8, after spending 30 minutes following along, to launching and testing the application, I got an error message, then I discovered that this tutorial was outdated.
So I moved on to the next part, Web services....(I was so looking forward to this!), well needless to say that the web services was calling for a currency exchange, and that link was no longer posted on xMethods UDDI web site.
the tutorial is here, http://www.adobe.com/devnet/coldfusion/articles/creating_cfcs.html
it was a great tutorial and I learn a lot about the best practice and logic of CFC with applications.
But I sure would love to get a leg up on Web Services, that seems important.
thanks for every thing, to all of the Tutors!!
Camilo @ Wednesday 05 Sep 2007 - 01:50:47 AM

Nice Tutorial. Do you know how to set focus to an input field within a <CFWINDOW.
Bill Smythe @ Thursday 24 Jan 2008 - 12:28:58 AM

Also,
Is there a way to cascade windows created with <CFWINDOW
Bill Smythe @ Thursday 24 Jan 2008 - 12:37:33 AM

I have a page using cflayout where one of the tabs contain a link that shows a cfwindow. The cfwindow contains an iframe that has a form on it. When the user submits the form the tab that opened the cfwindow gets refreshed. The problem I am having is with closing the window. Even if I add a button within the iframe that uses "coldfusion.window.hide('winname')" I get the same error message "'Coldfusion' is undefined".... any ideas?
Gabe @ Wednesday 12 Mar 2008 - 04:39:05 AM

I'm not sure if its just me but when I try to use the cfwindow tag I get a javascript error.
"Array length must be assigned a finite positive number"
I even get it when I download the demo which obviously works when I preview it on this site. Any ideas?
Ryan @ Wednesday 12 Mar 2008 - 07:18:10 AM

Nevermind, I figured out the issue.
Ryan @ Saturday 15 Mar 2008 - 12:48:59 AM

Click button to add a comment

Author

Darren Moore

Published

Monday 03 Sep 2007

Tags

cfwindow