gwt中java与js的相互调用

浏览数：66 / 时间：2015年06月08日

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 onclick="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的相互调用,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 编程语言 Java C C# Javascript js Python Ruby Spring 程序 VB

相关文章

随机文章

您可能还喜欢

您可能还喜欢