Over the past few months we've been working on the upcoming WebLogic Portal 10.2 release, which Josh Lannin has been recently blogging about. Check out his YouTube video entitled A Video Introduction To WebLogic Portal 10.2 to see some of the new features, many of which have been previewed on the playground at wlp.bea.com.
This release includes more than 40 new sample look and feels (LAFs) that demonstrate a number of techniques for using CSS and dynamic DOM manipulation via JavaScript to create a variety of styles. In this blog entry I'll discuss a few of these techniques, focusing on those used to create rounded border portlets. If you haven't seen these on the playground or the video, here are a few examples:
Going clockwise from the upper left, these are from the "Tech - Fone", "Sunrise", "Tech - Logan", and "Tech - Aqua". The first one is inspired by the iPhone, the second is an original, the third was designed by Chris Bales, and the last is inspired by the "Aqua" desktop style on the Mac. The full desktop for each includes various images, colors, fonts, and styles to provide very different looks for the same portal desktops. It's important to emphasize that all of this is possible by modifying only the skin for the look and feel, including the CSS and images, without touching the skeleton. Each of the sample LAFs uses the Bighorn skeleton, which was first introduced in WebLogic Portal 10.0 and is the basis for all of our future work in this area.
There are numerous articles, blogs, and other resources that describe CSS techniques for pretty much everything, and by Googling a bit you can find what you need. Many of these use an image for each corner and then colors and borders to fill in the rest, but this tends to work best only when you have complete control over the widths and heights of the various divs. A portlet is a generic container for arbitrary content which is in turn contained by a placeholder, layout, page, book, shell, desktop, etc., so it must be dynamic. There are techniques for dynamically sized rounded borders, and it's surprisingly simple.
A WebLogic Portal desktop contains a number of nested divs to create the various elements, and a portlet itself contains a number of them. This diagram shows some of the elements that are used for creating the rounded borders:
Here is a key that identifies the name and style by matching the color:
This image and key hints at how the rounded borders are achieved, with overlapping images used as the background style for each of the divs. Since the size of the portlet isn't fixed, these images should be large enough to accommodate fairly large screens, although there is no real rule-of-thumb to use here. The sample LAFs tend to handle anything from 1200 or so to more than 2000 pixels wide and high, which works well for many screens. I have seen some gigantic screens at the Apple Store, but I'm hoping that not many folks will be using maximized or published portlets in a browser taking up the entire screen...
The image below shows each of the border images, scaled down for this blog:
Clockwise from the top left are the images tl.png, tr.png, br.png, and bl.png, which you've probably guessed stand for top-left, top-right, bottom-right, and bottom-left. These are used as the background image for the titlebar, titlebar button panel, window content, and window, respectively. If the order seems odd, it might help if you look at the DOM structure, simplified here for clarity:
<div class="wlp-bighorn-window">
<div class="wlp-bighorn-titlebar">
<div class="wlp-bighorn-titlebar-button-panel">
...
</div>
</div>
<div class="wlp-bighorn-window-content">
...
</div>
</div>
The window is the main div which contains the titlebar and content divs, effectively on top of the window div and stacked vertically. The titlebar button panel div is contained within the titlebar div and is on top of it, occupying the right side and in turn containing the buttons for minimize, mazimize, and so on. It takes very little in the way of CSS and images to create the desired effect, and with some modifications you should be able to create almost anything that is required for site design, branding, and other requirements.
For the sample LAFs the file custom.css contains all of the styles that override those in the default Bighorn LAF. This reduces the number of CSS styles to modify and keep track of, and makes it easier to move between LAFs. You could take the same technique even further, layering your own CSS files in order to achieve the desired effects. The CSS styles for the rounded corners are defined as follows:
.wlp-bighorn-titlebar
{
overflow: hidden;
background: url(../images/borders/tl.png) no-repeat scroll left top transparent;
font-size: 10pt;
font-weight: normal;
border-color: transparent;
border-width: 0px;
border-style: none;
padding: 0px;
margin: 0px;
}
.wlp-bighorn-titlebar-button-panel
{
color: #FFFFFF;
vertical-align: bottom;
padding: 0px;
margin: 0px;
background: url(../images/borders/tr.png) no-repeat scroll right top transparent;
clear: right;
text-align: right;
}
.wlp-bighorn-window
{
min-width: 200px;
margin: 5px;
background: url(../images/borders/bl.png) no-repeat scroll left bottom transparent;
border: 0px none;
font-size: 10pt;
}
.wlp-bighorn-window-content
{
width: auto;
overflow: auto;
padding: 0px 16px 40px 16px;
margin: 0px;
background: url(../images/borders/br.png) no-repeat scroll right bottom transparent;
border: 0px none;
color: #F0F0F0;
min-height: 50px;
overflow: hidden;
}
The background attributes for each of these styles uses a URL for the image, which is path relative, along with parameters for placing the image at the top, left, right, bottom, etc.. Other style attributes are used to pad the content, set colors, and otherwise customize the display. If you're a J2EE programmer without a lot of web design experience it may seem odd, but it is quite powerful and is ultimately easier than writing code for everything. I would suggest that you use Firefox with Firebug to develop and tune the LAFS as it provides a great "what if" environment. Look for a future blog posting on Firebug and other tools.
One thing to watch out for is IE6, which is always a challenge when trying to do anything interesting with CSS. Firefox, Safari, Opera, and even IE7 support the CSS specification well enough, but IE6 is buggy at best, and some would say it is broken. Most of the sample LAFs work on IE6, but the iPhone-inspired one and a few others will not look quite right. There are CSS hacks to use different styles on IE6, and those are included in the samples, but these can only go so far. I'll end my commentary on IE6 with that, and I wish you luck if you have to deal with it!
