Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Updated anchor link and formatting

...

Code Block
titleapp/views/index.xml
linenumberstrue
languagexml
<Alloy>
    <Window class="container">
        <ScrollView class="scroll" id="sv">
            <Label class="lbl" id="lbl1" platform="android">1. Platform attribute in XML sets to green on Android from platform specific TSS ID style, font size</Label>
            <Label class="lbl" id="lbl1" platform="ios">1. Platform attribute in XML sets to blue from generic TSS ID style, font size from index.tss</Label>
            <Label class="lbl" id="lbl1" platform="mobileweb">1. Platform attribute in XML sets to blue from generic TSS ID style, font size from index.tss</Label>
            <Label class="lbl" id="lbl2"></Label>
            <Require src="label"/>
            <Label class="lbl" id="lbl4" color="blue">4. Text alignment and font size set in index.tss, XML color attribute overrides TSS</Label>
            <Require src="anotherlabel"/>
            <Label class="lbl" id="lbl6">6. Bold, large, custom font, font properties mixed from various stylesheets</Label>
            <Label class="lbl" id="lbl7">7. Theme controls color: iOS=blue, Android=green, MobileWeb=red, generic=black, font size from main index.tss</Label>
            <Require src="requiredlabel"/>
            <Label class="lbl" id="lbl9" formFactor="handheld">9. Device query in XML and TSS to set text and color (green on handheld)</Label>
            <Label class="lbl" id="lbl9" formFactor="tablet">9. Device query in XML and TSS to set text and color (purple on tablet)</Label>
            <Label class="lbl">Window background yellow by default, overridden to white by theme's app.tss</Label>
            <Label class="lbl">ScrollView's top accounts for iOS7 through Alloy.Globals value and index.tss property</Label>
        </ScrollView>
    </Window>
</Alloy>

...

Code Block
titleapp/styles/app.tss
linenumberstrue
languagecss
"Window": {
    backgroundColor: 'yellow'
}
"#lbl6": {
    font: {
        fontWeight: 'bold',
        fontSize: '32dp'
    }
}
"Label": {
    left: 0
}

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

Code Block
linenumberstrue
languagecss
'Window[platform=android]': {
    backgroundColor: '#fff',
    exitOnClose: true
}
"#sv": {
    layout: 'vertical',
    top: Alloy.Globals.scrollTop,
    backgroundColor: '#fff'
}
"Label": {
    color: 'black',
    width: Ti.UI.FILL,
    height: Ti.UI.SIZE
},
".lbl": {
    textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
    font: {
        fontSize: '12dp'
    }
}
".lbl[platform=android]": {
    font: {
        fontSize: '16dp'
    }
}
"#lbl1": {
    color: 'blue'
}
"#lbl1[platform=android]": {
    color: 'green'
}
"#lbl2": {
    text: "2. Text set in TSS, ID selector's left property overrides app.tss",
    left: '20dp'
}
"#lbl4": {
    color: 'orange', /* overridden in XML */
    textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT
}
"#lbl5": {
    color: 'purple',
    text: 'This text is purple'
}
"#lbl6": {
    font: {
        fontFamily: 'Zapfino'
    }
}
"#lbl6[platform=android]": {
    font: {
        fontFamily: 'FirecatMedium'
    }
}
"#lbl9[formFactor=handheld]": {
    color: 'green'
}
"#lbl9[formFactor=tablet]": {
    color: 'purple'
}

 

See Also