23 Replies Latest reply on Apr 18, 2011 7:47 AM by Flex harUI

    add uicomponent inside a sprite

    infeter

      i want to add UIComponent inside a spite. here is the code:

      private function make() : void {
         
      var circle : Sprite = new Sprite();
          circle
      .graphics.beginFill(0xFF0000, 0.2);
          circle
      .graphics.drawCircle(0, 0, 20);
         
      var button : Button = new Button();
          button
      .label = "testing...";
         
      var wrapper : UIComponent = new UIComponent();

          circle
      .addChild( button );
          wrapper
      .addChild( circle );
          addChild
      ( wrapper );
      }

      the problem is that button is added, but is not displayed. if i do  reversed - add sprite to uicomponent - everything works fine, but this  way it doesn't work. i tried to use invalidate functions for button  etc... even tried making "circle" as UIMovieClip, but no luck - button  is still invisible. also if i simply do "addChild( button );" - it is  shown, what the... please help, what i am doing wrong? how can i add a  button inside a sprite?

        • 1. Re: add uicomponent inside a sprite
          CleanCoder Level 2

          Your Sprite will not size the Button automatically, you will have to provide an explicit size for the Button. Set the width and height and see if it shows up then.

          • 2. Re: add uicomponent inside a sprite
            Flex harUI Adobe Employee

            In general, UIComponents must be parented by other UIComponents.

            • 3. Re: add uicomponent inside a sprite
              infeter Level 1

              added:

              button.explicitWidth = button.explicitHeight = 100;

              still doesn't work... :-(

               

              well, i've checked the debugger console and saw that "initialized" property of the button is false. how can i initialize it? i tried "button.initialize()", but no luck...

              • 4. Re: add uicomponent inside a sprite
                infeter Level 1

                "In general, UIComponents must be parented by other UIComponents."

                ok, thanks, but i need help in my topic. what i actually want to do is to load an external swf, then move some movieclip in it and add a button to it. this is a requirement. for now i can load and move, but when i try to add a button - nothing happens... i can see only that numChildren property is incremented and that's all. how can i initialize or display that dynamically created button?

                • 5. Re: add uicomponent inside a sprite
                  infeter Level 1

                  btw, that's why i started with this topic. simply there is the same thing in a flex project. any uicomponent which is being added to movieclip, uimovieclip or sprite doesn't get displayed. maybe i need to call some additional method after i add button as a child to the sprite?

                  • 6. Re: add uicomponent inside a sprite
                    Flex harUI Adobe Employee

                    Basically, I'm trying to tell you that you can't do what you want to do

                    without a lot of work.  It might be easier to float the button over the

                    movieclip.

                    • 7. Re: add uicomponent inside a sprite
                      infeter Level 1

                      ok, i see you are the expert. please share what i need to do. what is the work here? simply i work with flash/flex for long time, but faced that issue for the first time. and i simply don't understand what is needed here. please explain.

                       

                      p.s. floating is not the way i need.

                      • 8. Re: add uicomponent inside a sprite
                        infeter Level 1

                        btw, maybe someone can share links in this thread to some similiar topics, simply i've tried to search google for similiar topics, but no solutions. it seems very few people need such actions, but i really need this, please help.

                        • 9. Re: add uicomponent inside a sprite
                          Flex harUI Adobe Employee

                          Floating will be easier.  Why have you ruled it out?  Adding a child to a

                          movieclip could cause problems in that movieclip.

                           

                          Are you using SWFLoader to load the SWF with the movieclip?  If not, are

                          there other Flex containers somewhere?

                           

                          Also, do you really need a Flex button or can you use

                          flash.display.SimpleButton?

                          • 10. Re: add uicomponent inside a sprite
                            infeter Level 1

                            please read my first post again. it has only one function - it if the full source code of the application. no other functions or lines. please help if you can. if not - thanks anyway, but please don't post "floating" again, because this is not the problem i want to solve.

                            • 11. Re: add uicomponent inside a sprite
                              infeter Level 1

                              btw, again - i need UIComponent addition, nothing else. this is the name of the topic. i can add dynamically just fine to the "cirle" instance different sprites, movieclips, textfields, simplebuttons etc... but what i need is said in the topic name. :-) please help anyone.

                              • 12. Re: add uicomponent inside a sprite
                                Flex harUI Adobe Employee

                                It is not clear from your first post what the container for wrapper is.  Is

                                it another Sprite or a UIComponent?

                                 

                                The full source cannot be one function.

                                 

                                Why do you need a Flex button?  Maybe you should use SimpleButton instead.

                                • 13. Re: add uicomponent inside a sprite
                                  infeter Level 1

                                  here is the full source code:

                                  <?xml version="1.0" encoding="utf-8"?>
                                  <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                                                 xmlns:mx="library://ns.adobe.com/flex/mx" addedToStage="onAddedToStage(event)" >

                                      <fx:Script>
                                          <![CDATA[
                                              import mx.controls.Button;
                                              import mx.core.UIComponent;
                                            
                                              private function onAddedToStage( event : Event ) : void {
                                                  trace("onAddedToStage");
                                                  make();
                                              }
                                              private function make() : void {
                                                  var circle : Sprite = new Sprite();
                                                  circle.graphics.beginFill(0xFF0000, 0.2);
                                                  circle.graphics.drawCircle(0, 0, 20);
                                                  var button : Button = new Button();
                                                  button.label = "testing...";
                                                  var wrapper : UIComponent = new UIComponent();
                                                
                                                  circle.addChild( button );
                                                  wrapper.addChild( circle );
                                                  addChild( wrapper );
                                              }
                                          ]]>
                                      </fx:Script>

                                  </mx:Application>

                                  now please tell me what i need to add to see the button. :-)

                                  • 14. Re: add uicomponent inside a sprite
                                    infeter Level 1

                                    ok, i've reviewed flex methods and solved my problem, i've marked added lines with bold. here is the working main function:

                                     

                                    private function make() : void {
                                                    var circle : Sprite = new Sprite();
                                                    circle.graphics.beginFill(0xFF0000, 0.2);
                                                    circle.graphics.drawCircle(0, 0, 20);
                                                    var button : Button = new Button();
                                                    button.label = "TEST...";
                                                    var wrapper : UIComponent = new UIComponent();               
                                                    circle.addChild( button );
                                                    button.regenerateStyleCache( false );
                                                    button.width = button.height = 100;
                                                    button.validateSize();
                                                    button.initialize();
                                                    button.validateDisplayList();

                                                    wrapper.addChild( circle );
                                                    addChild( wrapper );
                                                   
                                    }

                                    some comments:

                                    - we need to regenerateStyleCache or flex will give you some odd error regarding textfield is null while setting its color :-| ,

                                    - then we need to set "button.width = button.height = 100;" or flex will show you 1x1 pixel button in the end :-| ,

                                    - then of course we need to validate the size,

                                    - then we initilize the component or the flex will give some antialiasing type is null :-| ,

                                    - then we validate the display list.

                                     

                                    well... i wish one day flex and flash will be friends... maybe.

                                     

                                    thanks everyone. feel free to post your thoughts concerning this. i will be happy to read them.

                                    • 15. Re: add uicomponent inside a sprite
                                      CleanCoder Level 2

                                      If you are going to manually validate everything you should call validatePropertites also, and I think you would call initialize right after creating the Button.

                                       

                                      Going back to what Flex harUI was saying, you are not really using UIComponent or the Flex framework as it was intended, so basically you are on your own as far as hacking something together (which it looks like you have done). I wouldnt consider using that code in anything but a prototype app. Did you give any consideration to using SimpleButton as Flex harUI suggested?

                                      • 16. Re: add uicomponent inside a sprite
                                        Flex harUI Adobe Employee

                                        If that's working for you great.  It looks like you're not going to be

                                        hooked into style and property change validation from the main app, but if

                                        those things aren't going to change you might be ok.

                                         

                                        If you have troubles and want to look further, I would look at the

                                        contentPane parenting logic in mx.core.Container.as.  That's the once place

                                        I think we try to break the UIComponent parents UIComponent rule.  There is

                                        a method called parentChanged that tries to fix up a virtual parent that

                                        skips over the contentPane.

                                        • 17. Re: add uicomponent inside a sprite
                                          infeter Level 1

                                          @CleanCoder

                                          "If you are going to manually validate everything you should call  validatePropertites also, and I think you would call initialize right  after creating the Button."

                                          - i've simply went to addingChild function of the UIComponent and checked how it initializes the ui components there. then i undertood that i need to call these validate, regenerate cache functions.

                                           

                                          "Going back to what Flex harUI was saying, you are not really using  UIComponent or the Flex framework as it was intended, so basically you  are on your own as far as hacking something together (which it looks  like you have done)."

                                          - well, i would disagree, because we can add uicomponent to sprite, but i think flex developers skiped that feature and left us (programmers) as is. it doesn't throw any errors, it simply doesn't do anything... :-) i can see the ui child is added to sprite, but it is not initialized, that's why i need to manually initialize it. btw, it is still not clear for me why i need to initialize uicomponent manually if i add this uicomponent to uimovieclip. i thought it would initialize uicomponent properly, but it is again still not visible. what the... i think you will agree with me that someone would create a flex application which will be loading inside some flash application and work with it. but now i just see that flex and flash are not friends at all. there is nothing working in their combination (working together), i am upset.

                                           

                                          Did you give any consideration to using SimpleButton as Flex harUI suggested?

                                          - it works as it should without any validations etc because it is not flex part. it is in the flash.display, not inside mx.* i had problems only with UIComponents. they are added as not visible, now i understand that nobody simply initializes them via addingChild method. that's why i've added these "manual" lines.

                                           

                                          @Flex harUI

                                          "If that's working for you great."

                                          - to tell the truth i am still waiting from you some your "suggestion". simply i'm quite disappointed, this is official adobe website and forum, you are the employee and don't explain anything... just saying that something is "complex". Well, no help at all.

                                           

                                          "If you have troubles and want to look further, I would look at the contentPane parenting logic in mx.core.Container.as"

                                          - Sorry, i don't understand what you are talking about... How Container is connected to a Button? Here is inheritance of the Button component from official live docs:

                                          Packagemx.controls
                                          Classpublic  class  Button
                                          InheritanceButton  Inheritance UIComponent Inheritance FlexSprite Inheritance Sprite Inheritance DisplayObjectContainer Inheritance InteractiveObject Inheritance DisplayObject Inheritance EventDispatcher Inheritance Object
                                          • 18. Re: add uicomponent inside a sprite
                                            CleanCoder Level 2

                                            UIComponent implements ILayoutManagerClient, UIMovieClip does not.

                                             

                                            Are you really just using Flex for 1 button? And you may want to try Spark buttons, all of the cool kids are using them these days.

                                             

                                            I think Flex harUI is trying to politely tell you that what you are trying to accomplish makes no sense.

                                             

                                            Did you really post the docs for the MX Button class? LOL. You were asking questions about parenting UIComponents, hence Flex harUI's reference to the Container class.

                                             

                                            Flex is simply a framework built on AS3, Flash and Flex are homies for life. If you dont like it, dont know how to use it, or it makes you upset, feel free to write your own framework.

                                            • 19. Re: add uicomponent inside a sprite
                                              infeter Level 1

                                              "UIComponent implements ILayoutManagerClient, UIMovieClip does not."

                                              - sorry, don't understand what do you mean by that... i was telling that if i use Sprite or UIComponent - both don't work without manual initialization. i thought UIMovieClip must work...

                                               

                                              "Are you really just using Flex for 1 button? And you may want to try  Spark buttons, all of the cool kids are using them these days."

                                              - no, i need it for the project i am working on, but it for is very big and will take time to write about it... btw, ok, i will try spark buttons.

                                               

                                              "I think Flex harUI is trying to politely tell you that what you are trying to accomplish makes no sense."

                                              - well, he wrote this "Basically, I'm trying to tell you that you can't do what you want to do without a lot of work.", so i am still very curious what i need to write... Just small but clear explanation, that's enough. I don't even need the code.

                                               

                                              "Did you really post the docs for the MX Button class? LOL. You were  asking questions about parenting UIComponents, hence Flex harUI's  reference to the Container class."

                                              - well, i see in docs that Button inherits UIComponent. or i don't understand your question. simply just read the topic name - if i add ANY uicomponent to sprite or uimovieclip - it doesn't get initialized. that's the problem... was the problem...

                                               

                                              "Flex is simply a framework built on AS3, Flash and Flex are homies for  life. If you dont like it, dont know how to use it, or it makes you  upset, feel free to write your own framework."

                                              - i see, but why Adobe then created their Flex Component Kit? :-) i they were friends - then there would be no such hacks...

                                               

                                              thanks for comments, i really like to talk with you.

                                              • 20. Re: add uicomponent inside a sprite
                                                CleanCoder Level 2

                                                Check out the docs for ILayoutManagerClient. Notice the reference to SystemManager in the "nestLevel" property description. Then check out the docs for SystemManager. These classes are essential for properly laying out UIComponents as intended. Sprite and UIMovieClip are not suitable parents for UIComponents.

                                                 

                                                Flex was created for building applications, and the Flex components are designed to work in a Flex application. You are trying to use Flex components outside of that context.

                                                 

                                                "Basically, I'm trying to tell you that you can't do what you want to do without a lot of work."...   Pretty self explanatory I thought.

                                                • 21. Re: add uicomponent inside a sprite
                                                  Flex harUI Adobe Employee

                                                  Frameworks tend to have rules.  Violation of the rules aren't guaranteed to

                                                  generate errors.  The rules that apply here are:

                                                   

                                                  -Navigator children must be Containers (INavigatorContent in 4.x)

                                                  -Container children must be IUIComponents

                                                  -UIComponent children can be anything

                                                  -UIComponent parents must be UIComponents

                                                   

                                                  There are often exceptions to rules.  There are a few places in the

                                                  framework where a UIComponent isn't parented by another UIComponent.  One of

                                                  those places is the ContentPane in Container.  If you put a Button in a

                                                  Container that has scrollbars, the Button's actual parent is a Sprite, but

                                                  the Button thinks its parent is the Container and the Container thinks one

                                                  of its children is the Button.  And all of that LayoutManager and Style code

                                                  gets hooked up.

                                                   

                                                  What you are trying to do is officially unsupported, so I can't really do

                                                  much more than give you some quick general guidance.

                                                  • 22. Re: add uicomponent inside a sprite
                                                    infeter Level 1

                                                    @CleanCoder and @Flex harUI

                                                    wow. :-) thanks guys, that's what i needed, i will check these rules and implement the solution i need. btw, where did you grab that information? can you please share a link with me?

                                                    • 23. Re: add uicomponent inside a sprite
                                                      Flex harUI Adobe Employee

                                                      I don't know where it is in the official doc, but I've posted those rules at

                                                      least a dozen times.