Examples and Screenshots

The following examples are available to see and experiment with. Click on an image to see a detailed description and screenshot. Then click the filename to open the application in a browser. When the file opens in your browser, you can see exactly how it works by clicking on the buttons (S, P, f(), and E) in the upper right of each section. These examples currently work with Internet Explorer (6 and 7) and Mozilla.

pay (example on homepage)	todo list	flashcards
cell contents as array	many-to-many relationships	times table
mortgage calcs	histogram	school db
	dbpedia (RDF/SPARQL) query

Note that as these models open in a web browser, you cannot save any changes you make. If you would like to modify these examples and save them to your own computer, they are also available in the downloadable desktop application version of the Objectsheet.

pay.os   The example from the homepage

This example shows some of the basics of the Objectsheet:

• Formulaic flow: columns with entered and calculated values
• Adding units to a column name: after a column name, a comma or parentheses delineate units. Units have no meaning beyond simple notation. E.g., in the second column of table1, "rate" is the column name, ", $/hr" is the units
• Using HTML sections to summarize and report results (click "E" icon in the upper right of html1 to see html source)
• Formatting table results (click "P" icon in upper right of table1 to see format formulas).
• Using Scratch sections to inspect values within a model. Select a section using its name; the rows in a Table are kept in the us[] array.

todo.os   An example to-do list (launch...)

This application includes the following features

• Automatic highlighting of entire rows (ie., high priority tasks)
• Combining tables (category and project tables feed the tasks table)
• Use of form elements in an HTML Section to modify other sections (add task, show completed tasks)
• Using the "Alt Row Sizer" (see Options menu) to simplify adding and deleting rows.

How it works:

• The following HTML is used within the "info" section (click the "E" button to see HTML source),
  • <input type='text' size='50' name='newTask'>
