Float label field

This module for Appcelerator Titanium wraps JVFloatLabeledTextField for iOS (TODO: Android).

Preview

Credits for the concept to Matt D. Smith (@mds), and his original design:

Credits for the iOS implementation to @jverdi.

Quick Start

Get it

Download this repository or one release and install it:

In your application's tiapp.xml file, include the following line in your <modules> tag:

<module platform="ios">ts.floatlabelfield</module>

Copy the module zip file into your application root directory.

Use it

Require the module in a view:

<!-- TextField -->
<Module module="ts.floatlabelfield" method="createTextFieldView" id="floatField" />
<!-- TextView -->
<Module module="ts.floatlabelfield" method="createTextViewView" id="floatView" />

Which create a reference in your controller, accessible via: $.floadField

Or, require it directly in a controller :

var floatlabelfield = require('ts.floatlabelfield').createTextFieldView({ _[PARAMS]_ );
var floatlabelview = require('ts.floatlabelfield').createTextFieldView({ _[PARAMS]_ );

Example:

var flf = require('ts.floatlabelfield');

// open a single window
var win = Ti.UI.createWindow({
    backgroundColor:'white',
    layout: 'vertical'
});

var floatlabelfield = flf.createTextFieldView({
    height: Ti.UI.SIZE,
    width: Ti.UI.SIZE,
    top: 150,
    fontSize: '18dp',
    textColor: '#2c3e50',
    placeholderTextColor: '#8d8d8d',
    placeholderText: "short description",
    floatingLabelFontSize: '12dp',
    floatingLabelTextColor: "#2980b9",
    debug: false
});
win.add(floatlabelfield);

var floatlabelview = flf.createTextViewView({
    height: 150,
    width: 150,
    top: 50,
    fontSize: '10dp',
    textColor: '#2c3e50',
    placeholderTextColor: '#bdc3c7',
    placeholderText: "short description",
    floatingLabelFontSize: '7dp',
    floatingLabelTextColor: "#2980b9",
    debug: false
});
win.add(floatlabelview);
win.open();

Documentation

Properties

You can pass properties during initialization or later:

Parameter	Type	Description
fontSize	int	Size of all texts inside field
textColor	String	Color of written text inside field
placeholderTextColor	String	Color of placeholder text inside field
placeholderText	String	Placeholder text value
floatingLabelFontSize	int	Size of the floating label above field
floatingLabelTextColor	String	Color of the floating label above field
value	String	Value of the field (user input)
debug	Bool	Switch module logging on with `debug: true`

Public methods

Here is a list of all accessible methods and the associated expected behaviour:

Method	Description
setFontSize	Set fontSize property
setTextColor	Set textColor property
setPlaceholderTextColor	Set placeholderTextColor property
setPlaceholderText	Set placeholderText property
setFloatingLabelFontSize	Set floatingLabelFontSize property
setFloatingLabelTextColor	Set floatingLabelTextColor property
setValue	Set field's value

Method	Description
getValue	Returns field's value

Events

You can listen for events by simply adding an event listener:

In an Alloy view:

<Module module="ts.floatlabelfield" method="createTextFieldView" id="floatField" onChange="onFieldChange" />

In an Alloy controller:

$.floatField.addEventListener("change", onFieldChange);

You can now bind the change listener in your controller:

function onFieldChange(e) {
    Ti.API.info('Field value changed for ' + e.value);
}

Supported events

Here is a list of all supported events and the associated expected behaviour:

Event	Description
change	Triggers when user changes field's value. Contains `value`.

TODO / Ideas for improvement

Feel free to improve this widget by forking, submitting pull requests or creating issues.
Here are my ideas:

Wrap an Android implementation

Changelog

1.0 First version

Dependencies

JVFloatLabeledTextField

Licences

JVFloatLabeledTextField is licensed under the MIT license.

Appcelerator, Appcelerator Titanium and associated marks and logos are trademarks of Appcelerator, Inc.
Titanium is Copyright (c) 2008-2015 by Appcelerator, Inc. All Rights Reserved.
Titanium is licensed under the Apache Public License (Version 2).

davidcyp/ts.floatlabelfield