|
A WebDeveloper.com Feature
|
XML Gets Into Action (Sheets) Part 2
by Nate Zelnick
Essentially, both Microsoft's Behaviors proposal and Netscape's Cascading
Action Sheets are ways to turn scripted functions into programmatic components.
This maps very nicely into the same conceptual framework implied by HTML/XML and
Cascading Style Sheets/eXtensible Style Language.
Both approaches are similar at a high level and build on work that each
company did in the past. Microsoft's Behaviors are the natural outgrowth of the
Scriptlet technology that it introduced in IE4. Netscape's Action Sheets are a
bit more of a departure from its previous work, but the proposal grows
organically out of the JavaScript component work that was part of LiveWire.
First let's deal with the similarities. Both technologies are ways of
packaging script in a generic way so that it can be reused without change in
different contexts. Both approaches use XML to define the interfaces that the
component will expose to handle calls from a document based on an event. Of
course, the details vary considerably.
Action Sheets hew much more closely to the style of CSS than do Behaviors, a
fact that is reflected in the W3C's decision to offer the proposal to the Style
Sheet Activity for further consideration. This is because they look and feel
more like style sheets than they do components, though they are virtually
identical.
Like global stylesheets, Action Sheets are contained in separate files from
an HTML or XML document. They can also import other Action Sheet files to
"borrow" events using a system similar to the CSS cascade. In fact,
from the point of view of a document author, an action sheet looks and feels
pretty much exactly like a style sheet.
The actual Action Sheet file is constructed from a few XML elements and
scripted functions. The basic CAS elements are ACTION and SCRIPT. ACTION defines
the interface that will be called from a document and hooks it up to a function.
SCRIPT contains the function itself.
So, for instance, if you wanted to create a simple Action Sheet that would
respond to an OnClick event to change the background color of any block level
element to yellow, your basic script could look like this:
<!DOCTYPE actionsheet system "asheet.dtd" [] >
<ACTIONSHEET>
<ACTION type="text/cas" codetype="text/javascript">
.hilight { OnClick: "changeColor(event)"}
</ACTION>
<SCRIPT type="text/javascript">
function changeColor(event) {
var thingColor = event.target.style.background;
if (thingColor == "yellow")
thingColor == "none";
else
thingColor == "yellow";
}
</SCRIPT>
</ACTIONSHEET>
[ Click here to move to the next part of the article ]
Contact the WebDeveloper.com® staff
Last modified:
Friday, 22-Aug-2008 13:46:48 EDT
|