11 Replies Latest reply on May 14, 2010 12:51 AM by huanyuab

    mouseChirldren = false dosen't work with a uicomponent

    huanyuab Level 1

      I've got a question.

       

      I use a uicomponent as a containner in flex,and create a textfield.

      What I want to do is to make all the children in the uicomponent "transparent".They can't receive any mouse Event,and the most important,other elements below the uicomponent can.

       

      Two properties:mouseChirldren and mouseEnabled have been set to false, even the textfield's mouseEnabled property. The uicompoent and the textField do can't receive any mouseEvent,the uicomponent is "transparent".But other elements below the uicomponent are all blocked by the textfield.

       

      What shall I do?

        • 1. Re: mouseChirldren = false dosen't work with a uicomponent
          BhaskerChari Level 4

          Hi,

           

          Can you post some sample code you were talking about so that it will be clear..?

          • 2. Re: mouseChirldren = false dosen't work with a uicomponent
            huanyuab Level 1

            some of the code like this:

             

            mxml code:

             

            <fx:script>

            <![CDATA[

                  //part of the code

                  private function creationcomplete():void

                 {

                      contentContainer.mouseChirldren  = false;

                      contentContainer.mouseEnabled = false;

                      contentContainer.tf. = false;
                 }

            ]]>

            </fx:script>

            <s:button lable="mybtn">

            <container:ContentContainer id="contentContainer"   width="200" height="100"/>

             

            container:

            public class ContentContainer extends UIComponent

            {

                      public var tf:TextField;

                public function ContentContainer():void

             

                 {

                           tf = new TextField();

                           textField.text = "WhatEVER";

                           addChild(textField);

                  }

             

            }

             

            How can I make the  button("mybtn") can be click when the textField is on top of it?  It seems like it's not the matter of the textFleld, a textFlow in the UIComponent is also have the problem.

             

            Thanks for reply.

            • 4. Re: mouseChirldren = false dosen't work with a uicomponent
              BhaskerChari Level 4

              Why do u want to display text on the button instead you can assign the x and y positions to the textField and add it around the button instead of giving the positions within the textField area..?

               

              I have worked on the problem it seems the button is not clickable as the button is below the textField layer as the Z-Index of textField is higher than that of button.

              1 person found this helpful
              • 5. Re: mouseChirldren = false dosen't work with a uicomponent
                huanyuab Level 1

                That's just a example.

                In my work , below the uicomponent there is a full Screen picture. It can be drag by mouse . But when it is below the textField ,it can't be reached.

                • 6. Re: mouseChirldren = false dosen't work with a uicomponent
                  huanyuab Level 1

                  When there is a lable in a Group ,just set mouseChirldren and mouseEnabled to false, the element below the Group can be Reached.No matter how it's z-index is.

                  • 7. Re: mouseChirldren = false dosen't work with a uicomponent
                    BhaskerChari Level 4

                    Yes it is working perfectly ....thanks for sharing the answer....:)

                    • 8. Re: mouseChirldren = false dosen't work with a uicomponent
                      huanyuab Level 1

                      Thanks for your reply,and i still want to find out what's happening in the uicomponent.

                      • 9. Re: mouseChirldren = false dosen't work with a uicomponent
                        Flex harUI Adobe Employee

                        I put an mx:Label over an mx:Button and set the label's

                        mouseChildren/mouseEnabled = false and the button still got clicked.  If you

                        try that do you see the same results?

                        • 10. Re: mouseChirldren = false dosen't work with a uicomponent
                          huanyuab Level 1

                          yes,it should be. When you set mouseChildren/mouseEnabled = false,the lable is not interactive,and the button can receive your mouseEvent as if the lable isn't there.

                           

                          You also can try putting the lable in a group,and set the group's mouseChildren/mouseEnabled = false,and the button under the group.You don't have to set the lable's mouseChildren/mouseEnabled = false,cause the group's mouseChildren=false make all his children can't interactive.

                           

                          But when in the uicomponent ,it dosen't work.

                          • 11. Re: mouseChirldren = false dosen't work with a uicomponent
                            huanyuab Level 1

                            I think i make some mistake somewhere ,and it has nothing to do with the uicomponent.

                            I try some code like this:

                             

                                        protected function application_creationCompleteHandler(event:FlexEvent):void
                                        {
                                            var tf1:TextField = new TextField();
                                            tf1.htmlText = "<a href='no'><u>11111111111111111111111</u></a>";
                                            uc1.addChild(tf1);
                                            tf1.x = 50;
                                            tf1.y = 100;
                                           
                                            var tf2:TextField = new TextField();
                                            var fm2:TextFormat = new TextFormat();
                                            fm2.size = 40;
                                            tf2.width = 200;
                                            tf2.htmlText = "<a href='no'><u>222222222222222222222222222222222</u></a>";
                                            tf2.setTextFormat(fm2,0,tf2.text.length-1);
                                            uc2.addChild(tf2);
                                            tf2.x = 10;
                                            tf2.y = 80;
                                           
                                            var textFlow:TextFlow = new TextFlow();
                                            var controller:ContainerController = new ContainerController(uc3,500,500);
                                            textFlow.flowComposer.addController(controller);
                                            var tfp:ParagraphElement = new ParagraphElement();
                                            var sp:SpanElement = new SpanElement();
                                            sp.text = "3333333333333333333333333333333333333333";
                                            sp.fontSize = 20;
                                           
                                            var linke:LinkElement = new LinkElement();
                                            linke.addChild(sp);
                                            linke.href = "gasd";
                                           
                                            tfp.addChild(linke);
                                            textFlow.addChild(tfp);
                                            textFlow.addChild(tfp.deepCopy());
                                            textFlow.addChild(tfp.deepCopy());
                                            textFlow.addChild(tfp.deepCopy());
                                            textFlow.addChild(tfp.deepCopy());
                                            textFlow.addChild(tfp.deepCopy());
                                            textFlow.flowComposer.updateAllControllers();
                                        }

                             

                            <mx:UIComponent id="uc1" width="100%" height="100%" />
                            <mx:UIComponent id="uc3" width="100%" height="100%" mouseChildren="false" mouseEnabled="false" />
                            <mx:UIComponent id="uc2" width="100%" height="100%" mouseChildren="false" mouseEnabled="false" />

                             

                             

                            uc1 is the bottom and this code can prove that TextField in uc1 can be click,although uc2 and uc3 is over it.

                             

                            Really sorry wasting your time.