Objectsheet Tutorial

1. Basic cell entry and navigation

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)

This section will introduce you to the objectsheet. Here, we will work on creating a new sheet and entering cell values and formulas. While details of the objectsheet's "look and feel" are different from their spreadsheet counterpart, much will be familiar.

This proof of concept application is written completely in Javascript, so there is no software to install. When you click on the button below, it will just come up in a new browser window. This 92KB of Javascript should take at most a few seconds to download.

Note: To use this application, you will need to be using Internet Explorer 5.0 or newer. If you aren't running IE 5, this tutorial is copiously illustrated so you can still follow along.

Cell Entry and Navigation

Open up a new, blank objectsheet:

Click the above button; a blank sheet will come up in a new window:

Note: The default name of an objectsheet is of the form 'os_(date)_(time)' as above, but your sheet should be named "os_tutorial_1".

Looks kinda like a small spreadsheet?-- letters across the top labeling the columns, numbers down the left hand side labeling the rows. The bold text in the upper left is the sheet name; you can change it by just clicking and typing there. The other stuff up there we'll explain later.

Enter numbers and text to your heart's content. (We'll grow the sheet bigger than 3 x 2 later on).

Moving around: Of course, you can use your mouse to click in any cell and enter stuff. To move using the keyboard, use the up and down arrows to go up and down between rows, the tab key to go to the right and shift-tab to go to the to the left. When you tab or click out of a cell, the sheet recalculates.

Entering cell formulas: Like a traditional spreadsheet, you can enter formulas by starting with an equals sign. Javascript is the engine here, so you can enter any valid Javascript expression for cell formulas. Functions like sqrt() and cos() and constants like PI, below, can be used. The HTML object model is also accessible (as with screen.width, below). See the quickref section on Javascript functions for an expanded list of available functions.

Entering formulas: We make do without the "formula entry bar" in traditional spreadsheets (i.e. the text area above the cells of the sheet-- where you usually enter formulas). In the objectsheet, all formulas are entered in the cell itself. To aid viewability, we do two things:

When we click out, the cell contracts back to the standard width:

The Template and cellWidth Row

If we want, we can see the cell at all times by setting the column width. Column widths are maintained in a Template row. The Template is completely hidden right now; we view and hide bits of it via the VIEW menu. View the cell width row by clicking on the VIEW menu on the upper right, then selecting "cellWidth" like so:

You should see the cellWidth row above the name row.

Note: if you want to escape out of a menu without selecting anything, you must click again on the menu name (VIEW in this case).

Each number in this row holds the estimated cell width (in characters) of the column below it. Right now, all columns are 15 characters across. To make column b wider, change the value over the "b", then tab or click out of the cell to have the change take place.

Now, hide the cellWidth row by again choosing it in the "VIEW" menu,

giving:

There are several template rows, each with its purpose. Here are all the Template rows made visible.

There's quite a bit of power hidden in each of these. We'll cover each of them as we proceed.


next: referring to other cells

rk-11 apr 01