我如何从GWT中的Java访问一些JavaScript文件 [英] how can i access some javaScript file from java in GWT

查看:67
本文介绍了我如何从GWT中的Java访问一些JavaScript文件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在GWT项目中有helloJava.HTML,在该html文件中,我有此javascript代码

                        <script type="text/javascript">
function testJavaScript(var input){
    var var1inJS = "Default value";

    alert("Value of Var1 = " + var1inJS);
    var1inJS = input;
    alert("Value of Var1 = " + var1inJS);

    var var2inJS = "Waht is the value of Var2";

    alert("Value of Var2 = " + var2inJS);

}

现在我想从我的onmoduleLoad类(即从我的Java类)中调用此方法.

有可能吗?

hellojava.html文件

                            <!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="HelloJSNI.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>

    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="hellojsni/hellojsni.nocache.js"></script>

    <script type="text/javascript">
    function testJavascript(var input){
        window.jsniAlert();
        var var1inJS = "Default value";

        alert("Value of Var1 = " + var1inJS);
        var1inJS = input;
        alert("Value of Var1 = " + var1inJS);

        var var2inJS = "Waht is the value of Var2";

        alert("Value of Var2 = " + var2inJS);

    }

    function callJava(){

    }
    </script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe 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>JSNI EXAMPLE</h1>

    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;"></td>        
      </tr>
      <tr>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
      <tr>
        <td colspan="2" style="color:red;" id="errorLabelContainer"></td>
      </tr>
    </table>
  </body>
</html>

解决方案

Travis中的函数语法正确,问题在于调用函数的名称,而JS脚本不正确..

这是更正

  1. 函数声明中的错误,您不应将var用于 论据.

  2. 删除第一行window.jsniAlert();

  3. 将第二个函数function callJava(){的声明更正为function callJava(){

这是代码(让我们在JS testJSnative中调用该函数):

<script type="text/javascript">
function testJSnative(input){
    //window.jsniAlert();
    var var1inJS = "Default value";

    alert("Value of Var1 = " + var1inJS);
    var1inJS = input;
    alert("Value of Var1 = " + var1inJS);

    var var2inJS = "What is the value of Var2";

    alert("Value of Var2 = " + var2inJS);

}

function callJava(){

}
</script>

实现EntryPoint的类的示例:

  public void onModuleLoad() {

    Button jsniButton = new Button("call JS");
    jsniButton.addClickHandler(new ClickHandler() {

      @Override
      public void onClick(ClickEvent event) {

        callJavascript();
      }
    });
    RootPanel.get().add(jsniButton);
  } 

  public native void callJavascript() /*-{
    $wnd.testJSnative("hello");
  }-*/;

我希望这会有所帮助.

I have helloJava.HTML in my GWT project , within that html file , i have this javascript code

                        <script type="text/javascript">
function testJavaScript(var input){
    var var1inJS = "Default value";

    alert("Value of Var1 = " + var1inJS);
    var1inJS = input;
    alert("Value of Var1 = " + var1inJS);

    var var2inJS = "Waht is the value of Var2";

    alert("Value of Var2 = " + var2inJS);

}

now i want to call this method from my onmoduleLoad class(i.e from my java class).

is it possible ?

hellojava.html file

                            <!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="HelloJSNI.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>

    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="hellojsni/hellojsni.nocache.js"></script>

    <script type="text/javascript">
    function testJavascript(var input){
        window.jsniAlert();
        var var1inJS = "Default value";

        alert("Value of Var1 = " + var1inJS);
        var1inJS = input;
        alert("Value of Var1 = " + var1inJS);

        var var2inJS = "Waht is the value of Var2";

        alert("Value of Var2 = " + var2inJS);

    }

    function callJava(){

    }
    </script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe 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>JSNI EXAMPLE</h1>

    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;"></td>        
      </tr>
      <tr>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
      <tr>
        <td colspan="2" style="color:red;" id="errorLabelContainer"></td>
      </tr>
    </table>
  </body>
</html>

解决方案

The function syntax from Travis is correct, the problem is the name of the calling function and JS script is not right.

Here are the corrections

  1. Error in the function declaration, you should not use var for the argument.

  2. Remove the first row window.jsniAlert();

  3. Correct the declaration of the second function function callJava(){ to function callJava(){

Here is the code (lets call the function in JS testJSnative):

<script type="text/javascript">
function testJSnative(input){
    //window.jsniAlert();
    var var1inJS = "Default value";

    alert("Value of Var1 = " + var1inJS);
    var1inJS = input;
    alert("Value of Var1 = " + var1inJS);

    var var2inJS = "What is the value of Var2";

    alert("Value of Var2 = " + var2inJS);

}

function callJava(){

}
</script>

Example of class implementing EntryPoint:

  public void onModuleLoad() {

    Button jsniButton = new Button("call JS");
    jsniButton.addClickHandler(new ClickHandler() {

      @Override
      public void onClick(ClickEvent event) {

        callJavascript();
      }
    });
    RootPanel.get().add(jsniButton);
  } 

  public native void callJavascript() /*-{
    $wnd.testJSnative("hello");
  }-*/;

I hope this will be helpful.

这篇关于我如何从GWT中的Java访问一些JavaScript文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