Fwd: Mouse tracking with Tapestry

classic Classic list List threaded Threaded
14 messages Options
Reply | Threaded
Open this post in threaded view
|

Fwd: Mouse tracking with Tapestry

Phyambre
Hi,

I would like to do mouse tracking with tapestry (know the coordinates of
the mouse, the path of the DOM tree to the element that is being pointed
and the text of that element).

Currently I have a solution that works, but I think it is terribly
inefficient and I hope you can make any suggestions to improve it.

I have a JS library that calculates all those values and writes them to
"input hidden" form fields in my .tml

Then I used the ZoneUpdater mixin:

http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/onevent

I modified ZoneUpdater.java by adding a List attribute. That list will
contain the ids of the "input hidden fields" as you can see below.

Then, in the TML file, instead of

|<input t:type="TextField" t:id="firstName" t:mixins="zoneUpdater"
t:clientEvent="keyup" t:event="firstNameChanged" t:zone="nameZone" /><br/>|

I have

<p class="paragraph" t:type="any" t:mixins="zoneUpdater"
ZoneUpdater.clientEvent="mousemove" ZoneUpdater.event="track"
            ZoneUpdater.zone="textZone"
ZoneUpdater.fields="['documentHeightVal', 'documentWidthVal',
'windowHeightVal',
            'windowWidthVal', 'windowOffsetYVal', 'windowOffsetXVal',
'mouseYVal','mouseXVal', 'domPathVal',
'overTextVal']">${currentParagraph}</p>

then in zone-updater.js I add all those values to the URL.

Finally, in my page file, the onTrack() method is executed.

The problem here is that onActivate() is also being exectued, and
onActivate() has a lot of stuff that I want to execute only once (when
the page loads) and not every time the user moves the mouse.

Is there any other solution that does not trigger onActivate() every
time that the user moves the mouse on a component?

Regards,

Phy.


Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

JumpStart
I’ll answer it this way:

        http://jumpstart.doublenegative.com.au/jumpstart7/examples/navigation/onactivateandonpassivate/3 <http://jumpstart.doublenegative.com.au/jumpstart7/examples/navigation/onactivateandonpassivate/3>

Hope this helps,

Geoff

> On 7 Apr 2017, at 2:07 PM, Phyambre <[hidden email]> wrote:
>
> Hi,
>
> I would like to do mouse tracking with tapestry (know the coordinates of
> the mouse, the path of the DOM tree to the element that is being pointed
> and the text of that element).
>
> Currently I have a solution that works, but I think it is terribly
> inefficient and I hope you can make any suggestions to improve it.
>
> I have a JS library that calculates all those values and writes them to
> "input hidden" form fields in my .tml
>
> Then I used the ZoneUpdater mixin:
>
> http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/onevent
>
> I modified ZoneUpdater.java by adding a List attribute. That list will
> contain the ids of the "input hidden fields" as you can see below.
>
> Then, in the TML file, instead of
>
> |<input t:type="TextField" t:id="firstName" t:mixins="zoneUpdater"
> t:clientEvent="keyup" t:event="firstNameChanged" t:zone="nameZone" /><br/>|
>
> I have
>
> <p class="paragraph" t:type="any" t:mixins="zoneUpdater"
> ZoneUpdater.clientEvent="mousemove" ZoneUpdater.event="track"
>            ZoneUpdater.zone="textZone"
> ZoneUpdater.fields="['documentHeightVal', 'documentWidthVal',
> 'windowHeightVal',
>            'windowWidthVal', 'windowOffsetYVal', 'windowOffsetXVal',
> 'mouseYVal','mouseXVal', 'domPathVal',
> 'overTextVal']">${currentParagraph}</p>
>
> then in zone-updater.js I add all those values to the URL.
>
> Finally, in my page file, the onTrack() method is executed.
>
> The problem here is that onActivate() is also being exectued, and
> onActivate() has a lot of stuff that I want to execute only once (when
> the page loads) and not every time the user moves the mouse.
>
> Is there any other solution that does not trigger onActivate() every
> time that the user moves the mouse on a component?
>
> Regards,
>
> Phy.
>
>

Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Daniel Jue
Hi, I'm not sure this is what you need, but here is a library we used
during a DARPA program to collect UI statistics including hovering, etc:
https://github.com/draperlaboratory/User-ALE

On the browser side it's fire and forget, and there is a separate server
set up to collect the stats information (i.e. it is transparent to your web
app/tapestry app server)

You the developer add in the places you want events to fire, such as on
buttons, or mouse tracking in general.

Here's a demo page:
http://draperlaboratory.github.io/user-ale/test_app/index.html



On Fri, Apr 7, 2017 at 2:12 AM, JumpStart <
[hidden email]> wrote:

