01-03-2011 01:40 PM
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.
Solved! Go to Solution.
01-03-2011 01:57 PM
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: [ | | ]
01-03-2011 02:17 PM
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.
01-03-2011 02:22 PM
01-03-2011 02:25 PM
01-03-2011 02:42 PM
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.
01-03-2011 02:57 PM
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 | | ]