Flex Mobile：如何查看皮肤？

Question

我想知道是否可以对Flex 移动应用程序进行外观查看：

我的ActivityView.as

public class ActivityView extends View

我的ActivityViewSkin.mxml （与皮肤相关）

<?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">

<fx:Metadata>   
    [HostComponent("com.corp.views.activity.ActivityView")]
    ...

这是进行移动开发的好方法吗？

我该如何在皮肤上使用它：

<s:navigationContent>

非常感谢你 ！

安东尼

Answer 1

没有。 Spark皮肤并未针对移动设备进行优化。 您应该使用MobileSkin。 （仅动作脚本）。

Answer 2

我一直在寻找类似的信息，但是我可以从文档和博客中得出的一切都暗示，MobileSkin是您为组件级外观（例如按钮，列表，itemRenderer等）所做的事情，在整个过程中会被多次使用应用程式。

认为您可以通过MXML皮肤化视图的另一个原因是，我见过的所有视图都是以声明方式（MXML）完成的，并且仅使用Skin类对View子类进行皮肤化，通过大多数skinnableContainer外观中的contentGroup添加一层层次结构。

如果使用的是spark.components.View，则使用的外观与之关联，因为它是SkinnableContainer。 您可能并不认为这是一个简单的小组。

我不知道，我对将精力集中在什么地方感到困惑。 我确信性能影响（如果有的话）将在开发阶段的晚些时候发挥作用。

Answer 3

根据到目前为止的经验，您不会对View蒙皮。 您为ViewNavigatorApplication蒙皮。 首先，创建自定义外观：

public class DViewNavigatorApplicationSkin extends ViewNavigatorApplicationSkin
{
    [Embed(source="assets/wine_240.jpg")]
    protected var cornerImage:Class;

    public function DViewNavigatorApplicationSkin()
    {
        super();            
    }


    override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void
    {   
        graphics.beginFill(0x000000);
        graphics.drawRect(0,0, unscaledWidth, unscaledHeight);
        graphics.endFill();
        var ba:BitmapAsset = new cornerImage() as BitmapAsset;
        var translateMatrix:Matrix = new Matrix();
        translateMatrix.tx = unscaledWidth - ba.width;
        translateMatrix.ty = unscaledHeight - ba.height;
        graphics.beginBitmapFill(ba.bitmapData, translateMatrix);
        graphics.drawRect(unscaledWidth - ba.width + 1, unscaledHeight - ba.height + 1, ba.width, ba.height);
        graphics.endFill();

    }

drawBackground的内容将图像停靠在显示器的右下角。 您可以在此函数中绘制任何内容。

然后在theme.css中：

s|ViewNavigatorApplication
{
    color: #ffffff;
    focusColor: #ff9999;
    skinClass:  ClassReference("com.domain.skins.mobile.ThemeName.DViewNavigatorApplicationSkin");
}

s|View
{
    backgroundAlpha: 0;
}

您在应用程序本身上绘制背景图像。 然后，您可以使“视图”完全透明，以便可以通过它查看背景图像。

可以对每个单独的视图进行蒙皮，但是到目前为止，对应用程序进行蒙皮似乎更为实用。

Answer 4

回答这个问题有点晚了。 实际上，我们可以使用Spark Skin来为View组件设置外观，而不会出现任何问题。 View只是SkinnableContainer的子类（这是SkinnableComponent的子类），因此默认情况下，直接添加到View的MXML组件中的任何内容都将添加到SkinnableContainer的contenGroup中。

我添加了一个使用Spark Skin皮肤化View的示例：

主要应用：

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">
<fx:Script>
    <![CDATA[
        import com.accessdigital.core.SimpleView;
    ]]>
</fx:Script>
<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace core "com.accessdigital.core.*";
    core|SimpleView{
        skinClass   : ClassReference("skin.view.Skin_SimpleView");
    }
</fx:Style>
<s:ViewNavigator width="100%" height="100%"
                 firstView="{SimpleView}">

</s:ViewNavigator>
</s:Application>

查看课程

public class SimpleView extends View
{
    public function SimpleView()
    {
        super();
    }

    [SkinPart(required="true")]
    public var myButton:Button;

    override protected function createChildren():void{
        super.createChildren();
        var anotherButton:Button = new Button();
        anotherButton.label = "Another button";
        anotherButton.addEventListener(MouseEvent.CLICK, onAnotherButtonClick);
        if(!actionContent){
            actionContent = [];
        }
        actionContent.push(anotherButton);
    }

    protected function onAnotherButtonClick(event:MouseEvent):void
    {
        trace("This is another button");            
    }

    override protected function partAdded(partName:String, instance:Object):void{
        super.partAdded(partName, instance);
        if(instance == myButton){
            myButton.addEventListener(MouseEvent.CLICK, onButtonClick);
        }
    }

    protected function onButtonClick(event:MouseEvent):void
    {
        trace("This is a simple button");           
    }
}

皮肤文件：

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">
<!-- host component -->
<fx:Metadata>
    [HostComponent("com.accessdigital.core.SimpleView")]
</fx:Metadata>

<!-- states -->
<s:states>
    <s:State name="disabled" />
    <s:State name="normal" />
</s:states>

<!-- SkinParts
name=myButton, type=spark.components.Button, required=true
name=contentGroup, type=spark.components.Group, required=false
-->
<s:Rect width="100%" height="100%">
    <s:fill>
        <s:LinearGradient rotation="90">
            <s:GradientEntry color="#666666"/>
            <s:GradientEntry color="#222222"/>
        </s:LinearGradient>
    </s:fill>
</s:Rect>
<s:Group id="contentGroup" width="100%" height="100%">
    <s:Button id="myButton" label="My Button" horizontalCenter="0" verticalCenter="0"/>
</s:Group>
</s:Skin>

希望能帮助到你