15 Replies Latest reply on Jun 25, 2009 11:06 AM by Handycam

    A Catalyst<->Builder workflow

    marc_hughes

      Hi Guys,

       

      I've developed a workflow that will let a project more easily move between Catalyst and Builder.

       

      The basic idea is you compile your Catalyst project to a swc, and then use that in your Flash Builder project.  That way the designer can continue working in Catalyst, and the developer can get access to all those assets.  It would also let you have multiple Catalyst projects in a single Builder project, so it'll be easier to parallelize design between multiple designers.

       

      More information, including a script to do that swc compilation at:

      http://www.rogue-development.com/blog2/2009/06/compiling-fxp-swc-a-catalyst-workflow/

       

      -Marc

        • 1. Re: A Catalyst<->Builder workflow
          piercer2 Level 1

          Thats really cool stuff, thanks.

           

          I will try out some of your methods.

           

          They will hopefully last us until they sort out the work flow with later betas!

          • 2. Re: A Catalyst<->Builder workflow
            njadobe2 Adobe Employee

            Hi--very interesting approach! One question--have you tried the File > Export Library Package... feature in Catalyst that exports an FXPL file of all the components/assets in a project? You can import this directly into FB, which creates a Flex Library project that automatically builds a SWC. You can then add that project to the library path of other Builder projects. (You can also rename the package of the imported components in the Builder Package Explorer.)

             

            Thanks,

             

            nj

            • 3. Re: A Catalyst<->Builder workflow
              marc_hughes Level 1

              I have tried the .fxpl export, but had no idea what to do with the file after I made it.

               

              I'll have to give that a try, thanks for the note.

              • 4. Re: A Catalyst<->Builder workflow
                Handycam Level 1

                njadobe2 wrote:

                 

                have you tried the File > Export Library Package... feature in Catalyst that exports an FXPL file of all the components/assets in a project? You can import this directly into FB, which creates a Flex Library project that automatically builds a SWC. You can then add that project to the library path of other Builder projects. (You can also rename the package of the imported components in the Builder Package Explorer.)

                How do you do this import?  I only see options to import as a Project, not as an SWC.  See attached screen shots.

                • 5. Re: A Catalyst<->Builder workflow
                  marc_hughes Level 1

                  Hi Narciso,

                   

                  I gave the library thing a try and am a bit dissapointed on a couple fronts.

                   

                  1) The package rename didn't work quite right.  It didn't update references to skins in mxml files.  So that would be a non-trivial amount of work.  Maybe this is an artifact of the beta?  Example:

                   

                  <s:TextInput x="244" y="66" skinClass="components.UsernameInput" text="" d:userLabel="usernameInput" x.Initial="244" y.Initial="66" id="textinput1" alpha.Initial="0" x.Normal="245" y.Normal="106"/>

                   

                  2) That rename would have to happen every time a new .fxpl came out

                  3) Every time a new .fxpl came out, each developer would need to reconfigure their workspace.

                  4) It didn't include the Main.mxml file

                   

                  Combine #1 and #2 and I'm not sure it works out to a good workflow.

                   

                  I think I'm going to spend a bit more time with my script to automate this and also solve #4.

                  • 6. Re: A Catalyst<->Builder workflow
                    Handycam Level 1

                    FWIW, I've given up on trying to use the FXP directly in FB.  I use FC to generate a library, and then I merely use the subcomponents myself, by hand, in FB.

                     

                    So if I use Fc to create a datalist with multiple states and colors, I can get the components from this such as datalist1, scrollbar1, etc.

                     

                    Then I can use these directly in FB the "old-fashioned" way, by referencing them.

                     

                    If I need to make edits, I can either do simple edits (e.g. alpha.disabled=".4") directly in FB, or make my changes in FC, view the code view, and copy and past the relevant new code.

                     

                    So far it is not worth the aggravation to develop a workflow with FC.  I have found FC to be a good learning tool to see how the 4.0 sdk uses things such as states, graphics, and transitions.

                    • 7. Re: A Catalyst<->Builder workflow
                      acath Level 4

                      This is obviously disappointing, but it's a useful data point for us. Can you give some more details on why you don't use the FXP directly?

                       

                      You say "it's not worth the aggravation to develop a workflow with FC"...it sounds like you're using FC to do the initial work, then finishing in FB. Are you saying you wouldn't do this for real projects?

                       

                      -Adam

                      • 8. Re: A Catalyst<->Builder workflow
                        Handycam Level 1

                        1. So far the FXP assumes I am creating the entire application, when I might be working on only part of it.  Perhaps when FC supports all the components available in FB then it might be possible (panels, alerts, button bars, tabs) but otherwise I need to make those in Flex anyway.

                         

                         

                        2. The code is generates is not very compact and/or maintainable outside of FC. There's a lot of redundancy.  An involved app would generate a LOT of code, where the same app coded in Flex would be cleaner and easier to read (and maintain).

                         

                        For example: text items instead of being a simple:

                        <mx:Label text="Select Material"/>
                        

                         

                        I get

                        <s:RichText d:userLabel="Select material" fontFamily="Helvetica" color="0x21337e" fontSize="14" kerning="off" whiteSpaceCollapse="preserve" x="92" y="145">
                                       <s:content><s:p><s:span>Select material</s:span></s:p>               </s:content>
                                  </s:RichText>
                        

                        Which would you like to maintain?  I have done all the text formatting in CSS, and that gives me the additional benefit of changing ALL the labels (or, with a class, select groups of labels) at once.

                         

                         

                        3. Absolute positioning on everything.  This is not useful for me in many cases. Yes, the art director may be happy if the app matches to PSD, but if I need to add a field or something in Flex, I need to hunt through the code and make adjustments to too many items to accomodate the change.  Being able to use containers like Vgroups and Hgroups would be a huge plus here.

                         

                        4. Same for sizing.  I just did a project where the design had a bunch of form controls which visually needed to be in a gradient box. FC takes the PS shape and makes it a fixed bitmap, positions it absolutely and then puts all the elements absolutely on top, every one with an x and y.  If I need to add more text or something in Flex, I need to position all those elements by hand.  And then the PNG of the gradient is too small to contain them.  So I would need to fix the PSD, fix the FXP, and re-import it?  No thanks.

                         

                        Instead, I deleted all the garbage code from FC and simply used:

                         

                        <s:Group id="section1" width="550">
                             <s:Rect width="100%" height="100%" fill="{blueBox}"/>
                                  <s:VGroup y="20">          
                                  ...stuff...
                                  </s:VGroup>
                        </s:Group>
                        

                         

                        where blueBox is:

                        <s:LinearGradient  rotation="90" id="blueBox">
                             <s:GradientEntry color="0xe8ecfb" ratio="0"/>
                             <s:GradientEntry color="0xc5cce9" ratio="1"/>
                        </s:LinearGradient>
                        

                        So, now I have a gradient which (a) encloses all my elements, no matter how many and (b) I can adjust colors right in code and (c) I can use over and over.

                         

                        There are many such examples.

                         

                        I suppose the intended workflow of FC assumes all this stuff will either be ironed out at the FC stage or that we would return ti FC to tweak the design.  But so far it has proven neither practical or desirable. Perhaps some of these things can be addressed in future betas, and/or perhaps in some shops they are less of an issue. At my job, I often need to move into coding before all the design tweaks are complete.  Our turnarounds are tight.  So I need to tweak design right in "working" Flex code.

                         

                        I have found FC to be useful for creating components, components parts, skins, transitions, etc. to re-use in Flex.  I hope more features are added to enable creation of skins and custom components, that would be great.

                         

                        HTH

                         

                        Steve

                        • 9. Re: A Catalyst<->Builder workflow
                          MorphicBen Level 1

                          I've been working with FC for a couple of days now and I think I got an intermediate process for going back and forth between FC and FB:

                          http://www.themorphicgroup.com/blog/2009/06/23/adobe-flash-builder-and-catalyst- tips-tricks-and-hacks/

                           

                          I've been basically using FC to create "skins" for my components that I've built in Flash Builder. I've found that this method lets me re import the FC project into my FB multiple times as the design of the application evolves.

                           

                          Some key things I've figured out is how to make your custom skins change size with their parent components instead of being stuck in the height and widths created in catalyst. I also have a hack on how to get text in a Catalyst custom component bound to a property in it's parent component.

                           

                           

                          • 10. Re: A Catalyst<->Builder workflow
                            Handycam Level 1

                            Those are interesting and clever "hacks." However, personally I am not going

                            to do more work just to accommodate the shortcomings of a tool.

                             

                            Currently, I am taking the PSD into FC, and setting up components and

                            states, as nested as need be.  Your tip about naming things is a very good

                            one.  Then I switch to code view, open the component I want to use and copy

                            the code, or relevant part(s) of the code and paste into existing or new

                            MXML components in Flex.

                             

                            This can be helpful by providing a UI for setting up states, transitions,

                            and actions.  It also simplifies the processing of coloring and skinning

                            components. This is what I expect a tool to do, make less work for me.

                            • 11. Re: A Catalyst<->Builder workflow
                              marc_hughes Level 1

                              Some of my thoughts on "why/what" I'm looking for in a better workflow

                               

                              http://www.rogue-development.com/blog2/2009/06/why-i-like-my-proposed-catalyst-workflow/

                               

                              All of this would be unneccessary if we could get a new feature in catalyst.  "Export as swc", it could be a 2 step wizard.

                               

                              Step 1: Enter a package name

                              Step 2: Choose a save location

                               

                              Bonus points if it automatically turns Main.mxml from an Application to a Group so it could be used.

                               

                              But even as-is, I'm really looking forward to using the tool with our team.

                               

                              Thanks

                              -Marc

                              • 12. Re: A Catalyst<->Builder workflow
                                Handycam Level 1

                                Personally, I have no use for SWC files.  Of course, not using them much

                                perhaps I don't fully grasp why I would want one.

                                 

                                I would like to be able to export from FC so that either:

                                 

                                 

                                   1. The FXP way, like currently, when I get a Main.xml that I can use

                                   inside of Flex as the main app and all my other components as I created them

                                   in FC work with it

                                   2. A new library way, wherein I can get my Main.xml as the main library

                                   item PLUS all its sub-components working within it, and so I can also use

                                   those elsewhere in the app (this might be your SWC?)

                                 

                                In other words with #2, I create a screen in FC, with datalists, buttons,

                                scrollbars etc. Let's say it's called "OrderScreen" (it would therefore be

                                necessary to save it as other than Main.mxml, please).

                                 

                                I export this as a library.  I save this library (is this what you mean by

                                SWC?) into my file system for my larger project.  I can then use instances

                                of <local:OrderScreen/> where needed, like any mxml component.  I can also

                                use the datalists and such, and/or their skins wherever I want in the main

                                project, such as <s:List id="myOtherList" skinClass="components.DataList1"

                                />.  If I remember to name these components in FC, I could easily use

                                <s:List id="myOtherList" skinClass="components.redList" />.

                                 

                                THIS would be a most excellent addition to the app, and it's not that far

                                off from where it is now.

                                • 13. Re: A Catalyst<->Builder workflow
                                  marc_hughes Level 1

                                  #2 is exactly what I'm doing.

                                   

                                  Getting the main component useable isn't there yet, but I'm confident I can make it work as soon as I get another hour or 2 to tinker.

                                  • 14. Re: A Catalyst<->Builder workflow
                                    acath Level 4

                                    You probably figured this out, but you can get pretty close to this by putting everything in your app inside one giant custom component, then exporting THAT as an FXPL.

                                    • 15. Re: A Catalyst<->Builder workflow
                                      Handycam Level 1

                                      Yes, that works in the interim, thanks.  I'd rather have that as an export

                                      option, though.