NOTE-AS-19980619

Action Sheets: A Modular Way of Defining Behavior for XML and HTML

World Wide Web Consortium Note 19-June-1998

Submission to the World Wide Web Consortium

This version:: http://www.w3.org/TR/1998/NOTE-AS-19980619
Latest version:: http://www.w3.org/TR/NOTE-AS
Authors:: Vidur Apparao, Netscape Communications Corp.; Brendan Eich, Netscape Communications Corp.; Ramanathan Guha, Netscape Communications Corp.; Nisheeth Ranjan, Netscape Communications Corp.

Status of this document

This document is a submission to the World Wide Web Consortium. It is intended for review and comment by W3C members and is subject to change. There are W3C Staff comments on this submission.

This document is a NOTE made available by the W3 Consortium for discussion only. This indicates no endorsement of its content, nor that the Consortium has, is, or will be allocating any resources to the issues addressed by the NOTE.

Abstract

Action sheets provide a mechanism for separation of event-based behavior from the structure of HTML and XML documents. This is similar to the way in which style sheets provide a separation between visual presentation properties and document structure. This concept allows a document author to introduce script-based event handling into an XML document, without modifying the document's DTD. It also allows for the packaging of reusable actions that can be applied to multiple HTML or XML documents. While action sheets share concepts and mechanism with style sheets, they differ by defining interaction rather than presentation. This document defines both the general concept of action systems and a concrete action sheet language.

Introduction

Both HTML[HTML] and XML[XML] are used to describe a document's structure. While HTML also includes information about the document's visual presentation, such information may be encoded in an external style sheet. A style sheet allows for the strong separation of a document's structure from information that a user agent may use to present the document. This document introduces the notion of action sheets, a concept that allows for the further separation of event-based behavior from structure and presentation.

Many current web pages look more like full-fledged software programs than declarative specifications of document structure. An increasing fraction of the content of these pages consists of blocks of script, most of which run in response to user events. Action sheets attempt to provide a mechanism for consolidating script-encoded behavior of elements in a reusable package, separate from the structural definition of a document.

This concept is especially useful for XML. While HTML contains a SCRIPT element and HTML elements may contain attributes that specify event handlers (onClick, onMouseOver, etc.), XML contains no way of including an external scripting language. In the same way that external style sheet rules associate presentation properties with XML elements, external action sheet productions can associate arbitrary event handlers with specific elements or classes of elements. This ability makes unnecessary the need to modify existing DTDs to provide mechanisms for including scripts.

The concept of action sheets is also useful as a packaging mechanism. Many script-encoded behaviors can be factored and used for elements across multiple documents. For example, a "rollover" action for anchors, one that changes the color or style of the element's text content when the mouse cursor enters or leaves its boundaries, may be encoded once and then applied to all anchors in all documents, or of a certain class, at a web site. The idea of such factoring to enable reuse and consistency of look and feel for groups of documents harmonizes the ideas of style sheets and action sheets.

It should be noted that while they share much in common, action sheets are distinct from style sheets. While a number of design aspects of action sheets derive from style sheets, action sheets are not just another set of style properties. This distinction is stronger than the dichotomy between look and feel in some windowing systems. Action sheets, for example, can provide actions for elements that may have no visual representation.

Action Systems

An Action System is a set of rules that associate scripts with elements in a document. These scripts run in response to particular actions (user gestures, internal events, etc.). Any Action System must specify the following components for such rules:

The selector syntax: This provides a syntax for selecting the objects to which the production applies. Both CSS and XSL specify such a syntax, with different degrees of specificity.
The selection domain: The domain of objects that may be selected. This domain may be restricted to structural elements within a document.
The action domain: The list of all actions that may be associated with the selected objects. This may include, for example, the list of intrinsic events specified in HTML 4.0. It may also include other actions allowed by a user agent, such as onPrint.
The action definition: The script to run for a given action, possibly including scope, parameters, and other execution context.

These four components of an Action System are fairly independent of one another, and each offers a number of design choices. One can imagine a range of systems that make different tradeoffs between expressiveness and ease of use.

CAS: A Specific Action System Proposal

As a concrete proposal for an Action System, this section specifies a simple yet useful scheme that derives heavily from CSS [CSS], called Cascading Action System (CAS). CAS applies intrinsic event handlers from HTML 4.0 to elements of the document tree using CSS2's selector mechanism.

Action Rules

A CAS action rule consists of these four components:

The CAS selector syntax is identical to CSS2's.
The CAS selection domain is the set of elements in the document tree.
The action domain is the set of event handler names from HTML 4.0, recapitulated in Appendix 1.
The action definition is a CSS2 STRING token containing script.

The content type for CAS is text/cas.

Here are CAS action rule examples that select by id, tag, and class:

 
 
#CreditCard { onChange:    "validate(this.value)" } 
A *[HREF]   { onMouseDown: "this.style.fontColor = 'magenta'" } 
.HelpItems  { onMouseOver: "showTip(event)" }

Action Sheets

A set of action rules may be combined with scripts in an action sheet. An action sheet is an XML document conforming to the DTD given in Appendix 2. It consists of zero or more <action> and zero or more <script> tags in any order, enclosed by an <actionsheet> tag.

actionsheet: The root tag of an action sheet.
action: The container for a set of action rules. The type attribute specifies the action system (for example, "text/cas"). The codetype attribute specifies the scripting language for an action rule's definition ("text/javascript").
script: Similar to the HTML 4.0 SCRIPT element.

The content type for action sheets is text/act.

Here is an example action sheet:

 
 
<!DOCTYPE actionsheet SYSTEM "asheet.dtd" [] > 
<actionsheet> 
 
<action type="text/cas" codetype="text/javascript"> 
@import url("http://reuse.org/fly.cas") 
 
.hover  { onMouseOver: "hover(event)"; onMouseOut: "land(event)" } 
</action> 
 
<script type="text/javascript" src="fly.js"></script> 
 
<script type="text/javascript"> 
function hover(e) { ... } 
function land(e)  { ... } 
</script> 
 
</actionsheet>

An action sheet is included in HTML using a LINK element as follows:

 
 
<LINK REL="ActionSheet" TYPE="text/act" HREF="actions.act">

An action sheet will be associated with XML documents using whatever mechanism is adopted for the association of CSS stylesheets. For the purposes of this document, we will assume that this mechanism will use processing instruction as follows:

 
 
<?xml:actionsheet type="text/act" href="actions.act"?>

Examples

1) Collapsable Lists

The use of scripts to create collapsible lists is common on web sites. The following example shows how to package the collapsible list functionality as an action sheet.

Here is the action sheet, from file collapsible.act:

 
 
<!DOCTYPE actionsheet SYSTEM "asheet.dtd" [] > 
<actionsheet> 
<action type="text/cas" codetype="text/javascript"> 
  .collapsible { onClick: "changeVisibility(event)" } 
</action> 
 
<script type="text/javascript"> 
function changeVisibility(event) { 
  var list = event.target.nextSibling; 
  var style = list.style; 
  if (style.display == "none") 
    style.display = "block"; 
  else 
    style.display = "none"; 
} 
</script> 
</actionsheet>

The action element uses CSS syntax to define an "action rule". This rule applies to all elements in the "collapsible" class and registers "changeVisibility(event)" as the onClick event handler for those elements. The <script> element implements the event handler.

Once we have created this action sheet, we can use it inside a regular HTML document as follows:

 
 
<HTML> 
<HEAD> 
<TITLE> Entertainment </TITLE> 
<LINK REL="ActionSheet" TYPE="text/act" HREF="collapsible.act"> 
</HEAD> 
 
<BODY> 
 
<UL> 
  <LI CLASS="collapsible"> Sports </LI>  
  <UL> 
    <LI> Basketball </LI> 
    <LI> Volleyball </LI> 
    <LI> Baseball </LI> 
  </UL> 
  <LI CLASS="collapsible"> Movie Genres </LI> 
  <UL> 
    <LI> Action </LI> 
    <LI> Comedy </LI> 
    <LI> Drama </LI> 
  </UL> 
</UL> 
 
</BODY> 
 
</HTML>

The <LINK> element associates the action sheet with the HTML document. Clicking on Sports and Movie Genres will collapse (or expand, if collapsed already) the respective lists.

2) Image Rollovers

This example shows an action sheet defining an image rollover action, where mousing over an image changes its source URL, and mousing out reverts to the original source URL. The action rule associates rollover behavior with an XML tag name, RolloverImage. The action definition uses the DOM to extract values of attributes for the mouse-over and mouse-out source URLs.

Here is the action sheet, from file rollover.act:

 
 
<!DOCTYPE actionsheet SYSTEM "asheet.dtd" [] > 
<actionsheet> 
<action type="text/cas" codetype="text/javascript"> 
  RolloverImage { 
      onMouseOver: { "this.src = this.overSrc; window.status = this.message" } 
      onMouseOut:  { "this.src = this.outSrc; window.status = ''" } 
  } 
</action> 
</actionsheet>

Here is the XML document that uses rollover.act for action, and menu.css for presentation; it contains only the menu structure:

 
 
