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)
Objectsheet cell attributes:
The Display row in the objectsheet Template controls the visual container that holds that property's values. The default container is a standard HTML textbox, but can be changed to one of the following:
Traditional spreadsheets allow you to include these visual elements, but they exist in a context only loosely bound to the spreadsheet itself. They are not part of the actual spreadsheet, but are drawn on top of it and they must be manually linked to a specific cell's value. On the other hand, objectsheet visual elements are the cell, and in all cases reflect the cell's value. When you change from one element type to another, the value never changes; the only thing that changes is the way its displayed. It is trivially easy to specify and change display elements, as we will soon see.
Start a new objectsheet: and populate it as follows:
Note: We created this sheet by showing the format row via the VIEW menu, entered all the values in the format, name, and formula rows, then typed the manual values (the ones in white background, "price" and "taxable").
Note: in the price column, enter the number without the "$" prefix.
In this sheet, we're introducing one new function: dol(). This simply
represents the cell's value in dollar format. The taxable property is
set to 1 if the item is taxable, 0 if not. The tax property uses this
to decide how to calculate a 6.0% tax on the item.
Well, the 1 and 0 in the "taxable" column is an ok way to represent whether an item is taxable, but not the most obvious. Instead, let's have it represented with a checkbox.
From the VIEW menu, let's hide the format row for clarity and then show the display row:
q
The display row appears right above the name row:
The objectsheet function checkbox() turns
the cell into a checkbox. The label argument ("taxable"
here) is optional:
Note that the checkboxes picked up the preexisting values in
the cell. Now, we can click the checkboxes and the objectsheet
updates the values instantly. Internally, the taxable property is
still represented by "0" or "1".
Next, let's add a multiline "note" property. We add
a single property and rename it to "note". We'll use
the textarea()
function to contain the note (optional arguments specify the
number of rows and columns; we use the defaults in this case). We
then enter values in each cell:
Note that the background color follows the same rules (gray for automatic calculation, white for manual entry) for all display element types. We can specify a formula for any type of visual element. Manually erase the values you typed in , as we give formulas to both the taxable and note properties.
Lets change the last column from holding a note to hold the state for shipping. Let's assume we only ship to California (CA), Oregon (OR), and Washington (WA). We'll create a select box to hold this value.
First, let's set things up. First, we clear the textarea() display
formula:
Note that the values in the "note" column stay intact; only the container changes.
We next remove the formula for note:
Next, we change the name of the property to
"ship_state" and add the formula for the select box. select() requires
a single argument; an array of values, which in our case are the
three valid states, "CA", "OR", and "WA".
Javascript lets us easily form an array by listing the elements
inside square brackets: ["CA",
"OR", "WA"]. The formula simply
becomes select(["CA",
"OR", "WA"] ). The result is
shown below:
Note that the select boxes are blank. That is because the cell values in that column (i.e. nothing) match none of the selectable possibilities. We can go ahead and select states; they will then show up:
The ship_state values are represented internally by the selected string. If we remove the Display formula, again, we retain the values within:
Like radio buttons better? Let's change the cell
for that. The radio() function
uses the same syntax as the select() function,
so it's simply a matter of changing "select" to "radio"
in the display cell:
Again, the white color of the first radio button in the cell as well as the previous select boxes are due to the fact that these cells expect manual entry; a formula'd property would turn them to gray.
In preparation for the next section, reenter the Display
formula using select() and for
cleanliness, hide the display template row:
Graphical elements like the ones above can simplify the look and feel of your objectsheet. The objectsheet naturally combines Javascript and DHTML in such a way as to make it trivially easy to create these elements in your model.
next: scripts and HTML
rk, 20 aug 01