Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-28459

Android: ScrollableView with databinding in Footer/HeaderView not showing up

    Details

    • Type: Bug
    • Status: Closed
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: Release 10.0.1
    • Component/s: Android
    • Labels:
      None

      Description

      When you add a ScrollableView inside a HeaderView with databinding the child views aren't visible. I've rebuild the generated classic code from my Alloy app to make it easier to test but here is the original Alloy part first:

      For my initial test I've used mocx (https://github.com/jasonkneen/mocx/blob/master/mocx.js) inside the lib folder and this code inside alloy.js:

      var mocx = require("/mocx");
      mocx.createCollection("contacts", [{name : "John Smith"}, {name : "Jane Doe"}]);
      

      my xml:

      <Alloy>
          <Window fullscreen="true">
              <ListView>
                  <ListSection dataCollection="contacts" bottom="200">
       
                      <HeaderView>
                          <View backgroundColor="#DDD" height="200">
                              <ScrollableView height="200" dataCollection="contacts" >
                                  <!-- doesn't work -->
                                  <View backgroundColor="red" height="200"/>
                              </ScrollableView>
                          </View>
                      </HeaderView>
       
                      <ListItem color="#000" title="{name}" searchableText="{name}"/>
       
                      <FooterView>
                          <View backgroundColor="#DDD" height="Ti.UI.SIZE">
                              <ScrollableView height="200" dataCollection="contacts">
                                  <!-- doesn't work -->
                                  <View backgroundColor="red" height="200"/>
                              </ScrollableView>
                          </View>
                      </FooterView>
                  </ListSection>
              </ListView>
       
              <ScrollableView height="200" dataCollection="contacts" bottom="0">
                  <ImageView image="/appicon.png"/>
              </ScrollableView>
          </Window>
      </Alloy>
      

      my controller

      Alloy.Collections.contacts.fetch();
      $.index.open();
      

      the generated classic code looks like this:

      for (var __alloyId7, opts = __alloyId11.opts || {}, models = __alloyId10.models, len = models.length,  views = [], i = 0; i < len; i++) {
          __alloyId7 = models[i], __alloyId7.__transform = transform(__alloyId7);
          var __alloyId9 = Ti.UI.createView({
              views: __alloyId6,
              apiName: "Ti.UI.ScrollableView",
              height: 200,
              classes: [],
              backgroundColor: "red"
          });
          views.push(__alloyId9);
      }
      $.__views.__alloyId5.views = views
      

      It is adding the views to an array and set it to scrollableview.views. So I've created a classic example that works in the same way (without databinding) which makes it easier to test:

      const win = Ti.UI.createWindow({
      	backgroundColor: '#fff',
      });
       
      const sections = [];
       
      var hv = Ti.UI.createView({
      	height: 100,
      	backgroundColor: "blue"
      });
       
      var sv = Ti.UI.createScrollableView({
      	height: 100,
      	backgroundColor: "yellow"
      })
      var views = [];
      for (var i = 0; i < 10; ++i) {
      	var insideView = Ti.UI.createView({
      		height: 100,
      		backgroundColor: "rgba(" + (i * 20) + "," + i + "," + i + ")"
      	});
          var lbl = Ti.UI.createLabel({
              text:"should be visible",
              color: "#fff"
          })
          insideView.add(lbl);
      	sv.addView(insideView)
      }
      hv.add(sv);
      for (let i = 0; i < 3; i++) {
      	const items = [];
       
      	for (let x = 0; x < 5; x++) {
      		items.push({
      			label: {
      				text: `Item #${x}`
      			}
      		});
      	}
       
      	sections.push(Ti.UI.createListSection({
      		headerView: hv,
      		items
      	}));
      }
      const listView = Ti.UI.createListView({
      	templates: {
      		template: {
      			properties: {
      				backgroundColor: 'transparent'
      			},
      			childTemplates: [{
      				type: 'Ti.UI.Label',
      				bindId: 'label',
      				properties: {
      					left: 10,
      					color: 'black'
      				}
      			}]
      		}
      	},
      	backgroundColor: "#b3b3b3",
      	defaultItemTemplate: 'template',
      	sections: sections
      });
      win.add(listView);
      win.open();
      

      The result is the same: the scrollable child views won't appear.

      If I'm not using the array and use sv.addView(insideView) inside the loop it works fine! If I compare both UIs in Android Studio I can see that the childviews are not added:

      using views = array

      using addView

      Setup:

      • Android 11/Pixel 4
      • Titanium SDK 10.1.0/10.0.0.GA

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                gmathews Gary Mathews
                Reporter:
                michael Michael Gangolf
                Reviewer:
                Joshua Quick
              • Watchers:
                6 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