1. java通过jsni调用内部js

 


  1.         Button button = new Button("java调用内部jsni的js方法");  
  2. new ClickHandler() {  
  3.               
  4. @Override  
  5. public void onClick(ClickEvent event) {  
  6. //gwt中java调用js方法  
  7. "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. new ClickHandler() {  
  3.               
  4. @Override  
  5. public void onClick(ClickEvent event) {  
  6. //gwt中java调用js方法  
  7. "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. '此处是外部js方法:'+ str);  
  4.     }  
  5. // --></mce:script>  


 

 

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


  1. Button button2 = new Button("JAVA调用外部js");  
  2. new ClickHandler() {  
  3.               
  4. @Override  
  5. public void onClick(ClickEvent event) {  
  6. //gwt中java调用js方法  
  7. "外部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. new Button("java调用内部jsni的js方法");  
  11. new ClickHandler() {  
  12.               
  13. @Override  
  14. public void onClick(ClickEvent event) {  
  15. //gwt中java调用js方法  
  16. "js方法被调用");  
  17.                   
  18.             }  
  19.         });  
  20.           
  21. new Button("内部jsni的js调用java方法");  
  22. new ClickHandler() {  
  23.               
  24. @Override  
  25. public void onClick(ClickEvent event) {  
  26. //gwt中java调用js方法  
  27. "java方法被调用");  
  28.                   
  29.             }  
  30.         });  
  31.           
  32. new Button("JAVA调用外部js");  
  33. new ClickHandler() {  
  34.               
  35. @Override  
  36. public void onClick(ClickEvent event) {  
  37. //gwt中java调用js方法  
  38. "外部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>