Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
New Contributor
Posts: 5
Registered: ‎11-02-2010
My Device: Not Specified

How do I skin a TextInput component?

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.

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: How do I skin a TextInput component?

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!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
New Contributor
Posts: 5
Registered: ‎11-02-2010
My Device: Not Specified

Re: How do I skin a TextInput component?

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?

 

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: How do I skin a TextInput component?

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!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
New Contributor
Posts: 5
Registered: ‎11-02-2010
My Device: Not Specified

Re: How do I skin a TextInput component?

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?
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: How do I skin a TextInput component?

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.
J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Regular Contributor
Posts: 86
Registered: ‎10-25-2010
My Device: Not Specified

Re: How do I skin a TextInput component?

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 skin1Smiley Frustratedprite;
    protected var skin2Smiley Frustratedprite;
    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);
    }
}
}

blog: http://renaun.com
twitter: @renaun
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: How do I skin a TextInput component?

Hey renaun,

Thanks for the update!
J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Highlighted
New Contributor
Posts: 2
Registered: ‎12-17-2010
My Device: Not Specified

Re: How do I skin a TextInput component?

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