Module: org/glassfish/avatar

org/glassfish/avatar

Definition model (model.xml)

Special element to construct model instances of all kinds. Not all properties defined in this element apply to all kinds of models. See the documentation for each property for more information about its applicability.
Properties:

Name Type i18n Default Description
idref idref false n/a Reference to the type of this model. A model's type defines variables and methods for this model.
url exprR false n/a Defines the URL of the service for this model. The protocol on this URL can be 'http' or 'ws' depending on the model's kind. It does not apply to models of kind 'local'.
localStore boolean false false A property that indicates whether to use local storage in the browser to store the model's data. If set to true, the model data will be serialized and stored by the browser.
onActive enum false asyncRefresh Action to execute when an instance of a restModel becomes active (e.g., a view model when a view is shown). Possible values are 'asyncRefresh', 'syncRefresh' and 'noRefresh'. The first two values will cause the model to be initialized from the server asynchronously and synchronously, respectively. Synchronous initialization is required when the order is important, for example, when a model's property is used to initialize another model. The third value 'noRefresh' does not trigger a refresh from the server.This property is ignored if the instance is not a restModel.
refreshPeriod long false n/a Setting this property to a positive value (in milliseconds) will automatically refresh an active model periodically. Note that because the refresh code is executed in a different JavaScript environment, an HTML5 web worker, it isn't possible to override or customize the HTTP GET used to refresh the model. Method onGetData is called to process any data returned from an HTTP GET, including the data returned by a worker. This property is ignored if the instance is not a restModel.
mergePolicy enum false localWins A property used only in a rest model to indicate how data is merged. It can be set to 'localWins' or 'remoteWins'. If set to 'localWins', locally stored data will take precedence over remote data; if set as 'remoteWins', remote data will take precedence over local data. The method restModel.mergeData can be overriden to provide a custom merging policy, in which case, this attribute will be ignored. This property is ignored if the instance is not a restModel.
progressIndicator boolean false false A property that indicates whether the application should display a progress indicator widget while executing REST calls.
dependsOn idrefs false n/a List of model ID instances that this model depends on. These will be passed to the constructor for the model. The value of this property is a comma or whitespace separated list of names.
itemCollection boolean false false This model will represent a collection of items. If the data returned from the server is an array then the data will be converted into an object with a field containing the array. The field name can be specified using property 'itemCollectionField'. This property is ignored if the instance is not a restModel.
itemCollectionField string false items This property identifies the model field which will store the items received whenever 'itemCollection' is set to true. If this property is not provided and the model has 'itemCollection' set to true, then the array will be stored in a field called 'items'.
disableNotifications string false n/a This property indicates that data binding events must not be fired for the method names listed or for none of the methods if '*' is specified. Method names are separated by one or more whitespace characters. The default is to always assume a method has changed a model and, therefore, fire off notification events every time it is called.
handleEvents string false message Only for push models. This property can be used to provide a list of event names to listen for, instead of the SSE default 'message'. If interested in listening to multiple events (perhaps including 'message') separate each event name by one or more whitespace characters. For example: 'major minor message'. This property is ignored if the instance is not a pushModel.

Example: html
<script data-instance="itemRepModel" data-type="ItemRepModel" data-url="#{itemModel.href}"
        data-onActive="noRefresh"/>
            
Example: xhtml
<a:model id="itemRepModel" idref="ItemRepModel" url="#{itemModel.href}" onActive="noRefresh"/>


Definition localModel (model.xml)

Defines a prototype for local models. A local model can be persisted using the local storage, but is not connected to a service. It defines some basic methods that are inherited by other kinds of models.

See the type LocalModelBase for a list of methods that can be overriden by applications.

No Properties

Example: (x)html
<script data-model="local">
    var NameModel = function() {
        this.first = "Planet";
        this.last = "Earth";
    };
</script>


Definition restModel (model.xml)

Defines a prototype for REST models. A REST model is connected to a REST service using a URL. This prototype defines default behavior for GET, PUT, POST and DELETE operations. Models are serialized using serialize which uses JSON by default.

See the type RestModelBase for a list of methods that can be overriden by applications.

No Properties

Example: (x)html
<script data-model="rest">
    var ItemModel = function(collection) {
        this.key = "key1";
        this.value = "";
        this.onPutDone = function() {
            collection.get();
        };
    };
</script>


Definition pushModel (model.xml)

Defines a prototype for push models. A push model is connected to a push service using a URL. A push service sends data to a model either on a periodic basis or based on some external event (or a combination of these two). Data received by a push model is automatically deserialized.

See the type PushModelBase for a list of methods that can be overriden by applications.

No Properties

Example: (x)html
<script data-model="push">
    var TickersModel = function() {
        this.tickers = [ "ACME", "EACM", "MEAC", "CMEA" ];
        this.values = [ 0.0, 0.0, 0.0, 0.0 ];
    };
</script>


Definition socketModel (model.xml)

Defines a prototype for socket models. A socket model is connected to a socket service using a URL with a 'ws:' prefix. A socket service can send data to or receive data from a socket model asynchrounsly. As in other model kinds, data is automatically serialized and deserialized.

See the type SocketModelBase for a list of methods that can be overriden by applications.

No Properties

Example: (x)html
<script data-model="socket">
    var ChatModel = function() {
        this.message = "";
        this.user = "";
        this.send = function() {
            this.send(this.user + ":" + this.message);
            this.message = "";
        };
    };
</script>


Definition node (node.xml)

Base node type in a Project Avatar tree. All nodes in a tree inherit from this node. This is an abstract node of which there are no instances.
No Properties

Definition uiNode (node.xml)

A user interface node. All nodes related to the user interface (UI) inherit from this node. The properties defined in this node are available to all UI nodes in the tree. This is an abstract node of which there are no instances.
Properties:

