7 Replies Latest reply: Jan 3, 2012 2:16 PM by James Boag RSS

    Extension user interface design

    david_a_clark Adobe Employee

      Hi all,

       

      I'm looking into how Adobe can help developers make their extensions look better integrated with the Creative Suite.

       

      Probably the most common request we've heard in the past is for an improved Creative Suite Flex theme SWC.

       

      Do you have any further thoughts/feature requests in this area?

       

      I would be particularly interested to know whether you use CSXSLibrary to get the host application's skin information. If you do, does the API provide sufficient information to customise your extension's appearance effectively? If not, is there anything you'd like to see changed in the API for it to be useful to you? Here are the classes currently available:

      • AppSkinInfo - accessible through CSXSInterface.getHostEnvironment()
      • AppReskinEvent - dispatched when a CS app changes its appearance.

       

      All feedback much appreciated.

       

      Thanks

      David.

        • 1. Re: Extension user interface design
          Harbs. MVP

          david_a_clark wrote:

           

          I would be particularly interested to know whether you use CSXSLibrary to get the host application's skin information.

          Yes. In every extension I create!

           

           

          david_a_clark wrote:

           

          If you do, does the API provide sufficient information to customise your extension's appearance effectively? If not, is there anything you'd like to see changed in the API for it to be useful to you?

           

          Definitely not!

           

          The only thing AppSkinInfo is good for, is getting the panel colors. That's a good start to keep the panel from being butt-ugly, but it's got a looong way to go from looking native.

           

          What we really need is dynamic themes customized for each of the CS Apps in each of the applications which can be applied automatically based on the app and platform. It has to support all standard user interface elements.

           

          I know this is a tall order, but you asked...

           

          Harbs

          • 2. Re: Extension user interface design
            david_a_clark Adobe Employee

            Thanks, Harbs. I'd say it's unlikely that we will be able to customise for each component in each app (since that is a pretty big matrix), but I agree that is the ideal.

             

            If there are particular components which you or others have had the most trouble skinning for multiple suite applications (for example because they vary the most between apps), I'd be interested to know.

            • 3. Re: Extension user interface design
              Harbs. MVP

              I've taken the middle of the road approach where my UIs match no system well, but are bland enough that they don't jump out...

               

              Here's some points:

              Checkboxes: Native Mac and Windows checkboxes would go a long way.

              A Stepper skin with arrows on the left side would be nice.

               

              Native dropdown buttons would be nice as well.

               

              Probably the single-most important point would be to allow us to use Adobe Clean as the font...

               

              Harbs

              • 4. Re: Extension user interface design
                Anastasiy Safari Community Member

                As for me, I'd LOVE to see the themes/skins that look exactly like Adobe Panels.

                So checkboxes/scrollers/radiobuttons and maybe a combobox would be really of great help. At least for Illustrator/Photoshop/InDesign. Controls are very similar in these apps.

                And of course a usage of Adobe panels font (is it Adobe Clean?).

                 

                And the thing that bothers me as well is the color of the panel when it's loading (the preloading stage). AppSkinInfo/CSXSInterface currently is not available on this stage, so how can we get that color?

                 

                Thanks for your great work!

                • 5. Re: Extension user interface design
                  James Boag Adobe Employee

                  Hi Anastasiy,

                   

                  You may be able to work around the preloader issue by attaching:

                   

                  usePreloader="false" backgroundAlpha="0"

                   

                  to your root application definition (and then changing it and the backgroundColor on the initialize event). The first part will suppress the preloader entirely (though you may prefer it), the second will make the application transparent. That doesn't give you the correct colour for a panel, but it does let the color behind it come through, which will be closer to the application theme. You may also be able to write a custom preloader that will pick out the exact colour to use, but I think the CSXS APIs you would use will have Flex dependencies.

                   

                  Best,

                   

                  James

                  • 6. Re: Extension user interface design
                    softsign Community Member

                    Hi James.

                     

                    May be you could explain your idea more detail. I am trying to set backgroundAlpha="0" but without result :(

                    • 7. Re: Extension user interface design
                      James Boag Adobe Employee

                      The intention is to make the preloader (that's the generic loading bar that displays for a few seconds when the panel first opens) for your extension to be completely invisible.

                       

                      That will make it take the colour of the content behind it, which is the default panel colour for the application. You could also change the colour of the preloader, to match the eventual one of the panel, or you could create your own preloader SWF.

                       

                      You can find more information on preloaders for Flex 3 at http://livedocs.adobe.com/flex/3/html/help.html?content=app_container_4.html and a tutorial on creating your own at http://www.leebrimelow.com/?p=916

                       

                      Best,

                       

                      James

                       

                       

                      From: Adobe Forums <forums@adobe.com<mailto:forums@adobe.com>>

                      Reply-To: "jive-1475206656-c1pf-2-2g6ja@mail.forums.adobe.com<mailto:jive-1475206656-c1pf-2-2g6ja@mail.forums.adobe.com>" <jive-1475206656-c1pf-2-2g6ja@mail.forums.adobe.com<mailto:jive-1475206656-c1pf-2-2g6ja@mail.forums.adobe.com>>

                      Date: Mon, 2 Jan 2012 20:25:59 +0000

                      To: James Boag <boag@adobe.com<mailto:boag@adobe.com>>

                      Subject: Extension user interface design

                       

                      Re: Extension user interface design

                      created by softsign<http://forums.adobe.com/people/softsign> in Creative Suite SDK - View the full discussion<http://forums.adobe.com/message/4114198#4114198