HomePage RecentChanges TiO2

Titanium Oxide / Titanium Compound(ed)

NEWS

I have created a basic web site to progress the development further:

What is it

This is a library to do repeatable things for Titanium Appcelerator mobile.

Form Layout

Basic and more advanced form layout. No more manual layout, absolute positioning, instead it packs the fields and labels together into a single view. This also means you can set and retrieve the values for the view in one function.

The old way

#!JavaScript

var view = Ti.UI.createView({
	borderRadius: 12, 
	height: 'auto', 
	width: 'auto', 
	top: 10 
}));

var label1 = Titanium.UI.createLabel({
	color:'#000',
	text: 'First name',
	textAlign:'right',
	top: 10,
	height: 35,
	left: 10,
	width: 100,
});
view.add(label1);

var field1 = Titanium.UI.createTextField({
	hintText: 'Type data here',
	value: 'old',
	height: 35,
	top: 10,
	left: 105,
	width: 250,
	borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});
field1.addEventListener('blur', function(b) { alert("You changed first name to: " + b.value); });
view.add(field1);

var label2 = Titanium.UI.createLabel({
	color:'#000',
	text: 'Last name',
	textAlign:'right',
	top: 50,
	height: 35,
	left: 10,
	width: 100,
});
view.add(label2);

var field2 = Titanium.UI.createTextField({
	hintText: 'Type data here',
	value: 'old',
	height: 35,
	top: 50,
	left: 105,
	width: 250,
	borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
});
view.add(field2);

win1.add(view);

And that was adding only two fields !

The new way

Here it is again adding 6 fields, and more complex controls.

#!JavaScript
var form = new TiO2.FormLayout.Standard({
	// Override the default width?
	fieldWidth: 'auto',
	items: [
		{
			name: 'first',
			label: 'First name',
			blur: function(b) { alert("You changed first name to: " + b.value); }
		},
		{
			name: 'family',
			label: 'Family name',
			// Example of how to override individual width
			options: {
				width: 250,
			},
		},
		{
			name: 'email',
			label: 'Email address',
			type: 'email',
		},
		{
			name: 'password',
			label: 'Password',
			type: 'password',
			retype: true,
		},
		{
			name: 'university',
			label: 'University',
			type: 'clickpicker',
			list: ['A', 'B', 'C'],
		},
		{
			name: 'test',
			label: 'Little pick',
			type: 'picker',
			list: function() {['A', 'B', 'C']},
		},
	],
	buttons: [
		{
			name: 'submit',
			label: 'Regsister account',
			type: 'button',
			options: {
				height: 65,
			},
		}
	],
});

Adding a new type

You can add a new type after loading the class like this:

#!JavaScript
TiO2.FormLayout.FieldType.yourtype = function(entry, form) {
    var field = TiO2.FormLayout.Util.basicTextField(entry, form, {
        passwordMask: true,
        autocorrect: false,
    });
    form.view.add(field);
    return field;
};

Overloading the defaults

Each field you define can have default values set, which will be used in preference to the defaults within the form. A simple example is 'width':

#!JavaScript
...
	fieldWidth: 500,
	items: [
		{
			name: 'family',
			label: 'Family name',
			options: {
				width: 250,
			},
		},
...

In this example we have set the fieldWidth to 500. This sets the width of each field to 500, if it was not specifically set in options.

Another example is changing the keyboard type.

#!JavaScript
		{
			name: 'email',
			label: 'Email',
			options: {
				keyboardType: Titanium.UI.KEYBOARD_EMAIL
			},
                }

Here we have set the keyboard type to Email, but we are only using a standard text field type.

Software error:

Can't locate object method "endform" via package "CGI" at /data/scott.dd.com.au/wiki/modules/search.pl line 15.

For help, please send mail to the webmaster (webmaster@dd.com.au), giving this error message and the time and date of the error.