Alloy loose-usage of ListView

index.js

function myOnDisplayItem(e) {}

var myTemplate = {
  properties: {
    onDisplayItem: myOnDisplayItem,
    selectedBackgroundColor: 'blue',
    height: 120,
  },
  childTemplates: [
  {
    type: 'Ti.UI.Label',
    id:'cellLabel',
    properties: {
      color: '#576996',
      font: { fontFamily:'Arial', fontSize: 13, fontWeight:'bold'},
      left: 10, top: 6,
      width: 200, height: 30,
      text: 'Label'
    }
  },
  {
    type: 'Ti.UI.ImageView',
    id: 'cellImage',
    properties: {
      image: '/images/tony.jpg',
      left: 70, top: 6,
      width: 200, height: 100,
    }
  }]
};
 
var section = Ti.UI.createListSection({
  headerTitle: 'Section Title'
});

$.list.templates = { myCell: myTemplate };
$.list.sections = [section];
$.index.open();
   
section.setItems([
  {
    template: 'myCell',
    properties: { accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_CHECKMARK }
  },
  { template: 'myCell' },
  { template: 'myCell' },
  {
    template: Ti.UI.LIST_ITEM_TEMPLATE_SUBTITLE,
    properties: {
      title: 'Cell Title',
      subtitle: 'Cell Subtitle',
      image: '/images/appc.png'
    }
  }
]);

index.tss

"Window": {
    backgroundColor:"white"
}

"#list": {
    backgroundColor: '#fff'
}

index.xml

<Alloy>
    <Window>
        <ListView id="list"/>
    </Window>
</Alloy>

But I assume ultimately it will be something like:

<Alloy>
  <Window>
    <ListView id="list">
      <ListTemplate class="myCell" onDisplayItem="onDisplayItem">
        <Label id="cellLabel">Label</Label>
        <ImageView src="/images/tony.jpg" />
      </ListTemplate>
      <ListSection>
        <ListItem template="myCell" />
        <ListItem title="title" />
      </ListSection>
    </ListView>
  </Window>
</Alloy>

Of course styling and Ti constants would be set through TSS.

Yeah, definitely. This is just to help give the understanding that yes you can use ListView with Alloy, but no there isn't a markup integration yet.