Remove Borders from BlackBerry PlayBook TextInput

If you have ever done any BlackBerry PlayBook app development, you may notice that some of your textInput boxes (spark type) come standard with their own designed skins. A bug that I’ve run in to while using these is that even setting the border attributes on the box itself does not actually remove the border and glow once run inside the PlayBook emulator. Using Flash Builder “Burrito” build, we are able to perform the following steps to remove the border, including the focused (active) border as well.

<s:TextInput x="25" y="36" text="textInput Box" borderAlpha="0.0" borderVisible="false"/>

I have found that one way to remove the border is to create your own skin file, by simply duplicating the pre-built skin, and modifying the attributes within it. This overrides the default attributes and settings, and allows you more flexibility over how your input box will actually look and function.

Create your own skin file from Adobe Flash Builder Burrito New Skin settings

This will remove the border color from the default textInput box, but will not remove the “glow” effect from the pressed state. To remove ALL the borders, even when the textInput box is active, you can now set the attribute within your MXML xml to the following: (we are changing the focusAlpha setting to “0.0”.

<s:TextInput x="25" y="36" borderAlpha="0.0" borderVisible="false" skinClass="myPersonalSkinFile"
				 text="textInput Box"/>
Posted in Adobe AIR, Blackberry PlayBook development, Mobile Development