16 Replies Latest reply on Jun 28, 2010 3:12 AM by Harbs.

    ComboBox menu outside panel bounds

    Harbs. Adobe Community Professional & MVP

      I'm starting to feel like I'm talking to myself here...

       

      Is there any way to make the dropdown of a ComboBox break outside the bounds of a panel?

       

      I have a rather wide dropdown menu, and to see all the elements, the width really needs to extend outside the bounds of the panel...

       

      I'm sure I'll have the same request for the height, but I haven't gotten there yet...

       

      Harbs

        • 1. Re: ComboBox menu outside panel bounds
          irpaterson Adobe Employee

          Harbs,

          This is a really interesting question- and as you are a very accomplished early adopter, personally I am very glad you are using these forums to ask questions and provide us with a reality check. I will answer this based on my current knowledge.

           

          The CS5 extensions are loaded as child-applications by a top-level SWF loader that implements the Marshall Plan for the Flex SDK, described here:

          http://opensource.adobe.com/wiki/display/flexsdk/Marshall+Plan

          In essence, the CS5 extensions are 'untrusted' sub-applications of the toplevel application called StageManager.

           

          My experience working with Marshall Plan sub-apps has been that controls are clipped to the child application container bounds, and it looks like the existing CS5 extensions work within this limitation. An exception to this is normal Marshall Plan implementations is modal popups, where the main (toplevel) application and the child applications have to collaborate.

           

          If you are using Extension Builder, then you can import the example named CSXS Windows (I believe you are familiar with this already) and I wonder if a modeless dialog to house your very wide combo box would be an option- it would be less than ideal but at least you could have a container for the combo box that is higher/wider than the extension's panel. I have experimented with placing arbitrarily wide combo boxes on a modeless dialog, and it does at least provide one option for the case where you don't want to modify your extension's basic geometry.

           

          Best wishes

          Ian

          1 person found this helpful
          • 2. Re: ComboBox menu outside panel bounds
            Harbs. Adobe Community Professional & MVP

            Hi Ian,

             

            Thanks for that link about the Marshall Plan. Interesting stuff! This looks like a pretty difficult issue to overcome.

             

            Interesting idea about the modalless dialog. Is there a reason you suggested modelless as opposed to modal? I don't suppose there's a way to make the background of the dialog (including the bar) invisible. Is there?

             

            Is there a way to create containers in parent apps from within subapps and communicate back and forth (i.e. to create the dropdown within a Sprite in the parent app, and remove it when the selection is made)? Even if it's possible, this is pretty hairy stuff that  don't know I'd want to rely on...

             

            Harbs

            • 3. Re: ComboBox menu outside panel bounds
              irpaterson Adobe Employee

              Hello Harbs,

              You are opening up some interesting and fundamental questions, which get right to the heart of what extensions are and how they play in the AIR/Flex runtime. I'll answer based on my present knowledge.

               

              Also my terminology is a bit inexact and I may have slightly clouded the issue- when I write toplevel app, I refer to StageManager, and when I write child-app, this refers to your CS5 extension (bundle). If you have one extension, then you have one child-app, and if it opens windows, those are not sub-apps in their own right. However, if you use SWFLoader, and Marshall Plan load other SWFs, then those would be child-apps (grandchildren of the StageManager, say).

               

              So the example CSXS Windows creates some dependent Windows, but these are not child-apps, just child windows of your CS5 extension. Sorry for this lack of clarity.

               

              At present I am not sure you can have transparent backgrounds in these child windows in the current configuration. Whilst AIR applications can be set to have transparent backgrounds as per http://www.adobe.com/devnet/air/flex/quickstart/creating_transparent_window.html

              this normally applies to the 'main' or toplevel application. If you inspect

              /Library/Application Support/Adobe/CS5ServiceManager/StageManager/.../AIR/

              then you can find the toplevel app's main XML file specifying the app properties, but this is tied to StageManager and is installed by the point products or a Creative Suite installer.

               

              My understanding is that the individual CS5 extensions don't have this application.xml file to configure (that's owned by StageManager), but they are loaded as child applications by StageManager, so I don't believe at present in an extension you can set window backgrounds to transparent- I had a quick experiment to see if setting the property on the Window object being created had the intended effect but it looks like this is a feature that you would have to request be added (and then we can queue it with other requests).

               

              The good news would be that if you have some child windows created as in the CSXS Windows example (not child applications, because you're not using SWFLoader to instantiate them), I believe that you'd just be able to update model properties (I mean your AppModel.as) in the exact same way you would from other controls, as the code is all executing in the same ApplicationDomain.

               

              Best wishes

              Ian

              • 4. Re: ComboBox menu outside panel bounds
                Harbs. Adobe Community Professional & MVP

                Thanks Ian,

                 

                This is very useful info!

                 

                I was not clear on how different windows in the same extension interact. Thanks!

                 

                My question about parent apps was whether it's possible to create components (temporarily) in the StageManager app. If yes, you would not need to create a new window to place it in.

                 

                If that's a possibility, maybe a good feature request would be a function to create a temporary dropdown in the StageManager which would return the selection. This might be a workable workaround around this problem...

                 

                Harbs

                • 5. Re: ComboBox menu outside panel bounds
                  irpaterson Adobe Employee

                  Hello Harbs,

                   

                  Thank you again for your help on this and countless other occasions - I'll personally make sure your feedback and feature requests are captured and I'll follow up with other teams internally to understand more about this issue and let you know if anything interesting emerges from this discussion.

                   

                  Best wishes

                  Ian

                  • 6. Re: ComboBox menu outside panel bounds
                    Harbs. Adobe Community Professional & MVP

                    FWIW:

                     

                    I found a partial solution for my issue. My ComboBox was at the right side of my panel. By aligning the dropdown to the right side of the ComboBox, I was able to get a reasonably wide dropdown while staying within the bounds of the panel.

                     

                    Here's what I used:

                     

                    package com.intools.controls
                    {
                        import mx.controls.ComboBox;
                        import mx.events.FlexEvent;
                        
                        public class RightAlignComboBox extends ComboBox
                        {
                            public function RightAlignComboBox()
                            {
                                super();
                            }
                            override protected function downArrowButton_buttonDownHandler(event:FlexEvent):void
                            {
                                super.downArrowButton_buttonDownHandler(event);
                                if (dropdownWidth - width > 0)
                                {
                                    //align it to the right
                                    dropdown.x = x + width - dropdown.width;
                                }
                            }
                        }
                    }
                    
                    
                    • 7. Re: ComboBox menu outside panel bounds
                      Harbs. Adobe Community Professional & MVP

                      I just noticed that Mini Bridge has quite a few menus which extend beyond the bounds of the panel. Apperently there is a way to make these menus. Id there any way we can get a Cookbook entry on how they did it?

                       

                      Harbs

                      • 8. Re: ComboBox menu outside panel bounds
                        irpaterson Adobe Employee

                        Hello Harbs,

                        Good piece of detective work, and I've captured an item of work for us to make sure investigate this and see if we can provide a Cookbook entry with some information on this- I too would be interested in how this works.

                         

                        Best wishes

                        Ian

                        • 9. Re: ComboBox menu outside panel bounds
                          Bob Stucky Adobe Employee

                          Harbs,

                           

                          Take a look at NativeMenu (flash.display). It supports native menus on all platforms. I haven't had a chance to try it yet; but, I'm thinking this would be the likely path to success. I'll get to it in the next day or so.

                           

                          Bob

                          • 10. Re: ComboBox menu outside panel bounds
                            Bob Stucky Adobe Employee

                            Harbs,

                             

                            Take a look at flash.display.NativeMenu (Air API). I'll likely get to trying it later today or tomorrow; but, I thought I'd give you a heads up to where I'm headed with it. It's likely not a combo-box per-se, more likely a native context menu that you place over a specific button/image/whatever.

                             

                            Bob

                            • 11. Re: ComboBox menu outside panel bounds
                              Harbs. Adobe Community Professional & MVP

                              Hi Bob,

                               

                              You're probably right. I'll let you do the hard work, and take your lead afterwards...

                               

                              Harbs

                              • 12. Re: ComboBox menu outside panel bounds
                                Bob Stucky Adobe Employee

                                Harbs,

                                 

                                I just posted a cookbook entry on this. I kinda like the look and feel of it, if I don't say so myself.

                                 

                                Bob

                                • 13. Re: ComboBox menu outside panel bounds
                                  Harbs. Adobe Community Professional & MVP

                                  Hi Bob,

                                   

                                  Nice post.

                                   

                                  The concept is very good. There's a few kinks in it as-is.

                                   

                                  1) It only works on String Arrays. Object Arrays do not display correctly.

                                  2) The menu is displayed at the mouse position rather than the ComboBox position.

                                   

                                  I'll see if I can polish it up (unless you get to it first...)

                                   

                                  Harbs

                                  • 14. Re: ComboBox menu outside panel bounds
                                    Harbs. Adobe Community Professional & MVP

                                    That was pretty easy.

                                     

                                    I just posted the fix for these two issues in the comments of the Cookbook entry.

                                     

                                    http://cookbooks.adobe.com/post_ComboBox_that_uses_a_NativeMenu__Air_API_-17533.html

                                     

                                    Harbs

                                    • 15. Re: ComboBox menu outside panel bounds
                                      Bob Stucky Adobe Employee

                                       

                                      Hi Bob,

                                       

                                      You're probably right. I'll let  you do the hard work, and take your lead afterwards...

                                       

                                      Harbs

                                       

                                      I like having the menu show up at the click location. Something about having the menu show up at the click just seems a little easier to me from a user's perspective.

                                       

                                      As for the "only does strings" part...

                                       

                                      I'd say you took the lead quite nicely.

                                       

                                       

                                      Bob

                                      • 16. Re: ComboBox menu outside panel bounds
                                        Harbs. Adobe Community Professional & MVP

                                        I hear your point, but keeping the menu positionrelative to the component is more standard system behavior.

                                         

                                        This offers both behaviors:

                                         

                                                private var _clickMenuLocation:Boolean = false;
                                                public function get clickMenuLocation():Boolean
                                                {
                                                    return _clickMenuLocation;
                                                }
                                                public function set clickMenuLocation ( value:Boolean ):void
                                                {
                                                    _clickMenuLocation = value;
                                                }
                                                private function onMouseDown( event: MouseEvent ): void
                                                {
                                                    nm.removeAllItems();
                                                    var ac: ArrayCollection;
                                                    if ( dataProvider is Array )
                                                    {
                                                        ac = new ArrayCollection( dataProvider as Array );
                                                    } else 
                                                    {
                                                        ac = dataProvider as ArrayCollection;
                                                    }
                                                    for ( var i: int = 0; i < ac.length; i++ )
                                                    {
                                                        var nmi:NativeMenuItem = new NativeMenuItem( itemToLabel(ac.getItemAt( i ) ) );
                                                        nm.addItem( nmi );
                                                    }
                                                    
                                                    if(_clickMenuLocation)
                                                    {
                                                        nm.display( parentApplication.stage, event.stageX, event.stageY );
                                                    }
                                                    
                                                    else
                                                    {
                                                        var bounds:Rectangle = getBounds( parentApplication.stage );
                                                        nm.display( parentApplication.stage, bounds.x, ( bounds.y + height ) );
                                                    }
                                                    event.stopPropagation();
                                                }

                                         

                                         

                                         

                                        I took a bit of a look at NativeMenu, and realized that there's both pluses and minuses to using NativeMenu

                                         

                                        The only real downside I see, is that the appearance is not customizable -- and that includes no icons.

                                         

                                        The big pluses to using NativeMenu (besides showing outside the bounds) is that menu separators are possible, as well as sub-menus.

                                         

                                        I could see this being really useful!