main.js

function addProjectClick(){
	alert('addProjectClick');
}

function projectsClick(){
	alert('projectsClick');
}

function hsedocClick(){
	alert('hsedocClick');
}

main.tss

".button": {
width:"100",
height: "100"
}
"#btnProjects":{
//backgroundImage:'/images/ProjectList.png'
backgroundColor: "#f00"
}

"#btnNewProject":{
//backgroundImage:'/images/AddProject.png'
backgroundColor: "#ff0"
}

"#btnDoc":{
//backgroundImage:'/images/ViewHSEDoc.png'
backgroundColor: "#f0f"
}

"#btnCategories":{
//backgroundImage:'/images/SafetyTopics.png'
backgroundColor: "#00f"
}

main.xml

<Alloy >
	<Window>
		<View id="mainContainer" class="container" layout="vertical">
			<View height="20%" width="50%" class="logo" >
				<ImageView id="logo" image="/images/HSELogo.png"></ImageView>
			</View>
			<View height="35%" width="90%" layout="horizontal" >
				<View width="50%" backgroundColor="#ececec">
					<Button id="btnNewProject" class="button" onClick="addProjectClick">Button 1</Button>
				</View>
				<View width="50%" backgroundColor="#000">
					<Button id="btnProjects" class="button" onClick="projectsClick">Button 2</Button>
				</View>
			</View>
			<View height="35%" width="90%" layout="horizontal" >
				<View width="50%" backgroundColor="#3b3b3b">
					<Button id="btnDoc" class="button" onClick="hsedocClick">Button 3</Button>
				</View>
				<View width="50%" backgroundColor="#f00">
					<Button id="btnCategories" class="button">Button 4</Button>
				</View>
			</View>
			<View height= "10%"></View>
		</View>
	</Window>
</Alloy>