W3C home > Mailing lists > Public > www-style@w3.org > October 2002

CSS and XForms - Style and Instance Data

From: Mark Birbeck <Mark.Birbeck@x-port.net>
Date: Fri, 25 Oct 2002 17:47:50 +0100
Message-ID: <E3ED00A7C285EE408679DE2A26D1C781365DC2@S007.x-port.net>
To: "'www-forms@w3.org'" <www-forms@w3.org>, "'www-style@w3.org'" <www-style@w3.org>

Hello all,

I have tried to see if I am resurrecting an old discussion on CSS, and can't
find it. Apologies if I am.
 
The issue I'm raising concerns the selection criteria for CSS, when used
with XForms.

INTRO
For those on the CSS list who are not familiar with XForms, a quick intro.
With XForms we can have some data in an XML document that is then bound to a
set of UI controls, using XPath statements. The data might be like this:

	<person>
		<firstName>Mark</firstName>
		<surname>Birbeck</surname>
	</person>

and the UI part of the form might be like this:

	<xforms:input ref="person/firstName">
		<caption>Please enter the first name</caption>
	</xforms:input>
	<xforms:input ref="person/surname">
		<caption>Please enter the surname</caption>
	</xforms:input>

In the main, a lot of things from CSS work quite well. For example, you can
do the following, and the syntax copes fine:

	@namespace xforms "http://www.w3.org/2002/01/xforms";

	xforms|input
	{
	    display: block;
	}

This sets all of our input controls to blocks. We can also set the style on
the captions that appear inside input controls:

	xforms|input > xforms|caption
	{
	    font-weight: bold;
	    width: 50%;
	    color: white;
	    background-color: #cfd7df
	}

All pretty much as you would expect. However, we are trying to find a
consistent way of solving two issues at the moment, and unless we have
missed something, we can't seem to do it within the CSS framework at
present:

* ensuring that a particular piece of data is
  displayed consistently throughout a site

* ensuring that a particular *type* of data is
  displayed consistently throughout a site


CONSISTENT DATA
If we wanted all surnames in our system to be displayed with a red
background, we would either have to add a class attribute to all such
xforms:input statements, or we could use an attribute selector:

	xforms|input[ref="person/surname"]
	{
	    background-color: #ff0000;
	}

The problem is that the following input statement refers to exactly the same
node in the instance data:

	<xforms:input ref="//surname">
		<caption>Please enter the surname</caption>
	</xforms:input>

We would now need to add another attribute selector for this different
syntax. Alternatively we could use:

	ref$="/surname"

but in other situations this would match elements incorrectly.

It would be better if there were some way of tying the style to the source
data. One simple possibility would be to have a pseudo-attribute that takes
an XPath statement:

	*:bound="person/surname"
	{
	    background-color: #ff0000;	
	}

This would affect the style of *any* XForms control that is bound to a
'surname' element that is a child of a 'parent' element.

Another possibility is to put the onus back onto XForms. In CSS we would
just use the normal syntax to say that any element of type 'surname' that
appears underneath an element of type 'person' is to be shown with a red
background:

	person > surname
	{
	    background-color: #ff0000;	
	}

There would never be an element 'surname' in the actual UI part of the form,
but what we could then do is modify the styling part of XForms and say that
the style of a control is a combination of the style of the control elements
*and* the style of the underlying data elements. These two would both be
applied to our surname control:

	xforms\:input
	{
	    display: block;
	}
	person > surname
	{
	    background-color: #ff0000;	
	}

Although this takes the burden off CSS, I think ultimately that it is the
weaker solution.


CONSISTENT DATA TYPES
A related issue concerns the type of the underlying data that is being bound
to. It should be possible to say that all controls that bind to a date are
shown in one way, all integers in another. For example:

	*:dataType="xsd:integer"
	{
	    background-color: #ff0000;	
	}

All UI controls that have as their underlying data an integer will now be
shown with a red background.

If XForms is set to become the 'forms module' for XHTML, then it seems to me
that CSS will need some way of handling the link between underlying data and
the user interface used to manipulate that data. 


Best regards,

Mark

Mark Birbeck
Co-author Professional XML and
Professional XML Meta Data,
both by Wrox Press

See x-port's XForms plug-in for IE,
at http://www.FormsPlayer.com/

Managing Director
x-port.net Ltd.
4 Pear Tree Court
London
EC1R 0DS

E: Mark.Birbeck@x-port.net
W: www.x-port.net
T: +44 (20) 7689 9232
Received on Friday, 25 October 2002 12:49:29 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:16 GMT