您的位置:首页 > 编程语言 > Java开发

gwt中java与js的相互调用

2014-04-29 20:11 260 查看
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("J***A调用外部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("J***A调用外部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;width:0;height:0;border:0"></iframe>



<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->

<noscript>

<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">

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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: