Taking classes in Titanium Alloy to the next level
Styling in Titanium is done by applying properties to a UI component. In both classic and Alloy this is done by properties.
myUIElement.backgroundColor = "#ffffff";In Alloy you have the option to style using id's and classes, they work the same as they do in css. id's are unique, classes can be applied to multiple UI elements. This makes styling already very flexible, and that alone is a reason to move over to Alloy.
<Label class="myLabel" />And then the styling
'.myLabel': {
font: {
fontSize: 14
},
color: 'red'
}Dynamic Styling
The real power of styling in Alloy is however one step further than that. This is something I’ve known for a long time, but somehow haven’t used often enough: Dynamic styles.
There is one dependency for getting everything to work properly. You need to add the property autoStyle to every UI element you want this to work on.
If you want it to work for an entire controller, add it to the Alloy tag
<Alloy autoStyle="true">If you want it for a certain UI element only, add the property to that tag
<Label autoStyle="true" />Want it for the entire app, add it to config.json.
"global": {
"autoStyle": true
}Using Alloy classes methods
Inside Alloy there are multiple methods you can use to add/remove classes to specific UI elements.
So, lets say you have a label that can have an enabled or disabled state. What often is done is applying all properties manually when I changed from the default “enabled” state to the disabled state.
$.myLabel.color = "#666666";
$.myLabel.font = { fontStyle: 'italic', fontWeight: 'normal' };However, how much easier would it be if you could just define these properties in tss
'.enabled': {
color: '#000000',
font: {
fontStyle: 'normal',
fontWeight: 'bold'
}
}'.disabled': {
color: '#666666',
font: {
fontStyle: 'italic',
fontWeight: 'normal'
}
}
Now, the only thing you need to do with your label is remove the enabled class, and add the disabled class.
$.removeClass($.myLabel, 'enabled');
$.addClass($.myLabel, 'disabled');In case the label just has an enabled or disabled class and no others, you could also do the following:
$.resetClass($.myLabel, 'disabled');This removes all currently applied classes of the label, and then applies whatever classes you put in the second attribute.
You can also apply multiple classes this way, you just have to separate them with spaces as you do with applying multiple classes in your xml files.
$.resetClass($.myLabel, 'disabled largeLabel');Dynamic styling based on conditions
One of the awesome things of conditioning styling, is you can style based on OS, Tablet/phone or any custom property you want. One example I’ve demonstrated previously is styling based on orientation of the device. You can see it demonstrated in the Sample app on Github.
What it comes down to is easy. Basically you can specify 2 globals (or one, but I prefer both for readability purposes) and define the same class twice in tss, but with a different condition each.
".DynamicLabel[if=Alloy.Globals.isPortrait]": {}
".DynamicLabel[if=Alloy.Globals.isLandscape]": {}Once you notice orientation changes (or when you want to re-render it) you just need to re-apply the class. As described above, you can do that with add/remove classes, or just reset. This all depends if you have any other classes applied to the properties you want to keep
$.resetClass($.DynamicLabel, 'DynamicLabel');ResetClass will remove all classes, and then apply the ones you specify, even if that class was previously applied already. Any conditions will be checked for you. So if the condition value has changed, the other rule will be applied.
Conclusion
As you can see, with Alloy you can bring all kinds of cool styling rules to your app. Check out the orientation sample app to see how we know orientation changed in the app.
Also check out the following documentation pagesfor more information.
