CFWindow Custom Tag Implementation

Word Count: 531

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.

<html>
<head>
   <title>Basic CFWindow Example</title>
</head>

<body>
   
   <cfimport prefix="ext" taglib="cfext">
   
   <ext:window title="My Window" width="500" height="350">
   html content here
   </ext:window>
   
   <a href="##" id="btnShow" onclick="openWindow();">Open Window</a>
   
</body>
</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.

<ext:window2 id="mywin" title="Window 1" width="500" height="350" x="50" y="50" closeAction="hide">
   html content
</ext:window2>

<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.

Comments

#1 Posted By: Rey Bango Posted On: 1/8/08 8:29 AM
Hopefully this brightens your day Dan:

http://ajaxian.com/archives/ext-20-and-coldfusion

Great job! :D

Rey...
#2 Posted By: Dan Vega Posted On: 1/8/08 9:03 AM |
Author Comment
After last night I really needed that Rey, thanks! I think I have solid base here and it is only going to get better. Thank you for the support!
#3 Posted By: Willian Posted On: 1/8/08 9:52 AM
how to open 2 windows in the same page?
#4 Posted By: Dan Vega Posted On: 1/8/08 9:54 AM |
Author Comment
Well you can not do it with the current code. Once I change the code base you could just give each window a unique id like win1 & win2 and to open the window just use win1.show()
#5 Posted By: Willian Posted On: 1/8/08 10:07 AM
<a href="javascript:void(0);" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bt_materias','','imagens/bt_materias_over.jpg',1)" id="BtnMateria" onClick="wmat.show();"><img src="imagens/bt_materias.jpg" width="119" height="27" border="0" id="bt_materias" title="Matérias" /></a>

<a href="javascript:void(0);" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bt_institucional','','imagens/bt_institucional_over.jpg',1)" id="BtnInstitucional" onClick="winst.show();"><img src="imagens/bt_institucional.jpg" width="119" height="27" border="0" id="bt_institucional" title="Institucional" /></a>

<cfimport prefix="ext" taglib="cfext">

<ext:window id="winst" title="Institucional" width="580" height="420" iconCls="settings" modal="true" maximizable="true" autoScroll="true" animateTarget="BtnInstitucional" autoload="institucional.cfm"></ext:window>

<ext:window id="wmat" title="Matéria" width="580" height="420" iconCls="settings" modal="true" maximizable="true" autoScroll="true" animateTarget="BtnMateria" autoload="institucional.cfm"></ext:window>

correct?
#6 Posted By: dave Posted On: 1/8/08 10:40 AM
Great work Dan, ( and Ray for posting! ).
Even though I have CF8, I find not having Ext 2 frustrating. I also find my pages BLOATED with all the cfimports. I think if you ( and others ) can continue to tie CF and Ext together it will be a huge addition to the community.
#7 Posted By: Dan Vega Posted On: 1/8/08 10:42 AM |
Author Comment
@William - Your code is right but using the current code base it will not work. I should have everything updated tonight.
@Dave - Thanks for the support.
#8 Posted By: Willian Posted On: 1/8/08 10:48 AM
Thanks for help Dan
#9 Posted By: Troy Allen Posted On: 1/8/08 11:41 AM
Dan,

Awesome job with this tag. One suggestion and one question...

Suggestion: I found I needed to add an optional Attribute of "cfwindowPath" so I could pass in the full or relative path to the cfwindow directory. My calls would not all be in the same relative path to cfwindow/cfext, so now I can send the path if needed, like this:

<ext:window title="My Window" width="500" height="350" modal="true" maximizable="false" draggable="false" autoScroll="true" animateTarget="btnBegin" cfwindowPath="#request.myAppRootURL#extensions/cfwindow/">

I then simply added the attribute.cfextPath to the beggining of the JS and CSS include paths in window.cfm, such as:

<script type="text/javascript" language="javascript" src="#attributes.cfwindowPath#cfext/ext/window.js"></script>

Of course I set the default for the attr to "" so it would default to the current functionality. I think others would find this quick and easy edition very helpful as well.

Now the Question: Your EXT window.js is much larger than the original one in the framework. I assume you manually combined the core js with window.js? If so, what were all the original EXT files that you combined into one window.js?

Thanks for the great CF tag...keep up the good work!

Regards,
Troy
#10 Posted By: Dan Vega Posted On: 1/8/08 12:12 PM |
Author Comment
I could see why you would need to add a path but let me sit on that problem for a little bit as I think there is a more elegant solution. You would probably want to keep attributes specific to the window itself. My JS Was custom built from ext build your own tool. As soon as I can get this project closer to a stable release I have plans to reduce the size of everything.
#11 Posted By: Damaris Posted On: 5/15/09 7:41 AM
Could you help me. A boy can learn a lot from a dog: obedience, loyalty, and the importance of turning around three times before lying down.
I am from Mongolia and now teach English, give please true I wrote the following sentence: "Definition of synthroid in the medical dictionary."

Thank you so much for your future answers :-D. Damaris.


Post Your Comment

Leave this field empty







Show Captcha

If you subscribe, any new posts to this thread will be sent to your email address.

Copyright © 2007 Dan Vega | BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.