The great thing about open source projects is you can get feedback from others and change code based on how you believe it should work. While the current Implementation of the cfwindow custom tag works just fine, something just did not feel right. The first problem, and its a big one, you could only create 1 instance of the window on the screen at any given time. The second problem was I just did no like how the window was created and called. Here is the current flow of the tag and then I will show you what I am going to change it to.

The code below is a basic example that can be found in the download. A quick run down on how the tag works. When you call the tag it will create some JavaScript that will eventually get pushed to the head of the document using cfhead. It will create the includes as well as the window. The first thing i do not like is that the tag creates a method that you will call to show the window. By default the method is openWindow but you could pass in any name you like.

view plain print about
1<html>
2<head>
3    <title>Basic CFWindow Example</title>
4</head>
5
6<body>
7    
8    <cfimport prefix="ext" taglib="cfext">
9    
10    <ext:window title="My Window" width="500" height="350">
11    html content here
12    </ext:window>
13    
14    <a href="##" id="btnShow" onclick="openWindow();">Open Window</a>
15    
16</body>
17</html>

While it was a good stab at first go around I think I cam up with a much better solution. If you have subversion access there is a file called newWindowExample in the trunk that demonstrates the new way of opening a window. The concept is still the same but after taking a closer look at how the cfwindow tag worked I came up with this. If we give the window an id we can solve the mutliple window problem. To also get around this you can push your includes in the same document so I moved those out to another file that you call in the head simply using <ext:include widget="cfwindow"/>. Now instead of calling some method you have the window object so you can just call methods on it like you would in ext. You can call show() to show the window, close() to close the window as well as add your own event listeners. I have also added support for some other attributes that I will talk about in another post once I change everything over.

view plain print about
1<ext:window2 id="mywin" title="Window 1" width="500" height="350" x="50" y="50" closeAction="hide">
2    html content
3</ext:window2>
4
5<a href="##" onclick="mywin.show();">Show mywin window</a>
I plan on changing over the code base and all of the examples to work like this, if anyone has any objections, suggestions or comments I would love to hear them.
 

This entry was posted on January 8, 2008 at 8:44 AM and has received 3725 views. Comments 11 | Print this entry.