Simple Layout Manager with Prototype 1.6

October 3rd, 2007

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

Posted by seb Filed in English, Javascript

15 Responses to “Simple Layout Manager with Prototype 1.6”

  1. Erik R. Says:
    October 5th, 2007 at 10:20 AM

    Isn’t this what CSS is for? I understand that most webapps, and obviously those that depend on ajax, must assume that the user has javascript enabled. But why would you want to change the size and location of divs based on their classes in javascript?

    It would be nice if you could explain what you’re doing that can’t be accomplished using the technology already designed for changing the size and location of divs based on their classes.

  2. Joris Says:
    October 9th, 2007 at 03:41 PM

    This is some awesome stuff! Exactly what I need, and expected from css when it all started.

  3. Adam Says:
    October 9th, 2007 at 04:29 PM

    This is pretty cool in concept but. I feel trades one set of problems for another. If, for example you look at your “embedded example” (linked above) you’ll see that the main content area gets obscured behind the bottom divs when you reduce the browser window size (in my case, to 1024 X 768).

    While CSS definetly needs a bit of help now and then, I think you might have overshot the mark (pehaps a mini-version that just takes care of CSS’s deficiencies when it comes to heights).

  4. Red Bung Says:
    October 9th, 2007 at 06:23 PM

    AJAX enthusiasts can suck it. Thanks for the galleries and the tab widgets. Really, they were appreciated. But, don’t try to force AJAX into every corner of everything, please. We don’t need the hassle. Unless you want the internet to be nothing but a bunch of free plug-n-play widgets.

  5. John L Says:
    October 9th, 2007 at 07:38 PM

    Great work here!

    Just to speak a little bit to the “why the fuck would you want this” group out there, if what you need is a UI that behaves (vis-a-vis resizing, etc) like a desktop app you’re going to find utility in this thing.

    Now, if you furthermore have experience developing desktop GUI apps (eg, using industry-standard UI frameworks such as Swing, SWT) you’ll also find this approach familiar.

    This isn’t for pages, it’s simply designed in such a way that it can degrade if that’s the ONLY option.

    Of course some may argue it’s a bit incomplete compared to industry standard UI frameworks as there are still useful options that seem to be missing, but this is a great basic start, and long over in the AJAX application world.

  6. Paul C Says:
    October 9th, 2007 at 09:56 PM

    Definitely long overdue! Layout managers are such a basic building block of any desktop app but anyone who has spent any time trying to accomplish the equivalent in a web app knows how ill-suited CSS when it comes to this sort of layout.

  7. Rachid B Says:
    October 10th, 2007 at 05:19 PM

    Great!

  8. Thomas Hansen Says:
    October 11th, 2007 at 01:27 PM

    Hi Sebastian, really great stuff here ;) Though I miss resizing, collapsing, moving, pinning etc… If you made those I’d be really interested in going through your code to rip parts of it like we did with Gaia Window… ;)

    PS! We could really need a guy like you on board of our dev-team, you don’t have any allergenics to .Net or something…? Why don’t you send me an email if you’re available for hiring…?

  9. Max Says:
    October 11th, 2007 at 01:40 PM

    Great work Sebastien. I posted a link to it on my website. Can’t wait to try it out this weekend. Cheers

  10. brainopia Says:
    October 11th, 2007 at 10:18 PM

    I’m using blueprint css-framework for these purposes =)

  11. Jens Grochtdreis Says:
    October 12th, 2007 at 01:27 PM

    Well, obviously you haven’t understood the basics of modern frontend-development. If you deactivate Javascript and reload the example you will see the layout fallen apart. It is not that hard to develop a layout that works cross-browser without Javascript with mere CSS. Just use Blueprint, YUI Grids oder YAML (yaml.de) for layout-purposes and leave Js (or prototype/jQuery/yui …) for the dynamic.

  12. caillou Says:
    October 23rd, 2007 at 12:58 PM

    hi seb,

    looks good. but why don’t you use the new “dom:loaded” event to start? that way, you do not need to wait for all the images to be loaded ;)

    Event.observe(window, “dom:loaded”, function() { layoutManager = new LayoutManager(); } )

  13. beng Says:
    October 24th, 2007 at 07:35 AM

    looks like comments for the portal posts are closed…

    would really like a best practice example to create widgets for your portal class, should we extend Xilinus.Widget?

  14. seb Says:
    October 24th, 2007 at 08:33 AM

    @caillou: correct

    @beng: What do you exactly do? I don’t think you need to extend widget. If you want to change look and feel, just change CSS file.

  15. Tobie Langel Says:
    November 2nd, 2007 at 08:00 PM

    @caillou: the correct syntax actually is:

    document.observe("dom:loaded", function() { layoutManager = new LayoutManager(); } )

Sorry, comments are closed for this article.