Appcelerator Titanium: Learning by examples #3 (Alloy)


Intro to Alloy

  1. alloy.js enables you to initialize stuff before any controller gets executed
  2. Execution starts from controllers/index.js by convention
<Alloy>
	<TabGroup>
		<Tab title="First View" icon="KS_nav_ui.png">
			<Window title="First View">
				<View layout="vertical">
					<View class="rowLayout">
						<Label>First Number</Label>
						<TextField id="tf1"></TextField>
					</View>
					<View class="rowLayout">
						<Label>Second Number</Label>
						<TextField id="tf2"></TextField>
					</View>
					<Button platform="ios" title="Add Sum" onClick="onClickAdd"></Button>
					<Button platform="android" title="ADD SUM" onClick="onClickAdd"></Button>
					<Label id="result"></Label>
				</View>
			</Window>
		</Tab>
		<Tab title="Second View" icon="KS_nav_views.png">
			<Window title="Tab 2">
				<Label>I am Window 2</Label>
			</Window>
		</Tab>
	</TabGroup>
</Alloy>
"Window": {
	backgroundColor: "#fff"
}

"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000",
	font: {
		fontSize: 20,
		fontFamily: 'Helvetica Neue'
	},
	textAlign: 'center',
	left: 10
} 

"TextField": {
	width: 120,
	left: 10,									// left margin 
	keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD,	// Number keypad 
	borderStyle: Ti.UI.INPUT_BORDERSTYLE_BEZEL,	// Better UI for iOS
}

"TextField[platform=android]" : {
	width: 120,
	left: 10,									// left margin 
	keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD,	// Number keypad 
}

".rowLayout" : {
	layout: "horizontal",
	height: 48,
	top: 10
}
var firstNumber = 0;
var secondNumber = 0;
var total = 0;

$.index.open();

function onClickAdd() {
	if ($.tf1.hasText() && $.tf2.hasText()) {
		firstNumber = parseInt($.tf1.value);
		secondNumber = parseInt($.tf2.value);
		total = firstNumber + secondNumber;
		$.result.text = "Result: " + total;
	} else {
		$.result.text = "Please enter value";
	}
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s