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
<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
<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 (21) | 17756 Views
If you are looking for an experienced, professional, and reliable ColdFusion development company, contact PALADEM today.
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?
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.
Is it possible to dynamically change the dimentions of the window through js?
M@)
http://www.coldfusionguy.com/ColdFusion/blog/index...
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@)
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...
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@)
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?
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...
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.
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.
Thanks,
Nathan
I made a quick example to answer your question and posted it here:
http://www.coldfusionguy.com/ColdFusion/blog/index...
anyone with an idea.
Thanks
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.
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...