Objectsheet Tutorial Page 4: HTML Sections

In tutorial 1, we covered basic navigation, cell references, sorting, and template formulas. In tutorial 2, we cover formats, styles, and display types. In tutorial 3, we cover advanced functions like cross-table referencing, scalars, and introspection. Here, we cover the HTML Section.

Page Contents:

15. HTML Section Introduction
16. HTML Sections and Variables
17. Using HTML Sections to enter data

15. HTML Section Introduction

HTML Sections present data and text in a general purpose fashion. HTML Sections have 2 parts: an upper "edit" area, where you enter wiki text or HTML, and a lower "display" area that shows the result. You can toggle the display area by clicking the "E" icon at the upper right of the HTML Section.

HTML sections use either HTML or a "wiki" syntax to make common formatting easy. The following are some wiki syntax:

• A line where "!", "!!", "!!!", etc., begins the line will be shown as a title.
• Text on a single line enclosed in three successive single quotes ('''bold''') will be shown as bold.
• Text on a single line enclosed in two forward slashes (//italic//) will be shown italicized.
• A line that starts with a "*" and then a space will be shown as a bulleted list. Additional lines immediately below will be additional items on that list. To create a second-level indented list, use "**", and a third-level list, "***".
• You can create horizontal bars by starting a new line with "===" (thick bar) or "---" (thin bar). The more characters, the longer the bar: "===" is 25% wide, "====" is 50% wide, "=====" is the entire width of the section. You can include html options following the above characters (e.g., ===color='green').
• HTML tables are defined using vertical bars "|". In the first line, you can specify HTML table parameters in parentheses immediately following the first "|" that defines the table.

For more detail on wiki formatting, see the Objectsheet reference

When you update the text in the edit area, you can see the results either by clicking or tabbing out of the input text area, or by pressing Ctrl-Enter on your keyboard.

Things to try:

• Modify the text in the (upper) edit area, then recalculate the section by moving the cursor out of that area, or hitting Ctrl-Enter.
• Hide the text area by clicking on the "E" icon on the upper right of the section. You can show the text area again by clicking there again.
• Resize the HTML area by dragging the gray bars at the bottom and right sides of the Section. If you resize the section while only the display area is showing, the display area will resize. If you resize the section while both the edit and display areas are showing, the text edit area will resize.
• Change the color of the horizontal bar by adding color=red after the four dashes.

15. HTML Sections and Variables

Within an HTML section, you set named variables through standard HTML form elements. The variable name is set through the form elements name="" attribute. Once set, you can refer to them from within the HTML section or from anywhere else in the Objectsheet. To immediately cause something else to happen when the value changes, use the action="" parameter in the HTML form element.

Things to try:

• Enter numbers for either inches or cm; the corresponding conversion will appear in the other cell.
• You can refer to the HTML form element values from anywhere else in the objectsheet. Here, the Scratch section shows the values.
• Also notice use of the same fix() format function that we used in table sections.
• Change the size of the input cells by adding size=7 as a separate parameter within the <input> tag.
• Close the edit area of the HTML Section by clicking the "E" button on the upper left of the Section.

17. Using HTML Sections to enter data

One use of HTML Sections is as a form to enter data into a Table. You can use action='...' for buttons to cause something to happen. Within an action expression, the PasteObjects() method adds data to an existing table. For the table below, the button's "action" is

rooms.pasteObjects({name:n, depth:d, width:w}).calc()

The argument to pasteObjects()^* is an object with keys equal to the column names in the "rooms" table and values from the form elements in the html section ("n", "d", and "w", respectively). The .calc() expression on the end ensures the table is recalculated and displayed.

Things to try:

• Enter a new room, give it dimensions, then click "Add Room"
• See the new information added to the rooms table. The room's area is calculated.
• See the new total area calculated in the scratch section (rooms.area() is just the values down the "area" column.)
• Click the "E" icon in the upper right of fm to see the HTML that generated the form. Modify the html to change how the form looks.

Using the three simple structures introduced in this tutorial, Table, Scratch, and HTML, you can contstruct a wide variety of useful models that are easy to create, easy for the user to use, and much safer than traditional spreadsheets. From here, you can learn how to get the Objectsheet application and other aspects of how to use it.