> I’ll answer it this way:
>
>         http://jumpstart.doublenegative.com.au/jumpstart7/examples/
> navigation/onactivateandonpassivate/3 <http://jumpstart.
> doublenegative.com.au/jumpstart7/examples/navigation/
> onactivateandonpassivate/3>
>
> Hope this helps,
>
> Geoff
>
> > On 7 Apr 2017, at 2:07 PM, Phyambre <[hidden email]> wrote:
> >
> > Hi,
> >
> > I would like to do mouse tracking with tapestry (know the coordinates of
> > the mouse, the path of the DOM tree to the element that is being pointed
> > and the text of that element).
> >
> > Currently I have a solution that works, but I think it is terribly
> > inefficient and I hope you can make any suggestions to improve it.
> >
> > I have a JS library that calculates all those values and writes them to
> > "input hidden" form fields in my .tml
> >
> > Then I used the ZoneUpdater mixin:
> >
> > http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/onevent
> >
> > I modified ZoneUpdater.java by adding a List attribute. That list will
> > contain the ids of the "input hidden fields" as you can see below.
> >
> > Then, in the TML file, instead of
> >
> > |<input t:type="TextField" t:id="firstName" t:mixins="zoneUpdater"
> > t:clientEvent="keyup" t:event="firstNameChanged" t:zone="nameZone"
> /><br/>|
> >
> > I have
> >
> > <p class="paragraph" t:type="any" t:mixins="zoneUpdater"
> > ZoneUpdater.clientEvent="mousemove" ZoneUpdater.event="track"
> >            ZoneUpdater.zone="textZone"
> > ZoneUpdater.fields="['documentHeightVal', 'documentWidthVal',
> > 'windowHeightVal',
> >            'windowWidthVal', 'windowOffsetYVal', 'windowOffsetXVal',
> > 'mouseYVal','mouseXVal', 'domPathVal',
> > 'overTextVal']">${currentParagraph}</p>
> >
> > then in zone-updater.js I add all those values to the URL.
> >
> > Finally, in my page file, the onTrack() method is executed.
> >
> > The problem here is that onActivate() is also being exectued, and
> > onActivate() has a lot of stuff that I want to execute only once (when
> > the page loads) and not every time the user moves the mouse.
> >
> > Is there any other solution that does not trigger onActivate() every
> > time that the user moves the mouse on a component?
> >
> > Regards,
> >
> > Phy.
> >
> >
>
>
Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Phyambre
In reply to this post by JumpStart
Hi Geoff,

Thanks, it helped a lot.

I actually had some problems because I have several texts to show, so
the onActivate() was deciding the id of the text shown on the current
screen.

The onTrack() later needs to annotate the tracking values together with
the text id.

But then I moved all the code of the onActivate() to the setupRender()
and passed the text id as a parameter of the ZoneUpdater
(ZoneUpdater.userStageId="${userStage.userStageId}"):

<p class="paragraph" t:type="any" t:mixins="zoneUpdater" ZoneUpdater.clientEvent="mousemove" ZoneUpdater.event="track"
        ZoneUpdater.zone="textZone" ZoneUpdater.userStageId="${userStage.userStageId}" ZoneUpdater.fields="['documentHeightVal',
        'documentWidthVal', 'windowHeightVal', 'windowWidthVal', 'windowOffsetYVal', 'windowOffsetXVal', 'mouseYVal',
        'mouseXVal', 'domPathVal', 'overTextVal']">${currentParagraph}</p>

That worked. I tried to do the same thing passing the text id to another
input hidden like the rest, but it didn't work.

Now I have to do some extra work in the onTrack(), but it is not as much
as the one being done in the setupRender().

El 07/04/17 a las 15:12, JumpStart escribió:

> I’ll answer it this way:
>
> http://jumpstart.doublenegative.com.au/jumpstart7/examples/navigation/onactivateandonpassivate/3 <http://jumpstart.doublenegative.com.au/jumpstart7/examples/navigation/onactivateandonpassivate/3>
>
> Hope this helps,
>
> Geoff
>
>> On 7 Apr 2017, at 2:07 PM, Phyambre <[hidden email]> wrote:
>>
>> Hi,
>>
>> I would like to do mouse tracking with tapestry (know the coordinates of
>> the mouse, the path of the DOM tree to the element that is being pointed
>> and the text of that element).
>>
>> Currently I have a solution that works, but I think it is terribly
>> inefficient and I hope you can make any suggestions to improve it.
>>
>> I have a JS library that calculates all those values and writes them to
>> "input hidden" form fields in my .tml
>>
>> Then I used the ZoneUpdater mixin:
>>
>> http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/onevent
>>
>> I modified ZoneUpdater.java by adding a List attribute. That list will
>> contain the ids of the "input hidden fields" as you can see below.
>>
>> Then, in the TML file, instead of
>>
>> |<input t:type="TextField" t:id="firstName" t:mixins="zoneUpdater"
>> t:clientEvent="keyup" t:event="firstNameChanged" t:zone="nameZone" /><br/>|
>>
>> I have
>>
>> <p class="paragraph" t:type="any" t:mixins="zoneUpdater"
>> ZoneUpdater.clientEvent="mousemove" ZoneUpdater.event="track"
>>            ZoneUpdater.zone="textZone"
>> ZoneUpdater.fields="['documentHeightVal', 'documentWidthVal',
>> 'windowHeightVal',
>>            'windowWidthVal', 'windowOffsetYVal', 'windowOffsetXVal',
>> 'mouseYVal','mouseXVal', 'domPathVal',
>> 'overTextVal']">${currentParagraph}</p>
>>
>> then in zone-updater.js I add all those values to the URL.
>>
>> Finally, in my page file, the onTrack() method is executed.
>>
>> The problem here is that onActivate() is also being exectued, and
>> onActivate() has a lot of stuff that I want to execute only once (when
>> the page loads) and not every time the user moves the mouse.
>>
>> Is there any other solution that does not trigger onActivate() every
>> time that the user moves the mouse on a component?
>>
>> Regards,
>>
>> Phy.
>>
>>
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Phyambre
Ah, sorry,

