Titanium UI State Manager

March 9, 2015 by in category Uncategorized with 0 and 0
Home > Blog > Uncategorized > Titanium UI State Manager

Titanium UI State Manager

It happens a lot of times that you may need that your UI have different states and this is what we call “State Machine”, it requires that you keep track of the current state, then apply your changes according to it.

It could be done using code like this

var curentState = "state1";
function applyState(state){
	currentState = state;

	if(currentState == "state1"){
		// apply UI changes for state1
		$.view1.applyProperties({
			top: "10%"
		});
	}else{
		// apply UI changes for state2
		$.view1.applyProperties({
			top: "50%"
		});
	}
}

This code is handling just 2 states and 1 component with 1 property change, imagine you have all your UI changes according to the current state.

That is why we created the Ti.States, it will handle UI states for you with an easy way.

 

Quick Start

Get it

Github Project

Use it

First you have to add state specific styles to your tss like this:

// TSS file
"#view": {
    backgroundColor: "red"
}

"#view:state1": {
    top: '80%',
    right: '10%',
    width: '20%',
    height: '13%'
}

"#view:state2": {
    top: '25%',
    right: '25%',
    width: '50%',
    height: '50%'
}

Then require and initalize ti.states in your controller


var stateManager = require('ti.states');
stateManager.init($, "state1"); // initalize with current controller, default state
Then you can easily change your UI to any of your states

/***
* state: the new state
* duration: animation duration time in milliseconds
* callback: to be called after animation complete
***/
stateManager.changeToState('state2', 500, function(){
    // animations is done
});

It is open source library under MIT license, so feel free to fork and extend its functionality.

Add comment

PROUDLY POWERED BY CODLY