[Seaside] JavaScript keypress events

Tue Jan 24 06:12:14 UTC 2023

Thank you Karsten!  I will try this out.

Indeed, what I'm trying to make is kind of an interactive game/fun site, so the speed of keypresses should be OK (it will eat only the first).  And I will avoid having the server process each keypress.  

I plan to use Seaside for session management, rendering, app flow, and persistence, because I already have experience using Seaside for this and hope it will be a rapid development.  

It's wise advice to avoid transferring much over the network, which is why I might decide to wait on sharing the whole 'game board' to the server (via ajax) until the user hits 'save' or 'share' or similar, rather than each time a 'square' on the board changes.

Thanks again!
Tim

> On Jan 22, 2023, at 9:41 PM, Karsten Kusche <karsten at heeg.de> wrote:
> 
> Hi Tim,
> 
> i don’t know what you’re trying to achieve but there some things you may need to consider:
> - key-events happen fast! If an experienced user is typing, there’re a ton of events happening in zero time
> - internet is slow, if you process every single event by making a request to a server, your webpage will be dead-slow
> - using localhost is fast, so during development this issue may actually not appear like a problem
> - writing javascript in Smalltalk makes things unnecessarily complicated
> 
> What you could try to do:
> - in your file-library add a javascript file that contains your javascript code
> - this code is easier to write because you can just write normal javascript that you can find on the internet in every helpful corner
> - you can call this javascript code easily via smalltalk by using Seaside’s Javascript-Syntax like you already did
> - the difference is that you keep the amount of code that you’re writing in Seaside’s Javascript-Syntax to a minimum.
> Here’s a simple example of how you could write your javascript file:
> 
> jQuery(function($){
> // create a dummy callback
> var myCallback = function(arg){
> console.log("callback is triggered, but no callback was registered");
> };
> 
> // register a global function where a new callback can be regitered
> window.mySpecialRegisterFunction = function(callback){
> myCallback = callback;
> }
> 
> $(document).on("keydown",function(event){
> console.log("keydown just happened at:",event.target);
> 
> // here it doesn’t matter what myCallback actually does. It defaults to the function at the top, but it could already be overridden with a function provided by Seaside
> myCallback("yay");
> });
> });
> 
> What this code does is the following:
> It registers a on-ready-function via jQuery, by calling the jQuery function with a function as argument. Inside this function it’s safe to use $ as a reference to the jQuery function because $ is used as name of the parameter and jQuery passes itself as argument. That’s basically done for two reasons: $ is easier to use than „jQuery“ but other libraries may also use $. This call makes it explicit what’s what.
> The on-ready-function is called when everything’s „ready“, so your DOM is complete and you’re safe to refer to elements in your DOM. If you don’t use an on-ready-function, your code is executed right away, and the DOM is only complete until the point in <head> where your script is referred.
> 
> By declaring a global register-function you declared an API that you can call from Smalltalk: 
> html document addLoadScript: ( (html javascript alias: #window) call: #mySpecialRegisterFunction with: (html jQuery ajax script:[:script | ]) asFunction)
> 
> This part at the end, where i created an ajax object and converted it into a function, that’s what’s being passed to mySpecialRegisterFunction() and there you can do whatever you need to register a callback, maybe retrieve parameters or what not.
> 
> Kind Regards
> Karsten
> 
> — 
> 
> Georg Heeg eK
> Wallstraße 22
> 06366 Köthen
> 
> Tel.: 03496/214328
> FAX: 03496/214712
> Amtsgericht Dortmund HRA 12812
> 
> 
> Am 22. Januar 2023 um 21:11:45, Tim Johnson (digit at sonic.net <mailto:digit at sonic.net>) schrieb:
> 
>> Hi again,
>> 
>> OK, I can print the keycode using:
>> 
>> html document addLoadScript: ( (html jQuery this) onKeyDown: (
>> html javascript logger log: (html jQuery event access: 
>> 'which') ) ).
>> 
>> Hooray!
>> 
>> On Sun, 22 Jan 2023, Tim Johnson wrote:
>> 
>> > Hi Seasiders,
>> >
>> > I'm beginning to use Seaside's JavaScript integrations a bit. I've avoided 
>> > JavaScript all these years, but I think it's necessary for my current 
>> > project. The project will use the computer/phone keyboard for interaction.
>> >
>> > I've had my first success by attaching an event listener to keydown as 
>> > follows:
>> >
>> > renderContentOn: html
>> >
>> > html document addLoadScript: ( (html jQuery this) onKeyDown: ( html 
>> > javascript logger log: 'keydown' ) ) .
>> >
>> >
>> >
>> > I understand this is about as basic as it gets, but I'm still overjoyed at 
>> > this success. Interacting with the keyboard in a web app is something I've 
>> > wanted to do for years.
>> >
>> > The next steps for me would be to:
>> >
>> > 1) print what the keycode is, in the console log above, instead of just 
>> > 'keydown'. How could I get event details in a snippet like the above? Is 
>> > this possible without AJAX or writing raw JavaScript?
>> >
>> > 2) My app will need to know which element on the page is being 'hovered' over 
>> > or has focus when the keypress event arrives. I can imagine a few possible 
>> > ways of doing this...
>> >
>> > 2a) I may need to add <input> tags on my page, so when one gets 
>> > tapped/activated by someone using the app on a phone, the keyboard will pop 
>> > up. The <input> tag/element could then be what is listening for 
>> > keydown/keyup/keypress events, instead of the base document. (But I don't 
>> > want actual text input boxes.)
>> >
>> > 2b) using jQuery to search the DOM for the element that current has hover 
>> > and/or focus
>> >
>> >
>> > I'll need to move on to AJAX and passengers next. Unfortunately the 
>> > documentation[1] on these subjects seems to remain unwritten. Searching the 
>> > mailing list might be the best way to learn...? I also appreciate the 
>> > "jQuery Functional Test Suite" in the image, but am sometimes wishing for 
>> > something more... (I am open to the idea of writing down my adventures as 
>> > potential help to others, as a potential #webruary project...)
>> >
>> > [1] older homes of book: https://book.seaside.st/book/web-20/jquery/ajax <https://book.seaside.st/book/web-20/jquery/ajax>
>> > https://rmod-files.lille.inria.fr/FreeBooks/SeasideBook/2014-07-16-seaside.pdf <https://rmod-files.lille.inria.fr/FreeBooks/SeasideBook/2014-07-16-seaside.pdf>
>> >
>> > newer home of book:
>> >
>> > https://github.com/SquareBracketAssociates/DynamicWebDevelopmentWithSeaside/releases/tag/continuous <https://github.com/SquareBracketAssociates/DynamicWebDevelopmentWithSeaside/releases/tag/continuous>
>> >
>> >
>> >
>> > Appreciate any help or insight from folks on the list.
>> >
>> > Thanks,
>> > Tim
>> >
>> > _______________________________________________
>> > seaside mailing list
>> > seaside at lists.squeakfoundation.org <mailto:seaside at lists.squeakfoundation.org>
>> > http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside <http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside>
>> >
>> >
>> _______________________________________________
>> seaside mailing list
>> seaside at lists.squeakfoundation.org <mailto:seaside at lists.squeakfoundation.org>
>> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside <http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.squeakfoundation.org/pipermail/seaside/attachments/20230123/f0ac0fb5/attachment-0001.html>