[TIMOB-15091] iOS: Allow using module views in Ti.UI.ListView templates

apidoc/Titanium/UI/ListItem.yml

@@ -85,6 +85,30 @@ description: |
     or <Titanium.UI.ListView.defaultItemTemplate> property: <Titanium.UI.LIST_ITEM_TEMPLATE_CONTACTS>,
     <Titanium.UI.LIST_ITEM_TEMPLATE_SETTINGS> or <Titanium.UI.LIST_ITEM_TEMPLATE_SUBTITLE>.
 
+    #### External Modules (Titanium 7.1.0 and later)
+
+    In addition to using one of the predefined view classes, you can also pass module views to your list
+    item template. For example, use the Ti.Map module to show a map-view in your list view:
+
+        var map = require('ti.map');
+
+        var myTemplate = {
+          childTemplates: [{
+            type: 'View', // The name of the module view class to use
+            module: map, // Your module instance
+            bindId: 'myMap' // The ID to reference it (like other child templates)
+          }]
+        };
+
+        var listView = Ti.UI.createListView({
+          templates: {
+            'template': myTemplate
+          },
+          defaultItemTemplate: 'template'
+        });
+
+    For example, use 'View' if you would usually create it with `map.createView()`;
+
     #### Eventing
 
     Unlike other views, you cannot use the `addEventListener` method to bind callbacks to events for a
@@ -511,6 +535,49 @@ examples:
 
             win.add(listView);
             win.open();
+
+  - title: List Items with a module-based Item Template
+    example: |
+        This example shows how to use a view from an external module (in this case Ti.Map)
+        in your list item template.
+
+        Monitors the `click` event of the item rather than the `itemclick` event of the list view.
+
+            var map = require('ti.map');
+            var win = Ti.UI.createWindow({
+              backgroundColor: 'white'
+            });
+
+            var myTemplate = {
+              childTemplates: [{
+                type: 'View',
+                module: map,
+                bindId: 'map',
+                properties: {}
+              }]
+            };
+
+            var listView = Ti.UI.createListView({
+              templates: {
+                'template': myTemplate
+              },
+              defaultItemTemplate: 'template'
+            });
+            var sections = [];
+
+            var fruitSection = Ti.UI.createListSection();
+            var fruitDataSet = [{
+              map: {
+                width: Ti.UI.FILL,
+                height: 100
+              }
+            }, ];
+            fruitSection.setItems(fruitDataSet);
+            sections.push(fruitSection);
+
+            listView.setSections(sections);
+            win.add(listView);
+            win.open();
 
 ---
 name: ItemTemplate
@@ -570,6 +637,7 @@ properties:
           * <Titanium.UI.iOS.Stepper>
           * <Titanium.UI.iOS.TabbedBar>
 
+        Alternatively, use the view class of the module defined under the `module` key (Titanium 7.1.0 and later).
     type: String
     optional: false
 
@@ -594,6 +662,11 @@ properties:
         Contains an array of subview templates to be added (in order) as children to this view.
     type: Array<ViewTemplate>
 
+  - name: module
+    summary: |
+        The module instance used to determine where to instantiate the view class defined in `type`.
+    description: Available in Titanium SDK 7.1.0 and later.
+    type: Titanium.Module
 
 ---
 name: ListDataItem

iphone/Classes/TiViewProxy.m

