Components | Ti UX Templates

PLEASE NOTE THIS TEXT IS UNDER DEVELOPMENT. MOST PROPERTIES ARE NOT DOCUMENTED YET. PLEASE, REFER TO THE EXISTENT EXAMPLES TO SEE HOW TO USE THEM

Alloy Widgets

widgets franky 1

widgets franky 2

widgets form settings

widgets form signup

com.criteriastudio.RemoteImageView

An image view that downloads and automatically manages its own cache. Also works with local images.

It also adds properties to the image, doing it zoomable, it is, click for view fullscreen and pinch for zoomin.

Features:
– manages its own local cache
– shows a loading indicator with progress while loads a remote picture
– set zoomable property to true open a new window with a zoomable fullscreen image, showing an small loupe icon
– Support for retina images after saving in cache
– Also works with local images

ti.ux.alignview

Distributes horizontally all children elements added in its creation.

If no width property is set, it takes the parent width. You can set width property if the view is smaller than the parent or if the parent view is a
scrollView where you want to align all the elements.

ti.ux.expandabletext

A clickable label that expands its size. Properties accepted:

height

Uses style paragraph

ti.ux.image

this component envelopes com.criteriastudio.RemoteImageView widget for easier management.
Also adds vertical parallax FX to it.

Use innerMargin to set the limits of the parallax fx. Use realTop property indicating the real from the window top edge. This is required to correctly manage
the scroll event by the parent container (tipically a table view or a scrollview)

ti.ux.forms.row.optionspicker

Extends TableViewRow to be used in a settings form. Clicking on it, opens a selector of options.

Properties:

title: Title to show in the row
options : array of string with the options to show to the user
type: Type of dialog to show. optionsdialog | popup | modalwindow //modal window not implemented yet
value: index of the selected value by default
cancel: cancel option index in options (optional)

ti.ux.forms.row.switch

Extends TableViewRow to be used in a settings form. Adds a switch and a title to the row

Properties:

title: Title to show in the row
value : true | false Default value for the switch

ti.ux.forms.row.text

Extends TableViewRow to be used in a settings form. Adds a text field to the form

Properties:

title
hintText
type: text|email|url|number|textarea
value

If textarea is used in type property, a modal window opens with a big text area when the control receives the focus.

Email, url, number and so on uses their own validators and customizes the keyboard

ti.ux.forms.row.timepicker

Extends TableViewRow to be used in a settings form. Shows a datepicker.

Properties:

title
value
minDate
maxDate
format: format used in the value field

If textarea is used in type property, a modal window opens with a big text area when the control receives the focus.

Email, url, number and so on uses their own validators and customizes the keyboard

ti.ux.forms.scrollableform

<Widget src="ti.ux.forms.scrollableform" id="form"></Widget>

Creates a form assistant (each field in one scrollable view). Initialize the widget with a json data structure,
indicating the fields to create, properties for each field, callback methods (in case it is cancelled or validated).

A validation method is automatically assigned to each field depending on its type property. A custom validator method
can be declared for each field.

Declaring a type customizes the keyboard, passwordMask and validator method. Supported types are:

text
password
email
phone
number
url

Default type is text

This is an example of json form data:

