9 Replies Latest reply on Jan 2, 2007 5:23 AM by moyosaned

    Dynamic components

    strayhand
      Is it possible to add/delete/remove Flex components (e.g. Panel, Datagrid, etc.) in real time? For example I would like to pass the components to the flex/flash file using something like Ruby on Rails with the WebORB plugin. What I'm uncertain of is whether or not I have to the flex componets in place and compiled into flash or if I can add them using actionscript or something.

      Here's an example. I create a "service" using Ruby on Rails and WebORB that defines an object. The object is basically a flex component and it's properites (e.g. Panel with a DataGrid inside of it). I would then like to have some actionscipt in my compiled flex app that takes the object being passed from ROR and then inserts the new component.

      If you can add flex components dynamically what are the implications for the client load? Cache, etc.

      I'm my opinon this could be very useful as I'll no longer have to screw around with both radrails and flex builder to create one application. I can simply setup my initial flex code and compile. Then I could write everything in ROR.

      Thanks for the advice.
        • 1. Re: Dynamic components
          peterent Level 2
          It's pretty easy to create components in ActionScript. The caveat is that the definition of the component MUST be within the SWF. So you'll need to make sure that every component you might possibly want to create is there (eg, Button, Label, DataGrid, etc.).

          Here's how to add button, assuming the file this code is within extends Panel. The button will be centered in the Panel (layout="absolute"):

          var b:Button = new Button();
          b.label = "Pick Me";
          b.setStyle("horizontalPosition",0);
          b.setStyle("verticalPosition",0);
          addChild(b);
          b.addEventListener( MouseEvent.CLICK, handleClick );
          • 2. Re: Dynamic components
            strayhand Level 1
            Thanks for the reply. I have just a few more questions.

            "The definition of the component MUST be within the SWF"

            1. What do you mean by the definition? Are you saying that I have to include the XML for the particular component in the Flex app and then compile the app? Then the component "definition" is available so I can reuse it?

            If this is the case what's the best strategy for hiding the component from view? Could I change it's visiablity, or throw it into a different state?

            2. What about exporting components into individual flash files? Could I export each Flex component into individual flash files and then include them into a parent flash file when ever I wanted to use that component? Then I could use actionscript or something to add the components that I want from a library of flash files in realtime.

            What do you think?
            • 3. Re: Dynamic components
              peterent Level 2
              In order for a component to be created, its class definition must be compiled into the SWF. All of the definitions for the components are in the framework.swc (a SWC is a library file) - all you need to do is reference the component once. The Flex compiler only includes what it needs. For example, you have Button so the definition of a Button is taken from framework.swc and put into the SWF. If you do not use DataGrid then DataGrid is not in the SWF. This is an optimization so that the SWF is as small as possible.

              By doing 2 things (using my example above):

              import mx.controls.Button; // which I left out
              and
              var b:Button = new Button();

              The definition of Button is included automatically. Just having the import alone won't do it - you need to demonstrate to the compiler you are going to use the Button. You can't just have the other statement without the import because that's a compilation error.

              The bottom line is that you don't need to do anything special, just write your code so you reference the components. You might do something like this:

              switch( componentName ) {
              case "button" : comp=new Button(); addChild(comp); break;
              case "list": comp=new List(); addChild(list); break;
              // etc.
              }

              so that you cover all the bases.

              The downside to this approach is that the SWF will be much larger than necessary because it will carry the definitions of all the classes - not just the ones you will actually use.

              • 4. Dynamic components
                strayhand Level 1
                Thank you again for the quick response.

                I now have a better understanding of how components work and how to generate them of the fly via actionscript. I'll have to try compiling every component and seeing how big the .swf file becomes. If the file becomes too large I'll either have to scale back which components are include, or try something else.

                In my previous post I threw out the idea of separating each component into individual flash files and then including them into the parent flash file as needed. The premise being that I could add only what I needed when I needed it. However I'm just getting started with Flex so I'm not sure if:

                1. Loading a flash file (with just the component) inside the parent flash file will give me access to the necessary "definition" for that component.

                2. How much wasted space (file size) will be generated in wrapping each component into individual flash files. I'm sure there has to be some redundancy.

                3. I'll also have to read up on what .swc files are.

                My end goal is to be able to manipulate the flex application from ROR without having to go back and forth between the flex application. Ideally I want to be able to generate entire pages/views from the ROR app by sending new request to the flash file with updates.

                Thank you for all of your help.
                • 5. Re: Dynamic components
                  peterent Level 2
                  I applaud your willingness to tackle such a large task. Keep in mind that Flash was designed to be small and fast. The Flash 8 IDE also compiles ActionScript and symbols into a SWF and does it the same way as Flex: only put into the SWF what it absolutely necessary to reduce download time.

                  We've package Flex as optimumly as possible; that single framework.swc is much more compact than having one per component - plus you have to deal with inter-component dependencies (eg, you can't have just VBox, you need Container, UIComponent, etc. ). Containers like Panel also include Button and Scrollbar.
                  • 6. Re: Dynamic components
                    strayhand Level 1
                    Is there a document that outlines the interdependencies between components?

                    Thanks for your insight.
                    • 7. Re: Dynamic components
                      strayhand Level 1
                      As I read your post again, I can see that it will probably be better for me to include everything so that I'm not having to deal with the dependencies and overlapping components. I'll just have to find a way to build my application so that the first page(s) are simple enough that the additional components can download in the background. Or something to that effect.
                      • 8. Re: Dynamic components
                        ntsiii Level 3
                        Be aware that as long as the class definitions are compiled into the swf, you can instantiate them at run time using instructions that are also loaded at run-time.

                        We created an xml file that described the structure of part of an app, and when the user navigates, we load that xml file via HTTPService and instantiate the components according to it.

                        It is reasonably performant.

                        Tracy
                        • 9. Re: Dynamic components
                          moyosaned Level 1
                          See my article here:
                          http://labs.flexcoders.nl/?p=27
                          Sample + source included