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。

相关文章

JSON字符串转成java的Map对象详细步骤

JSON字符串转成java的Map对象详细步骤

《JSON字符串转成java的Map对象详细步骤》：本文主要介绍如何将JSON字符串转换为Java对象的步骤,包括定义Element类、使用Jackson库解析JSON和添加依赖,文中通过代码介绍... 目录步骤 1: 定义 Element 类步骤 2: 使用 Jackson 库解析 jsON步骤 3: 添
阅读更多...
Java中注解与元数据示例详解

Java中注解与元数据示例详解

《Java中注解与元数据示例详解》Java注解和元数据是编程中重要的概念,用于描述程序元素的属性和用途,：本文主要介绍Java中注解与元数据的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参... 目录一、引言二、元数据的概念2.1 定义2.2 作用三、Java 注解的基础3.1 注解的定义3.2 内
阅读更多...
Java中使用Java Mail实现邮件服务功能示例

Java中使用Java Mail实现邮件服务功能示例

《Java中使用JavaMail实现邮件服务功能示例》：本文主要介绍Java中使用JavaMail实现邮件服务功能的相关资料,文章还提供了一个发送邮件的示例代码,包括创建参数类、邮件类和执行结... 目录前言一、历史背景二编程、pom依赖三、API说明（一）Session （会话）（二）Message编程客
阅读更多...
Java中List转Map的几种具体实现方式和特点

Java中List转Map的几种具体实现方式和特点

《Java中List转Map的几种具体实现方式和特点》：本文主要介绍几种常用的List转Map的方式,包括使用for循环遍历、Java8StreamAPI、ApacheCommonsCollect... 目录前言1、使用for循环遍历：2、Java8 Stream API：3、Apache Commons
阅读更多...
JavaScript中的isTrusted属性及其应用场景详解

JavaScript中的isTrusted属性及其应用场景详解

《JavaScript中的isTrusted属性及其应用场景详解》在现代Web开发中,JavaScript是构建交互式应用的核心语言,随着前端技术的不断发展,开发者需要处理越来越多的复杂场景,例如事件... 目录引言一、问题背景二、isTrusted 属性的来源与作用1. isTrusted 的定义2. 为
阅读更多...
Java循环创建对象内存溢出的解决方法

Java循环创建对象内存溢出的解决方法

《Java循环创建对象内存溢出的解决方法》在Java中,如果在循环中不当地创建大量对象而不及时释放内存,很容易导致内存溢出（OutOfMemoryError）,所以本文给大家介绍了Java循环创建对象... 目录问题1. 解决方案2. 示例代码2.1 原始版本（可能导致内存溢出）2.2 修改后的版本问题在
阅读更多...
Java CompletableFuture如何实现超时功能

Java CompletableFuture如何实现超时功能

《JavaCompletableFuture如何实现超时功能》：本文主要介绍实现超时功能的基本思路以及CompletableFuture（之后简称CF）是如何通过代码实现超时功能的,需要的... 目录基本思路CompletableFuture 的实现1. 基本实现流程2. 静态条件分析3. 内存泄露 bug
阅读更多...
Java中Object类的常用方法小结

Java中Object类的常用方法小结

《Java中Object类的常用方法小结》JavaObject类是所有类的父类,位于java.lang包中,本文为大家整理了一些Object类的常用方法,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. public boolean equals(Object obj)2. public int ha
阅读更多...
SpringBoot项目中Maven剔除无用Jar引用的最佳实践

SpringBoot项目中Maven剔除无用Jar引用的最佳实践

《SpringBoot项目中Maven剔除无用Jar引用的最佳实践》在SpringBoot项目开发中,Maven是最常用的构建工具之一,通过Maven,我们可以轻松地管理项目所需的依赖,而,... 目录1、引言2、Maven 依赖管理的基础概念2.1 什么是 Maven 依赖2.2 Maven 的依赖传递机
阅读更多...
SpringBoot实现动态插拔的AOP的完整案例

SpringBoot实现动态插拔的AOP的完整案例

《SpringBoot实现动态插拔的AOP的完整案例》在现代软件开发中,面向切面编程（AOP）是一种非常重要的技术,能够有效实现日志记录、安全控制、性能监控等横切关注点的分离,在传统的AOP实现中,切... 目录引言一、AOP 概述1.1 什么是 AOP1.2 AOP 的典型应用场景1.3 为什么需要动态插
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2