TextInput - UI Module MyAccount - Controller Module App Theme Appcelerator 3.2.0.GA SDK

MyAccount.js

function MyAccount(_MainActivity){
	/*---------------------------------
	GROUP : Load Component Dependencies
	----------------------------------*/
	var H = require('/utils/Helper');
	var C = require('/Config');
	var UITextInput = require('/views/TextInput');


	/*---------------------------------
	GROUP : Properties
	----------------------------------*/
	var MainActivity = _MainActivity;


	/*---------------------------------
	GROUP : Functions
	----------------------------------*/


	/*---------------------------------
	GROUP : Construct UI
	----------------------------------*/
	var self = Ti.UI.createScrollView({
		showHorizontalScrollIndicator: false,
		showVerticalScrollIndicator: true,
		layout: 'vertical',
		scrollType: 'vertical',
		width: Ti.UI.FILL,
		height:  Ti.UI.FILL,
		backgroundColor: '#D4D3D4'
	});
	var Wrapper = MainActivity.getWrapper();
		Wrapper.applyProperties({
			layout: 'vertical'
		});

	var group = [];

		group['contact_information'] = Ti.UI.createView({
			width: Ti.UI.FILL,
			height: Ti.UI.SIZE,
			top: 6,
			left: '3%',
			right: '3%',
			borderRadius: H.px2dp(6),
			borderWidth: 1,
			borderColor: 'transparent',
			layout: 'vertical',
			backgroundColor: '#fff'
		});

	var field = [];

		field['fullname'] = new UITextInput({
			labelText: L('FORM_FIELD_FULLNAME'),
			hintText: '',
		});
		field['email'] = new UITextInput({
			labelText: L('FORM_FIELD_EMAIL'),
			hintText: '',
		});
		field['phoneNo'] = new UITextInput({
			labelText: L('FORM_FIELD_PHONENO'),
			hintText: '',
		});
		field['address'] = new UITextInput({
			labelText: L('FORM_FIELD_ADDRESS'),
			hintText: '',
		});
		field['city'] = new UITextInput({
			labelText: L('FORM_FIELD_CITY'),
			hintText: '',
		});
		field['country'] = new UITextInput({
			labelText: L('FORM_FIELD_COUNTRY'),
			hintText: '',
		});

	/*---------------------------------
	GROUP : Attach Elements
	----------------------------------*/
	self.add(Ti.UI.createLabel({
		text: L('FORM_GROUPLABEL_CONTACT_INFORMATION'),
		font: {
			fontSize: 16,
			fontFamily: C.fonts.Lato.regular
		},
		width: Ti.UI.FILL,
		height: 40,
		color: '#222',
		left: '5%',
		top: 6
	}));

	(function(){
		var group1 = ['fullname','email','phoneNo','address','city','country'];
		for(var k in group1){
			field[group1[k]].setMeta({
				left: '3%',
				right: '3%',
				separatorWidth: '0.9%',
				leftWidth: '25%',
				rightWidth: '68%'
			});
			group['contact_information'].add(field[group1[k]]);
		}

		field[group1[0]].setTop(6);
		field[group1[5]].setBottom(6);
	}());

	self.add(group['contact_information']);

	Wrapper.add(self);


	/*---------------------------------
	GROUP : Attach Behavior
	----------------------------------*/


	//Initialize
	MainActivity.setTitle(L('slidemenu_account'));

	return self;
}
module.exports=MyAccount;

TextInput.js

function TextInput(_meta){
	/*---------------------------------
	GROUP : Load Component Dependencies
	----------------------------------*/
	var C = require('/Config');
	var H = require('/utils/Helper');

	/*---------------------------------
	GROUP : Properties
	----------------------------------*/
	var meta = {
		labelText: 'Field Name',
		hintText: 'Type here...',
		left: '3%',
		right: '3%',
		separatorWidth: '0.9%',
		leftWidth: '37%',
		rightWidth: '56%'
	}

	if(_meta)
		meta = H.copy(meta,_meta);

	/*---------------------------------
	GROUP : Functions
	----------------------------------*/
	var setMeta = function(_meta){
		if(_meta)
			meta = H.copy(meta,_meta);

		label.applyProperties({
			left: meta.left,
			width: meta.leftWidth,
			text: meta.labelText
		});
		textInput.applyProperties({
			left: meta.separatorWidth,
			right: meta.right,
			width: meta.rightWidth,
			hintText: meta.hintText
		});
	};

	/*---------------------------------
	GROUP : Construct UI
	----------------------------------*/
	var self = Ti.UI.createView({
		width: Ti.UI.FILL,
		height: 50,
		layout: 'horizontal'
	});
	var label = Ti.UI.createLabel({
		left: meta.left,
		width: meta.leftWidth,
		height: Ti.UI.FILL,
		text: meta.labelText,
		font: {
			fontSize: 14,
			fontFamily: C.fonts.Lato.regular
		},
		color: '#222'
	});
	var textInput = Ti.UI.createTextField({
		right: meta.right,
		left: meta.separatorWidth,
		width: meta.rightWidth,
		verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP,
		textAlign: 'left',
		height: 'auto',
		hintText: meta.hintText,
		font: {
			fontSize: 14,
			fontFamily: C.fonts.Lato.regular
		},
		backgroundColor: 'red',
		ellipsize: true, //android only
		borderStyle: Titanium.UI.INPUT_BORDERSTYLE_LINE,
		borderWidth: 1,
		borderColor: 'yellow',
		color: '#222'
	});

	Ti.API.info(JSON.stringify(textInput));


	/*---------------------------------
	GROUP : Attach Elements
	----------------------------------*/
	self.add(label);
	self.add(textInput);

	/*---------------------------------
	GROUP : Attach Behavior
	----------------------------------*/
	label.addEventListener('click',function(){
		textInput.focus();
	});

	/*---------------------------------
	GROUP : Register Public Method
	----------------------------------*/
	self.setMeta = setMeta;

	//Initialize

	return self;
}
module.exports=TextInput;

theme.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="Theme.Titanium" parent="android:Theme.DeviceDefault.Light">
		<item name="android:windowNoTitle">true</item>
	</style>
    <style name="editText" parent="@android:style/Widget.EditText">
        <item name="android:textCursorDrawable">@null</item>
        <item name="android:includeFontPadding">false</item>
        <item name="android:paddingTop">0dp</item>
        <item name="android:paddingBottom">0dp</item>
        <item name="android:paddingLeft">0dp</item>
        <item name="android:paddingRight">0dp</item>
        <item name="android:hint">Text</item>
    </style>
</resources>