ui:list-item-renderer

Purpose

Represents a prototype-based list item renderer which is responsible for turning the data into a form that can be displayed by the ui:list-view element. Refer to the topics entitled List Item Renderer, Prototype and Client-side templates for more information.

Note:

The use of XForms elements inside ui:list-item-renderer is not supported and will result in undefined behavior.

Contained by

Styles

The styles on the ui:list-item-renderer element are used as the styles on the root element of all item instances created from that renderer. As the instances can be placed anywhere in the page it is necessary to protect them from inheriting the wrong styles. The mcs-mobility property indicates whether the element is moved from one place to another using client-side scripting, and allows authors to control inheritance of styles. Refer to theme_css_prop.html#mcs-mobility for more information.

Each item is bound to an anonymous layout container in order to prevent page authors from using the mcs-container property to target containers outside the scope of the renderer.

The following styles apply to ui:list-item-renderer by default.

ui|list-item-renderer {
  mcs-mobility: mobile;
}

Attribute groups

Attributes

Attribute Description Type Default Options Use
uses The list of component ids that are used from within the renderer and need to be made available during instance construction. xs:IDREFS     optional 

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:mcs="http://www.volantis.com/xmlns/2006/01/xdime/mcs"
  xmlns:json="http://www.volantis.com/xmlns/2009/07/json"
  xmlns:ui="http://www.volantis.com/xmlns/2009/07/cf2/ui"
  xmlns:cf2="http://www.volantis.com/xmlns/2009/07/cf2"
  xmlns:cst="http://www.volantis.com/xmlns/2009/07/cf2/template">
  <head>
    <title>List View Example</title>
    <style type="text/css">
      #items {
        background-color: blue;
      }
      #items::mcs-cell {
        background-color: green;
        border: 3px solid black;
        width: 100px;
        height: 60px;
        display: inline-block;
      }
      ui|button {
        padding: 1px 2px 1px 2px;
        margin-right: 2px;
        font-weight: bolder;
        color: black;
        border: 0px;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div>
      <ui:list-view id="items" loop="true">
        <ui:list-cell-layout max-window-size="3"/>
        <ui:list-item-renderer id="native-renderer">
          <div>N:<cst:value path="item.title"/></div>
          <div>A:<cst:value path="item.address"/></div>
          <div>Idx:<cst:value path="index"/></div>
        </ui:list-item-renderer>
        <ui:list-model>
          <json:object>
            <json:property name="title">
              <json:string>Name1</json:string>
            </json:property>
            <json:property name="address">
              <json:string>address1</json:string>
            </json:property>
          </json:object>
          <json:object>
            <json:property name="title">
              <json:string>Name2</json:string>
            </json:property>
            <json:property name="address">
              <json:string>address2</json:string>
            </json:property>
          </json:object>
          <json:object>
            <json:property name="title">
              <json:string>Name3</json:string>
            </json:property>
            <json:property name="address">
              <json:string>address3</json:string>
            </json:property>
          </json:object>
          <json:object>
            <json:property name="title">
              <json:string>Name4</json:string>
            </json:property>
            <json:property name="address">
              <json:string>address4</json:string>
            </json:property>
          </json:object>
          <json:object>
            <json:property name="title">
              <json:string>Name5</json:string>
            </json:property>
            <json:property name="address">
              <json:string>address5</json:string>
            </json:property>
          </json:object>
        </ui:list-model>
      </ui:list-view>
      <ui:button id="previous" class="button">
        <span>&lt;&lt;</span>
        <cf2:on event="cf2:activate" do="items#previous"/>
      </ui:button>
      <ui:button id="next" class="button">
        <span title="Previous">&gt;&gt;</span>
        <cf2:on event="cf2:activate" do="items#next"/>
      </ui:button>
    </div>
  </body>
</html>

Related topics