Chap 11

Using Layout Managers

The Concept

Layout managers were created to simplify interface design and free the designer from the drudgery of calculating the coordinates for each element on the page and worrying about properties, attributes and display problems relating to any specific elements.  While the concept is laudable and helpful, it was not the ultimate panacea for the web designer’s problems.  While it was possible to use different layout managers for different containers on a page and these layout managers gave sizes and positions to the components in the window and are helpful for windows whose size changed or were displayed on multiple operating systems, they did not provide the ultimate sought after solution. Complex layouts with nested containers, invisible components all come packaged with their own peculiar problems and layout managers can be as frustrating to the designer as manual arrangement of elements on a web page!

A basic requirement of web design is portability. Standard UI design techniques do not guarantee portability.  What looks beautiful on the design platform may be distorted beyond recognition in other platforms. 

The first portable layout managers were designed in Java with a guarantee of being deployable on multiple platforms.   These layout managers specified rules and constraints for the layout of the user interface.  The advantages of these layout managers were that they correctly positioned components that were independent of fonts, screen resolutions and platform differences.  They provided intelligent component placement for containers when they are dynamically resized. They also provided for ease of translation to make allowances for increase in the length of the string on translation.

The Java UI container comes inbuilt with a special object called the layout manager.  This component controls the components in the container.  It automatically arranges the components in accordance with the rules, properties, constraints specified by the layout manager.  The preferredSize, minimumSize, maximumSize, alignmentX and alignmentY and the size of the container are specified.  The user can accept the default layout manager or override the settings and specify a custom layout manager.

All layout managers use absolute positioning.  Therefore, components do not adjust automatically when parent containers are resized.  The properties of different layout containers are as under:

BorderLayout has a hgap(horizontal gap) and vgap(vertical gap) to determine the distances between the components. Each component has a constraint value with possible values like North, south, east, west and center. 

FlowLayout and GridLayout properties can be used to align components with reference to the vertical and horizontal gaps.  GridLayout also has the option of specifying the number of rows and columns. 

GridBagLayout has no properties.  However, it has GridBagLayoutConstraints object associated with it which has properties of height and width of the component linked to it.  It also has information about where the component in anchored in its cell, how the component fills up the cell, or how much padding surrounds the component inside its cell.

Java uses different types of information to determine the position and size of components placed in the container.

Layout managers in C# were different from the Java layout managers.  While Java relegated layout managers to Graphical User Interfaces, in C# anything that implements Ilayoutable interface can be laid out.  Moreover, since the layoutable objects are abstract concepts, distinct areas of the parent component can be laid out.  This gives a lot of power to the web designer.

Layout managers in Visual Studio 2003 are analogous to the layout managers of Java in that it implements Flow layout and Grid Layout.  ASP.NET 2.0 introduced Master pages as a layout concept.  Master pages implement standard visual and functional capabilities throughout the web based application and work in conjunction with content pages.  Content will be populated into the placeholders for content provided in the master pages.  Personalization features, takes the concept a little further by allowing users to select and populate their pages with components.

Layout Examples

TLB pages

TLB stands for Translation look-aside buffer.  This is a table in the processor’s memory and contains information about the recently created pages in the memory.  The program’s virtual memory is cross-referenced with the corresponding absolute address in the physical memory.  This enables faster computing.  The TLB contains about 64-256 entries. The number of entries in the TLB is multiplied by the page size defined in the TLB reach.  This is critical to the performance of the application and the performance begins to degrade once the TLB reaches the critical point.

During the recent years the TLB is failing to keep pace with the increasingly large working sets of applications.  Modern processor cache is getting large and few microprocessors have a TLB reach larger than the secondary cache for conventional page sizes.  TLB misses become more common while accessing data from the cache and this increases the latency to memory.

Efforts are being made to increase the TLB using the memory controller TLB.  This will let the designer aggressively create super pages from non-contiguous, unaligned regions of the physical memory.  Shadow pages are supported by the MTLB and this greatly empowers the Operating System’s ability to swap shadow-backed super pages more efficiently.

Header and Footer Pages

Sites that are several pages long would like to introduce a header and footer that will look identical on all pages. This header or footer should be capable of being changed when the designer wants to change the look and feel of the site.  Header and footer pages are generally HTML pages that are part of the “includes� in PHP or master files in ASP.NET. Look at the following file created in PHP. 

<html>
<head>
<title>Welcome to this sample site!</title>
<style type="text/css">
a {
// lots of styles
}
</style>
</head>
<body background color="black">
<img src="header.png" />
<div style="postion: absolute; mycontent"><b>Sidebar!</b>
- Navigate
- Navigate
</div>
<div>Content!!!!! mycontent</div>
</body>
</html>