Skip to content

Commit

Permalink
upload beta 1
Browse files Browse the repository at this point in the history
  • Loading branch information
jaraen committed Jun 26, 2014
1 parent d9f63f6 commit bbea3b6
Show file tree
Hide file tree
Showing 164 changed files with 989,578 additions and 208 deletions.
112 changes: 95 additions & 17 deletions README.md
Expand Up @@ -25,8 +25,8 @@ Find more info about ux mobile patterns in our website [www.uxmobilepatterns.com

##Multiplatform Support

The project has been developed and fully works on iPhone. Although the UX has been designed with iPhone users in mind, most components also work on android
and our intention is to give full support to get the templates and widgets working in both platforms.
The project has been developed for and fully works on iPhone. Although the UX has been designed with iPhone users in mind, most components also work on android
and our intention is to give full support to the templates and widgets working in both platforms.


## Templates
Expand Down Expand Up @@ -76,7 +76,7 @@ coming soon...

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 in for zoomin.
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
Expand All @@ -89,10 +89,18 @@ Features:

Distributes horizontally all children elements added in its creation.

If no `width` 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
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.
Expand All @@ -102,14 +110,6 @@ Use `innerMargin` to set the limits of the parallax fx. Use `realTop` property i
the scroll event by the parent container (tipically a table view or a scrollview)


### ti.ux.expandabletext

A clickable label that expands its size. Properties accepted:

`height`

Uses style `paragraph`

### ti.ux.forms.row.optionspicker

Extends TableViewRow to be used in a settings form. Clicking on it, opens a selector of options.
Expand All @@ -118,7 +118,7 @@ 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 //now only optionsdialog works
`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)

Expand All @@ -141,10 +141,29 @@ Properties:

`title`
`hintText`
`type`
`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.

In development: support for different validation methods and keyboards just setting the type property
Email, url, number and so on uses their own validators and customizes the keyboard


### ti.ux.forms.scrollableform
Expand Down Expand Up @@ -272,16 +291,26 @@ 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 titles above the textfield.
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](http://fortawesome.github.io/Font-Awesome/icons/). Fully customizable.

Properties:

`icon`
`size`
`iconColor`

### ti.ux.iconfont

A label that accepts [FontAwesome 4.1.0 codes](http://fortawesome.github.io/Font-Awesome/icons/) 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
Expand All @@ -308,7 +337,7 @@ The widget can be declared in Alloy in the xml view file, but must be initialize

```

Then, in the controller
In the controller

```javascript
/* SCROLLABLE VIEW FUNCTIONS */
Expand Down Expand Up @@ -346,11 +375,60 @@ This is an example of pagingControl styling:
```

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.

```xml
<Widget src="ti.ux.popup" id="mapPopup" platform="ios" closeButton="true">
<Module id="mapview" module="ti.map" method="createView" />
</Widget>
```

to show the popup

```javascript
$.mapPopup.show();
```


### ti.ux.popup.list


![ti.ux.popup.list widget](https://raw.githubusercontent.com/jaraen/Ti.UX.Templates/master/screenshots/ti.ux.popup.list.png)

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

```javascript
$.OPTIONS = ['bike', 'car', 'canoa' , 'plane', 'wings'];

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

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

popupDialog.getView().show();
```


### ti.ux.scrollableview

Expand Down
7 changes: 6 additions & 1 deletion app/config.json
Expand Up @@ -11,7 +11,8 @@
"os:ios": {
"fontBold":"Avenir-Heavy",
"fontNormal":"Avenir-Light",
"fontLight":"Avenir-Light"
"fontLight":"Avenir-Light",
"fontItalic":"Avenir-LightOblique"
},
"os:mobileweb": {},
"dependencies": {
Expand All @@ -27,10 +28,14 @@
"ti.ux.expandabletext":"1.0",
"ti.ux.scrollableview":"1.0",
"ti.ux.pagingcontrol":"1.0",
"ti.ux.popup":"1.0",
"ti.ux.popup.list":"1.0",
"ti.ux.rowitem":"1.0",
"ti.ux.stickyview":"1.0",
"ti.ux.forms.row.optionspicker":"1.0",
"ti.ux.forms.row.switch":"1.0",
"ti.ux.forms.row.text":"1.0",
"ti.ux.forms.row.timepicker":"1.0",
"ti.ux.forms.text":"1.0",
"ti.ux.forms.scrollableform":"1.0"

Expand Down
5 changes: 3 additions & 2 deletions app/controllers/MainMenu.js
Expand Up @@ -26,9 +26,10 @@ function openItem(e){

function openWorkingItem(){
$.tableView.removeEventListener('postLayout', openWorkingItem);
//openItem({row:{controller:'templates/DetailSample1'}});
openItem({row:{controller:'templates/Franky'}});
}

//$.tableView.addEventListener('postlayout', openWorkingItem);

setTimeout(openWorkingItem, 300);
//just for testing, opens the item automatically
//setTimeout(openWorkingItem, 300);
30 changes: 0 additions & 30 deletions app/controllers/index.js
@@ -1,36 +1,6 @@

if(OS_IOS){
Alloy.Globals.navWindow = $.navWindow;


var mod = require('bencoding.blur');

//Blur effect for iOS
var blurView = mod.createView({
height:Ti.UI.FILL,
width:Ti.UI.FILL,
blurLevel:5, blurCroppedToRect:false,
backgroundView:$.menuView
});

$.navWindow.addEventListener('open',function(d){

var container = Ti.UI.createView({
backgroundColor:"#fff", borderRadius:20,
top:100, height:150, left:40, right:40
});

blurView.add(container);

var label = Ti.UI.createLabel({
text:"Show how to blur like the yahoo weather app.",
color:"#000", width:Ti.UI.FILL,
height:50, textAlign:"center"
});

container.add(label);

});
}

$.navWindow.open();
Expand Down
90 changes: 90 additions & 0 deletions app/controllers/templates/FormDemo.js
@@ -0,0 +1,90 @@

var formData = {
fields: [
{
id: 'username',
title:'username',
inputType:'text',
mandatory: true,
tipText:'Please, fill in your name',
autofocus: true
},

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

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

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

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




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


function closeForm(){
$.win.close();
}

0 comments on commit bbea3b6

Please sign in to comment.