Objectsheet Tutorial

5. The Style Row

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:

• Format row: number formatting, cell labeling, etc.
• Style row: cell colors, font, alignment, etc.
• Display row: cell as text box, checkbox, radio buttons, etc.

The Style row in the objectsheet's template gives us control over how cell values are displayed. They allow us to visually format values with the familiar attributes:

• Font: face, size, weigth (bold), style (italics), and color
• Text: alignment, spacing, case, and variations (underline, strike-through)
• Cell Space: margin spacing, background colors/images
• Cell Borders: line type, thickness, color

The Style row also enables us to easily apply conditional styles, thus making it convenient for type- and constraint- checking.

Objectsheet Styles uses Cascading Style Sheets (CSS) as its syntax. Styles are entered as simple strings or evaluated expressions and applied to all cells in that column. An introduction to common CSS formats is provided here; but there is also a reference to more general CSS rules.

Basic Styles

We start out with a simple sheet from tutorial 4 (variable a is range(2, 7) and b is a raised to the 5th power, pow(a,5).

Create a new sheet: fill it with the above formulas and expand it by 5 rows:

We format it by showing the format row and entering fix(self,3) for the format of both a and b:

Next, we rehide the format row by selecting it again in the VIEW menu, and then show the Style row likewise:

==>

For this version of the objectsheet, all Styles are specified by typing. Future versions will provide a GUI front-end so you can specify styles by familiar dialog boxes, as well as keyboard shortcuts (like "Control-b" to bold an element).

Let's bold the calculated values: the standard CSS expression to do this is font-weight:bold. We enter this in column b and tab or click out of the cell. The result is:

Note that we're not styling individual cells here, we're applying a rule to all cells in a given column. Direct styling of individual cells can be accomplished in this version of the objectsheet by use of conditional styling, described below.

Let's italicize the values in column a; following CSS syntax, the expression is: font-style:italic; we simply type that in the style entry for column a:

How about more than one style at once? Just separate any combination of elements with a semicolon-- let's make column b both bold and underlined (font-weight:bold; text-decoration:underline):

This may all seem like a lot of typing to do a simple thing: here are some predefined variables you can use as shortcuts:

For example, to bold text you can simply enter "=_b" (don't forget the equals sign; _b is a variable) in a style cell, and to underline and italicize both, enter "=_i+_u". These shortcuts can also be combined with any other CSS attributes, including the ones below. (actually, you can define any other shortcuts you like and stick them in the script area; the script area will be discussed in a later topic).

Some other examples of the style row settings are illustrated below:

• Font Size
• The actual size can be specified numerically (as with "8 pt in the example) or with predefined sizes ("large" in the example). You can find all the predefined sizes in the reference <link>.
• 
  
  
• Font Color
  

As with font size, font color can be specified with names or with codes. If you've ever done HTML, these are the same color codes, with the form: #rrggbb, where rr, gg, and bb are the intensities of red, green, and blue, respectively. For this example, "#0000ff" corresponds to zero red, zero green, and maximum (ff in hexidecimal) blue.

• Background Color
  

Cell Background color as well can be specified with names or with codes. For this example, "#ddddff" corresponds to maximum ("ff" in hexadecimal) blue and not quite so much ("dd") red or green.

Conditional Styles

The above styles were entered as straight text (that is, literal values). Alternatively, we can enter formulas in the style cells. For instance, the style formula ="background-color:"+(self>0 ? "white" : "red") sets the background color white, if the cell value is greater than zero, or red, if the value is less than zero. Remember- the variable self refers to "the current value in this column".

In this manner, cell formatting is quite flexible; expressions are arbitrary and the styling "toolbox" is limited only by the CSS2 "language". Other powerful formatting capabilities, things that are difficult or impossible in traditional spreadsheets, include:

• highlight the maximum or minimum value in a column:
=self==amax(ob.props("a")) ? "color:blue" : ""
• highlight values based on things other than that cell's value:
  =a<100 ? _b : "" in column b
• copy styles from another property:
  =prop.a.style
• pop up a warning:
  =if(self && self <= 0) alert(self +"<= 0. enter a positive number")

Note: the above expressions use functions (amax() , props()) and objects (ob and prop) not discussed in this tutorial; they are meant to show that these things are possible.

In the next example, we highlight a particular row, using the index variable:

Note: yes, this is a cumbersome way to format an individual cell in a table. A direct means is straightforward, but not included in this release of the objectsheet.

The Constrain() function

One important function provided for the style row is the constrain() function. This function makes it easy to do type- and bound- checking on cell values. Simply supply a condition as argument to constrain(), like =constrain(self > 0). This highlights all cells in a red border that don't pass the test (negative numbers or zero, in this case).

The utility of the constrain() function is great since we have the full battery of the Javascript language and defined functions at our disposal. Constraints can be applied to manual entry cells as well, providing a means to validate user input.

Note: the inRange() function is defined in the core objectsheet library.

Constraint checking is an easy way to make your objectsheet safe and consistent, without the burden of the forced declarations of strongly typed programming languages.

next: cell display

rk, 2 may 01