Re: Tabs in HTML Pages

I'd like to share an update on my Tabs project. I hope it will be interesting. I created 2 new code files:

wltabs.css
wltabs.js

The "wl" prefix identifies a particular style of tab. I think that when people get into UI widget development they underestimate the amount of time and effort it takes to come up with an appropriate stylesheet. I'm not really trained as an artist, and the styling doesn't come easily to me. In this case, wltabs.css contains references to the colors and images and such to provide shape to tabs and to implement visual transitions for hover effects and such. I think I spent more time on the .css file than the .js file.

The .js file implements a couple objects that are instantiated at runtime, as follows:

var tab = new Tab();

Once the tab reference is created, you can set it's properties like so:

tab.id = 'id';
tab.label = 'Tab 0';
tab.width = '80'

var tabContainer = new tabContainer('tabParent', 'contentParent');

Where 'tabParent' and 'contentParent' identify HTML parent elements for the tabs and tab content respectively. I generally use HTML table cells or DIV objects as parents.

Add a tab to a the container by evoking the addTab() method as such:

tabContainer.addTab(tab);

To select and activate a tab, evoke:

tabContainer.select('id');

Some of the things I like about this approach is that I can use Dreamweaver and HTML for most page layout, but can add tabs via javascript when the page loads, or triggered by some other event. If I change tab styling or visual effects sometime later, the new effects will automatically be adopted by every page that implements the interface, without any changes to HTML.

One of the nice things about Javascript is that I can extend the Tab interface in the future via new properties and methods and styles without having to recompile or change existing code.

This is still a work in process, so if you'd like to make suggestions, I'd be grateful. At least it kindof shares my thought process, which I hope is interesting to some.

Nathan.




----- Original Message ----
From: Dr. Syd Nicholson <sydnic@xxxxxxxxxx>
To: Web Enabling the AS400 / iSeries <web400@xxxxxxxxxxxx>
Sent: Tuesday, September 30, 2008 9:36:49 AM
Subject: Re: [WEB400] Tabs in HTML Pages

I think most of what you require can be implemented.

The product is open source, and the source is downloadable, so if required
it can be modified to suit. There is also forum which is very useful, and
the respondents are very helpful. A few well placed questions will probably
answer most of your questions.

If required, you could subscribe to their support feature, and I am certain
the product developers would be interested in helping you. It sounds like
the wrapping tabs feature would a good addition to the extjs product.

The widgets are object oriented, so you can extend an object (eg. TabPanel)
and set your own properties without changing any of the original code. This
a useful feature that I have used to predefine certain objects I frequently
use (eg. a combo box that lists the customers on the customer file, text
boxes with predefined width, titles, etc.).

Panels can contain other panels, indeed, more than panel can be placed
inside another panel. There are various layout models you can choose from.
You can, therefore, have child tabs by placing a TabPanel inside a TabPanel.
-- And -- If required you can place another TabPanel inside that.

If you have a hierarchical structure, you may wish to consider a TreePanel
for the drill down, and other panels to show the child pages.

Tabs can receive keyboard focus, and you can add "listeners" (JavaScript
functions) that respond to events. You can listen for specific key presses
using standard JavaScript and evoke the appropriate action.

All transactions with the server use Ajax and the response can be either in
XML or JSON format. JSON is more efficient, because JSON is already a
JavaScript object and can be handled as such.

One advantage of JSON being an object is that it can contain a JavaScript
function. This allows you to build JavaScript dynamically on the server
prior to sending it to the browser using Ajax.

Syd