<?xml version="1.0"?> 
<?xml:actionsheet type="text/act" href="rollover.act"?> 
<?xml:stylesheet type="text/css" href="menu.css"?> 
<Root> 
<Menu> 
 
<RolloverImage src="images/title1.gif"  
      overSrc="images/overtitle1.gif" outSrc="images/title1.gif" 
      message="Title 1"/> 
 
<RolloverImage src="images/title2.gif"  
      overSrc="images/overtitle2.gif" outSrc="images/title2.gif" 
      message="Title 2"/> 
 
<RolloverImage src="images/title3.gif"  
      overSrc="images/overtitle3.gif" outSrc="images/title3.gif" 
      message="Title 3"/> 
 
<RolloverImage src="images/title4.gif"  
      overSrc="images/overtitle4.gif" outSrc="images/title4.gif" 
      message="Title 4"/> 
 
</Menu> 
</Root>

Open Issues

Should there be a weight option similar to CSS's !important, but associated with an action rule rather than one of its action domain elements (onMouseOver and onMouseOut should have the same weight, rather than each having a distinct weight)?
Should there be options to aid composition of actions, where multiple actions are associated with a given element (!additive, !precedence=...)?
Should there be options to decide exclusive action association with a given element, and to report conflicts (!exclusive to cause an error if more than one action binds event handlers to a given element; !override for silent re-binding by the last action to be matched)?
Should the <action> tag be subsumed by the <script> tag, such that CAS action rules can be put inside <script> blocks with a type attribute of "text/cas"?

Appendix 1: Event handlers supported in CAS

onload: The load event occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements.
onunload: The unload event occurs when the user agent removes a document from a window or frame. This attribute may be used with BODY and FRAMESET elements.
onclick: The click event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.
ondblclick: The dblclick event occurs when the pointing device button is double clicked over an element. This attribute may be used with most elements.
onmousedown: The mousedown event occurs when the pointing device button is pressed over an element. This attribute may be used with most elements.
onmouseup: The mouseup event occurs when the pointing device button is released over an element. This attribute may be used with most elements.
onmouseover: The mouseover event occurs when the pointing device is moved onto an element. This attribute may be used with most elements.
onmousemove: The mousemove event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements.
onmouseout: The mouseout event occurs when the pointing device is moved away from an element. This attribute may be used with most elements.
onfocus: The focus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
onblur: The blur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.
onkeypress: The keypress event occurs when a key is pressed and released over an element. This attribute may be used with most elements.
onkeydown: The keydown event occurs when a key is pressed down over an element. This attribute may be used with most elements.
onkeyup: The keyup event occurs when a key is released over an element. This attribute may be used with most elements.
onsubmit: The submit event occurs when a form is submitted. It only applies to the FORM element.
onreset: The reset event occurs when a form is reset. It only applies to the FORM element.
onselect: The select event occurs when a user selects some text in a text field. This attribute may be used with the INPUT and TEXTAREA elements.
onchange: The change event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.

Appendix 2: Action Sheet DTD

 
<!--=================== Action Sheet =====================================--> 
 
<!ELEMENT actionsheet (action|script)* > 
 
<!--=================== Action Rules =====================================--> 
 
<!ELEMENT action (#PCDATA) > 
<!ATTLIST action 
	  codetype  CDATA #REQUIRED 
          type      CDATA #REQUIRED > 
 
<!--=================== Script Elements ==================================--> 
 
<!ELEMENT script (#PCDATA) > 
<!ATTLIST script 
	  charset   CDATA #IMPLIED 
	  src       CDATA #IMPLIED 
	  type      CDATA #REQUIRED >

Appendix 3: References

[CSS] Bert Bos, Håkon Wium Lie, Chris Lilley, Ian Jacobs "Cascading Style Sheets, level 2", W3C Recommendation, May 12 1998 (http://www.w3.org/pub/WWW/TR/REC-CSS2)
[XML]Tim Bray, Jean Paoli, C. M. Sperberg-McQueen Extensible Markup Language (XML) 1.0 W3C Recommendation 10th February 1998 (http://www.w3.org/TR/REC-xml)
[HTML]Dave Raggett, Arnaud Le Hors, Ian Jacobs, HTML 4.0 Specification W3C Recommendation, 24th April 1998 (http://www.w3.org/TR/REC-html40/)

Acknowledgements

Alex Totic was significantly responsible for the formulation of the ideas presented in this document. We would also like to thank Eric Byunn, Angus Davis, Lou Montulli, Dave Raggett and Lauren Wood for feedback.