Create object properties on an Alloy Widget

index.js

/** Create your Widget **/

var myWidget = Alloy.createWidget("myWidget");

/*
  Now the widget has an icon and title based on the default values as we defined them
  in the widget.js file (lines 26/27)
*/


/** Set the Icon **/
myWidget.icon = "myNewIcon.png";

/** Set the Wiget Title **/
myWidget.title = "My New Title";

/*
  Using the above syntax on this defined Object Property on the widget
  triggers the defined set function to be called, using the value on the
  right side of the '=' sign as the input parameter
*/

/** Get the value of the Widget Icon **/
alert(myWidget.icon);

/** Get the value of the Widget Title **/
alert(myWidget.title);

/*
  Using this syntax prompts the get function assiged as part of the 
  Object.defineProperty function, returning the value of the associated 
  child object;
*/

widget.js

var args = arguments[0] || {};

/** Define a property for the widget Icon (aka the imageView) **/
Object.defineProperty($, "icon", {
	get: {
		return $.imageView.image;
	},

	set: function(image){
		$.imageView.image = image;
	} 
});

/** Definte a property for the widget Title (aka the LabelView) **/
Object.defineProperty($, "title", {
	get: {
		return $.titleLabel.text;
	},

	set: function(title){
		$.titleLabel.text = title;
	} 
});

$.icon = arguments.icon || "myDefaultIcon.png";
$.title = arguments.title || "Default Title";

widget.xml

<Alloy>
  <View layout="horizontal">
	  <ImageView id="imageView" />
	  <Label id="titleLabel" />
  </View>
</Alloy>

Good example!

Line 26 and 27 need to use args instead of arguments.