Uploaded image for project: 'Alloy'
  1. Alloy
  2. ALOY-1163

Using $.UI.create on a ListView with Custom Data templates causes to hide rows when templates are created programmatically.

    Details

    • Story Points:
      5
    • Sprint:
      2014 Sprint 22 Alloy

      Description

      Problem Description

      When using the $.UI.create function for ListViews using custom item templates causes the listitems not to show.

      Steps to reproduce

      1. Create a new mobile project
      2. Add this testcase

      index.xml:

      <Alloy>
      	<Window id="container" class="container">
      	</Window>
      </Alloy>
      

      index.js (Example from docs)

      // 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 = $.UI.create("ListView", {
          // 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 = $.UI.create("ListSection", { 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: 'apple.png'}},
          { info: {text: 'Banana'}, es_info: {text: 'Banana'}, pic: {image: 'banana.png'}}
      ];
      fruitSection.setItems(fruitDataSet);
      sections.push(fruitSection);
       
      var vegSection = $.UI.create("ListSection", { headerTitle: 'Vegetables / Verduras'});
      var vegDataSet = [
          { info: {text: 'Carrot'}, es_info: {text: 'Zanahoria'}, pic: {image: 'carrot.png'}},
          { info: {text: 'Potato'}, es_info: {text: 'Patata'}, pic: {image: 'potato.png'}}
      ];
      vegSection.setItems(vegDataSet);
      sections.push(vegSection);
       
      var grainSection = $.UI.create("ListSection", { headerTitle: 'Grains / Granos'});
      var grainDataSet = [
          { info: {text: 'Corn'}, es_info: {text: 'Maiz'}, pic: {image: 'corn.png'}},
          { info: {text: 'Rice'}, es_info: {text: 'Arroz'}, pic: {image: 'rice.png'}}
      ];
      grainSection.setItems(grainDataSet);
      sections.push(grainSection);
       
      listView.setSections(sections);
      $.container.add(listView);
      $.container.open();
      

      However, switching to Ti.UI.create<Type>() {} works:
      index.js:

      // 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: 'apple.png'}},
          { info: {text: 'Banana'}, es_info: {text: 'Banana'}, pic: {image: 'banana.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: 'carrot.png'}},
          { info: {text: 'Potato'}, es_info: {text: 'Patata'}, pic: {image: 'potato.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: 'corn.png'}},
          { info: {text: 'Rice'}, es_info: {text: 'Arroz'}, pic: {image: 'rice.png'}}
      ];
      grainSection.setItems(grainDataSet);
      sections.push(grainSection);
       
      listView.setSections(sections);
      $.container.add(listView);
      $.container.open();
      

      3. Test in device

      Results

      According to the Appcelerator documentation Alloy Dynamic Styles "Since Alloy 1.2.0, Alloy supports changing styles dynamically or during runtime. There are two methods to support dynamic styling in Alloy. You can either generate a dynamic style dictionary that can be passed to applyProperties or a create method, or modify TSS class styles to an existing component on the fly."

      Using "$.UI.create" in SDK 3.4.0.GA and Alloy 1.5.1 causes listview rows hide. Whether in SDK 3.3.0.GA and Alloy 1.4.0 it works fine.

      Extra information

      Both examples used to work in Ti SDK 3.3.X and iOS 7.X and Alloy 1.4.X

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                skypanther Tim Poulsen
                Reporter:
                Serfenia Patrick van Vuuren
              • Watchers:
                5 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Integration