Determining if a drop down menu is open in a Spark DropDownList control in Flex 4

by Peter deHaan on August 6, 2009

in DropDownList (Spark),beta1

The following example shows how you can check whether a drop down list menu is open in a Spark DropDownList control in Flex 4 by checking the Boolean isDropDownOpen property.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/06/determining-if-a-drop-down-menu-is-open-in-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_isDropDownOpen_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            protected function init():void {
                checkBox.selected = ddl.isDropDownOpen;
            }
        ]]>
    </fx:Script>
 
    <s:CheckBox id="checkBox"
            label="isDropDownOpen"
            mouseEnabled="false"
            tabEnabled="false"
            creationComplete="init()"
            x="10" y="10" />
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            width="150"
            horizontalCenter="0"
            top="40"
            open="init();"
            close="init();">
        <s:dataProvider>
            <s:ArrayList source="[The,Quick,Orange,Fox,Jumps,Over,The,Lazy,Dog]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

{ 8 comments… read them below or add one }

1 Greg August 6, 2009 at 5:29 am

Hey Peter,

Any idea what would be causing this (http://www.lbpbadminton.com/images/DropDownListIssue.jpg) to happen with my spark drop down list?

Thanks,
Greg.

Reply

2 Peter deHaan August 6, 2009 at 6:55 am

Greg,

I’ve never seen that before, and I wasn’t able to reproduce the issue locally.
Can you please file a bug at http://bugs.adobe.com/flex/ with a simple test case showing the behavior. Or, if you can give me a few more details so I can try and reproduce the issue, I can file the bug for you (and help you try and find a workaround).

Peter

Reply

3 Greg August 6, 2009 at 7:13 am

I tried to reproduce the behaviour with a simple test case and couldn’t either. The application base consists of several modules loaded into a SkinnableContainer (one module for the header, one for the nav, and one for the content). The content module, in this case, has 2 components (one for its titlebar and one for its content). A button in the content module’s content component launches a modal pop up window (which is a SkinnableContainer component in this case). This is the component that has the DropDownList.

I’ve seen several bugs posted that relate to the DropDownList not positioning correct if the component is moved. I’ve tried dynamically adding the DropDownList to the pop up after its creationComplete and I get the same behaviour, so I’m not sure if that bug I’ve seen is related or not.

I’ll try to create a simple test case that can reproduce the issue. If I can’t, can I Email you my files privately? This is a small part of a pretty big application (or what will be a big application when it is completed).

Reply

4 Peter deHaan August 6, 2009 at 9:13 am

@Greg,

I sent you an email. Send me your files and I can take a look later today and we can try and get a bug filed for this.
I don’t think I’ll be able to sleep until I can reproduce this issue and we can submit a bug.

Thanks,
Peter

Reply

5 Rostislav Siryk August 6, 2009 at 8:36 am

Greg, does your project use only Spark components, or it also uses components from Halo theme? As far as I know, positioning can be wrong if Spark component is put in Halo container. The workaround in such situation is to wrap Spark component with Spark container, which resides in Halo container.

Reply

6 Greg August 6, 2009 at 8:46 am

I’ve used spark components as much as possible. The modules are mx because that’s the only choice for them. Each module’s 1st child is a SkinnableContainer, so the overall structure would be…
spark (application) -> mx (module) -> spark (SkinnableContainer) -> spark (pop up SkinnableContainer)

Reply

7 Peter deHaan August 6, 2009 at 12:20 pm

Just to close the loop on this… A bug was filed a few days ago, http://bugs.adobe.com/jira/browse/SDK-22425, and there is a bug when the dropDown was opened inside of a module. Adobe is actively working on a fix.

Thanks everybody,
Peter

Reply

8 Peter deHaan August 7, 2009 at 4:07 pm

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: