17 Replies Latest reply on Oct 31, 2010 11:33 PM by FM_Flame

    How to professionally package custom componets for use by other developers?

    FM_Flame Level 1

      I've build a custom component, I've set it in my library project, I've created a namespace for it and a manifest file.

      I was following this blog's guide on how to do that (if you have a link in the documentation pls post it, I couldn't find one):

      http://unitedmindset.com/jonbcampos/2010/05/12/creating-custom-spark-components/

       

      My final file structure is like this:

       

      In the src root of the library project:

      manifest.xml (I have listed only fmn.flamenage.components.Flamenage.mxml here)

      defaults.css

       

      fmn.flamenage.classes.events.FlamenageEvent.as

      fmn.flamenage.classes.events.FlamenageProgressEvent.as

      fmn.flamenage.components.Flamenage.mxml (which is based on FlamenageClass.as)

      fmn.flamenage.components.FlamenageClass.as

       

      Flamenage.mxml is the main component which uses everything else.

       

      Ok so what I expected when I deployed this swc in my project was to get 1 component in Design view, but instead I've got all of these classes listed in CustomComponents with some default Icon). Also when I started typing "Flamenage" in the mxml to locate my component I saw that I have access to all of the componets but they were in their own namespaces since I didn't write them down in my manifest file.

       

      So I have 4 questions:

      1) Is it possible when typing in the mxml file to not display all of the components in my swc, because they don't really work on their own, but just the one I want the user to see, in this case: Flamenage?

      2) Is it possible not to list all my components in the design view too, but just the one that is important for the developer to use, in this case again: Flamenage ?

      NOTE: For example UI component extends FlexSprite but it's not listed when typing in mxml or any of the events, it's just the componets to use or extend from.

      3) Is it possible in Design view to set a different folder for the components located in that namespace?

      4) How do I set icon for my component for display in the design view panel?

        • 1. Re: How to professionally package custom componets for use by other developers?
          FM_Flame Level 1

          Doh, at the moment I wrote it and start searching again I found this :

           

          http://blog.another-d-mention.ro/programming/create-professional-flex-components/

           

          I will write again if I have more questions. Hope that helps somebody

          • 2. Re: How to professionally package custom componets for use by other developers?
            FM_Flame Level 1

            Does someone know if it's possible to package the same way components exported from Flash Professional CS5?

            • 3. Re: How to professionally package custom componets for use by other developers?
              FM_Flame Level 1

              Ok after chick out what's on that article 3 of the questions got solved but I still can't find answer to these 2:

               

               

              1) Is it possible when typing in the mxml file to not display all of the components in my swc, because they don't really work on their own, but just the one I want the user to see, in this case: Flamenage is the component I want the developer too see and I don't want him to see my custom events as components as well as some other classes. How do I fix that ?

               

              Example:

              mx.events.FlexEvent has many events like creationComplete and so on. I opened the class.. nothing special there.. all events are described and the class extends Event. Why when you type <mx: you can't find <mx:FlexEvent, while in my case you can find <fmn:FlamenageEvent... that's my point.

              So how do I hide these?

               

              2) I still haven't been able to find if it's possible to package the same way components exported from Flash Professional CS5?

               

              Anyone?

              • 4. Re: How to professionally package custom componets for use by other developers?
                FM_Flame Level 1

                I'm guessing since this is more specific stuff, it will be hard to find someone other than adobe employee to know something about this.. so please help needed here !

                 

                P.S. About the post above, in point 1) I talk about componets but what I really refer to are the classes that my 1 component uses. I don't want them all exposed in the mxml, just those which are actually components. I hope I make sense.

                 

                The example I've provided for the previous post applys:

                you can't put as mxml <s:FlexEvent /> (it doesn't appear in the code hint menu) but you can use it and access it in ActionScript, same thing I want to happen with my custom component, now how do I do that?

                • 5. Re: How to professionally package custom componets for use by other developers?
                  JeffryHouser Level 4

                  1) Is it possible when typing in the mxml file to not display all of the components in my swc, because they don't really work on their own, but just the one I want the user to see, in this case: Flamenage?


                   

                  I think the excludeClass metadata is what you want.

                   

                  2) Is it possible not to list all my components in the design view too, but just the one that is important for the developer to use, in this case again: Flamenage ?

                  NOTE: For example UI component extends FlexSprite but it's not listed when typing in mxml or any of the events, it's just the componets to use or extend from.

                   

                  I'm pretty sure the excludeClass metadata should solve this issue too, but I'm not quite sure.  Design View is made to display all components that extend UIComponent, I think.

                   

                  3) Is it possible in Design view to set a different folder for the components located in that namespace?

                   

                  Yes, but it is not documented.  You'll need to create a design.xml file.  I believe I cover this in The Flex Show screencast series on creating custom Flex Components, but I'm not sure.

                   

                  4) How do I set icon for my component for display in the design view panel?

                   

                  I'm pretty sure there is metadata for that.  iconFile, perhaps?

                  1 person found this helpful
                  • 6. Re: How to professionally package custom componets for use by other developers?
                    FM_Flame Level 1

                    Thank you for replying Jeffry,

                     

                    could you please ready my posts after the first one.. sry for that but I couldn't edit the first after I figured out some of the things. Check out my last 2 posts. I have just 2 questions left.

                     

                    About your suggestion for question 1) (i still can't find answer for that one), I happened to think the same thing but when I opened for example FlexEvent Class I didn't see any ExcludeClass Metadata. I'm not sure since I haven't used buy it maybe Exclude class prevents you from seeing it when trying to use in AS too which is not what I had in mind.

                     

                    Well after you read the rest.. if u happen to think of anything I could try out.. you'll be more than welcome

                    • 7. Re: How to professionally package custom componets for use by other developers?
                      JeffryHouser Level 4

                      I guess your other questions:

                       

                      1) Is it possible when typing in the mxml file to not display all of the components in my swc, because they don't really work on their own, but just the one I want the user to see, in this case: Flamenage is the component I want the developer too see and I don't want him to see my custom events as components as well as some other classes. How do I fix that ?

                       

                      and

                       

                      About your suggestion for question 1) (i still can't find answer for that one), I happened to think the same thing but when I opened for example FlexEvent Class I didn't see any ExcludeClass Metadata. I'm not sure since I haven't used buy it maybe Exclude class prevents you from seeing it when trying to use in AS too which is not what I had in mind.

                       

                      FlexEvent will show up in code hinting.  It needs no "ExcludeClass" meta; because it is a documented class with many uses throughout the Flex Framework.  It probably won't show up in MXML code hinting, though, because it does not  extend UIComponent.  I was pretty sure that ExcludeClass would prevent components from showing up in code Hinting.

                       

                      2) I still haven't been able to find if it's possible to package the same way components exported from Flash Professional CS5?

                       

                      I don't understand this question, but if you create a library project in Flash Builder, it will compile down to a SWC instead of a SWF and then that SWC can easily be used in other Flex projects.  Does that answer the question?

                      • 8. Re: How to professionally package custom componets for use by other developers?
                        FM_Flame Level 1

                        About the 1) question:

                         

                        FlexEvent will show up only in AS hinting, NOT MXML hinting. That's what I want to do with all of my classes, escept for the actual component, which should show in AS and MXML hinting. I couldn't understand if you say that ExcludeClass would do the trick or If you have any other suggestion I could try out?

                        Note: you say that FlexEvent doesn't show up in MXML hinting because it doesn't extend UIComponent, but my custom FlamenageEvent also doesn't.. it extends Event class and still it shows up in the MXML hinting. What would happen if the user put it in MXML like <fmn:FlamenageEvent /> ? Nothing... it's not supposed to work this way, it's not a component just a class that the actual component uses... that's why I don't want it to show up in MXML hiting just as FlexEvent doesn't. I wish there was some documentation about all this...

                         

                        About the 2) question:

                        I pretty much know how to package components from flex to flex using the library project (except question 1), that what this topic is mainly about. But when you want to add timeline animation to your flex project you create it in Flash Professional in my case CS5 you convert it to flex component and export it as SWC. But when you do that, i can't figure out how can I package it the same way I do in flex. With this I mean that in flex library project I specify a namespace for my components, a manifest file, a design file and this all exports to the swc and I can leverage from having one specific namespace for all of my components, arrange them accordinging in the design view in the Flash Builder etc. How do I add manifest file and design file to the flash SWC, is it at all possible?

                         

                        I hope now you understand more clearly

                        • 9. Re: How to professionally package custom componets for use by other developers?
                          JeffryHouser Level 4

                          FM_Flame wrote:

                           

                          About the 1) question:

                           

                          FlexEvent will show up only in AS hinting, NOT MXML hinting. That's what I want to do with all of my classes, escept for the actual component,

                           

                          Then don't extend UIComponent.  You can't conditionally turn on and off code hinting.

                           

                           

                          Note: you say that FlexEvent doesn't show up in MXML hinting because it doesn't extend UIComponent, but my custom FlamenageEvent also doesn't.. it extends Event class and still it shows up in the MXML hinting. 

                           

                          Post some code, then, or a project / work space demonstrating the problem.

                           


                          About the 2) question:

                          I pretty much know how to package components from flex to flex using the library project (except question 1), that what this topic is mainly about. But when you want to add timeline animation to your flex project you create it in Flash Professional in my case CS5 you convert it to flex component and export it as SWC. But when you do that, i can't figure out how can I package it the same way I do in flex. With this I mean that in flex library project I specify a namespace for my components, a manifest file, a design file and this all exports to the swc and I can leverage from having one specific namespace for all of my components, arrange them accordinging in the design view in the Flash Builder etc. How do I add manifest file and design file to the flash SWC, is it at all possible?

                           

                          I haven't the foggiest idea.  But, I do know that Flex SWCs and Flash SWCs are not compatible with each other.  I have no idea why, but that is the way it is.  So, you cannot take a Flash SWC and use it in a Flex project.  As such, Flex specific items (such as namespace URLs) seem superflous to add to Flash Pro.

                          • 10. Re: How to professionally package custom componets for use by other developers?
                            FM_Flame Level 1

                            package fmn.flamenage.classes.events

                             

                            {

                             

                                 import flash.events.Event;

                             

                                 public class FlamenageEvent extends Event

                                 {

                             

                                      public static var SYSTEM_READY:String = "systemReady";

                             

                                      public function FlamenageEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)

                                      {

                                           super(type, bubbles, cancelable);

                                      }

                             

                                      override public function clone():Event

                                      {

                                           return new FlamenageEvent(type, bubbles, cancelable);

                                      }

                             

                                 }

                            }

                             

                             

                            This is my class which is located in the library project. As you can see it does not extend UIComponent. Copy the generated swc file into a blank Flex project's libs directory. Open the Default mxml file and type "<" so the MXML code hints show up. "Then type Flamenage". You will see that the class that does not extend UIComponent shows up in that list. Now try to find FlexEvent. You won't find it. And it doesn't have an ExcludeClass metadata or at least that's what I see. So I guess there should be some parameter which you can specify in the manifest file for each class you add there which tells to the Flash Builder show this as component in the mxml code hinting or don't. I am not sure this is even possible, that's why I am asking here if someone is familiar with this and I know it's something specific so it would be hard to find a person who does. But hopefully someone will know the answer and will post it here

                            Note: I skipped explaining how to make the design and manifest xmls and adding a default namespace for the library project, because I just wanted to show you what I mean, so this class will include it's own namespace when you add it.

                             

                            Testing this won't take u more than 5 mins, just copy paste my code in the correct package class in the flex library project, then copy the swc to ur flex project and test.

                             

                            I haven't the foggiest idea.  But, I do know that Flex SWCs and Flash SWCs are not compatible with each other.  I have no idea why, but that is the way it is.  So, you cannot take a Flash SWC and use it in a Flex project.  As such, Flex specific items (such as namespace URLs) seem superflous to add to Flash Pro.

                             

                            That is not correct if I understand what u mean correctly. You can turn flash movieclips with timeline animations into flex components and export them in SWC files from flash. Then copy that SWC in the Flex libs folder and you can use that components directly in Flex. They will show up in MXML and AS hints each component in it's own namespace. There are many articles describiding this approach, but what I want to be able to do here is if my components are in different packages to group them in one namespace as I do with the manifest.xml file in Flex. And Use a design.xml to organize how are they show in Flex Design view in components section, and that I haven't found anywhere...

                            • 11. Re: How to professionally package custom componets for use by other developers?
                              FM_Flame Level 1

                              One interesting thing I found out:

                              I extracted the files from framework.swc and the swc compiled by my Flex Library project. Both of them generate a file called catalog.xml in which I found declarations of the classes FlexEvent and my class FlamenageEvent.

                              Look at this comparison:

                               

                              <script name="mx/events/FlexEvent" mod="1265215589607" signatureChecksum="140263430" >
                                      <def id="mx.events:FlexEvent" />
                                      <dep id="flash.events:Event" type="i" />
                                      <dep id="mx.core:mx_internal" type="n" />
                                      <dep id="AS3" type="n" />
                                    </script>

                               

                              <script name="fmn/flamenage/classes/events/FlamenageEvent" mod="1286827389796" signatureChecksum="3392753273" >
                                      <def id="fmn.flamenage.classes.events:FlamenageEvent" />
                                      <dep id="AS3" type="n" />
                                      <dep id="flash.events:Event" type="i" />
                                    </script>

                               

                              So seems like this line here:

                               

                              <dep id="mx.core:mx_internal" type="n" />

                              does the trick.

                               

                              I tried to make some assumtions here about the class being internal or that making it to be in a specific namespace could solve this issue but seems like I'm wrong about that so... still no idea what should I do...

                              • 12. Re: How to professionally package custom componets for use by other developers?
                                JeffryHouser Level 4

                                I just opened up a Flex 4 Application I have in Flash Builder 4.  The FlexEvent class does not show up in code hinting.  After reviewing all the things that do, I stand by my assertion that only components that extend UIComponent will show up in MXML Code Hinting.

                                 

                                mx_internal is a custom name space used in the Flex Framework.  It is undocumented and, generally, appears to have limited Flash Builder support at best.  I'm not sure that is related to your solution.

                                 

                                I do not know what the catalog.xml file does / is; and googling did not seem to reveal the answer.

                                • 13. Re: How to professionally package custom componets for use by other developers?
                                  FM_Flame Level 1

                                  Yeah probably you are right that only classes the extend UIComponents show in MXML code hinting but that's how adobe designed the classes in their rsls. I mean If I don't extend UIComponent the class still does show up im MXML code hinting, so if they did hide those classes not extending UIComponent from MXML code hinting which they did, I should be able to do so somehow. My point was that it doesn't happen automatically when you don't extend UIComponent class or subclass.

                                   

                                  And yeah it's probably not the internal namespace, I figured it's has another usage or at least I think.

                                   

                                  Still I don't have any answers..

                                  • 14. Re: How to professionally package custom componets for use by other developers?
                                    FM_Flame Level 1

                                    Could some adobe employee please look at this. I think it shouldn't be that hard to answer since it's a more of How question, most probably not programing code involved.

                                     

                                    So the primary 2 questions are:

                                     

                                    1) Is it possible to not display in mxml code hinting all of the classes defined in the flex project library swc I've created and deployed in a flex project?

                                    Note: because they don't really work on their own, but just the one I want the user to see, in this case: Flamenage is the component I want the developer too see and I don't want him to see my custom events as components as well as some other classes. How do I fix that ?

                                     

                                     

                                    Example:

                                    mx.events.FlexEvent has many events like creationComplete and so on. I opened the class.. nothing special there.. all events are described and the class extends Event. Why when you type <mx: you can't find <mx:FlexEvent, while in my case you can find <fmn:FlamenageEvent, which extends Event the same way... that's my point.

                                    So how do I hide these?

                                     

                                    2) Is it possible to package Flash CS5 components for flex the same way we package components from Flex Library project for use in Flex?

                                    Note: By the same way I mean - define a namespace for all the components as the manifest.xml does and manage how they look in the Flex Design mode as the design.xml does.