Use view from custom module inside Titanium ListViewItem

Most example I found on how to create view inside ListViewItem are using Titanium views itself (those from Ti.UI namespace). This post shows how to use views from other modules. For example, I’m using canvas view module, TiAndroidCanvas (Android) and ti.canvas (iOS)

Updated:

In order for ListView to use the custom module, listview.js need to be able to access the JS variable pointing to the module, and invoke the create* method to create the view instance. So, instead of using try-and-error method as shown previously, just assign your require()-ed module to global scope

Android example:

global.CanvasModule = require('com.wwl.canvas');

// template
{
    type: 'CanvasModule.CanvasView'
}

(therefore, listview.js will invoke CanvasModule.createCanvasView() to create the view instance)

iOS example:

global.CanvasModule = require('ti.canvas');

// template
{
    type: 'CanvasModule.View'
}

(therefore, listview.js will invoke CanvasModule.createView() to create the view instance)

Android

Include the module into global variable, then in ListItemTemplate, assign using the view’s class name (in Java source code, the class that inherits TiViewProxy, without -Proxy suffix)

var Canvas = require('com.wwl.canvas');

// in template
{
    type: 'Canvas.CanvasView',
    properties: {},
    events: {}
}

iOS

No need to include the module, but in ListItemTemplate, assign using the actual view proxy class name in Objective-C code.

// in template
{
    type: 'TiCanvasView',
    properties: {},
    events: {}
}

Related posts:

• Android BOOT_COMPLETED handler module
• Lazyloading JS modules in Titanium app
• Object oriented Javascript with CommonJS in Titanium app
• Titanium iOS “build” is an unrecognized command
• Efficient code
• Creating [object] in a different context than the calling function.
• Webview evalJS return null in Android 4.2.2
• Titanium app hex color value with alpha channel
• ScrollableView in ListView
• Setup Titanium Studio environment for developing Titanium module (Android) on Windows

Filed under Tech with tags ListView, Titanium Mobile, Titanium Module

4 comments