| Getting Started with CBE | Cross-Browser.com |
Getting Started with CBE
Initial File SetupInstall the LibraryCreate a new folder for the CBE project on your hard-drive. Download the latest version of the CBE library into the new folder and unzip it there. Start a ProjectThe following template is included with the download as the file cbe_template.html. When you start a CBE project, use a copy of the template file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CBE Template</title>
<style type='text/css'><!--
body {
color:#000000; background:#FFFFFF;
margin:0px; padding:0px;
}
.clsCBE {
position:absolute; visibility:hidden;
width:100%; height:100%; clip:rect(0,100%,100%,0);
color:#000000; margin:0px; padding:0px;
}
--></style>
<script type='text/javascript' src='cbe_core.js'></script>
<script type='text/javascript'><!--
var e1;
function windowOnload() {
with (e1 = cbeGetElementById('E1').cbe) {
color('#FFFFFF');
background('#0000FF');
resizeTo(200,200);
moveTo('center');
show();
}
}
//--></script>
</head>
<body marginwidth='0' marginheight='0'>
<div id='E1' class='clsCBE'>E1</div>
</body>
</html>
Include?Often I'll use the phrase include a javascript file. What do I mean by include? It is a preprocessor directive for the C language. It directs the preprocessor to literally include (insert) the referenced file into the current file. Javascript doesn't have a corresponding keyword - but it does provide similar functionality. Refer to the template above. The first SCRIPT element is empty - it doesn't have any Javascript between the opening and closing tags. But it does assign a value to the src attribute. This value specifies the URL of a Javascript file that is to be included at that point in the template copy. In this case, it specifies that cbe_core.js is in the same folder as the template copy. The second SCRIPT element is not empty, it has Javascript between the opening and closing tags, and so it does not assign a value to the src attribute. The CBE library consists of several different Javascript files. The object reference indicates what file needs to be included to enable a particular feature. Test Your SetupMake a copy of the template file (I'll assume its named "proj.html"), and open it in your favorite Browser. You will see a blue square in the center of the browser window. The white text "E1" will be in the upper-left corner of the square. I refer to the square in general as an element. This element's id is E1, so I'll refer to that particular square as E1. DHTMLDynamic HTML is the cooperation of three technologies: CSS, HTML, and Javascript. For each positioned element on the page, there must be related CSS, HTML, and Javascript. By the phrase positioned element I mean an element whose CSS property position has the value 'absolute' or 'relative'. CSSThis CSS defines a Class named clsCBE. Its position property is set to 'absolute'.
.clsCBE { position:absolute; }
HTMLThis HTML defines an Element with its id attribute set to 'E1' and its class attribute set to 'clsCBE'. All the styles defined by the CSS Class clsCBE are applied to this element. <div id='E1' class='clsCBE'> </div> JavascriptThe Javascript uses the id attribute of the Element to access the Element object and it's properties.
window.onload = function()
{
var e1 = document.getElementById('E1');
e1.style.visibility = 'visible';
}
The Class can be applied to more than one element. The Identifier (id attribute) of each element must be unique. First ExperimentOpen proj in your favorite text editor. You now have proj open in both an editor and a browser. After you make changes to proj in the editor, save the file, go to the browser and refresh it, to see the effect of your changes. ColorChange the background value to '#FF0000', save the file, and refresh the browser. Now e1 is red. Change the color value to '#000000', save the file, and refresh the browser. The text is now black. Here's a color chart with color values. It is more cross-browser to use the hex values instead of the color names. SizeThe arguments to the resizeTo method are width, and height. Experiment with different values. PositionExperiment with the moveTo method. Here is it's syntax: moveTo(x, y), where x and y are pixel coordinates with the point (0,0) at the upper-left corner of the element's containing element. Move e1 to the point (-200, 0). It will be at the top of the window, but half-way off the window to the left. So x and y can also be negative. The moveTo method can take arguments other than a pixel point. It can take a cardinal point, that is, a point designated by north, south, east, etc. The syntax follows. The square brackets indicate an optional parameter. moveTo(sCardinal [, iMargin [, bOutside ]])
Experiment with moving e1 to the different corners and sides of the window. Experiment with the margin. Then give an outside argument. VisibilityAn element's visibility is controlled by the visibility() method. This method accepts one, optional argument of type string. This method returns a boolean value - true if the element is visible, and false if it is hidden. There are two shortcut methods provided, show() and hide(), and they do exactly what they say. They do not accept arguments and have no return values. InitializationWhen the CBE object model is created, nothing is done to the positioned elements. You might think because size, position, and visibility are set in the CSS, that you don't have to set those properties in script - and in some browsers that's true, but in some browsers an element's properties are not initialized with the CSS values. You have to set them initially in script. At a minimum, setting size, position, and visibility should be part of your normal initialization for each object. A logical place to perform this initialization is in windowOnload(). Look at the code above for the CBE template, and notice the initialization of the element. Preparation for DevelopmentStudy the CBE Object & Event ModelsTo develop applications with CBE you need a general understanding of the CBE object model and event model. This is not a waste of time - you are not learning a proprietary API. The CBE API is an implementation of some of the W3C DOM2 interfaces. There are only minor differences. So by learning the CBE object and event models you are also developing your understanding of the DOM2 standards. Get Familiar with the LibraryGet familiar with the CBE library by viewing the examples I've provided, by perusing the object reference and other documentation I've provided, and especially by using the library. Start a new project with a copy of your CBE template file. Look through the object reference and choose a method you want to experiment with. Most entries in the reference have a snippet of an example. Copy the snippet and paste it into your new file. The snippets are designed to be used with that template - most of them have a windowOnload() function that can take the place of the same function in the template. If there's a particular example that interests you, download that example file, get it working on your own computer, then experiment with it. Refer to the reference for the valid values and ranges of each argument to the method you're using, and experiment with them. As before, you have your file open in an editor and a browser. Change the value of one of the arguments, save the file, and refresh the browser to see the changes. Create a Development EnvironmentLearn to utilize the development/debugging tools CBE provides. Here's a list of the functions in cbe_debug.js. The Debug Window - The Debug link on the menubar will open, close, or refresh the CBE Debug Window. This window provides development/debugging support. It shows the object tree for the current page, the properties for the selected object, provides a command line for calling methods of the selected object, and provides an area where the application can display messages by calling cbeDebugMsg(). The debug window file cbe_debug.html is included with the CBE download. You can use the debug window as you develop applications on your own computer. The Reference Window - The object reference opens in it's own window. As you study the examples, or as you are developing your own application, you can quickly view the documentation for a particular method, property, or event - without leaving the page you're studying. Development Environment - The CBE debug and reference windows, the application window, and your own text editor form a development environment. To help with this environment here's a little feature: Tile the CBE Windows. Clicking a reference link on one of my pages will cause the reference window to scroll to the appropriate entry, and then bring itself to the top (give itself the focus). The CBE debug and reference windows can be used on your own computer as you develop your own applications with CBE. To use the debug window, include a minimum of the following in the file you're developing. Call cbeDebugWindow() to open, close, or refresh the debug window.
Debugging TipsYou can download some very nice Javascript debugging programs for a variety of platforms, but your initial debugging can be done with simple techniques right in your code. Most browsers will give the line number of an error - this is essential. Some browsers give better error descriptions than others. There are basically two types of errors: syntax errors, and logic errors. Syntax ErrorsA syntax error will occur when you have not followed the grammer of Javascript: forget to put two quotes around a string; forget to put a closing curly brace; have punctuation in the wrong place, etc. The browser will inform you of most syntax errors. Logic ErrorsAfter you correct your syntax errors, the script still may not work properly while running: it may be mis-calculating a value, or perhaps an if condition is using the logically wrong (but syntactically valid) operator. These are logic errors. Among the tools that most Debuggers provide for solving errors are Watch Variables and Breakpoints. You can utilize these same concepts without a debugger. Watch VariablesA watch variable is a variable for which you want to watch the value, as the script is running - that is, as the page is active in a browser. A simple technique for using watch variables without a debugger is to use the window's status bar (some browsers are better at this than others). For example, in the following code fragment I want to watch the value of the variable dx. I insert line number 9. Notice the "//// debug" comment. I do this so I won't forget why I added this line, and so, later, I can search my file for "debug", and delete all those lines. Now I save the file, refresh the browser, and watch the value of dx on the status bar, as the script is running.
1: if (cl + dx < 0) {
2: cl = 0;
3: dx = 0;
4: }
5: else if (cr + dx > this.width()) {
6: cr = cl + this.clipWidth();
7: dx = 0;
8: }
9: window.status = "dx: " + dx; ////////////////////// debug
Break PointsThere are times when a variable's value is changing too quickly to use a watch. You need to stop the script and look at the variable. A break point is a line in the script at which the script stops running. You can then look at the current values of variables. When you are ready, you let the script continue running. A simple technique for using break points without a debugger is to use Javascript's alert() function. This function stops the script, displays a message, and waits for the user clik the OK button. The script then continues executing. This technique is not exactly like a break point, but its close enough. For example, in the following code fragment I want to see the value of dx only if it enters the else if block, and before it is assigned zero. I insert line number 6.
1: if (cl + dx < 0) {
2: cl = 0;
3: dx = 0;
4: }
5: else if (cr + dx > this.width()) {
6: alert("dx: " + dx); ////////////////////// debug
7: cr = cl + this.clipWidth();
8: dx = 0;
9: }
The CBE Debug WindowThe CBE debug window provides a variety of features that help with debugging. Select an object by clicking it's id in the object tree, or by clicking on the object itself on the application page. Most of the selected object's properties are then displayed. You can call a method of the selected object by typing the method and it's arguments into the text field provided and pressing Enter or clicking the Call button. For example, type this: hide() and click Call. The selected object will be hidden. Type this: background('#cccccc') and click Call. The background color of the selected object will change. Your application script can pass a string to cbeDebugMsg() and it will be displayed in the message area of the debug window. |