Name Type i18n Default Description
visible exprR false n/a A boolean EL expression that controls the visibility of a UI node.
enabled exprR false n/a A boolean EL expression that controls the whether this button is enabled or not.
class string false n/a The CSS class for this node.
title string true n/a The tooltip for the node.
controller idref false n/a ID of controller for this node. Enables node to send event notifications to a controller.

Definition text (node.xml)

UI node that can output a constant text string. Automatically inserted by the Project Avatar Compiler for every text node that does not contain an EL expression. See also output.
Properties:

Name Type i18n Default Description
value string false n/a Value of text node to output.

Example: (x)html

                Some constant text
            


Definition output (node.xml)

UI node that can output text based on an EL expression. Automatically inserted by the Project Avatar Compiler for every text node containing one or more EL expressions.
Properties:

Name Type i18n Default Description
value exprR false n/a Value of text node as an EL expression.

Example: (x)html

                #{name.first}
                Hello #{name.first} #{name.last}
                #{add.left} + #{add.right} = #{add.left + add.right}
            


Definition buttongroup (node.xml)

Groups logically related buttons together with some special formatting. See also button.
No Properties

Example: html
<div data-widget="buttongroup">
    <button data-widget="button" onclick="...">Deploy</button>
    <button data-widget="button" onclick="...">Cancel</button>
</div>
Example: xhtml
<a:buttongroup>
    <a:button onclick="...">Deploy</a:button>
    <a:button onclick="...">Cancel</a:button>
</a:buttongroup>


Definition stamps (node.xml)

Aggregates a group of stamps. See stamp for more information.
No Properties

Definition stamp (node.xml)

A stamp is comprised of a prompt (a string) and some associated text (an EL expression). It is typically formatted as a single unit. Stamps can be grouped using stamps.
Properties:

Name Type i18n Default Description
prompt string true n/a The prompt for this stamp.
text exprR false n/a The associated text for this prompt as an EL expression.

Example: html
<div data-widget="stamps">
    <div data-widget="stamp" data-prompt="Logged in as" data-text="#{sm.username}"></div>
    <div data-widget="stamp" data-prompt="Connected to" data-text="#{sm.hostname}"></div>
</div>
Example: xhtml
<a:stamps>
    <a:stamp prompt="Logged in as" text="#{sm.username}"></a:stamp>
    <a:stamp prompt="Connected to" text="#{sm.hostname}"></a:stamp>
</a:stamps>


Definition css (node.xml)

A special node that can be used to insert a CSS stylesheet.
Properties:

Name Type i18n Default Description
href string false n/a URL to CSS stylesheet.
priority double false 1.0 Loading priority versus other stylesheets. The bigger the number the higher the priority.

Definition script (node.xml)

A special node that can be used to insert an external script.
Properties:

Name Type i18n Default Description
src string false n/a URL of external script to load.
priority double false 1.0 Loading priority versus other scripts. The bigger the number the higher the priority.
code function false n/a Name of function in script to call upon loading.

Simple widget to insert a link to a destination.
Properties:

Name Type i18n Default Description
href exprR false n/a An EL expression that evaluates to a URL.
label exprR false n/a Text to display for link.
target string false n/a Specifies where the linked document is to be loaded.

Definition arraysEqual (node.xml)

TODO DOC

Definition view (jquery/node-jquery.xml)

The view node is the top level node in the UI node definitions. Each node displayed in the UI is a child of the view node. The source HTML file does not need to have a view node. In such a case the name of the HTML source file is assumed as the id of the view node. Note that in case of an XHTML source file the view node is required.
A Project Avatar application can consist of several view nodes. Each view can be accessed with a hash tag which is the id of the view node. Hence the id of the view node is required.
Properties:

Name Type i18n Default Description
title string true n/a The title of the view. This string is used as the value of the view title displayed in the browser.
main boolean false n/a A boolean that indicates whether this is the main landing view of the application. If a Project Avatar application has multiple views, then at least one of the views should be marked with main=true.
controller idref false n/a View nodes report the following events: onShow, onHide.

Example: html
<div data-widget="view" title="Home View" id="home" data-main="true">
    <h1>Welcome Home!!</h1>
</div>
<div data-widget="view" title="Customers" id="customers" data-main="false">
    <h1>Customers</h1>
</div>
Example: xhtml
<a:view title="Home View" id="home" main="true">
    <h1>Welcome Home!!</h1>
</a:view>
<a:view title="Customers" id="customers" main="false">
    <h1>Customers</h1>
</a:view>


Definition button (jquery/node-jquery.xml)

A simple button widget. The widget uses the jquery-ui button widget to render a button.
Properties:

Name Type i18n Default Description
label string true n/a The label for the button.
action expr false n/a A bound action function that will be called when the button is clicked. The function would be a model function that will be called and model updated after the function is called.
href expr false n/a If href is provided then the button acts as a navigation link. Clicking on the button will navigate to the view indicated by the href value.
type string false button The type of the button. Value can be "button", "submit" or "reset".
enabled exprR false n/a Disables the button if set to false. The property can be bound to a model.

Example: html
<button data-widget="button" data-action="#{alert('Save button clicked')}">Save</button>
<button data-widget="button" data-action="#{model.sayCut()}">Cut</button>
<button data-href="#table/namedetails">Name Details</button>
Example: xhtml
<a:button action="#{alert('Save button clicked')}">Save</a:button>
<a:button action="#{model.sayCut()}">Cut</a:button>
<a:button href="#table/namedetails">Name Details</a:button>


A widget for creating drop down menus. The widget can be a button, link, or span.
Properties:

Name Type i18n Default Description
label string true n/a The label for the drop down widget.
type string false button The html type of drop down widget. Legal values are "button", "span", or "a".
action expr false n/a A bound action function that will be called when the drop down widget is clicked.

An item element for the drop down widget. This element must be a child of the dropdown widget.
Properties:

Name Type i18n Default Description
label string true n/a The label for the drop down item widget.
action expr false n/a A bound action function that will be called when the drop down item is clicked.

Definition form (jquery/node-jquery.xml)

