6 Replies Latest reply on Jun 18, 2010 3:04 AM by FM_Flame

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

    FM_Flame Level 1

      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

        • 1. Re: [Flex 4] calculate component width/height inline or with bindable function
          MikisMM Level 2

          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.

          • 2. Re: [Flex 4] calculate component width/height inline or with bindable function
            FM_Flame Level 1

            Thanks Mikis,

             

            I asked this question not to simplify things, I actually managed to do it but the first variant you gave me, but it was important to know about &lt; and the custom events, now it makes more sense.

             

            About your second variant, I think that if the content of the group is high enough, the footer will overlap it, which I tried to avoid. But yeah the vertical layout did the trick for now

             

            Any clue why binding the function works without (event="") and not with it? Seems strange to me...

             

            Thanks for the reply.

            • 3. Re: [Flex 4] calculate component width/height inline or with bindable function
              MikisMM Level 2

              About your second variant, I think that if the content of the group is high enough, the footer will overlap it, which I tried to avoid. But yeah the vertical layout did the trick for now

              Well, if the content does not fit into your group so yes, the footer will overlap it. But thats true for any solution I think. You will eventually have to use a Scroller.

               

              Any clue why binding the function works without (event="") and not with it? Seems strange to me...

              Not sure what exactly you call 'works'. Both variants should only work for the first time: that is Flex will grab the value when in first calls your function. And if any of the properties used in a function change, binding won't  work. If you use only [Bindable] you should get compile time warning '[Bindable] requires an event name parameter when applied to a function that is not a getter or setter'. As for [Bindable(event="")], you won't get any warnings but everything is the same: bidnging works only when components are initialized.

              1 person found this helpful
              • 4. Re: [Flex 4] calculate component width/height inline or with bindable function
                FM_Flame Level 1

                If binding the function as my second example doesn't work considering what you've said, I should end up with a fixed height of the group which would not change when the top group is resized, correct ? But it does gets updated when only using [Bindable] without the event specified and yes it does thows that error but still works - by working I mean that it's hight seems to gets updated and is not fixed. It is fixed when using [Bindable(event="someevent")] and there are no compile time errors.

                 

                Could you explain that ? Test it if you want. It's a pretty simple example. Thanks.

                • 5. Re: [Flex 4] calculate component width/height inline or with bindable function
                  MikisMM Level 2

                  Nope. You are wrong. It does not work. I've tested your example and this is what I've got:

                  The function is called a few times when application is initialized and containers get sized for the first time (but even then, each time when 'main' was not null, 'main.height' was 0 and 'main.minHeight' was used). Then I tried resizing borwser window and guess what? The function was not called (I placed a breakpoint in it) and components were risized only horizontally (because you used percentage values to define their width).

                   

                  Michael

                  1 person found this helpful
                  • 6. Re: [Flex 4] calculate component width/height inline or with bindable function
                    FM_Flame Level 1

                    yes you are correct, I used the example I provided here and it happens just like u said. My case was a bit more complicated and it did work the way I told you but it was probably not because the function was called though it seemed that way and I guess it was something else combined with that that produced the result that got me confused. Anyway, thanks a lot for the lights up on this one, you were very helpful