Serious Issues with Events not Firing

Targets Web
1

Hey guys,

I’m having some rather substantial issues with framework based events not firing in a web app.

So here’s my biggest issue…

On my page, I have a container control on that page statically in the IDE. Inside that container control, I embed multiple other container controls that are in effect a control group (not really but I do save them into an array as they are created). Now, when I click on one of these embedded containers, I have a menu show up. Now, this is not one of Xojo’s WebMenus because they don’t properly scroll if they extend beyond the boundaries of the web page (another quirk of Web Edition). So instead, I created my own menu using a listbox that I show and hide (thank you Michel Bujardet for the initial help with that one). This has worked great form some time now. I click on the container control, the menu shows up and I click on the item I want for the menu and all is good.

Until now…

I have added some code to the MouseMove event of my web page. I want to use an animator to move a toolbar into place if the cursor goes to the top of the page. Works great. But added the MouseMove event 100% kills the ability for me to click in the listbox! It pops up, but I can’t do anything with it. The CellClicked event will not fire. If I take out the Mouse events from the page, things fire just fine.

So I’m really stuck. I haven’t been able to duplicate this in a smaller project yet but am working on it.

It seems like when the mouse events fire on the window, they take the focus away from other controls and then those controls won’t receive the events. I’m not sure. I’ve seen similar issues in the past like this where events in the page, screw up events for children on the page.

And the GotFocus and LostFocus events are a mystery to me because I NEVER see them fire even when I call the SetFocus method.

All just part of the quirks of WE I suppose. I wish Xojo would take some time and fix some of these really annoying issues. I see other times where the resized event won’t fire. Constructors don’t fire or don’t fire properly on container controls, etc.

So until I figure out how to duplicate this and throw a bug report up, I’m wondering if anyone else has seen this sort of behavior and how you might do a workaround.

IMHO, framework events should never be suppressed by user code.

Oh and in case you are wondering, I’ve disabled all JavaScript that could possibly run on this page. So it’s not some errant JavaScript code that’s causing the issue.

2

As the docs say, this can lead to an excessive amount of messages sent to your app from the client’s browser. Why not have a (transparent) control at the top of the WebPage to catch the mouse movements only there (or the MouseEnter event only)?

3

Well, that is not a bad idea, but it would interfere with some other controls that are normally there before the toolbar scrolls into place.

So you think the mouse move traffic may be interfering with the events?

4

I don’t know – I’ve never used the mouse move event in a web app. An application would quickly become too slow IMHO.

5

It’s the same problem that’s mentioned here:
<https://xojo.com/issue/39999>

and this forum message:
https://forum.xojo.com/26472-web-drag-and-drop-questions

6

Andre just mentioned the latest discovery about mouseMove or MouseDown inhibiting things.

Hopefully this bug will be fixed soon. In the meantime, If you absolutely need MouseMove, you may want to access the mouse position with JavaScript : onmousemove Event

You can search onmousemove in the forum. I have seen it used before.

7

Michel,

Thank you for the reply. I think I will implement a timer on the page where I check the mouse position using Javascript. That should work. I was struggling for a way to get the Mouse position since System.MouseX and System.MouseY does not exist in WebEdition.

8

In fact, Michel, looking at the W3Schools example, maybe I can put HTML code in an source object on the page and effectively do the same thing as their example. Then I don’t have to use a timer, but am instead using the Javascript function. I can define the rectangle like they do except leave the border off. Then maybe I can make a computed property on the page that fires my code when the Y coordinate is in the right value range…This could be a workaround…

And I thought I wouldn’t need to know JavaScript to use Xojo! :slight_smile:

9

JavaScript is for the Web the equivalent of declares in Desktop. Use sparingly when there is no choice, is my philosophy.

10

MouseMove event should not even be available. There is almost no way that can be used in a way that is not awful and does not destroy performance. If you require that kind of pixel perfect manipulation of the UI it will have to be client side in Javascript.

11

I just want to be able to know when the mouse is say in the top 60 pixels of the screen. I don’t need pixel perfect manipulation. So what would you recommend for that?

12

AFAIK unless you click, MouseMove is the only way to know where the cursor is.

That said the JavaScript one is a lot less taxing than the Xojo one.

You can for instance have onmouseMove update the variables squeekX and squeekY in onmousemove, which you read from Xojo only when you need those values. In fact that would directly be the equivalent of desktop System.MouseX and System.MouseY.

That said, one has sometimes to tiptoe not to mess the Xojo framework. Trapping events such as this can seriously impair Xojo’s ability to react to the cursor position.

13

[quote=219135:@Michel Bujardet]AFAIK unless you click, MouseMove is the only way to know where the cursor is.

That said the JavaScript one is a lot less taxing than the Xojo one.

You can for instance have onmouseMove update the variables squeekX and squeekY in onmousemove, which you read from Xojo only when you need those values. In fact that would directly be the equivalent of desktop System.MouseX and System.MouseY.[/quote]

Right. I’m just trying to figure out how to implement the javascript part. I have no choice as having the MouseMove event active FUBARs everything else I have going on and it won’t be fixed any time soon.

14

I am a little tired at this moment, but I may try to concoct something tomorrow.

15

This sounds like a job for CSS.

create an invisible object in the upper area of the page, assign a style to it that responds to the :hover state and then use a web transition to grow it and perhaps make it visible as needed. It’s efficient and usually does the job.

Yes, it’s outside of Xojo but in the web world sometimes it’s what you need to do…

16

Have you tried putting a container at the top of the page that is 60px tall and implement the MouseEnter event?

17

I have a container there already. So MouseEnter wouldn’t work. I could add another container perhaps. Interesting to think about.

So MouseEnter and MouseExit are fine - it’s MouseMove that’s the problem - yes?

18

Yes. As it was stated before, MouseMove fires several times per second and each event causes a round trip to the server. This flood of events is what causes the trouble, simply in latency… And if you think it’s slow on your desktop, it’s probably 100 times slower on the Internet.

The other mouse events are not repeating.

19

[quote=219343:@Greg O’Lone]Yes. As it was stated before, MouseMove fires several times per second and each event causes a round trip to the server. This flood of events is what causes the trouble, simply in latency… And if you think it’s slow on your desktop, it’s probably 100 times slower on the Internet.

The other mouse events are not repeating.[/quote]

Thanks Greg. I’ll try that.

Latency is not much of an issue since this is a LAN based application but even then probably could be. I’ll look at your idea. It’s a good one.

20

Here is the equivalent of System.MouseX and System.MouseY (within the confines of the browser window, and not the screen, though).

I have not made it into a WebSDK class, but the principle can easily be adapted. The advantage of a WebSDK wrapper is that returning the values can be made silent.

The JavaScript keeps track of the cursor position client side, so no flood of events happen in the Xojo app. It simply updates the whereX and whereY variables in the DOM :

Place this in a constant (for instance locate), and call as self.executejavascript(locate) in WebPage.Shown :

[code] whereX = 0;
whereY = 0;

document.onmousemove = function() {whereFunction(event)};

function whereFunction(e) {
whereX = e.clientX;
whereY = e.clientY;
}[/code]

When needed, this will simply fetch the current value of whereX and whereY, and set the hashtag with that.
Place this in a constant (for instance where), and call as self.executejavascript(where).

location.replace("#"+whereX+"where"+whereY);

Values are available in the Session.HashTagChanged event :

Sub HashTagChanged() dim where() as string = split(HashTag, "where") msgbox "Coordinates : X = "+where(0)+" - Y = "+where(1) End Sub