2 Replies Latest reply on Dec 17, 2007 8:11 PM by MistaBell

    Referencing External components

    MistaBell
      I have two files in my project:

      Project/main.mxml
      Project/com/layout.mxml

      (Main is an application and layout is a itemRenderer inside a HorizontalList container.)

      How do I resize the layout.mxml VBox height relative to the Main.mxml container height from inside of Main.mxml?

      Flex won't let me assign an ID to the root container of layout.mxml, and trying to reference it through com.layout.height gives me a "Call to a possibly undefined method through a reference with static type Class" error.

      I tried setting the height of layout.mxml using parentApplication.id.height, which worked until I updated the height of main.mxml and the layout.mxml remained unchanged. Flex mentioned the height not being bindable. What a pain.

      Hopefully this simple question has a simple answer.

      Thanks!
        • 1. Re: Referencing External components
          Gregory Lafrance Level 6
          In this example code, you can base the layout.mxml height on the main.mxml height using percentages, or use an id for the layout.mxml component in main.mxml and set the height using the id.

          ------------------------ com/layout.mxml ----------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
          width="50%" height="50%" backgroundColor="#ccffcc">
          <mx:Button label="Inside Button"/>
          </mx:VBox>
          -------------------------------------------------------------------------------
          --------------------------- main.mxml ----------------------------------
          <?xml version="1.0"?>
          <!-- behaviors\PanelResize.mxml -->
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:com="com.*">
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
          width="50%" height="50%" backgroundColor="#ffccff">
          <mx:Button label="Outside Button" click="inside.height=50"/>
          <com:layout id="inside"/>
          </mx:VBox>
          </mx:Application>


          • 2. Referencing External components
            MistaBell Level 1
            I have two horizontal lists stacked vertically on top of each other with a bar between them for resizing their respective heights. The default is 50% / 50%, but I figure some people might want to see more of the top section, or vice versa.

            Inside of the top horizontal list I am using an itemRenderer to parse an XML file into pretty columns of data. Problem is that the itemRenderer VBox doesn't update when you resize the horizontal lists, so it gets cropped instead of scaling. Because I am using justified text, it appears as though I have to use fixed heights instead of percentages.

            This is the resize function inside of the main.mxml application:
            if (globals.resize == true) {
            box1.height = contentMouseY - resizer.height / 2;
            }

            I would like to add one more line to resize the content that goes inside of box1 (layout.mxml) if possible. I'm just not sure how to call properties from other mxml files. Especially when I can't assign an ID to the root container.

            Something like:
            if (globals.resize == true) {
            box1.height = contentMouseY - resizer.height / 2;
            layout.height = box1.height;
            }

            If I set the height inside the layout.mxml file to height="{parentApplication.box1.height}" it doesn't update when I resize the boxes.

            Perhaps I could add an event inside the application that goes off during a resize and a listener in the layout to pick up the changes as the user moves their mouse, but it seems like there should be a simple / elegant way of doing it within one function.