A Project Avatar widget that represents an HTML form. The form widget makes sure that all associated children widget models are updated and any bound actions are called without submitting the form.
Properties:

Name Type i18n Default Description
method string false The method used for form submission.
action expr false n/a A model function bound to this form's submission. When the form is submitted, this bound action will be called. The form is submitted.
onsubmit expr false n/a A model function bound bofore the form's submission.
url string false n/a If specified, this will set the action property of the form to the URL furnished. This will also submit the form to the URL.
enctype string false application/x-www-form-urlencoded This specifies how the form-data should be encoded when submitting it to the server (only for method="post"). Values can be one of "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain".

Example: html
<form data-widget="form" data-method="POST" data-url="j_security_check">
    <input data-widget="input" data-label="User Name: " data-name="j_username"
           data-value="#{loginModel.name}" size="20">
    <input data-widget="input" data-label="Password: " data-name="j_password"
           data-type="password" size="20">
    <button data-widget="button" data-type="submit">Log In</button>
</form>
Example: xhtml
<a:form method="POST" url="j_security_check">
    <a:input label="User Name: " name="j_username" value="#{loginModel.name}" size="20"/>
    <a:input label="Password: " name="j_password" type="password" size="20"/>
    <a:button type="submit">Log In</button>
</a:form>


Definition textBox (jquery/node-jquery.xml)

An input widget with an associated label. This input widget supports data binding.
Properties:

Name Type i18n Default Description
label string true n/a The label associated with this input widget. The label will be rendered as a <label> tag associated with this input.
value exprLR false n/a A bound property in a model that will be used to set/get the value of the input widget. The bound model property will be updated when the value in the widget changes.
name string false n/a The name attribute for this input widget.
type string false text A valid HTML type for this input widget.

Example: html
<input data-widget="textBox" data-label="Username: " data-value="#{chatModel.user}"/>
Example: xhtml
<a:textBox label="Username: " value="#{chatModel.user}"/>


Definition input (jquery/node-jquery.xml)

An input widget with complete data-binding support. The input supports the HTML type attribute and can generate an associated label if one is provided.
Properties:

Name Type i18n Default Description
label string true n/a The label for the input.
value exprLR false n/a A bound model property that will be used to set/get the value of the input when the widget is displayed or changed.
name string false n/a The name of the input widget.
type string false text The type attribute for the input widget. Eg: text, password, checkbox, radio
size int false 10 This is an integer value which specifies the width, in characters, of the input element.

Example: html
<input data-widget="input" data-label="Port" size="5" value="#{model.port}"/>
Example: xhtml
<a:input label="Port" size="5" value="#{model.port}"/>


Definition textarea (jquery/node-jquery.xml)

A simple textarea widget with and associated label and a bound value.
Properties:

Name Type i18n Default Description
label string true n/a The label for the textarea widget.
value exprLR false n/a A bound model property that will be updated when the value in the textarea changes. This property will also be used to set the initial value for the textarea.

Example: html
<textarea data-widget="textarea" data-label="Address: " data-value="#{person.address}"></textarea>
Example: xhtml
<a:textarea label="Address: " value="#{person.address}"/>


Definition slider (jquery/node-jquery.xml)

A widget that uses the jquery-ui slider widget to create a bound avatar slider widget with an associated label.
Properties:

Name Type i18n Default Description
label string true n/a The label associated with this widget
value exprLR false n/a A model property that will be bound to this widget's value. The value will be updated when the slider value changes. The property will also be used to set the initial value.
min int false n/a The minimum value for the slider.
max int false n/a The maximum value for the slider.
step int false n/a The size or amount of each interval or step the slider takes between min and max values.

Example: html
<div data-widget="slider" data-label="Price Range ($75 - $500): " 
    data-min="75" data-max="500" data-step="5"></div>
Example: xhtml
<a:slider label="Price Range ($75 - $500): " min="75" max="500" step="5"/>


Definition outerHtml (jquery/node-jquery.xml)

TODO DOC

Definition group (jquery/node-jquery.xml)

A widget to render a fieldset HTML tag in an application.
Properties:

Name Type i18n Default Description
label string true n/a The label will be used to generate a legend tag.
name string false n/a The name for this widget. This will be set as the name attribute on the fieldset.

Example: html
<fieldset data-widget="group" data-label="Personalia:">
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
</fieldset>
Example: xhtml
<a:group label="Personalia:">
    Name: <a:input type="text" size="30"/><br>
    Email: <a:input type="text" size="30"/><br>
    Date of birth: <a:input type="text" size="10"/>
</a:group>


Definition radiobutton (jquery/node-jquery.xml)

A radio button widget with an associated label and a bound value.
Properties:

Name Type i18n Default Description
label string true n/a The label for the input radio button.
value exprLR false n/a A model property that will be bound to this widget's value. The value will be updated when the widget value changes. The property will also be used to set the initial value.

Example: html
<fieldset data-widget="group" name="group1" data-label="radio button test">
    <input data-widget="radiobutton" data-label="radio button 1" data-value="#{form.radioValue}"/>
    <input data-widget="radiobutton" data-label="radio button 2" data-value="#{form.radioValue}"/>
</fieldset>
Example: xhtml
<a:group name="group1" label="radio button test">
    <a:radiobutton label="radio button 1" value="#{form.radioValue}"/>
    <a:radiobutton label="radio button 2" value="#{form.radioValue}"/>
</a:group>


Definition checkbox (jquery/node-jquery.xml)

A checkbox widget with an associated label and a bound value.
Properties:

Name Type i18n Default Description
label string true n/a The label for this checkbox widget.
value exprLR false n/a A model property that will be bound to this widget's value. The value will be updated when the widget value changes. The property will also be used to set the initial value for the widget.

Example: html
<fieldset data-widget="group" data-label="check box text">
    <input data-widget="checkbox" data-label="check box" data-value="#{form.checkbox_value}"/>
</fieldset>
Example: xhtml
<a:group label="check box text">
    <a:checkbox label="check box" value="#{form.checkbox_value}"/>
