Titanium JIRA Archive
Alloy (ALOY)

[ALOY-1029] Listview code errs on Android but works on iOS platform

GitHub Issuen/a
TypeBug
PriorityLow
StatusOpen
ResolutionUnresolved
Affected Version/sAlloy 1.3.1
Fix Version/sn/a
ComponentsXML
Labelsandroid, community, listview
ReporterQuang Pham
AssigneeFeon Sua Xin Miao
Created2014-05-19T10:21:23.000+0000
Updated2015-06-08T17:39:23.000+0000

Description

I get this demo from http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.ListView Just change the image url It looks good on iOS But show label text on Android And show this error [ERROR] : TiTemplate: (main) [68,68] Please use 'properties' binding for builtInTemplate

Attachments

FileDateSize
2014_05_19_17.14.35.png2014-05-19T10:21:23.000+000071558
Screen Shot 2014-05-19 at 5.08.43 PM.png2014-05-19T10:21:23.000+0000102793
ti-test.zip2014-05-19T10:21:23.000+00006479066

Comments

  1. Ritu Agrawal 2014-05-19

    I ran the sample provided in the documentation and it worked fine. I changed the image url. Here is the code I tested. 
       var win = Ti.UI.createWindow({backgroundColor: 'white'});
   
   // Create a custom template that displays an image on the left, 
   // then a title next to it with a subtitle below it.
   var myTemplate = {
       childTemplates: [
           {                            // Image justified left
               type: 'Ti.UI.ImageView', // Use an image view for the image
               bindId: 'pic',           // Maps to a custom pic property of the item data
               properties: {            // Sets the image view  properties
                   width: '50dp', height: '50dp', left: 0
               }
           },
           {                            // Title 
               type: 'Ti.UI.Label',     // Use a label for the title 
               bindId: 'info',          // Maps to a custom info property of the item data
               properties: {            // Sets the label properties
                   color: 'black',
                   font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                   left: '60dp', top: 0,
               }
           },
           {                            // Subtitle
               type: 'Ti.UI.Label',     // Use a label for the subtitle
               bindId: 'es_info',       // Maps to a custom es_info property of the item data
               properties: {            // Sets the label properties
                   color: 'gray',
                   font: { fontFamily:'Arial', fontSize: '14dp' },
                   left: '60dp', top: '25dp',
               }
           }
       ]
   };
   
   var listView = Ti.UI.createListView({
       // Maps myTemplate dictionary to 'template' string
       templates: { 'template': myTemplate },
       // Use 'template', that is, the myTemplate dict created earlier
       // for all items as long as the template property is not defined for an item.
       defaultItemTemplate: 'template'
   });
   var sections = [];
   
   var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
   var fruitDataSet = [
       // the text property of info maps to the text property of the title label
       // the text property of es_info maps to text property of the subtitle label
       // the image property of pic maps to the image property of the image view
       { info: {text: 'Apple'}, es_info: {text: 'Manzana'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}},
       { info: {text: 'Banana'}, es_info: {text: 'Banana'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}}
   ];
   fruitSection.setItems(fruitDataSet);
   sections.push(fruitSection);
   
   var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables / Verduras'});
   var vegDataSet = [
       { info: {text: 'Carrot'}, es_info: {text: 'Zanahoria'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}},
       { info: {text: 'Potato'}, es_info: {text: 'Patata'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}}
   ];
   vegSection.setItems(vegDataSet);
   sections.push(vegSection);
   
   var grainSection = Ti.UI.createListSection({ headerTitle: 'Grains / Granos'});
   var grainDataSet = [
       { info: {text: 'Corn'}, es_info: {text: 'Maiz'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}},
       { info: {text: 'Rice'}, es_info: {text: 'Arroz'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}}
   ];
   grainSection.setItems(grainDataSet);
   sections.push(grainSection);
   
   listView.setSections(sections);
   win.add(listView);
   win.open();
  2. Quang Pham 2014-05-20

    Your code works. When i change it to use Alloy. It does not work anymore 
       <Alloy>
   	<Window class="container">
   		<ListView id="gallery"></ListView>
   	</Window>
   </Alloy>
   
       // Create a custom template that displays an image on the left, 
   // then a title next to it with a subtitle below it.
   var myTemplate = {
       childTemplates: [
           {                            // Image justified left
               type: 'Ti.UI.ImageView', // Use an image view for the image
               bindId: 'pic',           // Maps to a custom pic property of the item data
               properties: {            // Sets the image view  properties
                   width: '50dp', height: '50dp', left: 0
               }
           },
           {                            // Title 
               type: 'Ti.UI.Label',     // Use a label for the title 
               bindId: 'info',          // Maps to a custom info property of the item data
               properties: {            // Sets the label properties
                   color: 'black',
                   font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                   left: '60dp', top: 0,
               }
           },
           {                            // Subtitle
               type: 'Ti.UI.Label',     // Use a label for the subtitle
               bindId: 'es_info',       // Maps to a custom es_info property of the item data
               properties: {            // Sets the label properties
                   color: 'gray',
                   font: { fontFamily:'Arial', fontSize: '14dp' },
                   left: '60dp', top: '25dp',
               }
           }
       ]
   };
    
   // var listView = Ti.UI.createListView({
       // // Maps myTemplate dictionary to 'template' string
       // templates: { 'template': myTemplate },
       // // Use 'template', that is, the myTemplate dict created earlier
       // // for all items as long as the template property is not defined for an item.
       // defaultItemTemplate: 'template'
   // });
   
   $.gallery.templates = { 'template': myTemplate };
   $.gallery.defaultItemTemplate = 'template';
   
   var sections = [];
    
   var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
   var fruitDataSet = [
       // the text property of info maps to the text property of the title label
       // the text property of es_info maps to text property of the subtitle label
       // the image property of pic maps to the image property of the image view
       { info: {text: 'Apple'}, es_info: {text: 'Manzana'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}},
       { info: {text: 'Banana'}, es_info: {text: 'Banana'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}}
   ];
   fruitSection.setItems(fruitDataSet);
   sections.push(fruitSection);
    
   var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables / Verduras'});
   var vegDataSet = [
       { info: {text: 'Carrot'}, es_info: {text: 'Zanahoria'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}},
       { info: {text: 'Potato'}, es_info: {text: 'Patata'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}}
   ];
   vegSection.setItems(vegDataSet);
   sections.push(vegSection);
    
   var grainSection = Ti.UI.createListSection({ headerTitle: 'Grains / Granos'});
   var grainDataSet = [
       { info: {text: 'Corn'}, es_info: {text: 'Maiz'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}},
       { info: {text: 'Rice'}, es_info: {text: 'Arroz'}, pic: {image: 'http://allthingsd.com/files/2012/11/appcelerator-logo-feature-380x285.png'}}
   ];
   grainSection.setItems(grainDataSet);
   sections.push(grainSection);
    
   $.gallery.setSections(sections);
   
   var win = $.getView();
   // win.add(listView);
   win.open();
  3. Quang Pham 2014-05-20

    http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.ListView-property-templates templates property is creation only. My test case is wrong. But why iOS is still working?
  4. Ritu Agrawal 2014-05-22

    Moving this ticket to engineering as I can reproduce this issue on Android platform with the provided test case. Works fine on iOS platform. Titanium code works on both iOS and Android platforms.

JSON Source