Skip to end of metadata
Go to start of metadata

Demonstrates how Alloy combines several TSS styles based on their priority.

App folder location

alloy/test/apps/advanced/complex_styling

Styles can be defined on Alloy elements in variety of places: the global style sheet (app/app.tss), a view-controller's styles sheet (app/styles/index.tss, for example), or as attributes on an XML element, to name a few. In addition, styles can be applied conditionally based on the target platform or device form factor. Alloy defines a priority for each type of style, and styles are combined and mixed according to these priorities, as the sample app demonstrates. See Style Priorities for details.

t

The main index.xml view declares a several different UI elements some with defined IDs, some with specified class attributes, some that are specific to certain platforms or device form factors. In addional, some views are required from external XML files that define their own TSS styles.

app/views/index.xml

The app.tss file defines global styles; each view-controller defines its own TSS file (anotherLabel.tss or index.tss, for example); a number of themes define their own styles and controller styles; finally, the XML views define styles as attributes on various XML elements.

App Folder Structure

As an example, the app.tss file defines the following global styles: 

app/styles/app.tss

However, styles defined by the index.tss style file have a higher precedence than global styles, and so override them. 

 

See Also