</a:group>


Definition collection (collection.xml)

TODO DOC
Properties:

Name Type i18n Default Description
items exprLR false n/a TODO DOC

Definition collectionItem (collection.xml)

TODO DOC
Properties:

Name Type i18n Default Description
exclude exprR false n/a TODO DOC

Definition controller (controller.xml)

A controller is an object that can receive and process events from a UI node. This definition is used to instantiate controllers from a certain type. Controller types are defined using uiController. Like models, every controller must be uniquely named using an 'id' property. Controllers are associated with UI nodes using the special 'controller' attribute (see example).
Properties:

Name Type i18n Default Description
idref idref false n/a ID of the element that defines the constructor function for this controller's type.
dependsOn idrefs false n/a List of model id instances that this controller depends on. These will be passed to the constructor for the controller. List can be comma or space separated.

Example: html

<script id="vc" data-controller-type="ViewController"/>
<div data-widget="view" id="home" data-title="controller World" data-controller="vc">
  ...
</div>
            
Example: xhtml

<a:controller id="vc" idref="ViewController"/>
<a:view id="home" title="controller World" controller="vc">
  ...
</a:view>


Definition uiController (controller.xml)

Used to define a controller type, akin to a model type. Model instances are created using controller. If unspecified, the ID of a controller type is derived from the name of the corresponding JS variable.
No Properties

Example: html
<script data-controller="ViewController">
  var ViewController = function() {
      this.onShow = function(node, instances) {
          alert("ViewController.onShow '" + node.id + "'");
      }
  };
</script>
Example: xhtml
<a:uiController>
  var ViewController = function() {
      this.onShow = function(node, instances) {
          alert("ViewController.onShow '" + node.id + "'");
      }
  };
</a:uiController>


Definition chart (jquery/charts.xml)

The chart widget is a plugin based widget use to generate various charts. The widget uses the jqPlot plugin. When you use the widget in an application the required plugin files are automatically downloaded. The various types of plots, axis and series can be specified via child widgets of the chart widget. The possible child widgets are barsplot, axis and series, pointLabels and legend.
Properties:

Name Type i18n Default Description
width string false n/a The CSS width for the chart container.
height string false n/a The CSS height for the chart container.
selecteditem exprLR false n/a The selectedItem model variable which will contain data about the selected item. The variable bound to the selectedItem will contain the data about the clicked chart item. This assumes that the onclick property is also bound.
onclick expr false n/a The model binding for the click event on a chart. User can specify a function for this which will be called when an item in the displayed chart is clicked. It is assumed the the selectedItem is also bound as the selectedItem will contain the data about the clicked item. This is needed only of the data for the clicked item is needed.

Example: html
<div data-widget="chart" title="Popularity Index" class="barChartWidget" 
    onclick="#{barChartModel.onItemClick()}"
    data-selecteditem="#{barChartModel.selectedItem}">
   <div data-widget="barsplot" data-direction="vertical"></div>
   <div data-widget="axis" data-name="x" data-labelsExpr="#{barChartModel.xaxisLabels}"></div>
   <div data-widget="pointLabels"></div>
   <div data-widget="series" data-series="#{barChartModel.series}"></div>
</div>
Example: xhtml
<a:chart title="Popularity Index" class="barChartWidget" 
    onclick="#{barChartModel.onItemClick()}"
    selecteditem="#{barChartModel.selectedItem}">
   <a:barsplot data-direction="vertical"/>
   <a:axis data-name="x" data-labelsExpr="#{barChartModel.xaxisLabels}"/>
   <a:pointLabels/>
   <a:series data-series="#{barChartModel.series}"/>
</a:chart>


Definition plot (jquery/charts.xml)

This a base widget for all available plots in jqPlot. Please refer the the following documentation for more information on the plots available in jqPlot. In order to use a new plot, one needs to create a plot widget extending from this plot widget and use this as the child of the chart widget. For an example, take a look at the barsplot widget.
No Properties

Definition barsplot (jquery/charts.xml)

The barsplot widget is used as a child of the chart widget. This renders a horizontal or a vertical bar plot. It uses the jqplot.barRendere plugin to render the chart. When the barsplot is specified as the child of a chart widget, the barRenderer plugin is automatically downloaded to be used in the application.
Properties:

Name Type i18n Default Description
direction string false horizontal The direction of the bars. The value can be horizontal or vertical.
maxBarSize int false n/a The maximum width of the bars displayed in the chart.

Example: html
<div data-widget="barsplot" data-direction="vertical"></div>
Example: xhtml
<a:barsplot direction="vertical"></a:barsplot>


Definition axis (jquery/charts.xml)

The axis widget is used a child of the chart widget. It defines the axis used for the chart. A chart can have upto four axes: each defined by a name. The jqPlot will basically use the CategoryAxisRenderer plugin to render the axis.
Properties:

Name Type i18n Default Description
name string false n/a The name of axis. Eg: x, y x1 and y1
labelsExpr exprR false n/a The bound model variable that contains the labels for the axis. The labels are usually specified as an array of string values.
labels string false n/a This represents a JSON string containing the labels for the axis.
title string false n/a The title for the axis.
min int false n/a The minimum value of the axis in data units.
max int false n/a The maximum value of the axis in data units.
useRenderer boolean false true A boolean to indicate whether the render should be used to figure out the tick marks. Set this to false if you do not want to show the chart values on the axis and instead show the range of values.

Example: html
<div data-widget="axis" data-name="x" data-labelsExpr="#{barChartModel.xaxisLabels}"></div>
Example: xhtml
<a:axis name="x" labelsExpr="#{barChartModel.xaxisLabels}"></a:axis>


Definition series (jquery/charts.xml)

The series is used as a child widget for the chart widget. The series defines a series that will be displayed on the chart. A chart can have multiple series each defined by its own series widget.
Properties:

Name Type i18n Default Description
model exprR false n/a A bound model that has a values property which is an array of data. This will be displayed in the chart.
series exprR false n/a A bound model property that contains an array of data to be displayed in the chart.

