starling feathersui button theme not showing

Question

I am just getting going with starling and feathersui trying to get the feathers theme to work.

I have managed to get it so the background color of the app changes to the theme color (so I know the theme is loading and running correctly) but there is nothing on the button or any other controller i have tried. The button is just plain black text , no button .

package {
import starling.display.Sprite;
import starling.display.Stage;
import starling.display.Image;
import starling.textures.Texture;
import starling.events.Event;
import starling.text.TextField;

import feathers.controls.Button;
import feathers.controls.Callout;
import feathers.controls.Label;
import feathers.controls.TextInput;

import feathers.themes.MetalWorksMobileTheme



public class Game extends Sprite
{




public function Game()
{


    this.addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler );

var stageWidth = 640;
    var stageHeight=960;






var button:Button = new Button();
button.label = "Click Me";

button.x = 200;
button.y = 500;
addChild( button );

}


private function addedToStageHandler( event:Event ):void
{
new feathers.themes.MetalWorksMobileTheme();
}   


}

 }

I have added the path to the theme in my .source settings.

I must be missing something that is stopping it from loading, any help would be appreciated.

Answer 1

I think you are missing the stage reference to the theme object. You need to do this so the theme can hook up the DisplayListWatcher correctly.

Here is a snippet of how your theme should be:

public class Theme extends DisplayListWatcher {

    public function Theme(container:DisplayObjectContainer = null, scaleToDPI:Boolean = true) {

        if (!container) {
            container = Starling.current.stage;
        }
        super(container);
        Starling.current.nativeStage.color = BACKGROUND_COLOR;
        if (root.stage) {
            root.stage.color = BACKGROUND_COLOR;
        } else {
            root.addEventListener(Event.ADDED_TO_STAGE, root_addedToStageHandler);
        }

        _scaleToDPI = scaleToDPI;
        initialize();
    }

protected function initialize():void {
    const scaledDPI:int = DeviceCapabilities.dpi / Starling.contentScaleFactor;
    if (_scaleToDPI) {
        if (DeviceCapabilities.isTablet(Starling.current.nativeStage)) {
            _originalDPI = ORIGINAL_DPI_IPAD_RETINA;
        } else {
            _originalDPI = ORIGINAL_DPI_IPHONE_RETINA;
        }
    } else {
        _originalDPI = scaledDPI;
    }
    scale = scaledDPI / _originalDPI;

    if (DeviceCapabilities.isTablet(Starling.current.nativeStage)) fontSize = 40 * scale;
    else fontSize = 36 * scale;

    // init your texture and stuff

    setInitializerForClass(Button, buttonInitializer); // call your button initializer
}

protected static function buttonInitializer(button:Button):void {
        const skinSelector:Scale9ImageStateValueSelector = new Scale9ImageStateValueSelector();
        skinSelector.defaultValue = buttonUpSkinTextures;
        skinSelector.defaultSelectedValue = buttonDownSkinTextures;
        skinSelector.setValueForState(buttonDownSkinTextures, Button.STATE_DOWN, false);
        skinSelector.setValueForState(buttonDisabledSkinTextures, Button.STATE_DISABLED, false);
        skinSelector.imageProperties = {
            width: 66 * scale,
            height: 66 * scale,
            textureScale: scale
        };
        button.stateToSkinFunction = skinSelector.updateValue;

        button.defaultLabelProperties.textFormat = new TextFormat(FontUtils.getFontName("bold"), fontSize * 0.9, COLOR_WHITE);
        button.defaultSelectedLabelProperties.textFormat = new TextFormat(FontUtils.getFontName("bold"), fontSize * 0.9, COLOR_DARK_GREY);
        button.downLabelProperties.textFormat = new TextFormat(FontUtils.getFontName("bold"), fontSize * 0.9, COLOR_DARK_GREY);

        button.paddingTop = button.paddingBottom = 5 * scale;
        button.paddingLeft = button.paddingRight = 10 * scale;
        button.gap = 12 * scale;
        button.minWidth = button.minHeight = 66 * scale;
        button.minTouchWidth = button.minTouchHeight = 88 * scale;
    }
}

Answer 2

I had the same problem and it took me some time to figure this out but it's not that difficult if you think about it.

What you have to do is to add the themes directory to the source starling folder.

So if you have this folder setup:

Downloads/feathers-1.1.1/documentation

Downloads/feathers-1.1.1/examples

...

Downloads/feathers-1.1.1/source

Downloads/feathers-1.1.1/swc

Downloads/feathers-1.1.1/themes

First you have to add the source folder to your ActionScript Build Path. Then go to

Downloads/feathers-1.1.1/themes/MetalWorksMobileTheme/source/feathers/themes

and copy that folder to this location

Downloads/feathers-1.1.1/source/feathers

The new theme will now be in the correct folder and Flash Builder will know where to find it.

After you do this you might get some errors because the theme is referencing some assets (fonts and images) that are not found. You will find those here:

Downloads/feathers-1.1.1/themes/MetalWorksMobileTheme/assets

copy that folder to your project location or just edit the paths in the theme file and everything should be fine from there on.

Also I think you should add all your button creation code in the ADDED_TO_STAGE event handler like this:

public function Game()
{
    this.addEventListener( Event.ADDED_TO_STAGE, addedToStageHandler );

    var stageWidth  : int = 640;
    var stageHeight : int = 960;
}


private function addedToStageHandler( event:Event ):void
{
    new feathers.themes.MetalWorksMobileTheme();

    var button:Button = new Button();
    button.label = "Click Me";

    button.x = 200;
    button.y = 500;

    addChild( button );
} 

Hope this helps

Answer 3

You should add the Button as a child after you create the MetalWorksMobileTheme rather than in the constructor. Components added to the stage before the theme is created will not be skinned by the theme.