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是你为组件级皮肤做的事情（例如按钮，列表，itemRenderers等），可以使用很多东西整个应用程序的时间。

另一个原因让我觉得你可以通过MXML剥离你的View是因为我所看到的所有视图代码都是以声明方式（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为视图设置外观的示例：

主要应用：

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

希望有所帮助

Flex Mobile：如何皮肤查看？

4 个答案: