javascriptappcelerator-titaniumtitanium-alloy

Did not understand meaning of $.variableName = functionName in Titanium Alloy Controller


I was trying to mimic an activity indicator module in Appcelerator Titanium Alloy. It works fine but I did not understand the working of 2 lines.

activityIndicator.js

$.hide = hide; // <= What does these two lines
$.show = show; // <= means. How Iam able to access hide and show functions in dashboard.js controller directly?

function hide () {
  $.loadingOverlay.hide();
  $.loadingIndicator.hide();
}

function show () {
  $.loadingOverlay.show();
  $.loadingIndicator.show();
}

(function init(){
     Titanium.API.trace("[activityIndicator] >> [init]");
})();

activityIndicator.xml

<Alloy>
  <View id="loadingOverlay" visible="false" zIndex="1">
    <ActivityIndicator id="loadingIndicator"/>
  </View>
</Alloy>

I am requiring this file in another view namely dashboard.xml

and in dashboard.js controller I am using $.loadIndicator.show() and $.loadIndicator.hide() function.

dashboard.js

//just the function related to loadIndicator
function serviceFailed(e) {
 
    $.loadIndicator.hide(); //hide function works well.
    
    var errorMessage = Ti.UI.createLabel({
        text : "Error loading data!",
        color : "red"
    });
    $.listContainer.add(errorMessage);
    alert("Failed:" + e.toString());
}

////just the function related to loadIndicator
function showList() {
    
    $.loadIndicator.show(); //this also works fine.
 
    serviceUtil.doUtilServiceCall(function(resp)    {
        populateList(resp);
        ReceivedData = resp;
        Ti.API.info('Data is set to response received.');
    }, serviceFailed);
}


If I comment out first two lines in activityIndicator.js

$.hide = hide;
$.show = show;

then it shows show loadIndicator.show is not a function. and same for hide function.

What I do not understand is how those two lines are making hide and show function accessible. And what can be possible equivalent code of those two lines.

What is $ referring to in here?

After going through other widgets I get the convention that, if you require a widget in View instead of Controller then using $.variable sets it as visible to outside world. Same way as module.exports sets it visible to outside world.

Please correct me if I am wrong.


Solution

  • Found Answer on Appceleraor's wiki : creating widgets

    All methods in the widget controller are private unless you prefix the method with $, which makes it accessible to the Alloy project and other widgets. For example, if the following code was defined in a widget controller:

    $.init = function (args) {
        // Button object with id=button
        $.button.title = args.title || 'Si';
        $.button.color = args.color || 'black';
        // global variable
        message = args.message || 'Hola mundo';
    }
    

    Then, in the Alloy project, call init prefixed with the widget ID specified in the Alloy project's view--in this example, the ID is foo:

    $.foo.init({title:'Yes', color:'gray', message:'I pity the foo.'});