Example: html
<div data-widget="series" data-series="#{barChartModel.series}"></div>
Example: xhtml
<a:series data-series="#{barChartModel.series}"/>


Definition pointLabels (jquery/charts.xml)

The pointLabels widget is used as a child widget of the chart widget. If used then point labels are displayed in the chart indicating the value of the chart at the point. The widget basically uses the pointLabels plugin to render the point labels on the chart.
Properties:

Name Type i18n Default Description
location string false n/a The compass location where to position the label around the point. ‘n’, ‘ne’, ‘e’, ‘se’, ‘s’, ‘sw’, ‘w’, ‘nw’.
edgeTolerance string false n/a Number of pixels that the label must be away from an axis boundary in order to be drawn. Negative values will allow overlap with the grid boundaries.

Example: html
<div data-widget="pointLabels" data-location="ne" data-edgeToTolerance="10"></div>
Example: xhtml
<a:pointLabels location="ne" edgeToTolerance="10"/>


Definition legend (jquery/charts.xml)

The legend widget is used as a child of the chart widget. The widget indicates that a legend for the plotted chart will be displayed.
Properties:

Name Type i18n Default Description
location string false ne The placement of the legend. one of the compass directions: nw, n, ne, e, se, s, sw, w.
placement string false outsideGrid This determines whether the legend is placed inside the grid or outside it. "insideGrid" places legend inside the grid area of the plot. "outsideGrid" places the legend outside the grid but inside the plot container.

Example: html
<div data-widget="legend" data-placement="insideGrid"></div>
Example: xhtml
<a:legend location="insideGrid"></div>


Definition contentPane (jquery/layout.xml)

The contentPane widget is used as a child container widget for other layout widgets such as stackContainer, tabContainer and the borderContainer.
Properties:

Name Type i18n Default Description
title string false n/a The title of the pane. The title becomes the tab label when the contentPane is used within a tabContainer. The title becomes the view title when the content pane is used as a stackContainer child.
href string false n/a The URL from which to load the contents of the pane. The contents are loaded using an AJAX request.
disabled boolean false false A boolean indicating whether the content pane is enabled/disabled.
iconClass string false n/a The iconClass represents the icon associated with this content pane.
resizable boolean false true If true (default), this pane can be resized. This property is used in a border container.
slidable boolean false true If true (default), this pane can slide over its adjacent panes when closed and opened. This property is used in a border container.
closable boolean false true If true (default), this pane can be closed by clicking on its splitter. This property is used in a border container.
minSize int false n/a The minimum size when resizing a pane.
maxSize int false n/a The maximum size when resizing a pane.
width string false n/a The CSS width of this content pane.
height string false n/a The CSS height of this content pane.
region string false n/a The region is used when this content pane is a child of borderContainer widget. The Value must be one of the following strings: "center", "top", "bottom", "left", "right"
selected boolean false false The property is used when the content pane is used as a child of a container tab such as TabContainer. The property determines if the content pane will be shown selected or as the default child.

Example: html
<div data-widget="tabContainer" title="Simple Tabs">
    <div data-widget="contentPane" id="tab1" title="Hello1 Sample" data-iconClass="plusIcon">
        <h3>Tab 1</h3>
    </div>
</div>
Example: xhtml
<a:tabContainer title="Simple Tabs">
    <a:contentPane id="tab1" title="Hello1 Sample" iconClass="plusIcon">
        <h3>Tab 1</h3>
    </a:contentPane>
</a:tabContainer>


Definition borderContainer (jquery/layout.xml)

The borderContainer widget uses the jquery.layout plugin to display a border layout widget. The layout can have content pane widgets indicating the various sections/regions of the border layout. The regions can be top, left, bottom, right and center.
Properties:

Name Type i18n Default Description
region string false n/a Optional. Used when the this control is a child of borderContainer. Value must be one of the following strings: "center", "top", "bottom", "left", "right"
width string false n/a The CSS width of the layout region.
height string false n/a The CSS height of the layout region.
resizable boolean false true If true, then the panes in a border containe can be resized. This property can be overriden by setting the same property on each child pane. Default is true.
slidable boolean false true If true, the panes in a border container can slide over adjacent panes when closed. This property can be overriden by setting the same property on a child pane. Default is true.
splitterWidth int false 5 The width of the splitters between two panes. The splitter bar is used to drag the panes and contains a close button (if closable is true) to close and open the pane. Default is true.
onResize expr false n/a A function binding that will be called when a pane is resized. The function will set a parameter resizeState that contains the name and state of the pane that has been resized. Eg: data-onResize="#{model.onresize(this.resizeState)}"
minSize int false n/a The minimum size when resizing a pane. This property can be overriden by setting the same property for each content pane.
maxSize int false n/a The maximum size when resizing a pane. This property can be overriden by setting the same property for each content pane.

Example: html
<div data-widget="borderContainer" id="bc1" data-width="85%" data-height="300px">
   <div data-widget="contentPane" data-region="top">Top Text</div>
   <div data-widget="contentPane" data-region="right">Right Sidebar Text</div>
   <div data-widget="contentPane" data-region="center"><h4>Center Text</h4></div>
   <div data-widget="contentPane" data-region="left" >Left Text</div>
   <div data-widget="contentPane" data-region="bottom">Bottom Text</div>
</div>
Example: xhtml
<a:borderContainer" id="bc1" width="85%" height="300px">
   <a:contentPane region="top">Top Text</a:contentPane>
   <a:contentPane region="right">Right Sidebar Text</a:contentPane>
   <a:contentPane region="center"><h4>Center Text</h4></a:contentPane>
   <a:contentPane region="left" >Left Text</a:contentPane>
   <a:contentPane region="bottom">Bottom Text</a:contentPane>
</a:borderContainer>


Definition tabContainer (jquery/layout.xml)

