Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Titanium Allow - Creating a FaceBook-like UI
function doClick(e) {
alert($.label.text);
}
function showmenu(e){
$.main.animate({left:200,duration:100});
}
function hidemenu(e){
$.main.animate({left:0,duration:100});
}
$.index.open();
".container": {
backgroundColor:"white",
orientationModes: [Ti.UI.PORTRAIT,Ti.UI.LANDSCAPE_LEFT,Ti.UI.LANDSCAPE_RIGHT,Ti.UI.UPSIDE_PORTRAIT]
},
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#000"
},
"#main":{
height: Ti.UI.FILL,
width: Ti.UI.FILL,
backgroundColor: "#c4cde0",
left: 0,
layout: "vertical"
},
"#menu":{
height: Ti.UI.FILL,
width: Ti.UI.FILL,
backgroundColor: "#2c323f",
left: 0
},
"#iconBar":{
backgroundColor: "#4f6ba6",
width: Ti.UI.FILL,
height: "50dp"
},
"#menuBar":{
backgroundColor: "#f3f5f8",
width: Ti.UI.FILL,
height: "50dp"
},
"#blackLine":{
backgroundColor: "#000",
width: Ti.UI.FILL,
height: "1dp"
},
"#grayLine":{
backgroundColor: "#9b9d9f",
width: Ti.UI.FILL,
height: "1dp"
},
"#mainList":{
backgroundColor: "#c4cde0",
separatorStyle: "NONE"
},
"#listRow":{
height: "200dp",
selectionStyle: "NONE"
},
"#rowContainer":{
borderColor: "#cacdd8",
borderRadius: 5,
borderWidth: 1,
left: "5dp",
right: "5dp",
top: "5dp",
bottom: "5dp",
height: Ti.UI.FILL,
width: Ti.UI.FILL,
backgroundColor: "#fff"
},
"#profilePic":{
width:"66",
height:"66",
image:"profilepic.png",
top:"5",
left:"5"
},
"#profileName":{
top: "5dp",
left: "80dp",
color: "#576b95",
font: {
fontSize : "16dp",
fontWeight: "bold"
}
},
"#timeAgo":{
top: "25dp",
left: "80dp",
color: "#bbbbbb",
font: {
fontSize : "16dp"
}
},
"#status":{
width: Ti.UI.SIZE,
left: 5,
right: 5,
font: {
fontSize : "16dp"
}
},
"#bottomActions":{
bottom: 0,
height: "45dp",
width: Ti.UI.FILL,
backgroundColor: "#eff2f5"
}
<Alloy>
<Window class="container">
<View id="menu" onClick="hidemenu"></View>
<View id="main">
<View id="iconBar"></View>
<View id="blackLine"></View>
<View id="menuBar" onClick="showmenu"></View>
<View id="grayLine"></View>
<TableView id="mainList">
<TableViewRow id="listRow">
<View id="rowContainer">
<ImageView id="profilePic"></ImageView>
<Label id="profileName">Ricardo Alcocer</Label>
<Label id="timeAgo">10 minutes ago</Label>
<Label id="status">I'm writing some XML markup to be used on a Mobile App.</Label>
<View id="grayLine" bottom="51"></View>
<View id="bottomActions"></View>
</View>
</TableViewRow>
<TableViewRow id="listRow">
<View id="rowContainer">
<ImageView id="profilePic"></ImageView>
<Label id="profileName">Ricardo Alcocer</Label>
<Label id="timeAgo">10 minutes ago</Label>
<Label id="status">I'm writing some XML markup to be used on a Mobile App.</Label>
<View id="grayLine" bottom="51"></View>
<View id="bottomActions"></View>
</View>
</TableViewRow>
</TableView>
</View>
</Window>
</Alloy>
@ricardoalcocer

This comment has been minimized.

Copy link
Owner Author

@ricardoalcocer ricardoalcocer commented Nov 25, 2012

You'll need to add profilepic.png to your assets folder.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment