Monday, June 5th, 2006

Prototype Window Class

Category: JavaScript, Library, Prototype

The Prototype Window Class allows you to add in-browser windows with the flick of a few lines of code (and CSS to tweak).

The window features:

  • Resizable windows
  • Minimize/Maximize
  • Modal Dialogs
  • Visual Effects
  • Skinnable

Usage

javascript

  1. win = new Window('window_id', {title: "Sample", top:100, left:350})
  2. win.getContent().innerHTML = "<h1>Hello world !!</h1>";
  3. win.setDestroyOnClose();
  4. win.showCenter();

Surprisingly there is even good documentation, Samples, and more.

Prototype Window Class

Posted by Dion Almaer at 8:54 am
20 Comments

+++--
3.7 rating from 98 votes

20 Comments »

Comments feed TrackBack URI

And finally, after moving past the fundamentals of xmlHttpRequest, we come back to good ol DHTML – js/html, UI widgets, databinding. And this is where the likes of dojo and prototype fall far behind the established players. Eg, domapi, bindows (and others) go way beyond the basics of a window widget. Give me a listgrid with sortable, moveable columns, full keystroke and tab support and I’ll give you a keystroke optimised, data entry Business Application. Otherwise, we are stuck with moribund mouse bound Web Apps that any data entry operator will have a pink fit if you suggest they move from their old but extremely fast CHUI terminals.

So where is such a widget based on dojo? Prototype? Last I looked there isn’t.

Comment by Simon G — June 5, 2006

http://www.cnn.com/2006/TECH/06/02/data-entry-operators-across-america-have-pink-fits-over-latest-ajax-craze.html

Comment by Travis B — June 5, 2006

128 kb of JavaScript for that is kind of heavy huh?

Comment by José Jeria — June 5, 2006

However, I am glad to give $10.00 to an open source developer (as I just did for this project) and let someone else pay $495.00 for a library (domapi) that will ultimately become obsolete. Much functionality, found in many libraries, tools and products, has already been overrun by open source projects that are more stable (e.g. the domapi listgrid component continues to break while moving columns) and powerful (many open source success stories have truly broken the mold in their niche or area) that it is unwise too complain of a “lack of steak” when the for-profit outfits will always be stuck “selling the sizzle.”

Comment by Andrew Collins — June 5, 2006

there’s another one: http://www.net4visions.com/dev/dialog/dialog.htm

Comment by mmjaeger — June 5, 2006

[…] Prototype Window Class. Nifty. (via) […]

Pingback by Prototype Window Class at The Hero Dies in This One — June 5, 2006

The code is rather messy and not particularly extensible beyond skinning the buttons etc. You can create your own using prototype, using the handle attribute of draggable window, then use this patch (http://dev.rubyonrails.org/ticket/3727) and extend it a bit to make it work correctly (patch assumes window is fixed, easy fix tho). Also it’s better (or tho not as portable) to clone your window from a page (eg var winItem = $(‘_win’).cloneNode(true);) rather than create the layout inside the javascript.

Enjoy

ps someone needs to run with this (http://knutties.livejournal.com/24270.html), it’s absolutely brilliant, you can pull the code out and effectively create fragments of content, effectively giving you transclusion capability. Combine that with the windows as mentioned above and you have a really nice little platform for knowledge management, now thats web2.0 baby!

Comment by TiM — June 5, 2006

The code is rather messy and not particularly extensible beyond skinning the buttons etc. You can create your own using prototype, using the handle attribute of draggable window, then use this patch (http://dev.rubyonrails.org/ticket/3727) and extend it a bit to make it work correctly (patch assumes window is fixed, easy fix tho). Also it’s better (or tho not as portable) to clone your window from a page (eg var winItem = $(‘_win’).cloneNode(true);) rather than create the layout inside the javascript.

Enjoy

ps someone needs to run with this (http://knutties.livejournal.com/24270.html), it’s absolutely brilliant, you can pull the code out and with minor mods can effectively capture fragments of content, giving you transclusion capability! Combine that with the windows as mentioned above and you have a really nice little platform for knowledge management, now thats web2.0 baby!

Comment by TiM — June 5, 2006

“However, I am glad to give $10.00 to an open source developer (as I just did for this project) and let someone else pay $495.00 for a library (domapi) that will ultimately become obsolete.”

Hey – can’t argue against the $ proposition of a free library. However that does diminish when developing commercial apps and the domapi does have a free/non commercial licence. But whether they ultimately will become obsolete – who knows? Its the here, the now, and the sort of widget support that domapi and bindows provide is just waaay ahead of anything built on prototype/dojo/mochikit.

Maybe the widgets will come with the others? Time will tell.

Comment by Simon G — June 5, 2006

Looks familiar ;)
http://ajaxian.com/archives/javascript-windows-enhanced

Comment by JB — June 5, 2006

And the lord said unto them,
Thou shalt not overwrite the native Window object.

Comment by henrah — June 5, 2006

[…] While reading AJAXIAN today there was an article on creating in-browser windows. The window features: * Resizable windows * Minimize/Maximize * Modal Dialogs * Visual Effects * Skinnable Not only can you load a full webpage inside one of the windows but you can close out just like you can with browsers. Many of the features that this class allows you to do will hopefully be implemented in Call Log Version 3. […]

Pingback by Armenian Eagle » Prototype Window Class — June 6, 2006

I spent a few hours integrating this into my app a few weeks ago (previous version, admittedly) only to discover there were serious issues with IE6. Couldn’t find any statement from the author as to what browsers it’s known to work with.

The net4visions alternative is proving painful too. It’s a shame Scriptaculous doesn’t have this covered yet.

Comment by David — June 6, 2006

I tried to integrate the dialog confirm box with ASP.NET, its weird that the “Confirm” takes a life of its own. I can’t seems to call it like a regular javascript “confirm” with a return code value.

PPL gotta stop calling Ajax this and that. It’s still the plain old dhtml, What I’m looking for are javascrpt UI Widegts that supports different types of datasource like collections, array, objects, whatever. Otherwise, they are no more useful to me than 5 years ago.

Comment by Liming — June 6, 2006

looks cool but may be not very useful to my daily work

Comment by chenggn — June 6, 2006

[…] Prototype Window Class: “The Prototype Window Class allows you to add in-browser windows with the flick of a few lines of code (and CSS to tweak). […]

Pingback by Prototype Window Class — June 6, 2006

I tried it out in Opera 8.5 – I think a modern browser that understands DOM and CSS and all the W3C things. It doesn’t work, an error occurs. I think the developers should not only think of ff and ie6/7. web developers should not use such framworks if they are not compatible. Its the same with dojo and co.

Comment by Andreas Kalsch — June 9, 2006

[…] However, there does seem to be some debate over at the Ajaxian.com comments as to its implementation and true nature. […]

Pingback by Prototype Window Class at fnerd.com — June 20, 2006

The tool is great no doubt. I appreciate the standards also. I need to know how can I trap Close Button click or my custom callback function from within the window!!! Please let me know if any luck.

Comment by Raman Basu — July 18, 2006

Pls check out this site where I have implemented prototype windows.

Comment by Raman — August 30, 2006

Leave a comment

You must be logged in to post a comment.