Accessor: js


Accessor that provides a user interface based on HTML5 on the local host. The initial content on the page may be specified using the content parameter and HTML header content may be specified using header.

Whatever text is received on the html input port will replace the content of the web page. Normally, this will be HTML text without any DOCTYPE or header and without a body tag. Each time new text is received, the content of the page will be replaced.

The page will be opened upon initialize if content is not empty. Otherwise, it will be opened when the first html input is received.

The resources input can be used to provide resources, such as images, that will be used by the HTML content provided on the html input. Note that you probably will also have to provide an update input (see below) to force the user interface to update the page using the specified resource.

The update input can be used to instruct the user interface to replace content within the page, vs. the html input which replaces the entire page. The value of an update input is expected to be an object with three properties, id, property, and content.

The id property refers to a the ID of a DOM element in the content of the page, where the content has been provided either via the content parameter or the html input. For example, your page may include:

    <div id="foo"></div>
    <img id="bar" src="image.jpg"/>

  • @param id The ID. The property field specifies what property of the DOM element with the specified ID is to be updated. If property is "html", then the DOM object is updated by invoking the jQuery html() function with the specified content as an argument. For example, if id is "foo", property is "html", and content is "Hello World!", then the above div will be populated with the text "Hello World!" on the web page. The content can include any HTML markup or even scripts, which will be executed.

    If property is anything other than 'html', then the DOM element's property attribute will be assigned the value of content. A property value of 'src', however, is treated specially. A property value of 'src' can be used, for example, to replace the image in the above img tag. Just send the updated image to the resources input and send this to the update input:

    {'id':'bar', 'property':'src', 'content':'image.jpg'}

    Note that to get the user interface to actually replace the image, we may have to play some tricks. If the user interface is implemented by a browser, then the browser normally caches an image that it has previously retrieved and it will use the cached version of the image rather than obtaining the new image from the server. To force the user interface to refresh the image, this accessor treats a property value of 'src' specially. Specifically, it appends to the content a suffix of the form '?count=n', where n is a unique number. This forces the user interface to retrieve the image from the server rather than use its cached version because the URI is different from that of the cached version. The server, on the other hand, ignores the parameter 'count' that has been appended to this URI and simply returns the updated image.

    The way this accessor works on most hosts is that it starts a web server on localhost at the specified port that serves the specified web page and then instructs the system default browser to load the default page from that server. The page served by the server includes a script that listens for websocket connections that are used to provide HTML content and udpates to display on the page. Some hosts, however, such as the cordova and browser hosts, natively use a browser as part of the host, so in these cases, no web server nor socket connection is needed and the port parameter will be ignored.

  • $$Id$$
  • Edward A. Lee (
Name Type Description
html string HTML content to render in the body of the page displayed by the user interface.
resources An object where each named property is an object containing two properties, 'data' and 'contentType'. The name of the named property is the path to be used to access the resource. The 'data' property is the resource itself, an arbitrary collection of bytes. The 'contentType' is the MIME type of the data.
update An object with three properties, 'id', 'property', and 'content', that specifies an update to a DOM element on the page.
Name Type Description
header string HTML content to include in the header part of the web page. This is a good place to script definitions.
content string HTML content to include in the main body of the page. If this is non-empty, then the page is opened upon initialize. Otherwise, the page is opened when the first *html* input is received.
port int The port to use, if needed, for websocket communication between this accessor (which updates the HTML content of the web page) and the user interface. The web page will listen on this socket for content and display whatever arrives on that port. This is ignored on hosts that do not need to invoke an external browser.


(inner) display()

Display the HTML contents retrieved from the html input in the main body of the user interface page replacing whatever was there before. Before doing this, check for any resources input and add those resources to the user interface in case the HTML references them.


(inner) update(id, property, content)

Update the specified property of the DOM element of the current page, if it exists, with the specified content.

Name Type Description

The ID.


The type of the update. If this is "html", then the DOM object is updated by invoking the jQuery html() function it with the specified content as an argument. Otherwise, the property with name property is assigned the value of the content. If property is 'src', then in addition, the content is augmented with a suffix of the form '?count=n', where n is a unique number. This is so that the user interface will be forced to reload the src rather than using any cached version it may have. This can be used, for example, to force an update to an img tag where a new image has been provided using addResource().


The content of the update, typically HTML to insert or a property value like src to set.