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.

  • Layout - e.g. Basic form layout
  • Caching - e.g. downloading JSON and Resources (images et al) to the local storage
  • Database sync - e.g. syncrhonising local (offline) data onto a server
  • GUI Builder - e.g. a gui to build Layouts

Form Layout

  • STATUS = Demo working

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

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.

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:

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;
};

  • 'entry' is an object of the input data including the defaults
    • name - unique name of this field. Useful for returning all values of a form.
    • value - the current value to set
    • list - For some types, e.g. Picker you need a list of possible values
    • retype - Password entry that asks you to retype the password for acceptance
    • label - the text used for the label (already created)
    • options - see overriding below
    • blur, click - events to add
    • Other standard text field options: hintText,
  • 'form' is an object of the form creating this
    • Positioning: lastTop, labelLeft, labelWidth, labelSep, fieldWidth, borderStyle

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':

...
	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.

		{
			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.