Design View skin resolution

[mcjfunk]

Hey there,

is it possible to get custom skins to appear in design view without creating a Theme?

My ultimate goal is to improve the design-time experience for a custom component that I have.  The component extends SkinnableContainer and I have a skin file to go along with it.  Component and skin live in the same project as the rest of the app, but different packages.  We have several views, i.e. composite components holding chunks of the app.  Almost everything in my 'views' will live inside of one of these custom containers.  But since the skin is not getting resolved at design-time, I see the content, but not the surrounding look and feel defined in the skin.

Everything works at run-time.

1) First try, setting the skin Class in the stylesInitialized override

     override public function stylesInitialized():void

     {

          super.stylesInitialized();

          this.setStyle("skinClass", HeaderContainerBSkin );

     }

2) Assigning the skinClass in a global css file:

     cc|HeaderContainerB

     {

          skinClass: ClassReference("components.sparkSkins.HeaderContainerBSkin");

     }

It seems that the only way I can get the skin to appear is to explicitly set the skinClass on the control instance or through a style placed directly in the view that I am working in.  Is there a Global way that I am missing?  is it possible to have a css file sourced prior to any design view update?

But...  I can't even get a custom button skin to appear in design view.

Please help.

Thanks,

Jeff

[mcjfunk]

Anyone?

[Jason San Jose]

I *believe* using a custom theme should work. If you add -theme+=File.css and declare a tag name selector with a skinClass ClassReference, DV should pick up the associated skin class. For more info about themes, see http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f85.html#WS2db454920e96a9e51e63e3d11c0bf62883-7fc7.

As long as the skinClass itself is either MXML or compiled ActionScript (i.e. in a SWC), DV should be able to render the skin.

Jason San Jose

Software Engineer, Flash Builder

[mcjfunk]

Are you saying to add this line:  '-theme+=/assets/css/style.css' to the Flex Compiler options when I right-click on my project and go 'properties'?

I did that and added this to my style.css file:

cc|HeaderContainerB {

    skinClass: ClassReference("components.customControls.sparkSkins.HeaderContainerBSkin");

}

No luck.  Let me know if I'm doing something wrong here.

Thanks,

Jeff

[Jason San Jose]

Is components.customControls.sparkSkins.HeaderContainerBSkin in a SWC on your library path?

Jason San Jose

Software Engineer, Flash Builder

[mcjfunk]

no its in a package that is part of my project.

[Jason San Jose]

That's likely the issue. I assume the skinClass is ActionScript?

The quirky thing about Design View skin rendering is that it can render compiled skins, and it can also render MXML skins via interpretation of the declarative MXML markup. DV doesn't support this workflow for ActionScript skins that aren't compiled.

Jason San Jose

Software Engineer, Flash Builder

[mcjfunk]

The skin I have is an MXML skin.

[Jason San Jose]

Err...right. I forgot add that point. Unless it's specified in MXML on the component (skinClass=...) or in the theme, DV can't render it. To get it to render in DV, you'll have to compile the MXML skin in a separate SWC. As you've clarified earlier, the runtime behavior is fine.

Jason San Jose

Software Engineer, Flash Builder

[mcjfunk]

So it sounds like there is no way for a skin to be resolved at design-time if it exists in the the same project where you are making use of the control.  Unless of-course you explicitly set the skinClass on the instance of the control.  So even if you were to create a custom skin for a button and set it as the default skin for all buttons, it can never be resolved at design-time.

Unless I am missing something and you can have a package within a project compiled as a SWC just-in-time for the design view to display it.  Something tells me this is not possible.  What about a second project that contains the skins and is in the same workspace as the main project.  Is there any way to make design view happy in that scenario?

I'm getting a little frustrated with the lack of support for Spark in FB4.

Any additional thoughts on this are appreciated.

[Jason San Jose]

Yes, sorry I wasn't explicit about that earlier.

1) Create a libary project with your MXML skin

2) Add that library project as a dependency on your main project

3) Set a type selector style in the main application or create a theme that uses the skin

I've gone the theme route before, I'm not 100% sure if DV will pick up a type selector specified outside the MXML file in context. If you have time to try it, please let me know how it goes.

Jason San Jose

Software Engineer, Flash Builder