Custom Buttons in BlackBerry Air?

Question

I'm using AIR to develop apps for the BlackBerry PlayBook, and I need to create custom buttons with a gradient, and a different gradient when pressed. The text should be black or white according to the needs (decided by me for different parts of the app).

So is there any way I can achieve this kind of button?

Any help greatly appreciated!

@TheDarkIn1978 They didn't, the PlayBook apps can be developed in either C/C++, Adobe Flash Builder using BB plugin or RIM's WebWorks SDK. — Roshnal, May 05 '12 at 15:50
@Roshnal not totally familiar with the Playbook AIR SDK. Are you using Flex? — francis, May 05 '12 at 19:09
@f-a Yeah I'm using Flex + ActionScript3. And Adobe Flash Builder as the IDE. — Roshnal, May 06 '12 at 04:46
@Roshnal check this out http://help.adobe.com/en_US/flex/using/WSA95C9644-B650-4783-B5C0-D2C7F95A23E3.html — francis, May 06 '12 at 14:56

score 1 · Answer 1 · answered May 05 '12 at 16:09

1

well...

you could programatically create the button gradient with the drawing API or create and embed bitmaps for each state.
you could then create a custom button class consisting of the gradient asset and textField object as children with mouse / touch events to control the visual changes and to dispatch a button custom event.
finally, you could create a custom button event.

answered May 05 '12 at 16:09

Chunky Chunk

16,553
15
84
162

Can you please give me a code sample for the easiest method? Sorry I'm completely new to BB development in AIR. – Roshnal May 05 '12 at 16:15
this is not specific to development on the PlayBook. it's elementary ActionScript programming. i suggest you learn AS3. – Chunky Chunk May 05 '12 at 16:24
I was thinking of learning AS3 progressively while doing PlayBook development, and thought it wouldn't be hard as I already have much experience in Java, Python and C++ development. – Roshnal May 05 '12 at 16:27
it's difficult to learn AS3 from the internet since there are lots of search results from AS2 (which is quite different than AS3) and MXML (unfortunately). try these 3 book suggestions, you won't be sorry: 1.http://goo.gl/zJvTT (basics) 2. http://goo.gl/Tmeuc (complete-ish) 3. http://goo.gl/icMG5 (fun!) – Chunky Chunk May 05 '12 at 16:34

score 0 · Answer 2 · answered May 07 '12 at 13:42

0

You should create a custom button skin for a qnx.fuse.ui.buttons.Button

answered May 07 '12 at 13:42

Alexander Farber

21,519
75
241
416

score 0 · Answer 3 · answered Aug 01 '12 at 04:27

If you are using spark components buttons , you need to use SkinClass property , in which you can pass any skin object. In this Skin you can set states like up , down , over , disabled.

// code to create a skin class

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">
<!-- host component -->
<fx:Metadata>
    [HostComponent("ImageButton")]
</fx:Metadata>

<!-- states -->
<s:states>
    <s:State name="down" />
    <s:State name="over" />
    <s:State name="up" />
    <s:State name="disabled" />
</s:states>

<!-- SkinParts
name=labelDisplay, type=spark.core.IDisplayText, required=false
name=iconDisplay, type=spark.primitives.BitmapImage, required=false
-->
<s:BitmapImage source="@Embed('add_audio.png')"       includeIn="disabled" />
<s:BitmapImage source="@Embed('add_audio.png')"       includeIn="up" />
<s:BitmapImage source="@Embed(add_audio_press.png')"  includeIn="over"/>
<s:BitmapImage source="@Embed('add_audio_press.png')" includeIn="down"/>

// create a custom button class

package

{ import spark.components.Button;

public class ImageButton extends Button
{
    public function ImageButton()
    {
        super();
        this.buttonMode=true;
    }
}

}

use these two classes like this.

<local:ImageButton x="2" y="43" skinClass="skins.audio.Cut" />

Custom Buttons in BlackBerry Air?

3 Answers3