GWT开发——java 与 js 通过 jsni 相互调用

2024-05-14 10:38
文章标签 java 开发 js 调用 相互 gwt jsni

本文主要是介绍GWT开发——java 与 js 通过 jsni 相互调用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1. java通过jsni调用内部js

 

  1.         Button button = new Button("java调用内部jsni的js方法");  
  2.         button.addClickHandler(new ClickHandler() {  
  3.               
  4.             @Override  
  5.             public void onClick(ClickEvent event) {  
  6.                 //gwt中java调用js方法  
  7.                 execute("js方法被调用");  
  8.                   
  9.             }  
  10.         });  
  11. /** 
  12.      * JSNI方法 
  13.      * @param id 
  14.      */  
  15.     public static native void execute(String str) /*-{ 
  16.         alert(str); 
  17.     }-*/;  

 

 

 

 

2. 内部js通过jsni调用java方法

 

 

  1. Button button1 = new Button("内部jsni的js调用java方法");  
  2.         button1.addClickHandler(new ClickHandler() {  
  3.               
  4.             @Override  
  5.             public void onClick(ClickEvent event) {  
  6.                 //gwt中java调用js方法  
  7.                 executeJs("java方法被调用");  
  8.                   
  9.             }  
  10.         });  
  11.     /** 
  12.      * JSNI方法,  里面调用java方法 javaAlert 
  13.      * @param id 
  14.      */  
  15.     public static native void executeJs(String str) /*-{ 
  16.         @com.hw.client.TestCall::javaAlert(Ljava/lang/String;)(str); 
  17.     }-*/;  

 

 

 

 

3.gwt中java方法调用外部js

 

在gwt工程的index.html中加入外部方法

  1. <mce:script language="JavaScript"><!--  
  2. function callOutJs(str){  
  3.     alert('此处是外部js方法:'+ str);  
  4.     }  
  5. // --></mce:script>  

 

 

然后在onModuleLoad中java方法进行调用

  1. Button button2 = new Button("JAVA调用外部js");  
  2.         button2.addClickHandler(new ClickHandler() {  
  3.               
  4.             @Override  
  5.             public void onClick(ClickEvent event) {  
  6.                 //gwt中java调用js方法  
  7.                 callOutJS("外部js被调用");  
  8.                   
  9.             }  
  10.         });  
  11.     /** 
  12.      * JSNI方法 调用外部js方法 
  13.      * @param id 
  14.      */  
  15.     public static native void callOutJS(String str) /*-{ 
  16.         $wnd.callOutJs(str); 
  17.     }-*/;  

 

 

 

 

4.  外部js调用gwt的java方法

在onModuleLoad方法中调用  outJsCallGwt();

 

outJsCallGwt方法为

  1.     /** 
  2.      * 需要被调用的js方法 
  3.      * @param id 
  4.      */  
  5.     private static native void outJsCallGwt() /*-{ 
  6.     $wnd.outJsCallGwt = function (str) { 
  7.         alert("此处是gwt:"+ str); 
  8.     }; 
  9. }-*/;  

 

在index.html中加入按钮以调用

  1. <button οnclick="outJsCallGwt('外部按钮被点击')">点击</button>  

 

 

 

 

 

 