I have to take it back, because if I move code from onActivate() to
setupRender(), then onSubmit() crashes.

The only alternative is that onTrack() would not execute onActivate(),
but it seems that is impossible.

I will now check Daniel's solution.

Regards,
Phy

El 07/04/17 a las 17:40, Phyambre escribió:

> Hi Geoff,
>
> Thanks, it helped a lot.
>
> I actually had some problems because I have several texts to show, so
> the onActivate() was deciding the id of the text shown on the current
> screen.
>
> The onTrack() later needs to annotate the tracking values together with
> the text id.
>
> But then I moved all the code of the onActivate() to the setupRender()
> and passed the text id as a parameter of the ZoneUpdater
> (ZoneUpdater.userStageId="${userStage.userStageId}"):
>
> <p class="paragraph" t:type="any" t:mixins="zoneUpdater" ZoneUpdater.clientEvent="mousemove" ZoneUpdater.event="track"
> ZoneUpdater.zone="textZone" ZoneUpdater.userStageId="${userStage.userStageId}" ZoneUpdater.fields="['documentHeightVal',
> 'documentWidthVal', 'windowHeightVal', 'windowWidthVal', 'windowOffsetYVal', 'windowOffsetXVal', 'mouseYVal',
> 'mouseXVal', 'domPathVal', 'overTextVal']">${currentParagraph}</p>
>
> That worked. I tried to do the same thing passing the text id to another
> input hidden like the rest, but it didn't work.
>
> Now I have to do some extra work in the onTrack(), but it is not as much
> as the one being done in the setupRender().
>
> El 07/04/17 a las 15:12, JumpStart escribió:
>> I’ll answer it this way:
>>
>> http://jumpstart.doublenegative.com.au/jumpstart7/examples/navigation/onactivateandonpassivate/3 <http://jumpstart.doublenegative.com.au/jumpstart7/examples/navigation/onactivateandonpassivate/3>
>>
>> Hope this helps,
>>
>> Geoff
>>
>>> On 7 Apr 2017, at 2:07 PM, Phyambre <[hidden email]> wrote:
>>>
>>> Hi,
>>>
>>> I would like to do mouse tracking with tapestry (know the coordinates of
>>> the mouse, the path of the DOM tree to the element that is being pointed
>>> and the text of that element).
>>>
>>> Currently I have a solution that works, but I think it is terribly
>>> inefficient and I hope you can make any suggestions to improve it.
>>>
>>> I have a JS library that calculates all those values and writes them to
>>> "input hidden" form fields in my .tml
>>>
>>> Then I used the ZoneUpdater mixin:
>>>
>>> http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/onevent
>>>
>>> I modified ZoneUpdater.java by adding a List attribute. That list will
>>> contain the ids of the "input hidden fields" as you can see below.
>>>
>>> Then, in the TML file, instead of
>>>
>>> |<input t:type="TextField" t:id="firstName" t:mixins="zoneUpdater"
>>> t:clientEvent="keyup" t:event="firstNameChanged" t:zone="nameZone" /><br/>|
>>>
>>> I have
>>>
>>> <p class="paragraph" t:type="any" t:mixins="zoneUpdater"
>>> ZoneUpdater.clientEvent="mousemove" ZoneUpdater.event="track"
>>>            ZoneUpdater.zone="textZone"
>>> ZoneUpdater.fields="['documentHeightVal', 'documentWidthVal',
>>> 'windowHeightVal',
>>>            'windowWidthVal', 'windowOffsetYVal', 'windowOffsetXVal',
>>> 'mouseYVal','mouseXVal', 'domPathVal',
>>> 'overTextVal']">${currentParagraph}</p>
>>>
>>> then in zone-updater.js I add all those values to the URL.
>>>
>>> Finally, in my page file, the onTrack() method is executed.
>>>
>>> The problem here is that onActivate() is also being exectued, and
>>> onActivate() has a lot of stuff that I want to execute only once (when
>>> the page loads) and not every time the user moves the mouse.
>>>
>>> Is there any other solution that does not trigger onActivate() every
>>> time that the user moves the mouse on a component?
>>>
>>> Regards,
>>>
>>> Phy.
>>>
>>>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Phyambre
In reply to this post by Daniel Jue
Hi Daniel,

I checked your project.

My JavaScript libraries are similar to yours, also fire and forget and
also transparent to the server.

My problem is when I manage the AJAX events in Tapestry.

Regards,

Phy

El 07/04/17 a las 15:29, Daniel Jue escribió:

