Run Java method in Javascript in Freemarker template - javascript

I would like to run method over my Java object in Freemaker template but in Javascript. Could be also directly in Freemarker but I need to run it on click.
I have issue that following method doesnt run:
actual_id.setActual_id(variable) ;
And I have following Java code:
Setting actual_id= new Setting("-");
Map<String, Object> data = new HashMap<>();
data.put("items", items);
data.put("actual_id", actual_id);
public Setting(String actual_id) {
this.actual_id = actual_id;
}
public String getActual_id() {
return actual_id;
}
public void setActual_id(String actual_id) {
this.actual_id = actual_id;
}
This is my Freemaker template:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>function myFunction(variable) {
alert(variable);
actual_id.setActual_id(variable) ;
location.reload();}
</script>
<#list items as item>
<p>${item.name}: ${item.id} <button type="button" id="${item.id}" onclick=myFunction("${item.id}") >Details</button>
</#list>
EDIT1:
I am also trying something like this:
onclick="${actual_id.setActual_id(item.id)}"
but cannot trigger activity from onclick.
EDIT2:
I already almost found solution. Following code executes Java method, I just need to figure out how to quote "variable" to load javasript value into it.
function myFunction(variable) {
alert(variable);
var idd ="${actual_id.setActual_id(variable)}";//here variable value needed
alert(idd);
location.reload();
}