现贴出application和index.html代码

 

  1. package com.hw.client;  
  2. import com.google.gwt.core.client.EntryPoint;  
  3. import com.google.gwt.event.dom.client.ClickEvent;  
  4. import com.google.gwt.event.dom.client.ClickHandler;  
  5. import com.google.gwt.user.client.Window;  
  6. import com.google.gwt.user.client.ui.Button;  
  7. import com.google.gwt.user.client.ui.RootPanel;  
  8. public class TestCall implements EntryPoint {  
  9.     public void onModuleLoad() {  
  10.         Button button = new Button("java调用内部jsni的js方法");  
  11.         button.addClickHandler(new ClickHandler() {  
  12.               
  13.             @Override  
  14.             public void onClick(ClickEvent event) {  
  15.                 //gwt中java调用js方法  
  16.                 execute("js方法被调用");  
  17.                   
  18.             }  
  19.         });  
  20.           
  21.         Button button1 = new Button("内部jsni的js调用java方法");  
  22.         button1.addClickHandler(new ClickHandler() {  
  23.               
  24.             @Override  
  25.             public void onClick(ClickEvent event) {  
  26.                 //gwt中java调用js方法  
  27.                 executeJs("java方法被调用");  
  28.                   
  29.             }  
  30.         });  
  31.           
  32.         Button button2 = new Button("JAVA调用外部js");  
  33.         button2.addClickHandler(new ClickHandler() {  
  34.               
  35.             @Override  
  36.             public void onClick(ClickEvent event) {  
  37.                 //gwt中java调用js方法  
  38.                 callOutJS("外部js被调用");  
  39.                   
  40.             }  
  41.         });  
  42.           
  43.         RootPanel.get().add(button);  
  44.         RootPanel.get().add(button1);  
  45.         RootPanel.get().add(button2);  
  46.         outJsCallGwt();  
  47.     }  
  48.       
  49.     /** 
  50.      * JSNI方法 调用外部js方法 
  51.      * @param id 
  52.      */  
  53.     public static native void callOutJS(String str) /*-{ 
  54.         $wnd.callOutJs(str); 
  55.     }-*/;  
  56.       
  57.     /** 
  58.      * JSNI方法 
  59.      * @param id 
  60.      */  
  61.     public static native void execute(String str) /*-{ 
  62.         alert(str); 
  63.     }-*/;  
  64.       
  65.       
  66.     /** 
  67.      * JSNI方法,  里面调用java方法 javaAlert 
  68.      * @param id 
  69.      */  
  70.     public static native void executeJs(String str) /*-{ 
  71.         @com.hw.client.TestCall::javaAlert(Ljava/lang/String;)(str); 
  72.     }-*/;  
  73.       
  74.     /** 
  75.      * 被js方法调用 
  76.      * @param id 
  77.      */  
  78.     public static void javaAlert(String str){  
  79.         Window.alert(str);  
  80.     }  
  81.       
  82.     /** 
  83.      * 需要被调用的js方法 
  84.      * @param id 
  85.      */  
  86.     private static native void outJsCallGwt() /*-{ 
  87.     $wnd.outJsCallGwt = function (str) { 
  88.         alert("此处是gwt:"+ str); 
  89.     }; 
  90. }-*/;  
  91. }  

 

 

  1. <!doctype html>  
  2. <html>  
  3.   <head>  
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  5.     <link type="text/css" rel="stylesheet" href="TestCall.css" mce_href="TestCall.css">  
  6.     <title>Web Application Starter Project</title>  
  7.         <mce:script language=JavaScript><!--  
  8.         function callOutJs(str){  
  9.             alert('此处是外部js方法:'+ str);  
  10.         }  
  11.           
  12. // --></mce:script>  
  13.     <mce:script type="text/javascript" language="javascript" src="testcall/testcall.nocache.js" mce_src="testcall/testcall.nocache.js"></mce:script>  
  14.   </head>  
  15.   <body>  
  16.     <!-- OPTIONAL: include this if you want history support -->  
  17.     <iframe src="javascript:''" mce_src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>  
  18.       
  19.     <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->  
  20.     <noscript>  
  21.       <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">  
  22.         Your web browser must have JavaScript enabled  
  23.         in order for this application to display correctly.  
  24.       </div>  
  25.     </noscript>  
  26.     <h1>Web Application Starter Project</h1>  
  27.     <table align="center">  
  28.       <tr>  
  29.         <td colspan="2" style="font-weight:bold;" mce_style="font-weight:bold;">Please enter your name:</td>          
  30.       </tr>  
  31.       <tr>  
  32.          <button onclick="outJsCallGwt('外部按钮被点击')">点击</button>  
  33.         <td id="nameFieldContainer"></td>  
  34.         <td id="sendButtonContainer"></td>  
  35.       </tr>  
  36.       <tr>  
  37.         <td colspan="2" style="color:red;" mce_style="color:red;" id="errorLabelContainer"></td>  
  38.       </tr>  
  39.     </table>  
  40.   </body>  
  41. </html>  




备注： 以上html代码中<mce:script  应该为<script 由于csdn代码编辑器自动改变了值


  1.  <script language=JavaScript>
  2.         function callOutJs(str){  
  3.             alert('此处是外部js方法:'+ str);  
  4.         }  
  5.           
  6. <script>

这篇关于GWT开发——java 与 js 通过 jsni 相互调用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/988519。

相关文章

基于Python开发PDF转Doc格式小程序

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序，采用T
阅读更多...
使用Java发送邮件到QQ邮箱的完整指南

使用Java发送邮件到QQ邮箱的完整指南

《使用Java发送邮件到QQ邮箱的完整指南》在现代软件开发中,邮件发送功能是一个常见的需求,无论是用户注册验证、密码重置,还是系统通知,邮件都是一种重要的通信方式,本文将详细介绍如何使用Java编写程... 目录引言1. 准备工作1.1 获取QQ邮箱的SMTP授权码1.2 添加JavaMail依赖2. 实现
阅读更多...
Java嵌套for循环优化方案分享

Java嵌套for循环优化方案分享

《Java嵌套for循环优化方案分享》介绍了Java中嵌套for循环的优化方法,包括减少循环次数、合并循环、使用更高效的数据结构、并行处理、预处理和缓存、算法优化、尽量减少对象创建以及本地变量优化,通... 目录Java 嵌套 for 循环优化方案1. 减少循环次数2. 合并循环3. 使用更高效的数据结构4
阅读更多...
使用Python开发一个图像标注与OCR识别工具

使用Python开发一个图像标注与OCR识别工具

《使用Python开发一个图像标注与OCR识别工具》：本文主要介绍一个使用Python开发的工具,允许用户在图像上进行矩形标注,使用OCR对标注区域进行文本识别,并将结果保存为Excel文件,感兴... 目录项目简介1. 图像加载与显示2. 矩形标注3. OCR识别4. 标注的保存与加载5. 裁剪与重置图像
阅读更多...
java两个List的交集,并集方式

java两个List的交集,并集方式

《java两个List的交集,并集方式》文章主要介绍了Java中两个List的交集和并集的处理方法,推荐使用Apache的CollectionUtils工具类,因为它简单且不会改变原有集合,同时,文章... 目录Java两个List的交集,并集方法一方法二方法三总结java两个List的交集,并集方法一
阅读更多...
Spring AI集成DeepSeek三步搞定Java智能应用的详细过程

Spring AI集成DeepSeek三步搞定Java智能应用的详细过程

《SpringAI集成DeepSeek三步搞定Java智能应用的详细过程》本文介绍了如何使用SpringAI集成DeepSeek,一个国内顶尖的多模态大模型,SpringAI提供了一套统一的接口,简... 目录DeepSeek 介绍Spring AI 是什么？Spring AI 的主要功能包括1、环境准备2
阅读更多...
Spring AI集成DeepSeek实现流式输出的操作方法

Spring AI集成DeepSeek实现流式输出的操作方法

《SpringAI集成DeepSeek实现流式输出的操作方法》本文介绍了如何在SpringBoot中使用Sse（Server-SentEvents）技术实现流式输出,后端使用SpringMVC中的S... 目录一、后端代码二、前端代码三、运行项目小天有话说题外话参考资料前面一篇文章我们实现了《Spring
阅读更多...
Spring AI与DeepSeek实战一之快速打造智能对话应用

Spring AI与DeepSeek实战一之快速打造智能对话应用

《SpringAI与DeepSeek实战一之快速打造智能对话应用》本文详细介绍了如何通过SpringAI框架集成DeepSeek大模型,实现普通对话和流式对话功能,步骤包括申请API-KEY、项目搭... 目录一、概述二、申请DeepSeek的API-KEY三、项目搭建3.1. 开发环境要求3.2. mav
阅读更多...
Springboot的自动配置是什么及注意事项

Springboot的自动配置是什么及注意事项

《Springboot的自动配置是什么及注意事项》SpringBoot的自动配置（Auto-configuration）是指框架根据项目的依赖和应用程序的环境自动配置Spring应用上下文中的Bean... 目录核心概念：自动配置的关键特点：自动配置工作原理：示例：需要注意的点1.默认配置可能不适合所有场景
阅读更多...
使用Apache POI在Java中实现Excel单元格的合并

使用Apache POI在Java中实现Excel单元格的合并

《使用ApachePOI在Java中实现Excel单元格的合并》在日常工作中,Excel是一个不可或缺的工具,尤其是在处理大量数据时,本文将介绍如何使用ApachePOI库在Java中实现Excel... 目录工具类介绍工具类代码调用示例依赖配置总结在日常工作中，Excel 是一个不可或缺的工http://
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2