Automatic layout in Titanium - titanium

Question

I'm trying to position my views and have them resize automatically.
For this example, I have 3 views, a red, a blue and a green one, and they're all laid out in a window with a VERTICAL layout, and they all have a width of "100%":
var mainView = Ti.UI.createView({
backgroundColor : "white",
width : "100%",
height : "100%",
layout : "vertical"
});
var redView = Ti.UI.createView({
backgroundColor : "red",
width : "100%",
height : "40%",
});
mainView.add(redView);
var blueView = Ti.UI.createView({
backgroundColor : "blue",
width : "100%",
height : "30%",
});
mainView.add(blueView);
var greenView = Ti.UI.createView({
backgroundColor : "green",
width : "100%",
height : "30%"
});
mainView.add(greenView);
It looks good. Now I want to add controls to the red view, and I want a couple of things to happen:
I'll place a control in the red view, and it will have a MARGIN of 10 points/pixels in each direction.
When I resize the inner control, the RED view will automatically resize itself to accommodate the inner control, but will keep the 10 points margin from each direction.
The BLUE and the GREEN views will automatically reduce their sizes to take the rest of the screen.
Example:
var blackView = Ti.UI.createView({
backgroundColor : "black",
top : 10,
bottom : 10,
left : 10,
right : 10
});
...
...
blackView.height = blackView.height + 50;
When I increase blackView's height by 50, the following things should happen:
1) The height of redView should be increased by 50.
2) The height of blueView and greenView should be reduced by 25, and they should be automatically placed.
Any ideas how to achieve this automatic behavior?

Answer 1

There are couple of ways to do that.
Simple Method:
when you increase the size of inner view you have to increase the size of outer view and all other relative views should be decreased accordingly.
Recommended:
Use event listeners for it.
e.g
1. Fire a custom event when you change the size e.g
Ti.App.fireEvent("myViewSizeChanged",{newSize:"50",control:redview});
Listen this event call your computational method for resizing your each view.
e.g
Ti.App.addEventListener("myViewSizeChanged",function(e){
// here you can get the value of e
//e.newSize
//e.redView
});
both params will tell you the new size of which control... and you can adjust the rest of the view sizes accordingly