Skip to content

Instantly share code, notes, and snippets.

@tonylukasavage
Last active December 15, 2015 00:38
Show Gist options
  • Save tonylukasavage/5173895 to your computer and use it in GitHub Desktop.
Save tonylukasavage/5173895 to your computer and use it in GitHub Desktop.
Alloy loose-usage of ListView
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'
}
}
]);
"Window": {
backgroundColor:"white"
}
"#list": {
backgroundColor: '#fff'
}
<Alloy>
<Window>
<ListView id="list"/>
</Window>
</Alloy>
@FokkeZB
Copy link

FokkeZB commented Mar 16, 2013

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.

@tonylukasavage
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment