basics : cell references and formulas : referring to cells in other rows : independent variables : cell formatting : cell styling : cell display : scripts and HTML : conclusion (objectsheet home)
We introduce a couple more elements of the objectsheet here. These elements are evaluated once for the entire sheet, not for each object as with the formula row, format row, etc.
First, the html area. This simply allows you to enter arbitrary html that will appear above the main area of the current objectsheet. It is a convenient place to provide documentation, introductory text, or use instructions.
Let's start with the sheet from the last tutorial:
The html area can be shown via the VIEW menu:
When selected, the sheet now looks like:
The large box on the right is where we can enter the HTML. The box on the left with the number 2 indicates the number of rows tall the large box displays. While we can enter as much html as we want in this box and use the scrollbars on the right to move around, for large amounts of content we might just want to make the visible area larger. As with other cells, clicking out of either cell causes the change to take affect. Let's increase the number of lines to 6:
But for now, let's change this back to 2 lines:
We can enter just straight text without tags, or add html formatting tags. Since this is all within DHTML, we can enter arbitrary tags, CSS, etc. (Currently, there is no provision to embed dynamic objectsheet data in the HTML area-- this will be part of a future release). Again, leaving the cell makes the changes take effect:
We can then hide the input text area (via selecting html again in the VIEW menu); the generated html stays with the sheet:
This provides a convenient place to document the sheet.
The script area provides a place to store arbitrary definitions and information. It is a text area in the same form as the html area above. The script area is simply a container for arbitrary Javascript content. It's content is evaluated before the rest of the sheet.
The script area is generally for advanced use, to hold things like user-defined objectsheet methods, helper functions, etc. But even if you aren't a Javascript wiz, you may still find it a useful place for Convenience variables and perhaps simple functions.
Let's go back to the sheet we had at the beginning of this section (you can leave or delete any html text you generated above):
We show the script area via the VIEW menu:
And we get:
As a first example, let's move the tax formula from it's place in the formula row to the script area. This really makes more sense for more complex formulas than this, but it will illustrate how it's done. Let's create a function for tax in the script area,
function calcTax(taxable, price) { return taxable? price*0.06 : 0 }
and call it from the tax formula, calcTax(taxable,
price). Note that the body of the calcTax() function is
essentially indentical to the original template formula:
We can also enter convenience variables for oft-used text or styles. Below, we have done so to highlight the the tax of taxable items:
Here we have defined the variable taxStyle
= "background-color:pink", and set a
conditional style to highlight the tax for taxable items.
Next, let's do something a little more useful. Let's calculate
tax differently for each state. We'll do it according to: CA: 5.75%,
OR: 0%, WA: 6.5%. This is easy via Javascript associative arrays.
We define stateTax = {CA: 0.0575,
OR: 0, WA: 0.065}. (the curly braces let us define
an associative array in this manner). We modify the calcTax() function and
the tax template formula to use this. (We have also increased the
size of the script area so we can see the whole thing).
Note that now, when you change the state via the select box, the calculated tax automatically changes.
The item in the last row (row 2) remains highlighted since the
item is still taxable, even though the calculated tax is zero.
Spreadsheets (at least excel 2000) cannot condition formatting
based on data outside the cell; one must revert to sophisticated
macro programming to acheive this. The Javascript version in the
objectsheet is substantially simpler. The best a spreadsheet
could only is to highlight non-zero tax amounts-- we can do that
as well merely by changing the style template formula from "=taxable ? ..."
to "=self > 0 ?
...". And remember that we only created the calcTax() code above
to illustrate helper functions-- we could have simply set the tax
template formula to "taxable?
price*stateTax[state]: 0").
Finally, let's get rid of all that parameter passing by making
calcTax() a method
of the objects on this sheet. The prototypical object on any
objectsheet is simply called "object". We
can create a method for object (and thus all the
objects on the sheet) by the following: object.prototype.calcTax = function()
{... }. That's how you set up object methods in
Javascript. A method has automatic access to all the properties
of the object, although they need to be identified as such (with
the me object, or
alternately with Javascript's this reference). We change
the formula in the script area accordingly and remove the
parameters in the tax formula:
So we can easily define formal behaviours (methods) for our objectsheet objects. Everything is defined right on the objectsheet using a consistent syntax.
One final (more advanced) note to illustrate the flexibility of objectsheets; the value in a formula cell need not be a mere expression; you can use multiple expressions, separated by a semicolon. In this case, the value displayed in the cell is the value of the last expression. You can also put procedural constructs right in a cell:
Of course, much beyond this would leave a messy and crowded cell; that's when the script area is useful. But this highlights the simplicity of the objectsheet application; unlike spreadsheet applications, there is one syntax for everything, and you are not limited on what you can put where.
next: conclusion
rk, 22 aug 01