Differentiate between iPhone and iPad in Titaninum Appcelerator

Question

I am new to the cross platform Titanium SDK, and the Alloy MVC framework.

I created a button inside index.xml like this:

 <Alloy>
    <Button id="button">Click Me</Button>
</Alloy>

But now I want to know how to display the title "Click Me" when on an iPhone, and display the title "Submit" when on an iPad.

Where do I need to write the condition? In index.xml, index.js, or index.tss?

Answer 1

You can do it a few ways, either in the index.xml file like this:

<Alloy>
    <Button formFactor="handheld" id="button">Click Me</Button>
    <Button formFactor="tablet" id="button">Submit</Button>
</Alloy>

Or in the index.js like this:

if(Alloy.isHandheld) {
    $.button.title = "Click Me";
}

if(Alloy.isTablet) {
    $.button.title = "Submit";
}

Or in the style file, index.tss like this:

"#button[formFactor=handheld]" : { 
    title : "Click Me"
},

"#button[formFactor=tablet]" : { 
    title : "Submit"
}