Skip to content

Instantly share code, notes, and snippets.

@ricardoalcocer
Created November 25, 2012 19:45
Show Gist options
  • Save ricardoalcocer/4145020 to your computer and use it in GitHub Desktop.
Save ricardoalcocer/4145020 to your computer and use it in GitHub Desktop.
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
Copy link
Author

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