[Seaside] JavaScript keypress events

Mon Jan 23 05:41:37 UTC 2023

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://rmod-files.lille.inria.fr/FreeBooks/SeasideBook/2014-07-16-seaside.pdf
>
> newer home of book:
>
> 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
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
_______________________________________________
seaside mailing list
seaside at lists.squeakfoundation.org
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/266f2f8d/attachment-0001.html>