I have built a itemRenderer using Feathers UI and Starling in AS3 to display a list of items. When a user clicks on the item I display a dialog box with multiple options e.g. remove item, view item, cancel
If I click cancel I am returned to the screen with the entire list intact however I am unable to select the same list item. Is there a way to reset the selected item to say -1 so I can re-select the same item.
If you're looking to deselect the current item in the list you can do exactly what you stated.
list.selectedIndex = -1;
I think you would be better off posting this on the Feathers forum as Josh might know the answer.
I too have seen this issue and despite setting list.selectedIndex = -1 the same item could not be reselected. I think my solution was to refresh the list as you returned to it.
I have a similar trouble:
list.selectedIndex = -1; // visual deselect not occur
For me works next "hack":
_list.selectedIndex = -1;
_list.isSelectable = false;
_list.validate();
_list.isSelectable = true;
I know - it no good, but it works.
Related
It always comes as a surprise to me when I google a problem I am having and I am completely unable to find anything similar. In fact, the only 1 post that i found that describes the same problem can be found here: Tabbing between fields - where does the cursor disappear to?
That question got no responses unfortunately, and I am having the same exact issue.
The only major difference is, I'm using Classic Text instead of TLF Text.
My Form is setup on as3 w/ 2 input fields. the first has tabIndex set to 0, and the second has it set to 1. When i hit tab, the cursor vanishes. If i press it 2 more times, it finally shows up.
I placed the code below to observe what was happening:
var iox = function() {
trace(_root.stage.focus);
if (_root.stage.focus != null) {
trace(_root.stage.focus.parent.name)
}
setTimeout(iox, 400);
}
iox();
I expected to see maybe other fields file that might've been hidden getting the focus or some other object.. But turns out that the only 2 objects that get the focus are indeed my input boxes. After typing into 1 field, pressing tab only once switches the focus to the other field. However, the blinking cursor indicator, as well as the ability to type text into the field only shows up after the third time the button is pressed.
Any ideas?
After some more digging and some trial and error I've managed to fix the problem.
Basically all i had to do was import the FocusManager class and activate it. The triple tabbing button just vanished after that.
import fl.managers.FocusManager;
var fm = new FocusManager(myclip);
myclip.txt1.tabIndex = 0;
myclip.txt2.tabIndex = 1;
Check if any of your other items on display list have tabEnabled property set to true. TabEnabled property description MCs with buttonMode set to true have this enabled. Apparently there are two objects with this setting in the list when you check. So either perform a manual check, or do the complete displaylist walk querying at least class name and name property of any object that has tabEnabled as true.
I want to create a scrollable list in flash/as3 and the important thing is.... if the user wants to move some list item up or down... he can do that by dragging the item... so when he press and hold on an item... the item will become drag-able and as the user moves it up or down the list, the other items should slide to the empty space. Its the same behavior seen in smartphones....
I'll figure out the creation, data filling, scrolling, and other mouse interaction events.... i just want help with this one behavior....of changing the order of items by dragging them. If only someone can just provide the basic algorithm or any idea how this can be achieved.. it will be enough.
​Thanks in advance
EDITS :
First of all... i apologize for not posting any details about the question... (this is my first post to this site) and hence i am adding all the research and what i have done so far.
the list is part of a big project hence i cannot share the whole code.
WHAT I HAVE ALREADY DONE :
i have created a mask, a container, a scroll bar to scroll the container, items to add into the list, methods to add items, remove items and arrange them according to the order.
hence it is a scrallable and working list.
the whole thing is in as3 and flash only.
i don't know flex and i don't want to use it either.
WHAT I WANT NEXT :
i want to change the order of these items by (mouse_down on an item -> drag it up/down -> mouse_up at the position) sequence.
If anyone wants more details i can share it.
Thanks in advance.. :)
Add a simple List component to an application
In this example, the List consists of labels that identify car models and data fields that contain prices.
Create a new Flash (ActionScript 3.0) document.
Drag a List component from the Components panel to the Stage.
In the Property inspector, do the following:
Enter the instance name aList .
Assign a value of 200 to the W (width).
Use the Text tool to create a text field below aList and give it an instance name of aTf .
Open the Actions panel, select Frame 1 in the main Timeline, and enter the following ActionScript code:
import fl.controls.List;
import flash.text.TextField;
aTf.type = TextFieldType.DYNAMIC;
aTf.border = false;
// Create these items in the Property inspector when data and label
// parameters are available.
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000});
aList.addItem({label:"1966 Mustang (Classic)", data:27000});
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000});
aList.allowMultipleSelection = true;
aList.addEventListener(Event.CHANGE, showData);
function showData(event:Event) {
aTf.text = "This car is priced at: $" + event.target.selectedItem.data;
}
This code uses the addItem() method to populate aList with three items, assigning each one a label value, which appears in the list, and a data value. When you select an item in the List, the event listener calls the showData() function, which displays the data value for the selected item.
Select Control > Test Movie to compile and run this application.
source: http://help.adobe.com/en_US/ActionScript/3.0_UsingComponentsAS3/WS5b3ccc516d4fbf351e63e3d118a9c65b32-7fa6.html
Finally i have got the answer from some other forum.
Here is the link to the example (behavior) that i want to add to my list :
http://www.learningactionscript3.com/2008/05/13/the-power-of-relative-positioning/
(at the bottom 'Advanced Align Example').
I have an ArrayCollection that is the dataProvider for a spark.components.List, which has allowMultipleSelection="true". There is a "Remove Selected Items" button which initiates the removal of all the selected items from the ArrayCollection upon being clicked.
I currently use the following method:
myList.selectedIndices.sort(ascendingSort);
// remove items, counting backwards
for (var i:uint = myList.selectedIndices.length; i > 0; i--) {
myArrayCollection.removeItemAt(myList.selectedIndices[i-1]);
}
where ascendingSort does what you expect ;). It works fine, and I know that it will always work.
However, I did take note that if I neglected the sort altogether, to my surprise the removal still worked. The reason for this turned out to be that, when the removeItemAt is called, the selectedIndices are correspondingly updated.
So my question is: Can one rely upon a removeItemAt call updating the values in the selectedIndices? or might that turn out to be different between runtimes and/or Flex SDK versions?
Obviously, if it is reliable then leaving out the sort would be a significant improvement.
Can one rely upon a removeItemAt call updating the values in the
selectedIndices?
Apparently in your use case, yes.
or might that turn out to be different between runtimes and/or Flex
SDK versions?
It may very well change at some future point, or may have changed before. I know that in my experience with list based classes, sometimes modifying the dataProvider may cause the list to go back into the "no selection" state. Removing a single selectedItem on a list that does not allow multiple selection is a good example of that.
Usually, in the apps I've worked on, I'm not removing items from a list based on the user's selection in a list; instead they are usually removed (or filtered) out based on some criteria in the actual object. And that criteria usually is a Boolean value that relates to a checkbox shown in a DataGrid column.
var indexes:Vector.<Object> = list.selectedItems;
while(indexes.length > 0 )
{
var item:* = indexes.pop();
var remindex:int = list.dataProvider.getItemIndex(item);
if (remindex != -1)
{
list.dataProvider.removeItemAt(remindex);
}
}
I have a spark datagrid with selectionMode="multipleRows".
I have three columns in the datagrid.
I don't want the row selection to happen when the user's click falls on the third column of a row.
The row selection should happen only when one of the first two columns is clicked.
How do I achieve this? There is a selectionChanging event for the datagrid, but the GridSelectionEvent object received in the handler does not seem to provide any information about the column on which the click happened.
Thanks!
I figured this out myself. I am not sure if this is a bug in the spark DataGrid. The following is definitely a hack and not clean.
In the grid_mouseDownHandler function in the DataGrid.as file, there is a line:
const columnIndex:int = isCellSelection ? event.columnIndex : -1;
This line is causing the columnIndex to be set as -1 if the selectionMode of the DataGrid is anything other than GridSelectionMode.SINGLE_CELL or GridSelectionMode.MULTIPLE_CELLS. As I mentioned in the original question, I need my datagrid to have a selectionMode of GridSelectionMode.MULTIPLE_ROWS.
I sub-classed the DataGrid and re-implemented the grid_mouseDownHandler (basically copy-pasted the whole function). I changed only the above line to always assign the columnIndex to event.columnIndex.
(I also had to copy some more functions which were referenced by the grid_mouseDownHandler over to my sub-class because those functions were protected or mx_internal. (toggleSelection, extendSelection, isAnchorSet)
Then, in the selectionChanging event handler, I could just do the following:
if( 2 == event.selectionChange.columnIndex )
{
event.preventDefault();
}
I realize that this is not a clean solution, but it is the best I could think of. Maybe someone can suggest a better solution?
I have a standard html drop down box.
I want to run js code after the user selected an item without a separate submit button.
Onchange event does not fire when the user selects the 1st item (actually the previously selected item) in the select box.
How can I make the combo box react to the click even if the previously selected item is clicked?
Notes:
1. I don't want to add 'select from here' or something similar to the select box.
2. the onclick event does not help since it fires also on the 1st click the user does to open the options before actually selecting one.
I don't think this can't be done. onchange, as you correctly point out, doesn't work. onmouseup fires too early.
I think onblur would do the trick but it will also fire when the user tabs through the available elements.
If you really need this to work reliably, consider using a JavaScript based replacement widget like this one. They enable you to work around the notorious lack of flexibility that standard form elements unfortunately have.
Oh and by the way, the <select> element is not a combo box, it's a drop-down.
:)
You can use the onclick event but at the same time count the number of clicks.
<script type="text/javascript">
var count = 0;
function selectClicked(sel){
count++;
if (count == 2){
//the user has selected something
//so go ahead and handle it
count = 0;
}
}
</script>
What if you added the "onclick" event to the individual "option" elements rather than the "select" element?