The tabContainer widget displays a set of tabs. Each tab is an instance of the contentPane. The content pane title will be used as the label for the tabs. The tabContainer also has the ability to dynamically add child tabs by calling the addChild function of the tabContainer. The tabContainer instance is stored in the variable avatarWidget in the data object for the node representing the tabContainer.
Properties:

Name Type i18n Default Description
collapsible boolean false false Boolean value to indicate whether the contents of the tabs are collapsible or not. If set to true, then clicking on tha tab name will collapse the contents of the tab.
error-message string false Error in loading target The error message when jQuery fails to load the tab contents specified via an href property.
open-on-mousover boolean false false If set to true, the tabs will open when the mouse cursor is over the tab name.
sortable boolean false false If set to true, then the tabs will have the ability to be re-ordered. The tab names can be dragged to re-order the tab positions.
instance exprLR false n/a The property target will contain the jQuery tabs instance object on which jQuery tabs methods can be called.
height-style string false content The Controls the height of the tabs widget and each panel. Possible values: "auto": All panels will be set to the height of the tallest panel. "fill": Expand to the available height based on the tabs' parent height. "content": Each panel will be only as tall as its content.

Example: html
<div data-widget="tabContainer" data-collapsible="true">
    <div data-widget="contentPane" title="Tab 1">
        <h3>Tab 1</h3>
    </div>
    <div data-widget="contentPane" title="Tab 2">
        <h3>Tab 2</h3>
    </div>
    <div data-widget="contentPane" title="Tab 3">
        <h3>Tab 3</h3>
    </div>
</div>
Example: xhtml
<a:tabContainer collapsible="true">
    <a:contentPane title="Tab 1">
        <h3>Tab 1</h3>
    </a:contentPane>
    <a:contentPane title="Tab 2">
        <h3>Tab 2</h3>
    </a:contentPane>
    <a:contentPane title="Tab 3">
        <h3>Tab 3</h3>
    </a:contentPane>
</a:contentPane>
Example: html

Adding a child tab programmatically.

this.addTab = function() {
    //assuming the tabContainer id is tab1
    $("#tab1").data("avatarWidget").addChild("New Tab", "<h3>New Tab Data</h3>", true);
}


Definition stackContainer (jquery/layout.xml)

The stackContainer widget acts as a stack of window panes that contain DOM nodes or other widgets. Only one of the windows from the stack is displayed. The window pane displayed is controlled by the hash tag of the URL. The stackContainer can also be used for navigation. Each child window of the stackContainer is an instance of contentPane.
The URL to access a pane is of the form #stackContainer-id/contentPane-id. Hence if you have defined a stackContainer with id="fruits" and you have defined contentPane childe widgets with id as apple and orange, then you can access the child window using the path #fruits/apple and #fruits/oranges respectively for apple and oranges views.
Properties:

Name Type i18n Default Description
id string false n/a The id for this stackContainer object. This id will form the base of the URL navigation scheme for this set of window panes.
selected string false n/a The id of one of the children ContentPanes that will be selected by default when the stack container is displayed in the UI.

Example: html
<div data-widget="stackContainer" id="StackContainer" data-selected="Summary">
    <div data-widget="contentPane" id="Summary" data-title="Summary" data-width="100px" 
        data-height="800px">
        <h2>Summary</h2>
        <a href="#StackContainer/details">Details</a>
        <a href="#StackContainer/namedetails">Name Details</a>
    </div>
    <div data-widget="contentPane" id="details" data-title="details">
        <h1>This is the details view</h1>
    </div>
    <div data-widget="contentPane" id="namedetails" data-title="namedetails">
        <h1>This is the name details view...</h1>
    </div>
</div>
Example: xhtml
<a:stackContainer" id="StackContainer" selected="Summary">
    <a:contentPane" id="Summary" title="Summary" width="100px" height="800px">
        <h2>Summary</h2>
        <a href="#StackContainer/details">Details</a>
        <a href="#StackContainer/namedetails">Name Details</a>
    </a:contentPane>
    <a:contentPane" id="details" title="details">
        <h1>This is the details view</h1>
    </a:contentPane>
    <a:contentPane" id="namedetails" title="namedetails">
        <h1>This is the name details view...</h1>
    </a:contentPane>
</a:stackContainer>


Definition table (jquery/table.xml)

A table widget with values for the cells bound to a model. The table is rendered by Project Avatar runtime and uses the tablesorter plugin for sorting the table. The table widget also needs to specify child column widgets to define the columns in the table.
Properties:

Name Type i18n Default Description
bindModel idref false n/a The name of the model to bind the rowData to. For each row this model will be used to bind the row data from the table model items property.
model exprLR false n/a The bound model for the table widget. The model should contain an items property which is an array of objects. Each object will represent the data for a row.
<script data-model="local" data-instance="tm">
    var TableModel = function() {
        // List of items to be rendered
        this.items = [
            { "number":"12","name":"Jim Kelly","position":"QB","victories":"5"},
            { "number":"34", "name":"Thurman Thomas", "position":"RB", "victories":"4"},
            { "number":"89", "name":"Steve Tasker", "position":"WR", "victories":"3" },
            { "number":"78", "name":"Bruce Smith", "position":"DE", "victories":"2" }
        ];
    }
</script>
height string false n/a The CSS height of the table container DIV.
width string false n/a The CSS width of the table container DIV.

Example: html
<div data-widget="table" data-model="#{tm}" data-props="itemIdentifier:'number', selectedItems:'#{sr}', bindModel:'row'">
   <div data-widget="column" data-name="No.">
       <div data-widget="link" data-label="#{row.number}"
            data-href="#table/details?number=#{row.number}&amp;name=#{row.name}"></div>
   </div>
   <div data-widget="column" data-name="Name">
       <div data-widget="link" data-label="#{row.name}"
            data-href="#table/namedetails?number=#{row.number}&amp;name=#{row.name}&amp;position=#{row.position}"></div>
   </div>
   <div data-widget="column" data-name="Position">
       <tt>#{row.position}</tt>
   </div>
   <div data-widget="column" data-name="Victories" data-editable="true" data-hidden="false">
       <b>#{row.victories}</b>
   </div>
