Re: Abstract server-side behaviors

Mark Thomas wrote:
> On Thu, 22 Jul 2004, Ulrik Mikaelsson wrote:
>>> Maybe it would be possible to abstract server-side behaviors, such as
>>> "scrollable", or "clickable" and provide template-based reactions to those
>>> events, as well as a "custom" behavior which would pass on events to the
>>> client?
> 
> Interesting idea.  It would tie in quite well with the theme engine having
> a concept of "clickable thing", "labelling thing", and so on.

There was just discussion in the WHATWG mailing list about labels. 
If you go with server-side widget support (which I think is a good 
idea) make sure that server *understands* labels; a label is surely 
a piece of text but in addition to that, it has *behavior* and 
*semantics*.

Semantics is easy, a label is a "title" for a control or a group of 
controls (e.g. title for a text input or a title for an array of 
radio buttons). Every label should be bound with at least one 
control. Also, make fieldset legends (simply descriptive) different 
from control labels.

The behavior of a label could be pretty much anything. If I could 
decide, I'd make hover effect to draw "outline" (in W3C CSS terms) 
around the label and related control. For example, if label is for 
text input hovering label text *or* input itself *or* focusing the 
input should draw a line around both the label and the control. 
Simple implementation could just change the border of those visual 
elements but a more advanced one could draw something like 
MSIE/MacOS does for labels (a crude ascii figure follows). In 
addition to hovering/control focus effect that makes it absolutely 
clear for the user which label is for which control I'd also copy 
the click-to-forward-focus behavior of current HTML browsers. 
Clicking in the label should activate the control (e.g. toggle 
checkbox or set focus to text input). For special case, I'd like if 
the following would Just Work (UI described as HTML code):

<radiobutton id="foo">Label for radiobutton that contains a 
<textinput>Label for textinput</textinput></radiobutton>

The behavior for this would be to activate radiobutton (that is, to 
select this item from an array of radiobuttons) when anything inside 
the radiobutton element is clicked, including the textinput. If the 
textinput or its label is clicked then the radiobutton should be 
activated *and* the textinput should be focused.

Why would someone would want to contruct UI elements like this? For 
example, if I were to create a query like:

My Favorite Color:
o Blue
o Red
o Other: [______]

I wouldn't need to code anything special to automatically select the 
radiobutton that matches the "Other" selection -- it would be 
automatically selected if user clicked in the textinput in that item.


   /------------------\
   | Message subject: +--------------------------\
   | +------------------------------------------+ |
   | | Some message title here                  | | <-- outline
   | +------------------------------------------+ |
   \----------------------------------------------/

   An ascii image of outlining a text input and it's label. Notice
   that outline is concave to better follow the size of label and
   text input. MacOS draws rounded corners for the outline to
   further improve its looks.

-- 
Mikko