gwt中java与js的相互调用

1. java通过jsni调用内部js

        Button button = new Button("java调用内部jsni的js方法");
        button.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                //gwt中java调用js方法
                execute("js方法被调用");

            }
        });
/**
     * JSNI方法
     * @param id
     */
    public static native void execute(String str) /*-{
        alert(str);
    }-*/;

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

Button button1 = new Button("内部jsni的js调用java方法");
        button1.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                //gwt中java调用js方法
                executeJs("java方法被调用");

            }
        });
    /**
     * JSNI方法,  里面调用java方法 javaAlert
     * @param id
     */
    public static native void executeJs(String str) /*-{
        @com.hw.client.TestCall::javaAlert(Ljava/lang/String;)(str);
    }-*/;

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

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

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

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

Button button2 = new Button("JAVA调用外部js");
        button2.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                //gwt中java调用js方法
                callOutJS("外部js被调用");

            }
        });
    /**
     * JSNI方法 调用外部js方法
     * @param id
     */
    public static native void callOutJS(String str) /*-{
        $wnd.callOutJs(str);
    }-*/;

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

在onModuleLoad方法中调用  outJsCallGwt();

outJsCallGwt方法为

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

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

<button onclick="outJsCallGwt('外部按钮被点击')">点击</button>

现贴出application和index.html代码

package com.hw.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;
public class TestCall implements EntryPoint {
    public void onModuleLoad() {
        Button button = new Button("java调用内部jsni的js方法");
        button.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                //gwt中java调用js方法
                execute("js方法被调用");

            }
        });

        Button button1 = new Button("内部jsni的js调用java方法");
        button1.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                //gwt中java调用js方法
                executeJs("java方法被调用");

            }
        });

        Button button2 = new Button("JAVA调用外部js");
        button2.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                //gwt中java调用js方法
                callOutJS("外部js被调用");

            }
        });

        RootPanel.get().add(button);
        RootPanel.get().add(button1);
        RootPanel.get().add(button2);
        outJsCallGwt();
    }

    /**
     * JSNI方法 调用外部js方法
     * @param id
     */
    public static native void callOutJS(String str) /*-{
        $wnd.callOutJs(str);
    }-*/;

    /**
     * JSNI方法
     * @param id
     */
    public static native void execute(String str) /*-{
        alert(str);
    }-*/;


    /**
     * JSNI方法,  里面调用java方法 javaAlert
     * @param id
     */
    public static native void executeJs(String str) /*-{
        @com.hw.client.TestCall::javaAlert(Ljava/lang/String;)(str);
    }-*/;

    /**
     * 被js方法调用
     * @param id
     */
    public static void javaAlert(String str){
        Window.alert(str);
    }

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

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="TestCall.css" mce_href="TestCall.css">
    <title>Web Application Starter Project</title>
        <mce:script language=JavaScript><!--
        function callOutJs(str){
            alert('此处是外部js方法:'+ str);
        }

// --></mce:script>
    <mce:script type="text/javascript" language="javascript" src="testcall/testcall.nocache.js" mce_src="testcall/testcall.nocache.js"></mce:script>
  </head>
  <body>
    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" mce_src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;0;height:0;border:0"></iframe>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style=" 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
    <h1>Web Application Starter Project</h1>
    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;" mce_style="font-weight:bold;">Please enter your name:</td>
      </tr>
      <tr>
         <button onclick="outJsCallGwt('外部按钮被点击')">点击</button>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
      <tr>
        <td colspan="2" style="color:red;" mce_style="color:red;" id="errorLabelContainer"></td>
      </tr>
    </table>
  </body>
</html>

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

 <script language=JavaScript>
        function callOutJs(str){
            alert('此处是外部js方法:'+ str);
        }

<script>