> Hi, I'm not sure this is what you need, but here is a library we used
> during a DARPA program to collect UI statistics including hovering, etc:
> https://github.com/draperlaboratory/User-ALE
>
> On the browser side it's fire and forget, and there is a separate server
> set up to collect the stats information (i.e. it is transparent to your web
> app/tapestry app server)
>
> You the developer add in the places you want events to fire, such as on
> buttons, or mouse tracking in general.
>
> Here's a demo page:
> http://draperlaboratory.github.io/user-ale/test_app/index.html
>
>
>
> On Fri, Apr 7, 2017 at 2:12 AM, JumpStart <
> [hidden email]> wrote:
>
>> I’ll answer it this way:
>>
>>         http://jumpstart.doublenegative.com.au/jumpstart7/examples/
>> navigation/onactivateandonpassivate/3 <http://jumpstart.
>> doublenegative.com.au/jumpstart7/examples/navigation/
>> onactivateandonpassivate/3>
>>
>> Hope this helps,
>>
>> Geoff
>>
>>> On 7 Apr 2017, at 2:07 PM, Phyambre <[hidden email]> wrote:
>>>
>>> Hi,
>>>
>>> I would like to do mouse tracking with tapestry (know the coordinates of
>>> the mouse, the path of the DOM tree to the element that is being pointed
>>> and the text of that element).
>>>
>>> Currently I have a solution that works, but I think it is terribly
>>> inefficient and I hope you can make any suggestions to improve it.
>>>
>>> I have a JS library that calculates all those values and writes them to
>>> "input hidden" form fields in my .tml
>>>
>>> Then I used the ZoneUpdater mixin:
>>>
>>> http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/onevent
>>>
>>> I modified ZoneUpdater.java by adding a List attribute. That list will
>>> contain the ids of the "input hidden fields" as you can see below.
>>>
>>> Then, in the TML file, instead of
>>>
>>> |<input t:type="TextField" t:id="firstName" t:mixins="zoneUpdater"
>>> t:clientEvent="keyup" t:event="firstNameChanged" t:zone="nameZone"
>> /><br/>|
>>> I have
>>>
>>> <p class="paragraph" t:type="any" t:mixins="zoneUpdater"
>>> ZoneUpdater.clientEvent="mousemove" ZoneUpdater.event="track"
>>>            ZoneUpdater.zone="textZone"
>>> ZoneUpdater.fields="['documentHeightVal', 'documentWidthVal',
>>> 'windowHeightVal',
>>>            'windowWidthVal', 'windowOffsetYVal', 'windowOffsetXVal',
>>> 'mouseYVal','mouseXVal', 'domPathVal',
>>> 'overTextVal']">${currentParagraph}</p>
>>>
>>> then in zone-updater.js I add all those values to the URL.
>>>
>>> Finally, in my page file, the onTrack() method is executed.
>>>
>>> The problem here is that onActivate() is also being exectued, and
>>> onActivate() has a lot of stuff that I want to execute only once (when
>>> the page loads) and not every time the user moves the mouse.
>>>
>>> Is there any other solution that does not trigger onActivate() every
>>> time that the user moves the mouse on a component?
>>>
>>> Regards,
>>>
>>> Phy.
>>>
>>>
>>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Thiago H. de Paula Figueiredo
I suggest you to not use form submissions for this. Also, take a look at
https://tapestry.apache.org/ajax-and-zones.html, session Invoking
server-side event handler methods from JavaScript, which shows how to
easily call server-side event handlers from JavaScript from Tapestry 5.4.2
(which should be released soon) and on.

On Fri, Apr 7, 2017 at 6:35 AM, Phyambre <[hidden email]> wrote:

