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
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<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:
1 2 3 4 |
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.
1 2 3 4 5 6 7 8 |
<ScrollableView id="scrollableView" onPostlayout="linkScrollableView" onScrollEnd="updatePagingControl"> <Label text="View 1" /> <Label text="View 2" /> <Label text="View 3" /> </ScrollableView> <Widget src="ti.ux.pagingcontrol" id="pagingControl" backgroundColor="#fff" top="0"/> |
In the controller
1 2 3 4 5 6 7 8 9 10 11 |
/* 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
".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.
1 2 3 4 |
<Widget src="ti.ux.popup" id="mapPopup" platform="ios" closeButton="true"> <Module id="mapview" module="ti.map" method="createView" /> </Widget> |
to show the popup
1 2 |
$.mapPopup.show(); |
ti.ux.popup.list
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
1 2 3 4 5 6 7 8 9 10 11 |
$.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.