Layout your GWT apps part 3 – 960.gs

| 2 Comments

In this post series we follow a design philosophy that uses classic HTML and GWT ui:binders instead of panels to layout applications. (See Part 1: “ui:binders”, Part 2: “animations”)

We follow this philosophy in the believe that web applications should look and feel like web sites. This can only to be achieved, if we use the same means: CSS and HTML. While HTML and ui:binders are far more flexible than panels, they also revive a problem that panels have already solved: cross browser issues due to limited CSS and HTML conformity of today’s browser.

To solve these issues the web-world invented CSS layout frameworks. Those frameworks, usually consisting of ready-to-use CSS files full with styles for layouting web pages in rows and columns, headers and sidebars. There are dozens of them. Here you find a list on the most prominent dozen. My framework of choice is the 960 Grid System (960.gs). We are going to use this framework to layout GWT apps in this post.

Why 960.gs? 960.gs is called 960.gs because it layouts pages in a 960 pixel wide grid of even spaced columns with a fixed number of 12 or 16 rows. This is pretty restrictive but also of unbeaten simplicity. It provides you with only a handful of styles and that is enough. Visit their site as an example and to see how it works.

While organising content into columns is certainly flexible enough for normal web pages, does it automatically mean it is for web applications also? Well, following the earlier stated design philosophy (we want to make web apps look like regular web sites) we want to use the same means to layout. This means we usually have a header, a footer, several side bars and “main content” in the middle. See the example above.

Achieving a layout as shown in the top example is easy. Simply apply the 960.gs styles to your ui:binder HTML elements. You can freely use DIVs within ui:binders an assign CSS styles via the “class” attribute. The only thing complicated is that you want your “main content” to change, when the buttons and links in header, footer and side-bar are clicked. Here you basically need tab panel functionality without using a tab panel.

A little more patience and we will show a way to achieve tab panel functionality without using a tab panel (and its restriction on layout) in the next and last instalment of this series: layout your GWT apps part 4 – tabs without tabs.

2 Comments

  1. Hallo Markus,
    das Bild am Anfang des Artikels wird nicht angezeigt!
    Es wäre schön, wenn du ein Beispiel bringen könntest.

Leave a Reply

Required fields are marked *.

*


7 × seven =