Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-24776] iOS: ListView item template support CommonJS modules

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2018-06-29T08:05:58.000+0000
Affected Version/sn/a
Fix Version/sRelease 7.5.0
ComponentsTiAPI
Labelsdemo_app
ReporterFeon Sua Xin Miao
AssigneeChristopher Williams
Created2017-06-05T23:02:31.000+0000
Updated2018-11-14T22:51:57.000+0000

Description

According to [http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListItem], the ListView item template only supports a limited set of view classes from the Ti.UI namespace. The type property sets the Ti.UI view to be used, i.e 'Ti.UI.Label'
var template = {
    childTemplates: [
        { 
            type: 'Ti.UI.ImageView', 
            bindId: '',
            properties: { }
        },
        { 
            type: 'Ti.UI.Label', 
            bindId: '',
            properties: { }
        }
        // supported views http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListItem
    ],
    events: { }
};
Instead of composing the listview's UI repeatedly, I would like to be able to use a javascript module in list template, i.e:
function Controller() {
    var $ = this;
    $.__views.container = Ti.UI.createView({
        layout: "horizontal",
        width: Ti.UI.SIZE,
        backgroundColor: "transparent"
    });
    $.__views.rname = Ti.UI.createLabel({
        text: "row"
    });
    $.__views.rimg = Ti.UI.createImageView({
        image: 'img.png'
    });
    $.__views.container.add($.__views.rname);
    $.__views.container.add($.__views.rimg);
    _.extend($, $.__views);
    _.extend($, exports);
}
module.exports = Controller;

Comments

  1. Eric Merriman 2018-01-23

    Hello [~hknoechel] - I need you to scope this out and determine how much effort.
  2. Hans Knöchel 2018-01-24

    The reason why we don't support is because of the general ListView architecture and it's proxy handling. Compared to the Ti.UI.TableView which is able to do this, the Ti.UI.ListView does not really reference the proxies in every row but has a virtual representation of them, making the ListView performing as great as it does. This is also the reason why events are abstracted as well and the number of UI elements supported by the ListView are limited. By allowing to require templates, we would basically need to remove that generic handling again and allow direct proxy-references in the ListView, making it not much better than the Ti.UI.TableView architecture. Let me know your thoughts, but I'd really speak out against this. And regarding TIMOB-15091, I think it should be doable without this change by whitelisting module views in the list of allowed UI elements. *EDIT*: Being more specific, I could think of the following adjustment that may be doable:
       {
         type: 'View', // Resolves to TiMapViewProxy which is valid view-proxy inside ti.map
         module: 'TiMap', 
         bindId: '',
         properties: { }
       }
       
    *EDIT 2*: Seems to work, lets discuss this! *EDIT 3*: PR is up in TIMOB-15091, awaiting Android parity to complete task.
  3. Feon Sua Xin Miao 2018-02-23

    Will this also work for non-native modules? Eg. a reusable commonjs component that's composed of multiple view proxies.
  4. Abir Mukherjee 2018-03-21

    [~hknoechel] per Feon's question, can this work with non-native modules? I've scheduled this for 7.2.0, is that doable?
  5. Christopher Williams 2018-06-25

    https://github.com/appcelerator/titanium_mobile/pull/10131
  6. Lokesh Choudhary 2018-11-14

    Verified the fix in SDK 7.5.0.v20181114112657. Closing. Studio Ver: 5.1.2.201810301430 SDK Ver: 7.5.0.v20181114112657 OS Ver: 10.14 Xcode Ver: Xcode 10.1 Appc NPM: 4.2.13 Appc CLI: 7.0.8-master.4 Daemon Ver: 1.1.3 Ti CLI Ver: 5.1.1 Alloy Ver: 1.13.4 Node Ver: 8.9.1 NPM Ver: 5.5.1 Java Ver: 10.0.2 IOS Simulator: Iphone 8 IOS 12.1

JSON Source