ui:list-model

Purpose

Represents a JSON-based list model, i.e. a model that allows its contents to be specified using the XML representation of a data structure equivalent to JSON. The presentation of items is handled by a renderer that 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 Model and Working with JSON for more information.

Contained by

Contains

Attribute groups

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" model="json-model">
        <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-view>
      <ui:list-model id="json-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: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