ColdFusion 8 added the CFWindow tag which creates a pop-up window in the browser, which is not really a pop-up window, but rather it is a div layer that looks like a window and can be hidden and shown via JavaScript. Today, I am going to demonstrate a couple ways you can expand your use of the CFWindow tag by incorporating some JavaScript that interacts with the underlying Ext.BasicDialog object.

This first example shows how to use the Ext.BasicDialog.isVisible() function to determine if the window is currently visible. Clicking the "Toggle Window" button calls a function that determines if the window is visible, then if it is visible it calls ColdFusion.Window.hide(), otherwise it calls ColdFusion.Window.show().

View working sample of the code below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <title>CFWindow and Ext.BasicDialog.isVisible()</title>
   <script language="JavaScript">
      toggleWindow = function(){
         //Get window object          
         myWindow = ColdFusion.Window.getWindowObject('MyWindow');
         
         //use the isVisible function to determine if the window is already open          
         if (myWindow.isVisible()){
            ColdFusion.Window.hide('MyWindow');
         }
         else{
            ColdFusion.Window.show('MyWindow');
         }
      }
   </script>   
</head>
<body>
<form name="MyForm">
<input type="button" value="Toggle Window" onclick="toggleWindow();">
</form>
<cfwindow
name="MyWindow"
center="true"
closable="false"
draggable="true"
height="300"
initShow="false"
minHeight="100"
minWidth="200"
modal="false"
refreshOnShow = "false"
resizable="true"
title="My Test Window"
width="400">

window contents
</cfwindow>
</body>
</html>

This second example shows how you can use the CFWindow to display form validation errors. I think this is pretty cool because you can customize the look and feel of your for validation alerts instead of just using a plain old JavaScript alert box.

I created an init() function, which gets called via ajaxOnLoad(). The int() function uses Ext.BasicDialog.addButton to add an "OK" button to the window which, when clicked, will call a function that closes the CFWindow.

The throwError() function I created takes in an HTML string that contains the error messages and updates the body of the CFWindow, then opens it. You will notice in the CFWindow tag, that I set the "modal" attribute value to "true". This makes it so the user cannot interact with the main window while the CFWindow is visible.

I set up the form so when the "submit" button is clicked it calls a checkForm() function, which validates the data fields, and concatenates a list of error messages. If any errors are found the throwError() function is called.

click here for the working sample

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
   <title>CFWindow as Alert</title>
   <!--- import the button.js script to power the OK button --->
   <script src="/CFIDE/scripts/ajax/ext/package/button/button.js" type="text/javascript"></script>
   <script language="JavaScript">
      init = function(){
         //Get window object          
         myWindow = ColdFusion.Window.getWindowObject('ErrorWindow');
         
         //create an OK button          
         myWindow.addButton("OK", closeErrWin);
      }
      throwError = function(errMsg){
         //Get window object          
         myWindow = ColdFusion.Window.getWindowObject('ErrorWindow');
         
         //put the error message in the body          
         myWindow.body.update(errMsg);
         
         //Show the window          
         ColdFusion.Window.show('ErrorWindow');
      }
      closeErrWin = function(){
         //Close the error window          
         ColdFusion.Window.hide('ErrorWindow');
      }
      checkForm = function(){
         errMsg = "";
         //check required numeric field          
         if (MyForm.MyNumberField.value == "" || isNaN(MyForm.MyNumberField.value)){
            errMsg = (errMsg + "<li><font color=800000>Please enter a Numeric value in the Number field</font></li>");
         }
         //check required string field          
         if (MyForm.MyStringField.value == ""){
            errMsg = (errMsg + "<li><font color=800000>Please enter a string value in the String field</font></li>");
         }
         //if an error was found call call the TrowError function          
         if (errMsg != ""){
            throwError('<b>Please fix the following errors:</b><br><ul>' + errMsg + '</ul>')
         }
         else{
            //otherwise, submit the form             
            MyForm.submit();
         }
         
      }
   </script>   
</head>
<body>
<!--- simple form --->
<form name="MyForm">
<b>Number:</b> <input type="Text" name="MyNumberField"><br>
<b>String:</b> <input type="Text" name="MyStringField"><br>
<input type="button" value="Submit" onclick="checkForm();">
</form>
<!--- set up the error window. --->
<cfwindow
name="ErrorWindow"
center="true"
closable="true"
draggable="true"
height="200"
initShow="false"
minHeight="100"
minWidth="200"
modal="true"
refreshOnShow = "false"
resizable="true"
title="An Error Occured"
width="400">


</cfwindow>
<!--- call the init function when the cf ajax stuff is done loading --->
<cfset ajaxonload("init")>
</body>
</html>

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Dustin's Gravatar isVisible() is neat, but what if your Window might not even be created yet? The problem I have found is that there is no way to make that check in pure Javascript, before you make the call to getWindowObject. Problem with that is, getWindowObject will throw an exception if it doesn't exist. So you have to put it in a try Catch block to get around it - seems rather inelegant.

Also what would be nice is a way to get all the Windows that are open currently (in javascript). Do you know of a way to do that?
# Posted By Dustin | 12/19/07 3:51 PM
Scott Bennett's Gravatar @Dustin,

