danvega.org: cf_window Major Changes

cf_window Major Changes

Tuesday January 8, 2008 11:58 PM

Word Count: 345

First off I just want to thank everyone who mentioned the project and to all who provided comments, suggestions or feedback. With that being said I talked about some changes this morning that I thought needed to be made. Tonight I did an overhaul on the code for a couple reasons. The main problem with the old code is that you were not able to create multiple windows. This was easily solved by providing unique ids to each window, these ids can be user specified or auto generated. With this change I could no longer include the scripts and style sheets needed in the tag because if it was called multiple times the includes would pile up. With that came what I think will be good in the long run is to split out an include. For this particular project you can provide the widget name. In the future we can use this for multiple widgets, themes or a way to slim down the includes. Here is a basic example of the new implementation.

<cfimport prefix="ext" taglib="cfext">
<html>
<head>
   <title>cf_window / Basic Window Example</title>
   <ext:include widget="cfwindow"/>
</head>

<body>

   <ext:window title="A Basic Window" width="300" height="200">
      I am <strong>html</strong>
   </ext:window>

</body>
</html>

Here is the real gem in my mind though. I spent all night working on examples to show you what you can do with Ext and how easily you can do it with this custom tag. Head over to the demo link below and read through the examples. After I get some more feedback and work out a few bugs the next step is to slim down all of the includes and have some thoughts on how to do that. Let me know what you think! http://www.danvega.org/examples/cfwindow/

1921 Views

Comments

#1 Posted By: Willian Posted On: 1/9/08 5:17 AM

Hey Dan very nice, thanks!

#2 Posted By: Jonesy Posted On: 1/9/08 5:22 AM

Dan, this is nothing short of magnificent... I've loved the extjs demos, but to TBH found the code a little impenetrable. This wrapper has reignited my interest in what extjs has to offer. A huge thanks for all your hard work.

N

#3 Posted By: Willian Posted On: 1/9/08 5:44 AM

if to try to open the same window 2 times without refresh the page, does not open.

#4 Posted By: Dale Fraser Posted On: 1/9/08 6:11 AM

Hey Dan,

Love your work, had the exact same idea even discussed doing it with someone.

The way this version is designed with the import tag I think is perfect, leads into you doing other EXT widgets, I think window is the perfect one to start with. But would love to see a custom tag version of the Grid and tabs.

#5 Posted By: Peter Posted On: 1/9/08 10:38 AM

Dan,

First off I love this - I'd looked at the Ext stuff, scratched my head and gave up.

I am wondering one thing, how would you implement this if you need to define the ext:window in a cfinclude?

#6 Posted By: Dan Vega Posted On: 1/9/08 10:52 AM |

Author Comment

@Willian - Please read through all of the examples. You probably did not change the close action and one of the examples explains what that is.

@Jonesy - Thank you!

@Dale - That was really a focus, I think going forward I have a good structure to build a complete library.

@Peter - You should be able to import the tag lib and use them as is in your include. If it does not work please let me know

#7 Posted By: Jeff Hunter Posted On: 1/9/08 11:47 AM

I must compliment you on the great work you have done here. This is a big time saver for implementing the ext windows.

Your example pages work as they should on my server however I have created pages outside of the cfwindow folder and I can't get any of them to work. All I get is the error on page in the status bar. I have edited the path on the cfimport tag to go to the right location. <code><cfimport prefix="ext" taglib="/cfwindow/cfext"></code>I've tried different paths like relative from my document and from the site root and none have worked so far. If I drop the same file in the cfwindow folder and set the path correctly like <code><cfimport prefix="ext" taglib="cfext"></code> Is there some path I need to edit in the source files. Is there a better way that I should have installed the files?

Any help would be appreciated. Keep up the good work.

#8 Posted By: Dan Vega Posted On: 1/9/08 11:50 AM |

Author Comment

Where are you placing the cfext folder in relative to your webroot and project root. Can you just give a quick example of your directory structure so I better understand your problem.

#9 Posted By: Jeff Hunter Posted On: 1/9/08 12:03 PM

I placed the cfwindow folder at my web root so that would make my path to the cfext folder: /cfwindow/cfext

I copied the modal example page and moved it to different locations changing the path in the cfimport tag everytime. In my previous post I had the page at the site root but I had originally tried it in a folder structure like: example_apps/cfextjs/modal.cfm

I figured that making the path from the site root would allow me to place the code at any level in the site and it would work.

#10 Posted By: DanVega Posted On: 1/9/08 12:07 PM |

Author Comment

@Jeff - The only code you really need from the download is the cfext folder. Try placing that in your web root and then running an example from your root should work fine. All of the other code is just there for example purposes.

