<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CBE Core Object Model Documentation</title>
<meta name='author' content='Mike Foster, cross-browser.com'>
<meta name='description' content="CBE is a Cross-Browser DHTML API for IE, Gecko, Opera, Netscape, Konqueror, AOL and browsers with similar object models. CBE implements some of the W3C DOM2 interfaces.">
<style type='text/css'><!--
body { font-family:verdana,arial,sans-serif,helvetica; font-size:12px; color:#000000; margin:0px; padding:0px; background:#cccccc; }
a:link, a:visited, a:active { font-family:verdana,arial,sans-serif; font-size:12px; color:#666666; }
a:hover { font-family:verdana,arial,sans-serif; font-size:12px; color:#3333ff; background:#cccccc; }
p { font-family:verdana,arial,sans-serif; font-size:12px; color:#000000; }
ul { font-family:verdana,arial,sans-serif; font-size:12px; color:#000000; background:#ffffff; }
pre { font-family:"courier new",monotxt,courier; font-size:12px; color:#3333ff; background:#ffffff; }
xmp { font-family:"courier new",monotxt,courier; font-size:12px; color:#3333ff; background:#ffffff; }
.monoSpc { font-family:monospace; font-size:14px; }
h1 { font-family:verdana,arial,sans-serif; font-size:16px; color:#3333ff; background:#cccccc; padding:2px; }
h2 { font-family:verdana,arial,sans-serif; font-size:12px; color:#3333ff; background:#ffffff; border-top:1px dotted #000000; margin:1em 0em 1em 0em;}
h3 { font-family:verdana,arial,sans-serif; font-size:12px; color:#666666; background:transparent; }
td { font-family:verdana,arial,sans-serif; font-size:12px; color:#000000; vertical-align:top; }
.clsTitle { font-family:verdana,arial,sans-serif; font-size:24px; color:#ffffff;
margin:0px; padding:0px; vertical-align:middle; background-color:#3333ff;
border-top:1px solid #ffffff; border-left:1px solid #ffffff; border-bottom:1px solid #000000;
}
.clsSubTitle { font-family:verdana,arial,sans-serif; font-size:10px; color:#ffffff;
margin:0px; padding:0px; vertical-align:bottom; background-color:#3333ff; text-align:right;
border-top:1px solid #ffffff; border-bottom:1px solid #000000; border-right:1px solid #000000;
}
--></style>
</head>
<body marginwidth='0' marginheight='0'><a name="topofpage"></a>
<!-- Title -->
<table width='100%' border='0' cellspacing='0' cellpadding='4'>
<tr>
<td height='40' class='clsTitle'> CBE Core Object Model</td>
<td height='40' class='clsSubTitle'>Cross-Browser.com </td>
</tr></table>
<table width='80%' align='center' cellspacing='10' cellpadding='10'><tr><td bgcolor='#ffffff'><!-- indentation table -->
<h1>CBE Core Object Model</h1>
<h2>Implementing W3C DOM2 Interfaces</h2>
<h3>The Idea</h3>
<p>When I started working on the second version of CBE, I began to rethink the interface. By that I mean the <i>names</i> of the functions and objects, and how they relate to each other. Most of the other API's I studied had proprietary interfaces. They had function names like <i>getX()</i>, <i>setX()</i>, etc. There's nothing wrong with this type of interface - in fact I really liked it. So I began to think about what to name <i>my</i> functions, but I didn't want to use the names someone else had already used. Well... I'm not really good at coming up with cool names ;)</p>
<p>During this time, I was studying the <a href='http://w3c.org/'>W3C</a> recommendations. I suddenly realized - all the names were there, already created for me! And not only that, but they provided a complete object model specification. I then decided that, somehow, my API should not only use the names from the W3C recommendations, but attempt also to actually implement their object model interfaces in <b>cross-browser</b> Javascript.</p>
<p><b>CBE 4</b> is a partial implementation of some of the W3C DOM2 interfaces. This document discusses the CBE core object model. The CBE <a href="event_om.html">event model</a> is discussed in another document.</p>
<h3>The Implementation Object</h3>
<p>The following is a very simple example of programming DHTML in a DOM1 environment.</p>
<p><i>Listing 1</i></p>
<pre>
window.onload = function() {
var e1 = document.getElementById('E1');
e1.style.left = 100 + 'px';
e1.style.top = 100 + 'px';
e1.style.visibility = 'visible';
}
</pre>
<p>Now look at the following which uses CBE. It accomplishes the same task - positions an element at the point (100,100) and makes it visible. But this will work the same in all the different browsers CBE supports. And that's the whole purpose of CBE - to provide a programming interface as close as possible to the standard, while providing consistent, cross-browser semantics and rendering.</p>
<p><i>Listing 2</i></p>
<pre>
function windowOnload() {
var e1 = document.getElementById('E1');
e1.cbe.left(100);
e1.cbe.top(100);
e1.cbe.visibility('visible');
}
</pre>
<p>I'm sure you see the differences between the two code listings.</p>
<ol>
<li><i>The window.onload Event</i><br>
Listing 1 directly hooks the window.onload event to initialize it's positioned element on the page. Listing 2 defines a function named <b>windowOnload()</b> to accomplish the same purpose. The actual window.onload event is hooked by the CBE system itself, and creates the CBE object model - then it calls windowOnload().</li>
<li><i>The CSSP Object</i><br>
In Listing 1 the CSSP object is named <i>style</i>. With CBE it is named <i>cbe</i>. Because CBE uses so many standard names, it must keep them within their own scope.</li>
<li><i>Properties v/s Methods</i><br>
Listing 1 reads and writes <i>properties</i> of the CSSP object. With CBE you call <i>methods</i> of the CSSP object. Browser differences are rectified within the methods.</li>
<li><i>Specifying Units</i><br>
In listing 1 you must specify the units. In CBE all numeric units are Pixels.</li>
</ol>
<p>CBE provides some <i>shortcut</i> methods. The following accomplishes the same as Listings 1 and 2, but is written the way I would normally program with CBE.</p>
<p><i>Listing 3</i></p>
<pre>
function windowOnload() {
var e1 = cbeGetElementById('E1').cbe;
e1.moveTo(100,100);
e1.show();
}
</pre>
<h3>CrossBrowserElement</h3> <!-- * -->
<p>The CrossBrowserElement object is a partial implementation of the DOM2 <b>Element</b> interface.
It is a <i>subclass</i> of CrossBrowserNode, and so inherits those properties and methods. CrossBrowserElement objects populate the CBE Object Tree. A CrossBrowserElement object is created for each DIV or SPAN with id!="" and added to it's associated Element object as a property named <b>cbe</b>.</p>
<p>The window.onload event is received by a function in <i>cbe_core.js</i>.
It calls the function cbeInitialize(), which creates the CBE object model. Consider the following HTML.</p>
<pre>
<div id='E1' class='clsCBE'>This is e1</div>
</pre>
<p>Now notice the difference between accessing the native Element object and the CrossBrowserElement object, and then compare this with listing 3.</p>
<p><i>Listing 4</i></p>
<pre>
function windowOnload() {
<b>// ne is a reference to the native Element object</b>
var ne = document.getElementById('E1');
<b>/*
e is a reference to the CrossBrowserElement object
associated with the native Element object whose id is 'E1'
*/</b>
var e = ne.cbe;
e.moveTo(100,100);
e.show();
}
</pre>
<h3>The CBE Object Tree</h3>
<p>The function cbeInitialize() connects all the CrossBrowserElement objects into a <i>tree structure</i> using property names from the DOM2 Node interface. This tree structure models the <i>parent/child</i> (nesting) relationships among the CrossBrowserElement objects. When cbeInitialize() has finished creating the object model, it calls windowOnload(), if you have defined it. The window.on<b>un</b>load event is also received by a CBE function. It first calls windowOnunload(), if you have defined it, then nulls the cbe property of each positioned Element.</p>
<p>The following illustrates the tree structure that is created for the HTML in listing 5. Notice that there are two additional CrossBrowserElement objects in the tree. One is associated with the native <b>window</b> object, and the other is associated with the native <b>document</b> object. Their respective id's are the values of the variables <b>window.idWindow</b> and <b>window.idDocument</b>.</p>
<table border='0' cellspacing='0' cellpadding='20'><tr>
<td valign='top'>
<p><i>Listing 5</i></p>
<pre>
<div id='P1' class='clsCBE'>
<div id='P1C1' class='clsCBE'> </div>
<div id='P1C2' class='clsCBE'> </div>
</div>
<div id='P2' class='clsCBE'>
<div id='P2C1' class='clsCBE'> </div>
<div id='P2C2' class='clsCBE'> </div>
</div>
</pre>
</td>
<td><img border='0' src='../graphics/cbe_tree.gif'></td>
</tr></table>
<p>There are common terms used to describe the relationships between objects in a tree structure. In the descriptions below I'll refer to the tree built from listing 5.</p>
<ul>
<li><i>node</i> - Each individual item in the tree.</li>
<li><i>root</i> - The first node of the tree. <i>window.cbe</i> is the root node of the CBE object tree.</li>
<li><i>parent</i> - The node one level up. P1 is the parent of P1C1 and P1C2.</li>
<li><i>child</i> - The node one level down. P1C1 and P1C2 are the children of P1.</li>
<li><i>Sibling</i> - Nodes on the same level. P1C1 and P1C2 are siblings (they have the same parent).</li>
<li><i>Ancestor</i> - Any of the nodes as you follow the connections up to the root. <i>document.cbe</i> is not the parent of P1C1, but is it's ancestor.</li>
<li><i>Descendant</i> - Any of the nodes as you follow the connections down. The opposite of ancestor. P1C1 is a descendant of <i>window.cbe</i>.</li>
</ul>
<h3>CrossBrowserNode</h3> <!-- * -->
<p>The CrossBrowserNode object is a partial implementation of the DOM2 <b>Node</b> interface. It's properties provide for the implementation of the CBE Object Tree.</p>
<p>CrossBrowserNode Properties:</p>
<ul>
<li>childNodes</li>
<li>firstChild</li>
<li>lastChild</li>
<li>nextSibling</li>
<li>parentNode</li>
<li>previousSibling</li>
</ul>
<p>In CBE, <i>childNodes</i> is an integer, and is simply the number of child nodes. The remaining properties point to CrossBrowserElement objects.</p>
<p>With the CrossBrowserNode properties you can <i>traverse</i> (walk) the tree,
that is, <i>visit</i> (apply a function to) each node in the tree (or sub-tree). I've also provided a function named <a target="cbeRefWin" href="../cbe_reference.html#cbeTraverseTreeLink">cbeTraverseTree()</a> which will perform a pre-order traversal of the entire tree (or sub-tree). If you need post-order traversal let me know and I'll provide that function.</p>
<p>For the following example, imagine that the nodes P1 and P2 are containers for a dhtml <i>window</i>. Within them may be many different positioned elements, nested at different levels. When the user clicks anywhere within the container we want to raise the container's z-index, to make it come to the top of any other <i>windows</i>. The following function would be useful, and it makes use of the CrossBrowserNode properties and the tree structure.</p>
<p><i>Listing 6</i></p>
<pre>
function getTopContainer(oThis) {
var ancestor = oThis;
while (ancestor.id != window.idDocument) {
ancestor = ancestor.parentNode;
}
return ancestor;
}
</pre>
<h3>ClientSnifferJr</h3> <!-- * -->
<p>There is one <a target="cbeRefWin" href="../cbe_reference.html#ClientSnifferJrPropertiesLink">ClientSnifferJr</a> object, named <b>is</b>. It is the client detection object, which is available immediately after <i>cbe_core.js</i> has loaded. With the <b>is</b> object you can determine which browser your page is currently running on.</p>
<p><i>Listing 7</i></p>
<pre>
function windowOnload() {
var s = "Welcome ";
if (is.opera) s += "Opera";
else if (is.gecko) s += "Gecko";
else if (is.nav) s += "Navigator";
window.defaultStatus = s + " User!";
}
</pre>
<p>See the object reference for a complete list of events, properties and methods for all the objects discussed in this document.</p>
</td></tr></table><!-- end indentation table -->
</body>
</html>
Submit an article or tip