> Hi Daniel,
>
> I checked your project.
>
> My JavaScript libraries are similar to yours, also fire and forget and
> also transparent to the server.
>
> My problem is when I manage the AJAX events in Tapestry.
>
> Regards,
>
> Phy
>
> El 07/04/17 a las 15:29, Daniel Jue escribió:
> > Hi, I'm not sure this is what you need, but here is a library we used
> > during a DARPA program to collect UI statistics including hovering, etc:
> > https://github.com/draperlaboratory/User-ALE
> >
> > On the browser side it's fire and forget, and there is a separate server
> > set up to collect the stats information (i.e. it is transparent to your
> web
> > app/tapestry app server)
> >
> > You the developer add in the places you want events to fire, such as on
> > buttons, or mouse tracking in general.
> >
> > Here's a demo page:
> > http://draperlaboratory.github.io/user-ale/test_app/index.html
> >
> >
> >
> > On Fri, Apr 7, 2017 at 2:12 AM, JumpStart <
> > [hidden email]> wrote:
> >
> >> I’ll answer it this way:
> >>
> >>         http://jumpstart.doublenegative.com.au/jumpstart7/examples/
> >> navigation/onactivateandonpassivate/3 <http://jumpstart.
> >> doublenegative.com.au/jumpstart7/examples/navigation/
> >> onactivateandonpassivate/3>
> >>
> >> Hope this helps,
> >>
> >> Geoff
> >>
> >>> On 7 Apr 2017, at 2:07 PM, Phyambre <[hidden email]> wrote:
> >>>
> >>> Hi,
> >>>
> >>> I would like to do mouse tracking with tapestry (know the coordinates
> of
> >>> the mouse, the path of the DOM tree to the element that is being
> pointed
> >>> and the text of that element).
> >>>
> >>> Currently I have a solution that works, but I think it is terribly
> >>> inefficient and I hope you can make any suggestions to improve it.
> >>>
> >>> I have a JS library that calculates all those values and writes them to
> >>> "input hidden" form fields in my .tml
> >>>
> >>> Then I used the ZoneUpdater mixin:
> >>>
> >>> http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/onevent
> >>>
> >>> I modified ZoneUpdater.java by adding a List attribute. That list will
> >>> contain the ids of the "input hidden fields" as you can see below.
> >>>
> >>> Then, in the TML file, instead of
> >>>
> >>> |<input t:type="TextField" t:id="firstName" t:mixins="zoneUpdater"
> >>> t:clientEvent="keyup" t:event="firstNameChanged" t:zone="nameZone"
> >> /><br/>|
> >>> I have
> >>>
> >>> <p class="paragraph" t:type="any" t:mixins="zoneUpdater"
> >>> ZoneUpdater.clientEvent="mousemove" ZoneUpdater.event="track"
> >>>            ZoneUpdater.zone="textZone"
> >>> ZoneUpdater.fields="['documentHeightVal', 'documentWidthVal',
> >>> 'windowHeightVal',
> >>>            'windowWidthVal', 'windowOffsetYVal', 'windowOffsetXVal',
> >>> 'mouseYVal','mouseXVal', 'domPathVal',
> >>> 'overTextVal']">${currentParagraph}</p>
> >>>
> >>> then in zone-updater.js I add all those values to the URL.
> >>>
> >>> Finally, in my page file, the onTrack() method is executed.
> >>>
> >>> The problem here is that onActivate() is also being exectued, and
> >>> onActivate() has a lot of stuff that I want to execute only once (when
> >>> the page loads) and not every time the user moves the mouse.
> >>>
> >>> Is there any other solution that does not trigger onActivate() every
> >>> time that the user moves the mouse on a component?
> >>>
> >>> Regards,
> >>>
> >>> Phy.
> >>>
> >>>
> >>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>


--
Thiago
Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Phyambre
Hi Thiago,

Thanks for your email.

1) I am not using form submissions for that. I am using input hidden
fields as temporary variables because the input hidden seem to be
visible from zone-updater.js while the javascript library (not module) I
am using for the mouse tracking is not, and I don't know why. Should I
include the library in the "require" of the zone-updater.js? how can I
do that if it is not in META-INF/assets?

2) I read the document you suggest. It seems interesting but I can't
fully understand it. I think you mean this snippet.

require(["t5/core/ajax", "jquery"], function (ajax, $) {
    // Creating a callback to be invoked with <p id="result"> is clicked.
    $('#result').click(function() {
        ajax('answer', {
            element: $('#result'), // This doesn't need to be the same
element as the one two lines above
            // Callback called when the request is finished.
            // response.json is the object returned by the event handler
method
            success: function(response) {
                $('#result').text(response.json.origin);
            }
        });
    });
});


How can I transform it to call my onTrack method when on mouse move
occurs on any p of a certain class "trackedParagraph"? I don't need to
process any response since onTrack just saves things in a DB. Maybe
something like this?

require(["t5/core/ajax", "jquery"], function (ajax, $) {
    $('p.trackedParagraph').mousemove(function() {
        ajax('track'), {
                mouseX: $('#mouseXField'),
                mouseY: $('#mouseYField'),
                ...
                queryParameterName: $('#fieldName')
        });
    });
});

Would something like that work? Sorry, maybe my problem is that I am not
familiar with jQuery notation.

And more important. Will this avoid calling onActivate() again on the
page? Because my current solution seems to work, but the biggest
efficiency problem is that every AJAX call executes onActivate().


El 08/04/17 a las 00:37, Thiago H. de Paula Figueiredo escribió:

