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.
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.'});