I have been looking for a drag and drop listbox, but I guess there is no such default control. A bit of searching has given me,Jason's Blog in which he has pulled it off very gracefully.. In the code he has written, there is a the drag and drop handler which is present at the right end of every listboxitem.. You press on the handler and move the item up or down. I am trying to implement the same on the long press of the item..
He uses a drag interceptor which is basically a canvas and it sits on top of listbox to capture the listboxitem manipulation events. If I want the same manipulation on the hold event of the listbox item, how do I trigger it??
This is how I have linked the events to the drag interceptor.
How do i call the Manipulation Started on the hold of the listbox item?? Or is there some other way to do this?
this.dragInterceptor.ManipulationStarted += this.dragInterceptor_ManipulationStarted;
this.dragInterceptor.ManipulationDelta += this.dragInterceptor_ManipulationDelta;
this.dragInterceptor.ManipulationCompleted += this.dragInterceptor_ManipulationCompleted;
this.dragInterceptor.Hold += dragInterceptor_Hold;
Have you tried only adding the manipulation event handlers once the hold event is triggered? Or adding a flag which is set on Hold and cleared on ManipulationCompleted to test if the hold was done before running the main code in the other manipulation events.
I triggered the manipulation events of the reorder listbox by sending the arguments (object sender and ManipulationStartedEventArgs) from the mainpage.xaml.
Related
In my form contains textbox and button. I am doing some operation in textbox (blur) event and button (click) event.
Let's assume:
user enter some text in textbox and click the button. (blur) event invoked but (click) event not invoking.
note : "at the time of clicking the button focus should be in textbox."
example: https://stackblitz.com/edit/angular-b4h9pi
blur event alert is coming but click event alert not coming.
Scenario
In onblur event I make the service call to save that field value. In onClick event I have to save all the fields data. If cursor focus one of the textbox then user click the save button. First I have save the field after finishing the first call, make the second call to save all the data. Do not call the service parallel. I want to call one by one.
Remove alert with console.log or other relevant code. alert will be triggered as as soon as focus is lost from the input even before the button is clicked. So two event is not firing simultaneously
stackblitz
Both events are indeed firing. You can confirm by changing your alert calls to console.log. I believe the browser is likely just blocking multiple alert dialogs.
Update to answer your comment:
You say you want them to fire simultaneously and then you say you don’t so I’m having trouble understanding your needs.
I can tell you this though. The blur event fires, then the click event fires. You should be able to handle whatever you need to in those handlers with that knowledge.
If you need to wait for your blur handler to come back with a response before sending that data along with your click handler, you could theoretically set a variable like
this.blurRequestLoading=true
That way, instead of firing the click request, if blurRequestLoading is true, you could set a this.clickEventPendingBlurResponse=true.
Then when the blurResponse comes back, you can set blurRequestLoading back to false, and if clickEventPendingBlurResponse is true, fire the clickEvent manually within the response handler, and set clickEventPendingBlurResponse back to false.
Hi thanks for your time and effort, i did one logic to sequence the event, please suggest me is this code in production level.
sample code base: https://stackblitz.com/edit/angular-czxn9o
I have a form with several groups of controls and I want to be able to toggle enabled/disabled those groups individually with a Toggle Button control. When the form loads, I programmatically assign a UDF called ToggleGroup to each toggle button's AfterUpdate() event handler. I have tested this part of the code and know that it performs as intended.
I want the groups to start in a disabled state, so I want to trigger the AfterUpdate() handler for each toggle button after I assign the function. I know that I could achieve this in a few other ways (I could change the properties of the grouped controls in Design View or I could call ToggleGroup on them as part of the form's initialization), but for my own curiosity and interest, I want to know if the method I described is feasible.
'''GroupTags is a collection of all Tags associated with control groups
For Each iTag In GroupTags
CtrlName = "Toggle_" & iTag
Me(CtrlName).AfterUpdate = _
"=ToggleGroup( ...valid arguments... )"
'''Here: trigger the AfterUpdate event for this control based on CtrlName
Next iTag
I need to implement drag 'n' drop of HTML elements between browser windows.
When an element is dropped from window A to window B, it must be removed from window A (and added to window B).
When the drag 'n' drop is cancelled (happens when the user presses the "esc" key, or sometimes when the drag 'n' drop feature seems to bug), the element must go back to its original location.
Currently what I'm doing is to keep a "hasBeenDropped" flag, which is set to false in dragstart, and to true in drop. In dragend, I check my flag, and if it is not set to true, it means that the drop has fired in another window, or that the operation has been cancelled. I need to distinguish these two cases (drop in another window vs cancel), in order to act accordingly (eg remove the window or replace it to its original location).
TL;DR : I need to be able to detect when a native HTML5 drag 'n' drop operation has been cancelled (for example when a user presses "esc" key).
Is there any way to do so??
Like you, I used a flag to determine whether or not a drop had successfully occurred elsewhere, which more or less implies that it hasn't been cancelled. However there appears to be a more proper way, as described in MDN:
Finishing a Drag
Once the drag is complete, a dragend event is fired at the source of
the drag (the same element that received the dragstart event). This
event will fire if the drag was successful[1] or if it was cancelled.
However, you can use the dropEffect property to determine what drop
operation occurred.
If the dropEffect property has the value none during a dragend, then the drag was cancelled. Otherwise, the effect specifies which
operation was performed. The source can use this information after a
move operation to remove the dragged item from the old location. The
mozUserCancelled property will be set to true if the user cancelled
the drag (by pressing Escape), and false if the drag was cancelled for
other reasons such as an invalid drop target, or if it was successful.
The mozilla specific property is obviously undesirable, but the dropEffect property itself should be sufficient for most purposes. I tested it myself (tiles being dragged into dropzones within an iframe) and it seemed to work as expected.
This is taken directly from the current MDN page on the topic:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#dragend
Probably not so useful to you since you switched jobs, but information on this topic is very difficult to find, so hopefully the next person searching will benefit.
The dragend event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).
You can check the event property "ctrlKey". If it is true, the Esc button was pressed. You can also check other properties if necessary.
Have a look at the reference, for example here: https://developer.mozilla.org/en-US/docs/Web/Events/dragend
Best, Alex
I'm developing a Windows Store App which has a gridview that is used like a "Toolbox" from which I want to be able to drag items onto another control.
The default animation of dragging removes the item from the GridView while the item is being dragged and then the item snaps back to the GridView after the item is dropped on the destination component.
Is it possible/easy to allow the item (or items in the case of multi-selection) to be shown at the mouse/touch location during the drag while also remaining within the GridView?
The quick answer is no. Especially since you said "easy way". The concept of adorners which is in WPF isn't part of WinRT. You can always create something that floats under the pointer, for sure. That's a real option. But drag and drop is only partly implemented in W8.x XAML.
I'm working on a simple auto complete function for my Flex mobile app. For that I've got a CalloutButton that triggers a Callout.
The Callout holds some lists from which the user can select items. On item select, the callout gets closed (calloutButton.closeDropDown()).
The very same behavior is done for a TextInput. The user inputs text, the callout opens and according to the entered text, the lists change. Works fine so far. Now, when the user selects an item from any of the lists, the callout closes. Also fine.
Now the issue, after the callout is closed, the TextInput automatically regains focus.
On a mobile device this is more than disturbing.
I narrowed this behavior down to the mobile TextInput skin (spark.skins.mobile.TextInputSkin) since a TextInput without this skin class doesn't show this behavior.
Now you might say just use the default skin instead but unfortunately I can't. The default skin has a bug with Android devices that doesn't pass though the enter event. That I could live with since I'n not necessarily dependent on the enter event, however, the spark mobile skin allows be to continue entering text in the TextInput even after the callout has been opened, which is desperately needed as the lists change according to the entered text.
I can't provide any code as the problem has been narrowed down to the skinClass, thus should not be in my own code. Believe me, I tried every nice and not so nice method to prevent the TextInput from getting focus again, but nothing worked.
So, totally stuck here!
Hopefully you guys have some ideas on how to solve this.
Edit:
Below the steps of my application's behaviour. (to be fair, the workflow inside the callout is a little more complex, I'm working with several lists and a SplitViewNavigator here (thus can't use the Flextras autocomplete), but that doesn't affect the TextInput focus issue I'm facing).
Enter text in TextInput
On key change a Callout with two Lists is opened.
The first List receives results according to the entered text from a webservice
User selects item from list
Second list receives results according to selection from first list from webservice
User selects item on second list
Callout closes
This all works fine, except that the TextInput receives focus after the Callout closes.
I really don't know what triggers this behavior.
Edit2: Code to further illustrate the issue.
Naturally, this is stripped down to the very basics, but it mirrors the behavior of the component and focus.
First the CalloutButton and TextInput that can both control the Callout:
<ui:SearchCallout id="detailSearch"/>
<s:TextInput id="searchInput" skinClass="spark.skins.mobile.TextInputSkin"
enter="historySearch(searchInput.text)"
focusOut="searchFocusOutEvent(event)"
focusIn="searchFocusInEvent(event)"/>
The TextInput's focus handlers don't do anything related to the callout, they just set current states of another component, so I'll leave them out here.
Function historySearch closes the CallOut (I forced it to close as it wouldn't close with the usual closeDropDown()), formats the search text, handles a searchHistory and eventually triggers the search function that passes the formatted search text to the selected component.
Here are the parts that matter for this case:
private function historySearch(val:String):void {
detailSearch.forceClose=true;
detailSearch.closeDropDown();
searchEvent(_searchSyms, true);
}
Note: 'val' (the TextInput's text) is trimmed and whatnot, eventually it will result in an array of strings, represented by '_searchSyms'.
Further eventListeners are as follows:
searchInput.addEventListener(KeyboardEvent.KEY_DOWN, onKeyEvent);
searchInput.addEventListener(FlexEvent.VALUE_COMMIT, onKeyEvent);
searchInput.addEventListener(TextOperationEvent.CHANGE, onTextChange);
KEY_DOWN and VALUE_COMMIT don't have anything to do with the Callout, they are used to handle stuff for the searchHistory, hence I'll leave the onKeyEvent function out here.
onTextChange triggers the string search on the server and closes the Callout in case the TextInput's text is an empty string:
private function onTextChange(event:Event):void {
if(searchInput.text=="") {
if(detailSearch.isDropDownOpen) {
(detailSearch.rightView.activeView as RightView).clearDetailList();
detailSearch.isCloseable=true;
}
}
_searchManager.getRicsByChar(searchInput.text);
}
Eventually the server will respond and passes an array of responses. The Callout gets opened and it's lists are filled with the responses.
I won't paste all the Callout content's code here as it would be way too much. Basically, the user selects an item from any of the lists, the Callout is forced to close and the search function that passes the value to the component (not yet pasted here, be patient ;), is given the item's value. That basically looks like this (never mind the FlexGlobals stuff, this gets all refactored once the focus issue has been resolved):
var search:String = String(event.currentTarget.selectedItem);
FlexGlobals.topLevelApplication.detailSearch.forceClose=true;
FlexGlobals.topLevelApplication.detailSearch.closeDropDown();
FlexGlobals.topLevelApplication.searchEvent(new Array(search), true);
Allright, now the final step of the whole functionality, the searchEvent. As already said, this function basically only passes the formatted search value to the selected component. This either happened on 'Enter' of the TextInput (as the code above shows), or on selection of an item from one of the Callout's lists.
public function searchEvent(_searchSymbols:Array, setText:Boolean):void {
if(setText) {
var _searchString:String="";
for each (var _sym:String in _searchSymbols) {
_searchString += _sym + ", ";
}
searchInput.text = _searchString.substring(0, _searchString.length-2);
}
stage.focus=null;
if(selectedWindowContainer) {
// set the array of search items to the selected component here
selectedWindowContainer.setFocus();
} else
trace("[MAIN] no component selected");
}
And that is basically it. This function is the last step of my search routine, and the selected component (that will get the search items), is getting the focus.
Yet, it automatically loses focus again and the TextInput will receive it. I have no idea where and why this happens, and I need to get rid of this behavior asap!
Wow, what a post, anyone still reading this? ;) Well, I hope so.
Well, after hours of testing several ways to prevent the TextInput from automatically gaining focus, I (kinda) solved the issue, although I think it's more a dirty hack than anything else.
Setting the TextInput's focusEnabled to false works fine, even though the focus indication (border around the TextInput) won't work with this any more (an issue I can live with for now).
Still, I'd really like to know what exactly is going on here, especially in the mobile skin class.