RUZEE.LayoutManager

A border layout manager for HTML/CSS in JavaScript.

Want layouts for desktop like application running in your browser? Used to layout managers of standard GUI toolkits, e.g Java AWT, Rox, TK? RUZEE.LayoutManager is the right toy for you. Here's an example and a screen shot:

Some details

RUZEE.LayoutManager is a JavaScript library that allows you to implement "desktop-style" applications in your web browser. Usually a web page is meant to scroll on the highest level, i.e. the body of an HTML page gets scrolled if it doesn't fir into the browser window.

When using desktop applications however, a user is used to a different layout. Usually there is some menu on the top, a status on the bottom, different frames that can be scrolled independetly from each other, etc.

If you want to have such a layout with HTML, you may use inner frames (IFRAMEs) and percentual widths and heights, but if you ever tried that you know why you never wanna do that again ;-).

And with RUZEE.LayoutManager you won't have to. It's as simple as adding some classes to your HTML elements and including a JavaScript file and you're done. If you are familiar with Java's BorderLayout you'll almost feel like home.

Requirements

RUZEE.LayoutManager requires Prototype, one of the coolest JavaScript libs out there. Porting it to different libs, e.g. jQuery, or even remove the dependency to any other lib, should be pretty straight forward. I'll leave that as an exercise for the experienced reader ;-).

Another requirement is a specific basic style you need to have in your HTML file. First, you need to put your browser into standards compliant mode by putting the following line as the very first one into your HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Then put the following statements as a minimum into your stylesheet:

body { overflow:hidden; }
body, html { height:100%; margin:0; padding:0; }

That's it for the requirements ...

How-To

... and it was enough chatting, lets start doing and jump into the details.

RUZEE.LayoutManager uses CSS classes to figure out how to layout the HTML elements in your source file. You may supply these classes to almost every block element. The classes are:

top/bottom are stronger than left/right, i.e. they will always occupy the full width of the parent element. If you want left/right to use the full height, simply put top/bottom into the centered child - every depth is possible ;-)

Centered and left/right elements may also contain scrollable content. It's as simple as adding the CSS property "overflow:auto" to the specific element.

By using CSS class properties, the HTML source can be fully W3C compliant.

Example

Here's some example HTML code (for a more complicated example check out test.html):

<!-- header, js includes, ... (all the required stuff) -->
<body>
  <div class="lm_top">
    Some text at the top (header)
  </div>
  <div class="lm_left" style="width:100px">
    Some text on the left
  </div>
  <div class="lm_center" style="overflow:auto">
    Some text in the center, scrollable
  </div>
  <div class="lm_right" style="width:100px">
    Some text on the right
  </div>
  <div class="lm_bottom">
    Some text at the bottom
  </div>
</body>

That's it - pretty simple, hu? What about getting it?

Download

Get version 0.1! It's released under an MIT style license included in the archive.

Caveats

The order of right and bottom aligned elements is logical but not intuitive. RUZEE.LayoutManager always adds elements from the outside to the inside. For right and bottom this means, that the elements appear in the reverse order as defined in your HTML file.

History

Additional information

You'll always find the latest version of RUZEE.LayoutManager on ruzee.com.