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.
<?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><<</span>
<cf2:on event="cf2:activate" do="items#previous"/>
</ui:button>
<ui:button id="next" class="button">
<span title="Previous">>></span>
<cf2:on event="cf2:activate" do="items#next"/>
</ui:button>
</div>
</body>
</html>