Here is a quote from the Apache FreeMarker Project front-page:
(https://freemarker.apache.org/)
What is Apache FreeMarkerâ„¢?
Apache FreeMarkerâ„¢ is a template engine: a Java library to generate
text output (HTML web pages, e-mails, configuration files, source
code, etc.) based on templates and changing data. Templates are
written in the FreeMarker Template Language (FTL), which is a simple,
specialized language (not a full-blown programming language like PHP).
Usually, a general-purpose programming language (like Java) is used to
prepare the data (issue database queries, do business calculations).
Then, Apache FreeMarker displays that prepared data using templates.
In the template you are focusing on how to present the data, and
outside the template you are focusing on what data to present.
Figure [Photo/Image Not Posted]
This approach is often referred to as the MVC (Model View Controller)
pattern, and is particularly popular for dynamic web pages. It helps
in separating web page designers (HTML authors) from developers (Java
programmers usually). Designers won't face complicated logic in
templates, and can change the appearance of a page without programmers
having to change or recompile code.
While FreeMarker was originally created for generating HTML pages in
MVC web application frameworks, ** it isn't bound to servlets or HTML
or anything web-related.** It's used in non-web application
environments as well.
https://freemarker.apache.org/
I, myself, program Java & JavaScript web-servers on Google Cloud Server all day long. The only way to make a JavaScript function talk to a Java Function is through an HTTP GET / POST call to a Java-Servlet or, also, an old-school JSP Page. Though it says (explicity) right on the top-level domain page of the website that "Freemarker is not bound to Servlets" - that actually means the software classes / package does not have to run inside of a web-environment at all - perhaps on your desktop computer without a web-browser.
What I do know with an extremely high degree of certainty is that communication between the client (on a web-browser) and a server (a web-server) is always done through HTTP GET / POST requests. JSON, AJAX are common for higher communicating large amounts of data. If you expect a JavaScript method to make a call to a Java Class on the back-end, you will need to include a Servlet or JSP class - and the whole 9 yards to boot.
NOTE: I have not used Apache FreeMarker, but I program Java/JavaScript all day long. Judge accordingly! According to the Apache web-site, FreeMarker is of assistance in "programatically or automatically generating the HTML for pages" (which is what C# is good at) - which is actually something I do for my web-site, often, but (alas!) I don't use Apache's product. What that means is FreeMarker can help the generating of HTML more efficiently using Java Classes on the back-end server side ...
But the rules of how Java and Java-Script communicate have not
changed...
Long story short - you must include JavaScript calls such as:
calling a java servlet from javascript
How to send request from javascript to servlet?
How to call servlet from javascript

Related

Running Javascript from Java (but need jQuery, DOM and ajax)

I'm building a web app with Diagram in it.
For the diagram I used jsPlumb library
Link: https://jsplumbtoolkit.com/
One of my requirement is to make Blocks inside the Diagram like flowchart.
And one type of the blocks is a able to be inserted by customizable script.
So, when user double-clicked that block, they can input Javascript code in the textarea and will be executed later.
Here lies my problem :
I able to run the script code very well, when it is still on the front-end side (jsp) using browser using "new Function" from Javascript.
But after the block is saved, the script saved to DB.
And if I need to run it again, then it will be executed from back-end (Java).
Therefore, I used ScriptEngine to run the Javascript.
The problem is ajax, $-sign, console, etc are not recognized from Java.
And I found out later, that ScriptEngine did not support for those kind of things.
So, I wonder is there is any possible way to make these possible ?
I'm open to other alternative idea.
Thank you
Use HtmlUnit Java Library
Sample code
final WebClient webClient = new WebClient(BrowserVersion.CHROME);
final HtmlPage page = webClient.getPage("http://127.0.0.1:9090/mysite");
page.executeJavaScript("$");
webClient.close();
This http://127.0.0.1:9090/mysite can be your local website which already has jquery
You can also inject a script tag on the fly in a blank html page
If your are behind a proxy then
final WebClient webClient = new WebClient(BrowserVersion.CHROME, "proxyhost", 8080);
Alternate Idea
Use Jaunt - Java Web Scraping & JSON Querying Java Library
Sample code and full documentation available in the site

How to load js files during web application startup through nashorn

I am working on an application which loads multiple js files on client side during first hit in browser. It takes quiet a bit of time to load the first page of our application which can be improved using server side rendering.
We are using java and spring in our backend application. So I am looking for a way to load all the js files on server side during application load(server startup) instead of client side. So I removed js file reference from the jsp and I am trying to load the js files using nashorn as below:
#Configuration
public class ConfigureScript {
#Bean
ScriptTemplateConfigurer configurer() {
ScriptTemplateConfigurer configurer = new ScriptTemplateConfigurer();
configurer.setEngineName("nashorn");
configurer.setScripts("/js/common/common.js", "/js/utils/utils.js");
configurer.setRenderFunction("render");
configurer.setSharedEngine(false);
return configurer;
}
}
But somehow this doesn't seems to work for me since application just keeps loading. Can you guys please suggest the problem with above code or some other way to achieve the server side loading of js files?
Also, if you can suggest is there a way to debug whether js files are loaded properly or not?
for debugging I use postman chrome plugin. When server side rendering takes place - hit to the basic url (e.g. "/" or any other supposed) returns the content rather than jsp template.
removing js files from jsp - not sure this is correct. js should handle anyway some users interactions in browser after the rendering on server side, except probably that would be fine if content returned from server is static.
in snipped above - two files are loaded. the way how nashorn works - it builds the entire hierarchy of js objects, required for rendering. Are those files enough? Implementation of "render" function should take the job to render.

Android: modify JS loaded by a local static html based on selection from list in previous activity

Still very much a beginner to Android and Java, so thanks in advance for your patience!
I am trying to find a means of passing a file path (which could be in the form of a simple string or integer) from an activity (in Java) to a WebView (which is rendering a static local html file that is running JS). The issue is complicated by the fact that I am using an AR SDK (Wikitude) and the port to the SDK uses their own customised WebView(which also renders a CameraSurfaceView simultaneously) - controlling their suite is then done in a JS file loaded by the html file.
Any solution is welcome, I am new to Android so don't even know where to begin on this one. In simplest terms, I want to take a chosen option from one activity and use that information to tell my JS file what asset to load/render. If this were a web app you could use some templating to load a dynamic variable into your html (e.g. Using erb in ruby or moustache in JS).
If there is no equivalent for templating Java into a JS file, my current best guess is to write a JSON object using JsonWriter in the activity and subsequently load that file in the JS, if this is indeed the best solution, I am struggling to navigate the internal / external storage of android relative to the assets folder of my app - can anyone shed some light on how I would do that?
I've tried to keep this as general as possible, code can be provided on request.
you can pass chosen option from one activity when you are starting second activity with following code.
//Code to start another activity
Intent intent = new Intent(MainActivity.this, Second_Activity.class);
pass the value with intent
intent.putExtra("choice1", "choice1");
intent.putExtra("choice1", "choice1");
startActivity(intent);
now in second activity onCreate() you can receive these value from intent using following code
String choice1 = getIntent().getStringExtra("choice1");

Passing Value from C++ to Javascript

i have a c++ file which reads values from a sensor and I want to display those values on a website dynamically. So Im looking for a way to pass these values(integers) from my cpp file to an javascript which displays them on the site.
My first, simple try was to write the values into a js file as variables every second from my cpp script. The Js then uses this file as a source and displays its variables on the site:
cpp:
fprintf(file, "var mx=%d, my=%d, mz=%d, ax=%d, ay=%d, az=%d, gx=%d, gy=%d, gz=%d;\n",
imu.raw_m[0], imu.raw_m[1], imu.raw_m[2], // M = Magnetometer
imu.raw_a[0], imu.raw_a[1], imu.raw_a[2], // A = Accelerometer
imu.raw_g[0], imu.raw_g[1], imu.raw_g[2] // G = Gyroscope
);
html/js:
<script src="./imu.js" type="text/javascript"></script>
The Problem now is of course, that I need to refresh the page all the time, because the imu.js file is cached by the website.
I'd rather have a way to directly pass to integers from the cpp file to the js script. I read something about json or Googles V8 script. But I'd like to hear your suggestions first.
By the way, Im running this on a raspi, if this is important.
Thanks for your help
EDIT:
I'm goning to try it with a mysql database, in which my cpp file writes the data from the sensor with Connector/c++ from http://dev.mysql.com/doc/connector-cpp/en/ and my website reads them.
You could compile your C++ code into a Node.js plugin, you can then register a JavaScript function with your plugin which the C++ calls when it updates the value. That way you can pass values directly from C++ into Javascript in a managed and controlled way.
Node.js has the added benefit of being able to host your webpage and do all the Websocket and HTTP stuff that can be a pain in C++.
You do not have to refresh if your script is smart about how to access the data file! In case you do have a webserver at hand: Take care that your data file is accessible by your webserver and then let your script request the file via ajax (link to w3schools)
I'm doing something similar on a BeagleBone Black. With websocketd you can turn pretty much any program into a websocket endpoint and then send data via stdin and stdout commands. This would be a particularly good solution for you since websockets are designed to handle information that's constantly changing.

How do I use javascript variable in LuCI Lua markup?

I am creating an HTML file for use with OpenWrt LuCI web interface. As discussed here: http://luci.subsignal.org/trac/wiki/Documentation/Templates I am using the Lua Markup language to run a Lua function called runDiag and I need to pass the javascript variable option to the runDiag function. I can't figure out how to make this work. I have tried various modifications to the markup inside the displayDiag function without success.
Can anyone help?
Example:
<%-
function runDiag(option)
return option
end
-%>
<script>
function displayDiag() {
var option = document.getElementById('iface').value;
document.getElementById('diag_text').innerHTML = '<%- write (runDiag(option)) -%>';
}
</script>
You can't do this. The Lua template is ran on the server, and the JavaScript code is ran on the client (i.e. web browser). They can't communicate.
The Lua code simply generates an HTML file to send to the client. It doesn't know about JavaScript; it's just some text that it's giving to the client. Here, option refers to a nonexistant Lua variable, which has the value of nil.
Conversely, the JavaScript code has no knowledge of the server-side Lua code. It just gets whatever the server generated. Thus, it only sees this line:
document.getElementById('diag_text').innerHTML = 'nil';
To communicate with the web server, you will need use AJAX or some other protocol.

Categories

Resources