I want to create a combobox in flex which will take three values, Available, Unavailable, and Busy. The constraint is, I should not allow user to go directly from Unavailable to Busy. So when a User is selected Unavailable, I should keep the Busy item disabled (unselectable), but a user will be able to go directly from Available to Busy. I chouldn't find a straight forward way to disable an item in combobox in Flex. How can I do that?
Have you considered using radio buttons rather than a combo box? It's clear how to do this for radio buttons, for one thing. Also, it can often be friendlier to present the available options without requiring a click to reveal them. (Especially if, as in this case, you are adding the possibility that an option is "available, but not possible for you right now for some reason not shown in this combo-box item").
If you really want a combo-box, you can use the click event to display it in a non-standard fashion by probably changing its style; and then, if clicked anyway, Then, in the selected event, reject the choice (hopefully with an indication of why),
Or, if you want to simply remove it from the list, you can have the click listener event repopulate the source list each time, based on conditions. But that might be confusing to the user, too.
You can also have a look at
www.stoimen.com/blog/2009/03/05/flex-3-combobox-disabled-options/
which references
wmcai.blog.163.com/blog/static/4802420088945053961/
(note for NoScript users you must have 163.com and 126.com at least temporarily allowed to be
able to properly see this page)
it works very well even though I added the code for being able to properly handle keyboard
events in the dropdown list
Full self working example available at
http://olivierbourdon.homedns.org/OpenSource/combos.zip
Thanks again for the good work
Related
I have a list of options from which one can be selected. For all intents and purposes HTML's <select> element covers this. Since we need a different visual presentation, I'm looking at using WAI ARIA role="listbox". I'm unclear on how to use aria-activedescendant, aria-selected and aria-checked.
Questions regarding focus/active state:
If I use aria-activedescendant on the listbox to point to the [role="option"] that is currently active (has "virtual focus"), I would use [aria-selected]. How would best I tell the option element itself that it is active (has "virtual focus") to represent that visually? (:focus is on the listbox, after all)
an [role="option"] can have [aria-checked] and [aria-selected]. I guess I need [aria-selected] but don't see what I'd use [aria-checked] for.
Is there a trick to avoid having to put IDs on every option simply so it can be referenced by aria-activedescendant?
Questions regarding keyboard interaction:
"Checkbox - Space toggles checkboxes, if the list items are checkable" - how do I figure out if they are checkable or selectable?
Questions regarding validation:
If the listbox has [aria-required="true"] some sort of validation has to be performed. specifically if an option has been selected (or checked).
when do I trigger the validation? is on blur sufficient?
when invalid, what do I have to do besides setting [aria-invalid="true"] on the listbox?
aria-checked is indeed more something for a list of very closely related options with actual visible checkboxes that can be toggled on or off. This is most common in the Windows world. Explorer can be set to such a pseudo multi-select mode, or some apps use that to activate or deactivate a set of accounts. On the Mac, you can think of the list of accounts in Adium, which can be either checked (active) or not. A selection will always be there, and one or more of their checkboxes can be checked or not.
aria-selected is always the right one to indicate the selected state of an option. E. g. when traversing the list with the arrow keys, aria-selected="true" moves from item to item, while the others must then get aria-selected="false". As Patrick said, you can use this to also generate some nice looking CSS.
As for keyboard interaction: arrows up and down will select an item, and if the items are checkable, too, space will toggle the checked or unchecked state of the currently selected item.
In a true multi-select, like html:select #size>1, and multiselectable being true, the interaction would be:
Arrow keys select a single item.
Ctrl+Arrow keys would move focus from item to item, but not select the item yet.
Ctrl+Space would select the item.
Shift+up and down arrows would select contiguous items.
This is, again, standard Windows paradigm, can be observed in Explorer in Details view, for example.
As for validation: onBlur is sufficient, or you could dynamically do it via changes in selection/focused item, make sure at least one item is selected, or whatever validation you need.
aria-invalid="true" is sufficient for screen readers to know, but an error message and possibly a visual indication would be nice for everyone to know what's wrong.
How would best I tell the option element itself that it is active (has "virtual focus") to represent that visually?
Generally, you'd add aria-selected="true" and then craft some CSS that takes care of it using attribute selectors, e.g. div[role=option][aria-selected=true] { ... }, or add a css class dynamically?
[aria-checked] and [aria-selected]
This is more of a philosophical question I guess. aria-selected more closely matches what you'd have with a select...but then again (particularly for multi-select widgets) you can imagine the listbox actually being a series of checkboxes, and in that case you'd use aria-checked. there's no definitive right or wrong about either one (something you'll find a lot once you dive into more complex ARIA widgets).
Is there a trick to avoid having to put IDs on every option simply so it can be referenced by aria-activedescendant
Hmm...perhaps you could dynamically generate IDs for all options on page load via script? Or - but not tested - you could have something like a "roving" ID that moves around the options depending on which one is active (adding/removing the ID to the relevant option).
I have two options. I need 48 of a certain type control; it needs to respond to clicks and taps (for touch devices).
I could use Buttons, using the TextButtonStyle, and the Click event. Or I could use TextBlock, with the Tapped event.
I reckon buttons may be more "expensive" to create. OTOH, although I believe "Tapped" is also called when the user clicks the component, this makes me a little nervous due to its nomenclature, I guess.
Another difference is that a button takes up only the width necessary, whereas a TextBlock takes everything; and I want the underlying Grid to be tappable, so the TextBlock is kind of a problem that way. Is there a property that will make it more modest like the button?
There is design guidance for Windows Store apps on when and how to use buttons at http://msdn.microsoft.com/en-US/library/windows/apps/hh465470. Based on your description and this guidance, it sounds like buttons are the way to go. Responding to click events is what they were made for, and TextBlocks add the extra issues that you describe.
I am wanting to allow for a user to deselect all values in a ListBox. Normally, when the user deselects all but one item, that one item cannot be deselected. I want to make it so it can be.
Thanks
Essentially I'm aware of two ways of doing this:
Add an empty item to the list. You can even name this item "None" or something similar. Using a text has the additional advantage that it informs the user.
Use JavaScript to unselect the item that is clicked if it is the last item.
Note, either way, you change the default behavior of the listbox, which is what users are accustomed to. Changing the default behavior is generally not a good idea, which is why I would go for option (1) being the clearest towards your users.
Just wanting to know if anybody has seen an example of a telnet/chat or other console like FLEX application where you can use the same TextArea as input/ouput area.
I've been trying to modify the app at:
http://livedocs.adobe.com/flex/3/html/17_Networking_and_communications_8.html
but so far, computer says no.
All the implementations I've seen use a combination of TextInput and TextArea.
The challenge is that we'll be using this app to telnet into some old routers and we'll need to do a fair amount of copy/pasting. Based on what I've seen, it seems that I would need to point the mouse into the TextInput in order to be able to right click and paste, which is not very sleak.....
Your thoughts,
Fran
edit Just realized that I had trimmed out what was directly pertaining to the question: I was unable to find anything that used the TextArea for input and output; see the below suggestions if custom-component suggestions are ok.
The TextArea component only fires a change event whenever a user adds input. Whenever you set the text field programmatically, a change event does not fire--you could maybe use that as a way to know what is user input and console "responses" by looking for carriage-returns (\r).
I'm unsure if you have a requirement to maintain the user's input at the bottom-most line (like a console), even after the console responds with something like auto-complete. If that's the case, then something a bit more complex would have to come into play (such as remembering where the user's input started/ended) or the requirement of a single-component console needs to be reconsidered--sleek is nice, but not always necessary.
I am displaying a combo box in something of a WYSIWYG preview. I want the user to be able to click on the combo box and see the options inside, but I don't want them to be able to change the value. I tried using preventDefault() on the change event but it doesn't work. I don't want to disable it because I do want the user to be able to "look inside" the dropdown.
So I'm trying to block the change, but can't. My next resort is to change the selected index back to what it was before the change, Is there any way to do this within the scope of a ListEvent.CHANGE event listener?
Current Workaround is to basically re-assign the controls selected item the same way I am defining the selected item when I originally build it (a default selection). So a user sees their change then it immediately changes back to the default selection.
Are you sure that a combobox is what you want? could you do the same thing with a list component that is not selectable?
update:
If you must use a combobox and you dont want the lag from listening for the event and resetting the control, I see two possible options. You could subclass the control and make your own. When you do, hijack any methods that set the value besides the initial selection.
Or, you could try something like this: http://wmcai.blog.163.com/blog/static/4802420088945053961/. The site seems like it is in another language but the code is still there. It will allow you to make your options disabled, so the user cannot choose one of the other options.
HTH