README

Redux has a simple goal:
To reduce the amount of code you need to write when using Appcelerator Titanium.

To use its features, include the redux.js or redux.min.js file at the top of your app.js:

<pre>
Ti.include('redux.js');

</pre>


FEATURES
====================


SHORTHAND FOR COMMON FUNCTIONS
---------------------

Some functions you use all the time. Redux makes them shorter, and easier to type.

**Normal Code**					
<pre>Titanium.API.info('hi');		
Titanium.API.error('hi');		
Titanium.API.warn('hi');		
Titanium.API.log('hi');			
Titanium.include('foo.js');</pre>		

**Redux Code**		
<pre>info('hi');		
error('hi');		
warn('hi');		
log('hi');		
include('foo.js');</pre>	
	
MORE POWERFUL INCLUDE FUNCTIONS
----------------------------------------------

Include files or JSS across all of your JavaScript contexts, so long as they have redux loaded.

**Normal Code**
<pre>
/* In every file */
Ti.include('a.js', 'b.js', 'c.js');
</pre>

**Redux Code**
<pre>
/* In your app.js */
Ti.include('redux.js');
includeGlobal('a.js', 'b.js', 'c.js');
includeJSSGlobal('d.jss');

/* In your other js files */
Ti.include('redux.js');
</pre>


UI CONSTRUCTION
---------------------

Create new Ti elements using the new Constructor() syntax you're used to in JavaScript.
Note that by making your elements this way, you also get to take advantage of other
Redux features like JSS, default properties, and more. You can use this syntax for any
element normally created using the syntax Ti.\*.create\*. For example, Ti.Network.createHTTPClient()
and Ti.UI.createLabel() could instead by new HTTPClient() or new Label(), respectively.

**Normal Code**		
<pre>var label = Titanium.UI.createLabel();</pre>

**Redux Code**		
<pre>var label = new Label();</pre>

**Warning**
On iPhone, Titanium optimizes your installation packages based on what Titanium elements you use. By using redux, it can't tell which to include or exclude. But we can fix this easily by giving it blatant hints in our app.js, like this:
<pre>
/* Trick Titanium into including the packages we want */
Titanium.UI.createLabel;
Titanium.UI.createWebView;
</pre>

Now we can use the short redux constructors without worrying about Titanium accidentally excluding something we are using.

SELECTING ELEMENTS
---------------------

When you create elements using redux, you can select them out later much like you can in
the popular JavaScript library jQuery.

**Normal Code**		
<pre>Not Supported</pre>		

**Redux Code**		
<pre>var label = new Label({ className: 'labelClass', id: 'labelWithID' });	
var allMyLabels = $('Label');	
var labelsWithClass = $('.labelClass');	
var labelByID = $('#labelWithID');	
alert(labelByID[0] = label);</pre>	


UI PROPERTY DEFAULTS BY ELEMENT TYPE
----------------------------------------------

You can specify default properties for your UI elements. This lets you specify properties
in one place, and for multiple elements. This is especially useful for application wide
settings, like fonts and colors, but also useful to help you keep your design logic out of
your business logic. Note that property defaults by element type are considered less
important than property defaults by ID or properties passed in to the constructor, and can be
overridden by either of these.

**Normal Code**		
<pre>Not Supported</pre>		

**Redux Code**		
<pre>Label.setDefault({ font: {fontWeight: 'bold' } });		
var label = new Label();		
alert(label.font.fontWeight == 'bold');</pre>		


UI PROPERTY DEFAULTS BY SELECTOR
----------------------------------------------

Using a similar method to setting UI Property Defaults by Element Type, you can set them
for your UI elements by their IDs or class names. Note that property defaults by ID are considered more
important than default properties by element type and class names, and will override them.

**Normal Code**	
<pre>Not Supported</pre>	

**Redux Code**		
<pre>$.setDefault('#myID', { text: 'Hello, World!', color: 'red' });	
$.setDefault('.myClassName', { font: { fontSize: 12 }, color: 'green' });
var label = new Label({ id: 'myID', className: 'myClass', color: 'blue' });	
alert(label.text == 'Hello, World!');	
alert(label.color == 'blue');
alert(label.font.fontSize == 12);</pre>



EVENT BINDING
----------------------------------------------

Bind events in a more natural way. Note the wrapping $().

**Normal Code**	
<pre>var button = Titanium.UI.createButton({ title: 'Click Me!' });	
button.addEventListener('click', function() { alert('clicked!'); });	
button.fireEvent('click');	
button.fireEvent('click', {src: 'me'});</pre>	

**Redux Code**	
<pre>var button = new Button({ title: 'Click Me!' });	
$(button).click(function() { alert('clicked!'); });	
         .click();	
         .click({src: 'me'});</pre>	


You can add support for custom events.	
**Normal Code**	
<pre>button.addEventListener('myCustomEvent', function() { });</pre>	

**Redux Code**	
<pre>$.addEventBinder('myCustomEvent');	// only needs to be called once, then can be used again and again
$(button).myCustomEvent(function() { });</pre>	


JSS
----------------------------------------------

JSS, or JavaScript Style Sheets, let you create CSS-like rules to style your UI elements.
Note that JSS can only style elements you create using Redux's method of creating elements,
and that this isn't actual CSS.

**Normal Code**
Not Supported until Version 1.5 (even then, some features here won't be supported)

**Redux Code** for Including JSS from your app.js (or any .js file)
<pre>includeJSS('common.jss');</pre>

**Redux Code** for including JSS across all of your .js files, so long as they include redux
<pre>includeJSSGlobal('common.jss');</pre>

**Redux Code** for Styling Elements from common.jss (or any .jss file)
<pre>Window {
	backgroundColor: '#fff'
}
Label {
	backgroundColor: '#faa',
	color: '#333'
}
/* add an attribute that will act as a filter */
[Platform.osname="android"] Label {
	backgroundColor: '#aaf',
	color: '#666'
}
/* select by id */
#HelloWorld {
	left: 15,
	right: 15,
	height: 70,
	top: 50
}
[Platform.locale="en"] #HelloWorld {
    text: 'Hello, World!'
}
[Platform.locale="es"] #HelloWorld {
    text: 'Bienvenido, Mundo!'
}
/* by className */
.myClass {
	text: 'Set by class'
}
/* by multiple selectors */
.selector1, #selector2, Label {
  text: 'Set for all three selectors'
}</pre>


Here are some key features to note--you'll want to use them:
	1) Include as many .jss files as you need to keep yourself organized.
	2) Have as many rules as you need.
	3) Have multiple rules for a single element.
	4) Attributes can use anything in the Ti namespace. I happened to use Platform.locale.
	5) Attributes can work negatively too -- [Platform.locale!="en"]
	6) White space doesn't matter; put it where you want it.
	7) You can localize your app using the [Platform.locale="whatever"] attribute.
	8) The includeJSS function can take in multiple files or just one; it's up to you.
  9) #HelloWorld has higher precedence than the Label rule.
  10) Chain selectors to reduce the amount of JSS you need to write (ie Window, Label { backgroundColor: '#fff' }).
  11) Chaining attributes (ie [Platform.osname="iphone"][Platform.osname="ipad"] Window { backgroundColor: '#bef'}).


CONTACT INFORMATION
===========================

Redux was made by Dawson Toth from TothSolutions, LLC. (www.tothsolutions.com).
TothSolutions, LLC. uses Appcelerator every day to create mobile applications for
its clients, and created Redux to ease that process and give back to the community
that created Appcelerator.

We can be contacted through our website -- www.tothsolutions.com/Contact