- From: Andrew Fedoniouk <news@terrainformatica.com>
- Date: Sat, 17 Dec 2005 11:25:54 -0800
- To: "www-style" <www-style@w3.org>
Some thoughts about:
http://www.w3.org/TR/2005/WD-css3-layout-20051215/#tabbed
Seems like CSS indeed is entering "behavioral style" area.
Tabbed panels switch is a typical UI element/component and it appearead
first
as far as I remember in IBM's CUA documents.
Tabbed switch is really a visual component - it has not only visual
representation but
also distinct behavior. For example it handles focus and keyboard events in
it's own
way.
I mean it is not enough to define screen layout. Tabs behavior needs to be
defined also somehow.
Speaking about stacking layout - currently CSS already allows to define
stack layout and place tabs
with labels more or less successfully:
block[role="panel"] { display:none; }
block[role="panel"][current] { display:block; }
<block role="stack">
<block>
<span role="tab" current name="t1">Tab1</span>
<span role="tab" name="t2">Tab2</span>
<block>
<block role="panel" current name="t1">Panel 1</block>
<block role="panel" name="t2">Panel 2</block>
</block>
The only feature we needed here is to assign somehow
"tabs behavior" to block[role="stack"]
"tabs behavior" is a simple state switch and can be formilized
strong enough:
BEHAVIOR tabs
{
WHEN span[role="tab"] IS GETTING STATE:active
{
SET STATE:current
TO span[role="tab"][name= ##THIS/name ]
SET STATE:current
TO span[role="panel"][name= ##THIS/name ]
}
}
We just need to be able to connect this dynamic rule
to particular DOM element. I beleive that CSS is the
best place where it can be done:
*[role="stack"] { behavior:tabs; .... }
Such "behavior rules" are generic - they
are switching state flags (:current, :checked, etc.)
of elements in some abstract DOM ( HTML or XML )
and will peacefully coexist with the rest of CSS.
----------------------------------------
Practical implementation of tabs behavior:
Screenshots:
http://www.terrainformatica.com/htmlayout/images/tabdemo.png
http://www.terrainformatica.com/htmlayout/images/systabs.jpg
Source code of tabs behavior (C++) is in the file
/include/behaviors/behavior_tabs.cpp
of HTMLayout SDK (Windows and Windows Mobile):
http://www.terrainformatica.com/htmlayout/HTMLayoutSDK.zip
Andrew Fedoniouk.
http://terrainformatica.com
Received on Saturday, 17 December 2005 19:29:59 UTC