Ghost Variables

On SDK 3.2.3, Studio 3.2.x, OSX Mavericks, developing for android and iOS using Alloy framework. I have tried without luck to solve this problem of "null object" executing APP.DashboardMenu.init() in line 155 of core.js file. APP.DashboardMenu.init() is a function along with other routines I adapted from the beautiful work of Mathew Mongroove of the ChariTi app mobile framework. Thanks Mathew for this.

I am trying to adapt his routines to create a springboard type (dashboard) menu system and also use his flickr module as well which is what triggered this journey in the first place.

Application is started with a call to APP.init() contained in the core.js file written by Mathew. In the widget.xml file I replaced the <TableView id="#Nodes"/> with <View id="#Nodes"/>. The data for the menu are created from a config file (app.json) just as Mathew did for the slideMenu.

relevant portion of index.ml

<Alloy>
  <!-- Main Window -->
  <Window id="MainWindow" title="myNSU">
 
        <Require type="widget" src="com.bespokenit.dashboardMenu" id="DashboardMenu" />
 
 
    <View id="GlobalWrapper">
        <View id="ContentWrapper" />
        <Require type="widget" src="com.mcongrove.tabs" id="Tabs" />
 
        <!--First Level  Banner View -->
        <View id="header1">
            <View id="logoView">
                <ImageView id="logoImage"/>
            </View>

index.js

// Pull in the core APP singleton
var APP = require("core");
 
// Make sure we always have a reference to global elements throughout the APP singleton
APP.MainWindow = $.MainWindow;
APP.GlobalWrapper = $.GlobalWrapper;
APP.ContentWrapper = $.ContentWrapper;
APP.Tabs = $.Tabs;
APP.DashboardMMenu = $.DashboardMMenu;
 
// Start the APP
 
APP.init();

I have verified with a log print that the config data are read correctly and completely. There are 12 icons with labels read. widget.xml

<Alloy>
 
   <View id="Wrapper">
        <View id = "Nodes"/>
 
    </View>
 
</Alloy>

widget.js

$.init = function(_params) {
 
   var  nodes = [];
 
 
    for(var i = 0; i < _params.nodes.length; i++) {
 
        var tab = Ti.UI.createView({
            id: _params.nodes[i].id,
            height: Ti.UI.SIZE,
            layout: 'horizontal',
            left: "10dp",
            right: "5dp",
            top: Alloy.Globals.margin,
            width: "60dp"
        });
 
        var label = Ti.UI.createLabel({
            text: _params.nodes[i].title,
            height: Ti.UI.SIZE,
            color: '#000',
            textAlign: 'center',
            top: "5dp",
            touchEnabled: false,
            width: Ti.UI.FILL
        });
 
        if(_params.nodes[i].image) {
            var icon = Ti.UI.createImageView({
                image: _params.nodes[i].image,
                top: "0dp",
                left: Alloy.Globals.margin,
                height: Ti.UI.SIZE,
                width: Ti.UI.SIZE,
                preventDefaultImage: true
            });
 
            tab.add(icon);
        }
 
        tab.add(label);
        nodes.push(tab);
 
 
        $.Nodes.add(nodes[i]);
    }
 
    // We have to remove before adding to make sure we're not duplicating
    $.Nodes.removeEventListener("click", handleClick);
    $.Nodes.addEventListener("click", handleClick);
};

relevant portion of core.js : the build() and buildMenu() functions where the failure occurs (APP.DashboardMenu.init().

core.js

build: function() {
        //APP.log("debug", "APP.build");
 
        var nodes = [];
        var imageFolder = !APP.Settings.useDashboardMenu && APP.Settings.colors.theme == "light" ? "/icons/white/" : "/icons/black/";
        //var hasMenuHeaders = false;
 
        for(var i = 0, x = APP.Nodes.length; i < x; i++) {
            nodes.push({
                id: i,
                title: APP.Nodes[i].title,
                image: UTIL.fileExists(imageFolder + APP.Nodes[i].image + ".png") ? imageFolder + APP.Nodes[i].image + ".png" : null,
                controller: APP.Nodes[i].type.toLowerCase(),
                //menuHeader: APP.Nodes[i].menuHeader
            });
 
        }
 
        APP.buildMenu(nodes); //builds the dashboard menu
 
 
    },
    /**
     * Builds a TabGroup
     * @param {Array} _nodes The items (tabs) to build
     */
    buildTabs: function(_nodes) {
        //APP.log("debug", "APP.buildTabs");
 
        APP.Tabs.init({
            nodes: _nodes,
            more: APP.Settings.colors.theme == "dark" ? "/icons/white/more.png" : "/icons/black/more.png",
            color: {
                background: APP.Settings.colors.primary,
                active: APP.Settings.colors.secondary,
                text: APP.Settings.colors.theme == "dark" ? "#FFF" : "#000"
            }
        });
 
        // Add a handler for the tabs (make sure we remove existing ones first)
        APP.Tabs.Wrapper.removeEventListener("click", APP.handleTabClick);
        APP.Tabs.Wrapper.addEventListener("click", APP.handleTabClick);
    },
    /**
     * Builds a slide menu
     * @param {Array} _nodes The items (menu nodes) to build
     */
 
    buildMenu: function(_nodes) {
        //APP.log("debug", "APP.buildMenu");
 
        APP.DashboardMenu.init({
            nodes: _nodes,
 
        });

Thanks a bunch as you assist this confused and frustrated Alloy rookie. I am hopeful that someone on this forum can point me in the right direction as I have to the end of understanding.