Styling the Native App

Styling in the application is managed through a javascript file in the Resources root of the project called "style.js". The "styles" object in the file is attached to the facade that's implemented and shared in every controller in the application, so it's easy to create and implement new styles as needed.

In titanium, when creating new "View" objects, or any UI object, a 'create' method accepts an object containing style attributes (and sometimes value attributes). The style.js creates the foundation for the object to be passed into the create method, which can be appended if additional values need to be passed in at creation time. For a reference of common properties of view objects, view the Titanium API documentation for Titanium.UI.View: http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.View-object

For example:

In style.js:

titleLabel: {
    color: '#000'
}

Implement the label without modifying any styles:

var titleLabel = Titanium.UI.createLabel(app.styles.titleLabel);

Or modify the label attributes before creating it:

var titleLabelOptions = app.styles.titleLabel;
var titleLabelOptions.text = "Title Text";
var titleLabel = Titanium.UI.createLabel(titleLabelOptions);