<input type='button' value='add task' action='tasks.pasteObjects({description:this.newTask,start:new Date()}).calc();''>
    The first line is a named text box; the second line uses the "action" attribute to add that text as a new task description. The .calc() forces the table to be updated.
  • <input type=checkbox name='showDone' action='tasks.calc()'>'>
    is the "Show Completed Tasks" checkbox in the info Section. It simply sets the info.showDone variable (it's value, 1=checked, 0=unchecked, is set automatically when a user clicks it). The filter formula in the "todo" table, "info.showDone ? 1:complete==0", reads that variable and filters accordingly: "1" means show all rows, "complete==0" means show only rows where "complete" is unchecked, or zero.
• Using the "display" attribute to create alternative display elements. (Click the "P" button to view the display row)
  • Tasks table: drop down select box ("context" and "project" columns). For the "context" column, the formula is select(contexts.name()). contexts.name() is an array formed by the the values of the name column of the contexts table. The select() function turns this array into the values of each select box.
  • Tasks table: the checkboxes in the done column use the checkbox function (checkbox())
  • contexts table: the "filter tasks" column. The toggleButton(["filter"]) display formula creates a simple labeled button. Each click on a button causes the "action" formula (this.filterRows = me.name == this.filterRows? "":me.name) to be run. This formula sets the table level "filterRows" variable to either change from another row or to toggle on/off if the same row is clicked twice in a row. This variable (along with a similar one for the projects table) is used in the filter row in the tasks table-- click the "S" button to see the filter formula.
• Automatic updating of select boxes in "topic" column when data source ("Topics:" textbox) is modified.
• Hiding columns: in the tasks table, if you click the "P" button to show the property template, two additional columns will show up (named "start" and "end"). These are automatically set to the start and end dates for a task. In the style row, these are both set to "display:none", which causes the entire column to be hidden when the template is hidden (click the "P" button again).

times.os   Resizeable times table (launch...)

• Automatic sizing of table ("misc" row)

multi.os   Basic usage of the multi-item select box and arrays as cell contents.

• Use of the multi() display function. The names of the ice cream toppings are the keys of the "toppingCost" object. "toppingCost" is defined in the "misc" row of table1 (click the "S" button to see it).
• Cell values can be entire arrays (in this case, the toppings and their costs). We can use array methods to analyze or transform them. For instance, we applied the the collect() array method to the topping names to get costs for each of the toppings; we used the sum() method to determine the total cost of the toppings.

many-many.os   Many-to-many data representation using arrays as cell contents. See the html1 section in this file for more details. (launch...)

• Basing multi() selectable elements on another table's contents (Component.name()).
• Using the Objectsheet's database methods to determine which products contain a given component (the reverse mapping). See the "Products" formula within the "Component" table: Product.where("parts_used.contains(me.part_name)").select("prod_name")
• Display function in the "name" column of the Component table ensures that the multi select box is updated whenever a Component's name is added or modified.

finance.os   Mortgage and Amortization tables (launch...)

This Objectsheet allows you to evaluate a range of factors in calculating mortgage payments. It also demonstrates the "stacked", and "canClose" options and row filtering.

• The stacked option is one way of cleaning up the presentation of sections, by showing them one above the other and allowing no overlap. The vertical sequence also defines the order of calculation, top-to-bottom.
• The Can Close option is turned off. This prevents the individual sections from being accidentally removed (there is no close box visible on the sections below). To remove a section, first check the Can Close checkbox in the Options menu.
• One way to make large tables (e.g., the amort table, with over 100 rows) display more quickly is using the bare() display function. The bare() display function renders them faster than the default editable cell. bare() is also useful when you want to ensure the user does not modify values.
• Another way to make long tables (like the amortization table below) display quicker is by filtering rows. Instead of always showing every month, you can see a summary version. The 'filter amortization every' parameter controls the amort table's "filter" row. The row label becomes "a\b", where a is the original row number (if filtering wasn't used) and b the row number as shown. This also makes the table more compact and therefore easier to follow.
• To allow a column's values to represent either a single repeated value or a range of values, this file defines a short valRange() function. This function is defined in the section named "scratch1". To view that section, click on the Sections menu and check the "visible" checkbox next to scratch1. The valRange() function looks for two numbers separated by a dash, then creates the appropriate Objectsheet range() function. This is used in the "info" section for the Amount/rate/years text boxes (the action="..." denotes code run by the Objectsheet). To see, click the "E" button at the top-right corner.

flashcards.os   A simple learning application. This example shows:

• Interaction between HTML Section buttons, fields, and Table Sections
• Hiding of the data; only application interface is shown. Check the "visible" boxes in the Sections menu to see the "terms" (data) and "QAs" (helper functions) sections.
• Use of Array.subtract() method to ensure questions don't repeat too quickly (see this.get() function in the QAs section)

histogram.os Demonstrates the histogram() array method. (launch...)

• Use of radio() display function. The "gender" column in the students table uses a display function to generate the radio buttons. This causes the actual values in each row to be either "m" or "f".
• In the students table, the format function for the "ht, in" column converts height in inches to ft and inches.
• Use of the histogram() function (see below)

The histogram() array method (definition) counts occurences of either single values or numeric ranges. There are three different calling conventions. Each convention is illustrated in the screenshot below.

1. A single argument is a single bin (literal value or numeric range, "a-b", enclosed in quotes) and returns the number of times that array values occur in that bin (see "gender bins" table).
2. Multiple bins can be passed as an array; single values and numeric ranges can be mixed. The method returns the number of values within each bin (see "height bins" table).
3. Without an argument, the method returns all unique values and the number of times each value occurs in the array (see "gender2" table).

In cases 1 and 3, histogram() returns an set of key-value pairs (ie., a Javascript object) with each key corresponding to each bin and the number of occurences as the value. In case 2, the number of occurences of the single bin is returned.

To illustrate the "height bins" calculation in more detail, the misc formula in that table analyzes the "height, cm" column of the "students" table. The column function (students.height(); the ", cm" suffix is ignored) returns the column's values as an array:

