6 Replies Latest reply on Oct 6, 2007 3:04 PM by aceinc

    Putting a comboBox into a panel (or TitleWindow)  titleBar.

    aceinc Level 1
      The problem is that I need more horizontal real estate in an App I'm developing. I have a vertical row of 15 buttons on the left side of the form for navigation. When a user clicks the button it changes the panel to the right to a module I want.

      In order to get the real estate used by the buttons to the left, and still have a "title" in the panel, I thought that I would put a comboBox tin the titleBar of the panel. If I put the comboBox above or in the panel I lose vertical real estate which is tight as well.

      I have tried to set the "title" equal to a comboBox but it wants a string. I tried to addChild to the titleBar from the App, but it appears that the titleBar is protected.

      My next idea is to create a new class, which should allow me to add the comboBox to the titleBar, but I am not sure how to manipulate the comboBox from the App, to add the dataProvider, etc. Plus I've never done something like this before.

      Any ideas, or examples?

      Paul
        • 1. Re: Putting a comboBox into a panel (or TitleWindow)  titleBar.
          peterent Level 2
          You got onto the right track. You need to create a new class which extends Panel, override its createChildren method, and then add the ComboBox to the titleBar child of the Panel, override updateDisplayList to position the ComboBox. Something like this:

          class MyPanel extends Panel {
          var mycombo:ComboBox;
          override protected function createChildren() : void {
          super.createChildren(); // important you do this first so titleBar is created
          mycombo = new ComboBox();
          mycombo.dataProvider = // whatever you have for the dataprovider //;
          titleBar.addChild(mycombo);
          }
          override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number) : void {
          super.updateDisplayList(unscaledWidth,unscaledHeight);
          mycombo.x = unscaledWidth - mycombo.getExplicitOrMeasuredWidth() - 5 ; // 5 is a little bit of padding
          }
          } // end MyPanel

          You may have to set the mycombo.width and mycombo.height properties - some controls require you do this when you create them from ActionScript (I know Button does). You also need to position the ComboBox because it will default to 0,0 and be right on top of the titleBar's text.
          • 2. Re: Putting a comboBox into a panel (or TitleWindow)  titleBar.
            aceinc Level 1
            Peter,

            Thanks a lot.

            One question, how can I expose the dataProvider of the comboBox as a property to my new component "ComboPanel" (what you called "mypanel" in your example). I want to create a reusable component where I can pass the dataProvider to the component.

            Paul
            • 3. Re: Putting a comboBox into a panel (or TitleWindow)  titleBar.
              peterent Level 2
              The easiest way is to add:

              [Bindable] public var dataProvider:ArrayCollection;

              to the MyPanel class, then have your ComboBox bind to that variable.
              • 4. Re: Putting a comboBox into a panel (or TitleWindow)  titleBar.
                aceinc Level 1
                One last (hopefully) question;

                It can't seem to get the comboBox to display anywhere but the right hand side of the titleBar.

                Any ideas?

                Paul

                • 5. Re: Putting a comboBox into a panel (or TitleWindow)  titleBar.
                  aceinc Level 1
                  Never mind, I found the code in the updateDisplayList.

                  Thanks again.

                  Paul
                  • 6. Re: Putting a comboBox into a panel (or TitleWindow)  titleBar.
                    aceinc Level 1
                    Peter:

                    Thanks for the help. It came out OK.

                    Basically what it does is;

                    Displays a dropdown list on the right side of the titleBar, and when the user selects an item it displays the "Label" of the combobox in the title area, calls a user defined function (passed as a property) passing the "Data" from the combobox. It then sets the combobox back to index 0 which I assume to be "Select..."

                    My user defined fuction takes the data passed and treats it like a function call. Each function call then loads a module into the panel.

                    If you would like to publish/blog the component, I would be happy to send you the code, and a sample driving program. I don't have a blog, and posting it here mucks it all up.

                    Paul