> I suggest you to not use form submissions for this. Also, take a look at
> https://tapestry.apache.org/ajax-and-zones.html, session Invoking
> server-side event handler methods from JavaScript, which shows how to
> easily call server-side event handlers from JavaScript from Tapestry 5.4.2
> (which should be released soon) and on.
>
> On Fri, Apr 7, 2017 at 6:35 AM, Phyambre <[hidden email]> wrote:
>
>> Hi Daniel,
>>
>> I checked your project.
>>
>> My JavaScript libraries are similar to yours, also fire and forget and
>> also transparent to the server.
>>
>> My problem is when I manage the AJAX events in Tapestry.
>>
>> Regards,
>>
>> Phy
>>
>> El 07/04/17 a las 15:29, Daniel Jue escribió:
>>> Hi, I'm not sure this is what you need, but here is a library we used
>>> during a DARPA program to collect UI statistics including hovering, etc:
>>> https://github.com/draperlaboratory/User-ALE
>>>
>>> On the browser side it's fire and forget, and there is a separate server
>>> set up to collect the stats information (i.e. it is transparent to your
>> web
>>> app/tapestry app server)
>>>
>>> You the developer add in the places you want events to fire, such as on
>>> buttons, or mouse tracking in general.
>>>
>>> Here's a demo page:
>>> http://draperlaboratory.github.io/user-ale/test_app/index.html
>>>
>>>
>>>
>>> On Fri, Apr 7, 2017 at 2:12 AM, JumpStart <
>>> [hidden email]> wrote:
>>>
>>>> I’ll answer it this way:
>>>>
>>>>         http://jumpstart.doublenegative.com.au/jumpstart7/examples/
>>>> navigation/onactivateandonpassivate/3 <http://jumpstart.
>>>> doublenegative.com.au/jumpstart7/examples/navigation/
>>>> onactivateandonpassivate/3>
>>>>
>>>> Hope this helps,
>>>>
>>>> Geoff
>>>>
>>>>> On 7 Apr 2017, at 2:07 PM, Phyambre <[hidden email]> wrote:
>>>>>
>>>>> Hi,
>>>>>
>>>>> I would like to do mouse tracking with tapestry (know the coordinates
>> of
>>>>> the mouse, the path of the DOM tree to the element that is being
>> pointed
>>>>> and the text of that element).
>>>>>
>>>>> Currently I have a solution that works, but I think it is terribly
>>>>> inefficient and I hope you can make any suggestions to improve it.
>>>>>
>>>>> I have a JS library that calculates all those values and writes them to
>>>>> "input hidden" form fields in my .tml
>>>>>
>>>>> Then I used the ZoneUpdater mixin:
>>>>>
>>>>> http://jumpstart.doublenegative.com.au/jumpstart/examples/ajax/onevent
>>>>>
>>>>> I modified ZoneUpdater.java by adding a List attribute. That list will
>>>>> contain the ids of the "input hidden fields" as you can see below.
>>>>>
>>>>> Then, in the TML file, instead of
>>>>>
>>>>> |<input t:type="TextField" t:id="firstName" t:mixins="zoneUpdater"
>>>>> t:clientEvent="keyup" t:event="firstNameChanged" t:zone="nameZone"
>>>> /><br/>|
>>>>> I have
>>>>>
>>>>> <p class="paragraph" t:type="any" t:mixins="zoneUpdater"
>>>>> ZoneUpdater.clientEvent="mousemove" ZoneUpdater.event="track"
>>>>>            ZoneUpdater.zone="textZone"
>>>>> ZoneUpdater.fields="['documentHeightVal', 'documentWidthVal',
>>>>> 'windowHeightVal',
>>>>>            'windowWidthVal', 'windowOffsetYVal', 'windowOffsetXVal',
>>>>> 'mouseYVal','mouseXVal', 'domPathVal',
>>>>> 'overTextVal']">${currentParagraph}</p>
>>>>>
>>>>> then in zone-updater.js I add all those values to the URL.
>>>>>
>>>>> Finally, in my page file, the onTrack() method is executed.
>>>>>
>>>>> The problem here is that onActivate() is also being exectued, and
>>>>> onActivate() has a lot of stuff that I want to execute only once (when
>>>>> the page loads) and not every time the user moves the mouse.
>>>>>
>>>>> Is there any other solution that does not trigger onActivate() every
>>>>> time that the user moves the mouse on a component?
>>>>>
>>>>> Regards,
>>>>>
>>>>> Phy.
>>>>>
>>>>>
>>>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: [hidden email]
>> For additional commands, e-mail: [hidden email]
>>
>>
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Thiago H. de Paula Figueiredo
On Fri, Apr 7, 2017 at 1:12 PM, Phyambre <[hidden email]> wrote:

> Hi Thiago,
>

Hi!


> Thanks for your email.
>
> 1) I am not using form submissions for that. I am using input hidden
> fields as temporary variables because the input hidden seem to be
> visible from zone-updater.js while the javascript library (not module) I
> am using for the mouse tracking is not, and I don't know why. Should I
> include the library in the "require" of the zone-updater.js? how can I
> do that if it is not in META-INF/assets?
>

Most probably yes. At least it makes everything consistent.


> 2) I read the document you suggest. It seems interesting but I can't
> fully understand it. I think you mean this snippet.
>
> How can I transform it to call my onTrack method when on mouse move
> occurs on any p of a certain class "trackedParagraph"? I don't need to
> process any response since onTrack just saves things in a DB. Maybe
> something like this?
>
> require(["t5/core/ajax", "jquery"], function (ajax, $) {
>     $('p.trackedParagraph').mousemove(function() {
>         ajax('track'), {
>                 mouseX: $('#mouseXField'),
>                 mouseY: $('#mouseYField'),
>                 ...
>                 queryParameterName: $('#fieldName')
>         });
>     });
> });
>
> Would something like that work? Sorry, maybe my problem is that I am not
> familiar with jQuery notation.
>

