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
Developer
LoganSix
Posts: 265
Registered: ‎01-02-2011
My Device: Z30, PlayBook
My Carrier: AT&T
Accepted Solution

Adding headers/lables to a Picker

I was wondering if anyone had figured out an easy way to add header/labels to a picker.

 

I have a 3 column picker (Hour : Minute : Seconds) and would like to add a header above/below the picker at each column.  I initially did it by adding 3 labels and spacing them to line up above each column, but I'm not sure that is the best solution.

 

I would prefer not to add them as the first value in the DataProviders, because those would be invalid numbers and I'm also choosing a default value for the seconds on the initial load.

 

Thanks for the help.

_________________
Meetup for BlackBerry 10
Meetup Search Tool - not available at the moment
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Adding headers/lables to a Picker

My first thought when reading your post would be to place labels above it as your later described.  Ideally, picker would have a 'prompt' attribute like TextInput.  Event if that existed or you could subclass to add that feature, if does not help if the value of one of the fields is pre-set.

 

Other than describing the control in front of it like:

 

Time: [    |    |    ]

 

and assume the user can figure out that "time" is hours, minutes seconds, then your idea is not awful.

 

        hrs : mins : sec

Time: [     |      |     ] 

 

 

Please use plain text.
Developer
LoganSix
Posts: 265
Registered: ‎01-02-2011
My Device: Z30, PlayBook
My Carrier: AT&T

Re: Adding headers/lables to a Picker

The problem with the labels is that I'm trying to use Containers.   Trying to line up multiple Containers was prooving to be tedious.

 

I think that I just might go with the first value being the "Header" and then doing some sort of check to make sure that none of the headers are selected.    I'll probablly do a quick set to "0" if the others haven't been selected when the "handleSelect" function is triggered. 

 

Then of course, there is the little issue of the picker growing over the text when you highlight it.

 

Pickers.png

_________________
Meetup for BlackBerry 10
Meetup Search Tool - not available at the moment
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Adding headers/lables to a Picker

How about creating a class from UIComponent and add the picker and position the labels in the override draw() method?  Then you can instantiate and add this new control to your container layout.

Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Adding headers/lables to a Picker

I would not be too concerned that the control slightly obscures the label above it in terms of  useability.  The user would know which column is which prior to selection.  The fact that it gets obscured during the selection is not that big of a deal.

Please use plain text.
Developer
LoganSix
Posts: 265
Registered: ‎01-02-2011
My Device: Z30, PlayBook
My Carrier: AT&T

Re: Adding headers/lables to a Picker

 


jtegen wrote:

How about creating a class from UIComponent and add the picker and position the labels in the override draw() method?  Then you can instantiate and add this new control to your container layout.


That's an idea.  I'll probably go back to that after I finish everything else up.   I'll mark that as the solution and hopefully come back to this post when I do that.

 

_________________
Meetup for BlackBerry 10
Meetup Search Tool - not available at the moment
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Adding headers/lables to a Picker

I typically like to do GUI with as few words as possible.  I suggest:

 

Total Count Down :

Warning (yellow) : 

Ending (red)     : 


$0.02 for what it is worth.  In this case, using the verb to "select" since that is the only thing they can do to the control.  For example, you dont tell the person to "push" a button.  They sould know that.

 

In your case, having the label is the first field is not that bad and would give you an easy check that they did the selection for validation (if selectedIndex == 0 ->Alert ).  But if the values are being set in a later session, the the labels might help.  Also, if you get set the warning and ending control's hours to only have '00', then you could:


                     hrs : min : sec

Total Count Down : [     |     |     ] 

Warning (yellow) : [  00 |     |     ]

Ending (red)     : [  00 |     |     ]

 

Please use plain text.