#11 Posted By: Jeff Hunter Posted On: 1/9/08 12:18 PM

I moved the cfext folder to my site root and I moved the modal.cfm page to the site root and it works but once I put the modal.cfm file into a folder and change the path to the cfext folder it breaks it.

Have you tried it? Does it work like that on your server. I'm on a linux server running CF8, if that makes any difference.

Thanks for your help.

#12 Posted By: dave Posted On: 1/10/08 12:57 PM

Great work Dan!
The ? I have is how can you close the window without the close button, say if you throw a form in there and after submitting have the window close by itself or with a clickable link that isnt the close button.

thanks!

#13 Posted By: Dan Vega Posted On: 1/10/08 5:34 PM |

Author Comment

@Dave - As long as you named your window id="myname" you can use the close method. Just use myname.close()

#14 Posted By: Dan Vega Posted On: 1/10/08 5:34 PM |

Author Comment

I will add an example for the that to the docs tonight!

#15 Posted By: dave Posted On: 1/10/08 6:05 PM

thanks Dan.. I Had tried that and could get it to sorta work with a link but not by itself. On the link you would have to click it 2x to close and then of course couldnt reopen it.

#16 Posted By: Dan Vega Posted On: 1/10/08 6:07 PM |

Author Comment

Can you send me your code? I have it working fine here. Check to make sure you have closeAction set to hide as well.

#17 Posted By: dave Posted On: 1/10/08 6:14 PM

Actually you are right, it just must be a bug in the camino browser, i just tried it on safari & ff and it works, which is a bit strange since camino is basically firefox.

#18 Posted By: dave Posted On: 1/10/08 7:02 PM

if you get bored and feel like adding the message box ones I'll visit your wishlist ;)

and if you get bored after that and feel like adding the forms I will visit it again!

#19 Posted By: Dan Vega Posted On: 1/10/08 7:22 PM |

Author Comment

Why would I just do it when I am bored, I love work like this! It is all in the plan. I really need to take a survey and find how many people would be interested in a complete library and what priority each widget is. Things such as grids and trees might be in more demand.

#20 Posted By: dave Posted On: 1/10/08 8:38 PM

well i am glad you like it, i looked at the framework wanted to pull my hair out! I was just saying that I could really use the message box ones on something I am doing now instead of small window popups (although I still am gunna mess with your windows ones, just haven't had a free moment and only getting busier.

#21 Posted By: Ted Johnson Posted On: 1/18/08 1:17 PM

I'm getting a blank page from your "basic example" above.

Does the ext lib have to be registered somewhere?

#22 Posted By: Dan Vega Posted On: 1/18/08 1:22 PM |

Author Comment

@Ted - Please read through the notes for each of the examples. I set it up as a guide to walk through each of the window features. The basic window does not actually show anything to the screen because show() is never called. I did this on purpose to show you how windows are created and then show. Please let me know if you have any more problems

#23 Posted By: Ted Johnson Posted On: 1/21/08 3:47 PM

Enjoying cf_window. Thanks!

Figured out how to pass a var to the window using the Contents Application Example. Took me a few hours to discover alpha values need single quotes in the url!

When the page is scrolled down, the popup window opens in the area that's not visible. Is there any way to make the x,y coords relative to the visible part of the page?

#24 Posted By: Dan Vega Posted On: 1/21/08 4:05 PM |

Author Comment

@Ted - Thanks for the support! I actually ran across that probably using Ext the other day. I will have to search the Ext Forums to see If I can find some answers on that.

#25 Posted By: Marco Posted On: 1/14/09 1:45 PM

Hi Dan in the example below, how can I make the window ID dynamic, like id="#Url_ID#" I am looping through many URLs but the ID won't accept a variable as a value. If I set it to id="windowID" the window opens with the last URL in the loop.

<ext:window id="adobe" title="www.adobe.com"; width="800" height="600" modal="true" closeAction="hide" collapsible="true" bodyStyle="padding:0px;" source="www.adobe.com";>" target="_blank">http://www.adobe.com";>;
</ext:window><a href="##" onclick="adobe.show();">www.adobe.com</a>;

#26 Posted By: Dan Vega Posted On: 1/14/09 1:55 PM |

Author Comment

The id's need to be unique. I am not sure what you are doing but you have to remember that server side code is executed first so absolutely you can use a variable as the name. As a quick test to make sure something is not wrong with your code you could do this.

id="win_#createUUID()#"

#27 Posted By: AKi Posted On: 4/17/09 5:16 PM

Does anyone know if it's possible to pass url variables using window with source page?

cf_window Major Changes

Comments

Post Your Comment

Navigation

Tagcloud

Archives

Blogs I Read

Recent Entries

Recent Comments

About

Stay Upated