Yes, I believe you're in the right path, except for a little error in the
line below:
ajax('track'), {
It should be
ajax('track', {

And adding an element: null or element: [some element] to the object you're
passing as the second parameter of ajax().


> And more important. Will this avoid calling onActivate() again on the
> page? Because my current solution seems to work, but the biggest
> efficiency problem is that every AJAX call executes onActivate().
>

No. onActivate() is called for every request to the page, regardless if
it's an event or page render one. You need to remove the expensive code
from onActivate(), or at least only call it when needed. You haven't posted
any Java code or pseudocode, so it's hard to help you further.

--
Thiago
Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Phyambre
Hi Thiago,

Thanks for your answer,

In my application each user (identified by a userId in the session) is
assigned a task. Each task has stages which consist of reading a text
and answering a quiz about it. The text and quiz that you are assigned
in each stage is not the same for everybody, but randomly picked among
several candidates (the random number is generated when the task is
assigned to you). So the text and quiz I receive in stage 1 may be
different from the text and quiz you receive in stage 1. Texts and
quizzes are stored in XML files.
The time you have to solve a stage is limited and the time that you have
to complete the whole task is also limited.

We want to track this behaviour of reading the text and solving the
quiz. Now I don't have my code here, but the pseudocode of a stage is
something like this:

public Object onActivate() {
        myTask = getCurrentTaskOfUser(userId);
        if (myTask == null) {
                return ErrorPage.class;
        }
        myCurrentStage = getCurrentStage(task);
        if (stage == null) {
                return TaskFinished.class
        }
        textFile = getTextFile(myCurrentStage,myTask.getRandomNumber());
        text = parseXML(textFile);
}

public Object onSubmit() {
        if (System.currentTimeMillis() > myTask.getDeadline()) {
                return TaskFailedPage.class;
        } else if (System.currentTimeMillis() > myCurrentStage.getDeadline()) {
                return TaskFailedPage.class;
        } else {
                service.saveAnswersOfQuiz();
                service.advanceStage(myTask);
                return Stage.class;
        }
}

public void afterRender() {
        // Add javascript that does forward() to the browser so you can't come
back to this stage by pressing "back" on the browser.
        // Add javascript that shows a chronometer on the screen
        // Add javascript that enables mouse tracking
}

onTrack(@RequestParameter(...) mouseX, @RequestParameter(...) mouseY) {
        trackingService.saveInteraction(myStage, mouseX, mouseY);
}

So if I move the code of the task from onActivate() to setupRender() as
Geoff suggested, I will not have the task on onSubmit() anymore, so I
cannot check whether the user finished before the deadline. A solution
is getting the task from database both on setupRender() and onSubmit(),
but I don't know if this is more efficient than leave the code in
onActivate().

And after much thinking, maybe the onTracking() should stop tracking
when the time is over to avoid unnecessary processing. In that case I
would also need the task and the stage in onTrack().

The point is, I wanted the task and the stage and the text/quiz to be
obtained only once from the database, and kept in memory until the user
finishes the stage. The objects are big and storing them in the session
may be a bit overkill. Maybe make a cache in the server (concurrent
HashMap<userId, currentTask>) is the solution? In principle, the number
of users that can use my app is limited let us say less than 300 so
maybe such a cache is viable.

How do you think?

El 08/04/17 a las 04:43, Thiago H. de Paula Figueiredo escribió:

> On Fri, Apr 7, 2017 at 1:12 PM, Phyambre <[hidden email]> wrote:
>
>> Hi Thiago,
>>
>
> Hi!
>
>
>> Thanks for your email.
>>
>> 1) I am not using form submissions for that. I am using input hidden
>> fields as temporary variables because the input hidden seem to be
>> visible from zone-updater.js while the javascript library (not module) I
>> am using for the mouse tracking is not, and I don't know why. Should I
>> include the library in the "require" of the zone-updater.js? how can I
>> do that if it is not in META-INF/assets?
>>
>
> Most probably yes. At least it makes everything consistent.
>
>
>> 2) I read the document you suggest. It seems interesting but I can't
>> fully understand it. I think you mean this snippet.
>>
>> How can I transform it to call my onTrack method when on mouse move
>> occurs on any p of a certain class "trackedParagraph"? I don't need to
>> process any response since onTrack just saves things in a DB. Maybe
>> something like this?
>>
>> require(["t5/core/ajax", "jquery"], function (ajax, $) {
>>     $('p.trackedParagraph').mousemove(function() {
>>         ajax('track'), {
>>                 mouseX: $('#mouseXField'),
>>                 mouseY: $('#mouseYField'),
>>                 ...
>>                 queryParameterName: $('#fieldName')
>>         });
>>     });
>> });
>>
>> Would something like that work? Sorry, maybe my problem is that I am not
>> familiar with jQuery notation.
>>
>
> Yes, I believe you're in the right path, except for a little error in the
> line below:
> ajax('track'), {
> It should be
> ajax('track', {
>
> And adding an element: null or element: [some element] to the object you're
> passing as the second parameter of ajax().
>
>
>> And more important. Will this avoid calling onActivate() again on the
>> page? Because my current solution seems to work, but the biggest
>> efficiency problem is that every AJAX call executes onActivate().
>>
>
> No. onActivate() is called for every request to the page, regardless if
> it's an event or page render one. You need to remove the expensive code
> from onActivate(), or at least only call it when needed. You haven't posted
> any Java code or pseudocode, so it's hard to help you further.
>

---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Thiago H. de Paula Figueiredo
On Sat, Apr 8, 2017 at 11:13 AM, Phyambre <[hidden email]> wrote:

> Hi Thiago,
>

Hi!

So if I move the code of the task from onActivate() to setupRender() as
> Geoff suggested, I will not have the task on onSubmit() anymore, so I
> cannot check whether the user finished before the deadline. A solution
> is getting the task from database both on setupRender() and onSubmit(),
> but I don't know if this is more efficient than leave the code in
> onActivate().
>

Yes, it is more efficient, because that code will only be called when you
actually need it.


> The point is, I wanted the task and the stage and the text/quiz to be
> obtained only once from the database, and kept in memory until the user
> finishes the stage. The objects are big and storing them in the session
> may be a bit overkill. Maybe make a cache in the server (concurrent
> HashMap<userId, currentTask>) is the solution? In principle, the number
> of users that can use my app is limited let us say less than 300 so
> maybe such a cache is viable.
>

In both cases, you're storing this big object in the process' memory. I'd
go for a cache.

--
Thiago
Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Phyambre
Ok,

So finally I could transform my JS libraries into modules and now
everything is super-modular.

I also replaced mousemove by mouseover because it is less demanding.

When Tapestry 5.4.2 is released and "Invoking server-side event handler
methods from JavaScript" is available, I will replace the ZoneUpdater by
this kind of call.

Everything is running well, so now I am working in the cache, but that
is out of the scope of this question.

Thank you all for your help

Phy


El 10/04/17 a las 23:39, Thiago H. de Paula Figueiredo escribió:

> On Sat, Apr 8, 2017 at 11:13 AM, Phyambre <[hidden email]> wrote:
>
>> Hi Thiago,
>>
> Hi!
>
> So if I move the code of the task from onActivate() to setupRender() as
>> Geoff suggested, I will not have the task on onSubmit() anymore, so I
>> cannot check whether the user finished before the deadline. A solution
>> is getting the task from database both on setupRender() and onSubmit(),
>> but I don't know if this is more efficient than leave the code in
>> onActivate().
>>
> Yes, it is more efficient, because that code will only be called when you
> actually need it.
>
>
>> The point is, I wanted the task and the stage and the text/quiz to be
>> obtained only once from the database, and kept in memory until the user
>> finishes the stage. The objects are big and storing them in the session
>> may be a bit overkill. Maybe make a cache in the server (concurrent
>> HashMap<userId, currentTask>) is the solution? In principle, the number
>> of users that can use my app is limited let us say less than 300 so
>> maybe such a cache is viable.
>>
> In both cases, you're storing this big object in the process' memory. I'd
> go for a cache.
>


---------------------------------------------------------------------
To unsubscribe, e-mail: [hidden email]
For additional commands, e-mail: [hidden email]

Reply | Threaded
Open this post in threaded view
|

Re: Mouse tracking with Tapestry

Daniel Jue
Glad to hear you got everything working!

On Tue, Apr 11, 2017 at 5:09 AM, Phyambre <[hidden email]> wrote:

> Ok,
>
> So finally I could transform my JS libraries into modules and now
> everything is super-modular.
>
> I also replaced mousemove by mouseover because it is less demanding.
>
> When Tapestry 5.4.2 is released and "Invoking server-side event handler
> methods from JavaScript" is available, I will replace the ZoneUpdater by
> this kind of call.
>
> Everything is running well, so now I am working in the cache, but that
> is out of the scope of this question.
>
> Thank you all for your help
>
> Phy
>
>
> El 10/04/17 a las 23:39, Thiago H. de Paula Figueiredo escribió:
> > On Sat, Apr 8, 2017 at 11:13 AM, Phyambre <[hidden email]> wrote:
> >
> >> Hi Thiago,
> >>
> > Hi!
> >
> > So if I move the code of the task from onActivate() to setupRender() as
> >> Geoff suggested, I will not have the task on onSubmit() anymore, so I
> >> cannot check whether the user finished before the deadline. A solution
> >> is getting the task from database both on setupRender() and onSubmit(),
> >> but I don't know if this is more efficient than leave the code in
> >> onActivate().
> >>
> > Yes, it is more efficient, because that code will only be called when you
> > actually need it.
> >
> >
> >> The point is, I wanted the task and the stage and the text/quiz to be
> >> obtained only once from the database, and kept in memory until the user
> >> finishes the stage. The objects are big and storing them in the session
> >> may be a bit overkill. Maybe make a cache in the server (concurrent
> >> HashMap<userId, currentTask>) is the solution? In principle, the number
> >> of users that can use my app is limited let us say less than 300 so
> >> maybe such a cache is viable.
> >>
> > In both cases, you're storing this big object in the process' memory. I'd
> > go for a cache.
> >
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [hidden email]
> For additional commands, e-mail: [hidden email]
>
>
Reply | Threaded
Open this post in threaded view
|

RE: Mouse tracking with Tapestry

Svein-Erik Løken
In reply to this post by Phyambre