Creating a table row view with label and text field

You are pretty familiar with this view if you are a regular iPhone user. There are applications with username and password field, grouped together as shown in picture below. Now how can you simulate the same view in Titanium?

Here is the code

var win = Titanium.UI.currentWindow;
var view = Titanium.UI.createView({
    backgroundColor: "#FFFEEE"
});
var row1 = Ti.UI.createTableViewRow({
    height:'auto',
	selectionStyle:Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
});
var label1 = Titanium.UI.createLabel({
    text:'Username',
    left: 10
});
var usernametf = Ti.UI.createTextField({
    left: 100,
	right:10,
    hintText: 'username',
	textAlign:"right",
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE
});
var row2 = Ti.UI.createTableViewRow({
    height:'auto',
	selectionStyle:Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
});
var label2 = Titanium.UI.createLabel({
    text:'Password',
    left: 10
});
var passwordtf = Ti.UI.createTextField({
    left: 100,
	textAlign:"right",
    hintText: 'password',
	right:10,
	passwordMask:true,
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE
});
row1.add(label1);
row1.add(usernametf);
row2.add(label2);
row2.add(passwordtf);
var data = [row1,row2];
var table = Ti.UI.createTableView({
    data:data,
    style: Ti.UI.iPhone.TableViewStyle.GROUPED
});
var button = Ti.UI.createButton({
	title:"Done",
	height:45,
	width:300,
	top:150
});
view.add(table);
view.add(button);
win.add(view);
About these ads