[184, 144, 177, 149, 174, 155, 182, 169, 190, 176, 167, 202, 180, 201, 190]

The argument to histogram() is the array of values down the "a" column (previously typed in by hand):

height_bins.a() = ["100-149", "150-174", "175-199", "200-300","", 190]

{"100-149":2, "150-174":4, "175-199":7, "200-300":2, "":0, 190:2}.

In the "height bins" table, the histogram counts are generated once and stored in convenience variable "h". In the instance area, the values are selected from "h" for each bin.

In the "gender bins" table, histogram() is called using the gender() column function, with a single value ("m", then "f"). histogram() returns just the number of values equal to the argument.

Finally, in the "gender2" table, histogram() is called without argument for the gender() array. It returns all values and corresponding counts as an object.

school.os   A small database of students, the schools in a university, and professors. (launch...) This example shows:

• Use of select() display elements based on the rows of another table. For instance, the display cell of the "school" column in both the "profs" and "students" tables, is select(schools.abbrev()) (click "P" icon on the table to see). This creates a drop-down select box formed by the values down the "abbrev" column of the "schools" table.
• Synchronizing table rows: The "counts" table forces its length to be the same as the length of the schools table. This is done using a misc row expression: us.length = schools.us.length (click "S" icon on the table to see). The values in the "school" column of that table also tracks the "abbrev" column of the "schools" table via schools.abbrev(row) (see "counts" table formula row). Note: we could have gotten the same values using row references: schools.us[row].abbrev.
• Analysis of the data (in the "counts" table). This table uses the histogram function (see above example) to determine the number of students belonging to each school. The number of rows in this table is also controlled by the "misc" formula us.length=schools.us.length.
• You can find Eustice Eubanks' professor using the .find() method of Array: profs.us.find("school==students.us[4].school").name. Create a Scratch section then copy that expression into it.

sparql_query1.os   Query the DBpedia database (launch...)

DBpedia is "a community effort to extract structured information from Wikipedia and to make this information available on the Web." DBpedia provides this information in the form of a database on the Internet that you can query using the RDF query language SPARQL. This model allows you to query DBpedia and then manipulate or analyze the results. Instructions are in the README section.

This file demonstrates the following Objectsheet capabilities:

• Defining helper functions in a scratch section (the "sparql class" section; to view, go to the Sections Menu and click the "visible" checkbox next to sparql_class)
• Using File.loadURL() to retrieve data from the web (this is defined in the sparql.prototype.send method within the "sparql class" section).* This sparql service allows you to retrieve query results directly in the JSON data format.
• Turn query results into a displayable result. Within sparql_query1.os, the sparql.prototype.getResults method filtered for the english language, then turns the sparql query results data structure into a simple array of objects (using the collect() function/method). The sparql.prototype.toTable method then creates the Objectsheet table and inserts the appropriate formatting for dates, and loading the values into the table using the setObjectCount() and pasteObjects() methods.
• Analysis of queried results. The "Add Lifetimes col..." button creates a new column comprised of the age of the entry, based on "birth" and "death". The code to do this is:

  results.addProperty("lifetime",-1, {formula:"toDays(death-birth)/365.25", style:"text-align:right",format:"fix(self,1)"}).calc(1);

  A property with name "lifetime" is added as the rightmost column of the table (index = -1), with the given formula. Additional analysis is shown in the "Calculations" table.

* Note: This file uses cross-site XMLHttpRequests to retrieve query results. If clicking Run Query returns a permissions error, try the following:

• Mozilla: In the browser URL bar, type "about:config", hit return, filter for term "codebase", double click on "signed.applets.codebase_principal_support" to set it to true.
• Internet Explorer (6): Tools Menu > Options > Security > Miscellaneous > Custom Level > set "Access data Sources across domains" to Prompt or True.
• (Security access has not yet been resolved for Safari browser).