Skip to main content

The Web Document

The web document is a node tree on the server. When rendered, it translates the document model into a rendered web document that can be visualized in a web browser.

Overview

The key to programming the Web Player is an understanding of the web document. It provides the mechanism that explains how, for instance, a range filter in Spotfire can appear in the Web Player. The corresponding instance of the RangeFilterWebControl class is a web document node that renders a representation of a range filter in a web browser.

See also the following page for related information:

  • The Client Communication Engine
    The Client Communication Engine enbables the client side web control to send control signals to its server side. If the signal changes any web control, the server responds with one or more change objects. The Client Communication Engine updates the client UI accordingly.

Three Node Trees

Consider the document model node tree. Obviously not every part has a Web Player equivalent, but many will. These make up the web document. Rendering the entire server side web document produces the rendered web document, a node tree that can be visualized on a client side web browser.

Document model and web document

Each web document node generates a corresponding node in the rendered web document. The identities of the nodes are related to simplify interaction and parent-children relationships are preserved.

The nodes of the rendered web document are DIV elements.

<div id="1">
	<div id="2">
		<div id="4">
			<div id="6"></div>
			<div id="7"></div>
		</div>
		<div id="5"></div>
	</div>
	<div id="3"></div>
</div>

Interaction

Returning to the range filter, consider a filtering action. When a Web Player user moves the slider, altering the state of the filter, the corresponding RangeFilterWebControl object applies the new state to the document model. This will in turn result in document model changes. When the web document is asks for updates, updates are sent back to the client.

Client-Server interaction
  1. The Web Player user alters a range filter.
  2. The web browser sends a control signal as an AJAX request to the server. It contains the web document id, the id of the node's id, here the integer 2, the filter update interaction type and parameters like upper and lower values of the range filter.
  3. The server parses the control signal. It locates the document of the current user from the web document id.
  4. The server locates the web document node responsible for the interaction from the node id. The node is asked to perform what it is designed for based on the control signal. In this case it applies the new filter settings to the corresponding range filter.
  5. Each web document node listens to changes of the document model. Upon a request for one or more update objects, each web document node replies with an instruction describing how to update its web representation. There are three kinds of update objects:
    • The content update object adds a DIV element in the rendered web document.
      This is typically used when rendering the web document for the first time or when the user changes active page.
    • The remove update object removes the DIV element of a web document node.
      This is typically used when the user changes active page.
    • The script update object runs any script generated by a web document node.
      This is useful when minor updates are required. For example, when a new filtering state is applied, it a visualization may have to be updated. The visualization's web document node sends a script update object that replaces the src attribute of an IMAGE element.
  6. The server collects and serializes all update objects to JSON-standardized strings which are later on parsed in JavaScript.
  7. Each update object is parsed and executed by JavaScript code in the browser bringing the web representations up to date.