View TSS in titanium

Question

Hi am new to titanium and cant get how to create a fluid design with its TSS. How to place three views, one as header(20%), two as content holder(60%) and three as footer(20%) with all width full(Ti.UI.FILL). My code is,

index.xml

<Alloy>
   <Window class="container">
       <Require src="home" id="home"></Require>
   </Window>
</Alloy>

home.xml

<Alloy>
    <View id="header"></View>
    <View id="content"></View>
    <View id="footer"></View>
</Alloy>

home.tss

"#home": {
    layout: 'vertical',
    width: Ti.UI.FILL,
    height: Ti.UI.FILL,
    backgroundColor: '#000'
},
'#header':{
    layout: 'horizontal',
    height: '20%',
    width: Ti.UI.FILL,
    backgroundColor: '#fff'
},
'#content': {
    layout: 'vertical',
    height: '60%',
    width: Ti.UI.FILL,
    backgroundColor: '#ccc'
},
'#footer': {
    layout: 'horizontal',
    height: '20%',
    width: Ti.UI.FILL,
    backgroundColor: '#fff'
}

What am trying is to place a back button(left), title(middle) and a refresh button(right) as horizontal layout in header view and app content in content view and in footer view with some choice with scrolling(ie, we can scroll using slide event by placing options on it). If I run this code views are eventually divided as like this and 60% not affected on the content view. I have asked in appcelerator forum and dint get replied yet. Hope this helps.

Answer 1

Your object with the id of 'home' isn't actually a view, it's just a reference to the home class and so you can't attribute styles to it like that.

I would have relaid home.xml out like this:

<Alloy>
    <View id="homeHolder">
        <View id="header"></View>
        <View id="content"></View>
        <View id="footer"></View>
    </View>
</Alloy>

and then this would have work as you would have expected

"#homeHolder": {
    layout: 'vertical',
    width: Ti.UI.FILL,
    height: Ti.UI.FILL,
    backgroundColor: '#000'
}

Answer 2

Put this:

"#home": {
    layout: 'vertical',
    width: Ti.UI.FILL,
    height: Ti.UI.FILL,
    backgroundColor: '#000'
},

Inside index.tss, there is no element with id home inside home.xml, but there is one inside index.xml.

Answer 3

home.xml

<Alloy>
<View id="home">
    <View id="header" visible="true">
        <Label>header</Label>
    </View>
    <ScrollView id="content" visible="true">
        <Label>content</Label>
    </ScrollView>
    <View id="footer" visible="true">
        <Label>footer</Label>
    </View>
</View>
</Alloy>

home.tss

"#home": {
layout: 'vertical',
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundColor: '#000'
},
'#header':{
    layout: 'horizontal',
    height: '20%',
    width: Ti.UI.FILL,
    backgroundColor: 'white',
},
'#content': {
    layout: 'vertical',
    height: '60%',
    width: Ti.UI.FILL,
    backgroundColor: '#ccc'
},    
'#footer': {
    layout: 'horizontal',
    height: '20%',
    width: Ti.UI.FILL,
    backgroundColor: 'green',
}

index.xml

<Alloy>
<Window class="container">
    <Require src="home" id="home"></Require>
</Window>
</Alloy>

This works. Thanks to Martyn.