Add Comment
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 1windowContentB.cfm
Content of Window 3Demo
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
Gabe, you're typing Coldfusion when you should be typing ColdFusion.
Pay attention to the capitalization
Mike @ Saturday 14 Jun 2008 - 11:28:56 AM
Hi, great info, very helpful. Can this work in a cfform with flash format, I'm having a hard time with it. thanks
Dave @ Tuesday 15 Jul 2008 - 02:00:08 AM
Thanks for the demo!
Unfortunately, when I use the file contents, no windows show up, just all the content on one page: http://kodemonki.com/demo.cfm The javascript error says 'Coldfusion' is undefined. I also get this error when trying to use CFGRID. Do you know what would be causing this?
Kate @ Tuesday 15 Jul 2008 - 03:33:59 AM
I'm also getting this "Error: ColdFusion is not defined
Source File: javascript:ColdFusion.Window.create(..."
So is there a bug or something?
Rey @ Wednesday 15 Oct 2008 - 01:05:47 AM
ok
gfouhy@pace.edu @ Tuesday 21 Oct 2008 - 11:30:35 PM
I too got the "Coldfusion is not defined" error. I had to fix 2 things.
1. make sure the CFIDE directory is a virtual directory in your website.
2. It is spelled ColdFusion not Coldfusion. Dreamweaver puts it in as the lower case f not the upper case F.
Tim @ Wednesday 29 Oct 2008 - 05:22:23 AM
There is an error on this page. http://tutorial6.learncf.com/demo/6
Error retrieving markup for element. I'm getting the same error. What is causing this error and how can I get rid of this error.
Frank Moore @ Saturday 13 Dec 2008 - 03:56:30 PM
When I tried the demo scripts on my own server, they worked as expected. However, when I tried adapting the code for the "window 3" option to a CF page I'm working on, I get nothing, not even an error. Eventually, I inserted the code exactly as given, and placed the windowContentB.cfm file in the directory I'm working in, and I still get nothing. The spot in the code where I'm trying to add this is inside of a nested table. Other than this, I see nothing else that could be interfering with it.
BTW, I even took the demo.cfm file (which still works fine), took out the lines for the other two windows, saved it as a different file in the same directory, and found that file no longer works.
Max @ Friday 09 Jan 2009 - 08:32:14 AM
After some more digging around, I found that without any other cfwindow tags on the page, I need to add this line in order for the page to call up the JavaScript needed to make the window:
<cfajaximport tags="cfwindow">
Now it works fine.
Max @ Saturday 10 Jan 2009 - 03:11:57 AM
Thank you
Cliff @ Friday 30 Jan 2009 - 06:57:26 AM
I'm having trouble with Spry Validation Text Field on cfwindow page. Spry works perfectly when opened on regular page, but when I open the same page in windowed mode Spry Validation doesn't work. No error message, nothing... It behaves like regular text field.
Any idea?
nenad @ Wednesday 25 Nov 2009 - 06:00:50 AM
ss
ss @ Friday 08 Jan 2010 - 12:31:11 AM
Click button to add a comment
Author
Darren Moore