14 Replies Latest reply on Jun 16, 2009 11:46 AM by Rob Brambley

    Developer/Designer work flow

    piercer2 Level 1

      In the videos it shows a two-way share of project Flash Builder 4 (Fb)<->Flash Catalyst (Fc), infact in the 10 minutes demo video it shows a developer 'importing an Fc project' directly into Fb4.

       

      I can not find this option in any drop down menu in Fb4 and it seems the only way to get an Fc project into Fb is to export an fxp file. It also seems that the Fb project created is in  quite a different structure to the Fc one.

       

      So what happens when the designer wants to edit the designs? How are the changes updated and reflected in the Fb project (I can only 'import' an fxp file)? If I add code in the Fb project how does the designer see the functionality I have added in Fc?

       

      I thought this was the WHOLE point of Fb/Fc. But where is this functionality?

       

       

      (sorry to coss post this, but I don't know who will be able to answer it - Fc team or Fb team)

        • 1. Re: Developer/Designer work flow
          jrunrandy Adobe Employee

          Hi,

          I asked around and here is the answer I got from the Catalyst product manager:

           

          For our first version of Catalyst, we’re focusing on the round-tripping capabilities with Creative Suite design tools - and we’re focusing on a one-way hand-off to Flash Builder.

           

          So the designer - developer workflow in our 1.0 version will look like this:

          #1 Interaction Design is created in Catalyst - saved to an FXP project file

          #2 Developer opens FXP in Flash Builder and starts in on things

          #3 Design changes at this point are typically limited in scope ("I want to change the way this menu behaves, or the panels in this state of the project move in")  In this case, the designer hands off another FXP project file, and the developer merges in the appropriate code in Flash Builder.

          (we actually refer to this as iterative one-way hand-off)

           

          Rest assured that we’re building Flash Catalyst and Flash Builder with "Full Round-tripping" in mind - and we’re making the right architectural decisions to enable this later on.

           

          HTH,

          Randy Nielsen

          Flex Documentation Manager

          • 2. Re: Developer/Designer work flow
            piercer2 Level 1

            As I have asked in the catalyst forum (without answer) - how do you merge in the changed fxp?

             

            and - what is the time-scale for the full 2-way workflow?

            • 3. Re: Developer/Designer work flow
              Rob Brambley

              I can not speak on behalf of Catalyst's plans, but as for importing Catalyst-created projects you have the option of doing the following:

               

              • Import as a new project
              • Replace an existing copy of the project

               

              By choosing to import a new copy of a project that you have previously received from a Catalyst designer, you can then manually choose to diff and merge the code differences.  If you right click on one of the copies of the project in the package explorer and choose "Compare project with version...," you can choose the appropriate project to compare with.  This is basically an alternative route to access eclipse's "Compare With" functionality.  You can then use the merge viewer to make your changes.

               

              One workflow that you may find desirable is to import Catalyst "Library packages," which as it turns out, are equivalent to Flash Builder's Library projects.  If you forsee yourself requiring designer changes to a certain set of designer-created components, it may be best for your designer to export them as a library package.   This will enable you, as a Flash Builder developer to more easily box out the designer code by importing the library (.fxpl) as a Library project and adding it to the library path of a project you are working on.  You could then presumably take updated versions of the library with a lot less worry of clobbering your own code with the incoming project.  Honestly the FC->FB library project workflow wasn't designed as a primary workflow/feature, but if you think it sounds like it could work for you, then I'd love to hear feedback about whether this is a viable solution.

               

              Thanks,

              Rob Brambley

              Engineer, Flash Builder

              • 4. Re: Developer/Designer work flow
                Handycam Level 1

                Rob Brambley wrote:

                 

                I can not speak on behalf of Catalyst's plans, but as for importing Catalyst-created projects you have the option of doing the following:

                 

                • Import as a new project
                • Replace an existing copy of the project

                 

                By choosing to import a new copy of a project that you have previously received from a Catalyst designer, you can then manually choose to diff and merge the code differences.  If you right click on one of the copies of the project in the package explorer and choose "Compare project with version...," you can choose the appropriate project to compare with.  This is basically an alternative route to access eclipse's "Compare With" functionality.  You can then use the merge viewer to make your changes.

                 

                One workflow that you may find desirable is to import Catalyst "Library packages," which as it turns out, are equivalent to Flash Builder's Library projects.  If you forsee yourself requiring designer changes to a certain set of designer-created components, it may be best for your designer to export them as a library package.   This will enable you, as a Flash Builder developer to more easily box out the designer code by importing the library (.fxpl) as a Library project and adding it to the library path of a project you are working on.  You could then presumably take updated versions of the library with a lot less worry of clobbering your own code with the incoming project.  Honestly the FC->FB library project workflow wasn't designed as a primary workflow/feature, but if you think it sounds like it could work for you, then I'd love to hear feedback about whether this is a viable solution.

                 

                Thanks,

                Rob Brambley

                Engineer, Flash Builder

                All of this you mention implies people will be creating app app in FC and importing that into FB.  THis is like the demo of the Twitter search app.  For this, I understand it, and it is cool.

                 

                However, in more involved applications, we will be creating PARTS of an application in FC.  Like a screen for editing details, a large thumbnail view, a series of steps, etc. So we will quite likely need to make COMPONENTS in FC, that we can instantiate in FB one or many times, and populate with data as needed.

                 

                This seems a little shaky right now; or it may be just me in that I can't see how to easily do this.

                 

                What we would really need, as someone else posted/requested, is a way to create screens and spec custom events in FC, so that in our main app we can use these screens and add event listeners for these events.  So if I make a button in FC, I could have an event "edit_screen_done" or something that my main app could respond to.

                 

                Assuming this is not possible, it would be ok to add these events manually in the code, providing any round-tripping of design elements does not "break" what I have added in code AND there's an easy way to manage these sub-components.

                • 5. Re: Developer/Designer work flow
                  Rob Brambley Level 1

                  So, it sounds like the main workflow problem at the moment revolves around the fact that after you modify an FC project that has been imported, when you import a new copy of the project, there will be some necessary fixes required to preserve your developer changes.  The reason I had previously suggested to use the Catalyst Library Package feature was to suggest a way to avoid actually having to use the Application that Catalyst produces. Granted, it's not as automagic as one might desire, but the cleanest workflow I see with the current state of the tools would be:

                   

                  1. Import your Catalyst-produced components as a library project (export as library package from Catalyst).  Alternatively, just open the whole Catalyst project as an FXP in Flash Builder (this has the advantage of preserving a unique project ID which allows Flash Builder to recognize a project on successive imports)
                  2. Add the library project to your main Flex project's library path. Make the minor(?) coding changes you need to in order to utilize the component set from your project (e.g. event dispatching)
                  3. When you need to import a new copy of the components, import the new project, select both the previous version and the new version in the package explorer, right-click, Compare With > Each Other.  Copy the original "developer" changes into the new version of the Catalyst components.  Granted, this may not be totally clean, depending on the changes, but eclipse offers a decent diff/merge utility that can help you here.

                   

                  If you can think of some workflow enhancements that would make your life easier, please file Flash Builder and/or Catalyst feature requests at: http://bugs.adobe.com/flex/

                   

                   

                  Thanks,

                  Rob Brambley

                  Developer, Flash Builder

                  • 6. Re: Developer/Designer work flow
                    Handycam Level 1

                    Thanks.

                     

                    So if I understand correctly, the only way to use FC content in FB is to bring it in as an FB project (or library project) -- there is no way to just import it as a component into an existing project?

                     

                    This is not an ideal solution, since I now have to keep track of more that one folder hierarchy on the OS.  Having my entire application including all its subcomponents in one directory is what I prefer, especially since I need to move this data from one computer to another at times, which breaks the paths.

                     

                    Also, if a project has 4 or 5 components (or more) I will need 4 or 5 Flex projects?

                     

                    Lastly, having never worked with related projects (haven't had a need to) I am not even sure how to reference other projects and call events and data across them.

                     

                    Typically, I work with one project.  I create a folder structure as needed for the project, such as /com/mycomponents/views and add the namespace such as xmlns:sl="/com/mycomponents/*" and when needed import com.mycomponents.*

                     

                    It would seem if I use the FC workflow I cannot work like this, unless I am misunderstanding.

                    • 7. Re: Developer/Designer work flow
                      Rob Brambley Level 1

                      So if I understand correctly, the only way to use FC content in FB is to bring it in as an FB project (or library project) -- there is no way to just import it as a component into an existing project?

                      Sorry, but there is currently no way to import a component or set of components directly into a project in Flash Builder.

                       

                       

                      This is not an ideal solution, since I now have to keep track of more that one folder hierarchy on the OS.  Having my entire application including all its subcomponents in one directory is what I prefer, especially since I need to move this data from one computer to another at times, which breaks the paths.

                      If you choose to have one Flex project (your "main" developer app) and Library projects which contain components, then when you export the Flex project as an FXP, the library projects on the project's library path will also be included in the FXP.

                       

                      Also, if a project has 4 or 5 components (or more) I will need 4 or 5 Flex projects?

                      If you create all your Catalyst-produced components in a single Catalyst project and export them, then they will all be in a single project. If it is necessary to create them all in separate projects, then you'd have to import them all as separate projects into Flash Builder.  You could then choose to manually consolidate them into a single project if you were more comfortable with that.

                       

                      Lastly, having never worked with related projects (haven't had a need to) I am not even sure how to reference other projects and call events and data across them.

                      (Sorry this was the last answer as this was probably assumed knowledge in the previous answers )

                      In Flash Builder, you can create Flex projects and Flex Library projects (as well as AIR, ActionScript varieties).  Each project has a library path that can be accessed by viewing the project properties.  Right-click on the project in the package explorer, choose Properties > Flex Build path (on left column).  Then click the button on the button bar labeled "Library Path."  From there, you can click "Add Project" to add a Library project to your library path.  When the library project is compiled, the SWC it produces will then be referenced by your Flex project, allowing you to use the components it contains.

                       

                       

                      Rob Brambley

                      Developer, Flash Builder

                      • 8. Re: Developer/Designer work flow
                        Handycam Level 1

                        Rob Brambley wrote:

                         

                        When the library project is compiled, the SWC it produces will then be referenced by your Flex project, allowing you to use the components it contains.

                         

                        Thanks, I knew how to associate them in the UI, but I was not sure how they "stayed" associated.  Thanks for such in-depth information.

                        • 9. Re: Developer/Designer work flow
                          Handycam Level 1

                          OK, I have imported the FXPL file and it i a Library.  I add that library to the library paths for my main app's project.

                           

                          I add an instance of the  component to the main application's mxml:  <src:Main />

                           

                          But when I run it and click on any interactive item: the data list, buttons, etc. I get this error:

                           

                          ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
                          at flash.display::DisplayObjectContainer/getChildIndex()
                          at mx.managers::SystemManager/getChildIndex()[E:\dev\beta1\frameworks\projects\framework\src\mx\managers\SystemManager.as:1840]
                          at mx.managers::SystemManager/mouseDownHandler()[E:\dev\beta1\frameworks\projects\framework\src\mx\managers\SystemManager.as:3842]
                          
                          

                          • 10. Re: Developer/Designer work flow
                            Handycam Level 1

                            OK, now somehow I broke it, I cannot get the component from my FXPL file.

                             

                            As before I imported it, get a new Flex Library project. I name it STEP.

                             

                            Go to properties on my main project, set it as below:

                             

                            http://img.skitch.com/20090615-cqbbwe6y64hgtadnbj7yi6x36t.jpg

                             

                            Seems logical so far.  My project window now looks like:

                             

                            http://img.skitch.com/20090615-1d6bfh7bbpmdp5xf3giea7rcrh.jpg

                            So what happened to the component?  That is, the Main.mxml I want to embed/call in my main code?  I only see the pieces of Main.mxml but not the whole thing.  I am not sure how this happened...  I saw it before.  What did I do wrong here?

                            • 11. Re: Developer/Designer work flow
                              Rob Brambley Level 1

                              I am confused about what this "Main.mxml" is that you want to use -- are you talking about the Application that is used in a Catalyst project?  If you exported a library package from Catalyst, you wouldn't have this application.  The whole point of that workflow would be to extract the components that you had created within.  So, in your case (as in the screenshots), you would then be instantiating the individual components that are in STEP.swc from within your existing Flex project.  You would not be needing to reference the Main.mxml application (and can/should not) to get it the components in the SWC. Does this make sense?

                               

                              Rob Brambley

                              Developer, Flash Builder

                              • 12. Re: Developer/Designer work flow
                                Handycam Level 1

                                Ah, yes, I see that now. 

                                 

                                Of course, there's little point to this since what I want to do is use the screen I designed in FC, with all those components in place as well as all the non-component objects such as images etc. If I can't use the FC design, what's the point in using its sub-components?  I could just use Halo or Spark components.

                                 

                                So instead now I tried importing the FXP file, and I get a flex project which does have the full Main.mxml file:

                                http://img.skitch.com/20090615-tiwn5en6q2wn2ewyt26y373ugr.jpg

                                I can insert the file using <src:Main />, and FB adds the xmlns of src="src.*".

                                 

                                However, the app generates these errors:

                                 

                                1172: Definition components:Button1 could not be found. Main.mxml KitchenCalculator/[source path] StepDesignAlt/src Unknown Flex Problem

                                1172: Definition components:DataList1 could not be found. Main.mxml KitchenCalculator/[source path] StepDesignAlt/src Unknown Flex Problem

                                1202: Access of undefined property Button1 in package components. Main.mxml KitchenCalculator/[source path] StepDesignAlt/src Unknown Flex Problem

                                1202: Access of undefined property DataList1 in package components. Main.mxml KitchenCalculator/[source path] StepDesignAlt/src Unknown Flex Problem

                                So now what?  I am really trying to understand this workflow, rather than just bail and do it the old way.

                                • 13. Re: Developer/Designer work flow
                                  Rob Brambley Level 1

                                  Although you can reference the Main.mxml file, it is an Application.  If you are writing this code to reference it from within an Application, things will probably go wrong (I don't believe this is something that is intended to work).  It seems that what you are describing as a "sub-component" is actually just an instance of a component that you have added to the Main application.  Try to think of the "sub-components" as actual components that can be instantiated elsewhere (from your Flash Builder application).

                                   

                                  I cannot see the contents of your components package in the screenshot you have added, but there are a couple different types of mxml files that you may have in there.

                                   

                                  1) Skins.  If you open these, the root tag will be Skin, and it will then be referenced from a component's tag (in your case, most likely in your Main app) via the skinClass attribute.  For example, you might have had a Button that you skinned, and the Main app would have something like <s:Button skinClass="components.MySkin"/> or something like that.

                                  In order to re-use this type of file from within your Flash Builder project, you would point to it via the skinClass attribute of a component tag.

                                   

                                  2) Custom/Generic components that are actually Groups.  In Catalyst, you can use the drawing tools and then convert things to a custom component.  This is then a file that can be instantiated like any other component (e.g. <s:Button/>).

                                  To re-use this type of file from within your Flash Builder project, simply add a tag to your app (or elsewhere) that references the component file (.e.g. <local:MyComponent/>).

                                   

                                   

                                  Hope this helps.

                                   

                                  Rob Brambley

                                  Developer, Flash Builder

                                  • 14. Re: Developer/Designer work flow
                                    Handycam Level 1

                                    Thanks, that's a big help!