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.
demo.cfm
Copy & Paste
1: <!--- Modal Window; tag based, fired on page load --->
2: <cfwindow
3: name="myWindow1"
4: title="My Window"
5: source="/demo/6/windowContentA.cfm"
6: height="300"
7: width="300"
8: resizable="true"
9: center="true"
10: closable="true"
11: draggable="true"
12: modal="true"
13: initshow="true"
14: minheight="200"
15: minwidth="200"
16: refreshonshow="true"
17: />
18:
19: <!--- Basic Window; tag based; fired with ColdFusion javascript --->
20: <cfwindow
21: closable="false"
22: draggable="false"
23: height="300"
24: name="myWindow2"
25: resizable="false"
26: title="My Window 2"
27: width="300"
28: x="100"
29: y="100"
30: >
31: <p>This is window 2.</p>
32: <p>This window was invoked using the ColdFusion.Window.show() method.</p>
33: <p>This window is not dragable, resizable or closable nor is it modal style.</p>
34: <p>This window is located at X coridnate 100 Y cordinate 100.</p>
35: </cfwindow>
36:
37: <input type="button" value="Open Window 2" onClick="ColdFusion.Window.show('myWindow2')">
38: <input type="button" value="Hide Window 2" onClick="ColdFusion.Window.hide('myWindow2')">
39:
40: <br />
41:
42: <!--- Fire window using ColdFusion.Window.create() method --->
43: <input type="button" value="Open Window 3" onClick="ColdFusion.Window.create('myWindow3','My window 3','/demo/6/windowContentB.cfm',{x:100,y:100,height:300,width:400,modal:false,closable:false,draggable:false,resizable:false,center:true})" />
windowContentA.cfm
Content of Window 1
windowContentA.cfm
Copy & Paste
1: <p>This modal window was invoked on page load....</p>
2: <p>The content of this page is a seperate file.</p>
3: <p>This window is dragable and resizable it is also modal. (User cannot interact with the pages behind until the window is closed)</p>
4: <p>This window is automatically XY centerd.</p>
windowContentB.cfm
Content of Window 3
windowContentB.cfm
Copy & Paste
1: <p>This window was invoked on click using the ColdFusion.Window.create() method</p>
2: <a href="javascript:ColdFusion.Window.hide('myWindow3');">Close Window</a>
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!!