Prototype

Purpose

Provides a client-side factory for constructing multiple instances of the nested content.

Prototypes should typically be used when multiple items with the same structure and style but different content must be displayed on a single page. The component allows authors to generate a single prototype on the server and iterate over the items on the client. Please note that this approach may be slightly slower on the client, than iterating over the items on the server and generating markup for each one of them. However, the latter will require more work on the server and increase the size of the page sent to the device.

Prototypes are especially useful when the number of items to be displayed on the client is not known on the server, for example, when the number of items to display depends on the screen space available on the client, or the number of items to display is to be determined dynamically as the result of an AJAX request.

Prototypes should typically be used with templates, but can contain any combination of markup and components. Please note, however, that prototypes do not support form related elements.

The prototype component defines a construction scope to encapsulate its content, i.e. everything inside it, for example, content, components, handlers, custom scripts, etc. belongs to the prototype, specifically:

If a component within the prototype needs to access a component outside, then the id of the outside component must be added to the list of components used within the prototype. The uses attribute of the ui:prototype element allows page authors to define the list of external components that are used from within the selected prototype. It is not possible, however, for components outside the prototype to access components within the prototype, because the component inside the prototype represents a whole set of components not a single one.

Exported Features

cf2:ui.Prototype

Imported Features

n/a

Markup

This component is provided by the ui:prototype element.

JavaScript

This component is provided by the V$.UI.Prototype class. It is a common UI component and implements the methods defined in Common JavaScript methods, plus the following.

construct()

Creates a new set of elements, and components associated with those elements, and returns a Prototype instance that provides the get(id) method. The method allows authors to get hold of a newly created component by its id.

The prototype instance, implemented by V$.ui.PrototypeInstance, is also a common component, i.e. it implements the Common JavaScript methods, and provides the following additional method:

get(id)

Returns the component with the specified identifier that was created during prototype construction. It is an error if the component does not exist.

Parameter Description Type
id The identifier under which the component was registered. String

Related topics