With Flex4, How to make my external Theme, how to use it?
I made a SWC project (my new Theme), with these elements :
- src/views/MyViewSkin.mxml
- src/DefaultTheme.css
I made a SWF project (Flex app), with these elements :
- src/views/MyView.as
- theme/DefaultTheme.swc // theme building result
In the SWF project, I added this information in mxmlc compiler : -theme theme/DefaultTheme.swc.
My problem is : how to build SWC projet (theme) with HostComponent[xx] is external ?
开发者_如何学运维MyViewSkin:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("view.MyView")] !!!!! This type is unknown by the compiler !!!!
</fx:Metadata>
<s:Label id="myLabel" fontSize="18" fontWeight="bold" color="#FF0000"/>
</s:Skin>
Could you help me ?
Thank you very much
Regards
Anthony
Here's how I solved it.
So I have my Theme:
SkinForX.mxml
And then I have my App:
App.mxml
defaults.css
view
ComponentX.mxml
In my SkinForX.mxml, my HostComponent is not the ACTUAL component, but the Spark component it is based on, which in my case was SkinnableComponent:
<fx:Metadata>
[HostComponent("spark.components.supportClasses.SkinnableComponent")]
</fx:Metadata>
I then make the skin as I normally would with whatever styles and effects I want.
In my App.mxml, I can include the css file, but since it is named defaults.css, I don't have to (automatically inserted). Inside defaults.css, I attach the theme's skin to the ComponentX:
@namespace view "view.*";
view|ComponentX
{
skin-class:ClassReference("SkinForX");
}
To make sure the theme skin is compatible with whatever you need to do with ComponentX, you use the SkinPart notation to specify that certain, typed elements must be in the skin. For example:
[SkinPart(required="true")]
public var input:Label;
And that's it. You can still swap out themes, so long as the theme's skin names are the same. Otherwise you have to swap out the names in the CSS file.
This solution is not as clean as being able to wire the objects to their skins within the theme, but I don't think that is possible anyway.
精彩评论