开发者

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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