@@ -2935,7 +2935,16 @@ + (TiViewProxy *)unarchiveFromTemplate:(id)viewTemplate_ inContext:(id<TiEvaluat
   }
 
   if (viewTemplate.type != nil) {
-    TiViewProxy *proxy = [[self class] createProxy:viewTemplate.type withProperties:nil inContext:context];
+    TiViewProxy *proxy = nil;
+
+    // Handle module views or core-views
+    if (viewTemplate.module != nil) {
+      NSString *proxyName = [NSString stringWithFormat:@"%@%@", viewTemplate.module, viewTemplate.type];
+      proxy = [[self class] createProxy:proxyName withProperties:nil inContext:context];
+    } else {
+      proxy = [[self class] createProxy:viewTemplate.type withProperties:nil inContext:context];
+    }
+
     [context.krollContext invokeBlockOnThread:^{
       [context registerProxy:proxy];
       [proxy rememberSelf];

iphone/Classes/TiViewTemplate.h

@@ -9,6 +9,7 @@
 @interface TiViewTemplate : TiProxy
 
 @property (nonatomic, readonly) NSString *type;
+@property (nonatomic, readonly) NSString *module;
 @property (nonatomic, readonly) NSDictionary *properties;
 @property (nonatomic, readonly) NSDictionary *events;
 @property (nonatomic, readonly) NSArray *childTemplates;

iphone/Classes/TiViewTemplate.m

@@ -6,9 +6,11 @@
  */
 
 #import "TiViewTemplate.h"
+#import "TiModule.h"
 
 @implementation TiViewTemplate {
   NSString *_type;
+  NSString *_module;
   NSMutableDictionary *_properties;
   NSMutableDictionary *_events;
   NSMutableArray *_childTemplates;
@@ -18,6 +20,7 @@ @implementation TiViewTemplate {
 @synthesize properties = _properties;
 @synthesize events = _events;
 @synthesize childTemplates = _childTemplates;
+@synthesize module = _module;
 
 - (id)initWithViewTemplate:(NSDictionary *)viewTemplate
 {
@@ -31,6 +34,7 @@ - (id)initWithViewTemplate:(NSDictionary *)viewTemplate
 - (void)dealloc
 {
   [_type release];
+  [_module release];
   [_properties release];
   [_events release];
   [_childTemplates release];
@@ -54,6 +58,17 @@ - (void)loadFromDictionary:(NSDictionary *)viewTemplate
   [_type release];
   _type = [[viewTemplate objectForKey:@"type"] copy];
 
+  if ([viewTemplate objectForKey:@"module"] != nil) {
+    RELEASE_TO_NIL(_module);
+    TiModule *moduleCore = [viewTemplate objectForKey:@"module"];
+    NSString *className = NSStringFromClass([moduleCore class]);
+    if (![className containsString:@"Module"]) {
+      NSLog(@"[ERROR] Invalid \"module\" key provided to item-template.");
+    }
+    className = [className substringWithRange:NSMakeRange(0, [className rangeOfString:@"Module"].location)];
+    _module = [className copy];
+  }
+
   id properties = [viewTemplate objectForKey:@"properties"];
   if ([properties isKindOfClass:[NSDictionary class]]) {
     [(NSDictionary *)properties enumerateKeysAndObjectsUsingBlock:^(id key, id value, BOOL *stop) {

tests/Resources/ti.ui.listview.addontest.js

@@ -0,0 +1,92 @@
+/*
+ * Appcelerator Titanium Mobile
+ * Copyright (c) 2015-Present by Appcelerator, Inc. All Rights Reserved.
+ * Licensed under the terms of the Apache Public License
+ * Please see the LICENSE included with this distribution for details.
+ */
+/* eslint-env mocha */
+/* global Ti */
+/* eslint no-unused-expressions: "off" */
+'use strict';
+var should = require('./utilities/assertions');
+
+describe('Titanium.UI.ListView', function () {
+	var didFocus = false;
+	this.timeout(6e4);
+
+	beforeEach(function () {
+		didFocus = false;
+	});
+
+	it.ios('Custom template with module view', function (finish) {
+		var map = require('ti.map');
+		var win = Ti.UI.createWindow({ backgroundColor: 'green' }),
+			myTemplate = {
+				childTemplates: [
+					{
+						type: 'View',
+						module: map,
+						bindId: 'myMap',
+						properties: {}
+					}
+				]
+			},
+			listView = Ti.UI.createListView({
+				templates: { 'template': myTemplate },
+				defaultItemTemplate: 'template'
+			}),
+			sections = [],
+			fruitSection,
+			fruitDataSet,
+			vegSection,
+			vegDataSet;
+
+		fruitSection = Ti.UI.createListSection();
+		fruitDataSet = [
+			{ myMap: { height: 100 } },
+			{ myMap: { height: 150 } }
+		];
+		fruitSection.setItems(fruitDataSet);
+		sections.push(fruitSection);
+
+		vegSection = Ti.UI.createListSection();
+		vegDataSet = [
+			{ myMap: { height: 150 } },
+			{ myMap: { height: 100 } }
+		];
+		vegSection.setItems(vegDataSet);
+		sections.push(vegSection);
+
+		listView.setSections(sections);
+
+		win.addEventListener('focus', function () {
+			var error;
+
+			if (didFocus) {
+				return;
+			}
+			didFocus = true;
+
+			try {
+				should(listView.sectionCount).be.eql(2);
+				should(listView.sections[0].items.length).be.eql(2);
+				should(listView.sections[0].items[0].myMap.height).be.eql(100);
+				should(listView.sections[0].items[1].myMap.height).be.eql(150);
+
+				should(listView.sections[1].items.length).be.eql(2);
+				should(listView.sections[1].items[0].myMap.height).be.eql(150);
+				should(listView.sections[1].items[1].myMap.height).be.eql(100);
+			} catch (err) {
+				error = err;
+			}
+
+			setTimeout(function () {
+				win.close();
+				finish(error);
+			}, 1000);
+		});
+
+		win.add(listView);
+		win.open();
+	});
+});