actionscript-3 - Flex Mobile : ビューをスキンする方法は?

Question

Flexモバイルアプリケーションのスキンビューが可能かどうかを知りたいです。

私のActivityView.as

public class ActivityView extends View

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

どうもありがとうございました！

アンソニー

score 0 · Accepted Answer

私は同様の情報を探していましたが、ドキュメントやブログから推測できることはすべて、MobileSkinがコンポーネントレベルのスキニング（ボタン、リスト、itemRenderersなど）のために行うことであり、アプリ。

MXMLを介してビューのスキニングを回避できる可能性があると考えるもう1つの理由は、コードを見たすべてのビューが宣言的に行われ（MXML）、Skinクラスのみを使用してViewサブクラスをスキニングすることで、あなただけがほとんどのskinnableContainerスキンでcontentGroupを介して階層のレイヤーをもう1つ追加します。

spark.components.Viewを使用している場合は、SkinnableContainerであるため、に関連付けられているスキンを使用しています。あなたが思うかもしれないように、それは単純なグループではありません。

わからない、どこに力を注ぐか迷っている。パフォーマンスへの影響（もしあれば）は、開発段階の後半で頭をもたげると確信しています。

score 0 · Accepted Answer

これまでの経験から、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;
}

アプリケーション自体に背景画像を描画します。次に、ビューを完全に透明にして、背景画像が透けて見えるようにします。

個々のビューにスキンを適用することも可能かもしれませんが、今のところ、代わりにアプリケーションにスキンを適用する方が実用的です。

score 0 · Accepted Answer

番号。Spark スキンはモバイル用に最適化されていません。MobileSkin を使用する必要があります。(アクションスクリプトのみ)。

score 0 · Accepted Answer

この質問に答えるのはちょっと遅いです。実際、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>

それが役に立てば幸い

actionscript-3 - Flex Mobile : ビューをスキンする方法は?

4 に答える 4

Related

Reference