</div>
Example: xhtml
<a:table" model="#{tm}" props="itemIdentifier:'number', selectedItems:'#{sr}', bindModel:'row'">
   <a:column" name="No.">
       <a:link" label="#{row.number}"
            href="#table/details?number=#{row.number}&amp;name=#{row.name}"/>
   </a:column>
   <a:column" name="Name">
       <a:link" label="#{row.name}"
            href="#table/namedetails?number=#{row.number}&amp;name=#{row.name}&amp;position=#{row.position}"/>
   </a:column>
   <a:column" name="Position">
       <tt>#{row.position}</tt>
   </a:column>
   <a:column" name="Victories" editable="true" hidden="false">
       <b>#{row.victories}</b>
   </a:column>
</a:table>


Definition column (jquery/table.xml)

A column widget which is used as a child for the table widget. Each table widget will have child column widgets that will define each column in the table.
Properties:

Name Type i18n Default Description
name string false n/a The label for the column header.

Example: html
<div data-widget="table" data-model="#{tm}" data-props="itemIdentifier:'number', selectedItems:'#{sr}', 
        bindModel:'row'">
   <div data-widget="column" data-name="No.">
       <div data-widget="link" data-label="#{row.number}"
            data-href="#table/details?number=#{row.number}&amp;name=#{row.name}"></div>
   </div>
   <div data-widget="column" data-name="Name">
       <div data-widget="link" data-label="#{row.name}"
            data-href="#table/namedetails?number=#{row.number}&amp;name=#{row.name}&amp;position=#{row.position}"></div>
   </div>
</div>
Example: xhtml
<a:table" model="#{tm}" props="itemIdentifier:'number', selectedItems:'#{sr}', bindModel:'row'">
   <a:column" name="No.">
       <a:link" label="#{row.number}"
            href="#table/details?number=#{row.number}&amp;name=#{row.name}"/>
   </a:column>
   <a:column" name="Name">
       <a:link" label="#{row.name}"
            href="#table/namedetails?number=#{row.number}&amp;name=#{row.name}&amp;position=#{row.position}"/>
   </a:column>
</a:table>


Definition tree (jquery/tree.xml)

A tree widget with support for bindings. The tree widget uses the dynatree plugin to render the tree. Each tree widget consists of atleast one treeNode widget.
Properties:

Name Type i18n Default Description
showRoot boolean false true If true, the root of the node will be visible.
selectedItems exprLR false n/a A model property that will be bound to tree's selected node item. When multiple selection on the tree is enabled then this bound property will contain an array of the selected tree node items.
selectedItem exprLR false n/a A model property that will be bound to tree's selected node item. When single selection on the tree is enabled then this bound property will contain the selected tree node item.
action expr false n/a A bound model function that will be called when ever a node on the tree is clicked.
showCheckboxes boolean false false A boolean property to indicate if checkboxes are to be shown in the tree nodes.
imagePath String false n/a Path for icon images

Example: html
<div data-widget="tree" id="t1" data-props="showRoot:'false', openOnClick:'true', selectedItems:'#{selt1.items}'">
    <div data-widget="treeNode" data-children="#{tm.items}"
         data-props="labelProperty:'label', childrenProperty:'items'"></div>
</div>
Example: xhtml
<a:tree id="t1" showRoot='false' openOnClick='true' selectedItems='#{selt1.items}'>
    <a:treeNode children="#{tm.items}" labelProperty='label' childrenProperty='items'"/>
</a:tree>


Definition treeNode (jquery/tree.xml)

A treeNode represents a node in a tree widget. Each treeNode can contain other tree nodes. A treeNode can have a label and data bindings to values for generating the tree from a model. Developers can also create static trees by specifying the treeNodes in the (X)HTML source files. Each tree node represents a single node in the tree.
Properties:

Name Type i18n Default Description
label string true n/a The label for the treeNode.
children exprLR false n/a A model property that will be bound to tree's children. The property should be an array of objects with an id, label and items. The children property is used to render child treeNodes if the items has more children.
<script data-model="local" id="TreeModel">
    var TreeModel = function() {
        this.items = [
            { id: '1', label: 'One', items:
                    [ { id: '1_1', label: 'One-One' }, { id: '1_2', label: 'One-Two' } ]
            }
        ];
    };
</script>
... 
<div data-widget="treeNode" data-children="#{tm.items}"
    data-props="labelProperty:'label', childrenProperty:'items'"></div>
item exprLR false n/a A bound model property representing this tree node's item. This implies that the treeNode represents a single treeNode. The model property is queried and if the item has children then corresponding children nodes are rendered.
<script data-model="local" id="TreeModel">
    var TreeModel = function() {
        this.id = "root",
        this.label = "Chapters",
        this.items = [
            { id: '1', label: 'One', items:
                    [ { id: '1_1', label: 'One-One' }, { id: '1_2', label: 'One-Two' } ]
            }
        ];
    };
</script>
...
<script data-type="TreeModel" data-instance="tm2"></script>
<div data-widget="treeNode" data-item="#{tm2}"
    data-props="labelProperty:'label', childrenProperty:'items'"></div>
model exprLR false n/a The bound model for the tree. Developers using a bound model will also have to specify which property in the model represents the children of the treeNode.
<div data-widget="treeNode" data-label="Users" 
    data-model="#{users}" data-children="#{users.users}"></div>
idProperty string false id The property in the bound model property that should be used to get the ID of an item.
labelProperty string false label The property in the bound model property that should be used to get the label for the item.
childrenProperty string false items The property in the bound model property that should be used to query the children of this treeNode.
iconProperty string false icon

Example: html
<div data-widget="tree" id="t6">
    <div data-widget="treeNode" data-label="Accounts">
        <div data-widget="treeNode" data-label="Users" data-model="#{users}" data-children="#{users.users}"></div>
        <div data-widget="treeNode" data-label="Groups" data-model="#{groups}" data-children="#{groups.groups}"
             data-props="idProperty:'name', labelProperty:'name'"></div>
    </div>
</div>
Example: xhtml
<a:tree id="t6">
    <a:treeNode label="Accounts">
        <a:treeNode label="Users" model="#{users}" children="#{users.users}"/>
        <a:treeNode label="Groups" model="#{groups}" children="#{groups.groups}"
             idProperty='name' labelProperty='name'/>
    </a:treeNode
</a:tree>


Definition switchTo (user.xml)

Global function used for navigation between Project Avatar views. Typically used within EL expressions.

Example: html

<button data-widget="button" data-action="#{a:switchTo('saveview')}"/>
            


Definition seq (user.xml)

Global function that evaluates two expressions in sequence. Typically used within EL expressions.

Example: html

<button onclick="#{a:seq(ch.login(), a:switchTo('chat'))}" type="submit">Login</button>
            


Definition definition (definition.xml)

A node that can be used to define other Project Avatar nodes.
Properties:

Name Type i18n Default Description
type enum false internal The type of this definition.
extends idref false n/a A reference to another definition extended by this one. Properties from a base definition are inherited.
export boolean false false A boolean value controlling whether this definition should be exported in the module in which it is defined or not.
abstract boolean false false A boolean value indicating if the definition is abstract.

Definition getAvatar (internal.xml)

Global JS function that returns a reference to the Project Avatar object.

Definition getLocation (internal.xml)

Global JS function that retuns a reference to the global location object.

Definition log (internal.xml)

Global JS function that can be used to log a message to the console.

Definition nodeById (jquery/common-jquery.xml)

Global JS function that returns the jQuery object representing the DOM node with the specified id.

Example: javascript
org_glassfish_avatar.nodeById("test").hide();


Definition widgetById (jquery/common-jquery.xml)

Global JS function that returns the widget associated with the specified id. Currently in jQuery, the function returns the value returned by nodeById.

Example: javascript
org_glassfish_avatar.nodeById("submitButton").hide();


Definition toggleClass (jquery/common-jquery.xml)

A global JS function that toggles the specified class on the specified node. It takes three parameters: the DOM node (string or jQuery object), the class name to be toggled and the condition for adding or removing the class. The class will be added if the condition is true and vice versa.

Example: model javascript
org_glassfish_avatar.toggleClass("#test", "hide", this.values.length>0);


Definition addClass (jquery/common-jquery.xml)

A global JS function used to add a CSS class to a DOM node. The function expects the DOM node and the class name as its two parameters.

Example: model javascript
org_glassfish_avatar.addClass("#test", "hide");


Definition removeClass (jquery/common-jquery.xml)

A global JS function that removes a specified CSS class from a DOM node. The function expects the DOM node and the class name as its two parameters.

Example: model javascript
org_glassfish_avatar.removeClass("#test", "hide");


Definition setWidgetAttrById (jquery/common-jquery.xml)

An internal JS function to set an attribute on a widget. It uses the jQuery.attr function to set the attribute value.

Definition removeWidgetById (jquery/common-jquery.xml)

An internal JS function to remove the matched element from the DOM. The element will be matched based on the id attribute. Internal it calls the jQuery remove function to remove the element.

Definition getAttr (jquery/common-jquery.xml)

An internal JS function to get the attribute from a DOM element. The function uses the jQuery attr function. The DOM element is accessed based on the id of the element.

Definition setAttr (jquery/common-jquery.xml)

An internal JS function to set an attribute value on a DOM element. The function uses the jQuery attr function. The DOM element is accessed based on the id of the element.

Definition onEvent (jquery/common-jquery.xml)

An internal JS function to bind an event to a DOM element. The DOM element is accessed based on the element ID. The function expects an event name and handle function which will be called when the event occurs. The function uses the jQuery bind function to setup the binding.

Definition xhrReloadOnLogin (jquery/common-jquery.xml)

An internal JS function that is invoked on a successful form based login.

Definition xhrGet (jquery/common-jquery.xml)

A global JS function used to invoke a GET request on a server. The function uses the jQuery $.ajax method to invoke the GET request.

Example: model javascript

org_glassfish_avatar.xhrGet(
    '/server/action', // url
    {
        'Accept': 'application/json'
    }, // the headers
    function(data) {
        $('successDiv').text(data);
    },// success function
    function(error) {
        $('errorDiv').text(error);
    }, // error function
    false // sync
);
            


Definition xhrPut (jquery/common-jquery.xml)

A global JS function to invoke an AJAX PUT request on the server.

Example: model javascript

org_glassfish_avatar.xhrPut(
    '/server/action', // url
    {
        'Accept': 'application/json'
    }, // the headers
    {
        name: 'Planet',
        age: '4.54 ± 0.05 billion years'
    }, // the data
    function(data) {
        $('successDiv').text(data);
    },// success function
    function(error) {
        $('errorDiv').text(error);
    }, // error function
    false // sync
);
            


Definition xhrPost (jquery/common-jquery.xml)

A global JS function to invoke an AJAX POST request on the server.

Example: html

org_glassfish_avatar.xhrPost(
    '/server/action', // url
    {
        'Accept': 'application/json'
    }, // the headers
    {
        name: 'Planet',
        age: '4.54 ± 0.05 billion years'
    }, // the data
    function(data) {
        $('successDiv').text(data);
    },// success function
    function(error) {
        $('errorDiv').text(error);
    }, // error function
    false // sync
);
            


Definition xhrDelete (jquery/common-jquery.xml)

A global JS function to invoke an AJAX DELETE request on the server.

Example: model javascript

org_glassfish_avatar.xhrDelete(
    '/server/action', // url
    {
        'Accept': 'application/json'
    }, // the headers
    function(data) {
        $('successDiv').text(data);
    },// success function
    function(error) {
        $('errorDiv').text(error);
    }, // error function
    false // sync
);