Flex Mobile : How to skin view?

Question

I would like to know if it's possible to skin view for my Flex mobile application :

My ActivityView.as

public class ActivityView extends View

My ActivityViewSkin.mxml (It skin associated)

<?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")]
    ...

It's a good way for mobile development ?

And how can I use this in this skin :

<s:navigationContent>

Thank you very much !

Anthony

Answer 1

no. Spark skin is not optimized for mobile. you should use MobileSkin . (Action script only).

Answer 2

I have been looking for similar information, however everything I can deduce from documentation and blogs implies that MobileSkin is something you do for component-level skinning (eg buttons, lists, itemRenderers, etc.), things that would be used many times throughout the app.

THe other reason to think you might be able to get away with skinning your View via MXML is that all the Views I have seen code for are done so declaratively (MXML) and by skinning the View subclass using just the Skin class, you are only adding one more layer of hierarchy via the contentGroup in most skinnableContainer skins.

If you are using spark.components.View, then you are using a skin associated with as it is a SkinnableContainer. It is NOT a simple group as you might think.

I dunno, I am kinda at a loss as to where to focus my efforts. I am sure performance implications (if any) will rear their heads way later in the development stage.

Answer 3

From experience so far, you don't skin the View. You skin the ViewNavigatorApplication. First, create the custom skin:

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();

    }

The contents of drawBackground docks the image to the lower right-hand corner of the display. You can draw anything in this function.

Then in the theme.css:

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

s|View
{
    backgroundAlpha: 0;
}

You draw the background image on the application itself. You then make the View totally transparent so that you can see the background image through it.

It may be possible to skin each individual view, but so far, it seems more practical to skin the application instead.

Answer 4

It is kinda late to answer this question. Actually, we can use Spark Skin to skin the View component without any problem. View is just a subclass of SkinnableContainer (which is subclass of SkinnableComponent) so by default, whatever content you add directly to the MXML of View component will be added to contenGroup of SkinnableContainer.

I have added an example to skin the View using Spark Skin:

Main Application:

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

View Class

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

Skin File:

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

Hope it helps