I am very happy and proud to announce prototype UI is officially open today.

At the beginning of the project, it was only a full rewrite of Prototype Window but it became quickly a UI library based on Prototype 1.6 and script.aculo.us 1.8 to include all my previous components like Prototype Carousel ....

This library is developed by Samuel Lebeau and myself. Sam worked hard on the core classes and the object design. It’s also done with help of Juriy Zaytsev and Vincent Le Moign for the design.

And I want to thank Emanuel ‘Mila76’ for his help on IE (BIG HELP) and for his div version of PWC (the new window system is based on it).

This version is only for developer and early adopters. You can only download it with subversion. The final release will be done when prototype 1.6 will be stable and of course when prototype UI too :).

You will be able to download a JS per component, a JS file with the full library and a build page will allow you to create your own JS file with UI components you need.

This goal is to build to best free UI library (under MIT licence) based on Prototype.

In the current version you have
  • window
    • skinnable
    • shadowing system independent from window and skinnable
    • div based
    • resizable from all borders and corners
    • custom buttons
    • Dialogs (like it’s done in PWC) are not yet implemented but will be done soon
  • carousel: only HTML content (no Ajax content)
  • dock (experimental)
  • shadow: a simple class to add shadow on any element with a absolute position.

Stay tuned ;) and long life to prototype UI.

Here is a sample test to see the new window system (from functional tests included in the distrib)

PS: Any feedback is really appreciated (bugs, documentation, patches, API …)

24 Responses to “Prototype UI beta version (PWC reloaded)”

  1. Josh Says:

    Now that is very nifty indeed. If only I had a reason to use it :)

  2. seb Says:

    One day, you will I am sure :)

  3. Les Says:

    Will Prototype UI become a widget library ala Ext or Dojo?

  4. serumax Says:

    Wow, this look really good. I’m going to try it in some proyects :)

  5. Jobb Says:

    This is major major major!

  6. 0m4r Says:

    Wow, pretty cool! Really a nice job man!

  7. Mark Holton Says:

    Awesome guys.

  8. Daniel Skinner Says:

    This is gonna be awesome! A perfect compliment ot Prototype.

  9. Jordan Says:

    Nifty. now, if only you added the background dimming and window rollover effects like OS X’s exposé, that would be cool!

  10. cweeb Says:

    Again, going back to your portal.js example, which I am using with pretty good success in a project. I have 2 questions…

    - in IE, when you drag a widget around, the title text loses it’s antialiasing once dropped, very weird, you can see this in your sample page in IE7 (not sure about IE6)

    - any advice on iframe based widgets? I currently keep your the div and buttons in the main page, and host an iframe inside (like default google gadgets), but one thing I have not been able to get working is changing the height of the iframe based on the content

  11. Animal Says:

    Pretty, but what can it be used for?

    An isolated island of prettiness to be filled up with HTML.

    Why are people wasting their efforts to cobble together (ooooh, ahhhhhh!) a window-like widget?

    On it’s own like this it’s utterly useless.

  12. seb Says:

    @animal: prototype UI is not just a window-like widget, and you should pay more attention when you use any website, a LOT of them have modal dialog which is in fact just a window-like widget!

  13. DarkRat Says:

    so, 1.6 is out. when can we expect a final release?

    I like it :D

  14. Nebz Says:

    Great work !!

    @animal:it’s not useless when you have +90% browser blocking window.open…

  15. fable Says:

    You’re great! However, when i click NEAR one of the three buttons but NOT ON them, in FF i get this error: element has no properties – this.action(element.className);

  16. ar13f Says:

    It’s so impressive. Unfortunately, it cannot be used right now. I hope there will be great javascript ui framework. I have been comparing with this prototype with JQuery and ExtJs since they have good ui already. I just confuse what the choice is.

  17. Samuel Says:

    @fable: You’re right, this will be fixed soon ! Please report such defects on the development platform. Thanks !

  18. Ran Baron Says:

    Any chance for having your A-m-a-z-i-n-g Portal class ported to v1.6 and included in the UI site? (Btw, Thanks for all of your awesome work!) Ran

  19. Mariano Iglesias Says:

    @Sebastien/Samuel: I have a question, I’ve read that you will be using a DIV approach to windows, does this mean that there’ll be no longer support for IFRAME based windows? They are particularly useful to render standard pages with form handling right into the window, with its own styling / HEAD stuff, etc.

  20. DarkRat Says:

    there are Iframe-based “URL-content” windows on the SVN functional test. So I think it’s possible

  21. seb Says:

    @Mariano: DarkRat is correct, IFrame window is already support. It’s URLWindow. @Ran: It will be added for sure and with more options :)

  22. Amin Says:

    DUDE! How u DOIN’? IT IS AWSOME! I just tried on IE, when you minimize, the shadow will stay the same. (does not get minimized…). You might already know that.

    KEEEP IT UP. CAN”T WAIT MAN!

  23. John Says:

    This is awesome! I will use that docking thing at one of my projects :) i love it

  24. Staffz Says:

    This lib is really cool, keep it up. I’ll probably even use it in a project that is coming up. I hope it doesn’t meet the same fate as prototype graphics ;)

Sorry, comments are closed for this article.