<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>body{font-family:Helvetica,Arial;font-size:13px}</style>
</head>
<body>
<div style="font-family:Helvetica,Arial;font-size:13px; ">Hi Tim,</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">i don’t know what you’re trying to achieve but there some things you may need to consider:</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>- key-events happen fast! If an experienced user is typing, there’re a ton of events happening in zero time</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>- internet is slow, if you process every single event by making a request to a server, your webpage will be dead-slow</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>- using localhost is fast, so during development this issue may actually not appear like a problem</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>- writing javascript in Smalltalk makes things unnecessarily complicated</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">What you could try to do:</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>- in your file-library add a javascript file that contains your javascript code</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>- this code is easier to write because you can just write normal javascript that you can find on the internet in every helpful corner</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>- you can call this javascript code easily via smalltalk by using Seaside’s Javascript-Syntax like you already did</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>- the difference is that you keep the amount of code that you’re writing in Seaside’s Javascript-Syntax to a minimum.</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span></div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">Here’s a simple example of how you could write your javascript file:</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">jQuery(function($){</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>// create a dummy callback</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>var myCallback = function(arg){</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>console.log("callback is triggered, but no callback was registered");</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>};</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>// register a global function where a new callback can be regitered</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>window.mySpecialRegisterFunction = function(callback){</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>myCallback = callback;</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>}<span class="Apple-tab-span" style="white-space:pre">
</span></div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>$(document).on("keydown",function(event){</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>console.log("keydown just happened at:",event.target);</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>// 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</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>myCallback("yay");</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>});</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">});</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">What this code does is the following:</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">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.</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">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.</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">By declaring a global register-function you declared an API that you can call from Smalltalk: </div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><span class="Apple-tab-span" style="white-space:pre"></span>html document addLoadScript: ( (html javascript alias: #window) call: #mySpecialRegisterFunction with: (html jQuery ajax script:[:script |
]) asFunction)</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">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.</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">Kind Regards</div>
<div style="font-family:Helvetica,Arial;font-size:13px; ">Karsten</div>
<div style="font-family:Helvetica,Arial;font-size:13px; "><br>
</div>
<div class="gmail_signature">
<div>— </div>
<div><br>
<span style="white-space: pre-wrap; font-family: -apple-system; font-size: 14px;">Georg Heeg eK</span></div>
<div>
<div class="gmail_signature amz_quote_hidden" style="font-family: -apple-system; font-size: 14px;">
<pre style="white-space: pre-wrap; word-wrap: break-word;">Wallstraße 22
06366 Köthen
Tel.: 03496/214328
FAX: 03496/214712
Amtsgericht Dortmund HRA 12812</pre>
<div><br>
</div>
</div>
</div>
</div>
<br>
<p class="airmail_on">Am 22. Januar 2023 um 21:11:45, Tim Johnson (<a href="mailto:digit@sonic.net">digit@sonic.net</a>) schrieb:</p>
<blockquote type="cite" class="clean_bq"><span>
<div>
<div></div>
<div>Hi again,<br>
<br>
OK, I can print the keycode using:<br>
<br>
html document addLoadScript: ( (html jQuery this) onKeyDown: (<br>
html javascript logger log: (html jQuery event access: <br>
'which') ) ).<br>
<br>
Hooray!<br>
<br>
On Sun, 22 Jan 2023, Tim Johnson wrote:<br>
<br>
> Hi Seasiders,<br>
><br>
> I'm beginning to use Seaside's JavaScript integrations a bit. I've avoided <br>
> JavaScript all these years, but I think it's necessary for my current <br>
> project. The project will use the computer/phone keyboard for interaction.<br>
><br>
> I've had my first success by attaching an event listener to keydown as <br>
> follows:<br>
><br>
> renderContentOn: html<br>
><br>
> html document addLoadScript: ( (html jQuery this) onKeyDown: ( html <br>
> javascript logger log: 'keydown' ) ) .<br>
><br>
><br>
><br>
> I understand this is about as basic as it gets, but I'm still overjoyed at <br>
> this success. Interacting with the keyboard in a web app is something I've <br>
> wanted to do for years.<br>
><br>
> The next steps for me would be to:<br>
><br>
> 1) print what the keycode is, in the console log above, instead of just <br>
> 'keydown'. How could I get event details in a snippet like the above? Is <br>
> this possible without AJAX or writing raw JavaScript?<br>
><br>
> 2) My app will need to know which element on the page is being 'hovered' over <br>
> or has focus when the keypress event arrives. I can imagine a few possible <br>
> ways of doing this...<br>
><br>
> 2a) I may need to add <input> tags on my page, so when one gets <br>
> tapped/activated by someone using the app on a phone, the keyboard will pop <br>
> up. The <input> tag/element could then be what is listening for <br>
> keydown/keyup/keypress events, instead of the base document. (But I don't <br>
> want actual text input boxes.)<br>
><br>
> 2b) using jQuery to search the DOM for the element that current has hover <br>
> and/or focus<br>
><br>
><br>
> I'll need to move on to AJAX and passengers next. Unfortunately the <br>
> documentation[1] on these subjects seems to remain unwritten. Searching the <br>
> mailing list might be the best way to learn...? I also appreciate the <br>
> "jQuery Functional Test Suite" in the image, but am sometimes wishing for <br>
> something more... (I am open to the idea of writing down my adventures as <br>
> potential help to others, as a potential #webruary project...)<br>
><br>
> [1] older homes of book: https://book.seaside.st/book/web-20/jquery/ajax<br>
> https://rmod-files.lille.inria.fr/FreeBooks/SeasideBook/2014-07-16-seaside.pdf<br>
><br>
> newer home of book:<br>
><br>
> https://github.com/SquareBracketAssociates/DynamicWebDevelopmentWithSeaside/releases/tag/continuous<br>
><br>
><br>
><br>
> Appreciate any help or insight from folks on the list.<br>
><br>
> Thanks,<br>
> Tim<br>
><br>
> _______________________________________________<br>
> seaside mailing list<br>
> seaside@lists.squeakfoundation.org<br>
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside<br>
><br>
><br>
_______________________________________________<br>
seaside mailing list<br>
seaside@lists.squeakfoundation.org<br>
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside<br>
</div>
</div>
</span></blockquote>
</body>
</html>