A simple example of how to create a basic Widget using Appcelerator Titanium SDK and Alloy. This widget shows how you can create a cross platform view and external interfaces for programmatically setting properties of the widget.

index.js

/** 
 * UnComment Out this Code to change the properties of your square

$.square.setBackgroundColor("blue");
$.square.setHeight(200);
$.square.setWidth(200)

*/

/** Opens the top level Window **/
$.index.open();

index.xml

<Alloy>
  <Window class="container">
  
    <!-- Declaration of the Widget. SRC refers to the name of the widget -->
    <Widget src="square" id="square"/>
  
    
  </Window>
</Alloy>

widget.js

/** Incoming arguments to the Controller **/
var _args = arguments[0] || {};


/** Sets the Background Color **/
exports.setBackgroundColor = function(color) {
 
 $.square.backgroundColor = color;
  
};


/** Sets the height of the View **/
exports.setHeight = function(height) {
  
  $.square.height = height;
  
};


/** Sets the width of the View **/
exports.setWidth = function(width) {
  
  $.square.width = width;
  
}

/** Sets the height / width of the View to the same dimension **/
exports.setSize = function(size) {
  
  $.square.width = size;
  $.square.height = size;
  
}

widget.tss

"#square":{
  backgroundColor: "red",
  height: 100,
  width: 100
}

widget.xml

<Alloy>
  <View id="square" />
</Alloy>