Titanium: Create fields like the ones in iPhone Contacts (Edit Mode) app - iphone

Question

Note: The divider aka separator is the main point of this question. It must be visible.
Is there a way to create fields like the ones in the iPhone Contacts (Edit Contact Mode) app?
I want to create a separator that separates the titleLabel from the textField.
Like " First Name | hinttext "
Instead of " First Name hinttext "
I think what I am trying to do is similar to this... except that I am using Titanium. Is there any way to do this using Titanium?
How is iPhone Contact app's detail View implemented
#MRT and anyone who knows:
How would you make the combined view such that it looks like this?
____________________
( Name | hinttext )
--------------------

Answer 1

You will have to create a new TableViewRow and customize it.
You can put labels, fields, images, etc. in the TableViewRow.
Example:
var row = Ti.UI.createTableViewRow();
var label = Ti.UI.createLabel({
text: "Name",
width: 50,
top: 5,
bottom: 5,
left: 5,
font: {fontSize:10}
});
row.add(label);

Answer 2

Try it this really usefull to you
var view1 = Ti.UI.createView({
height : 50,
width: 150,
top: 5,
bottom: 5,
left: 5,
font: {fontSize:10}
});
var text1 = Ti.UI.createTextField({
hintText : 'First Name',
height : 50,
width: 75,
top: 0,
left: 0,
font: {fontSize:10}
});
var text2 = Ti.UI.createTextField({
hintText : 'hint text',
height : 50,
width: 75,
top: 0,
left: 75,
font: {fontSize:10}
});
view1.add(text1);
view1.add(text2);

Answer 3

you have 2 way to do this.
take 2 TextField and adjust (top and left margin) and joint it.
or
1 Take 1 TextField
2. take 1 Label and its width 2 and height is equal to the textfield height.
3. TextField.add(lable1)
var win1 = Ti.UI.createWindow({
title : 'Window1',
backgroundColor : '#f00',
id : 0,
});
var text1 = Ti.UI.createTextField({
width : 150,
height : 50,
borderRadius : 9,
backgroundColor : '#fff',
top : 50,
left : 20,
});
var label1 = Ti.UI.createLabel({
width : 2,
height : 50,
top : 0,
left : 75,
});
text1.add(label1);
win1.add(text1);
win1.open();

Answer 4

To add a vertical line
var vline = Ti.UI.createView({
height: 44,
width: 1,
top: 0,
left: 85,
backgroundColor:'#CCC'
});
row.add(vline);

Answer 5

You just have to create a TableViewRow and add labels to it. There is not a ready template to this rows. But you can create an wrapper to it, if you will use it a lot. For example:
var createTableViewRowWithTitleAndValue(title, value) {
// TableViewRow
row = Ti.UI.createTableViewRow({
backgroundColor: "#FFFFFF"
});
// Title
row.add(Ti.UI.createLabel({
text: title,
left: 5,
font: { fontWeight: "bold" }
}));
// Value
row.add(Ti.UI.createLabel({
text: value,
right: 5,
textAlign: "right"
}));
}
Then, when you set data to TableView, instead you create a new TableViewRow, you create a new tableViewRowWithTitleAndValue, with title and value needed. For example:
rows.push(new createTableViewRowWithTitleAndValue("Foo", "Bar"));