The native set of components for the BlackBerry PlayBook look very nice, but there are times when a custom design is needed. It is possible to skin the UI components and there is a good source of information and code at the BlackBerry site: Skinning your UI components. However, it only covers a few scenarios. There are many needs one might find while trying to apply a custom skin without finding clear instructions for them. I ran into a few when I was building my first application and I would like to share a few tricks and workarounds here.

TextInput
Problem: Font sizes bigger than 20 get cut.

package 
{
	import flash.display.Sprite;
	import flash.text.TextFormat;
	import qnx.ui.text.TextInput;
 
	public class Main extends Sprite 
	{
		public function Main():void 
		{
			var textInput:TextInput;
 
			textInput = new TextInput();
			textInput.setPosition(100, 100);
			textInput.setSize(280, 60);
			textInput.format = new TextFormat("Arial", 30, 0x666666, true);
			addChild(textInput);
		}
	}
}

Fix:

  1. Create a class that extends TextInput
  2. Override protected method getTextRect()
  3. Set rect.height = text input height


package  
{
	import flash.geom.Rectangle;
	import qnx.ui.text.TextInput;
 
	public class MyTextInput extends TextInput 
	{
		public function MyTextInput() 
		{
 
		}
 
		override protected function getTextRect():Rectangle
		{
			var rect:Rectangle;
			rect = super.getTextRect();
			rect.height = height;
			return rect;
		}
	}
}

LabelButton
Problem: There is no access to the label’s TextField. Using the public API you can set the text format and you can set the label. That’s it. If you want to change any other properties of the textField (ie. access textField.y to move it up a bit) you need a workaround.

Fix:

  1. Create a class that extends LabelButton
  2. Override protected method init()
  3. Loop between all children until a TextField is found and store it


package  
{
	import flash.text.TextField;
	import qnx.ui.buttons.LabelButton;
 
	public class MyLabelButton extends LabelButton 
	{
		private var _textField:TextField;
 
		public function MyLabelButton() 
		{
 
		}
 
		override protected function init():void
		{
			super.init();
 
			for (var i:int = 0; i < numChildren; i++) 
			{
				if (getChildAt(i) is TextField)
				{
					_textField = getChildAt(i) as TextField;
					break;
				}
			}
		}
 
		override protected function drawLabel():void
		{
			super.drawLabel();
 
			// move textField up
			if (_textField) _textField.y -= 3;
		}
	}
}

TextInputClearIcon
Problem: There is no direct access to the “x” clear icon in the TextInput component. If you want to change any of its properties (ie. move it 10 pixels to the left) you need to…

Fix:

  1. Create a class that extends SkinAssets_TextInputClearIcon
  2. Change the properties you need in the constructor of the new class
  3. Set SkinAssets.TextInputClearIcon = MyTextInputClearIcon; (your new class)
    This can be set anywhere in your code. My choice was to put it right at the beginning of my Main class, before UI components are created.


package  
{
	import qnx.ui.skins.SkinAssets_TextInputClearIcon;
 
	public class MyTextInputClearIcon extends SkinAssets_TextInputClearIcon 
	{
		public function MyTextInputClearIcon() 
		{
			move(-10, 1);
		}
 
	}
}

ScaleBitmap
Problem: Bitmap skins don’t scale nicely.

Fix:

  1. Use ScaleBitmap by ByteArray.org

package  
{
	import flash.display.DisplayObject;
	import flash.geom.Rectangle;
	import org.bytearray.display.ScaleBitmap;
	import qnx.ui.skins.SkinStates;
	import qnx.ui.skins.UISkin;
 
	public class MyTextInputSkin extends UISkin 
	{
		private var _up:DisplayObject;
		private var _gridRect:Rectangle;
 
		public function MyTextInputSkin() 
		{
 
		}
 
		override protected function initializeStates():void
		{
			_gridRect = new Rectangle(10, 10, 30, 30);
 
			_up = new ScaleBitmap(new SomeBitmapSkinInMyLibrary());
			_up.scale9Grid = _gridRect;
			setSkinState(SkinStates.UP, _up);
 
			showSkin(_up);
		}
	}
}

 

LINKS
Example Files

 


One Comment on “Skinning PlayBook components: tips & tricks”

You can track this conversation through its atom feed.

  1. flag.in for PlayBook at unbox says:

    [...] the simulator, etc) and working with the QNX components. I have already talked about these two topics [...]

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>