Creating a explorer-like app

Hello,

I want to create an app to help me manage all my datas with Play Scala.

I just can’t understand the interaction between twirl, Javascript and the routes we are creating.

Can yo help me by explaining me how you would do the following feature.
I want to create an input with autoCompletion.
How would you do to update the data available for the autocompletion when you write.

For instance, I wanted to try something like checking if the last pressed key was ‘/’ or ‘’.
But do I have to use javascript or is it possible to call one of our route to achieve this?

Thank you for your answer,

Kind regards,

Quiou

I think you need to look for some tutorials on the different things you want to do and find out how to make it work together. Because the help you want would give a book.

The interaction between twirl, javascript and routes is pretty much the same as most Java web frameworks such as Spring MVC/Boot. Normally, you hit a URL of your app, and the URL is looked up against routes defined in your routes file, which would then be handled by a controller (and the appropriate method). The controller can return anything, e.g. HTML in the case of a normal web page, JSON for REST API, or others…

In the case of returned HTML, Twirl is the default template used. It can contain HTML, assets like images and CSS, as well as Javascripts. So in this sense, it is similar to other template technologies like JSP, Velocity, Freemarker, etc… Once the template is returned and rendered in your browser, if it contains Javascript, then it is executed.

In your case for autocompletion, I think it would go something like:

  1. A twirl template that would render the HTML page from route A
  2. Javscript within the HTML will handle the user key press event. You can code that from scratch or use some Javascript libraries, there are a lot of those
  3. Your Javascript would most likely make a AJAX call to your app as user presses keys, and the AJAX call will hit another route B, and it would return JSON instead of HTML

That would be the general steps, you would of course need to do things like debounce user input in your Javascript so you don’t make an AJAX call for every key press, but those are cherry on the top.

1 Like

Thank you for your answer. That help me understand tha whole thing better.

I’m going to try this out.