Adobe AIR Development

[oh22]

I have a .png, how do I set it to be the background image of a textinput?  Also, how do I set the 9-cell grid to define how the .png will stretch according to the size of the textinput? 

I've tried wrapping the .png in a class in a swc, and then referencing that swc with setSkin, like so:

textinputInstance.setSking(swcPackage.backgroundImage) 

but my app crashes.

Help.

[JRab]

this isnt really the answer but here's something that can give you a good start. at the moment it looks like the textinput only has one skin called teh TextInputSkin. Documentation can be found here:

http://www.blackberry.com/developers/docs/airapi/1.0.0/qnx/ui/skins/text/TextInputSkin.html

the method you are invoking setSkin only accepts a class that implements the ISkin class. So it does not accept images such as PNG (i really wish it was that easy). i havent fully figured out how to skin in the bb playbook (not for the lack of trying) because of the lack of documentation for it. so its kind of trial and error. here is the link to the skinning page if you need to look into this deeper:

http://www.blackberry.com/developers/docs/airapi/1.0.0/qnx/ui/skins/package-detail.html

good luck!

[oh22]

Thanks for the reply JRab.  I've found some more info, but I'm still having the same problem.

There's a demo of skinning buttons at about -9:00 here:

http://2010.max.adobe.com/online/2010/MAX260_1288217641375UQJD

Apparently you need to have a separate class than extends UISkin (and hence implicitly implements ISkin).  To skin a textinput, you'd apparently have to do something like this

public class TxtInputSkin extends UISkin
    {
        private var skin:DisplayObject = new DisplayObject();
        public function TxtInputSkin()
        {
            super();
        }
        
        override protected function initializeStates():void{
            skin = new BkgInput();
            showSkin(skin);
            setSkinState(SkinStates.UP,skin);
            setSkinState(SkinStates.FOCUS,skin);
        }
    }

 where BkgInput is a class that's been exported from a swc

But this still doesn't work! 

Anyone know what's going wrong here?  Is it how the swc has been compiled, somehow?

[JRab]

hey oh22,

i've been at it for a couple of hours and this is what i've found.

RIM has a page set up for all of its skinning "assets" here:

http://www.blackberry.com/developers/docs/airapi/1.0.0/skins-detail.html#Text

now i've been using the following code to test everyting out:

package com.rabcore.ui.skins
{
	import flash.display.Sprite;
	
	import qnx.ui.skins.SkinAssets;
	import qnx.ui.skins.SkinStates;
	import qnx.ui.skins.UISkin;
	
	
	public class CustomTextInputSkin extends UISkin 
	{
		/**@private**/
		protected var upSkin:Sprite;
		/**@private**/
		protected var focusSkin:Sprite;
		/**@private**/
		protected var downSkin:Sprite;
		
		
		/**
		 *Create a custom button skin
		 */
		public function CustomTextInputSkin() 
		{
			super( );
		}
		
		
		override protected function initializeStates():void 
		{
			
			
			upSkin = new SkinAssets.TextInputUp();
			downSkin = new SkinAssets.TextInputDown();
			focusSkin = new SkinAssets.TextInputFocus();
			
			
			setSkinState(SkinStates.UP, upSkin );
			setSkinState( SkinStates.DOWN, downSkin );
			setSkinState( SkinStates.FOCUS, focusSkin );
			
			showSkin( upSkin );
			
		}
	}
}

and this is my main class:

package
{
	
	import com.rabcore.ui.skins.CustomTextInputSkin;
	
	import flash.display.Sprite;
	
	import qnx.ui.display.Image;
	import qnx.ui.skins.SkinAssets;
	import qnx.ui.text.TextInput;
	

	// The following metadata specifies the size and properties of the canvas that
	// this application should occupy on the BlackBerry PlayBook screen.
	[SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
	public class TextInputTest extends Sprite
	{
		
		public function TextInputTest()
		{
			
			var textInput:TextInput = new TextInput();
			
			textInput.setSkin(CustomTextInputSkin);
			
			addChild(textInput);
			
			

			
			
		}
		
	}
}

all this is similar to what you found. i went back to the video you also posted. now the swc file he imported was his PNG files that he embedded into class using Flash Pro. (They didn't show that part... its funny how they skip over the important parts.)

what they are doing here

skin = new BkgInput();

what they are doing is getting their embedded class with the PNG and setting as a display object that can be used to skin what ever it is that you are skinning (in our case the TextInput object.)

you can use this as a reference for embedded files:

http://catfacegames.com/2009/01/18/using-embedded-images-in-as3-in-flashdevelop/

if you look at the code i posted you'll notice im using the default skin files that RIM provided us. i tested it out and the output is a little weird but aside from the placement of hte background, it works. so if we can embed files like they do we will in essence be able to skin everything we want in the same manner.

so basically create your images and save them through Flash Pro or embed your files using the code in the link and you can theoretically begin skinning. im not done with all this yet. ill continue going at it and report back. good luck!

[oh22]

JRab, thanks for your reply. 

Good news:

That's exactly right.  The flow seems to be:

1. create png
2. import into flash pro
3. export swc
4. import swc into flash builder
5. reference swc's png in a class that extends UISkin.
6. assign that class to the component using the component's setSkin() method.

In the class class from step 5, I had the asset from the swc defined as a DisplayObject, but as soon as I switched it to type Sprite, like in your example, it started working. 

Bad news:

• The image is stretched (not according to the grid I specified in flash pro, perhaps I did that wrong somehow). 
• The image is placed poorly behind the textinput.  When the user types the letters appear misaligned with the background, presumably because the component thinks the skin is the same size as the default skin (?).  Does anyone know of a way to define where the text for the textinput will appear?

[JRab]

Yeah there are a few kinks to work out but we got the general picture of the situation. The stretching may have to do with the format of the image (I.e. Vector) ill look into it more.

[renaun]

This is the code you are looking for to do images with slice 9 scaling. The trick is to provide scaleGrid values in the Embed metadata. You can also do slice 9 grids in Flash Pro too.

package com.renaun.qnx
{
import flash.display.Sprite;

import qnx.ui.skins.SkinStates;
import qnx.ui.skins.text.TextInputSkin;

public class SimpleCustomTextInputSkin extends TextInputSkin
{    
    [Embed(source="/assets/OddShapeSkin.png",
                scaleGridTop="14", scaleGridBottom="15",
                scaleGridLeft="18", scaleGridRight="22")]
    private var OddShapeSkin:Class;
    [Embed(source="/assets/OddShapeSkinFocus.png",
                scaleGridTop="14", scaleGridBottom="15",
                scaleGridLeft="18", scaleGridRight="22")]
    private var OddShapeSkinFocus:Class;
    
    protected var skin1prite;
    protected var skin2prite;
    override protected function initializeStates():void
    {        
        super.initializeStates();
        skin1 = new OddShapeSkin();
        skin2 = new OddShapeSkinFocus();
        setSkinState(SkinStates.UP, skin1);
        setSkinState(SkinStates.DOWN, skin1);
        setSkinState(SkinStates.FOCUS, skin2);
        showSkin(skin1);
    }
}
}

[JRab]

Hey renaun,

Thanks for the update!

[jacksonstewart]

There are two ways to share data between a Flex 4 Spark component and its skin: you can either pull the data from the component into the skin or you can push the data to the skin from the component. It’s a subtle difference, but the latter approach is recommended because it does not rely on data binding, and it promotes encapsulation.

laptop skin