I just added a new post to answer your question as it was too long to put into a comment. Click on the "JavaScript to Identify Current CFWindows" link in the related blog entries above.
# Posted By Scott Bennett | 12/20/07 3:16 PM
Dustin's Gravatar Thank you!
# Posted By Dustin | 12/20/07 4:46 PM
Matt's Gravatar Hi - great stuff!

Is it possible to dynamically change the dimentions of the window through js?

M@)
# Posted By Matt | 1/23/08 6:03 AM
# Posted By Scott Bennett | 1/23/08 2:50 PM
Dustin's Gravatar thanks man. Really appreciate you sharing your wisdom with us.
# Posted By Dustin | 1/23/08 3:08 PM
Matt's Gravatar ACE! That's wicked.

Now that we're able to only require a single window and can dynamically change the content and window size, is there a way to reposition it in the center?

Is there a list of all of the methods and controls somewhere - I don't recall seeing this stuff on the adobe site ...

M@)

M@)
# Posted By Matt | 1/23/08 3:30 PM
Scott Bennett's Gravatar @Matt
You would use the center() function.


<script language="JavaScript">
centerWindow = function(windowName){
//Get window object
myWindow = ColdFusion.Window.getWindowObject(windowName);

//use the centerfunction to center the window.
myWindow.center();

}
</script>

a complete list of the public methods available for the Ext.BasicDialog object (the object used to create CFWindows) can be found on this page:

http://extjs.com/deploy/ext/docs/output/Ext.BasicD...
# Posted By Scott Bennett | 1/23/08 5:30 PM
Matt's Gravatar Thanks loads. So much to learn ....
# Posted By Matt | 1/28/08 5:11 PM
Matt's Gravatar Hi

How would I leverage some of the public events, such as: beforehide

I've tried:

myWindow = ColdFusion.Window.getWindowObject('MyWindow');
myWindow.beforehide = function(){
alert("hello");
}

I'm not too experienced with this. Thank you for helping.

M@)
# Posted By Matt | 1/28/08 6:46 PM
Tran's Gravatar Hi,
How would I use a cfwindow to enter in some info, submit or close the cfwindow and return the values back to the main page?
# Posted By Tran | 1/30/08 2:54 PM
Scott Bennett's Gravatar @Matt,

You would create an function that adds a listener to the event and use the ajaxonload tag to call it. I went ahead and wrote an entry with examples of how to do this:

http://www.coldfusionguy.com/ColdFusion/blog/index...
# Posted By Scott Bennett | 1/30/08 4:55 PM
Scott Bennett's Gravatar @Tran,

You could place a form within your cfwindow and then set up a "hide" event listener that checks the form field values and moves them to where you need them on the main page. If you want an example I can post one later today.
# Posted By Scott Bennett | 1/30/08 5:02 PM
Scott Bennett's Gravatar FYI, Dan Vega wrote an article where he shows how you can assign your own button icon and class when you call the Ext.BasicDialog.addButton function I used in my second example above.

http://www.danvega.org/blog/index.cfm/2008/3/7/Add...

I thought that was pretty cool and anyone reading this article should read Dan's too.
# Posted By Scott Bennett | 3/7/08 3:04 PM
Nathan Stanford's Gravatar I like the center feature but if you want to move the window to a little below center what function do you call to center then move it down 20 px?

Thanks,
Nathan
# Posted By Nathan Stanford | 4/22/08 1:02 PM
Scott Bennett's Gravatar @Nathan,

I made a quick example to answer your question and posted it here:

http://www.coldfusionguy.com/ColdFusion/blog/index...
# Posted By Scott Bennett | 4/22/08 4:36 PM
Ebenezer Anjorin's Gravatar cfwindows is quite nice, but i need it to behave in a particular way. i want to remove the frame and the (x) close button. i want to use cfwindow to just display the bigger size of an image on mouseover and close on mouse out.

anyone with an idea.

Thanks
# Posted By Ebenezer Anjorin | 5/29/08 12:38 AM
WeBoat's Gravatar These are great tips and have been very helpful with CFWINDOW.... BUT: I can't seem to find a way to change the source attribute.

What I do is create the window, and before it is first shown, I would like to change the "source" field so I can add URL parms to it. I know it's cached after it's loaded, but I was hoping it could be modified before it's first shown.
# Posted By WeBoat | 5/29/08 10:52 PM
Scott Bennett's Gravatar @Ebenezer,

I wrote a post on how to do what you want here:

http://www.coldfusionguy.com/ColdFusion/blog/index...

@WeBoat,

You can navigate the CFWindow to whatever URL you with with the ColdFusion.navigate() function.

http://livedocs.adobe.com/coldfusion/8/htmldocs/Ja...
# Posted By Scott Bennett | 5/30/08 7:35 PM
los's Gravatar I know this article is waaaay old but I just stumbled across it. I ran your second example and am curious as to how you managed to make the background of the modal cfwindow somewhat transparent. When I use this attribute, the background is a solid light grey and I can't see anything in the background.
# Posted By los | 11/18/10 6:22 PM
L Williams's Gravatar Scott, this is way cool -and I can use most of it for what I want, but I am still missing one piece. Can I pass form vars to a window for user validation before submission - meaning if I wanted a pop up window to show the user what they entered before I inserted into a database, could I do that? it could be a lot of text
# Posted By L Williams | 6/17/11 11:32 AM
 
Home | Blog | Contact | © 2001 - 2021 The ColdFusion Guy - Scott Bennett. All rights reserved.