Flex Mobile: как сделать вид кожи? - PullRequest
Новая
       57

Flex Mobile: как сделать вид кожи?

1 голос
/ 20 марта 2012

Хотелось бы узнать, можно ли просмотреть скин для моего приложения Flex mobile :

Мой 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>

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

Anthony

Ответы [ 4 ]

0 голосов
/ 23 июля 2014

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

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

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

0 голосов
/ 30 августа 2012

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

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

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

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

0 голосов
/ 28 ноября 2012

Судя по опыту, вы не снимаете кожу с View.Вы очищаете приложение ViewNavigator.Сначала создайте пользовательский скин: 

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

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

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

0 голосов
/ 09 апреля 2012

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

...