I have added a new component in Prototype UI after having seeing this auto_complete from InteRiders

First of all, I want to thanks those guys and also Guillermo Rauch for the first version based on mootools.

For a customer, I needed an component based on prototype butn with content set by Ajax request and with some other features. I decided to port this component in prototype UI.

The main advantage of being part of Prototype UI is I can use some great functionnalities of this frame work without adding complicated code like:

• Shadowing system for a better look and feel and better user experience. It does not look like a “flat” div under the input field
• IFrameShim to avoid the bug of having select box over the completion
• packr version

The component is fully unobtrusive, all HTML code needed for displaying completion is built by the script. As always, I try to make component skinnable. You can see below a “facebook” style as the original version and a more Apple like look and feel.

Facebook style

Apple style

It’s only available in trunk version right now but it will be included in the next release candidate planned for March.

If you really want to use it :), you can dowload a zip file with functionnal tests included.

I will add some features like serialization or a way to hand automatically hidden fields for an easier submit process. I have also to work on unit tests and documentation before the release.

If you want to try it, check those two functional tests: non ajax and ajax fill (be aware that it’s faking an ajax request, some browser do not like it :)).

PS: I will be away from my computer for a week, so I won’t reply to any comments before March.

I am very proud to announce First Release Candidate of Prototype UI.

This release only includes Window and Carousel. In trunk version you will find also Context Menu and an experimental Dock. Really soon, we will add Tooltips, Calendar (from Min), Accordion and more

So stay tuned :)

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 …)

Aaron (Aaron @ ennerchi) ask me to develop a simple layout manager for a web application. First of all, I want to thanks him for accepting to release this layout manager in open source under MIT-license.

This class is inspired by RUZEE.LayoutManager but based on prototype 1.6. RUZEE version was to slow on complex layout.

It’s an unobtrusive script based on CSS classes. This picture shows what CSS class to use.

Inside a lm_container you can add:

• lm_top / lm_bottom for top/bottom rows with fixed height and resizable width, you can add as many rows as you want,

• lm_left / lm_right for left/right columns with fixed width and resizable height, you can add as many columns as you want,

• lm_center, middle content with resizable width and height, you can have only one per container.

Here is a sample HTML code to show how it works:

   1  <div class="lm_container">    
   2    <div class="lm_top"></div>
   3  
   4    <div class="lm_left"></div>
   5  
   6    <div class="lm_center"></div>  
   7  
   8    <div class="lm_right"></div>  
   9  
  10    <div class="lm_bottom"> </div> 
  11  </div>

And just included layoutmanager.js in your head section

   1  <script type="text/javascript" src="prototype.js"></script>
   2  <script type="text/javascript" src="layout_manager.js"></script>

You can see it in this simple example

Of course layout can be nested like this:

   1  <div class="lm_container">    
   2    <div class="lm_top"></div>
   3  
   4    <div class="lm_left"></div>
   5  
   6    <div class="lm_center">
   7      <div class="lm_container">    
   8        <div class="lm_top"></div>
   9        <div class="lm_left"></div>
  10        <div class="lm_center"></div>  
  11        <div class="lm_right"></div>  
  12        <div class="lm_bottom"> </div> 
  13      </div>
  14    </div>  
  15  
  16    <div class="lm_right"></div>  
  17  
  18    <div class="lm_bottom"> </div> 
  19  </div>

You can see it in this embedded example

If you work with ajax request and want to add dynamically content, you just need to call

   1  layoutManager.add('your_element_id');

because you have a global variable: layoutManager. This zip file contains a sample with an Ajax Request.

So download it and focus on your web application :)

I have added a new option to prototype portal window class to be able to have multiple portals on the same page. The new option is accept, based on accept option of Droppable. So you can do something like this;

   1  var  portal = new Xilinus.Portal("#page2 div", { accept:"portal1"});
   2  var  portal = new Xilinus.Portal("#page2 div", { accept:"portal2"});

for having to portal in the same window. With a new HTML file:

   1    <div id="page1">
   2        <div id="widget_col_0"></div>
   3        <div id="widget_col_1"></div>
   4        <div id="widget_col_2"></div>
   5   </div>       
   6    <div id="page2">
   7        <div id="widget_col_3"></div>
   8        <div id="widget_col_4"></div>
   9   </div>    

I have added a new sample file. you can give it a try. I have updated widget.js javascript file or check out code from svn: svn co http://svn.itseb.com/public/prototype-portal/trunk prototype-portal

I have always wanted to create a Class to handle in a easy way portal page like netvibes. After having tried to used Sortable of script.aculo.us, I decided to write my own Class. I really like Sortable Class but it was too tricky to use it for a portal behavior. But I use Draggable and Droppable of course!

This article talks about the first version I made. It has been tested on Safari, Firefox, Opera and IE 6/7. The first version is based on Prototype 1.5.1.1 because I could not use 1.6. but the next version will be based on 1.6.

Here is how it works.

1) Create an HTML page with as many columns you need. Columns width can be fixed or variable, and with different size.

Here is a HTML sample with 3 columns

   1  <div id="page">
   2    <div id="widget_col_0"></div>
   3    <div id="widget_col_1"></div>
   4    <div id="widget_col_2"></div>
   5  </div>

And the CSS file

   1  #page {
   2    margin: 10px auto;
   3  }
   4  
   5  #widget_col_0 { 
   6    float:left;
   7    width: 30%;  
   8  }
   9  
  10  #widget_col_1 {
  11    width: 50%;
  12    float:left;
  13  }   
  14  
  15  #widget_col_2 { 
  16    float:left;
  17    width: 20%;  
  18  } 

Pretty easy!

2) You need to instanciate a Portal class with those columns:

   1  var  portal = new Xilinus.Portal("#page div")

3) Add widgets to this portal. There is a Widget class, fully CSS skinnable (there is a default theme), just create a new Widget instance and add it to the portal by specifying the column index. For example:

   1  portal.add(new Xilinus.Widget(), 0)
   2  
   3  // Or with title and content
   4  portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("bla bla bla"), 1);

And that’s it!! There are also some options when you create the portal:

• url: Url called by Ajax.Request after a drop (default null, no requests)
• onOverWidget: Called when the mouse goes over a widget (default null)
• onOutWidget: Called when the mouse goes out of a widget (default null)
• onChange: Called a widget has been move during drag and drop (default null)
• onUpdate: Called a widget has been move after drag and drop (default null)
• removeEffect: Remove effect (by default no effects), you can set it to Effect.SwitchOff for example

And main functions are:

• add(widget, columnIndex): add a new widget .
• remove(widget): remove a new widget.
• serialize(): returns a parameters string for Ajax.Request

You could a see a live example here. I have used onOverWidget/onOutWidget to add edit/delete buttons on widget and I added a remove effect to show how to use it with advanced features.

You can download the widget.js javascript file or check out code from svn: svn co http://svn.itseb.com/public/prototype-portal/trunk prototype-portal

Next I will create a full website for this class with documentation and CSS details (it’s based on sliding doors technique), port it to prototype 1.6 with new Element class (I will remove builder.js) and the new class model. Prototype rocks!!

The 1.6 version will also include unit tests.

One more thing, it’s under MIT license, as Prototype and script.aculo.us, so feel free to use it.

PS: Thanks to Seb for testing and debugging!

After a while without any new versions (as PWC) becomes complete and pretty stable) here comes 1.3.

The main features are blur/focus events with possibility of having 2 themes to make the focused window looks different. And a new theme by Emanuel Mila

Also a new example/tutorial, PWC-OS, a lightweight Web OS using PWC. It uses the focus/blur feature, of course.

I have also added a PWC section in this blog to post every new ideas/features.