<br />var formData = {
    fields: [
        {
            id: &amp;#039;username&amp;#039;,
            title:&amp;#039;username&amp;#039;,
            inputType:&amp;#039;text&amp;#039;,
            mandatory: true,
            tipText:&amp;#039;Please, fill in your name&amp;#039;,
            autofocus: true
        },

        {
            id:&amp;#039;website&amp;#039;,
            title:&amp;#039;Your website&amp;#039;,
            inputType:&amp;#039;url&amp;#039;,
            mandatory: false,
            tipText: &amp;#039;Please, fill in a valid website or leave it blank.&amp;#039;,
            autofocus: true
        },

        {
            id:&amp;#039;email&amp;#039;,
            title:&amp;#039;e-mail&amp;#039;,
            inputType:&amp;#039;email&amp;#039;,            //e-mail includes its own validate method, so no need to overwrite it
            mandatory: false,
            tipText:&amp;#039;Please, fill in your e-mail account&amp;#039;,
            autofocus: true
        },
        {
            id:&amp;#039;password&amp;#039;,
            title:&amp;#039;password&amp;#039;,
            inputType:&amp;#039;password&amp;#039;,
            mandatory: true,
            hintText:&amp;#039;6 characters at least&amp;#039;,
            tipText:&amp;#039;Set your password&amp;#039;,
            errorText: &amp;#039;The password must contain at least 6 characters&amp;#039;,
            autofocus: true,
            validate:function(value){   //customize our own password validation
                Ti.API.info(&amp;#039;custom validation called w value: &amp;#039; + value);
                return value &amp;&amp; (""+value).length &gt;= 6;
            }
        },
        {
            id:&amp;#039;confirm-password&amp;#039;,
            title:&amp;#039;Confirm password&amp;#039;,
            inputType:&amp;#039;password&amp;#039;,
            mandatory: true,
            hintText:&amp;#039;6 characters at least&amp;#039;,
            tipText:&amp;#039;Repeat the same password, please.&amp;#039;,
            errorText: &amp;#039;The passwords does not match.&amp;#039;,
            autofocus: true,
            validate:function(value){   //customize our own password validation
                return value == $.form.getFieldValue(&amp;#039;password&amp;#039;);     //you can query any form password already introduced
            }
        },
        {
            id:&amp;#039;phone&amp;#039;,
            title:&amp;#039;mobile number&amp;#039;,
            inputType:&amp;#039;phone&amp;#039;,
            mandatory: false,
            tipText:&amp;#039;Insert your phone number&amp;#039;,
            autofocus: true
        }
    ],
    onCancel: function(e){                      //Cancel callback function
        alert(&amp;#039;form cancelled&amp;#039;);
    },

    onFinish: function(data){                   //Callback called after last field is validated
        alert("This is your form result: nn" + JSON.stringify(data, &amp;#039;&amp;#039;, 4));
        $.win.close();
    },

    onFieldValidated: function(data){           //Callback called each time a field is validated
        Ti.API.info(&amp;#039;Field validated: &amp;#039; + JSON.stringify(data));
    }
};

<br />var formData = {

fields: [

{

id: &#039;username&#039;,

title:&#039;username&#039;,

inputType:&#039;text&#039;,

mandatory: true,

tipText:&#039;Please, fill in your name&#039;,

autofocus: true

{

id:&#039;website&#039;,

title:&#039;Your website&#039;,

inputType:&#039;url&#039;,

mandatory: false,

tipText: &#039;Please, fill in a valid website or leave it blank.&#039;,

autofocus: true

{

id:&#039;email&#039;,

title:&#039;e-mail&#039;,

inputType:&#039;email&#039;, //e-mail includes its own validate method, so no need to overwrite it

mandatory: false,

tipText:&#039;Please, fill in your e-mail account&#039;,

autofocus: true

{

id:&#039;password&#039;,

title:&#039;password&#039;,

inputType:&#039;password&#039;,

mandatory: true,

hintText:&#039;6 characters at least&#039;,

tipText:&#039;Set your password&#039;,

errorText: &#039;The password must contain at least 6 characters&#039;,

autofocus: true,

validate:function(value){ //customize our own password validation

Ti.API.info(&#039;custom validation called w value: &#039; + value);

return value && (""+value).length >= 6;

}

{

id:&#039;confirm-password&#039;,

title:&#039;Confirm password&#039;,

inputType:&#039;password&#039;,

mandatory: true,

hintText:&#039;6 characters at least&#039;,

tipText:&#039;Repeat the same password, please.&#039;,

errorText: &#039;The passwords does not match.&#039;,

autofocus: true,

validate:function(value){ //customize our own password validation

return value == $.form.getFieldValue(&#039;password&#039;); //you can query any form password already introduced

}

{

id:&#039;phone&#039;,

title:&#039;mobile number&#039;,

inputType:&#039;phone&#039;,

mandatory: false,

tipText:&#039;Insert your phone number&#039;,

autofocus: true

}

onCancel: function(e){ //Cancel callback function

alert(&#039;form cancelled&#039;);

onFinish: function(data){ //Callback called after last field is validated

alert("This is your form result: nn" + JSON.stringify(data, &#039;&#039;, 4));

$.win.close();

onFieldValidated: function(data){ //Callback called each time a field is validated

Ti.API.info(&#039;Field validated: &#039; + JSON.stringify(data));

}

};

To create the form, just call it in you onOpen window event:

function initForm(){
    $.form.init(formData);
}

function initForm(){

$.form.init(formData);

}

About validators

Validators may include or not a callback function. A callback function can be useful when the validation requires
a remote connection (for example, to check if a username already exists). If a callback function is used, an
activityIndicator is shown during the validation.

Have a look to lib/validators.js to see a few examples of validators.

ti.ux.forms.text

A boxed label and textfield with validation methods. Includes a title above the textfield. Thought to be used in scrollable step-by-step forms.

ti.ux.iconbutton

A button that accepts FontAwesome 4.1.0 codes. Fully customizable.

Properties:

icon
size
iconColor

ti.ux.iconfont

A label that accepts FontAwesome 4.1.0 codes codes

icon the font awesome icon code
iconColor
size

ti.ux.iconlabel

An icon with a label besides it. The icon can be an image, using image property or a
FontAwesome 4.1.0 codes code using icon property.

ti.ux.iconvalue

An icon with a label below it. The icon can be an image, using image property or a
FontAwesome 4.1.0 codes code using icon property.

ti.ux.pagingcontrol

A paging control that can be embebbed to any scrollable view and stylized in style files.

The widget can be declared in Alloy in the xml view file, but must be initialized in code, after the scrollable view is drawn.

&lt;ScrollableView id="scrollableView" onPostlayout="linkScrollableView" onScrollEnd="updatePagingControl"&gt;
    &lt;Label text="View 1" /&gt;
    &lt;Label text="View 2" /&gt;
    &lt;Label text="View 3" /&gt;
&lt;/ScrollableView&gt;
&lt;Widget src="ti.ux.pagingcontrol" id="pagingControl" backgroundColor="#fff" top="0"/&gt;

</ScrollableView>

In the controller

/* SCROLLABLE VIEW FUNCTIONS */

function linkScrollableView(){
    $.scrollableView.removeEventListener(&amp;#039;postlayout&amp;#039;, linkScrollableView);
    $.pagingControl.linkScrollableView($.scrollableView);
}

function updatePagingControl(e){
    $.pagingControl.setActiveDot(e.currentPage);
}

/* SCROLLABLE VIEW FUNCTIONS */

function linkScrollableView(){

$.scrollableView.removeEventListener(&#039;postlayout&#039;, linkScrollableView);

$.pagingControl.linkScrollableView($.scrollableView);

}

function updatePagingControl(e){

$.pagingControl.setActiveDot(e.currentPage);

}

This is an example of pagingControl styling:

".view-pagingcontrol":{
    height:"10",
//  backgroundColor:"#fff",
    zIndex: "999",
    width: Ti.UI.SIZE
},
".view-pagingcontrol-dot":{
    height:4,
    width:4,
    borderRadius:2
},
".view-pagingcontrol-dot-active":{
    backgroundColor:"#000"
}
".view-pagingcontrol-dot-inactive":{
    backgroundColor:"#999"
}

".view-pagingcontrol":{

height:"10",

// backgroundColor:"#fff",

zIndex: "999",

width: Ti.UI.SIZE

".view-pagingcontrol-dot":{

height:4,

width:4,

borderRadius:2

".view-pagingcontrol-dot-active":{

backgroundColor:"#000"

}

".view-pagingcontrol-dot-inactive":{

backgroundColor:"#999"

}

Note that the pagingControl can be in or outside the scrollable control.

ti.ux.rowitem

A TableViewRow widget, that accepts title, subtitle and count properties.

ti.ux.popup

A customizable fullscreen popup window, to add any content to it.

use closeButton to show a cross button in the top right corner of the content. The popup also can be dismissed touching the background.

&lt;Widget src="ti.ux.popup" id="mapPopup" platform="ios" closeButton="true"&gt;
    &lt;Module id="mapview" module="ti.map" method="createView" /&gt;
&lt;/Widget&gt;

</Widget>

to show the popup

    $.mapPopup.show();

1 2	$.mapPopup.show();

ti.ux.popup.list

ti.ux.popup.list widget

A customizable fullscreen popup list to show a closed list of options.

closeButton shows a cross button in the top right corner
selectable determines if the items in the list are selectable (use false for showing a list of items)
options array of strings, each element is an item in the list
value selected item in the list (only if selectable is true)

You can define the popup in the alloy view or inside the controler in runtime.

This example shows how to declare a selectable list and retrieve the selected option

    $.OPTIONS = [&amp;#039;bike&amp;#039;, &amp;#039;car&amp;#039;, &amp;#039;canoa&amp;#039; , &amp;#039;plane&amp;#039;, &amp;#039;wings&amp;#039;];

    var popupDialog = Alloy.createWidget(&amp;#039;ti.ux.popup.list&amp;#039;, &amp;#039;widget&amp;#039;, {closeButton:false, selectable:true, options:$.OPTIONS, value:2});

    popupDialog.getView(&amp;#039;table&amp;#039;).addEventListener(&amp;#039;click&amp;#039;, function(e){
        Ti.API.info(&amp;#039;optionSelected &amp;#039; + e.index + &amp;#039;, name: &amp;#039; + e.row.data.title);
        popupDialog.hide();
    });

    popupDialog.getView().show();

$.OPTIONS = [&#039;bike&#039;, &#039;car&#039;, &#039;canoa&#039; , &#039;plane&#039;, &#039;wings&#039;];

var popupDialog = Alloy.createWidget(&#039;ti.ux.popup.list&#039;, &#039;widget&#039;, {closeButton:false, selectable:true, options:$.OPTIONS, value:2});

popupDialog.getView(&#039;table&#039;).addEventListener(&#039;click&#039;, function(e){

Ti.API.info(&#039;optionSelected &#039; + e.index + &#039;, name: &#039; + e.row.data.title);

popupDialog.hide();

});

popupDialog.getView().show();

ti.ux.scrollableview

A Titanium ScrollableView with customizable pagingControl through alloy styles.

ti.ux.spacer

A white space widget to leave blank spaces between rows or components.

ti.ux.title

A title label styling class label-H1

Credits

Dreamed up by Sonia Villanueva and Javier Rayon in 2014.

UX strategy and mock-ups by Sonia

Titanium code and documentation by Javier

Themes designs and extra energy push by Mai Berreando. She gift some of the coolest designs we have seen, among some beautiful cactus.

We use the incredible work and technology done by:

Orignal FontAwesome Titanium module by Kosuke Isobe

License

All parts of this project are fully open source and is GPL friendly. You can use it for commercial projects, open source projects,
or really just about whatever you want.

Attribution is not required, but appreciated. Among anything else, we will love to know what you did with our work.