I work with AIR.
I have to window, one with list ( a glossary) and another with datagrid and editable cells.
The goal is to drag item on list and drop it on cursor position on itemEditor (datagrid).
I don't know how to do that.
This below the code I use to do the same action not in the datagrid but on a textarea what is on the same datagrid window.
// On 1st window (glossary)
<s:List dataProvider="{DP_GlossList2}" id="list2"
labelField="glNom"
dragEnabled="true"
dropEnabled="true"
dragMoveEnabled="true"
click="list2_clickHandler(event)"
height="60%" width="100%"/>
// on second window : textarea and datagrid
// drag drop
protected function retTTAfaire_dragDropHandler(event:DragEvent):void
{
retTTAfaire.text = retTTAfaire.text.substring(0,retTTAfaire.selectionAnchorPosition)+ " "+event.dragSource.dataForFormat("itemsByIndex")[0].glNom+
" "+retTTAfaire.text.substring(retTTAfaire.selectionAnchorPosition+1);
}
protected function retTTAfaire_dragEnterHandler(event:DragEvent):void
{
DragManager.acceptDragDrop(spark.components.TextArea(event.target));
}
Please, help me.
Thanks
I don't have an exact answer, but one area to investigate is using the getObjectsUnderPoint() method (from DisplayObjectContainer). Using a point - from the local coordinate system from the Drag/Mouse event. This will get you looking at the "right" branch of the display tree.
I think your hard part to figure out is knowing exactly which element you want to interact with - in this case the item editor. When iterating your suspect list, you'll want to compare it against an interface that the ItemEditor (IGridItemRenderer) is known to have but not other objects.
Also depending on what reference the mouseX/mouseY coordinates lie in, you'll most likely need to convert it to the same coordinate system that the item editor is in - in this case Editors are handled by the PopupManager (or the SystemManager) - or should be if the Flex SDK team followed the same paradigm with spark as they did with halo - but I haven't verified this.
I can't tell from the wording of your question, but if you are trying to allow items to be placed after the item editor is opened - this will get very difficult because of focus management.
Related
I am using MvxAutoCompleteTextView (MVVM Cross's custom AutoCompleteTextView) and have the List appearing fine and the ItemTemplate displaying as expected.
When I click on one of the Items in the List the Text property gets set to the full name of the Type of object in the List. For example if the List contained objects of type MyObject in a namespace of MyCompany.MyDept the text property would be set to the string "MyCompany.MyDep.MyObject"
Anyone else ever seen this?
UPDATE
It looks like Android's AutoCompleteTextView prefers just a list of strings as the source of the list.
There is a method in the Android code called ConvertSelectionToStringFormatted but I cannot see how to provide an alternative to that
If you look at my UPDATE in the question you will see that the problem lay with ConvertSelectionToStringFormatted.
I could not see how to easily create a custom version of MvxAutoCompleteTextView with my own implemenation of ConvertSelectionToStringFormatted so I need a different approach.
Android's AutoCompleteTextView was obviously calling ToString on the selected object so I overrode ToString in my object to return a display name that was more useful than "MyCompany.MyDep.MyObject"
I thought I would also include my final axml for the control as that was pretty important
<MvxAutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:completionThreshold="1"
android:hint="Enter drug name..."
local:MvxItemTemplate="#layout/item_myObj"
local:MvxBind="ItemsSource Suggestions;
PartialText SearchTerm;
SelectedObject SelectedObj;" />
Setting completionThreshold was pretty important, when that was not set the control stopped working\searching once I had cleared the box. No matter what I typed after clearing the box (with backspace) it would not autocomplete anymore. Another odd issue when threshold was not set was that the PartialText was binding as an empty string once it went to 1 character! Yes 1 not 0.
Do not make the mistake of binding the Text property of the control. PartialText is the search term leave Text well alone. This caused me lots of odd issues.
Good luck
I have a situation where I want to use databinding from an ArrayCollection to populate text fields in a Flex view.
The ArrayCollection is populated from an SQL Result object. I store the ArrayColelction in my model class using getters and setters like this:
private var _monthlyData:ArrayCollection;
public function set monthlyData(value:ArrayCollection):void{
_monthlyData = value;
}
[Bindable]
public function get monthlyData():ArrayCollection{
return _monthlyData;
}
I use the monthlyData as a dataprovider for a list etc which works fine. I also need to use properties at certain indexs in this collection as text field strings.
When the text field text properties are set I don’t neccesarily have the monthlyData arrayCollection populated yet.
The text fields are set in another outside class with has a singleton reference to this model so I set the fields like so at the moment:
textField.text = _model.monthlyData.getItemAt(3).Month;
I want to setup binding to the array collection instead of just using this assignment method so that when that item in the array is refreshed or the entire arrayCollection is populated or updated , it will update the textField text.
I’m having trouble getting the binding to work.
I’m using bindageTools at the moment but have been also using the built in as3 BindingUtils to little effect.
I can do the following which sets the initial text property correctly, but it wont update when the ArrayCollection changes:
Bind.fromProperty(_model.monthlyData.getItemAt(3),"Month").toProperty(textField, "text");
So if someone could please point me in the right direction as to which way is best to get the binding going in pure AS3 no MXML, I’d really appreciate it.
Cheers
Marco
From the code you provide, I can see that monthlyData is bindable, which is fine. I'll assume that _model is bindable too.
However the getItemAt() method is not bindable (it will not dispatch propertychange events when items change positions in the collection), hence the text property of the text field will not be updated.
What you can do is something like this:
[Bindable]
public var selectedDate3:MyDate;
<s:TextInput id="myTextInput" text="{selectedDate3.month}" />
or the AS equivalent (why you want to make things hard on yourself is beyond me though)
BindingUtils.bindProperty(myTextInput, "text", selectedDate3, "month");
and then programmatically update selectedDate3:
_model.monthlyData.addEventListener(CollectionEvent.COLLECTION_CHANGE, updateSelected);
private function updateSelected(event:CollectionEvent):void {
selectedDate3 = _model.monthlyData.getItemAt(3);
}
Note that the month property of MyDate must also be bindable.
You mention that these fields are in a VGroup. I'm guessing you want to display a top 3 or something. This is still a list. It would be much easier and cleaner to do this with a List or DataGroup and simply filter the ArrayCollection to only display the first 3 items (or whatever rule for the items to be displayed), or configure the DataGroup to display only three items (it has no scrollbar anyway).
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').
Currently I am using UiService to create a form and I uses ListBox, from what I understand to pass a value via handler will be something like e.parameter.[Name of ListBox] to access the selected item.
Does anyone know is it possible to use like app.getElementById([Name of ListBox]) to access the selected item. The reason I am using this method is because my list of ListBox-es are dynamic.
I spent some time looking for this answer as well, but finally I tried one idea and it worked.
You can use e.parameter as an array so you can these two will give the same:
e.parameter.LIST_BOX_NAME
and
e.parameter['LIST_BOX_NAME']
So in the second sample any dynamic list box ID can be used. I use same handler for all added dropdown list and have this code to check what dropdown was changed and what value it has now:
if (e.parameter[e.parameter.source] == 'a'){
To change the content of the listBox you can use app.getElementById('ID of the listBox'), from there you can clear() and addItems again but you cannot read the listItems.
When I need to do this I usually store the list of items somewhere else, in a place that I can read anytime, for example the list of items can be stored as a string in the listBox tag itself so I have all items at hand to repopulate the listBox after I have clear it.
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?