[Flex 4] calculate component width/height inline or with bindable function

Question

What I want to achive is something like these two examples (it doesn't work, it's just the idea):
1) Inline
<s:Group id="main" width="100%" height="100%" minWidth="950" minHeight="650">
     <s:Group width="100%" height="{if (main.height < main.minHeight){return (main.minHeight-footer.height;)} else {return (main.height-footer.height;)}}">
     </s:Group>
     <s:Group id="footer" width="100%" height="50">
     </s:Group>
</s:Group>
2) somehow define the calculation outside in a function maybe like this:
[Bindable] (like this seems to work but the compiler throws error that there should be event name specified like this [Bindable(event="someEvent")], but then it doesn't work)
public function calcHeight():Number{
     if (main.height < main.minHeight){
          return (main.minHeight-footer.height);
     } else {
          return (main.height-footer.height);
<s:Group id="main" width="100%" height="100%" minWidth="950" minHeight="650">
     <s:Group width="100%" height="{calcHeight()}">
     </s:Group>
     <s:Group id="footer" width="100%" height="50">
     </s:Group>
</s:Group>
This should be something very simple... but I've been googling for this for 2 hours now and I couldn't find what I was looking for. Help please

Answer 1

In order for the first option (inline) to work you might use short variant of if-else:
height="{main.height &lt; main.minHeight ? main.minHeight - footer.height : main.height - footer.height}"
Note the &lt; sequence: since MXML is just an XML file, < and > (and other symbols) have special meaning and must be escaped. But this is an ugly looking code and you should avoid that.
Now to atchieve that you can use option 2: create a function. The reason it does not work for you is that to bind a function, you need a custom event. In your case you sould listen for propertyChange events on main.heigh, main.minHeight and footer.height properties or resize event on main and who knows what else. This is unnecessary and difficult.
If my understanding of what you are trying to atchieve is correct, this should do the trick.
<s:Group id="main" width="100%" height="100%" minWidth="950" minHeight="650">
   <s:layout>
      <s:VerticalLayout gap="0" horizontalAlign="justify"/>
   </s:layout>
   <s:Group height="100%">
   </s:Group>
   <s:Group id="footer" height="50">
   </s:Group>
</s:Group>
Or you could do it like this (I prefer this variant):
<s:Group id="main" width="100%" height="100%" minWidth="950" minHeight="650">
   <s:Group width="100%" top="0" bottom="0">
   </s:Group>
   <s:Group id="footer" height="50" bottom="0" width="100%">
   </s:Group>
</s:Group>
As you can see, no data binding or listening to all sorts of events and dispatching custom ones is needed. Proper use of containers and layouts can save your day.
Cheers,
Michael
P.S. You should really look at things in a simpler way somehow.