Flex Mobile: как просмотреть скин?

Я хотел бы знать, возможно ли представление скина для моего мобильного приложения 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>

Большое тебе спасибо !

Энтони


person Anthony    schedule 20.03.2012    source источник


Ответы (4)


нет. Скин Spark не оптимизирован для мобильных устройств. вы должны использовать MobileSkin. (Только сценарий действия).

person user437631    schedule 09.04.2012

Я искал подобную информацию, однако все, что я могу вывести из документации и блогов, подразумевает, что MobileSkin — это то, что вы делаете для скинов на уровне компонентов (например, кнопки, списки, обработчики элементов и т. д.), вещи, которые будут использоваться много раз в течение приложение.

Другая причина думать, что вам может сойти с рук создание скина вашего представления с помощью MXML, заключается в том, что все представления, для которых я видел код, выполняются декларативно (MXML), и, создавая скин подкласса представления, используя только класс скина, вы только добавление еще одного уровня иерархии через contentGroup в большинстве скинов skinnableContainer.

Если вы используете spark.components.View, то вы используете скин, связанный с SkinnableContainer. Это НЕ простая группа, как вы могли подумать.

Я не знаю, я немного в растерянности относительно того, на чем сосредоточить свои усилия. Я уверен, что последствия для производительности (если таковые имеются) поднимут голову на более позднем этапе разработки.

person jusopi    schedule 30.08.2012

Судя по опыту, вы не снимаете кожу с 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 закрепляет изображение в правом нижнем углу экрана. Вы можете нарисовать что угодно в этой функции.

Затем в теме.css:

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

s|View
{
    backgroundAlpha: 0;
}

Вы рисуете фоновое изображение на самом приложении. Затем вы делаете представление полностью прозрачным, чтобы через него можно было видеть фоновое изображение.

Может быть возможно скинировать каждое отдельное представление, но до сих пор кажется более практичным вместо этого скинировать приложение.

person Mickael Caruso    schedule 28.11.2012

Как-то поздно отвечать на этот вопрос. На самом деле, мы можем без проблем использовать Spark Skin для оформления компонента View. View — это всего лишь подкласс SkinnableContainer (который является подклассом SkinnableComponent), поэтому по умолчанию любой контент, который вы добавляете непосредственно в MXML-компонент View, будет добавлен в contenGroup SkinnableContainer.

Я добавил пример скина View с помощью 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>

Надеюсь, поможет

person Jack Vo    schedule 23.07.2014