4 Replies Latest reply on Nov 1, 2010 9:55 AM by francispotter

    Panini SkinnableComponent question

    francispotter Level 1

      I'm experimenting with Panini, specifically with the use of SkinnableComponent to roundtrip between Builder and Catalyst.

       

      Is there a way to take existing Flex skinnable components (such as spark.components.TextArea) and turn them into components that can be skinned in Catalyst?

       

      More specifically, how does Panini decide which subclasses of SkinnableComponent to list under "Covert Artwork to Component" -> Skinnable Component?

        • 1. Re: Panini SkinnableComponent question
          Bear Travis Adobe Employee

          In general, the best practice is to toggle on the compatibility checker under Project Settings > Flash Catalyst.

          For skinnable components in particular, make sure to instantiate them in your application so that you get compile errors and compatibility warnings. Compatibility problems will come with a description that can tell you a lot about skinnable components.

           

          For your immediate question, however, no, subclasses of spark components will be displayed in the custom skinnable component box in Catalyst.

          1 person found this helpful
          • 2. Re: Panini SkinnableComponent question
            francispotter Level 1

            Thanks for the response.

             

            So is there a "best practice" way to have a component that can be used in Catalyst that is the equivalent of TextArea?

             

            Ideally, I'd like to be able to take a multi-line text block from Illustrator, and make it editable via Catalyst the same way we can do with a single line.

             

            This seems like an obvious requirement; I'm sure others would like to know what the best/right way to do it is.

            • 3. Re: Panini SkinnableComponent question
              Peter Flynn (Adobe) Adobe Employee

              Hi Francis,

               

              Multi-line editable text is currently not compatible with Flast Catalyst "Panini" -- so, although you can create such a control in Flash Builder, you can't edit it further in Catalyst afterward.  You can still import the text from Illustrator using Catalyst, and convert it to a generic component to get the positions right, but the final conversion to a TextArea or RichEditableText needs to happen in Builder.

               

              After that, you may still be interested in editing the rest of the UI back in Catalyst.  In the current Panini preview, a single incompatibility prevents Catalyst from opening the entire project.  However, in the final release of Panini, you are likely to see a more fine-grained approach ("partial compatibility").  You'd be able to open the project, but the part of your UI containing the TextArea would be walled off, inaccessible and uneditable.  The best practice would then be to isolate the TextArea so that the rest of the project remains fully editable.

               

              Finally, there's one more option if you're willing to put in more effort in Builder to preserve the maximum about of editing capability back in Catalyst.  You can create a custom SkinnableComponent in Builder that defines a placeholder part (e.g. a rectangle or a dummy group) and then at runtime replaces the placeholder with a real TextArea.  By manipulating the placeholder, the Catalyst user retains control over the size and position of the TextArea.

               

              Hope that helps!

               

              - Peter

              • 4. Re: Panini SkinnableComponent question
                francispotter Level 1

                Peter -- Thanks for the response. Your "placeholder" approach is what I was imagining I would do, but I expect that would not allow the Catalyst user to set e.g. the font for the text.

                 

                It seems like an editable multi-line control would be a highly desirable feature. Is there somewhere I can add that to the request list for the product?