从Javabean调用javascript文件_Javascript_Java_Jsf

从Javabean调用javascript文件

javascript java jsf

从Javabean调用javascript文件,javascript,java,jsf,Javascript,Java,Jsf,我有3个文件： xhtml：我使用JSF制作了一个带有提交按钮的2字段表单（x:int，y:int） map.js：包含一个js函数 MbZoomtoXy.java：调用前面的Js函数我尝试做的是在表单中输入x和y。提交按钮应该给我x+y的“警告” index.xhtml MbZoomtoXy.java 您需要将map.js放在src/main/webapp/resources/js/map.js中，并包含在index.html index.html <?xml version='1

我有3个文件：

xhtml：我使用JSF制作了一个带有提交按钮的2字段表单（x:int，y:int）
map.js：包含一个js函数
MbZoomtoXy.java：调用前面的Js函数

我尝试做的是在表单中输入x和y。提交按钮应该给我x+y的“警告”

index.xhtml

MbZoomtoXy.java

您需要将

map.js

放在

src/main/webapp/resources/js/map.js

中，并包含在

index.html

index.html

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Facelet Title</title>
    <h:outputScript library="js" name="map.js" />
</h:head>
<h:body>

    <h:form id="form">

        <h:panelGrid columns="2" cellpadding="5">
            <p:outputLabel for="x-coor" value="X : " />
            <p:inputText id="x-coor" value="#{MbZoomtoXy.x}" required="true"/>

            <p:outputLabel for="y-coor" value="Y : " />
            <p:inputText id="y-coor" value="#{MbZoomtoXy.y}" required="true"/>
        </h:panelGrid>

        <p:commandButton value="Save" actionListener="#{MbZoomtoXy.save}"/>

    </h:form>

</h:body>
</html>

您需要将click处理程序添加到客户机代码中，您不能（以实际的方式）以这种方式从Java调用JavaScript函数。给按钮一个ID，并使用类似jQuery的东西添加一个单击处理程序。您可能需要对JSF文件进行一些修改，以防止它立即发回Java（或者在click事件中使用preventDefault）。所以，试着抓住它们，并将它们显示在警报对话框中。

function zoomToXy(x,y){
    var s = x + y;
    alert("x+y = "+s);  
}

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.context.RequestContext;

@ManagedBean
@SessionScoped
public class MbZoomtoXy {

    private MbZoomtoXy() {
        }

    public int getX() {
        return x;
    }

    public void setX(int x) {
        this.x = x;
    }

    public int getY() {
        return y;
    }

    public void setY(int y) {
        this.y = y;
    }

       int x,y;

    public MbZoomtoXy(int x, int y) {
        this.x = x;
        this.y = y;
    }

     //Here I don t know how to call zoomToXy(x,y) function of map.js
    public void save(){
        RequestContext requestContext = RequestContext.getCurrentInstance();  
        requestContext.execute("...");

    }

}

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Facelet Title</title>
    <h:outputScript library="js" name="map.js" />
</h:head>
<h:body>

    <h:form id="form">

        <h:panelGrid columns="2" cellpadding="5">
            <p:outputLabel for="x-coor" value="X : " />
            <p:inputText id="x-coor" value="#{MbZoomtoXy.x}" required="true"/>

            <p:outputLabel for="y-coor" value="Y : " />
            <p:inputText id="y-coor" value="#{MbZoomtoXy.y}" required="true"/>
        </h:panelGrid>

        <p:commandButton value="Save" actionListener="#{MbZoomtoXy.save}"/>

    </h:form>

</h:body>
</html>

package com.test;

import org.primefaces.context.RequestContext;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.html.HtmlSelectOneMenu;
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ActionEvent;
import javax.faces.event.AjaxBehaviorEvent;
import java.io.Serializable;
import java.util.Date;


@ManagedBean(name = "MbZoomtoXy")
@SessionScoped
public class MbZoomtoXy implements Serializable {

    public MbZoomtoXy() {
    }

    public int getX() {
        return x;
    }

    public void setX(int x) {
        this.x = x;
    }

    public int getY() {
        return y;
    }

    public void setY(int y) {
        this.y = y;
    }

    int x,y;

    public MbZoomtoXy(int x, int y) {
        this.x = x;
        this.y = y;
    }

    //Here I don t know how to call zoomToXy(x,y) function of map.js
    public void save(){
        RequestContext requestContext = RequestContext.getCurrentInstance();
        requestContext.execute(String.format("zoomToXy(%1$d, %2$d)", x, y));
    }
}