6 Replies Latest reply on May 29, 2010 6:09 PM by Adam York

    extend using both actionscript and mxml

    Adam York

      I have a custom component , called contentblade. It lives in dev.components. I want to lay out its children in mxml , but i need to override some methods , ie , measure etc. I dont want to write all of that inside fx:Script tags. I figured ah this would be simple enough , ive done this  before. So in dev.components i created another directory called contentBlade , and create a new class in that package called ContentBladeBase ,  that extends SkinnableContainer , and implements IUIComponent. My problem is the constructor for .as file never gets called unless a instantiate a new instace inside the ContentBlade.mxml file. Do i HAVE to #include the as file into the mxml file ? I assumed ,  xmlns="dev.components.contentBlade.* , namespace declaration would take care of that. Im trying to streamline my dev process.

       

      Main.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application
                      xmlns:fx="http://ns.adobe.com/mxml/2009"
                      xmlns:s="library://ns.adobe.com/flex/spark"
                      xmlns:mx="library://ns.adobe.com/flex/mx"
                      xmlns:ay="dev.components.*"
                      layout="absolute"
                      width="100%"
                      height="100%"
                      frameRate="30"
                      viewSourceURL="./source/public.txt">
          <mx:Canvas id="base"
                     width="100%"
                     height="100%"
                     autoLayout="false">
              <ay:ContentBlade/>
          </mx:Canvas>
      </mx:Application>

       

      ContentBlade.mxml

      <?xml version="1.0" encoding="utf-8"?>
      <s:SkinnableContainer
                          xmlns="dev.components.contentBlade.*"
                          xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx">

       

         
      </s:SkinnableContainer>

       

      ContentBladeBase.as

       

      package dev.components.contentBlade
      {
          import flash.geom.Vector3D;
          import mx.core.DesignLayer;
          import mx.geom.TransformOffsets;
          import spark.components.SkinnableContainer;
          import flash.geom.Matrix3D;
          import flash.display.DisplayObjectContainer;
          import mx.core.IVisualElement;
          import flash.events.Event;
          import flash.geom.Matrix;
          import mx.core.IUIComponent;

       

          public class ContentBladeBase extends SkinnableContainer implements IUIComponent
          {
              public function ContentBladeBase()
              {
                  super();
                  trace( "NEW ContentBladeBase" );
              }
          }
      }

        • 1. Re: extend using both actionscript and mxml
          UbuntuPenguin Level 4

          Could you explain better what you are trying to accomplish ?  And you don't need to have "implements IUIComponent" , the SkinnableComponent class extends UIComponent which implements IUIComponent.

          • 2. Re: extend using both actionscript and mxml
            Adam York Level 1

            absolutely. I have a need for a custom component that will contain several child components. The custom component will have a spark skin. The custom component i have create , as you can see , extends SkinnableContainer. From my reading i felt this was a good spark component to extend from as im going to have several , possibly unrelated spark components as children of this component. I want to lay the children out within the mxml , for example

             

             

            ContentBlade.mxml

            <?xml version="1.0" encoding="utf-8"?>
            <s:SkinnableContainer
                                xmlns="dev.components.contentBlade.*"
                                xmlns:fx="http://ns.adobe.com/mxml/2009"
                                xmlns:s="library://ns.adobe.com/flex/spark"
                                xmlns:mx="library://ns.adobe.com/flex/mx">

                 <s:Button/>         <-------------------etc

                 <mx:DataGrid/>   <------------------- etc

             

               
            </s:SkinnableContainer>

             

            I also need to have several of the skinnable containers inherited methods , overriden , for example measure() , draw() , onCreationComplete(). etc.

            I want explicit control over those. Now i have seen and written myself , in the past , custom componets soley in actionscript. and just point the namespace to the actiosncript class. I have also written components , solely , in mxml , using the fx:Script tag to define which methods i want to override. In this case i want have my custom componet use both , the .as i posted above , and the mxml. I want ContentBlade.mxml , and ContentBladeBase.as to be the same thing. I could write the whole component is as , but its so much faster for me to create all of the children in mxml. Does that make sense ?

            • 3. Re: extend using both actionscript and mxml
              UbuntuPenguin Level 4

              I'm not sure the motivation behind making a class in mxml and another in as ?  Just make the class in mxml , and override the methods you want in the fx:Script block.

              • 4. Re: extend using both actionscript and mxml
                Adam York Level 1

                because A) its ugly and cumbersome , and B) Im using Flex Builder 3 , and the flex 4 sdk spark libs fx:Script declarations no longer highlight , syntax check , or color. Its just this big grey mass of text. Let me ask you , or if anyone else cares to chime in , this ... if you needed to have a component that contained a drop down , a grid of images , and a text field , and you need to be able to style each one of these child components with it own spark skin , and you need these child components and the parent compents to basic layout in a liquid manner on resize , how would you do it ?

                • 5. Re: extend using both actionscript and mxml
                  UbuntuPenguin Level 4

                  Each component would have its own skin class.  You don't need to override anything to do this.  The logic behind setting up the layout and skinning can be seperated.

                   

                  SuperContainer.mxml

                  <SkinnableContainer>

                    <Layout>

                     <VerticalLayout/>

                    </Layout>

                     <DropDown width="20%" height="10%" skinClass="com.ubu.skins.dropDownSkins.SomeSkinClass" />

                     <List dataProvider={dp} height="80%" width="100%" itemRenderer="com.ubu.renderers.AwesomeRenderer">

                       <Layout>

                         <TileLayout />

                       </Layout>

                     </List>

                     <TextInput width="110" skinClass="com.ub.skins.TextSkins.SuperSkin" />

                  </SkinnableContainer>

                   

                   

                  ...

                  Meanwhile, in another piece of code.

                   

                  <custom:SuperContainer skinClass="com.ubu.containerSkins.SuperContainerSkin" width="100%  height="100%"/>

                   

                   

                  Of course , you could make that your component and THEN create the skin class , but you get the picture.

                   

                  If this post was helpful please mark it as such.

                  1 person found this helpful
                  • 6. Re: extend using both actionscript and mxml
                    Adam York Level 1

                    thanks penguin. I suppose what i was looking for was some form of multiple inheritance. But , alas , it appears as though the only way to do it is to use the include directive , and thats just ugly. Thanks for you help !!