ui:list-view

Purpose

Displays a list of items provided by a list view renderer. Refer to the topic entitled List View for further information.

Contains

Styles

The ui:list-view element supports all the common style properties that apply to block elements. The individual cells can be styled using the ::mcs:cell pseudo-element. By default:

ui|list-view {
  display: block;
  overflow: hidden;
}
ui|list-view::mcs-cell {
  display: block;
}

Attribute groups

Attributes

Attribute Description Type Default Options Use
layout The explicit reference to the list cell layout factory. If the attribute is not specified and there is a single nested component that implements the ui:ListCellLayoutFactoryAPI type, then it will be used as the list cell layout factory. It is an error if there is more than one nested component that implements the ui:ListCellLayoutFactoryAPI type. xs:NCName     optional 
loop Specifies the initial value of the loop property. The property indicates whether the items should be displayed in the loop. xs:boolean  false  true, false optional
model The explicit reference to the list model. If the attribute is not specified and there is a single nested component that implements the ui:ListModelAPI type, then it will be used as the list model. It is an error if there is more than one nested component that implements the ui:ListModelAPI type. xs:NCName     optional 
renderer The explicit reference to the list item renderer. If the attribute is not specified and there is a single nested component that implements the ui:ListItemRendererAPI type, then it will be used as the list item renderer. It is an error if there is more than one nested component that implements the ui:ListItemRendererAPI type. xs:NCName     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